Rename ui-lib to lib, split Begin into smaller components, add Credits, bump version to 1.0 from package.json

14 files changed, 240 insertions, 155 deletions

diff --git a/eslint.config.js b/eslint.config.js
index 37bdda7..71da530 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -20,7 +20,7 @@ const gameplayDirectories = [
   'rng/**/*.{ts,js,svelte}',
   'time/**/*.{ts,js,svelte}',
   'loading/**/*.{ts,js,svelte}',
-  'ui-lib/**/*.{ts,js,svelte}',
+  'lib/**/*.{ts,js,svelte}',
   'routes/**/*.{ts,js,svelte}',
   'utils/**/*.{ts,js,svelte}'
 ]
diff --git a/lib/components/AppTitle.svelte b/lib/components/AppTitle.svelte
new file mode 100644
index 0000000..ce5c859
--- /dev/null
+++ b/lib/components/AppTitle.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  interface Props {
+    size?: number
+    subtitle?: string | null
+    letterSpacing?: number
+  }
+
+  let { size = 38, subtitle = null, letterSpacing = 2 }: Props = $props()
+</script>
+
+<div class="app-title">
+  <p class="name" style:font-size="{size}px" style:letter-spacing="{letterSpacing}px">
+    Hollowdark
+  </p>
+  {#if subtitle}
+    <p class="subtitle">{subtitle}</p>
+  {/if}
+</div>
+
+<style>
+  .app-title {
+    text-align: center;
+  }
+
+  .name {
+    font-family: var(--font-body);
+    font-style: italic;
+    font-weight: 400;
+    color: var(--color-text);
+    margin: 0 0 var(--space-6);
+  }
+
+  .subtitle {
+    font-family: var(--font-ui);
+    font-size: 11px;
+    color: var(--color-text-tertiary);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    margin: 0;
+  }
+</style>
diff --git a/lib/components/AppVersion.svelte b/lib/components/AppVersion.svelte
new file mode 100644
index 0000000..315a47b
--- /dev/null
+++ b/lib/components/AppVersion.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { APP_VERSION } from '@hollowdark/lib/version'
+</script>
+
+<p class="app-version">v {APP_VERSION}</p>
+
+<style>
+  .app-version {
+    position: absolute;
+    bottom: var(--space-6);
+    left: 0;
+    right: 0;
+    margin: 0;
+    text-align: center;
+    font-family: var(--font-ui);
+    font-size: 10px;
+    color: #3d382f;
+    letter-spacing: 1px;
+  }
+</style>
diff --git a/lib/components/BeginActions.svelte b/lib/components/BeginActions.svelte
new file mode 100644
index 0000000..3ed96c4
--- /dev/null
+++ b/lib/components/BeginActions.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import MenuButton from '@hollowdark/lib/components/MenuButton.svelte'
+  import type { BeginState } from '@hollowdark/loading/session'
+
+  interface Props {
+    state: BeginState
+    onBegin: () => void
+    onContinue?: () => void
+    onSettings: () => void
+    onCredits: () => void
+  }
+
+  let {
+    state,
+    onBegin,
+    onContinue,
+    onSettings,
+    onCredits
+  }: Props = $props()
+
+  function handleContinue(): void {
+    onContinue?.()
+  }
+</script>
+
+<div class="begin-actions">
+  {#if state.kind === 'first-ever'}
+    <MenuButton variant="primary" onclick={onBegin}>Begin</MenuButton>
+  {:else if state.kind === 'returning-active'}
+    <MenuButton variant="primary" onclick={handleContinue}>
+      Continue {state.characterName}'s life
+    </MenuButton>
+    <MenuButton variant="secondary" onclick={onBegin}>Begin a new life</MenuButton>
+  {:else}
+    <MenuButton variant="primary" onclick={handleContinue}>Continue</MenuButton>
+    <MenuButton variant="secondary" onclick={onBegin}>Begin a new life</MenuButton>
+  {/if}
+
+  <MenuButton variant="tertiary" onclick={onSettings}>Settings</MenuButton>
+  <MenuButton variant="tertiary" onclick={onCredits}>Credits</MenuButton>
+</div>
+
+<style>
+  .begin-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-8);
+  }
+</style>
diff --git a/lib/components/BeginScreen.svelte b/lib/components/BeginScreen.svelte
new file mode 100644
index 0000000..5832a42
--- /dev/null
+++ b/lib/components/BeginScreen.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import AppTitle from '@hollowdark/lib/components/AppTitle.svelte'
+  import AppVersion from '@hollowdark/lib/components/AppVersion.svelte'
+  import BeginActions from '@hollowdark/lib/components/BeginActions.svelte'
+  import type { BeginState } from '@hollowdark/loading/session'
+
+  interface Props {
+    state: BeginState
+    onBegin: () => void
+    onContinue?: () => void
+    onSettings: () => void
+    onCredits: () => void
+  }
+
+  let {
+    state,
+    onBegin,
+    onContinue,
+    onSettings,
+    onCredits
+  }: Props = $props()
+</script>
+
+<section class="begin">
+  <div class="top">
+    <AppTitle size={38} subtitle="A Literary Life Simulation" />
+  </div>
+
+  <BeginActions {state} {onBegin} {onContinue} {onSettings} {onCredits} />
+
+  <AppVersion />
+</section>
+
+<style>
+  .begin {
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-12);
+    position: relative;
+  }
+
+  .top {
+    margin-bottom: 120px;
+  }
+</style>
diff --git a/ui-lib/components/InitialLoadScreen.svelte b/lib/components/InitialLoadScreen.svelte
index 105d283..3800715 100644
--- a/ui-lib/components/InitialLoadScreen.svelte
+++ b/lib/components/InitialLoadScreen.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
-  import ProgressBar from '@hollowdark/ui-lib/components/ProgressBar.svelte'
+  import AppTitle from '@hollowdark/lib/components/AppTitle.svelte'
+  import ProgressBar from '@hollowdark/lib/components/ProgressBar.svelte'
   import { loadingProgress } from '@hollowdark/loading/progress'
 
   const progress = $derived($loadingProgress)
 </script>
 
 <section class="initial-load">
