@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/editor/core/store/gradientSource.ts

@@ -0,0 +1,192 @@
+/**
+ * Source adapter for the visual gradient editor.
+ *
+ * `GradientEditor.svelte` was originally hard-wired to the theme-level
+ * gradient library (`state.gradients.tokens`). Components that own their
+ * own structured gradients (e.g. SectionDivider's per-variant slot) live
+ * in `state.components[...].aliases[...]` as a `kind: 'gradient'` ref.
+ *
+ * Wrapping both behind one source interface lets the editor read + write
+ * either backing store without leaking knowledge of which it's editing.
+ * The store-derived `current` field reactively exposes the current value;
+ * the mutator methods funnel each change through `mutate`, so undo /
+ * persistence still cover the edit identically to direct API calls.
+ */
+import { derived, get, type Readable } from 'svelte/store';
+import { editorState } from './editorStore';
+import type { GradientType, GradientTokenStop, GradientAliasValue, CssVarRef } from './editorTypes';
+import {
+  setGradient,
+  setGradientType,
+  setGradientAngle,
+  setGradientCenterX,
+  setGradientAspect,
+  setGradientStop,
+  addGradientStop,
+  removeGradientStop,
+} from '../themes/slices/gradients';
+import { setComponentAlias } from '../themes/slices/components';
+import { mutate } from './editorCore';
+
+export interface GradientSourceSnapshot {
+  type: GradientType;
+  angle: number;
+  /** Horizontal center for radial gradients, 0–100. */
+  centerX?: number;
+  /** Per-axis stretch factors for the radial ellipse (1 = unscaled). */
+  aspectX?: number;
+  aspectY?: number;
+  stops: GradientTokenStop[];
+}
+
+export interface GradientSource {
+  /** Reactive readable of the current gradient value (or undefined if missing). */
+  current: Readable<GradientSourceSnapshot | undefined>;
+  setAll(next: GradientSourceSnapshot): void;
+  setType(type: GradientType): void;
+  setAngle(angle: number): void;
+  setCenterX(centerX: number): void;
+  setAspect(aspect: { x: number; y: number }): void;
+  setStop(index: number, partial: Partial<GradientTokenStop>): void;
+  addStop(stop: GradientTokenStop): void;
+  removeStop(index: number): void;
+}
+
+/** Adapter for `--gradient-N` library tokens in `state.gradients.tokens`. */
+export function themeGradientSource(variable: string): GradientSource {
+  const current = derived(editorState, ($s) => {
+    const t = $s.gradients.tokens.find((g) => g.variable === variable);
+    if (!t) return undefined;
+    return {
+      type: t.type,
+      angle: t.angle,
+      centerX: t.centerX,
+      aspectX: t.aspectX,
+      aspectY: t.aspectY,
+      stops: t.stops.map((s) => ({ ...s })),
+    };
+  });
+  return {
+    current,
+    setAll: (next) => setGradient(variable, next),
+    setType: (t) => setGradientType(variable, t),
+    setAngle: (a) => setGradientAngle(variable, a),
+    setCenterX: (x) => setGradientCenterX(variable, x),
+    setAspect: (a) => setGradientAspect(variable, a),
+    setStop: (i, p) => setGradientStop(variable, i, p),
+    addStop: (s) => addGradientStop(variable, s),
+    removeStop: (i) => removeGradientStop(variable, i),
+  };
+}
+
+function readComponentGradient(component: string, varName: string): GradientAliasValue | undefined {
+  const ref = get(editorState).components[component]?.aliases[varName];
+  return ref?.kind === 'gradient' ? ref.value : undefined;
+}
+
+function writeComponentGradient(component: string, varName: string, value: GradientAliasValue): void {
+  const ref: CssVarRef = { kind: 'gradient', value };
+  setComponentAlias(component, varName, ref);
+}
+
+/** Adapter for component-owned gradients stored inline on a component alias. */
+export function componentGradientSource(component: string, varName: string): GradientSource {
+  const current = derived(editorState, ($s) => {
+    const ref = $s.components[component]?.aliases[varName];
+    if (ref?.kind !== 'gradient') return undefined;
+    return {
+      type: ref.value.type,
+      angle: ref.value.angle,
+      centerX: ref.value.centerX,
+      aspectX: ref.value.aspectX,
+      aspectY: ref.value.aspectY,
+      stops: ref.value.stops.map((s) => ({ ...s })),
+    };
+  });
+  /** Read-modify-write through `mutate` so each edit is one history entry
+   *  and the renderer + persistence cycle pick it up uniformly with the
+   *  theme-gradient path. */
+  const update = (label: string, mutator: (g: GradientAliasValue) => void): void => {
+    mutate(label, (s) => {
+      const slice = s.components[component] ?? (s.components[component] = { activeFile: 'default', aliases: {}, config: {} });
+      const ref = slice.aliases[varName];
+      const base: GradientAliasValue =
+        ref?.kind === 'gradient'
+          ? {
+              type: ref.value.type,
+              angle: ref.value.angle,
+              ...(ref.value.centerX !== undefined ? { centerX: ref.value.centerX } : {}),
+              ...(ref.value.aspectX !== undefined ? { aspectX: ref.value.aspectX } : {}),
+              ...(ref.value.aspectY !== undefined ? { aspectY: ref.value.aspectY } : {}),
+              stops: ref.value.stops.map((st) => ({ ...st })),
+            }
+          : { type: 'linear', angle: 135, stops: [] };
+      mutator(base);
+      slice.aliases[varName] = { kind: 'gradient', value: base };
+    });
+  };
+  return {
+    current,
+    setAll: (next) => writeComponentGradient(component, varName, {
+      type: next.type,
+      angle: next.angle,
+      ...(next.centerX !== undefined ? { centerX: next.centerX } : {}),
+      ...(next.aspectX !== undefined ? { aspectX: next.aspectX } : {}),
+      ...(next.aspectY !== undefined ? { aspectY: next.aspectY } : {}),
+      stops: next.stops.map((s) => ({ ...s })),
+    }),
+    setType: (t) => update(`set gradient type ${varName}`, (g) => { g.type = t; }),
+    setAngle: (a) => update(`set gradient angle ${varName}`, (g) => { g.angle = a; }),
+    setCenterX: (x) => update(`set gradient center ${varName}`, (g) => { g.centerX = x; }),
+    setAspect: (a) => update(`set gradient aspect ${varName}`, (g) => {
+      // Drop axes that equal 1 so persisted JSON stays minimal and pre-aspect
+      // data round-trips unchanged.
+      if (a.x === 1) delete g.aspectX;
+      else g.aspectX = a.x;
+      if (a.y === 1) delete g.aspectY;
+      else g.aspectY = a.y;
+    }),
+    setStop: (i, p) => update(`set gradient stop ${varName}[${i}]`, (g) => {
+      const stop = g.stops[i];
+      if (!stop) return;
+      if (p.position !== undefined) stop.position = p.position;
+      if (p.color !== undefined) stop.color = p.color;
+      if (p.opacity !== undefined) stop.opacity = p.opacity;
+      // `monochrome: true` is the implicit default — drop the field on write
+      // so the persisted shape stays minimal. Only the explicit override
+      // (`false`) needs to live on the stop.
+      if (p.monochrome !== undefined) {
+        if (p.monochrome === false) stop.monochrome = false;
+        else delete stop.monochrome;
+      }
+    }),
+    addStop: (s) => update(`add gradient stop ${varName}`, (g) => {
+      g.stops.push({ ...s });
+      g.stops.sort((a, b) => a.position - b.position);
+    }),
+    removeStop: (i) => update(`remove gradient stop ${varName}[${i}]`, (g) => {
+      if (g.stops.length <= 2) return;
+      g.stops.splice(i, 1);
+    }),
+  };
+}
+
+/** Snapshot helper for save/cancel flows. */
+export function snapshotGradient(source: GradientSource): GradientSourceSnapshot | null {
+  const cur = get(source.current);
+  if (!cur) return null;
+  return {
+    type: cur.type,
+    angle: cur.angle,
+    ...(cur.centerX !== undefined ? { centerX: cur.centerX } : {}),
+    ...(cur.aspectX !== undefined ? { aspectX: cur.aspectX } : {}),
+    ...(cur.aspectY !== undefined ? { aspectY: cur.aspectY } : {}),
+    stops: cur.stops.map((s) => ({ ...s })),
+  };
+}
+
+/** Read the component-side current gradient value used to seed UI defaults
+ *  outside the GradientSource flow (e.g. the Monochrome checkbox derivation). */
+export function readComponentGradientSync(component: string, varName: string): GradientAliasValue | undefined {
+  return readComponentGradient(component, varName);
+}

