@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/editor/core/productionPulse.ts

@@ -0,0 +1,37 @@
+import { writable } from 'svelte/store';
+import type { ProductionInfo } from './themes/themeService';
+import type { ManifestMeta } from './themes/themeTypes';
+
+/**
+ * Monotonic counter that ticks every time a production pointer flips —
+ * theme production or a component's production. UI surfaces that need to
+ * react to a sibling Adopt subscribe to this so they refresh without
+ * per-pair wiring.
+ *
+ * Bumpers: `ThemeFileManager.handleApplyToProduction`,
+ * `ComponentFileManager.handleUpdateProduction`. Anyone setting
+ * `_production.json` should bump.
+ */
+export const productionRevision = writable(0);
+
+export function bumpProductionRevision(): void {
+  productionRevision.update((n) => n + 1);
+}
+
+/**
+ * Cached production-state stores. The Theme and Manifest file managers live in
+ * the sidebar footer, swapping in/out of the DOM as the user toggles between
+ * the tokens and components views. Keeping the last-known production state in
+ * module-level Svelte stores means a remount renders the correct Adopt-button
+ * state on the first frame instead of flashing through "not in sync" while a
+ * fresh fetch resolves.
+ */
+export const themeProductionInfo = writable<ProductionInfo | null>(null);
+
+/**
+ * Last-known active manifest meta. Bumped by ManifestFileManager whenever the
+ * active manifest changes (load, save, save-as) and whenever a theme or
+ * component Adopt completes (the server patches the active manifest as a
+ * side-effect, so consumers re-read it on `productionRevision` ticks).
+ */
+export const activeManifest = writable<ManifestMeta | null>(null);

package/src/{lib → editor/core/routing}/router.ts

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import { storageKey } from './editorConfig';
+import { storageKey } from '../store/editorConfig';
 
 function prevKey(): string {
   return storageKey('prev-route');

package/src/{lib/files/versionedFileResource.ts → editor/core/storage/files/versionedFileResourceClient.ts}

@@ -118,7 +118,14 @@ export function versionedFileResource<TItem, TMeta, TProductionInfo>(
       body: JSON.stringify({ name: fileName }),
     });
     if (!res.ok) {
-      throw new Error(await readJsonError(res, 'Set production failed'));
+      const body = await res.json().catch(() => ({}));
+      const err = new Error(body.error || 'Set production failed') as Error & {
+        status?: number;
+        code?: string;
+      };
+      err.status = res.status;
+      if (body.code) err.code = body.code;
+      throw err;
     }
     return res.json();
   }

package/src/{lib → editor/core/store}/editorCore.ts

@@ -260,21 +260,37 @@ export function mutate(label: string, fn: (draft: EditorState) => void): void {
   if (import.meta.env.DEV && !label) {
     console.warn('[editorStore] mutate() called without a label');
   }
+  // Svelte 5's `$derived` uses strict `===` for equality (see
+  // node_modules/svelte/src/internal/client/reactivity/deriveds.js → equality.js).
+  // If we mutated `s` in place and emitted the same top-level reference, any
+  // intermediate `$derived($editorState.someSlice.someObj)` in a component
+  // would return the same object reference and short-circuit the whole
+  // downstream chain — swatches and previews would freeze even while the
+  // renderer's direct `editorState.subscribe(...)` (which uses `safe_not_equal`,
+  // always-different for objects) continued to write CSS vars to :root.
+  //
+  // Cloning the draft before mutation guarantees every nested reference is
+  // fresh, so `$derived` chains everywhere propagate correctly. The previous
+  // live state (`current`) becomes the immutable history snapshot — no second
+  // structuredClone needed.
   if (transactionScope) {
-    // Inside a non-clipping scope: don't push individually; just mark the
-    // scope dirty and apply. The scope's commit pushes one collapsed entry.
     transactionScope.changed = true;
     if (clippingScope) clippingScope.changed = true;
-    store.update((s) => { fn(s); return s; });
+    store.update((s) => {
+      const next = structuredClone(s);
+      fn(next);
+      return next;
+    });
     return;
   }
-  // No transaction scope: each mutate is its own history entry. Inside a
-  // clipping scope this still pushes per-mutate entries (so undo within the
-  // scope walks them back), and the scope's commit will collapse them.
   if (clippingScope) clippingScope.changed = true;
   const current = get(store);
-  pushPast(structuredClone(current));
-  store.update((s) => { fn(s); return s; });
+  pushPast(current);
+  store.update((s) => {
+    const next = structuredClone(s);
+    fn(next);
+    return next;
+  });
   bumpTick();
   persistHook();
 }

