@soulcraft/theme 1.0.0

package/src/components/FontSizeControl.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Component } from 'svelte';
+import type { FontSizeSettings } from '../stores/font-size.svelte.js';
+
+export interface FontSizeControlProps {
+  /** Current content area font size in pixels. */
+  contentSize: number;
+  /** Current interface chrome font size in pixels. */
+  interfaceSize: number;
+  /** Called when the user selects a new preset size. */
+  onchange: (settings: FontSizeSettings) => void;
+  /** Called when the user clicks Reset. */
+  onreset?: () => void;
+}
+
+declare const FontSizeControl: Component<FontSizeControlProps>;
+export default FontSizeControl;

package/src/components/ThemeCustomizer.svelte

@@ -0,0 +1,359 @@
+<!--
+@component ThemeCustomizer
+@description Full-color editor for creating and tweaking custom themes.
+
+Renders a two-column layout: a scrollable color editor on the left and a live
+preview panel on the right. The editor shows ColorInput sliders organized into
+six labeled sections (Backgrounds, Text, Primary, Accent, Glass, Status) plus
+text inputs for font names.
+
+Maintains an internal draft copy of the theme so the user can edit freely
+before applying. Changes are shown live in the preview mini-panel. The draft
+resets whenever the parent passes a new `theme` prop.
+
+@props
+  theme     - The base ThemeDefinition to edit. Changes to this prop reset the draft.
+  onapply   - Called with the complete updated ThemeDefinition when Apply is clicked.
+  oncancel  - Optional. Called when the Cancel button is clicked.
+-->
+<script lang="ts">
+import type { ThemeDefinition, ThemeColors, ThemeFonts } from '../types.js';
+import ColorInput from './ColorInput.svelte';
+
+interface Props {
+  theme: ThemeDefinition;
+  onapply: (theme: ThemeDefinition) => void;
+  oncancel?: () => void;
+}
+
+let { theme, onapply, oncancel }: Props = $props();
+
+// ── Draft state ───────────────────────────────────────────────────────────────
+
+/** Mutable draft copy of the theme colors. Edited before Apply is clicked. */
+let draftColors = $state<ThemeColors>({ ...theme.colors });
+/** Mutable draft copy of the font settings. */
+let draftFonts = $state<ThemeFonts>({ ...theme.fonts });
+
+// Reset draft whenever the parent passes a different theme.
+// The effect reads theme.colors / theme.fonts; writing to draftColors does not
+// create a circular dependency because the effect does not read draftColors.
+$effect(() => {
+  draftColors = { ...theme.colors };
+  draftFonts = { ...theme.fonts };
+});
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function updateColor(key: keyof ThemeColors, value: string) {
+  draftColors = { ...draftColors, [key]: value };
+}
+
+function handleApply() {
+  onapply({
+    ...theme,
+    colors: { ...draftColors },
+    fonts: { ...draftFonts },
+  });
+}
+
+// ── Color section definitions ─────────────────────────────────────────────────
+
+/** Sections group related color slots in the editor for readability. */
+const COLOR_SECTIONS: { label: string; keys: (keyof ThemeColors)[] }[] = [
+  { label: 'Backgrounds', keys: ['bgBase', 'bgSurface', 'bgElevated'] },
+  { label: 'Text',        keys: ['textPrimary', 'textSecondary'] },
+  { label: 'Primary',     keys: ['primary', 'primaryLight', 'primaryDark'] },
+  { label: 'Accent',      keys: ['accent', 'accentLight'] },
+  { label: 'Glass',       keys: ['glass', 'glassBorder'] },
+  { label: 'Status',      keys: ['success', 'warning', 'error'] },
+];
+
+const COLOR_LABELS: Record<keyof ThemeColors, string> = {
+  bgBase:        'Base',
+  bgSurface:     'Surface',
+  bgElevated:    'Elevated',
+  textPrimary:   'Primary',
+  textSecondary: 'Secondary',
+  primary:       'Primary',
+  primaryLight:  'Light',
+  primaryDark:   'Dark',
+  accent:        'Accent',
+  accentLight:   'Light',
+  glass:         'Glass',
+  glassBorder:   'Border',
+  success:       'Success',
+  warning:       'Warning',
+  error:         'Error',
+};
+</script>
+
+<div class="customizer">
+  <!-- ── Left: color editor ─────────────────────────────────────────────── -->
+  <div class="editor">
+    {#each COLOR_SECTIONS as section}
+      <div class="section">
+        <div class="section-label">{section.label}</div>
+        <div class="color-grid">
+          {#each section.keys as key}
+            <ColorInput
+              label={COLOR_LABELS[key]}
+              value={draftColors[key]}
+              onchange={(v) => updateColor(key, v)}
+            />
+          {/each}
+        </div>
+      </div>
+    {/each}
+
+    <!-- Font inputs -->
+    <div class="section">
+      <div class="section-label">Typography</div>
+      <div class="font-fields">
+        <label class="font-field">
+          <span class="font-label">Display Font</span>
+          <input
+            type="text"
+            class="font-input"
+            value={draftFonts.displayFont}
+            oninput={(e) => {
+              draftFonts = { ...draftFonts, displayFont: (e.target as HTMLInputElement).value };
+            }}
+            placeholder="system-ui"
+          />
+        </label>
+        <label class="font-field">
+          <span class="font-label">Body Font</span>
+          <input
+            type="text"
+            class="font-input"
+            value={draftFonts.bodyFont}
+            oninput={(e) => {
+              draftFonts = { ...draftFonts, bodyFont: (e.target as HTMLInputElement).value };
+            }}
+            placeholder="system-ui"
+          />
+        </label>
+      </div>
+    </div>
+  </div>
+
+  <!-- ── Right: live preview + actions ──────────────────────────────────── -->
+  <div class="sidebar">
+    <div class="preview-label">Preview</div>
+    <div
+      class="preview-card"
+      style="background: linear-gradient(135deg, {draftColors.bgBase} 0%, {draftColors.bgSurface} 100%)"
+    >
+      <div class="preview-bar" style="background: {draftColors.primary}"></div>
+      <div class="preview-body">
+        <div class="preview-heading" style="color: {draftColors.textPrimary}; font-family: {draftFonts.displayFont}, system-ui">
+          Heading Text
+        </div>
+        <div class="preview-muted" style="color: {draftColors.textSecondary}">
+          Secondary text
+        </div>
+        <div class="preview-dots">
+          <div class="dot" style="background: {draftColors.primary}"></div>
+          <div class="dot" style="background: {draftColors.accent}"></div>
+          <div class="dot" style="background: {draftColors.success}"></div>
+          <div class="dot" style="background: {draftColors.warning}"></div>
+          <div class="dot" style="background: {draftColors.error}"></div>
+        </div>
+        <div class="preview-glass" style="background: {draftColors.glass}; border-color: {draftColors.glassBorder}">
+          <span style="color: {draftColors.textPrimary}; font-size: 9px">Glass panel</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="actions">
+      {#if oncancel}
+        <button class="btn-cancel" onclick={oncancel}>Cancel</button>
+      {/if}
+      <button class="btn-apply" onclick={handleApply}>Apply</button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .customizer {
+    display: flex;
+    gap: 20px;
+    min-width: 0;
+  }
+
+  .editor {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    overflow-y: auto;
+    min-width: 0;
+  }
+
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .section-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--theme-text-secondary, #a0aec0);
+    padding-bottom: 2px;
+    border-bottom: 1px solid var(--theme-glass-border, rgba(255,255,255,0.1));
+  }
+
+  .color-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .font-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .font-field {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+
+  .font-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--theme-text-secondary, #a0aec0);
+  }
+
+  .font-input {
+    padding: 5px 8px;
+    border-radius: 5px;
+    border: 1px solid var(--theme-glass-border, rgba(255,255,255,0.1));
+    background: var(--theme-glass, rgba(255,255,255,0.05));
+    color: var(--theme-text-primary, #e8eaf0);
+    font-size: 12px;
+    font-family: monospace;
+    outline: none;
+  }
+
+  .font-input:focus {
+    border-color: var(--theme-primary, #2a9d8f);
+  }
+
+  /* ── Sidebar ──────────────────────────────────────────────────────────── */
+
+  .sidebar {
+    width: 180px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .preview-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--theme-text-secondary, #a0aec0);
+  }
+
+  .preview-card {
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid var(--theme-glass-border, rgba(255,255,255,0.1));
+  }
+
+  .preview-bar {
+    height: 4px;
+    width: 100%;
+  }
+
+  .preview-body {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .preview-heading {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.2;
+  }
+
+  .preview-muted {
+    font-size: 10px;
+  }
+
+  .preview-dots {
+    display: flex;
+    gap: 4px;
+    margin-top: 2px;
+  }
+
+  .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+
+  .preview-glass {
+    margin-top: 4px;
+    padding: 6px 8px;
+    border-radius: 5px;
+    border: 1px solid;
+  }
+
+  /* ── Actions ──────────────────────────────────────────────────────────── */
+
+  .actions {
+    display: flex;
+    gap: 6px;
+    flex-direction: column;
+    margin-top: auto;
+  }
+
+  .btn-apply,
+  .btn-cancel {
+    padding: 7px 14px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: all 0.12s ease;
+    border: 1px solid;
+    width: 100%;
+  }
+
+  .btn-apply {
+    background: var(--theme-primary, #2a9d8f);
+    border-color: var(--theme-primary, #2a9d8f);
+    color: var(--theme-bg-base, #0a0e1a);
+    font-weight: 600;
+  }
+
+  .btn-apply:hover {
+    background: var(--theme-primary-light, #3ab8a8);
+    border-color: var(--theme-primary-light, #3ab8a8);
+  }
+
+  .btn-cancel {
+    background: transparent;
+    border-color: var(--theme-glass-border, rgba(255,255,255,0.1));
+    color: var(--theme-text-secondary, #a0aec0);
+  }
+
+  .btn-cancel:hover {
+    border-color: var(--theme-text-secondary, #a0aec0);
+    color: var(--theme-text-primary, #e8eaf0);
+  }
+</style>

package/src/components/ThemeCustomizer.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from 'svelte';
+import type { ThemeDefinition } from '../types.js';
+
+export interface ThemeCustomizerProps {
+  /** The theme being customized. */
+  theme: ThemeDefinition;
+  /** Called when the user applies their edits. */
+  onapply: (theme: ThemeDefinition) => void;
+  /** Called when the user cancels without applying. */
+  oncancel?: () => void;
+}
+
+declare const ThemeCustomizer: Component<ThemeCustomizerProps>;
+export default ThemeCustomizer;

package/src/components/ThemePicker.svelte

@@ -0,0 +1,129 @@
+<!--
+@component ThemePicker
+@description Swatch grid for selecting a theme, grouped by category.
+
+Renders three labeled sections (Soulcraft, Dark Themes, Light Themes), each
+containing a responsive grid of ThemeSwatch cards. Optionally shows a
+"Customize..." button at the bottom to open the ThemeCustomizer.
+
+Purely presentational — delegates all state management to the parent via
+`onselect` and `oncustomize` callbacks.
+
+@props
+  currentThemeId  - The ID of the currently active theme.
+  onselect        - Called with the chosen theme ID when a swatch is clicked.
+  oncustomize     - Optional. Called when the "Customize..." button is clicked.
+-->
+<script lang="ts">
+import { THEME_CATALOG, getThemesGrouped } from '../catalog.js';
+import type { ThemeDefinition } from '../types.js';
+import ThemeSwatch from './ThemeSwatch.svelte';
+
+interface Props {
+  currentThemeId: string;
+  onselect: (themeId: string) => void;
+  oncustomize?: () => void;
+}
+
+let { currentThemeId, onselect, oncustomize }: Props = $props();
+
+const groups = getThemesGrouped();
+</script>
+
+<div class="theme-picker">
+  <!-- Soulcraft section -->
+  <div class="group">
+    <div class="group-label">Soulcraft</div>
+    <div class="swatches">
+      {#each groups.soulcraft as theme}
+        <ThemeSwatch
+          {theme}
+          selected={currentThemeId === theme.meta.id}
+          {onselect}
+        />
+      {/each}
+    </div>
+  </div>
+
+  <!-- Dark themes section -->
+  <div class="group">
+    <div class="group-label">Dark Themes</div>
+    <div class="swatches">
+      {#each groups.dark as theme}
+        <ThemeSwatch
+          {theme}
+          selected={currentThemeId === theme.meta.id}
+          {onselect}
+        />
+      {/each}
+    </div>
+  </div>
+
+  <!-- Light themes section -->
+  <div class="group">
+    <div class="group-label">Light Themes</div>
+    <div class="swatches">
+      {#each groups.light as theme}
+        <ThemeSwatch
+          {theme}
+          selected={currentThemeId === theme.meta.id}
+          {onselect}
+        />
+      {/each}
+    </div>
+  </div>
+
+  {#if oncustomize}
+    <button class="customize-btn" onclick={oncustomize}>
+      Customize...
+    </button>
+  {/if}
+</div>
+
+<style>
+  .theme-picker {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .group-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--theme-text-secondary, #a0aec0);
+    padding-bottom: 2px;
+    border-bottom: 1px solid var(--theme-glass-border, rgba(255,255,255,0.1));
+  }
+
+  .swatches {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
+    gap: 6px;
+  }
+
+  .customize-btn {
+    align-self: flex-start;
+    padding: 6px 14px;
+    border-radius: 6px;
+    border: 1px solid var(--theme-glass-border, rgba(255,255,255,0.1));
+    background: var(--theme-glass, rgba(255,255,255,0.05));
+    color: var(--theme-text-secondary, #a0aec0);
+    font-size: 12px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .customize-btn:hover {
+    border-color: var(--theme-primary, #2a9d8f);
+    color: var(--theme-primary, #2a9d8f);
+  }
+</style>

package/src/components/ThemePicker.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'svelte';
+
+export interface ThemePickerProps {
+  /** Currently active theme ID. */
+  currentThemeId: string;
+  /** Called when the user selects a theme. */
+  onselect: (themeId: string) => void;
+  /** Called when the user clicks "Customize". */
+  oncustomize?: () => void;
+}
+
+declare const ThemePicker: Component<ThemePickerProps>;
+export default ThemePicker;

package/src/components/ThemeSwatch.svelte

@@ -0,0 +1,136 @@
+<!--
+@component ThemeSwatch
+@description Mini preview card for a single theme in the ThemePicker grid.
+
+Renders a compact visual preview of the theme's color palette: background gradient,
+primary color bar, accent dot, and the theme name. Highlights the currently
+selected theme with a border ring.
+
+@props
+  theme     - The ThemeDefinition to preview.
+  selected  - Whether this theme is currently selected.
+  onselect  - Callback invoked when the user clicks this swatch.
+-->
+<script lang="ts">
+import type { ThemeDefinition } from '../types.js';
+
+interface Props {
+  theme: ThemeDefinition;
+  selected: boolean;
+  onselect: (id: string) => void;
+}
+
+let { theme, selected, onselect }: Props = $props();
+
+const { colors } = theme;
+
+// Inline style for the swatch background — uses the theme's actual colors
+const bgStyle = `background: linear-gradient(135deg, ${colors.bgBase} 0%, ${colors.bgSurface} 100%)`;
+const primaryStyle = `background: ${colors.primary}`;
+const accentStyle  = `background: ${colors.accent}`;
+const textStyle    = `color: ${colors.textPrimary}`;
+const mutedStyle   = `color: ${colors.textSecondary}`;
+</script>
+
+<button
+  class="swatch"
+  class:selected
+  onclick={() => onselect(theme.meta.id)}
+  title={theme.meta.name}
+  aria-pressed={selected}
+>
+  <div class="preview" style={bgStyle}>
+    <div class="color-bar" style={primaryStyle}></div>
+    <div class="dots">
+      <div class="dot" style={accentStyle}></div>
+      <div class="dot secondary" style={`background: ${colors.textSecondary}`}></div>
+    </div>
+    <div class="lines">
+      <div class="line" style={`background: ${colors.textPrimary}; opacity: 0.6; width: 65%`}></div>
+      <div class="line" style={`background: ${colors.textSecondary}; opacity: 0.4; width: 45%`}></div>
+    </div>
+  </div>
+  <div class="label" style={textStyle}>
+    <span class="name">{theme.meta.name}</span>
+  </div>
+</button>
+
+<style>
+  .swatch {
+    display: flex;
+    flex-direction: column;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: pointer;
+    padding: 0;
+    background: none;
+    font-family: inherit;
+    transition: border-color 0.15s ease, transform 0.1s ease;
+  }
+
+  .swatch:hover {
+    border-color: var(--theme-primary, #2a9d8f);
+    transform: scale(1.02);
+  }
+
+  .swatch.selected {
+    border-color: var(--theme-primary, #2a9d8f);
+    box-shadow: 0 0 0 1px var(--theme-primary, #2a9d8f);
+  }
+
+  .preview {
+    height: 52px;
+    padding: 6px 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .color-bar {
+    height: 3px;
+    border-radius: 2px;
+    width: 100%;
+  }
+
+  .dots {
+    display: flex;
+    gap: 3px;
+    margin-top: 2px;
+  }
+
+  .dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+  }
+
+  .lines {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    margin-top: 2px;
+  }
+
+  .line {
+    height: 2px;
+    border-radius: 1px;
+  }
+
+  .label {
+    padding: 4px 6px 5px;
+    background: var(--theme-bg-elevated, #1f2937);
+    text-align: left;
+  }
+
+  .name {
+    font-size: 10px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
+</style>

package/src/components/ThemeSwatch.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from 'svelte';
+import type { ThemeDefinition } from '../types.js';
+
+export interface ThemeSwatchProps {
+  /** The theme to render as a preview swatch. */
+  theme: ThemeDefinition;
+  /** Whether this swatch is currently selected. */
+  selected: boolean;
+  /** Called when the user clicks this swatch. */
+  onselect: (id: string) => void;
+}
+
+declare const ThemeSwatch: Component<ThemeSwatchProps>;
+export default ThemeSwatch;