package/src/editor/core/themes/migrations/2026-05-19-collapsiblesection-drop-frame-surface.ts

@@ -0,0 +1,28 @@
+import type { Migration } from './index';
+
+/**
+ * 2026-05-19: drop `--collapsiblesection-container-frame-surface`.
+ *
+ * The frame-surface token only ever painted the outer `.es-root` background.
+ * Since `.section-header` covers that area with its own per-state surface, the
+ * frame-surface was only visible where the (typically transparent) frame
+ * border zone exposed it — a ring around the header. That made the token
+ * read as a "border" while being labeled "surface color" in the editor.
+ *
+ * Frame is now pure chrome: border color, border width, corner radius. The
+ * per-state header surface tokens already cover all the legitimate surface
+ * needs of the Container variant.
+ */
+function dropFrameSurface(rawVars: Record<string, string>, meta: { component?: string }): Record<string, string> {
+  if (meta.component !== 'collapsiblesection') return rawVars;
+  const { '--collapsiblesection-container-frame-surface': _drop, ...rest } = rawVars;
+  return rest;
+}
+
+export const componentMigration_2026_05_19_collapsiblesectionDropFrameSurface: Migration = {
+  id: '2026-05-19-collapsiblesection-drop-frame-surface',
+  fromVersion: 6,
+  toVersion: 7,
+  appliesTo: 'component-config',
+  apply: dropFrameSurface,
+};

