@pilotiq/pilotiq 0.1.0

package/src/theme/generate-css.test.ts

@@ -0,0 +1,139 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { generateThemeCSS } from './generate-css.js'
+import type { ThemeMeta } from './types.js'
+
+// Minimal-but-realistic theme meta the generator would receive from resolveTheme.
+function fixture(overrides: Partial<ThemeMeta> = {}): ThemeMeta {
+  return {
+    light: {
+      '--background': 'oklch(1 0 0)',
+      '--foreground': 'oklch(0.15 0 0)',
+      '--primary':    'oklch(0.55 0.18 250)',
+    },
+    dark: {
+      '--background': 'oklch(0.15 0 0)',
+      '--foreground': 'oklch(0.98 0 0)',
+      '--primary':    'oklch(0.65 0.15 250)',
+    },
+    radius:      '0.625rem',
+    spacing:     '0.25rem',
+    iconLibrary: 'lucide',
+    ...overrides,
+  }
+}
+
+describe('generateThemeCSS', () => {
+  // ─── Block structure ─────────────────────────────────────
+
+  describe('block structure', () => {
+    it('emits :root and .dark blocks', () => {
+      const css = generateThemeCSS(fixture())
+      assert.match(css, /:root \{[^}]*\}/, 'should emit :root block')
+      assert.match(css, /\.dark \{[^}]*\}/, 'should emit .dark block')
+    })
+
+    it(':root contains light vars; .dark contains dark vars', () => {
+      const css = generateThemeCSS(fixture())
+      const rootMatch = css.match(/:root \{([\s\S]*?)\}/)
+      const darkMatch = css.match(/\.dark \{([\s\S]*?)\}/)
+      assert.ok(rootMatch && darkMatch)
+      // Light --foreground (oklch(0.15 0 0)) lives in :root, not .dark.
+      assert.match(rootMatch[1]!, /--foreground: oklch\(0\.15 0 0\)/)
+      // Dark --foreground (oklch(0.98 0 0)) lives in .dark.
+      assert.match(darkMatch[1]!, /--foreground: oklch\(0\.98 0 0\)/)
+    })
+  })
+
+  // ─── !important flags ───────────────────────────────────
+
+  describe('!important flags', () => {
+    it('marks every emitted CSS variable as !important', () => {
+      const css = generateThemeCSS(fixture())
+      // Each var declaration we care about should end with `!important;`.
+      const decls = css.match(/--[\w-]+:\s*[^;]+;/g) ?? []
+      assert.ok(decls.length > 0, 'expected at least one var declaration')
+      for (const decl of decls) {
+        assert.match(decl, /!important;$/, `declaration "${decl}" should be !important`)
+      }
+    })
+  })
+
+  // ─── Radius + spacing always emitted ─────────────────────
+
+  describe('radius and spacing', () => {
+    it('emits --radius and --spacing inside :root', () => {
+      const css = generateThemeCSS(fixture({ radius: '1rem', spacing: '0.3rem' }))
+      const rootMatch = css.match(/:root \{([\s\S]*?)\}/)
+      assert.ok(rootMatch)
+      assert.match(rootMatch[1]!, /--radius: 1rem !important/)
+      assert.match(rootMatch[1]!, /--spacing: 0\.3rem !important/)
+    })
+  })
+
+  // ─── Font handling ───────────────────────────────────────
+
+  describe('fonts', () => {
+    it('omits font-family vars when fontFamily is unset', () => {
+      const css = generateThemeCSS(fixture())
+      assert.doesNotMatch(css, /--font-sans:/)
+      assert.doesNotMatch(css, /--font-heading:/)
+      assert.doesNotMatch(css, /--default-font-family:/)
+      assert.doesNotMatch(css, /^html \{/m)
+      assert.doesNotMatch(css, /^h1, h2, h3/m)
+    })
+
+    it('emits body-font vars and html rule when body fontFamily set', () => {
+      const css = generateThemeCSS(fixture({
+        fontFamily: { body: "'Inter', system-ui, sans-serif" },
+      }))
+      assert.match(css, /--font-sans: 'Inter', system-ui, sans-serif !important/)
+      assert.match(css, /--default-font-family: 'Inter', system-ui, sans-serif !important/)
+      assert.match(css, /^html \{ font-family: var\(--default-font-family\) !important; \}$/m)
+    })
+
+    it('emits heading-font var and h1-h6 rule when heading fontFamily set', () => {
+      const css = generateThemeCSS(fixture({
+        fontFamily: { heading: "'Playfair Display', serif" },
+      }))
+      assert.match(css, /--font-heading: 'Playfair Display', serif !important/)
+      assert.match(css, /^h1, h2, h3, h4, h5, h6 \{ font-family: var\(--font-heading, var\(--default-font-family\)\) !important; \}$/m)
+    })
+
+    it('emits both body and heading rules together', () => {
+      const css = generateThemeCSS(fixture({
+        fontFamily: {
+          body:    "'Inter', system-ui, sans-serif",
+          heading: "'Geist', system-ui, sans-serif",
+        },
+      }))
+      assert.match(css, /--font-sans:/)
+      assert.match(css, /--font-heading:/)
+      assert.match(css, /^html \{/m)
+      assert.match(css, /^h1, h2, h3/m)
+    })
+  })
+
+  // ─── Empty input resilience ──────────────────────────────
+
+  describe('resilience', () => {
+    it('handles empty light/dark var maps without crashing', () => {
+      const css = generateThemeCSS(fixture({ light: {}, dark: {} }))
+      // Still has the :root scaffolding (radius/spacing always emit).
+      assert.match(css, /:root \{/)
+      assert.match(css, /--radius:/)
+      assert.match(css, /\.dark \{\s*\n*\}/)
+    })
+
+    it('passes through arbitrary CSS variable values unchanged (no escaping)', () => {
+      // Generator does not sanitize — input is trusted (already validated upstream).
+      // This test pins that contract so future "helpful" sanitization doesn't
+      // silently break the cssVariables escape hatch.
+      const css = generateThemeCSS(fixture({
+        light: { '--custom': 'color-mix(in oklch, var(--primary) 50%, white)' },
+      }))
+      assert.match(css, /--custom: color-mix\(in oklch, var\(--primary\) 50%, white\) !important/)
+    })
+  })
+})

package/src/theme/generate-css.ts

@@ -0,0 +1,44 @@
+import type { ThemeMeta } from './types.js'
+
+/**
+ * Generates a CSS string from resolved theme meta.
+ * Produces `:root { ... }` and `.dark { ... }` blocks that override CSS custom properties.
+ *
+ * Used by both SSR (injected as `<style>` in React tree) and client (ThemeProvider).
+ */
+export function generateThemeCSS(theme: ThemeMeta): string {
+  const lightVars = Object.entries(theme.light)
+    .map(([k, v]) => `  ${k}: ${v} !important;`)
+    .join('\n')
+
+  const darkVars = Object.entries(theme.dark)
+    .map(([k, v]) => `  ${k}: ${v} !important;`)
+    .join('\n')
+
+  // !important ensures theme overrides Tailwind's @layer declarations
+  // and works correctly with .dark class toggling.
+  let css = `:root {\n${lightVars}\n  --radius: ${theme.radius} !important;\n  --spacing: ${theme.spacing} !important;\n`
+
+  if (theme.fontFamily?.body) {
+    css += `  --font-sans: ${theme.fontFamily.body} !important;\n`
+    css += `  --default-font-family: ${theme.fontFamily.body} !important;\n`
+  }
+  if (theme.fontFamily?.heading) {
+    css += `  --font-heading: ${theme.fontFamily.heading} !important;\n`
+  }
+
+  css += '}\n'
+  css += `.dark {\n${darkVars}\n}\n`
+
+  // Direct html rule as fallback for body font
+  if (theme.fontFamily?.body) {
+    css += `html { font-family: var(--default-font-family) !important; }\n`
+  }
+
+  // Auto-apply heading font to h1-h6
+  if (theme.fontFamily?.heading) {
+    css += 'h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, var(--default-font-family)) !important; }\n'
+  }
+
+  return css
+}

package/src/theme/generate-scale.test.ts

@@ -0,0 +1,106 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { parseSeedToScale } from './generate-scale.js'
+
+describe('parseSeedToScale', () => {
+  // ─── Hex parsing ─────────────────────────────────────────
+
+  describe('hex input', () => {
+    it('parses a valid 6-digit hex into an 11-step OKLCH scale', () => {
+      const scale = parseSeedToScale('#3b82f6') // tailwind blue-500
+      assert.ok(scale, 'scale should be returned')
+      // All 11 steps present.
+      for (const step of [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const) {
+        assert.match(scale[step], /^oklch\([\d.]+ [\d.]+ [\d.]+\)$/, `step ${step} should be a valid oklch() string`)
+      }
+    })
+
+    it('accepts uppercase hex digits', () => {
+      const a = parseSeedToScale('#3B82F6')
+      const b = parseSeedToScale('#3b82f6')
+      assert.deepEqual(a, b)
+    })
+
+    it('returns null for invalid hex', () => {
+      assert.equal(parseSeedToScale('#zzzzzz'), null)
+      assert.equal(parseSeedToScale('#12345'),  null) // wrong length
+      assert.equal(parseSeedToScale('#1234567'), null)
+    })
+
+    it('returns null for hex without # prefix', () => {
+      // Implementation gates hex parsing on a leading '#'.
+      assert.equal(parseSeedToScale('3b82f6'), null)
+    })
+
+    it('preserves hue and chroma across all steps; only lightness varies', () => {
+      const scale = parseSeedToScale('#3b82f6')
+      assert.ok(scale)
+      const steps = Object.values(scale)
+      const parsed = steps.map(s => {
+        const m = s.match(/oklch\(([\d.]+) ([\d.]+) ([\d.]+)\)/)
+        return m ? { L: +m[1]!, C: +m[2]!, H: +m[3]! } : null
+      }).filter(Boolean) as { L: number; C: number; H: number }[]
+
+      // Hue and chroma constant.
+      const firstC = parsed[0]!.C
+      const firstH = parsed[0]!.H
+      for (const p of parsed) {
+        assert.equal(p.C, firstC, 'chroma should be constant across steps')
+        assert.equal(p.H, firstH, 'hue should be constant across steps')
+      }
+      // Lightness strictly decreases from step 50 → 950.
+      for (let i = 1; i < parsed.length; i++) {
+        assert.ok(parsed[i]!.L < parsed[i - 1]!.L, `step ${i} should be darker than ${i - 1}`)
+      }
+    })
+
+    it('discards seed lightness (same hue/chroma → same scale regardless of L)', () => {
+      // Two oklch seeds with identical hue + chroma but different lightness
+      // should produce identical scales — only H and C contribute.
+      const dark  = parseSeedToScale('oklch(0.3 0.15 240)')
+      const light = parseSeedToScale('oklch(0.8 0.15 240)')
+      assert.deepEqual(dark, light)
+    })
+  })
+
+  // ─── oklch() parsing ─────────────────────────────────────
+
+  describe('oklch() input', () => {
+    it('parses a valid oklch() string', () => {
+      const scale = parseSeedToScale('oklch(0.55 0.18 250)')
+      assert.ok(scale)
+      // Hue 250 should appear in every step's serialized string (rounded to .1).
+      for (const v of Object.values(scale)) {
+        assert.match(v, / 250\.0\)$/)
+      }
+    })
+
+    it('is case-insensitive on the OKLCH prefix', () => {
+      const upper = parseSeedToScale('OKLCH(0.5 0.1 200)')
+      const lower = parseSeedToScale('oklch(0.5 0.1 200)')
+      assert.deepEqual(upper, lower)
+    })
+
+    it('returns null for malformed oklch()', () => {
+      assert.equal(parseSeedToScale('oklch()'),                null)
+      assert.equal(parseSeedToScale('oklch(0.5)'),             null)
+      assert.equal(parseSeedToScale('oklch(0.5 0.1)'),         null)
+      assert.equal(parseSeedToScale('oklch(0.5 0.1 200 0.5)'), null) // alpha not supported
+    })
+  })
+
+  // ─── Unsupported / edge cases ────────────────────────────
+
+  describe('unsupported input', () => {
+    it('returns null for empty string', () => {
+      assert.equal(parseSeedToScale(''), null)
+    })
+
+    it('returns null for unsupported color formats', () => {
+      assert.equal(parseSeedToScale('rgb(255, 0, 0)'),    null)
+      assert.equal(parseSeedToScale('hsl(120, 50%, 50%)'), null)
+      assert.equal(parseSeedToScale('red'),                null)
+    })
+  })
+})

package/src/theme/generate-scale.ts

@@ -0,0 +1,97 @@
+import type { ColorScale, ColorStep } from './colors.js'
+
+/**
+ * Custom-color seed parsing — converts a hex (#RRGGBB) or `oklch(L C H)` string
+ * into a synthetic 50…950 ColorScale by holding hue+chroma constant and
+ * ramping lightness across a fixed curve.
+ *
+ * The seed's own lightness is discarded — only hue and chroma contribute.
+ * Returns `null` for unparseable input; the caller falls back to the base scale.
+ *
+ * Limitations:
+ *  - Highly chromatic seeds (C > ~0.25) may go out of gamut at extreme
+ *    lightness steps; the browser will clip. Use the `cssVariables` raw
+ *    escape hatch for surgical control if this matters.
+ *  - Alpha values are not supported.
+ */
+
+const TARGET_LIGHTNESS: Record<ColorStep, number> = {
+  50:  0.985,
+  100: 0.96,
+  200: 0.91,
+  300: 0.85,
+  400: 0.75,
+  500: 0.65,
+  600: 0.55,
+  700: 0.48,
+  800: 0.40,
+  900: 0.34,
+  950: 0.25,
+}
+
+function hexToLinearRgb(hex: string): [number, number, number] | null {
+  const cleaned = hex.replace('#', '')
+  if (!/^[0-9a-fA-F]{6}$/.test(cleaned)) return null
+  const r = parseInt(cleaned.slice(0, 2), 16) / 255
+  const g = parseInt(cleaned.slice(2, 4), 16) / 255
+  const b = parseInt(cleaned.slice(4, 6), 16) / 255
+  const toLinear = (c: number) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+  return [toLinear(r), toLinear(g), toLinear(b)]
+}
+
+function linearRgbToOklch(lr: number, lg: number, lb: number): [number, number, number] {
+  const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb
+  const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb
+  const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb
+
+  const l_ = Math.cbrt(l)
+  const m_ = Math.cbrt(m)
+  const s_ = Math.cbrt(s)
+
+  const L  = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_
+  const a  = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_
+  const b2 = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_
+
+  const C = Math.sqrt(a * a + b2 * b2)
+  let H = Math.atan2(b2, a) * 180 / Math.PI
+  if (H < 0) H += 360
+  return [L, C, H]
+}
+
+function parseOklchString(s: string): [number, number, number] | null {
+  const match = s.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\)/i)
+  if (!match) return null
+  return [parseFloat(match[1]!), parseFloat(match[2]!), parseFloat(match[3]!)]
+}
+
+export function parseSeedToScale(seed: string): ColorScale | null {
+  let lch: [number, number, number] | null = null
+
+  if (seed.startsWith('#')) {
+    const rgb = hexToLinearRgb(seed)
+    if (rgb) lch = linearRgbToOklch(rgb[0], rgb[1], rgb[2])
+  } else if (seed.toLowerCase().startsWith('oklch')) {
+    lch = parseOklchString(seed)
+  }
+
+  if (!lch) return null
+
+  const C = lch[1]
+  const H = lch[2]
+
+  const fmt = (l: number) => `oklch(${l.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`
+
+  return {
+    50:  fmt(TARGET_LIGHTNESS[50]),
+    100: fmt(TARGET_LIGHTNESS[100]),
+    200: fmt(TARGET_LIGHTNESS[200]),
+    300: fmt(TARGET_LIGHTNESS[300]),
+    400: fmt(TARGET_LIGHTNESS[400]),
+    500: fmt(TARGET_LIGHTNESS[500]),
+    600: fmt(TARGET_LIGHTNESS[600]),
+    700: fmt(TARGET_LIGHTNESS[700]),
+    800: fmt(TARGET_LIGHTNESS[800]),
+    900: fmt(TARGET_LIGHTNESS[900]),
+    950: fmt(TARGET_LIGHTNESS[950]),
+  }
+}