-  <p class="title">Hollowdark</p>
+  <div class="top">
+    <AppTitle size={32} letterSpacing={1} />
+  </div>
 
   <div class="bar">
     <ProgressBar value={progress.percentage} />
@@ -27,12 +30,7 @@
     text-align: center;
   }
 
-  .title {
-    font-family: var(--font-body);
-    font-size: 32px;
-    font-style: italic;
-    font-weight: 400;
-    letter-spacing: 1px;
+  .top {
     margin-bottom: 120px;
   }
 
@@ -45,7 +43,7 @@
     font-size: 12px;
     color: var(--color-text-secondary);
     letter-spacing: 0.5px;
-    margin-bottom: var(--space-2);
+    margin: 0 0 var(--space-2);
   }
 
   .note {
@@ -53,5 +51,6 @@
     font-size: 11px;
     color: var(--color-text-tertiary);
     letter-spacing: 0.3px;
+    margin: 0;
   }
 </style>
diff --git a/lib/components/MenuButton.svelte b/lib/components/MenuButton.svelte
new file mode 100644
index 0000000..1753155
--- /dev/null
+++ b/lib/components/MenuButton.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  type Variant = 'primary' | 'secondary' | 'tertiary'
+
+  interface Props {
+    variant?: Variant
+    onclick: () => void
+    children: import('svelte').Snippet
+  }
+
+  let { variant = 'primary', onclick, children }: Props = $props()
+</script>
+
+<button class="menu-button {variant}" {onclick}>
+  {@render children()}
+</button>
+
+<style>
+  .menu-button {
+    font-family: var(--font-body);
+    letter-spacing: 0.3px;
+    transition: color var(--transition-fast);
+  }
+
+  .primary {
+    font-size: var(--text-lg);
+    color: var(--color-accent);
+    letter-spacing: 0.5px;
+  }
+
+  .primary:hover {
+    color: var(--color-text);
+  }
+
+  .secondary {
+    font-size: 15px;
+    color: var(--color-text-secondary);
+  }
+
+  .secondary:hover {
+    color: var(--color-text);
+  }
+
+  .tertiary {
+    font-size: 13px;
+    color: var(--color-text-tertiary);
+  }
+
+  .tertiary:hover {
+    color: var(--color-text-secondary);
+  }
+</style>
diff --git a/ui-lib/components/ProgressBar.svelte b/lib/components/ProgressBar.svelte
index 21c9e68..21c9e68 100644
--- a/ui-lib/components/ProgressBar.svelte
+++ b/lib/components/ProgressBar.svelte
diff --git a/lib/version.ts b/lib/version.ts
new file mode 100644
index 0000000..e8322e3
--- /dev/null
+++ b/lib/version.ts
@@ -0,0 +1,12 @@
+import pkg from '@hollowdark/package.json'
+
+const [major, minor] = pkg.version.split('.')
+
+/**
+ * The app's version in short display form (`<major>.<minor>`), derived from
+ * the `version` field in `package.json`. Displayed in the UI footer.
+ */
+export const APP_VERSION: string = `${major}.${minor}`
+
+/** The full semver string from `package.json`. */
+export const APP_VERSION_FULL: string = pkg.version
diff --git a/package.json b/package.json
index 7f1b2f1..534b382 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "hollowdark",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
-  "description": "A literary life simulation. Modern invented world. One continuous timeline.",
+  "description": "A literary life simulation. Characters live, love, suffer, choose, die. The game tells their lives.",
   "packageManager": "[email protected]",
   "engines": {
     "node": ">=20.11"
diff --git a/routes/+page.svelte b/routes/+page.svelte
index b7a0146..6ffde47 100644
--- a/routes/+page.svelte
+++ b/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import BeginScreen from '@hollowdark/ui-lib/components/BeginScreen.svelte'
-  import InitialLoadScreen from '@hollowdark/ui-lib/components/InitialLoadScreen.svelte'
+  import BeginScreen from '@hollowdark/lib/components/BeginScreen.svelte'
+  import InitialLoadScreen from '@hollowdark/lib/components/InitialLoadScreen.svelte'
   import { runStubInitialLoad } from '@hollowdark/loading/stub'
   import { detectBeginState, type BeginState } from '@hollowdark/loading/session'
 
@@ -19,6 +19,7 @@
   function handleBegin(): void {}
   function handleContinue(): void {}
   function handleSettings(): void {}
+  function handleCredits(): void {}
 </script>
 
 {#if view === 'loading'}
@@ -29,5 +30,6 @@
     onBegin={handleBegin}
     onContinue={handleContinue}
     onSettings={handleSettings}
+    onCredits={handleCredits}
   />
 {/if}
diff --git a/svelte.config.js b/svelte.config.js
index 9c9ccc0..f6a0a05 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -23,7 +23,7 @@ const config = {
       hooks: {
         client: 'hooks/client.ts'
       },
-      lib: 'ui-lib',
+      lib: 'lib',
       params: 'params',
       routes: 'routes',
       serviceWorker: 'service-worker.ts'
diff --git a/tsconfig.json b/tsconfig.json
index 3af4c48..6e2b9d0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -40,8 +40,8 @@
     "hooks/**/*.ts",
     "routes/**/*.ts",
     "routes/**/*.svelte",
-    "ui-lib/**/*.ts",
-    "ui-lib/**/*.svelte",
+    "lib/**/*.ts",
+    "lib/**/*.svelte",
     "engine/**/*.ts",
     "events/**/*.ts",
     "content-system/**/*.ts",
diff --git a/ui-lib/components/BeginScreen.svelte b/ui-lib/components/BeginScreen.svelte
deleted file mode 100644
index c095f61..0000000
--- a/ui-lib/components/BeginScreen.svelte
+++ /dev/null
@@ -1,138 +0,0 @@
-<script lang="ts">
-  import type { BeginState } from '@hollowdark/loading/session'
-
-  interface Props {
-    state: BeginState
-    appVersion?: string
-    onBegin: () => void
-    onContinue?: () => void
-    onSettings: () => void
-  }
-
-  let {
-    state,
-    appVersion = 'v 0.1',
-    onBegin,
-    onContinue,
-    onSettings
-  }: Props = $props()
-
-  function handleContinue(): void {
-    onContinue?.()
-  }
-</script>
-
-<section class="begin">
-  <div class="top">
-    <p class="title">Hollowdark</p>
-    <p class="subtitle">A life simulation</p>
-  </div>
-
-  <div class="actions">
-    {#if state.kind === 'first-ever'}
-      <button class="primary" onclick={onBegin}>Begin</button>
-    {:else if state.kind === 'returning-active'}
-      <button class="primary" onclick={handleContinue}>
-        Continue {state.characterName}'s life
-      </button>
-      <button class="secondary" onclick={onBegin}>Begin a new life</button>
-    {:else}
-      <button class="primary" onclick={handleContinue}>Continue</button>
-      <button class="secondary" onclick={onBegin}>Begin a new life</button>
-    {/if}
-
-    <button class="tertiary" onclick={onSettings}>Settings</button>
-  </div>
-
-  <p class="version">{appVersion}</p>
-</section>
-
-<style>
-  .begin {
-    min-height: 100dvh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: var(--space-12);
-    position: relative;
-    text-align: center;
-  }
-
-  .top {
-    margin-bottom: 120px;
-  }
-
-  .title {
-    font-family: var(--font-body);
-    font-size: 38px;
-    font-style: italic;
-    font-weight: 400;
-    letter-spacing: 2px;
-    color: var(--color-text);
-    margin-bottom: var(--space-6);
-  }
-
-  .subtitle {
-    font-family: var(--font-ui);
-    font-size: 11px;
-    color: var(--color-text-tertiary);
-    letter-spacing: 2px;
-    text-transform: uppercase;
-  }
-
-  .actions {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--space-8);
-  }
-
-  .primary {
-    font-family: var(--font-body);
-    font-size: var(--text-lg);
-    color: var(--color-accent);
-    letter-spacing: 0.5px;
-    transition: color var(--transition-fast);
-  }
-
-  .primary:hover {
-    color: var(--color-text);
-  }
-
-  .secondary {
-    font-family: var(--font-body);
-    font-size: 15px;
-    color: var(--color-text-secondary);
-    letter-spacing: 0.3px;
-    transition: color var(--transition-fast);
-  }
-
-  .secondary:hover {
-    color: var(--color-text);
-  }
-
-  .tertiary {
-    font-family: var(--font-body);
-    font-size: 13px;
-    color: var(--color-text-tertiary);
-    letter-spacing: 0.3px;
-    transition: color var(--transition-fast);
-  }
-
-  .tertiary:hover {
-    color: var(--color-text-secondary);
-  }
-
-  .version {
-    position: absolute;
-    bottom: var(--space-6);
-    left: 0;
-    right: 0;
-    text-align: center;
-    font-family: var(--font-ui);
-    font-size: 10px;
-    color: #3d382f;
-    letter-spacing: 1px;
-  }
-</style>