@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/{component-editor → editor/component-editor}/scaffolding/buildTypeGroupTokens.ts

@@ -7,6 +7,7 @@ export const TYPE_FONT_PROPS = [
   { key: 'sizeVariable', label: 'font size', defaultGroupKey: 'font-size' },
   { key: 'weightVariable', label: 'font weight', defaultGroupKey: 'font-weight' },
   { key: 'lineHeightVariable', label: 'line height', defaultGroupKey: 'line-height' },
+  { key: 'letterSpacingVariable', label: 'letter spacing', defaultGroupKey: 'letter-spacing' },
 ] as const satisfies ReadonlyArray<{
   key: keyof TypeGroupConfig;
   label: string;

package/src/{component-editor → editor/component-editor}/scaffolding/editorContext.ts

@@ -3,37 +3,47 @@ import { writable, type Writable, type Readable } from 'svelte/store';
 
 const KEY = Symbol('editor-context');
 
+export type VariantOption = { value: string; label: string };
+
 export type EditorContext = {
-  /** Per-variable rank used by TokenLayout to align linked rows; null when no linked block. */
+  /** Per-variable rank for TokenLayout row alignment; null when no linked block. */
   linkedOrder: Readable<Map<string, number> | null>;
-  /** Variant currently focused in the preview when multiple sibling variants exist. */
+  /** Focused preview variant when siblings exist. */
   focusedVariant: Writable<string | null>;
-  /** Cross-group hint for which state tab to activate. VariantGroups whose `stateNames`
-      contain the value adopt it as their `activeTab`; others ignore it. Used to forward
-      LinkageChart row clicks to the state tab strip when the chart spans states. */
+  /** Variants for this editor; empty when single-variant. Focused VariantGroup renders the tab strip itself. */
+  variants: Readable<VariantOption[]>;
+  /** Cross-group state-tab hint; VariantGroups whose stateNames contain it adopt as activeTab. */
   focusedState: Writable<string | null>;
-  /** Variable currently hovered in either the per-state Properties grid or the
-      Linked-properties block. Bidirectional cue: a hover in one surface lights up
-      the matching row in the other so the user can see the linkage at a glance. */
+  /** Hovered variable in Properties grid or Linked block; bidirectional highlight. */
   hoveredLinkedVariable: Writable<string | null>;
+  /** Copy-from "Preserve color families" toggle, scoped to this editor. Lives
+      on context (not local to CopyFromMenu) so it survives VariantGroup remounts
+      when the user changes which variant is focused. */
+  preserveColorFamily: Writable<boolean>;
 };
 
-/** Internal mutable handle used by ComponentEditorBase. */
+/** Mutable handle for ComponentEditorBase. */
 export type EditorContextInternal = EditorContext & {
   _linkedOrder: Writable<Map<string, number> | null>;
+  _variants: Writable<VariantOption[]>;
 };
 
 export function createEditorContext(): EditorContextInternal {
   const _linkedOrder = writable<Map<string, number> | null>(null);
+  const _variants = writable<VariantOption[]>([]);
   const focusedVariant = writable<string | null>(null);
   const focusedState = writable<string | null>(null);
   const hoveredLinkedVariable = writable<string | null>(null);
+  const preserveColorFamily = writable<boolean>(false);
   const ctx: EditorContextInternal = {
     linkedOrder: _linkedOrder,
     focusedVariant,
+    variants: _variants,
     focusedState,
     hoveredLinkedVariable,
+    preserveColorFamily,
     _linkedOrder,
+    _variants,
   };
   setContext(KEY, ctx);
   return ctx;

package/src/{component-editor → editor/component-editor}/scaffolding/linkedBlock.ts

@@ -3,8 +3,8 @@ import {
   isComponentPropertyLinked,
   getComponentPropertySiblings,
   editorState,
-} from '../../lib/editorStore';
-import type { CssVarRef } from '../../lib/editorTypes';
+} from '../../core/store/editorStore';
+import type { CssVarRef } from '../../core/store/editorTypes';
 import type { Token } from './types';
 
 function aliasKey(ref: CssVarRef | undefined): string {

package/src/{component-editor → editor/component-editor}/scaffolding/types.ts

@@ -13,6 +13,26 @@ export type Token = {
   /** When the linked block collapses several same-label same-value rows into one,
       the surviving row carries the other groupKey leads here so writes co-propagate. */
   mergeVariables?: string[];
+  /** When false, a padding-shaped token renders only the single-value control
+      (no split-to-sides affordance). For tokens consumed via a one-axis CSS
+      property like `padding-bottom: var(--x)`, splitting yields side values
+      that have nowhere to render — hide the toggle so users can't get into
+      that state. Defaults to true for padding-shaped tokens. */
+  splittable?: boolean;
+  /** Optional element grouping (e.g. 'frame', 'header', 'body'). When a state
+      has tokens or type-groups tagged with two or more distinct elements,
+      StateBlock partitions the panel into labeled subsections — typography
+      and properties for each element render together. */
+  element?: string;
+  /** Hint to the editor that this token's alias is a structured payload
+      (currently only `kind: 'gradient'`). Drives Copy-from's per-kind
+      branch — gradient aliases need family-swap of in-family stop colors
+      rather than a verbatim ref copy. */
+  kind?: 'gradient';
+  /** Color-family slug for this token's owning variant (e.g. `brand`,
+      `accent`). Set on gradient-kind tokens so Copy-from's family-swap
+      can compute the src→dst family substitution. */
+  family?: string;
 };
 
 /** Editor type-group: a fieldset containing a coordinated set of typography tokens
@@ -32,8 +52,13 @@ export type TypeGroupConfig = {
   weightLabel?: string;
   lineHeightVariable?: string;
   lineHeightLabel?: string;
+  letterSpacingVariable?: string;
+  letterSpacingLabel?: string;
   outlineWidthVariable?: string;
   outlineWidthLabel?: string;
   outlineColorVariable?: string;
   outlineColorLabel?: string;
+  /** See `Token.element` — when present, StateBlock groups this fieldset under
+      the matching element subsection. */
+  element?: string;
 };

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

@@ -16,4 +16,12 @@
 export const KNOWN_COMPONENT_CONFIG_KEYS: ReadonlySet<string> = new Set([
   '--dialog-confirm-variant',
   '--dialog-cancel-variant',
+  // SectionDivider per-variant `color-family` is editor metadata that drives
+  // the family-swap rewrite on aliases. It is not a runtime CSS value, so it
+  // stays in the config bucket. The other intrinsics (align, hairline,
+  // eyebrow/description visibility, eyebrow text-transform) now flow through
+  // the alias bucket as cascading CSS vars — see the 2026-05-22 migration.
+  '--sectiondivider-lg-color-family',
+  '--sectiondivider-md-color-family',
+  '--sectiondivider-sm-color-family',
 ]);

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

@@ -1,5 +1,5 @@
-import type { ComponentConfig, ComponentConfigMeta } from './themeTypes';
-import { versionedFileResource } from './files/versionedFileResource';
+import type { AliasDiskValue, ComponentConfig, ComponentConfigMeta } from '../themes/themeTypes';
+import { versionedFileResource } from '../storage/files/versionedFileResourceClient';
 
 /**
  * REST client for per-component config files. Parallel to `themeService.ts`
@@ -23,7 +23,7 @@ export interface ComponentSummary {
 export interface ComponentProductionInfo {
   fileName: string;
   name: string;
-  aliases: Record<string, string>;
+  aliases: Record<string, AliasDiskValue>;
 }
 
 export interface ComponentConfigList {

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

@@ -1,8 +1,8 @@
 import { get } from 'svelte/store';
-import type { ComponentConfig } from './themeTypes';
-import { editorState, markComponentSaved } from './editorStore';
-import type { CssVarRef } from './editorTypes';
-import { CURRENT_COMPONENT_SCHEMA_VERSION } from './migrations';
+import type { AliasDiskValue, ComponentConfig } from '../themes/themeTypes';
+import { editorState, markComponentSaved } from '../store/editorStore';
+import type { CssVarRef } from '../store/editorTypes';
+import { CURRENT_COMPONENT_SCHEMA_VERSION } from '../themes/migrations';
 import {
   listComponentConfigs,
   saveComponentConfig,
@@ -12,7 +12,7 @@ import {
 /**
  * Save the current in-memory state of a component to its active file. Mirrors
  * the `persist` flow inside `ComponentFileManager.svelte` so callers without a
- * file-manager instance (e.g. the unsaved-components dialog in PresetFileManager)
+ * file-manager instance (e.g. an unsaved-components dialog upstream)
  * can save a dirty component without duplicating the schema-version + aliases
  * stringification logic.
  *
@@ -24,8 +24,10 @@ export type SaveActiveComponentResult =
   | { ok: true; fileName: string; displayName: string }
   | { ok: false; reason: 'default' | 'no-state' | 'error'; error?: unknown };
 
-function refToString(ref: CssVarRef): string {
-  return ref.kind === 'token' ? ref.name : ref.value;
+function refToDiskValue(ref: CssVarRef): AliasDiskValue {
+  if (ref.kind === 'token') return ref.name;
+  if (ref.kind === 'literal') return ref.value;
+  return { kind: 'gradient', value: ref.value };
 }
 
 export async function saveActiveComponentConfig(
@@ -43,8 +45,8 @@ export async function saveActiveComponentConfig(
     const displayName = active?.name ?? fileName;
 
     const now = new Date().toISOString();
-    const aliases: Record<string, string> = {};
-    for (const [k, ref] of Object.entries(slice.aliases)) aliases[k] = refToString(ref);
+    const aliases: Record<string, AliasDiskValue> = {};
+    for (const [k, ref] of Object.entries(slice.aliases)) aliases[k] = refToDiskValue(ref);
 
     const data: ComponentConfig = {
       name: displayName,

package/src/editor/core/flashStatus.ts

@@ -0,0 +1,30 @@
+/**
+ * Centralised "flash a transient status, then revert to idle" helper for the
+ * file managers (theme / component / manifest). Each pulse — saved, error,
+ * adopted — shares the same timing so the UI stays in sync.
+ */
+
+export const FLASH_DURATION_MS = 2000;
+
+export interface FlashOptions<S extends string> {
+  /** State to revert to after the pulse. Defaults to `'idle'`. */
+  idleState?: S;
+  /** How long the transient state is shown before reverting. */
+  durationMs?: number;
+  /** Side effect fired alongside the revert (e.g. clear an inline message). */
+  onIdle?: () => void;
+}
+
+export function flashStatus<S extends string>(
+  set: (state: S) => void,
+  transientState: S,
+  options: FlashOptions<S> = {},
+): void {
+  const idleState = options.idleState ?? ('idle' as S);
+  const durationMs = options.durationMs ?? FLASH_DURATION_MS;
+  set(transientState);
+  setTimeout(() => {
+    set(idleState);
+    options.onIdle?.();
+  }, durationMs);
+}

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

@@ -5,8 +5,8 @@ import type {
   FontStackSlot,
   FontStackVariable,
   SystemCascadePreset,
-} from './themeTypes';
-import { setCssVar, getSyncedDocuments } from './cssVarSync';
+} from '../themes/themeTypes';
+import { setCssVar, getSyncedDocuments } from '../cssVarSync';
 
 export const SYSTEM_CASCADES: Record<SystemCascadePreset, string> = {
   'system-ui-sans':

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

@@ -1,7 +1,7 @@
-import type { FontFamily, FontSource, FontStack, Theme } from './themeTypes';
-import frauncesRomanLatin from '../styles/fonts/Fraunces/Fraunces-roman-latin.woff2?url';
-import frauncesItalicLatin from '../styles/fonts/Fraunces/Fraunces-italic-latin.woff2?url';
-import manropeLatin from '../styles/fonts/Manrope/Manrope-latin.woff2?url';
+import type { FontFamily, FontSource, FontStack, Theme } from '../themes/themeTypes';
+import frauncesRomanLatin from '../../../system/styles/fonts/Fraunces/Fraunces-roman-latin.woff2?url';
+import frauncesItalicLatin from '../../../system/styles/fonts/Fraunces/Fraunces-italic-latin.woff2?url';
+import manropeLatin from '../../../system/styles/fonts/Manrope/Manrope-latin.woff2?url';
 
 function makeId(prefix: string): string {
   return `${prefix}_${Math.random().toString(36).slice(2, 10)}`;

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

@@ -1,4 +1,4 @@
-import type { FontFamily, FontSource, FontSourceKind } from './themeTypes';
+import type { FontFamily, FontSource, FontSourceKind } from '../themes/themeTypes';
 
 export interface ParsedFamily {
   name: string;

package/src/editor/core/manifests/manifestService.ts

@@ -0,0 +1,171 @@
+import type { Manifest, ManifestMeta, ManifestBundle, Theme, ComponentConfig } from '../themes/themeTypes';
+import { versionedFileResource } from '../storage/files/versionedFileResourceClient';
+import { listComponents } from '../components/componentConfigService';
+import { getActiveTheme } from '../themes/themeService';
+
+/**
+ * REST client for manifest files. A manifest references one theme file +
+ * one config file per component (by basename). The active manifest is the
+ * single live snapshot: theme and component Adopts patch its refs server-side.
+ *
+ * `default` is the protected baseline — cannot be overwritten or deleted, and
+ * Adopts return 409 ACTIVE_IS_PROTECTED while it is active.
+ */
+
+const manifestsResource = versionedFileResource<Manifest, ManifestMeta, never>({
+  baseUrl: '/api/manifests',
+});
+
+export const listManifests = async (): Promise<ManifestMeta[]> => {
+  const data = await manifestsResource.list();
+  return data.files;
+};
+
+export const loadManifest = (fileName: string): Promise<Manifest> =>
+  manifestsResource.load(fileName);
+export const saveManifest = (fileName: string, data: Manifest): Promise<void> =>
+  manifestsResource.save(fileName, data);
+export const deleteManifest = (fileName: string): Promise<void> =>
+  manifestsResource.remove(fileName);
+export const getActiveManifest = (): Promise<Manifest | null> => manifestsResource.getActive();
+export const setActiveManifest = (fileName: string): Promise<void> =>
+  manifestsResource.setActive(fileName);
+
+export interface ApplyManifestResult {
+  ok: boolean;
+  manifest: Manifest;
+  theme: Theme;
+  componentConfigs: Record<string, ComponentConfig>;
+}
+
+/**
+ * Server-side atomic apply: validate every referenced file exists, flip the
+ * theme + each component's `_active.json` and `_production.json` pointers,
+ * sync tokens.css/fonts.css from the new theme, mark the manifest active, and
+ * return the resolved theme + component configs in one payload. Clients
+ * usually follow with a full page reload — manifest load is a "blow up the
+ * world" action.
+ */
+export async function applyManifest(fileName: string): Promise<ApplyManifestResult> {
+  const res = await fetch(`/api/manifests/${encodeURIComponent(fileName)}/apply`, {
+    method: 'PUT',
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Apply failed' }));
+    throw new Error(err.error || 'Apply failed');
+  }
+  return res.json();
+}
+
+/**
+ * Snapshot the currently-active theme + component-config file pointers into
+ * a new manifest file and set it active. Used by the manifest panel's Save As
+ * action and by the SaveAs-then-Adopt recovery flow when active is `default`.
+ */
+export async function saveAsManifest(
+  fileName: string,
+  displayName: string,
+): Promise<void> {
+  const activeTheme = await getActiveTheme();
+  if (!activeTheme || !activeTheme._fileName) {
+    throw new Error('No active theme on disk to capture');
+  }
+  const components = await listComponents();
+  const componentConfigs: Record<string, string> = {};
+  for (const c of components) {
+    componentConfigs[c.name] = c.activeFile || 'default';
+  }
+  const now = new Date().toISOString();
+  const manifest: Manifest = {
+    name: displayName,
+    createdAt: now,
+    updatedAt: now,
+    theme: activeTheme._fileName,
+    componentConfigs,
+  };
+  await saveManifest(fileName, manifest);
+  await setActiveManifest(fileName);
+}
+
+/**
+ * Re-snapshot the editor's current active pointers into the *currently active*
+ * manifest file. Used by the manifest panel's Save action. Server rejects with
+ * 403 if active is `default` (protected).
+ */
+export async function saveActiveManifest(displayName?: string): Promise<void> {
+  const active = await getActiveManifest();
+  if (!active || !active._fileName) {
+    throw new Error('No active manifest');
+  }
+  const activeTheme = await getActiveTheme();
+  if (!activeTheme || !activeTheme._fileName) {
+    throw new Error('No active theme on disk');
+  }
+  const components = await listComponents();
+  const componentConfigs: Record<string, string> = {};
+  for (const c of components) {
+    componentConfigs[c.name] = c.activeFile || 'default';
+  }
+  const manifest: Manifest = {
+    name: displayName ?? active.name,
+    createdAt: active.createdAt,
+    updatedAt: new Date().toISOString(),
+    theme: activeTheme._fileName,
+    componentConfigs,
+  };
+  await saveManifest(active._fileName, manifest);
+}
+
+export interface ImportManifestResult {
+  ok: boolean;
+  /** Final manifest filename (may be renamed if it collided with an existing one). */
+  manifest: string;
+  /** Keyed `theme:<orig>` / `componentConfig:<comp>/<orig>` / `manifest:<orig>` → final name. */
+  renames: Record<string, string>;
+}
+
+/**
+ * Fetch the manifest as a self-contained `ManifestBundle` and trigger a
+ * browser download. Hidden-anchor trick — no infrastructure beyond the
+ * existing GET `/api/manifests/:name/export` endpoint.
+ *
+ * See temp/manifest-robustness-plan.md §11.
+ */
+export async function exportManifest(fileName: string): Promise<void> {
+  const res = await fetch(`/api/manifests/${encodeURIComponent(fileName)}/export`);
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Export failed' }));
+    throw new Error(err.error || 'Export failed');
+  }
+  const blob = await res.blob();
+  const url = URL.createObjectURL(blob);
+  try {
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${fileName}.bundle.json`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+
+/**
+ * POST a `ManifestBundle` to the import endpoint. Server materialises the
+ * inlined theme + component configs as fresh files (renaming on collision),
+ * rewrites the manifest's pointers, and returns the final manifest name plus
+ * the rename map so the UI can surface what got renamed.
+ */
+export async function importManifest(bundle: ManifestBundle): Promise<ImportManifestResult> {
+  const res = await fetch('/api/manifests/import', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(bundle),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Import failed' }));
+    throw new Error(err.error || 'Import failed');
+  }
+  return res.json();
+}

package/src/editor/core/palettes/familySwap.ts

@@ -0,0 +1,99 @@
+/**
+ * Family-aware token rewrites.
+ *
+ * Color tokens encode their palette family as a hyphen segment in the slug
+ * (e.g. `--border-canvas-strong` → `canvas`, `--surface-accent-low` →
+ * `accent`). Text tokens are special-cased: `--text-primary` carries no
+ * family, `--text-{family}` and `--text-{family}-{step}` do, and `--text-{step}`
+ * resolves to the neutral text scale.
+ *
+ * These helpers let editor flows (variant family swap, per-stop monochrome
+ * snap) rewrite a token slug without re-implementing the parser each time.
+ */
+
+export const KNOWN_FAMILIES = [
+  'neutral', 'alternate', 'canvas', 'brand',
+  'accent', 'special', 'success', 'warning', 'info', 'danger',
+] as const;
+
+export type FamilyName = (typeof KNOWN_FAMILIES)[number];
+
+export const TEXT_STEPS = ['primary', 'secondary', 'tertiary', 'muted', 'disabled'] as const;
+
+export type TextStep = (typeof TEXT_STEPS)[number];
+
+/** Parse a text-scale token name into family + step. Returns null for any
+ *  non-`--text-*` slug or one whose parts don't resolve to a known step. */
+export function parseTextToken(colorRef: string): { family: FamilyName; step: TextStep } | null {
+  if (!colorRef.startsWith('--text-')) return null;
+  const rest = colorRef.slice('--text-'.length);
+  const parts = rest.split('-');
+  if (parts.length === 1) {
+    const p = parts[0];
+    if ((TEXT_STEPS as readonly string[]).includes(p)) return { family: 'neutral', step: p as TextStep };
+    if ((KNOWN_FAMILIES as readonly string[]).includes(p)) return { family: p as FamilyName, step: 'primary' };
+    return null;
+  }
+  if (parts.length === 2) {
+    const [fam, step] = parts;
+    if (
+      (KNOWN_FAMILIES as readonly string[]).includes(fam)
+      && (TEXT_STEPS as readonly string[]).includes(step)
+    ) {
+      return { family: fam as FamilyName, step: step as TextStep };
+    }
+  }
+  return null;
+}
+
+/** Inverse of parseTextToken — assemble a `--text-*` slug from family + step.
+ *  `neutral` family flattens to `--text-{step}`; `primary` step on a named
+ *  family flattens to `--text-{family}` (matches authoring conventions). */
+export function buildTextToken(family: FamilyName | string, step: TextStep | string): string {
+  if (family === 'neutral') return `--text-${step}`;
+  return step === 'primary' ? `--text-${family}` : `--text-${family}-${step}`;
+}
+
+/** Pull the family marker out of a token slug, or null if none of the
+ *  hyphen-delimited parts is a known family. */
+export function detectFamily(colorRef: string): FamilyName | null {
+  if (!colorRef.startsWith('--')) return null;
+  const parts = colorRef.slice(2).split('-');
+  for (const p of parts) {
+    if ((KNOWN_FAMILIES as readonly string[]).includes(p)) return p as FamilyName;
+  }
+  return null;
+}
+
+/** Rewrite the family marker in a slug from `oldFamily` to `newFamily`.
+ *  Returns the input unchanged when the slug doesn't reference `oldFamily`
+ *  (so unrelated tokens, literals, and out-of-family stops fall through). */
+export function swapTokenFamily(name: string, oldFamily: string, newFamily: string): string {
+  if (!name.startsWith('--')) return name;
+  const text = parseTextToken(name);
+  if (text) {
+    if (text.family !== oldFamily) return name;
+    return buildTextToken(newFamily, text.step);
+  }
+  const parts = name.slice(2).split('-');
+  const idx = parts.indexOf(oldFamily);
+  if (idx < 0) return name;
+  parts[idx] = newFamily;
+  return '--' + parts.join('-');
+}
+
+/** Coerce a slug to the given target family. Unlike swapTokenFamily this
+ *  doesn't need to know the source family — it autodetects, then rewrites.
+ *  Returns the input unchanged if no family is present (e.g. literal colors,
+ *  `transparent`, or a `--text-primary` neutral). */
+export function snapTokenToFamily(name: string, targetFamily: string): string {
+  if (!name.startsWith('--')) return name;
+  const text = parseTextToken(name);
+  if (text) {
+    if (text.family === targetFamily) return name;
+    return buildTextToken(targetFamily, text.step);
+  }
+  const fromFamily = detectFamily(name);
+  if (!fromFamily || fromFamily === targetFamily) return name;
+  return swapTokenFamily(name, fromFamily, targetFamily);
+}

package/src/{lib → editor/core/palettes}/paletteDerivation.ts

@@ -14,8 +14,8 @@
  */
 
 import { hexToOklch, oklchToHex, gamutClamp } from './oklch';
-import { type CurveAnchor, sampleCurve, makeAnchor } from '../ui/curveEngine';
-import type { PaletteConfig } from './themeTypes';
+import { type CurveAnchor, sampleCurve, makeAnchor } from '../../ui/curveEngine';
+import type { PaletteConfig } from '../themes/themeTypes';
 
 export type PaletteMode = 'chromatic' | 'gray';
 
@@ -298,3 +298,72 @@ export function palettesToVars(palettes: Record<string, PaletteConfig>): Record<
   }
   return out;
 }
+
+const HEX_RE = /^#[0-9a-f]{6}$/i;
+
+/**
+ * Reconcile palette typed state against the catch-all `cssVariables` bag and
+ * report the set of variable names the typed slice now owns. Two operations:
+ *
+ *   - **Snap** (gated by `_imported`): for any palette whose `_imported` flag
+ *     is true, the imported `--color-{ns}-500` value is treated as the
+ *     authoritative anchor. Chromatic palettes get `baseColor` snapped to it;
+ *     gray palettes (Neutral/Alternate) get `tintHue` + `tintChroma` derived
+ *     from it via OKLCH. The flag is then cleared. Editor-authored palettes
+ *     (no `_imported`) are left untouched — see `temp/manifest-robustness-plan.md`
+ *     §9 for why "snap on any divergence" was wrong: it would have flipped
+ *     `themes/default.json`'s accent from teal to olive on first read.
+ *
+ *   - **Consume** (always): every variable the palette's derivation produces
+ *     is reported in `consumed` so the caller can strip it from
+ *     `cssVariables`. The renderer (`editorRenderer.ts:42`) overlays
+ *     `palettesToVars(palettes)` on top of `cssVariables` regardless, so
+ *     stripped keys were dead data anyway. Stripping makes the file
+ *     invariant explicit: catch-all carries only tokens no typed slice owns.
+ *
+ * Returns the updated palette map plus the two sets. Pure: no DOM, no I/O,
+ * no module state. Idempotent on second call with the same input (no anchor
+ * to snap to after first call's strip).
+ */
+export function reconcilePalettesFromCssVars(
+  palettes: Record<string, PaletteConfig>,
+  cssVars: Record<string, string>,
+): {
+  palettes: Record<string, PaletteConfig>;
+  consumed: ReadonlySet<string>;
+  snapped: ReadonlySet<string>;
+} {
+  const next: Record<string, PaletteConfig> = structuredClone(palettes);
+  const consumed = new Set<string>();
+  const snapped = new Set<string>();
+
+  for (const spec of PALETTE_SPECS) {
+    const current = next[spec.label];
+    if (current === undefined) continue;
+
+    if (current._imported === true) {
+      const anchorHex = cssVars[`--color-${spec.cssNamespace}-500`];
+      if (anchorHex && HEX_RE.test(anchorHex.trim())) {
+        const hex = anchorHex.trim();
+        if (spec.mode === 'gray') {
+          const { c, h } = hexToOklch(hex);
+          next[spec.label] = { ...current, tintHue: h, tintChroma: c, _imported: false };
+        } else {
+          next[spec.label] = { ...current, baseColor: hex, _imported: false };
+        }
+        snapped.add(spec.label);
+      } else {
+        // No anchor in cssVariables to snap to — flag has nothing to do; clear
+        // it so subsequent calls don't keep checking. Safe because the renderer
+        // is going to overlay palettesToVars anyway.
+        next[spec.label] = { ...current, _imported: false };
+      }
+    }
+
+    for (const k of Object.keys(derivePaletteVars(spec, next[spec.label]))) {
+      consumed.add(k);
+    }
+  }
+
+  return { palettes: next, consumed, snapped };
+}

package/src/{lib → editor/core/palettes}/tokenRegistry.ts

@@ -19,17 +19,18 @@
  */
 
 import { derived, type Readable } from 'svelte/store';
-import tokensCss from '../styles/tokens.css?raw';
-import { editorState } from './editorStore';
-import type { EditorState } from './editorTypes';
-import { extractGlobalRootBody } from './parsers/globalRootBlock';
+import tokensCss from '../../../system/styles/tokens.css?raw';
+import { editorState } from '../store/editorStore';
+import type { EditorState } from '../store/editorTypes';
+import { extractGlobalRootBody } from '../themes/parsers/globalRootBlock';
+import { formatGradientValue } from '../themes/slices/gradients';
 
 // Re-exported for tests and downstream consumers that previously imported it
 // from this module. The canonical implementation lives in `./parsers/globalRootBlock`
 // so the dev-server vite plugin can share it.
 export { extractGlobalRootBody };
 
-const componentSources = import.meta.glob('../components/*.svelte', {
+const componentSources = import.meta.glob('../../../system/components/*.svelte', {
   query: '?raw',
   import: 'default',
   eager: true,
@@ -111,7 +112,9 @@ function buildOverlayRegistry(
   const overrides = new Map<string, string>();
   for (const slice of Object.values(components)) {
     for (const [varName, ref] of Object.entries(slice.aliases)) {
-      overrides.set(varName, ref.kind === 'token' ? `var(${ref.name})` : ref.value);
+      if (ref.kind === 'token') overrides.set(varName, `var(${ref.name})`);
+      else if (ref.kind === 'literal') overrides.set(varName, ref.value);
+      else overrides.set(varName, formatGradientValue(ref.value));
     }
   }
   const getDeclared = (v: string): string | null =>