package/src/editor/core/themes/migrations/2026-05-19-sectiondivider-rich-gradient.ts

@@ -0,0 +1,35 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-19, sectiondivider only):
+ * the per-variant gradient was 7 flat tokens (angle + 3× (color + position)).
+ * It now lives as a single structured alias at `--sectiondivider-{v}-gradient`,
+ * carrying `{type, angle, stops[]}` inline on the component slice.
+ *
+ * The structured value is synthesized *before* this migration runs — see
+ * `synthesizeSectionDividerGradients` in `editorStore.ts`. The synthesizer
+ * walks the legacy 7-token shape and emits a `kind: 'gradient'` alias into
+ * the load path's object subset, where it survives this stripping pass and
+ * lands in the in-memory slice.
+ *
+ * This migration's only job is to delete the now-redundant flat tokens
+ * from the disk-shape string subset so a subsequent save round-trips to
+ * the new format.
+ */
+const FLAT_RE = /^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-gradient-(angle|stop-[123]-(color|position))$/;
+
+export const componentMigration_2026_05_19_sectiondividerRichGradient: Migration = {
+  id: '2026-05-19-sectiondivider-rich-gradient',
+  fromVersion: 7,
+  toVersion: 8,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'sectiondivider') return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (FLAT_RE.test(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-05-20-sectiondivider-slim-variants.ts

@@ -0,0 +1,82 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-20, sectiondivider only):
+ * the variant axis was reshaped from six color families →
+ * three size presets (lg/md/sm). Each new variant owns its full token set
+ * (typography, geometry, AND colors / background) so the editor can author
+ * full visual presets per-variant without a separate color axis.
+ *
+ * Migration strategy: take **canvas** as the canonical family from the v8
+ * file and seed all three new variants from its values. Customisations on
+ * other v8 families (neutral, accent, primary, etc.) are dropped — the user
+ * customises each new variant from the shared canvas baseline.
+ *
+ * Two inline suffix renames also land here:
+ *   `*-title-border-width` → `*-title-outline-width`
+ *   `*-title-stroke-color` → `*-title-outline-color`
+ *   `*-padding`            → `*-spacing`
+ *
+ * The structured background payload moves through a companion rename in
+ * `migrateComponentAliases` (editorStore.ts), since the runner only sees
+ * string keys.
+ */
+const FAMILIES = ['canvas', 'neutral', 'alternate', 'primary', 'accent', 'special'] as const;
+type Family = typeof FAMILIES[number];
+const VARIANTS = ['lg', 'md', 'sm'] as const;
+
+const SUFFIX_RENAMES: Array<[RegExp, string]> = [
+  [/-title-border-width$/, '-title-outline-width'],
+  [/-title-stroke-color$/, '-title-outline-color'],
+  [/-padding$/, '-spacing'],
+];
+
+function renameKeySuffix(key: string): string {
+  for (const [re, repl] of SUFFIX_RENAMES) {
+    if (re.test(key)) return key.replace(re, repl);
+  }
+  return key;
+}
+
+function splitFamilyKey(key: string): { family: Family; suffix: string } | null {
+  const m = key.match(/^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-(.+)$/);
+  if (!m) return null;
+  return { family: m[1] as Family, suffix: m[2] };
+}
+
+export const componentMigration_2026_05_20_sectiondividerSlimVariants: Migration = {
+  id: '2026-05-20-sectiondivider-slim-variants',
+  fromVersion: 8,
+  toVersion: 9,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'sectiondivider') return { ...rawVars };
+    const out: Record<string, string> = {};
+
+    // Collect canvas's suffix → value mapping first; everything else gets
+    // pruned. (Canvas wins; other families' customisations are discarded
+    // because the new variants are size/preset-shaped, not color-shaped.)
+    const canvasValues: Record<string, string> = {};
+
+    for (const [rawKey, value] of Object.entries(rawVars)) {
+      const key = renameKeySuffix(rawKey);
+      const parts = splitFamilyKey(key);
+      if (!parts) {
+        // Non-family-prefixed key — pass through verbatim.
+        out[key] = value;
+        continue;
+      }
+      if (parts.family !== 'canvas') continue; // Drop non-canvas tokens
+      canvasValues[parts.suffix] = value;
+    }
+
+    // Seed all three size variants from canvas's values.
+    for (const suffix of Object.keys(canvasValues)) {
+      for (const v of VARIANTS) {
+        out[`--sectiondivider-${v}-${suffix}`] = canvasValues[suffix];
+      }
+    }
+
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-05-21-sectiondivider-spacing-to-padding.ts

@@ -0,0 +1,24 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-21, sectiondivider only):
+ * the container `*-spacing` token is renamed back to `*-padding` so it can
+ * use the editor's splittable padding selector (per-side control). The new
+ * editor also adds per-element padding tokens (title / description / eyebrow),
+ * but those have no v9 predecessor — they simply start unset.
+ */
+export const componentMigration_2026_05_21_sectiondividerSpacingToPadding: Migration = {
+  id: '2026-05-21-sectiondivider-spacing-to-padding',
+  fromVersion: 9,
+  toVersion: 10,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'sectiondivider') return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const renamed = key.replace(/-spacing$/, '-padding');
+      out[renamed] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-05-22-sectiondivider-intrinsics-to-css.ts