package/src/theme/icon-map.ts

@@ -0,0 +1,42 @@
+import type { IconLibrary } from './types.js'
+
+/**
+ * Canonical icon name → library-specific component name mapping.
+ * Covers all icons used internally by the pilotiq UI.
+ */
+export const iconMap: Record<string, Record<IconLibrary, string>> = {
+  'chevron-right':     { lucide: 'ChevronRight',     tabler: 'IconChevronRight',    phosphor: 'CaretRight',        remix: 'RiArrowRightSLine' },
+  'chevrons-up-down':  { lucide: 'ChevronsUpDown',   tabler: 'IconSelector',        phosphor: 'CaretUpDown',       remix: 'RiExpandUpDownLine' },
+  'log-out':           { lucide: 'LogOut',            tabler: 'IconLogout',          phosphor: 'SignOut',           remix: 'RiLogoutBoxRLine' },
+  'badge-check':       { lucide: 'BadgeCheck',        tabler: 'IconRosetteDiscountCheck', phosphor: 'SealCheck',   remix: 'RiVerifiedBadgeFill' },
+  'bell':              { lucide: 'Bell',              tabler: 'IconBell',            phosphor: 'Bell',              remix: 'RiNotification3Line' },
+  'x':                 { lucide: 'X',                 tabler: 'IconX',               phosphor: 'X',                 remix: 'RiCloseLine' },
+  'plus':              { lucide: 'Plus',              tabler: 'IconPlus',            phosphor: 'Plus',              remix: 'RiAddLine' },
+  'arrow-up':          { lucide: 'ArrowUp',           tabler: 'IconArrowUp',         phosphor: 'ArrowUp',           remix: 'RiArrowUpLine' },
+  'sparkles':          { lucide: 'Sparkles',          tabler: 'IconSparkles',        phosphor: 'Sparkle',           remix: 'RiMagicLine' },
+  'check':             { lucide: 'Check',             tabler: 'IconCheck',           phosphor: 'Check',             remix: 'RiCheckLine' },
+  'chevron-down':      { lucide: 'ChevronDown',       tabler: 'IconChevronDown',     phosphor: 'CaretDown',         remix: 'RiArrowDownSLine' },
+  'trash':             { lucide: 'Trash2',            tabler: 'IconTrash',           phosphor: 'Trash',             remix: 'RiDeleteBinLine' },
+  'message-square':    { lucide: 'MessageSquare',     tabler: 'IconMessage',         phosphor: 'ChatCircle',        remix: 'RiChat1Line' },
+  'type':              { lucide: 'Type',              tabler: 'IconTypography',      phosphor: 'TextT',             remix: 'RiFontSize' },
+  'panel-left':        { lucide: 'PanelLeft',         tabler: 'IconLayoutSidebar',   phosphor: 'SidebarSimple',     remix: 'RiLayoutLeftLine' },
+  'grip-vertical':     { lucide: 'GripVertical',      tabler: 'IconGripVertical',    phosphor: 'DotsSixVertical',   remix: 'RiDraggable' },
+  'search':            { lucide: 'Search',            tabler: 'IconSearch',          phosphor: 'MagnifyingGlass',   remix: 'RiSearchLine' },
+  'settings':          { lucide: 'Settings',          tabler: 'IconSettings',        phosphor: 'Gear',              remix: 'RiSettings3Line' },
+  'file-text':         { lucide: 'FileText',          tabler: 'IconFileText',        phosphor: 'FileText',          remix: 'RiFileTextLine' },
+  'users':             { lucide: 'Users',             tabler: 'IconUsers',           phosphor: 'Users',             remix: 'RiGroupLine' },
+  'folder':            { lucide: 'Folder',            tabler: 'IconFolder',          phosphor: 'Folder',            remix: 'RiFolderLine' },
+  'sun':               { lucide: 'Sun',               tabler: 'IconSun',             phosphor: 'Sun',               remix: 'RiSunLine' },
+  'moon':              { lucide: 'Moon',              tabler: 'IconMoon',            phosphor: 'Moon',              remix: 'RiMoonLine' },
+  'palette':           { lucide: 'Palette',           tabler: 'IconPalette',         phosphor: 'Palette',           remix: 'RiPaletteLine' },
+  'copy':              { lucide: 'Copy',              tabler: 'IconCopy',            phosphor: 'Copy',              remix: 'RiFileCopyLine' },
+  'check-circle':      { lucide: 'CheckCircle',       tabler: 'IconCircleCheck',     phosphor: 'CheckCircle',       remix: 'RiCheckboxCircleLine' },
+  'bar-chart':         { lucide: 'BarChart3',         tabler: 'IconChartBar',        phosphor: 'ChartBar',          remix: 'RiBarChartLine' },
+  'link':              { lucide: 'Link',              tabler: 'IconLink',            phosphor: 'Link',              remix: 'RiLinkM' },
+  'folder-open':       { lucide: 'FolderOpen',        tabler: 'IconFolderOpen',      phosphor: 'FolderOpen',        remix: 'RiFolderOpenLine' },
+}
+
+/** Get the library-specific icon name for a canonical name. */
+export function resolveIconName(canonical: string, library: IconLibrary): string {
+  return iconMap[canonical]?.[library] ?? iconMap[canonical]?.lucide ?? canonical
+}

