@soulcraft/theme 1.0.0

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@soulcraft/theme",
+  "version": "1.0.0",
+  "description": "Unified design system and theme engine for all Soulcraft products",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "svelte": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./types": "./src/types.ts",
+    "./oklch": "./src/oklch.ts",
+    "./catalog": "./src/catalog.ts",
+    "./resolve": "./src/resolve.ts",
+    "./css": "./src/css.ts",
+    "./derive": "./src/derive.ts",
+    "./tailwind/tokens.css": "./src/tailwind/tokens.css",
+    "./stores/theme.svelte": "./src/stores/theme.svelte.ts",
+    "./stores/font-size.svelte": "./src/stores/font-size.svelte.ts",
+    "./components/ThemePicker": {
+      "types": "./src/components/ThemePicker.svelte.d.ts",
+      "svelte": "./src/components/ThemePicker.svelte",
+      "default": "./src/components/ThemePicker.svelte"
+    },
+    "./components/ThemeCustomizer": {
+      "types": "./src/components/ThemeCustomizer.svelte.d.ts",
+      "svelte": "./src/components/ThemeCustomizer.svelte",
+      "default": "./src/components/ThemeCustomizer.svelte"
+    },
+    "./components/ThemeSwatch": {
+      "types": "./src/components/ThemeSwatch.svelte.d.ts",
+      "svelte": "./src/components/ThemeSwatch.svelte",
+      "default": "./src/components/ThemeSwatch.svelte"
+    },
+    "./components/ColorInput": {
+      "types": "./src/components/ColorInput.svelte.d.ts",
+      "svelte": "./src/components/ColorInput.svelte",
+      "default": "./src/components/ColorInput.svelte"
+    },
+    "./components/FontSizeControl": {
+      "types": "./src/components/FontSizeControl.svelte.d.ts",
+      "svelte": "./src/components/FontSizeControl.svelte",
+      "default": "./src/components/FontSizeControl.svelte"
+    }
+  },
+  "scripts": {
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "svelte": "^5.51.0",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.5"
+  }
+}

package/src/catalog.ts