package/src/{lib → editor/core/store}/editorPersistence.ts

@@ -17,9 +17,9 @@ import { get } from 'svelte/store';
 import type { EditorState } from './editorTypes';
 import { storageKey } from './editorConfig';
 import { store } from './editorCore';
-import { quietGet, quietSet } from './storage';
-import { makeDefaultGradients } from './slices/gradients';
-import { seedShadowsFromDom } from './slices/shadows';
+import { quietGet, quietSet } from '../storage/storage';
+import { makeDefaultGradients } from '../themes/slices/gradients';
+import { seedShadowsFromDom } from '../themes/slices/shadows';
 
 // Resolve the persist key lazily (per-call) so library consumers that invoke
 // `configureEditor({storagePrefix})` before the first store write get the

package/src/{lib → editor/core/store}/editorRenderer.ts

@@ -12,8 +12,8 @@
  */
 
 import type { EditorState } from './editorTypes';
-import { setCssVar, removeCssVar } from './cssVarSync';
-import { palettesToVars } from './paletteDerivation';
+import { setCssVar, removeCssVar } from '../cssVarSync';
+import { palettesToVars } from '../palettes/paletteDerivation';
 import {
   editorState,
   columnsToVars,

package/src/{lib → editor/core/store}/editorStore.ts

@@ -18,15 +18,15 @@
  * orchestrate across slices and stay here.
  */
 
-import type { CssVarRef, EditorState } from './editorTypes';
-import type { Theme } from './themeTypes';
-import { KNOWN_COMPONENT_CONFIG_KEYS } from './componentConfigKeys';
+import type { CssVarRef, EditorState, GradientAliasValue } from './editorTypes';
+import type { AliasDiskValue, Theme } from '../themes/themeTypes';
+import { KNOWN_COMPONENT_CONFIG_KEYS } from '../components/componentConfigKeys';
 import {
   CURRENT_THEME_SCHEMA_VERSION,
   CURRENT_COMPONENT_SCHEMA_VERSION,
   runMigrations,
-} from './migrations';
-import { renamePrimaryPaletteKey } from './migrations/2026-05-13-primary-to-brand';
+} from '../themes/migrations';
+import { renamePrimaryPaletteKey } from '../themes/migrations/2026-05-13-primary-to-brand';
 import { __resetRendererCacheForTests, installRenderer } from './editorRenderer';
 import {
   store,
@@ -47,25 +47,25 @@ import {
   columnsEqualsDefault,
   columnsToVars,
   loadColumnsFromVars,
-} from './slices/columns';
+} from '../themes/slices/columns';
 import {
   loadOverlaysFromVars,
   makeDefaultOverlaysState,
   overlaysEqualsDefault,
   overlaysToVars,
-} from './slices/overlays';
+} from '../themes/slices/overlays';
 import {
   loadShadowsFromVars,
   shadowsToVars,
-} from './slices/shadows';
-import { makeDefaultGradients } from './slices/gradients';
+} from '../themes/slices/shadows';
+import { makeDefaultGradients } from '../themes/slices/gradients';
 import {
   componentBaseline,
   loadComponentsFromVars,
   notifyComponentSavedChanged,
   setSavedComponentBaseline,
   __resetComponentsForTests,
-} from './slices/components';
+} from '../themes/slices/components';
 
 function emptyState(): EditorState {
   return {
@@ -121,7 +121,7 @@ store.set(emptyState());
 
 export {
   DOMAIN_VAR_NAMES,
-} from './slices/domainVars';
+} from '../themes/slices/domainVars';
 
 export {
   columnsToVars,
@@ -129,7 +129,7 @@ export {
   COLUMN_VAR_NAMES,
   DEFAULT_COLUMNS,
   parseColumnVars,
-} from './slices/columns';
+} from '../themes/slices/columns';
 
 export {
   overlaysToVars,
@@ -141,7 +141,7 @@ export {
   parseRgba,
   RGBA_RE,
   HEX_RE,
-} from './slices/overlays';
+} from '../themes/slices/overlays';
 
 export {
   shadowsToVars,
@@ -153,7 +153,7 @@ export {
   defaultShadowOverride,
   parseShadowCss,
   seedShadowsFromDom,
-} from './slices/shadows';
+} from '../themes/slices/shadows';
 
 export {
   gradientsToVars,
@@ -166,7 +166,7 @@ export {
   removeGradientStop,
   addGradientToken,
   removeGradientToken,
-} from './slices/gradients';
+} from '../themes/slices/gradients';
 
 export {
   componentsToVars,
@@ -184,18 +184,18 @@ export {
   unlinkComponentProperty,
   relinkComponentProperty,
   markComponentSaved,
-} from './slices/components';
+} from '../themes/slices/components';
 
 export {
   setFontSources,
   setFontStacks,
   seedFontsFromTheme,
-} from './slices/fonts';
+} from '../themes/slices/fonts';
 
 export {
   setPaletteConfig,
   seedPalettesFromTheme,
-} from './slices/palettes';
+} from '../themes/slices/palettes';
 
 // ── Component-config load orchestration ───────────────────────────────────
 //