@@ -0,0 +1,81 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-22, sectiondivider only):
+ * the per-variant *intrinsics* (align, hairline visibility + position, eyebrow
+ * visibility + uppercase, description visibility) move from the `config`
+ * bucket — where the editor preview consumed them as runtime props — into
+ * the `aliases` bucket as cascading CSS variables. Live consumers can then
+ * read them off `:root` via `var(...)`, closing the editor-to-consumer sync
+ * gap the old config-bucket encoding had.
+ *
+ * Mapping per variant `v in (lg, md, sm)`:
+ *   --sectiondivider-{v}-show-eyebrow          ('1' | '')              →  --sectiondivider-{v}-eyebrow-display          ('block' | 'none')
+ *   --sectiondivider-{v}-show-description      ('1' | '')              →  --sectiondivider-{v}-description-display      ('flex'  | 'none')
+ *   --sectiondivider-{v}-show-hairline + -hairline  (toggle + pos)     →  --sectiondivider-{v}-hairline                 ('none' | <position>)
+ *   --sectiondivider-{v}-eyebrow-uppercase     ('1' | '')              →  --sectiondivider-{v}-eyebrow-text-transform   ('uppercase' | 'none')
+ *   --sectiondivider-{v}-align                                         →  unchanged (value space is already CSS-keyword: 'start' | 'center')
+ *   --sectiondivider-{v}-color-family                                  →  unchanged (still a config-bucket entry; drives editor's family swap)
+ *
+ * The hairline merge collapses two old keys (a boolean toggle + a position
+ * enum) into one. Rules (matching the legacy `getShowHairline` reader):
+ *   - `show-hairline` explicitly ''      → 'none'
+ *   - `show-hairline` explicitly '1'     → existing position, or 'above-label' fallback
+ *   - both undefined                     → emit nothing (default 'none' applies via CSS)
+ *   - `show-hairline` unset but a real position exists → preserve the position
+ *
+ * The migration touches the unified bag produced by `migrateComponentAliases`
+ * (which now pre-merges string-valued config entries). The post-migration
+ * `splitAliasesAndConfig` step routes the new keys to `aliases` (since
+ * `KNOWN_COMPONENT_CONFIG_KEYS` no longer contains them) while keeping
+ * `--sectiondivider-{v}-color-family` in `config`.
+ */
+export const componentMigration_2026_05_22_sectiondividerIntrinsicsToCss: Migration = {
+  id: '2026-05-22-sectiondivider-intrinsics-to-css',
+  fromVersion: 10,
+  toVersion: 11,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'sectiondivider') return { ...rawVars };
+    const VARIANTS = ['lg', 'md', 'sm'] as const;
+    const prefix = '--sectiondivider-';
+    const dropped = new Set<string>();
+    for (const v of VARIANTS) {
+      dropped.add(`${prefix}${v}-show-eyebrow`);
+      dropped.add(`${prefix}${v}-show-description`);
+      dropped.add(`${prefix}${v}-show-hairline`);
+      dropped.add(`${prefix}${v}-hairline`);
+      dropped.add(`${prefix}${v}-eyebrow-uppercase`);
+    }
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (dropped.has(key)) continue;
+      out[key] = value;
+    }
+    for (const v of VARIANTS) {
+      const showEyebrow = rawVars[`${prefix}${v}-show-eyebrow`];
+      if (showEyebrow !== undefined) {
+        out[`${prefix}${v}-eyebrow-display`] = showEyebrow === '1' ? 'block' : 'none';
+      }
+      const showDesc = rawVars[`${prefix}${v}-show-description`];
+      if (showDesc !== undefined) {
+        out[`${prefix}${v}-description-display`] = showDesc === '1' ? 'flex' : 'none';
+      }
+      const showHair = rawVars[`${prefix}${v}-show-hairline`];
+      const oldHair = rawVars[`${prefix}${v}-hairline`];
+      const oldHairIsPos = typeof oldHair === 'string' && oldHair !== '' && oldHair !== 'off';
+      let newHair: string | undefined;
+      if (showHair === '') newHair = 'none';
+      else if (showHair === '1') newHair = oldHairIsPos ? oldHair : 'above-label';
+      else if (oldHair !== undefined) newHair = oldHairIsPos ? oldHair : 'none';
+      if (newHair !== undefined) {
+        out[`${prefix}${v}-hairline`] = newHair;
+      }
+      const upper = rawVars[`${prefix}${v}-eyebrow-uppercase`];
+      if (upper !== undefined) {
+        out[`${prefix}${v}-eyebrow-text-transform`] = upper === '1' ? 'uppercase' : 'none';
+      }
+    }
+    return out;
+  },
+};