@@ -0,0 +1,313 @@
+/**
+ * @module catalog
+ * @description Predefined theme catalog for the Soulcraft design system.
+ *
+ * Provides 23 themes sourced from Workshop's theme registry, converted from
+ * hex/rgba to OKLCH at module initialization time. All themes have exact
+ * Shiki syntax-highlighting equivalents where Workshop had them.
+ *
+ * Themes are grouped into three categories:
+ * - `soulcraft` — 2 custom themes (dark + light)
+ * - `dark` — 15 popular dark IDE themes
+ * - `light` — 6 popular light IDE themes
+ *
+ * @example
+ * ```ts
+ * import { THEME_CATALOG, CATALOG_BY_ID, getThemesByCategory } from '@soulcraft/theme/catalog';
+ *
+ * const dark = getThemesByCategory('dark');
+ * const tokyoNight = CATALOG_BY_ID.get('tokyo-night');
+ * ```
+ */
+
+import { hexToOklch, rgbaToOklch } from './oklch.js';
+import type { ThemeDefinition, ThemeColors, ThemeFonts, ThemeCategory } from './types.js';
+
+/** Shorthand for use in the static catalog definitions below. */
+const h = hexToOklch;
+const r = rgbaToOklch;
+
+// ─── Internal: hex palette definitions ──────────────────────────────────────
+
+/** Workshop hex theme definition shape (internal, for catalog construction). */
+interface HexTheme {
+  bgDark: string; bgMedium: string; bgLight: string;
+  textPrimary: string; textSecondary: string;
+  primary: string; primaryLight: string; primaryDark: string;
+  accent: string; accentLight: string;
+  glass: string; glassBorder: string;
+  success: string; warning: string; error: string;
+}
+
+/** Convert a hex-based workshop theme to unified ThemeColors (oklch). */
+function toColors(t: HexTheme): ThemeColors {
+  return {
+    bgBase:       h(t.bgDark),
+    bgSurface:    h(t.bgMedium),
+    bgElevated:   h(t.bgLight),
+    textPrimary:  h(t.textPrimary),
+    textSecondary: h(t.textSecondary),
+    primary:      h(t.primary),
+    primaryLight: h(t.primaryLight),
+    primaryDark:  h(t.primaryDark),
+    accent:       h(t.accent),
+    accentLight:  h(t.accentLight),
+    glass:        t.glass.startsWith('rgba') ? r(t.glass) : h(t.glass),
+    glassBorder:  t.glassBorder.startsWith('rgba') ? r(t.glassBorder) : h(t.glassBorder),
+    success:      h(t.success),
+    warning:      h(t.warning),
+    error:        h(t.error),
+  };
+}
+
+const WORKSHOP_FONTS: ThemeFonts = { displayFont: 'system-ui', bodyFont: 'Inter' };
+
+/** Build a catalog entry from raw hex theme data. */
+function entry(
+  id: string,
+  name: string,
+  category: ThemeCategory,
+  isDark: boolean,
+  hex: HexTheme,
+  fonts: ThemeFonts = WORKSHOP_FONTS
+): ThemeDefinition {
+  return { meta: { id, name, category, isDark }, colors: toColors(hex), fonts };
+}
+
+// ─── Catalog entries ─────────────────────────────────────────────────────────
+
+/**
+ * The complete 23-theme catalog as an ordered array.
+ * Order matches Workshop's getThemesByCategory() groupings.
+ */
+export const THEME_CATALOG: ThemeDefinition[] = [
+  // ── Soulcraft Custom ─────────────────────────────────────────────────────
+  entry('soulcraft-dark', 'Soulcraft Dark', 'soulcraft', true, {
+    bgDark: '#0a0e1a', bgMedium: '#141b2d', bgLight: '#1f2937',
+    textPrimary: '#f0f4f8', textSecondary: '#a0aec0',
+    primary: '#2a9d8f', primaryLight: '#52c7b8', primaryDark: '#264653',
+    accent: '#e76f51', accentLight: '#f4a261',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(255, 255, 255, 0.1)',
+    success: '#10b981', warning: '#f59e0b', error: '#ef4444',
+  }),
+  entry('soulcraft-light', 'Soulcraft Light', 'soulcraft', false, {
+    bgDark: '#f8fafc', bgMedium: '#f1f5f9', bgLight: '#e2e8f0',
+    textPrimary: '#1e293b', textSecondary: '#64748b',
+    primary: '#0d9488', primaryLight: '#14b8a6', primaryDark: '#0f766e',
+    accent: '#dc2626', accentLight: '#ef4444',
+    glass: 'rgba(0, 0, 0, 0.02)', glassBorder: 'rgba(0, 0, 0, 0.1)',
+    success: '#059669', warning: '#d97706', error: '#dc2626',
+  }),
+
+  // ── Dark Themes ───────────────────────────────────────────────────────────
+  entry('tokyo-night', 'Tokyo Night', 'dark', true, {
+    bgDark: '#16161e', bgMedium: '#1a1b26', bgLight: '#24283b',
+    textPrimary: '#c0caf5', textSecondary: '#565f89',
+    primary: '#7aa2f7', primaryLight: '#89b4fa', primaryDark: '#3d59a1',
+    accent: '#f7768e', accentLight: '#ff9e64',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(122, 162, 247, 0.2)',
+    success: '#9ece6a', warning: '#e0af68', error: '#f7768e',
+  }),
+  entry('catppuccin-mocha', 'Catppuccin Mocha', 'dark', true, {
+    bgDark: '#11111b', bgMedium: '#1e1e2e', bgLight: '#313244',
+    textPrimary: '#cdd6f4', textSecondary: '#6c7086',
+    primary: '#89b4fa', primaryLight: '#a6d4fa', primaryDark: '#5e8dd4',
+    accent: '#f38ba8', accentLight: '#f5c2e7',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(137, 180, 250, 0.2)',
+    success: '#a6e3a1', warning: '#f9e2af', error: '#f38ba8',
+  }),
+  entry('gruvbox-dark', 'Gruvbox Dark', 'dark', true, {
+    bgDark: '#1d2021', bgMedium: '#282828', bgLight: '#3c3836',
+    textPrimary: '#ebdbb2', textSecondary: '#a89984',
+    primary: '#83a598', primaryLight: '#8ec07c', primaryDark: '#458588',
+    accent: '#fb4934', accentLight: '#fe8019',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(131, 165, 152, 0.2)',
+    success: '#b8bb26', warning: '#fabd2f', error: '#fb4934',
+  }),
+  entry('material-theme-darker', 'Material Darker', 'dark', true, {
+    bgDark: '#0f111a', bgMedium: '#212121', bgLight: '#292D3E',
+    textPrimary: '#eeffff', textSecondary: '#676E95',
+    primary: '#82aaff', primaryLight: '#a6c4ff', primaryDark: '#5e8dd4',
+    accent: '#f07178', accentLight: '#ff5370',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(130, 170, 255, 0.2)',
+    success: '#c3e88d', warning: '#ffcb6b', error: '#f07178',
+  }),
+  entry('material-theme-palenight', 'Material Palenight', 'dark', true, {
+    bgDark: '#232634', bgMedium: '#292D3E', bgLight: '#32364a',
+    textPrimary: '#bfc7d5', textSecondary: '#676E95',
+    primary: '#82aaff', primaryLight: '#a6c4ff', primaryDark: '#5e8dd4',
+    accent: '#c792ea', accentLight: '#d4a6f5',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(130, 170, 255, 0.2)',
+    success: '#c3e88d', warning: '#ffcb6b', error: '#f07178',
+  }),
+  entry('ayu-dark', 'Ayu Dark', 'dark', true, {
+    bgDark: '#0a0e14', bgMedium: '#0f1419', bgLight: '#1f2430',
+    textPrimary: '#b3b1ad', textSecondary: '#626a73',
+    primary: '#59c2ff', primaryLight: '#73ccff', primaryDark: '#3fa1d9',
+    accent: '#ffaa33', accentLight: '#ffb454',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(89, 194, 255, 0.2)',
+    success: '#91b362', warning: '#ffaa33', error: '#d95757',
+  }),
+  entry('synthwave-84', 'Synthwave \'84', 'dark', true, {
+    bgDark: '#241b2f', bgMedium: '#262335', bgLight: '#2b2a3e',
+    textPrimary: '#f92aad', textSecondary: '#848bbd',
+    primary: '#fede5d', primaryLight: '#fdff6a', primaryDark: '#e0c848',
+    accent: '#f92aad', accentLight: '#ff4081',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(254, 222, 93, 0.3)',
+    success: '#72f1b8', warning: '#fede5d', error: '#ff7edb',
+  }),
+  entry('one-dark-pro', 'One Dark Pro', 'dark', true, {
+    bgDark: '#1e2127', bgMedium: '#282c34', bgLight: '#2c313c',
+    textPrimary: '#abb2bf', textSecondary: '#5c6370',
+    primary: '#61afef', primaryLight: '#84bcf5', primaryDark: '#4fa3e6',
+    accent: '#e06c75', accentLight: '#e78991',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(97, 175, 239, 0.2)',
+    success: '#98c379', warning: '#e5c07b', error: '#e06c75',
+  }),
+  entry('dracula', 'Dracula', 'dark', true, {
+    bgDark: '#21222c', bgMedium: '#282a36', bgLight: '#44475a',
+    textPrimary: '#f8f8f2', textSecondary: '#6272a4',
+    primary: '#bd93f9', primaryLight: '#d4aeff', primaryDark: '#9969e6',
+    accent: '#ff79c6', accentLight: '#ff92d0',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(189, 147, 249, 0.2)',
+    success: '#50fa7b', warning: '#f1fa8c', error: '#ff5555',
+  }),
+  entry('nord', 'Nord', 'dark', true, {
+    bgDark: '#2e3440', bgMedium: '#3b4252', bgLight: '#434c5e',
+    textPrimary: '#eceff4', textSecondary: '#d8dee9',
+    primary: '#88c0d0', primaryLight: '#a3d0da', primaryDark: '#6fb3c4',
+    accent: '#81a1c1', accentLight: '#9ab6ca',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(136, 192, 208, 0.2)',
+    success: '#a3be8c', warning: '#ebcb8b', error: '#bf616a',
+  }),
+  entry('monokai', 'Monokai', 'dark', true, {
+    bgDark: '#1e1f1c', bgMedium: '#272822', bgLight: '#3e3d32',
+    textPrimary: '#f8f8f2', textSecondary: '#75715e',
+    primary: '#66d9ef', primaryLight: '#92e7f5', primaryDark: '#48c8e3',
+    accent: '#fd971f', accentLight: '#fdb04f',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(102, 217, 239, 0.2)',
+    success: '#a6e22e', warning: '#e6db74', error: '#f92672',
+  }),
+  entry('night-owl', 'Night Owl', 'dark', true, {
+    bgDark: '#001424', bgMedium: '#011627', bgLight: '#0b2942',
+    textPrimary: '#d6deeb', textSecondary: '#5f7e97',
+    primary: '#82aaff', primaryLight: '#a3bdff', primaryDark: '#5f8eef',
+    accent: '#c792ea', accentLight: '#d9b0f0',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(130, 170, 255, 0.2)',
+    success: '#addb67', warning: '#ecc48d', error: '#ef5350',
+  }),
+  entry('solarized-dark', 'Solarized Dark', 'dark', true, {
+    bgDark: '#002b36', bgMedium: '#073642', bgLight: '#0f4757',
+    textPrimary: '#fdf6e3', textSecondary: '#93a1a1',
+    primary: '#268bd2', primaryLight: '#5da5db', primaryDark: '#1d6fa8',
+    accent: '#d33682', accentLight: '#dc609c',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(38, 139, 210, 0.2)',
+    success: '#859900', warning: '#b58900', error: '#dc322f',
+  }),
+  entry('github-dark', 'GitHub Dark', 'dark', true, {
+    bgDark: '#0d1117', bgMedium: '#161b22', bgLight: '#21262d',
+    textPrimary: '#c9d1d9', textSecondary: '#8b949e',
+    primary: '#58a6ff', primaryLight: '#79b8ff', primaryDark: '#388bfd',
+    accent: '#f778ba', accentLight: '#f892c9',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(88, 166, 255, 0.2)',
+    success: '#3fb950', warning: '#d29922', error: '#f85149',
+  }),
+  entry('github-dark-dimmed', 'GitHub Dark Dimmed', 'dark', true, {
+    bgDark: '#1c2128', bgMedium: '#22272e', bgLight: '#2d333b',
+    textPrimary: '#adbac7', textSecondary: '#768390',
+    primary: '#539bf5', primaryLight: '#6cb6ff', primaryDark: '#368cf9',
+    accent: '#e275ad', accentLight: '#f692ce',
+    glass: 'rgba(255, 255, 255, 0.05)', glassBorder: 'rgba(83, 155, 245, 0.2)',
+    success: '#57ab5a', warning: '#c69026', error: '#e5534b',
+  }),
+
+  // ── Light Themes ──────────────────────────────────────────────────────────
+  entry('catppuccin-latte', 'Catppuccin Latte', 'light', false, {
+    bgDark: '#eff1f5', bgMedium: '#e6e9ef', bgLight: '#dce0e8',
+    textPrimary: '#4c4f69', textSecondary: '#6c6f85',
+    primary: '#1e66f5', primaryLight: '#3b7dff', primaryDark: '#0f52d9',
+    accent: '#d20f39', accentLight: '#dd7878',
+    glass: 'rgba(0, 0, 0, 0.02)', glassBorder: 'rgba(30, 102, 245, 0.2)',
+    success: '#40a02b', warning: '#df8e1d', error: '#d20f39',
+  }),
+  entry('gruvbox-light', 'Gruvbox Light', 'light', false, {
+    bgDark: '#f9f5d7', bgMedium: '#fbf1c7', bgLight: '#ebdbb2',
+    textPrimary: '#3c3836', textSecondary: '#7c6f64',
+    primary: '#076678', primaryLight: '#458588', primaryDark: '#055765',
+    accent: '#9d0006', accentLight: '#cc241d',
+    glass: 'rgba(0, 0, 0, 0.02)', glassBorder: 'rgba(7, 102, 120, 0.2)',
+    success: '#79740e', warning: '#b57614', error: '#9d0006',
+  }),
+  entry('solarized-light', 'Solarized Light', 'light', false, {
+    bgDark: '#fdf6e3', bgMedium: '#eee8d5', bgLight: '#d3cbb7',
+    textPrimary: '#657b83', textSecondary: '#93a1a1',
+    primary: '#268bd2', primaryLight: '#5da5db', primaryDark: '#1d6fa8',
+    accent: '#d33682', accentLight: '#dc609c',
+    glass: 'rgba(0, 0, 0, 0.02)', glassBorder: 'rgba(38, 139, 210, 0.2)',
+    success: '#859900', warning: '#b58900', error: '#dc322f',
+  }),
+  entry('github-light', 'GitHub Light', 'light', false, {
+    bgDark: '#ffffff', bgMedium: '#f6f8fa', bgLight: '#e1e4e8',
+    textPrimary: '#24292f', textSecondary: '#57606a',
+    primary: '#0969da', primaryLight: '#218bff', primaryDark: '#0550ae',
+    accent: '#cf222e', accentLight: '#e5534b',
+    glass: 'rgba(0, 0, 0, 0.02)', glassBorder: 'rgba(9, 105, 218, 0.2)',
+    success: '#1a7f37', warning: '#9a6700', error: '#cf222e',
+  }),
+  entry('one-light', 'One Light', 'light', false, {
+    bgDark: '#fafafa', bgMedium: '#f0f0f0', bgLight: '#e0e0e0',
+    textPrimary: '#383a42', textSecondary: '#a0a1a7',
+    primary: '#4078f2', primaryLight: '#5e8df7', primaryDark: '#2966e8',
+    accent: '#e45649', accentLight: '#ee6559',
+    glass: 'rgba(0, 0, 0, 0.02)', glassBorder: 'rgba(64, 120, 242, 0.2)',
+    success: '#50a14f', warning: '#c18401', error: '#e45649',
+  }),
+  entry('material-theme-lighter', 'Material Lighter', 'light', false, {
+    bgDark: '#fafafa', bgMedium: '#f4f4f4', bgLight: '#eeeeee',
+    textPrimary: '#272727', textSecondary: '#8e8e8e',
+    primary: '#6182b8', primaryLight: '#7f9ec8', primaryDark: '#4566a8',
+    accent: '#ff5370', accentLight: '#ff6d82',
+    glass: 'rgba(0, 0, 0, 0.02)', glassBorder: 'rgba(97, 130, 184, 0.2)',
+    success: '#91b859', warning: '#ffb62c', error: '#e53935',
+  }),
+];
+
+/**
+ * Lookup map for O(1) theme retrieval by ID.
+ *
+ * @example
+ * const theme = CATALOG_BY_ID.get('tokyo-night');
+ */
+export const CATALOG_BY_ID: Map<string, ThemeDefinition> = new Map(
+  THEME_CATALOG.map(t => [t.meta.id, t])
+);
+
+/**
+ * Return all themes in a given category, in catalog order.
+ *
+ * @param category - Category to filter by.
+ * @returns Themes matching the given category.
+ *
+ * @example
+ * const darkThemes = getThemesByCategory('dark');
+ */
+export function getThemesByCategory(category: ThemeCategory): ThemeDefinition[] {
+  return THEME_CATALOG.filter(t => t.meta.category === category);
+}
+
+/**
+ * Return themes grouped by category, in catalog order within each group.
+ * Equivalent to Workshop's `themeStore.getThemesByCategory()`.
+ *
+ * @returns Record mapping category name to array of ThemeDefinition.
+ *
+ * @example
+ * const { soulcraft, dark, light } = getThemesGrouped();
+ */
+export function getThemesGrouped(): Record<ThemeCategory, ThemeDefinition[]> {
+  return {
+    soulcraft: getThemesByCategory('soulcraft'),
+    dark: getThemesByCategory('dark'),
+    light: getThemesByCategory('light'),
+  };
+}