@@ -205,12 +205,200 @@ export {
 // literal-valued knobs (per `KNOWN_COMPONENT_CONFIG_KEYS`) into the config
 // bucket and wraps the remainder as `CssVarRef` discriminated unions.
 
+/**
+ * Migrate a disk-shape alias bag through the registered migration runner.
+ *
+ * The runner is string-typed by contract (most migrations only do
+ * key/value string rewrites). Object-valued entries — currently just
+ * inline `{ kind: 'gradient', value: ... }` payloads — pass through
+ * untouched: we split the bag into string/object subsets, run the runner
+ * on the string subset, then merge.
+ *
+ * For sectiondivider's legacy 7-flat-token gradients we run a synthesis
+ * step BEFORE the migration runner that would strip those tokens. The
+ * synthesized gradient object lands in the object subset and survives
+ * the stripping pass.
+ */
 function migrateComponentAliases(
   component: string,
-  aliases: Record<string, string>,
+  aliasesIn: Record<string, AliasDiskValue>,
+  rawConfig: Record<string, unknown> | undefined,
   fileVersion: number,
-): Record<string, string> {
-  return runMigrations('component-config', fileVersion, aliases, { component });
+): { aliases: Record<string, AliasDiskValue>; config: Record<string, unknown> } {
+  const stringPart: Record<string, string> = {};
+  const objectPart: Record<string, AliasDiskValue> = {};
+  for (const [k, v] of Object.entries(aliasesIn)) {
+    if (typeof v === 'string') stringPart[k] = v;
+    else objectPart[k] = v;
+  }
+  // String-valued config entries join the migration input so a migration can
+  // rename or relocate them. After migration the bag flows through
+  // `splitAliasesAndConfig` which routes KNOWN keys back to config and the
+  // rest to aliases — this is what lets a migration *move* a key from the
+  // config bucket to the aliases bucket by also removing it from KNOWN.
+  // Config wins over an aliases-bucket collision on the same key: the legacy
+  // single-bucket → split-bucket move preserved "explicit config field beats
+  // legacy alias-bucketed value", and that contract still holds.
+  // Non-string config values (rare; reserved for future structured payloads)
+  // pass through untouched.
+  const configOut: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(rawConfig ?? {})) {
+    if (typeof v === 'string') stringPart[k] = v;
+    else configOut[k] = v;
+  }
+  if (component === 'sectiondivider') {
+    synthesizeSectionDividerGradients(stringPart, objectPart);
+  }
+  const migratedString = runMigrations('component-config', fileVersion, stringPart, { component });
+  const migratedObject = component === 'sectiondivider'
+    ? renameSectionDividerObjectSlots(objectPart)
+    : objectPart;
+  return {
+    aliases: { ...migratedString, ...migratedObject },
+    config: configOut,
+  };
+}
+
+/**
+ * v8→v9 companion to `componentMigration_2026_05_20_sectiondividerSlimVariants`:
+ * the structured background payload is reshaped from six color families →
+ * three size variants (lg/md/sm). Canvas's gradient is taken as the canonical
+ * seed and fanned across all three new variants; other families' gradients
+ * are dropped. Idempotent — keys already at the final shape pass through.
+ *
+ * Sources accepted (in priority order, first-found wins for canvas's slot):
+ *   --sectiondivider-canvas-background  (current/in-progress shape)
+ *   --sectiondivider-canvas-gradient    (v7-era shape)
+ *   --sectiondivider-color-canvas-background  (intermediate shape that landed
+ *                                              briefly during the color-prop pivot)
+ *
+ * The migration runner only sees string keys, so this object-shape rename
+ * has to live alongside the runner call.
+ */
+const FAMILIES = ['canvas', 'neutral', 'alternate', 'primary', 'accent', 'special'] as const;
+const SIZE_VARIANTS = ['lg', 'md', 'sm'] as const;
+function renameSectionDividerObjectSlots(
+  objectPart: Record<string, AliasDiskValue>,
+): Record<string, AliasDiskValue> {
+  // Find canvas's gradient under any historical key shape.
+  const canvasSourceKeys = [
+    '--sectiondivider-canvas-background',
+    '--sectiondivider-canvas-gradient',
+    '--sectiondivider-color-canvas-background',
+  ];
+  let canvasGradient: AliasDiskValue | undefined;
+  for (const key of canvasSourceKeys) {
+    if (objectPart[key] !== undefined) {
+      canvasGradient = objectPart[key];
+      break;
+    }
+  }
+
+  // If we found a canvas gradient (any era), fan it into the three new
+  // per-variant background slots and drop every other family's gradient.
+  // If no canvas gradient is found, pass through non-family keys verbatim
+  // so non-migration data (theme tokens, other components) isn't touched.
+  const out: Record<string, AliasDiskValue> = {};
+  for (const [key, value] of Object.entries(objectPart)) {
+    // Skip any sectiondivider per-family gradient; the canvas fan-out emits
+    // the canonical set below.
+    let isFamilyGradient = false;
+    for (const f of FAMILIES) {
+      if (
+        key === `--sectiondivider-${f}-background`
+        || key === `--sectiondivider-${f}-gradient`
+        || key === `--sectiondivider-color-${f}-background`
+      ) {
+        isFamilyGradient = true;
+        break;
+      }
+    }
+    // Pass through anything that's already at the final lg/md/sm shape so
+    // re-running the migration is idempotent.
+    if (isFamilyGradient) continue;
+    out[key] = value;
+  }
+  if (canvasGradient !== undefined) {
+    for (const v of SIZE_VARIANTS) {
+      out[`--sectiondivider-${v}-background`] = canvasGradient;
+    }
+  }
+  return out;
+}
+
+/** SectionDivider variants that ship gradient aliases. */
+const SECTIONDIVIDER_VARIANTS = ['canvas', 'neutral', 'alternate', 'primary', 'accent', 'special'] as const;
+
+/**
+ * Collapse legacy 7-flat-token gradients (`{angle, stop-{1,2,3}-{color,position}}`)
+ * for each sectiondivider variant into one structured gradient alias at
+ * `--sectiondivider-{v}-gradient`. The flat tokens stay in `stringPart`
+ * for the migration runner to strip; the structured payload joins
+ * `objectPart` so the merge produces the new shape.
+ *
+ * Skips variants that already declare a gradient alias (object form) so
+ * round-tripping doesn't overwrite user edits.
+ */
+function synthesizeSectionDividerGradients(
+  stringPart: Record<string, string>,
+  objectPart: Record<string, AliasDiskValue>,
+): void {
+  const GRADIENT_ANGLE_TOKENS: Record<string, number> = {
+    '--gradient-angle-horizontal': 90,
+    '--gradient-angle-vertical': 180,
+    '--gradient-angle-diagonal': 135,
+    '--gradient-angle-counter-diagonal': 45,
+  };
+  const GRADIENT_STOP_POSITIONS: Record<string, number> = {
+    '--gradient-stop-start': 0,
+    '--gradient-stop-mid': 50,
+    '--gradient-stop-end': 100,
+  };
+  const parseAngle = (raw: string | undefined): number => {
+    if (!raw) return 135;
+    if (raw.startsWith('--')) return GRADIENT_ANGLE_TOKENS[raw] ?? 135;
+    const m = raw.match(/^(-?\d+(?:\.\d+)?)\s*deg$/i);
+    return m ? parseFloat(m[1]) : 135;
+  };
+  const parsePosition = (raw: string | undefined, fallback: number): number => {
+    if (!raw) return fallback;
+    if (raw.startsWith('--')) return GRADIENT_STOP_POSITIONS[raw] ?? fallback;
+    const m = raw.match(/^(-?\d+(?:\.\d+)?)\s*%$/);
+    return m ? parseFloat(m[1]) : fallback;
+  };
+  const parseStopColor = (raw: string | undefined): { color: string; opacity?: number } | null => {
+    if (!raw) return null;
+    if (raw.startsWith('--')) return { color: raw };
+    const mix = raw.match(/^color-mix\(\s*in\s+srgb\s*,\s*var\((--[a-z0-9-]+)\)\s+([\d.]+)%\s*,\s*transparent\s*\)$/i);
+    if (mix) return { color: mix[1], opacity: parseFloat(mix[2]) };
+    return null;
+  };
+  for (const v of SECTIONDIVIDER_VARIANTS) {
+    const slot = `--sectiondivider-${v}-gradient`;
+    if (slot in objectPart) continue;
+    const angleKey = `${slot}-angle`;
+    const has1 = stringPart[`${slot}-stop-1-color`] !== undefined;
+    const has2 = stringPart[`${slot}-stop-2-color`] !== undefined;
+    const has3 = stringPart[`${slot}-stop-3-color`] !== undefined;
+    if (!has1 && !has2 && !has3) continue;
+    const stops: { position: number; color: string; opacity?: number }[] = [];
+    const positionDefaults = [0, 50, 100];
+    for (let i = 1; i <= 3; i++) {
+      const c = parseStopColor(stringPart[`${slot}-stop-${i}-color`]);
+      if (!c) continue;
+      const pos = parsePosition(stringPart[`${slot}-stop-${i}-position`], positionDefaults[i - 1]);
+      stops.push({ position: pos, color: c.color, ...(c.opacity !== undefined ? { opacity: c.opacity } : {}) });
+    }
+    if (stops.length < 2) continue;
+    objectPart[slot] = {
+      kind: 'gradient',
+      value: {
+        type: 'linear',
+        angle: parseAngle(stringPart[angleKey]),
+        stops,
+      },
+    };
+  }
 }
 
 /**
@@ -219,12 +407,18 @@ function migrateComponentAliases(
  * config bucket, and wraps the remainder as `CssVarRef` discriminated unions.
  */
 function splitAliasesAndConfig(
-  rawAliases: Record<string, string>,
+  rawAliases: Record<string, AliasDiskValue>,
   rawConfig: Record<string, unknown> | undefined,
 ): { aliases: Record<string, CssVarRef>; config: Record<string, unknown> } {
   const aliases: Record<string, CssVarRef> = {};
   const config: Record<string, unknown> = { ...(rawConfig ?? {}) };
   for (const [key, value] of Object.entries(rawAliases)) {
+    if (typeof value !== 'string') {
+      if (value.kind === 'gradient') {
+        aliases[key] = { kind: 'gradient', value: value.value as GradientAliasValue };
+      }
+      continue;
+    }
     if (KNOWN_COMPONENT_CONFIG_KEYS.has(key)) {
       if (config[key] === undefined) config[key] = value;
       continue;
@@ -249,12 +443,12 @@ function splitAliasesAndConfig(
 export function loadComponentActive(
   component: string,
   activeFile: string,
-  aliases: Record<string, string>,
+  aliases: Record<string, AliasDiskValue>,
   config?: Record<string, unknown>,
   schemaVersion: number = 0,
 ): void {
-  const migrated = migrateComponentAliases(component, aliases, schemaVersion);
-  const split = splitAliasesAndConfig(migrated, config);
+  const migrated = migrateComponentAliases(component, aliases, config, schemaVersion);
+  const split = splitAliasesAndConfig(migrated.aliases, migrated.config);
   mutate(`load ${component}/${activeFile}`, (s) => {
     s.components[component] = { activeFile, aliases: { ...split.aliases }, config: { ...split.config } };
   });
@@ -264,7 +458,7 @@ export function loadComponentActive(
 
 export interface ComponentSeed {
   activeFile: string;
-  aliases: Record<string, string>;
+  aliases: Record<string, AliasDiskValue>;
   config?: Record<string, unknown>;
   schemaVersion?: number;
 }
@@ -282,8 +476,8 @@ export function seedComponentsFromApi(
   store.update((s) => {
     s.components = {};
     for (const [comp, cfg] of Object.entries(configs)) {
-      const migrated = migrateComponentAliases(comp, cfg.aliases, cfg.schemaVersion ?? 0);
-      const split = splitAliasesAndConfig(migrated, cfg.config);
+      const migrated = migrateComponentAliases(comp, cfg.aliases, cfg.config, cfg.schemaVersion ?? 0);
+      const split = splitAliasesAndConfig(migrated.aliases, migrated.config);
       s.components[comp] = { activeFile: cfg.activeFile, aliases: { ...split.aliases }, config: { ...split.config } };
       setSavedComponentBaseline(comp, componentBaseline(split));
     }

package/src/{lib → editor/core/store}/editorTypes.ts

@@ -1,4 +1,4 @@
-import type { PaletteConfig, FontSource, FontStack } from './themeTypes';
+import type { PaletteConfig, FontSource, FontStack } from '../themes/themeTypes';
 
 export interface ShadowGlobals {
   angle: number;
@@ -43,24 +43,25 @@ export interface ColumnsState {
   margin: number;
 }
 
-export type CssVarRef =
-  | { kind: 'token'; name: string }
-  | { kind: 'literal'; value: string };
-
-export interface ComponentSlice {
-  activeFile: string;
-  aliases: Record<string, CssVarRef>;
-  config: Record<string, unknown>;
-  unlinked?: string[];
-}
-
-export type GradientType = 'linear' | 'radial';
+/** Gradient render mode.
+ *  - `linear` / `radial`: real gradients with N stops + angle (linear) or radius (radial).
+ *  - `solid`: collapses to the first stop's color. Angle/radius/extra stops carried in
+ *    the payload but ignored by the renderer; toggling back restores the prior shape.
+ *  - `none`: transparent. Same carry-forward semantics — payload retained for
+ *    round-trip when the user toggles back to a real gradient. */
+export type GradientType = 'linear' | 'radial' | 'solid' | 'none';
 
 export interface GradientTokenStop {
   /** 0–100 percentage along the gradient axis. */
   position: number;
   /** CSS variable name the stop resolves through (e.g. '--color-brand-500'). */
   color: string;
+  /** When `false`, this stop is an explicit off-palette override: the stop
+   *  picker opens to any color (not family-filtered), and the stop is skipped
+   *  by family-swap rewrites so its color survives a variant family change.
+   *  Defaults to true (follow family) on read; absence is the same as `true`.
+   *  Only meaningful for gradients rendered inside a family-aware context. */
+  monochrome?: boolean;
   /** 0–100 alpha applied to the stop's color. Defaults to 100 (fully opaque). */
   opacity?: number;
 }
@@ -71,9 +72,51 @@ export interface GradientToken {
   type: GradientType;
   /** Degrees, applies to linear only. */
   angle: number;
+  /** Pixel radius for radial gradients. When absent or zero, the renderer
+   *  emits CSS's default ellipse/farthest-corner shape. */
+  radius?: number;
+  /** Horizontal center position for radial gradients, 0–100. Defaults to 50. */
+  centerX?: number;
+  /** Horizontal stretch factor for the radial ellipse (1–8). Defaults to 1.
+   *  With aspectY, the rendered semi-axes are `radius * aspect*`, so both
+   *  shape (ratio) and size are encoded together. Both = 1 keeps the legacy
+   *  `circle` render path verbatim. */
+  aspectX?: number;
+  /** Vertical stretch factor for the radial ellipse (1–8). Defaults to 1. */
+  aspectY?: number;
   stops: GradientTokenStop[];
 }
 
+/** Structured gradient payload carried inline on a component alias.
+ *  Mirrors GradientToken minus `variable` (the alias key itself is the
+ *  binding). Used when a component owns a per-instance gradient that
+ *  doesn't share the theme-level `--gradient-N` library. */
+export interface GradientAliasValue {
+  type: GradientType;
+  angle: number;
+  /** See GradientToken.radius. */
+  radius?: number;
+  /** See GradientToken.centerX. */
+  centerX?: number;
+  /** See GradientToken.aspectX. */
+  aspectX?: number;
+  /** See GradientToken.aspectY. */
+  aspectY?: number;
+  stops: GradientTokenStop[];
+}
+
+export type CssVarRef =
+  | { kind: 'token'; name: string }
+  | { kind: 'literal'; value: string }
+  | { kind: 'gradient'; value: GradientAliasValue };
+
+export interface ComponentSlice {
+  activeFile: string;
+  aliases: Record<string, CssVarRef>;
+  config: Record<string, unknown>;
+  unlinked?: string[];
+}
+
 /**
  * Single source of truth for everything a saved token file depends on, plus
  * the domain state currently scattered across VariablesTab local `let` fields.