package/src/{lib → editor/core/themes}/migrations/index.ts

@@ -40,6 +40,11 @@ import {
   themeMigration_2026_05_13_primaryToBrand,
   componentMigration_2026_05_13_primaryToBrand,
 } from './2026-05-13-primary-to-brand';
+import { componentMigration_2026_05_19_collapsiblesectionDropFrameSurface } from './2026-05-19-collapsiblesection-drop-frame-surface';
+import { componentMigration_2026_05_19_sectiondividerRichGradient } from './2026-05-19-sectiondivider-rich-gradient';
+import { componentMigration_2026_05_20_sectiondividerSlimVariants } from './2026-05-20-sectiondivider-slim-variants';
+import { componentMigration_2026_05_21_sectiondividerSpacingToPadding } from './2026-05-21-sectiondivider-spacing-to-padding';
+import { componentMigration_2026_05_22_sectiondividerIntrinsicsToCss } from './2026-05-22-sectiondivider-intrinsics-to-css';
 
 /**
  * Registered migrations. Order in this array does not matter — the runner
@@ -54,6 +59,11 @@ export const MIGRATIONS: Migration[] = [
   componentMigration_2026_05_08_collapsiblesectionFrameAndCleanup,
   componentMigration_2026_05_10_sectiondividerGradientStops,
   componentMigration_2026_05_13_primaryToBrand,
+  componentMigration_2026_05_19_collapsiblesectionDropFrameSurface,
+  componentMigration_2026_05_19_sectiondividerRichGradient,
+  componentMigration_2026_05_20_sectiondividerSlimVariants,
+  componentMigration_2026_05_21_sectiondividerSpacingToPadding,
+  componentMigration_2026_05_22_sectiondividerIntrinsicsToCss,
 ];
 
 function countFor(kind: 'theme' | 'component-config'): number {

package/src/{lib → editor/core/themes}/slices/columns.ts

@@ -4,7 +4,7 @@
  * the default we leave tokens.css in charge so the `clamp()` in
  * `--columns-gutter` survives until the editor overrides it.
  */