package/src/components/ColorInput.svelte

@@ -0,0 +1,150 @@
+<!--
+@component ColorInput
+@description OKLCH color picker with Lightness, Chroma, and Hue sliders.
+
+Renders three labeled range sliders for the L (0–1), C (0–0.4), and H (0–360°)
+components of an OKLCH color string. Includes a live preview swatch showing the
+current color and its hex equivalent for reference.
+
+Purely presentational — calls `onchange` with the new OKLCH string on every
+slider interaction. The parent is responsible for persisting state.
+
+@props
+  value     - The current OKLCH color string to edit.
+  label     - Optional label shown above the control group.
+  onchange  - Called with the updated OKLCH string on any slider movement.
+-->
+<script lang="ts">
+import { parseOklch, formatOklch, oklchToHex } from '../oklch.js';
+import type { OklchColor } from '../types.js';
+
+interface Props {
+  value: OklchColor;
+  label?: string;
+  onchange: (value: OklchColor) => void;
+}
+
+let { value, label, onchange }: Props = $props();
+
+// Parse the current oklch value into components for slider positioning.
+// The fallback tuple ensures sliders always have valid positions.
+let _parsed = $derived(parseOklch(value));
+let L = $derived(_parsed ? _parsed[0] : 0.5);
+let C = $derived(_parsed ? _parsed[1] : 0);
+let H = $derived(_parsed ? _parsed[2] : 0);
+let alpha = $derived(_parsed ? _parsed[3] : undefined);
+let hexValue = $derived(oklchToHex(value));
+
+function handleL(e: Event) {
+  onchange(formatOklch(Number((e.target as HTMLInputElement).value), C, H, alpha));
+}
+function handleC(e: Event) {
+  onchange(formatOklch(L, Number((e.target as HTMLInputElement).value), H, alpha));
+}
+function handleH(e: Event) {
+  onchange(formatOklch(L, C, Number((e.target as HTMLInputElement).value), alpha));
+}
+</script>
+
+<div class="color-input">
+  {#if label}
+    <div class="field-label">{label}</div>
+  {/if}
+  <div class="controls">
+    <div class="swatch" style="background: {value}" title={hexValue}></div>
+    <div class="sliders">
+      <label class="slider-row">
+        <span class="axis">L</span>
+        <input type="range" min="0" max="1" step="0.001" value={L} oninput={handleL} />
+        <span class="val">{L.toFixed(3)}</span>
+      </label>
+      <label class="slider-row">
+        <span class="axis">C</span>
+        <input type="range" min="0" max="0.4" step="0.001" value={C} oninput={handleC} />
+        <span class="val">{C.toFixed(3)}</span>
+      </label>
+      <label class="slider-row">
+        <span class="axis">H</span>
+        <input type="range" min="0" max="360" step="0.1" value={H} oninput={handleH} />
+        <span class="val">{H.toFixed(1)}°</span>
+      </label>
+    </div>
+  </div>
+  <div class="hex-value">{hexValue}</div>
+</div>
+
+<style>
+  .color-input {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .field-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--theme-text-secondary, #a0aec0);
+  }
+
+  .controls {
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+  }
+
+  .swatch {
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    flex-shrink: 0;
+    border: 1px solid var(--theme-glass-border, rgba(255,255,255,0.12));
+    margin-top: 2px;
+  }
+
+  .sliders {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+
+  .slider-row {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .axis {
+    font-size: 9px;
+    font-weight: 700;
+    color: var(--theme-text-secondary, #a0aec0);
+    width: 10px;
+    text-align: center;
+    flex-shrink: 0;
+  }
+
+  .slider-row input[type="range"] {
+    flex: 1;
+    height: 3px;
+    accent-color: var(--theme-primary, #2a9d8f);
+    cursor: pointer;
+  }
+
+  .val {
+    font-size: 9px;
+    font-variant-numeric: tabular-nums;
+    color: var(--theme-text-secondary, #a0aec0);
+    width: 38px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+
+  .hex-value {
+    font-size: 9px;
+    font-family: monospace;
+    color: var(--theme-text-secondary, #a0aec0);
+    padding-left: 36px;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Component } from 'svelte';
+import type { OklchColor } from '../types.js';
+
+export interface ColorInputProps {
+  /** Current OKLCH color value. */
+  value: OklchColor;
+  /** Optional label shown above the sliders. */
+  label?: string;
+  /** Called when any L/C/H/alpha slider changes. */
+  onchange: (value: OklchColor) => void;
+}
+
+declare const ColorInput: Component<ColorInputProps>;
+export default ColorInput;

package/src/components/FontSizeControl.svelte

@@ -0,0 +1,138 @@
+<!--
+@component FontSizeControl
+@description Two-row preset picker for content and interface font sizes.
+
+Shows labeled preset buttons for content areas (editor text, chat, preview)
+and interface chrome (dock labels, explorer items, UI labels). The active
+preset for each axis is highlighted with the primary brand color.
+
+Purely presentational — calls `onchange` with `FontSizeSettings` when any
+preset button is clicked. Optionally shows a "Reset to defaults" link if
+`onreset` is provided.
+
+@props
+  contentSize    - Current content area font size in px.
+  interfaceSize  - Current interface chrome font size in px.
+  onchange       - Called with the new { contentSize, interfaceSize } on preset click.
+  onreset        - Optional. Called when the Reset to defaults button is clicked.
+-->
+<script lang="ts">
+import { FONT_SIZE_PRESETS, type FontSizeSettings } from '../stores/font-size.svelte.js';
+
+interface Props {
+  contentSize: number;
+  interfaceSize: number;
+  onchange: (settings: FontSizeSettings) => void;
+  onreset?: () => void;
+}
+
+let { contentSize, interfaceSize, onchange, onreset }: Props = $props();
+</script>
+
+<div class="font-size-control">
+  <div class="row">
+    <div class="row-label">Content</div>
+    <div class="presets">
+      {#each FONT_SIZE_PRESETS.content as preset}
+        <button
+          class="preset-btn"
+          class:active={contentSize === preset.value}
+          onclick={() => onchange({ contentSize: preset.value, interfaceSize })}
+          title="{preset.value}px"
+        >
+          {preset.label}
+        </button>
+      {/each}
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="row-label">Interface</div>
+    <div class="presets">
+      {#each FONT_SIZE_PRESETS.interface as preset}
+        <button
+          class="preset-btn"
+          class:active={interfaceSize === preset.value}
+          onclick={() => onchange({ contentSize, interfaceSize: preset.value })}
+          title="{preset.value}px"
+        >
+          {preset.label}
+        </button>
+      {/each}
+    </div>
+  </div>
+
+  {#if onreset}
+    <button class="reset-btn" onclick={onreset}>Reset to defaults</button>
+  {/if}
+</div>
+
+<style>
+  .font-size-control {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .row {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .row-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--theme-text-secondary, #a0aec0);
+  }
+
+  .presets {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+  }
+
+  .preset-btn {
+    padding: 4px 10px;
+    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-secondary, #a0aec0);
+    font-size: 11px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: all 0.12s ease;
+  }
+
+  .preset-btn:hover {
+    border-color: var(--theme-primary, #2a9d8f);
+    color: var(--theme-text-primary, #e8eaf0);
+  }
+
+  .preset-btn.active {
+    border-color: var(--theme-primary, #2a9d8f);
+    background: var(--theme-primary, #2a9d8f);
+    color: var(--theme-bg-base, #0a0e1a);
+    font-weight: 600;
+  }
+
+  .reset-btn {
+    align-self: flex-start;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--theme-text-secondary, #a0aec0);
+    font-size: 11px;
+    font-family: inherit;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color 0.12s ease;
+  }
+
+  .reset-btn:hover {
+    color: var(--theme-primary, #2a9d8f);
+  }
+</style>