@motion-proto/live-tokens 0.3.2 → 0.3.7

package/README.md

@@ -185,4 +185,4 @@ The package publishes to npm as `@motion-proto/live-tokens`.
 
 ## License
 
-MIT. Originally extracted from RuneGoblin.
+MIT. Originally extracted from [RuneGoblin](https://www.runegoblin.com/).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.3.2",
+  "version": "0.3.7",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 4 + Vite.",
   "keywords": [
@@ -35,7 +35,9 @@
     "src/styles/tokens.css",
     "src/data",
     "src/assets",
-    "dist-plugin"
+    "dist-plugin",
+    "!**/*.test.ts",
+    "!**/*.spec.ts"
   ],
   "exports": {
     ".": {

package/src/component-editor/scaffolding/GradientCard.svelte

@@ -11,7 +11,7 @@
    * UIPaletteSelector. Reads resolve through `tokenRegistry$` so values
    * authored as `var(--gradient-angle-diagonal)` show their resolved degrees.
    */
-  import { editorState, setComponentAlias } from '../../lib/editorStore';
+  import { setComponentAlias } from '../../lib/editorStore';
   import { tokenRegistry$ } from '../../lib/tokenRegistry';
   import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
   import AngleDial from './AngleDial.svelte';
@@ -59,11 +59,11 @@
     parseNumberFromCss(resolveLiteralWith($tokenRegistry$, stopPositionVar(3)), '%') ?? 100,
   ] as [number, number, number];
 
-  $: stopColors = ([1, 2, 3] as StopIndex[]).map((i) => {
-    const ref = $editorState.components[component]?.aliases[stopColorVar(i)];
-    if (!ref) return '#888';
-    return ref.kind === 'token' ? `var(${ref.name})` : ref.value;
-  }) as [string, string, string];
+  // Reference the per-stop CSS var directly so the cascade fills in the
+  // component's CSS defaults when the user hasn't overridden a stop. Reading
+  // `aliases[...]` alone would miss defaults (no override → `#888`) even
+  // though the component is rendering the color via its own `:root` block.
+  $: stopColors = ([1, 2, 3] as StopIndex[]).map((i) => `var(${stopColorVar(i)})`) as [string, string, string];
 
   // Build the live gradient string from current positions + colors so the
   // ribbon reflects edits even mid-drag (before the component re-renders via

package/src/component-editor/editorTokens.test.ts

@@ -1,93 +0,0 @@
-// @vitest-environment node
-import { describe, it, expect } from 'vitest';
-import { readFileSync, readdirSync } from 'node:fs';
-import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { buildTokenRegistry, extractGlobalRootBody } from '../lib/tokenRegistry';
-import { componentRegistryEntries } from './registry';
-
-const TEST_DIR = dirname(fileURLToPath(import.meta.url));
-const TOKENS_CSS = join(TEST_DIR, '..', 'styles', 'tokens.css');
-const COMPONENTS_DIR = join(TEST_DIR, '..', 'components');
-
-// Vitest's CSS plugin swallows `?raw` imports for .css files, so we build the
-// registry from an fs-loaded snapshot rather than going through the default
-// module export. Layer-2 tokens now live in each component's <style> block
-// under `:global(:root)`; merge those bodies with tokens.css to match the
-// runtime registry.
-const tokensSource = readFileSync(TOKENS_CSS, 'utf8');
-const componentTokenCss = readdirSync(COMPONENTS_DIR)
-  .filter((f) => f.endsWith('.svelte'))
-  .map((f) => extractGlobalRootBody(readFileSync(join(COMPONENTS_DIR, f), 'utf8')))
-  .join('\n');
-const registry = buildTokenRegistry(tokensSource + '\n' + componentTokenCss);
-
-/** Test whether a variable name fits a layer-1 design-token naming pattern. */
-function isLayer1TokenName(name: string): boolean {
-  // Color ramps: --color-<palette>-<step>  OR semantic color primitives: --color-<name>
-  if (/^--color-[a-z]+(-\d{3})?$/.test(name)) return true;
-  if (/^--surface-[a-z]+(-[a-z]+)?$/.test(name)) return true;
-  if (/^--border-[a-z]+(-[a-z]+)?$/.test(name)) return true;
-  if (/^--text-[a-z]+(-[a-z]+)?$/.test(name)) return true;
-  if (/^--(radius|space|font|line-height|shadow|ring|transition|overlay|hover|page-bg|border-width|gradient|icon-size|blur|dot-size)(-[a-z0-9]+)*$/.test(name)) return true;
-  return false;
-}
-
-// Drives both describe blocks: one entry per (component, variable) pair pulled
-// from each editor's exported `allTokens`. This is the authoritative surface —
-// includes template-literal-built tokens (Button, SegmentedControl, etc.) and
-// typography colorVariables that the previous source-regex approach silently
-// missed. See registry.ts for how each editor exports its full token list via
-// `<script context="module">`.
-const editorTokenCases: Array<{ editor: string; variable: string }> = [];
-for (const entry of componentRegistryEntries) {
-  for (const t of entry.schema) {
-    // `hidden: true` tokens are optional override slots (e.g. split-padding's
-    // per-side overrides used as `var(--x, fallback)` by the themed-padding
-    // mixin) — they don't need a default declaration in tokens.css.
-    if ((t as { hidden?: boolean }).hidden) continue;
-    editorTokenCases.push({ editor: entry.id, variable: t.variable });
-  }
-}
-
-describe('design-token architecture', () => {
-  it('has editor schemas to inspect', () => {
-    expect(editorTokenCases.length).toBeGreaterThan(0);
-  });
-
-  describe('every editor-exposed variable resolves to a design token', () => {
-    for (const { editor, variable } of editorTokenCases) {
-      it(`${editor}: ${variable} resolves via alias chain to a layer-1 token`, () => {
-        const chain = registry.resolveAliasChain(variable);
-        const terminal = chain[chain.length - 1];
-        expect(
-          isLayer1TokenName(terminal),
-          `${variable} → [${chain.join(' → ')}]; terminal "${terminal}" is not a design-token name. ` +
-            `Either rename the target or add a var() alias declaration in tokens.css.`,
-        ).toBe(true);
-      });
-    }
-  });
-
-  // Every variable an editor binds must be declared in tokens.css (or a
-  // component <style> :global(:root) block) as a var() alias — not a literal,
-  // not a raw primitive. Component properties bind to component-scoped Layer-2
-  // aliases so editing one component never rebinds a shared primitive used
-  // elsewhere.
-  describe('every editor follows the component-token pattern', () => {
-    for (const { editor, variable } of editorTokenCases) {
-      it(`${editor}: ${variable} is a layer-2 component token (declared as var() alias)`, () => {
-        const declared = registry.getDeclaredValue(variable);
-        expect(
-          declared,
-          `${variable} is referenced by ${editor} but not declared in tokens.css`,
-        ).not.toBeNull();
-        expect(
-          declared!.startsWith('var('),
-          `${variable} should be a component-scoped alias declared as var(--primitive); got "${declared}". ` +
-            `Component properties must not rebind shared primitives directly.`,
-        ).toBe(true);
-      });
-    }
-  });
-});

package/src/component-editor/groupKeySlots.test.ts

@@ -1,67 +0,0 @@
-// @vitest-environment node
-//
-// Slot-collision invariant for editor schemas.
-//
-// A groupKey declares a sibling set: tokens that share a groupKey are linked
-// peers (`getComponentPropertySiblings`, `isComponentPropertyLinked`,
-// `setComponentAliasLinked`). The codebase convention (src/styles/CONVENTIONS.md)
-// requires shared groupKeys to cross only a VARIANT axis — never a slot/part
-// axis. Crossing slots produces "phantom siblings": the schema reports header
-// and cell as linked peers, but the linked block can't surface them because
-// the editor's `linkableContexts` (correctly) treats them as independent.
-//
-// `registerComponentSchema` already warns at runtime when a typography
-// groupKey covers multiple slots (e.g. one groupKey holding both
-// `--card-...-title-font-family` and `--card-...-body-font-family`). This
-// test asserts the invariant instead of relying on a console warning that
-// nothing fails on.
-//
-// Caught the TableEditor regression where `header` and `cell` typography
-// shared `family`/`size`/`weight`/`height` groupKeys (and `surface`/`padding`
-// shared groupKeys across header/stripe and header/cell respectively). See
-// the commit that introduced this test for context.
-
-import { describe, it, expect } from 'vitest';
-import { componentRegistryEntries } from './registry';
-
-const TYPOGRAPHY_PROP_SUFFIXES = ['font-family', 'font-size', 'font-weight', 'line-height'] as const;
-
-/** Mirror of `typographySlotOf` in `lib/slices/components.ts`. */
-function typographySlotOf(varName: string): string | null {
-  for (const suffix of TYPOGRAPHY_PROP_SUFFIXES) {
-    if (!varName.endsWith('-' + suffix)) continue;
-    const head = varName.slice(0, -(suffix.length + 1));
-    const lastDash = head.lastIndexOf('-');
-    if (lastDash < 0) return null;
-    return head.slice(lastDash + 1);
-  }
-  return null;
-}
-
-describe('editor groupKey slot invariant', () => {
-  for (const entry of componentRegistryEntries) {
-    it(`${entry.id}: no typography groupKey straddles multiple slots`, () => {
-      const byKey = new Map<string, string[]>();
-      for (const t of entry.schema as Array<{ variable: string; groupKey?: string }>) {
-        if (!t.groupKey) continue;
-        const list = byKey.get(t.groupKey) ?? [];
-        list.push(t.variable);
-        byKey.set(t.groupKey, list);
-      }
-      const violations: string[] = [];
-      for (const [gk, vars] of byKey) {
-        const slots = new Set<string>();
-        for (const v of vars) {
-          const slot = typographySlotOf(v);
-          if (slot) slots.add(slot);
-        }
-        if (slots.size > 1) {
-          violations.push(
-            `groupKey "${gk}" spans typography slots {${[...slots].join(', ')}}: ${vars.join(', ')}`,
-          );
-        }
-      }
-      expect(violations, violations.join('\n')).toEqual([]);
-    });
-  }
-});

package/src/component-editor/groupKeySnapshot.test.ts

@@ -1,52 +0,0 @@
-/**
- * Locks the per-component sibling-group topology in place during the migration
- * away from `getGroupKey`'s last-dash fallback.
- *
- * Workflow:
- *   1. Snapshot current behavior: `UPDATE_SNAPSHOT=1 pnpm test groupKeySnapshot`
- *      writes `temp/groupkey-snapshot.json` (groupKey → variables, per component).
- *   2. Migrate: add explicit `groupKey` to every token that previously relied on
- *      the legacy fallback; delete the fallback branch in `getGroupKey`.
- *   3. Re-run this test (no env var) — must produce the same JSON.
- *
- * Once the migration is complete and verified, delete this file.
- */
-import { describe, it, expect } from 'vitest';
-import fs from 'node:fs';
-import path from 'node:path';
-import { componentRegistryEntries } from './registry';
-
-const SNAPSHOT_PATH = path.resolve(__dirname, '../../temp/groupkey-snapshot.json');
-
-/** Mirrors the *post-migration* getGroupKey logic — schema only, no fallback. */
-function effectiveGroupKey(_component: string, _variable: string, explicit: string | undefined): string | null {
-  return explicit ?? null;
-}
-
-function computeSnapshot(): Record<string, Record<string, string[]>> {
-  const out: Record<string, Record<string, string[]>> = {};
-  for (const entry of componentRegistryEntries) {
-    const groups: Record<string, string[]> = {};
-    for (const t of entry.schema as Array<{ variable: string; groupKey?: string }>) {
-      const gk = effectiveGroupKey(entry.id, t.variable, t.groupKey);
-      if (!gk) continue;
-      (groups[gk] ||= []).push(t.variable);
-    }
-    for (const k of Object.keys(groups)) groups[k].sort();
-    out[entry.id] = Object.fromEntries(Object.entries(groups).sort(([a], [b]) => a.localeCompare(b)));
-  }
-  return out;
-}
-
-describe('groupKey topology snapshot', () => {
-  it('matches the committed snapshot', () => {
-    const computed = computeSnapshot();
-    if (process.env.UPDATE_SNAPSHOT === '1') {
-      fs.mkdirSync(path.dirname(SNAPSHOT_PATH), { recursive: true });
-      fs.writeFileSync(SNAPSHOT_PATH, JSON.stringify(computed, null, 2) + '\n');
-      return;
-    }
-    const expected = JSON.parse(fs.readFileSync(SNAPSHOT_PATH, 'utf-8'));
-    expect(computed).toEqual(expected);
-  });
-});

package/src/lib/componentConfig.test.ts

@@ -1,204 +0,0 @@
-// @vitest-environment happy-dom
-import { beforeEach, describe, expect, it } from 'vitest';
-import { get } from 'svelte/store';
-import {
-  editorState,
-  componentDirty,
-  setComponentAlias,
-  clearComponentAlias,
-  setComponentConfig,
-  clearComponentConfig,
-  loadComponentActive,
-  markComponentSaved,
-  seedComponentsFromApi,
-  undo,
-  redo,
-  __resetForTests,
-} from './editorStore';
-
-const tokenRef = (name: string) => ({ kind: 'token' as const, name });
-
-beforeEach(() => {
-  __resetForTests();
-});
-
-describe('component aliases — editor-state round trip', () => {
-  it('setComponentAlias → undo restores previous state; redo reapplies', () => {
-    setComponentAlias('button', '--button-primary-surface', tokenRef('--surface-success-high'));
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-success-high'));
-
-    setComponentAlias('button', '--button-primary-surface', tokenRef('--surface-error-high'));
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-error-high'));
-
-    undo();
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-success-high'));
-
-    redo();
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-error-high'));
-  });
-
-  it('clearComponentAlias removes the entry and is undoable', () => {
-    setComponentAlias('button', '--button-primary-surface', tokenRef('--surface-success-high'));
-    clearComponentAlias('button', '--button-primary-surface');
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toBeUndefined();
-
-    undo();
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-success-high'));
-  });
-
-  it('setComponentAlias implicitly registers the slice with activeFile "default"', () => {
-    setComponentAlias('card', '--card-radius', tokenRef('--radius-lg'));
-    expect(get(editorState).components.card.activeFile).toBe('default');
-    expect(get(editorState).components.card.aliases['--card-radius']).toEqual(tokenRef('--radius-lg'));
-    expect(get(editorState).components.card.config).toEqual({});
-  });
-});
-
-describe('component config — literal-valued knobs', () => {
-  it('setComponentConfig stores the value and is undoable', () => {
-    setComponentConfig('dialog', '--dialog-confirm-variant', 'danger');
-    expect(get(editorState).components.dialog.config['--dialog-confirm-variant']).toBe('danger');
-
-    setComponentConfig('dialog', '--dialog-confirm-variant', 'warning');
-    expect(get(editorState).components.dialog.config['--dialog-confirm-variant']).toBe('warning');
-
-    undo();
-    expect(get(editorState).components.dialog.config['--dialog-confirm-variant']).toBe('danger');
-  });
-
-  it('clearComponentConfig removes the entry', () => {
-    setComponentConfig('dialog', '--dialog-confirm-variant', 'danger');
-    clearComponentConfig('dialog', '--dialog-confirm-variant');
-    expect(get(editorState).components.dialog.config['--dialog-confirm-variant']).toBeUndefined();
-  });
-
-  it('setComponentConfig implicitly registers the slice with empty aliases', () => {
-    setComponentConfig('dialog', '--dialog-cancel-variant', 'outline');
-    expect(get(editorState).components.dialog.activeFile).toBe('default');
-    expect(get(editorState).components.dialog.aliases).toEqual({});
-    expect(get(editorState).components.dialog.config['--dialog-cancel-variant']).toBe('outline');
-  });
-});
-
-describe('componentDirty — per-component scoping', () => {
-  it('marks a component dirty only after its aliases diverge from the saved baseline', () => {
-    loadComponentActive('button', 'default', { '--button-primary-surface': '--surface-success-high' });
-    expect(get(componentDirty).button).toBe(false);
-
-    setComponentAlias('button', '--button-primary-surface', tokenRef('--surface-error-high'));
-    expect(get(componentDirty).button).toBe(true);
-
-    markComponentSaved('button');
-    expect(get(componentDirty).button).toBe(false);
-  });
-
-  it('marks a component dirty when config diverges from the saved baseline', () => {
-    loadComponentActive('dialog', 'default', {}, { '--dialog-confirm-variant': 'primary' });
-    expect(get(componentDirty).dialog).toBe(false);
-
-    setComponentConfig('dialog', '--dialog-confirm-variant', 'danger');
-    expect(get(componentDirty).dialog).toBe(true);
-
-    markComponentSaved('dialog');
-    expect(get(componentDirty).dialog).toBe(false);
-  });
-
-  it('editing one component does not dirty another', () => {
-    loadComponentActive('button', 'default', { '--button-primary-surface': '--surface-success-high' });
-    loadComponentActive('card', 'default', { '--card-radius': '--radius-md' });
-    expect(get(componentDirty).button).toBe(false);
-    expect(get(componentDirty).card).toBe(false);
-
-    setComponentAlias('button', '--button-primary-surface', tokenRef('--surface-error-high'));
-    expect(get(componentDirty).button).toBe(true);
-    expect(get(componentDirty).card).toBe(false);
-  });
-
-  it('undo after a saved state marks dirty again', () => {
-    loadComponentActive('button', 'default', { '--button-primary-surface': '--surface-success-high' });
-    setComponentAlias('button', '--button-primary-surface', tokenRef('--surface-error-high'));
-    markComponentSaved('button');
-    expect(get(componentDirty).button).toBe(false);
-
-    undo();
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-success-high'));
-    expect(get(componentDirty).button).toBe(true);
-  });
-});
-
-describe('loadComponentActive — split-on-load migration', () => {
-  it('routes legacy config keys from single-bucket aliases into the config bucket', () => {
-    loadComponentActive('dialog', 'default', {
-      '--dialog-surface': '--surface-neutral-low',
-      '--dialog-confirm-variant': 'danger',
-    });
-    const slice = get(editorState).components.dialog;
-    expect(slice.aliases['--dialog-surface']).toEqual(tokenRef('--surface-neutral-low'));
-    expect(slice.aliases['--dialog-confirm-variant']).toBeUndefined();
-    expect(slice.config['--dialog-confirm-variant']).toBe('danger');
-  });
-
-  it('keeps CSS-var-valued aliases (e.g. --button-shimmer → --shimmer-on) in the aliases bucket', () => {
-    loadComponentActive('button', 'default', {
-      '--button-primary-surface': '--surface-success-high',
-      '--button-shimmer': '--shimmer-on',
-    });
-    const slice = get(editorState).components.button;
-    expect(slice.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-success-high'));
-    expect(slice.aliases['--button-shimmer']).toEqual(tokenRef('--shimmer-on'));
-    expect(slice.config['--button-shimmer']).toBeUndefined();
-  });
-
-  it('classifies literal alias values as kind "literal"', () => {
-    loadComponentActive('myComp', 'default', {
-      '--my-comp-token': '--some-token',
-      '--my-comp-color': 'rebeccapurple',
-    });
-    const slice = get(editorState).components.myComp;
-    expect(slice.aliases['--my-comp-token']).toEqual(tokenRef('--some-token'));
-    expect(slice.aliases['--my-comp-color']).toEqual({ kind: 'literal', value: 'rebeccapurple' });
-  });
-
-  it('explicit config field wins over legacy alias-bucketed value', () => {
-    loadComponentActive(
-      'dialog',
-      'default',
-      { '--dialog-confirm-variant': 'primary' },
-      { '--dialog-confirm-variant': 'danger' },
-    );
-    expect(get(editorState).components.dialog.config['--dialog-confirm-variant']).toBe('danger');
-  });
-});
-
-describe('seedComponentsFromApi — boot-time hydration', () => {
-  it('populates state and establishes the clean baseline', () => {
-    seedComponentsFromApi({
-      button: { activeFile: 'myConfig', aliases: { '--button-primary-surface': '--surface-success-high' } },
-    });
-    expect(get(editorState).components.button.activeFile).toBe('myConfig');
-    expect(get(editorState).components.button.aliases['--button-primary-surface']).toEqual(tokenRef('--surface-success-high'));
-    expect(get(componentDirty).button).toBe(false);
-  });
-
-  it('routes config keys when seeding from legacy single-bucket API payload', () => {
-    seedComponentsFromApi({
-      dialog: {
-        activeFile: 'default',
-        aliases: { '--dialog-confirm-variant': 'danger', '--dialog-shadow': '--shadow-2xl' },
-      },
-    });
-    const slice = get(editorState).components.dialog;
-    expect(slice.aliases['--dialog-shadow']).toEqual(tokenRef('--shadow-2xl'));
-    expect(slice.aliases['--dialog-confirm-variant']).toBeUndefined();
-    expect(slice.config['--dialog-confirm-variant']).toBe('danger');
-  });
-
-  it('replaces the full components slice', () => {
-    setComponentAlias('card', '--card-radius', tokenRef('--radius-md'));
-    seedComponentsFromApi({
-      button: { activeFile: 'default', aliases: {} },
-    });
-    expect(get(editorState).components.card).toBeUndefined();
-    expect(get(editorState).components.button).toBeDefined();
-  });
-});

package/src/lib/editorStore.test.ts

@@ -1,328 +0,0 @@
-// @vitest-environment happy-dom
-import { beforeEach, describe, expect, it } from 'vitest';
-import { get } from 'svelte/store';
-import type { PaletteConfig } from './themeTypes';
-import {
-  editorState,
-  mutate,
-  beginScope,
-  commitScope,
-  cancelScope,
-  beginSliderGesture,
-  transaction,
-  undo,
-  redo,
-  setPaletteConfig,
-  __resetForTests,
-  __getHistoryLengths,
-  __getPastAt,
-} from './editorStore';
-
-function makePaletteConfig(baseColor: string): PaletteConfig {
-  return {
-    baseColor,
-    tintHue: 0,
-    tintChroma: 0.04,
-    lightnessCurve: [],
-    saturationCurve: [],
-    grayLightnessCurve: [],
-    graySaturationCurve: [],
-    scaleCurves: {},
-    curveOffset: {},
-    overrides: {},
-    snappedScales: [],
-  };
-}
-
-const txOpts = { label: 'tx', collapseToOne: true, clipUndoFloor: false } as const;
-const sessionOpts = { label: 'palette session', collapseToOne: true, clipUndoFloor: true } as const;
-
-beforeEach(() => {
-  __resetForTests();
-});
-
-describe('editorStore — mutate() outside a scope', () => {
-  it('pushes exactly one past[] entry per call and undo restores', () => {
-    setPaletteConfig('Background', makePaletteConfig('#111111'));
-    expect(__getHistoryLengths().past).toBe(1);
-
-    setPaletteConfig('Background', makePaletteConfig('#222222'));
-    expect(__getHistoryLengths().past).toBe(2);
-
-    expect(get(editorState).palettes.Background.baseColor).toBe('#222222');
-    expect(undo()).toBe(true);
-    expect(get(editorState).palettes.Background.baseColor).toBe('#111111');
-    expect(undo()).toBe(true);
-    expect(get(editorState).palettes.Background).toBeUndefined();
-    expect(undo()).toBe(false);
-  });
-});
-
-describe('editorStore — non-clipping scopes group gestures', () => {
-  it('beginScope + multiple mutate() + commitScope → one past entry equal to pre-gesture snapshot', () => {
-    setPaletteConfig('Background', makePaletteConfig('#111111'));
-    const baselinePast = __getHistoryLengths().past;
-    const preGesture = structuredClone(get(editorState));
-
-    const scope = beginScope({ label: 'drag hue', collapseToOne: true, clipUndoFloor: false });
-    mutate('hue step 1', (s) => { s.palettes.Background.baseColor = '#222222'; });
-    mutate('hue step 2', (s) => { s.palettes.Background.baseColor = '#333333'; });
-    mutate('hue step 3', (s) => { s.palettes.Background.baseColor = '#444444'; });
-    commitScope(scope);
-
-    expect(__getHistoryLengths().past).toBe(baselinePast + 1);
-    const lastEntry = __getPastAt(__getHistoryLengths().past - 1)!;
-    expect(lastEntry.palettes.Background.baseColor).toBe(preGesture.palettes.Background.baseColor);
-    expect(get(editorState).palettes.Background.baseColor).toBe('#444444');
-
-    // One undo rolls the whole gesture back
-    undo();
-    expect(get(editorState).palettes.Background.baseColor).toBe('#111111');
-  });
-
-  it('beginSliderGesture opens a scope that groups updates into one entry', () => {
-    setPaletteConfig('Background', makePaletteConfig('#111111'));
-    const baselinePast = __getHistoryLengths().past;
-
-    beginSliderGesture('drag');
-    mutate('step', (s) => { s.palettes.Background.baseColor = '#222222'; });
-    mutate('step', (s) => { s.palettes.Background.baseColor = '#333333'; });
-    // Simulate pointerup
-    window.dispatchEvent(new Event('pointerup'));
-
-    expect(__getHistoryLengths().past).toBe(baselinePast + 1);
-    expect(get(editorState).palettes.Background.baseColor).toBe('#333333');
-  });
-
-  it('empty scope (no mutate calls) does not push history', () => {
-    const baselinePast = __getHistoryLengths().past;
-    const scope = beginScope({ ...txOpts, label: 'unused' });
-    commitScope(scope);
-    expect(__getHistoryLengths().past).toBe(baselinePast);
-  });
-
-  it('cancelScope on a non-clipping scope restores pre-gesture state and does not push history', () => {
-    setPaletteConfig('Background', makePaletteConfig('#111111'));
-    const baselinePast = __getHistoryLengths().past;
-
-    const scope = beginScope({ ...txOpts, label: 'drag' });
-    mutate('step', (s) => { s.palettes.Background.baseColor = '#999999'; });
-    cancelScope(scope, { silent: true });
-
-    expect(__getHistoryLengths().past).toBe(baselinePast);
-    expect(get(editorState).palettes.Background.baseColor).toBe('#111111');
-  });
-});
-
-describe('editorStore — clipping scopes (palette edit sessions)', () => {
-  it('beginScope with clipUndoFloor does not push history', () => {
-    setPaletteConfig('Background', makePaletteConfig('#111111'));
-    const before = __getHistoryLengths().past;
-    beginScope({ ...sessionOpts });
-    expect(__getHistoryLengths().past).toBe(before);
-  });
-
-  it('undo is clipped to the scope floor while open', () => {
-    setPaletteConfig('Background', makePaletteConfig('#111111'));
-    setPaletteConfig('Background', makePaletteConfig('#222222'));
-    const floor = __getHistoryLengths().past;
-
-    beginScope({ ...sessionOpts });
-    setPaletteConfig('Background', makePaletteConfig('#333333'));
-    setPaletteConfig('Background', makePaletteConfig('#444444'));
-    expect(__getHistoryLengths().past).toBe(floor + 2);
-
-    expect(undo()).toBe(true);
-    expect(get(editorState).palettes.Background.baseColor).toBe('#333333');
-    expect(undo()).toBe(true);
-    expect(get(editorState).palettes.Background.baseColor).toBe('#222222');
-
-    // Floor reached — further undo returns false, state unchanged
-    expect(undo()).toBe(false);
-    expect(get(editorState).palettes.Background.baseColor).toBe('#222222');
-  });
-
-  it('commitScope on a clipping scope collapses intra-scope history into one entry equal to the snapshot', () => {
-    setPaletteConfig('Background', makePaletteConfig('#111111'));
-    const preSessionPastLen = __getHistoryLengths().past;
-
-    const session = beginScope({ ...sessionOpts });
-    setPaletteConfig('Background', makePaletteConfig('#222222'));
-    setPaletteConfig('Background', makePaletteConfig('#333333'));
-    setPaletteConfig('Background', makePaletteConfig('#444444'));
-    commitScope(session);
-
-    expect(__getHistoryLengths().past).toBe(preSessionPastLen + 1);
-
-    const committedEntry = __getPastAt(__getHistoryLengths().past - 1)!;
-    expect(committedEntry.palettes.Background.baseColor).toBe('#111111');
-    expect(get(editorState).palettes.Background.baseColor).toBe('#444444');
-
-    // One undo restores pre-scope state
-    undo();
-    expect(get(editorState).palettes.Background.baseColor).toBe('#111111');
-  });
-
-  it('commitScope on a clipping scope with no net change pushes nothing', () => {
-    setPaletteConfig('Background', makePaletteConfig('#111111'));
-    const preSessionPastLen = __getHistoryLengths().past;
-
-    const session = beginScope({ ...sessionOpts });
-    // Mutate and revert to snapshot value
-    setPaletteConfig('Background', makePaletteConfig('#222222'));
-    setPaletteConfig('Background', makePaletteConfig('#111111'));
-    commitScope(session);
-
-    expect(__getHistoryLengths().past).toBe(preSessionPastLen);
-    expect(get(editorState).palettes.Background.baseColor).toBe('#111111');
-  });
-
-  it('cancelScope on a clipping scope restores snapshot, drops intra-scope entries, clears future', () => {
-    setPaletteConfig('Background', makePaletteConfig('#111111'));
-    const preSessionPastLen = __getHistoryLengths().past;
-
-    const session = beginScope({ ...sessionOpts });
-    setPaletteConfig('Background', makePaletteConfig('#222222'));
-    setPaletteConfig('Background', makePaletteConfig('#333333'));
-    expect(__getHistoryLengths().past).toBe(preSessionPastLen + 2);
-
-    cancelScope(session);
-
-    expect(__getHistoryLengths().past).toBe(preSessionPastLen);
-    expect(__getHistoryLengths().future).toBe(0);
-    expect(get(editorState).palettes.Background.baseColor).toBe('#111111');
-  });
-
-  it('nested clipping beginScope auto-commits the prior scope', () => {
-    setPaletteConfig('Background', makePaletteConfig('#111111'));
-    setPaletteConfig('Accent', makePaletteConfig('#aaaaaa'));
-    const preSessionPastLen = __getHistoryLengths().past;
-
-    beginScope({ ...sessionOpts });
-    setPaletteConfig('Background', makePaletteConfig('#222222'));
-    const second = beginScope({ ...sessionOpts }); // auto-commits prior
-    expect(__getHistoryLengths().past).toBe(preSessionPastLen + 1);
-
-    setPaletteConfig('Accent', makePaletteConfig('#bbbbbb'));
-    commitScope(second);
-
-    // Two collapsed entries: prior Background scope, then Accent scope
-    expect(__getHistoryLengths().past).toBe(preSessionPastLen + 2);
-    // One undo: revert Accent to pre-scope value
-    undo();
-    expect(get(editorState).palettes.Accent.baseColor).toBe('#aaaaaa');
-    expect(get(editorState).palettes.Background.baseColor).toBe('#222222');
-    // Another undo: revert Background to pre-scope value
-    undo();
-    expect(get(editorState).palettes.Background.baseColor).toBe('#111111');
-  });
-
-  it('undo() with a pending non-clipping scope cancels it first (drag-in-flight is discarded)', () => {
-    setPaletteConfig('Background', makePaletteConfig('#111111'));
-    const pastLenBefore = __getHistoryLengths().past;
-
-    beginScope({ ...txOpts, label: 'drag' });
-    mutate('step', (s) => { s.palettes.Background.baseColor = '#ffffff'; });
-    // An in-flight drag holds pre-drag state in the scope's snapshot;
-    // `undo()` cancels it (restoring that snapshot) before consulting history.
-    undo();
-    // The cancelled in-flight change is gone; history count unchanged by the cancel.
-    // (Current impl also consumes one history step after cancelling — the
-    // cross-boundary behavior is a separate concern tracked in the plan.)
-    expect(__getHistoryLengths().past).toBe(pastLenBefore - 1);
-    // The pending mutation did not survive: '#ffffff' is not current.
-    expect(get(editorState).palettes.Background?.baseColor).not.toBe('#ffffff');
-  });
-});
-
-describe('editorStore — apply + undo matches spec end-to-end', () => {
-  it('after Apply, one Cmd+Z restores to pre-session state', () => {
-    setPaletteConfig('Background', makePaletteConfig('#8d7f74'));
-    const preSessionState = structuredClone(get(editorState));
-
-    const session = beginScope({ ...sessionOpts });
-    // Simulate three slider drags during the session
-    for (const hex of ['#702030', '#503090', '#205090']) {
-      const drag = beginScope({ ...txOpts, label: `drag ${hex}` });
-      setPaletteConfig('Background', makePaletteConfig(hex));
-      commitScope(drag);
-    }
-    commitScope(session);
-
-    expect(get(editorState).palettes.Background.baseColor).toBe('#205090');
-
-    const undone = undo();
-    expect(undone).toBe(true);
-    expect(get(editorState).palettes.Background.baseColor).toBe(preSessionState.palettes.Background.baseColor);
-    expect(JSON.stringify(get(editorState))).toBe(JSON.stringify(preSessionState));
-  });
-
-  it('after Cancel, Cmd+Z does not resurrect discarded drags', () => {
-    setPaletteConfig('Background', makePaletteConfig('#8d7f74'));
-    const preSessionState = structuredClone(get(editorState));
-
-    const session = beginScope({ ...sessionOpts });
-    for (const hex of ['#702030', '#503090', '#205090']) {
-      const drag = beginScope({ ...txOpts, label: `drag ${hex}` });
-      setPaletteConfig('Background', makePaletteConfig(hex));
-      commitScope(drag);
-    }
-    cancelScope(session);
-
-    // State is pre-session; no new history entry
-    expect(JSON.stringify(get(editorState))).toBe(JSON.stringify(preSessionState));
-    // One undo walks back to before the palette existed (setPaletteConfig before scope)
-    undo();
-    expect(get(editorState).palettes.Background).toBeUndefined();
-  });
-});
-
-describe('editorStore — intra-session slider-drag tracking', () => {
-  // Regression guard for the two-writer feedback loop fixed in the
-  // PaletteEditor single-source-of-truth refactor: during a drag inside a
-  // palette edit session, every per-tick mutation must be visible in the
-  // store immediately (not pulled back to a stale pre-session value).
-  it('store reflects every per-tick mutation during a slider-drag session', () => {
-    setPaletteConfig('Background', makePaletteConfig('#8d7f74'));
-
-    const session = beginScope({ ...sessionOpts });
-    beginSliderGesture('drag base');
-
-    const tickHexes = ['#8c7f73', '#8b7f72', '#8a7f71', '#897f70', '#887f6f'];
-    for (const hex of tickHexes) {
-      mutate('drag tick', (s) => { s.palettes.Background.baseColor = hex; });
-      // Each tick must be visible on read — no stale pre-session value
-      expect(get(editorState).palettes.Background.baseColor).toBe(hex);
-    }
-
-    window.dispatchEvent(new Event('pointerup'));
-    commitScope(session);
-
-    expect(get(editorState).palettes.Background.baseColor).toBe('#887f6f');
-
-    // One undo after Apply restores to pre-session
-    undo();
-    expect(get(editorState).palettes.Background.baseColor).toBe('#8d7f74');
-  });
-
-  it('Cmd+Z during a session walks one tick back per press', () => {
-    setPaletteConfig('Background', makePaletteConfig('#8d7f74'));
-
-    beginScope({ ...sessionOpts });
-    for (const hex of ['#702030', '#503090', '#205090']) {
-      const drag = beginScope({ ...txOpts, label: `drag ${hex}` });
-      mutate('tick', (s) => { s.palettes.Background.baseColor = hex; });
-      commitScope(drag);
-    }
-
-    expect(get(editorState).palettes.Background.baseColor).toBe('#205090');
-    undo();
-    expect(get(editorState).palettes.Background.baseColor).toBe('#503090');
-    undo();
-    expect(get(editorState).palettes.Background.baseColor).toBe('#702030');
-    undo();
-    expect(get(editorState).palettes.Background.baseColor).toBe('#8d7f74');
-    // Session floor reached — further undo no-ops
-    expect(undo()).toBe(false);
-  });
-});

package/src/lib/lazyConfig.test.ts

@@ -1,54 +0,0 @@
-// @vitest-environment happy-dom
-import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { get } from 'svelte/store';
-import { configureEditor, storageKey } from './editorConfig';
-import { route, navigate, init as initRouter } from './router';
-
-describe('M8 — lazy storage prefix resolution', () => {
-  it('storageKey() reflects the prefix at call time, not at module-load time', () => {
-    // The default prefix is `lt-`. configureEditor mutates it; subsequent
-    // storageKey() calls must observe the new prefix.
-    expect(storageKey('editor-state')).toBe('lt-editor-state');
-
-    configureEditor({ storagePrefix: 'test-' });
-    expect(storageKey('editor-state')).toBe('test-editor-state');
-
-    // Reset for any later tests in the file.
-    configureEditor({ storagePrefix: 'lt-' });
-    expect(storageKey('editor-state')).toBe('lt-editor-state');
-  });
-
-  it('editorStore persistNow uses the configured prefix at write time', async () => {
-    // Reconfigure BEFORE importing editorStore — but since these tests share
-    // module state with other suites, we can only verify that getPersistKey
-    // behaviour is lazy via the storageKey contract above. The functional
-    // round-trip is covered by manual library-import tests.
-    configureEditor({ storagePrefix: 'lazy-' });
-    expect(storageKey('editor-state')).toBe('lazy-editor-state');
-    configureEditor({ storagePrefix: 'lt-' });
-  });
-});
-
-describe('m9 — navigate() emits exactly one route store update', () => {
-  beforeEach(() => {
-    // Pin a stable starting route. Router.init() is idempotent; calling it
-    // here is safe even if some earlier test already initialised it.
-    initRouter();
-    // Reset history pushState side effects to a clean state by overwriting
-    // the current route to '/'.
-    history.replaceState(null, '', '/');
-    route.set('/');
-  });
-
-  it('produces a single store write per navigate() call', () => {
-    const sub = vi.fn();
-    const unsub = route.subscribe(sub);
-    sub.mockClear(); // drop the immediate-emit on subscribe
-
-    navigate('/foo');
-    expect(sub).toHaveBeenCalledTimes(1);
-    expect(get(route)).toBe('/foo');
-
-    unsub();
-  });
-});

package/src/lib/migrations/migrations.test.ts

@@ -1,341 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import {
-  CURRENT_THEME_SCHEMA_VERSION,
-  CURRENT_COMPONENT_SCHEMA_VERSION,
-  runMigrations,
-} from './index';
-
-describe('migration runner — schemaVersion gating', () => {
-  it('CURRENT_*_SCHEMA_VERSION are positive (at least one migration registered each)', () => {
-    expect(CURRENT_THEME_SCHEMA_VERSION).toBeGreaterThan(0);
-    expect(CURRENT_COMPONENT_SCHEMA_VERSION).toBeGreaterThan(0);
-  });
-
-  it('legacy theme (schemaVersion: 0) → bg/canvas + legacy-key renames applied; resaved file matches modern shape', () => {
-    const legacy = {
-      // bg → canvas pattern (exact match + boundary suffix)
-      '--surface-bg': '#fff',
-      '--text-bg': '#000',
-      '--border-bg-strong': '#888',
-      // explicit legacy renames
-      '--empty': '#111',
-      '--empty-attachment': 'fixed',
-      // orphan token (silent drop)
-      '--border-neutral': '#ccc',
-      // unrelated key passes through
-      '--text-primary': '#333',
-    };
-    const migrated = runMigrations('theme', 0, legacy);
-    expect(migrated['--surface-canvas']).toBe('#fff');
-    expect(migrated['--text-canvas']).toBe('#000');
-    expect(migrated['--border-canvas-strong']).toBe('#888');
-    expect(migrated['--page-bg']).toBe('#111');
-    expect(migrated['--page-bg-attachment']).toBe('fixed');
-    expect(migrated['--border-neutral']).toBeUndefined();
-    expect(migrated['--text-primary']).toBe('#333');
-    // The "drop" old keys are gone
-    expect(migrated['--surface-bg']).toBeUndefined();
-    expect(migrated['--empty']).toBeUndefined();
-  });
-
-  it('file already at current theme version → no migrations run (passthrough)', () => {
-    const modern = { '--surface-canvas': '#fff', '--text-primary': '#333' };
-    const out = runMigrations('theme', CURRENT_THEME_SCHEMA_VERSION, modern);
-    expect(out).toEqual(modern);
-    // identity-preserved values
-    expect(out['--surface-canvas']).toBe('#fff');
-  });
-
-  it('legacy component-config (schemaVersion: 0) → prefix + suffix renames; segmentedcontrol option-disabled flatten', () => {
-    const legacy = {
-      // abbreviated prefix
-      '--segment-option-bg': '#eee',
-      // segmentedcontrol option-disabled → disabled flatten
-      '--segmentedcontrol-option-disabled-text': '#999',
-      // selected-disabled is dropped (impossible state)
-      '--segmentedcontrol-selected-disabled-bg': 'red',
-      // selected-hover is dropped
-      '--segmentedcontrol-selected-hover-bg': 'blue',
-      // unrelated key
-      '--segment-track-radius': '4px',
-    };
-    const migrated = runMigrations('component-config', 0, legacy, {
-      component: 'segmentedcontrol',
-    });
-    // Prefix renamed, then option-disabled flattened... actually option-disabled
-    // was already on the long-form name, so it goes through the flatten step.
-    expect(migrated['--segmentedcontrol-option-bg']).toBe('#eee');
-    expect(migrated['--segmentedcontrol-disabled-text']).toBe('#999');
-    expect(migrated['--segmentedcontrol-selected-disabled-bg']).toBeUndefined();
-    expect(migrated['--segmentedcontrol-selected-hover-bg']).toBeUndefined();
-    expect(migrated['--segmentedcontrol-track-radius']).toBe('4px');
-  });
-
-  it('component-config file at version 1 → only the >=1 migrations run (segmentedcontrol flatten only)', () => {
-    const v1 = {
-      // Already on long-form prefix; v1 → v2 step still applies for sc
-      '--segmentedcontrol-option-disabled-text': '#999',
-      // suffix-rename rules from v0→v1 should NOT re-apply; abbreviated keys
-      // present at v1 are user-authored and untouched
-      '--segment-something': 'should-pass-through',
-    };
-    const migrated = runMigrations('component-config', 1, v1, {
-      component: 'segmentedcontrol',
-    });
-    expect(migrated['--segmentedcontrol-disabled-text']).toBe('#999');
-    // v0→v1 prefix rename did NOT re-run
-    expect(migrated['--segment-something']).toBe('should-pass-through');
-    expect(migrated['--segmentedcontrol-something']).toBeUndefined();
-  });
-
-  it('component-config at version 2 → collapsiblesection state tokens namespace into container; v3→v4 cleanup applies on top', () => {
-    const v2 = {
-      '--collapsiblesection-default-surface': '--surface-canvas-high',
-      '--collapsiblesection-hover-icon': '--text-primary',
-      '--collapsiblesection-active-border': '--color-primary-400',
-      '--collapsiblesection-expanded-padding': '--space-4',
-      '--collapsiblesection-default-label-font-family': '--font-sans',
-    };
-    const migrated = runMigrations('component-config', 2, v2, {
-      component: 'collapsiblesection',
-    });
-    // Old, unscoped keys are gone after v2→v3
-    expect(migrated['--collapsiblesection-default-surface']).toBeUndefined();
-    expect(migrated['--collapsiblesection-hover-icon']).toBeUndefined();
-    // Surviving header tokens land in the container namespace
-    expect(migrated['--collapsiblesection-container-default-surface']).toBe('--surface-canvas-high');
-    expect(migrated['--collapsiblesection-container-hover-icon']).toBe('--text-primary');
-    expect(migrated['--collapsiblesection-container-default-label-font-family']).toBe('--font-sans');
-    expect(migrated['--collapsiblesection-container-expanded-padding']).toBe('--space-4');
-    // v3→v4 drops container active-border (frame owns chrome now); the
-    // pre-existing default-surface is also seeded into the new frame namespace.
-    expect(migrated['--collapsiblesection-container-active-border']).toBeUndefined();
-    expect(migrated['--collapsiblesection-container-frame-surface']).toBe('--surface-canvas-high');
-  });
-
-  it('component-config v2 namespace migration only fires for collapsiblesection', () => {
-    const v2 = { '--button-primary-surface': '--surface-success' };
-    const out = runMigrations('component-config', 2, v2, { component: 'button' });
-    expect(out).toEqual(v2);
-  });
-
-  it('component-config at version 3 → collapsiblesection container chrome moves into frame, dead per-state tokens drop', () => {
-    const v3 = {
-      // Container default-state chrome → frame (values preserved).
-      '--collapsiblesection-container-default-surface': '--surface-canvas-high',
-      '--collapsiblesection-container-default-border': '--color-primary-400',
-      '--collapsiblesection-container-default-border-width': '--border-width-3',
-      '--collapsiblesection-container-default-radius': '--radius-md',
-      '--collapsiblesection-container-default-padding': '--space-4',
-      // Container hover/active border tokens drop (frame owns chrome).
-      '--collapsiblesection-container-hover-border': '--color-primary-500',
-      '--collapsiblesection-container-hover-border-width': '--border-width-3',
-      '--collapsiblesection-container-active-radius': '--radius-md',
-      '--collapsiblesection-container-active-surface': '--surface-canvas-low',
-      // Chromeless per-state border / radius drop.
-      '--collapsiblesection-chromeless-default-border': '--color-primary-400',
-      '--collapsiblesection-chromeless-hover-border-width': '--border-width-1',
-      '--collapsiblesection-chromeless-active-radius': '--radius-none',
-      '--collapsiblesection-chromeless-default-padding': '--space-4',
-      // Divider radius drops; divider border-* survives (paints bottom rule).
-      '--collapsiblesection-divider-default-border': '--border-neutral-faint',
-      '--collapsiblesection-divider-default-border-width': '--border-width-1',
-      '--collapsiblesection-divider-default-radius': '--radius-none',
-      // Expanded panel: only padding for chromeless/divider; surface + padding for container.
-      '--collapsiblesection-chromeless-expanded-border': '--color-primary-400',
-      '--collapsiblesection-chromeless-expanded-surface': '--surface-canvas',
-      '--collapsiblesection-chromeless-expanded-padding': '--space-4',
-      '--collapsiblesection-container-expanded-radius': '--radius-md',
-      '--collapsiblesection-container-expanded-surface': '--surface-canvas-low',
-      '--collapsiblesection-container-expanded-padding': '--space-4',
-    };
-    const migrated = runMigrations('component-config', 3, v3, {
-      component: 'collapsiblesection',
-    });
-    // Container frame-* seeded from old default-state tokens. The
-    // v5→v6 primary→brand migration rewrites `--color-primary-*` values
-    // to `--color-brand-*` at the tail of the chain.
-    expect(migrated['--collapsiblesection-container-frame-surface']).toBe('--surface-canvas-high');
-    expect(migrated['--collapsiblesection-container-frame-border']).toBe('--color-brand-400');
-    expect(migrated['--collapsiblesection-container-frame-border-width']).toBe('--border-width-3');
-    expect(migrated['--collapsiblesection-container-frame-radius']).toBe('--radius-md');
-    // Container default-state surface + padding survive (still drive header strip)
-    expect(migrated['--collapsiblesection-container-default-surface']).toBe('--surface-canvas-high');
-    expect(migrated['--collapsiblesection-container-default-padding']).toBe('--space-4');
-    // Container default-state border / radius dropped (frame owns them now)
-    expect(migrated['--collapsiblesection-container-default-border']).toBeUndefined();
-    expect(migrated['--collapsiblesection-container-default-border-width']).toBeUndefined();
-    expect(migrated['--collapsiblesection-container-default-radius']).toBeUndefined();
-    // Container hover/active border tokens dropped
-    expect(migrated['--collapsiblesection-container-hover-border']).toBeUndefined();
-    expect(migrated['--collapsiblesection-container-hover-border-width']).toBeUndefined();
-    expect(migrated['--collapsiblesection-container-active-radius']).toBeUndefined();
-    // Container hover/active surface survives (header strip)
-    expect(migrated['--collapsiblesection-container-active-surface']).toBe('--surface-canvas-low');
-    // Chromeless per-state border / radius dropped; padding stays
-    expect(migrated['--collapsiblesection-chromeless-default-border']).toBeUndefined();
-    expect(migrated['--collapsiblesection-chromeless-hover-border-width']).toBeUndefined();
-    expect(migrated['--collapsiblesection-chromeless-active-radius']).toBeUndefined();
-    expect(migrated['--collapsiblesection-chromeless-default-padding']).toBe('--space-4');
-    // Divider border / border-width survive; radius drops
-    expect(migrated['--collapsiblesection-divider-default-border']).toBe('--border-neutral-faint');
-    expect(migrated['--collapsiblesection-divider-default-border-width']).toBe('--border-width-1');
-    expect(migrated['--collapsiblesection-divider-default-radius']).toBeUndefined();
-    // Expanded panel cleanup
-    expect(migrated['--collapsiblesection-chromeless-expanded-border']).toBeUndefined();
-    expect(migrated['--collapsiblesection-chromeless-expanded-surface']).toBeUndefined();
-    expect(migrated['--collapsiblesection-chromeless-expanded-padding']).toBe('--space-4');
-    expect(migrated['--collapsiblesection-container-expanded-radius']).toBeUndefined();
-    expect(migrated['--collapsiblesection-container-expanded-surface']).toBe('--surface-canvas-low');
-    expect(migrated['--collapsiblesection-container-expanded-padding']).toBe('--space-4');
-  });
-
-  it('component-config at version 4 → sectiondivider gradient stops migrate to angle + stop-{n}-{color,position}', () => {
-    const v4 = {
-      '--sectiondivider-canvas-padding': '--space-16',
-      '--sectiondivider-canvas-gradient-stop-1': '--surface-canvas-highest',
-      '--sectiondivider-canvas-gradient-stop-2': '--surface-canvas-higher',
-      '--sectiondivider-canvas-gradient-stop-3': '--surface-canvas-high',
-      '--sectiondivider-canvas-gradient-stop-4': '--surface-canvas',
-      '--sectiondivider-primary-gradient-stop-1': '--color-primary-300',
-      '--sectiondivider-primary-gradient-stop-2': '--color-primary-500',
-      '--sectiondivider-primary-gradient-stop-4': '--color-primary-800',
-    };
-    const migrated = runMigrations('component-config', 4, v4, { component: 'sectiondivider' });
-    // Old keys gone
-    expect(migrated['--sectiondivider-canvas-gradient-stop-1']).toBeUndefined();
-    expect(migrated['--sectiondivider-canvas-gradient-stop-3']).toBeUndefined();
-    expect(migrated['--sectiondivider-canvas-gradient-stop-4']).toBeUndefined();
-    // Unrelated tokens preserved
-    expect(migrated['--sectiondivider-canvas-padding']).toBe('--space-16');
-    // Canvas: colors mapped from old 1, 2, 4
-    expect(migrated['--sectiondivider-canvas-gradient-angle']).toBe('--gradient-angle-diagonal');
-    expect(migrated['--sectiondivider-canvas-gradient-stop-1-color']).toBe('--surface-canvas-highest');
-    expect(migrated['--sectiondivider-canvas-gradient-stop-1-position']).toBe('--gradient-stop-start');
-    expect(migrated['--sectiondivider-canvas-gradient-stop-2-color']).toBe('--surface-canvas-higher');
-    expect(migrated['--sectiondivider-canvas-gradient-stop-2-position']).toBe('--gradient-stop-mid');
-    expect(migrated['--sectiondivider-canvas-gradient-stop-3-color']).toBe('--surface-canvas');
-    expect(migrated['--sectiondivider-canvas-gradient-stop-3-position']).toBe('--gradient-stop-end');
-    // Primary variant: user-tuned colors carry across; v5→v6 also rewrites
-    // the brand-family value names.
-    expect(migrated['--sectiondivider-primary-gradient-stop-1-color']).toBe('--color-brand-300');
-    expect(migrated['--sectiondivider-primary-gradient-stop-2-color']).toBe('--color-brand-500');
-    expect(migrated['--sectiondivider-primary-gradient-stop-3-color']).toBe('--color-brand-800');
-    // Variants the file didn't set still gain default colors and angle/positions
-    expect(migrated['--sectiondivider-special-gradient-angle']).toBe('--gradient-angle-diagonal');
-    expect(migrated['--sectiondivider-special-gradient-stop-1-color']).toBe('--surface-special-highest');
-    expect(migrated['--sectiondivider-special-gradient-stop-3-position']).toBe('--gradient-stop-end');
-  });
-
-  it('component-config v4 sectiondivider migration only fires for sectiondivider', () => {
-    // Use a value not in the brand-rename map so the v5→v6 step is also a no-op.
-    const v4 = { '--button-primary-gradient-stop-1': '--surface-accent' };
-    const out = runMigrations('component-config', 4, v4, { component: 'button' });
-    expect(out).toEqual(v4);
-  });
-
-  it('component-config v4 sectiondivider migration is idempotent on the new shape', () => {
-    const newShape = {
-      '--sectiondivider-canvas-gradient-angle': '--gradient-angle-horizontal',
-      '--sectiondivider-canvas-gradient-stop-1-color': '--color-primary-200',
-      '--sectiondivider-canvas-gradient-stop-1-position': '10%',
-      '--sectiondivider-canvas-gradient-stop-2-color': '--color-primary-500',
-      '--sectiondivider-canvas-gradient-stop-2-position': '40%',
-      '--sectiondivider-canvas-gradient-stop-3-color': '--color-primary-900',
-      '--sectiondivider-canvas-gradient-stop-3-position': '85%',
-    };
-    const out = runMigrations('component-config', 4, newShape, { component: 'sectiondivider' });
-    // User-tuned values for canvas survive structurally; v5→v6 rewrites
-    // brand-family value names from primary → brand at the tail of the chain.
-    expect(out['--sectiondivider-canvas-gradient-angle']).toBe('--gradient-angle-horizontal');
-    expect(out['--sectiondivider-canvas-gradient-stop-1-color']).toBe('--color-brand-200');
-    expect(out['--sectiondivider-canvas-gradient-stop-1-position']).toBe('10%');
-    expect(out['--sectiondivider-canvas-gradient-stop-2-position']).toBe('40%');
-    expect(out['--sectiondivider-canvas-gradient-stop-3-position']).toBe('85%');
-  });
-
-  it('component-config at current version → no migrations run', () => {
-    const current = { '--button-primary-surface': '--surface-success' };
-    const out = runMigrations(
-      'component-config',
-      CURRENT_COMPONENT_SCHEMA_VERSION,
-      current,
-      { component: 'button' },
-    );
-    expect(out).toEqual(current);
-  });
-
-  it('theme v1 → v2 primary→brand: brand family keys renamed, neutral --text-primary untouched', () => {
-    const v1 = {
-      '--color-primary-100': '#ffe6f9',
-      '--color-primary-500': '#eb0ad4',
-      '--surface-primary': '#55004c',
-      '--surface-primary-high': '#6c0061',
-      '--border-primary': '#b200a0',
-      '--border-primary-strong': '#ff90eb',
-      '--text-primary-color': '#ff8eeb',
-      '--text-primary-secondary': '#fe5be7',
-      // Neutral text ramp — must NOT be touched.
-      '--text-primary': '#fff5f0',
-      '--text-secondary': '#b0a9a4',
-      // Component variant — also must NOT be touched.
-      '--button-primary-surface': '#abc123',
-    };
-    const out = runMigrations('theme', 1, v1);
-    // Brand family renamed.
-    expect(out['--color-brand-100']).toBe('#ffe6f9');
-    expect(out['--color-brand-500']).toBe('#eb0ad4');
-    expect(out['--surface-brand']).toBe('#55004c');
-    expect(out['--surface-brand-high']).toBe('#6c0061');
-    expect(out['--border-brand']).toBe('#b200a0');
-    expect(out['--border-brand-strong']).toBe('#ff90eb');
-    expect(out['--text-brand']).toBe('#ff8eeb');
-    expect(out['--text-brand-secondary']).toBe('#fe5be7');
-    // Old keys gone.
-    expect(out['--color-primary-100']).toBeUndefined();
-    expect(out['--surface-primary']).toBeUndefined();
-    expect(out['--border-primary']).toBeUndefined();
-    expect(out['--text-primary-color']).toBeUndefined();
-    expect(out['--text-primary-secondary']).toBeUndefined();
-    // Neutral text + component variants survive verbatim.
-    expect(out['--text-primary']).toBe('#fff5f0');
-    expect(out['--text-secondary']).toBe('#b0a9a4');
-    expect(out['--button-primary-surface']).toBe('#abc123');
-  });
-
-  it('component-config v5 → v6 primary→brand: rewrites alias keys AND values; component variants untouched', () => {
-    const v5 = {
-      // Brand family on the alias key side (rare but possible).
-      '--text-primary-color': '#fff',
-      // Brand family on the value side (common: component aliases to family token).
-      '--badge-trait-surface': '--surface-primary',
-      '--badge-trait-text': '--text-primary-color',
-      '--badge-trait-border': '--border-primary-medium',
-      // Component variant token — name should NOT change.
-      '--button-primary-surface': '--surface-brand-high',
-      // Neutral text — value should NOT change.
-      '--card-default-title': '--text-primary',
-      // Unrelated key/value pair.
-      '--card-hover-title': '--text-secondary',
-    };
-    const out = runMigrations('component-config', 5, v5, { component: 'badge' });
-    expect(out['--text-brand']).toBe('#fff');
-    expect(out['--text-primary-color']).toBeUndefined();
-    expect(out['--badge-trait-surface']).toBe('--surface-brand');
-    expect(out['--badge-trait-text']).toBe('--text-brand');
-    expect(out['--badge-trait-border']).toBe('--border-brand-medium');
-    // Component variant identifier (LHS) is preserved; its value is not in the
-    // rename map so it passes through.
-    expect(out['--button-primary-surface']).toBe('--surface-brand-high');
-    // Neutral text value preserved.
-    expect(out['--card-default-title']).toBe('--text-primary');
-    expect(out['--card-hover-title']).toBe('--text-secondary');
-  });
-
-  it('runMigrations is pure — does not mutate the input map', () => {
-    const input = { '--surface-bg': '#fff' };
-    const before = { ...input };
-    runMigrations('theme', 0, input);
-    expect(input).toEqual(before);
-  });
-});

package/src/ui/PaletteEditor.test.ts

@@ -1,108 +0,0 @@
-// @vitest-environment happy-dom
-import { beforeEach, describe, expect, it } from 'vitest';
-import { get } from 'svelte/store';
-import PaletteEditor from './PaletteEditor.svelte';
-import {
-  editorState,
-  mutate,
-  beginScope,
-  commitScope,
-  cancelScope,
-  beginSliderGesture,
-  setPaletteConfig,
-  undo,
-  __resetForTests,
-} from '../lib/editorStore';
-import type { PaletteConfig } from '../lib/themeTypes';
-
-function makePaletteConfig(baseColor: string): PaletteConfig {
-  return {
-    baseColor,
-    tintHue: 0,
-    tintChroma: 0.04,
-    lightnessCurve: [],
-    saturationCurve: [],
-    grayLightnessCurve: [],
-    graySaturationCurve: [],
-    scaleCurves: {},
-    curveOffset: {},
-    overrides: {},
-    snappedScales: [],
-  };
-}
-
-const sessionOpts = { label: 'palette session', collapseToOne: true, clipUndoFloor: true } as const;
-
-beforeEach(() => {
-  __resetForTests();
-  document.body.innerHTML = '';
-});
-
-describe('PaletteEditor — store-first integration', () => {
-  // Mounts the real component to exercise the $: derivations off the store
-  // and prove the sync/auto-persist round-trip has been removed. If the
-  // previous two-writer loop were reintroduced, per-tick mutations during a
-  // session would be pulled back to the pre-session snapshot — this test
-  // would fail.
-  it('mounts against the editor store without throwing', () => {
-    setPaletteConfig('Background', makePaletteConfig('#8d7f74'));
-
-    const target = document.createElement('div');
-    document.body.appendChild(target);
-
-    const component = new PaletteEditor({
-      target,
-      props: { label: 'Background', initialColor: '#8d7f74', mode: 'chromatic' },
-    });
-
-    expect(get(editorState).palettes.Background.baseColor).toBe('#8d7f74');
-    component.$destroy();
-  });
-
-  it('per-tick store mutations are visible immediately during a session', () => {
-    setPaletteConfig('Background', makePaletteConfig('#8d7f74'));
-
-    const target = document.createElement('div');
-    document.body.appendChild(target);
-    const component = new PaletteEditor({
-      target,
-      props: { label: 'Background', initialColor: '#8d7f74', mode: 'chromatic' },
-    });
-
-    const session = beginScope({ ...sessionOpts });
-    beginSliderGesture('drag base');
-
-    for (const hex of ['#8c7f73', '#8b7f72', '#8a7f71']) {
-      mutate('drag tick', (s) => { s.palettes.Background.baseColor = hex; });
-      expect(get(editorState).palettes.Background.baseColor).toBe(hex);
-    }
-
-    window.dispatchEvent(new Event('pointerup'));
-    commitScope(session);
-
-    expect(get(editorState).palettes.Background.baseColor).toBe('#8a7f71');
-
-    undo();
-    expect(get(editorState).palettes.Background.baseColor).toBe('#8d7f74');
-
-    component.$destroy();
-  });
-
-  it('cancel after drag snaps the store back to pre-session', () => {
-    setPaletteConfig('Background', makePaletteConfig('#8d7f74'));
-
-    const target = document.createElement('div');
-    document.body.appendChild(target);
-    const component = new PaletteEditor({
-      target,
-      props: { label: 'Background', initialColor: '#8d7f74', mode: 'chromatic' },
-    });
-
-    const session = beginScope({ ...sessionOpts });
-    mutate('drag', (s) => { s.palettes.Background.baseColor = '#112233'; });
-    cancelScope(session);
-
-    expect(get(editorState).palettes.Background.baseColor).toBe('#8d7f74');
-    component.$destroy();
-  });
-});