-import type { ColumnsState } from '../editorTypes';
+import type { ColumnsState } from '../../store/editorTypes';
 
 export const DEFAULT_COLUMNS: ColumnsState = { count: 12, maxWidth: 1440, gutter: 16, margin: 0 };
 
@@ -50,7 +50,7 @@ export function parseColumnVars(vars: Record<string, string>): Partial<ColumnsSt
  * single-source. Mutates `next` and `rawVars` in place.
  */
 export function loadColumnsFromVars(
-  next: import('../editorTypes').EditorState,
+  next: import('../../store/editorTypes').EditorState,
   rawVars: Record<string, string>,
 ): void {
   const overrides = parseColumnVars(rawVars);

package/src/{lib → editor/core/themes}/slices/components.ts

@@ -30,8 +30,9 @@
  * pipeline.
  */
 import { writable, derived, get, type Readable } from 'svelte/store';
-import type { CssVarRef, EditorState } from '../editorTypes';
-import { store, mutate } from '../editorCore';
+import type { CssVarRef, EditorState } from '../../store/editorTypes';
+import { store, mutate } from '../../store/editorCore';
+import { formatGradientValue } from './gradients';
 
 const EMPTY_COMPONENT_BASELINE = JSON.stringify({ aliases: {}, config: {} });
 
@@ -43,7 +44,9 @@ export function componentsToVars(components: EditorState['components']): Record<
   const out: Record<string, string> = {};
   for (const slice of Object.values(components)) {
     for (const [varName, ref] of Object.entries(slice.aliases)) {
-      out[varName] = ref.kind === 'token' ? `var(${ref.name})` : ref.value;
+      if (ref.kind === 'token') out[varName] = `var(${ref.name})`;
+      else if (ref.kind === 'literal') out[varName] = ref.value;
+      else out[varName] = formatGradientValue(ref.value);
     }
   }
   return out;
@@ -239,9 +242,20 @@ export function getComponentPropertySiblings(component: string, varName: string)
 function cssVarRefEqual(a: CssVarRef | undefined, b: CssVarRef | undefined): boolean {
   if (!a || !b) return a === b;
   if (a.kind !== b.kind) return false;
-  return a.kind === 'token'
-    ? a.name === (b as { kind: 'token'; name: string }).name
-    : a.value === (b as { kind: 'literal'; value: string }).value;
+  if (a.kind === 'token') return a.name === (b as { kind: 'token'; name: string }).name;
+  if (a.kind === 'literal') return a.value === (b as { kind: 'literal'; value: string }).value;
+  // gradient: structural compare on type, angle, aspect axes, and stops.
+  const av = a.value;
+  const bv = (b as { kind: 'gradient'; value: typeof a.value }).value;
+  if (av.type !== bv.type || av.angle !== bv.angle || av.stops.length !== bv.stops.length) return false;
+  if ((av.aspectX ?? 1) !== (bv.aspectX ?? 1)) return false;
+  if ((av.aspectY ?? 1) !== (bv.aspectY ?? 1)) return false;
+  for (let i = 0; i < av.stops.length; i++) {
+    const sa = av.stops[i];
+    const sb = bv.stops[i];
+    if (sa.position !== sb.position || sa.color !== sb.color || (sa.opacity ?? 100) !== (sb.opacity ?? 100)) return false;
+  }
+  return true;
 }
 
 /** True iff `varName` is not individually opted out, has ≥2 declared siblings,

package/src/{lib → editor/core/themes}/slices/fonts.ts

@@ -6,7 +6,7 @@
  * after mutating.
  */
 import type { FontSource, FontStack } from '../themeTypes';
-import { store, mutate, persist } from '../editorCore';
+import { store, mutate, persist } from '../../store/editorCore';
 
 export function setFontSources(sources: FontSource[]): void {
   mutate('update font sources', (s) => { s.fonts.sources = sources; });