package/src/theme/index.ts

@@ -0,0 +1,28 @@
+export { resolveTheme } from './resolve.js'
+export { generateThemeCSS } from './generate-css.js'
+export { presets, PRESET_FONTS, PRESET_RADIUS, PRESET_SPACING } from './presets.js'
+export { baseColors } from './base-colors.js'
+export { resolveThemeColor } from './theme-colors.js'
+export { resolveChartColor } from './chart-colors.js'
+export { radiusMap } from './radius.js'
+export { spacingMap } from './spacing.js'
+export { iconMap, resolveIconName } from './icon-map.js'
+export { colors, BASE_COLOR_NAMES, HUE_NAMES } from './colors.js'
+export { parseSeedToScale } from './generate-scale.js'
+export { migrateThemeOverrides } from './migrate.js'
+
+export type { ColorName, ColorScale, ColorStep } from './colors.js'
+export type {
+  StylePreset,
+  BaseColor,
+  HueColor,
+  ThemeColor,
+  ChartColor,
+  RadiusPreset,
+  SpacingPreset,
+  IconLibrary,
+  ThemeFonts,
+  ThemeConfig,
+  ThemeMeta,
+  PresetDefinition,
+} from './types.js'

package/src/theme/migrate.ts

@@ -0,0 +1,81 @@
+import type { ThemeConfig } from './types.js'
+
+/**
+ * Read-side migration shim — translates legacy theme override shapes from the
+ * `panelGlobal` table into the current `ThemeConfig` schema. Pure function;
+ * no DB writes. The next time the editor saves, the row lands in the new
+ * shape and the shim becomes a no-op for that row.
+ *
+ * Handles renames (`accentColor` → `themeColor`, `chartPalette` → `chartColor`),
+ * dropped values (`preset: 'default'`, `baseColor: 'slate'/'cream'/'default'`,
+ * `accentColor: 'terracotta'`, multi-hue chart palettes), and the `'base'`
+ * sentinel that replaces several old defaults.
+ */
+export function migrateThemeOverrides(raw: unknown): Partial<ThemeConfig> {
+  if (!raw || typeof raw !== 'object') return {}
+  const input = raw as Record<string, unknown>
+  const out: Partial<ThemeConfig> & Record<string, unknown> = {}
+
+  // ── preset ─────────────────────────────────────────────
+  // 'default' (Pilotiq brand) → 'vega'. Other names ('nova'/'maia'/'lyra')
+  // were placeholders that mapped to neutral defaults — they survive the
+  // rename intact (still valid in the new union).
+  if (typeof input.preset === 'string') {
+    out.preset = input.preset === 'default' ? 'vega' : input.preset as NonNullable<ThemeConfig['preset']>
+  }
+
+  // ── baseColor ──────────────────────────────────────────
+  // 'slate' → 'mist' (closest cool-gray match)
+  // 'cream' → drop (Vega preset's bg already supplies it; layering would be redundant)
+  // 'default' → drop (was a no-op sentinel; "no override" is just the field absent)
+  if (typeof input.baseColor === 'string') {
+    if (input.baseColor === 'slate') out.baseColor = 'mist'
+    else if (input.baseColor !== 'cream' && input.baseColor !== 'default') {
+      out.baseColor = input.baseColor as NonNullable<ThemeConfig['baseColor']>
+    }
+  }
+
+  // ── accentColor → themeColor ───────────────────────────
+  // 'terracotta' → 'base' when preset=vega (it's the Vega preset's own primary),
+  //              → 'orange' otherwise (closest hue match).
+  if (typeof input.accentColor === 'string') {
+    if (input.accentColor === 'terracotta') {
+      out.themeColor = out.preset === 'vega' ? 'base' : 'orange'
+    } else {
+      out.themeColor = input.accentColor as NonNullable<ThemeConfig['themeColor']>
+    }
+  }
+  // If new shape is already present (writes from the new editor), prefer it.
+  if (typeof input.themeColor === 'string') {
+    out.themeColor = input.themeColor as NonNullable<ThemeConfig['themeColor']>
+  }
+
+  // ── chartPalette → chartColor ──────────────────────────
+  // Multi-hue palettes collapse to single-hue closest match.
+  if (typeof input.chartPalette === 'string') {
+    const map: Record<string, NonNullable<ThemeConfig['chartColor']>> = {
+      ocean:      'sky',
+      sunset:     'orange',
+      forest:     'emerald',
+      berry:      'fuchsia',
+      terracotta: 'base',
+      default:    'base',
+    }
+    out.chartColor = map[input.chartPalette] ?? (input.chartPalette as NonNullable<ThemeConfig['chartColor']>)
+  }
+  if (typeof input.chartColor === 'string') {
+    out.chartColor = input.chartColor as NonNullable<ThemeConfig['chartColor']>
+  }
+
+  // ── pass-through fields ────────────────────────────────
+  if (typeof input.radius === 'string')      out.radius      = input.radius as NonNullable<ThemeConfig['radius']>
+  if (typeof input.iconLibrary === 'string') out.iconLibrary = input.iconLibrary as NonNullable<ThemeConfig['iconLibrary']>
+  if (input.fonts && typeof input.fonts === 'object') {
+    out.fonts = input.fonts as NonNullable<ThemeConfig['fonts']>
+  }
+  if (input.cssVariables && typeof input.cssVariables === 'object') {
+    out.cssVariables = input.cssVariables as NonNullable<ThemeConfig['cssVariables']>
+  }
+
+  return out
+}