@motion-proto/live-tokens 0.9.0 → 0.11.0

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

@@ -28,6 +28,7 @@
   import { CURRENT_COMPONENT_SCHEMA_VERSION } from '../../core/themes/migrations';
   import type { CssVarRef } from '../../core/store/editorTypes';
   import { safeFetch } from '../../core/storage/storage';
+  import { API_BASE } from '../../core/storage/apiBase';
   import { flashStatus } from '../../core/flashStatus';
   import ComponentFileMenu from './ComponentFileMenu.svelte';
   import SaveAsDialog from './SaveAsDialog.svelte';
@@ -91,7 +92,7 @@
     const data = await safeFetch<{
       files: ComponentConfigMeta[];
       activeFile: string;
-    }>(`/api/component-configs/${encodeURIComponent(component)}`);
+    }>(`${API_BASE}/component-configs/${encodeURIComponent(component)}`);
     if (!data) return;
     files = data.files;
     activeFileName = data.activeFile;
@@ -103,7 +104,7 @@
     // Preserve existing productionInfo on transient fetch failure rather than
     // clobbering it to null — same behaviour as the previous empty catch.
     const info = await safeFetch<ComponentProductionInfo>(
-      `/api/component-configs/${encodeURIComponent(component)}/production`,
+      `${API_BASE}/component-configs/${encodeURIComponent(component)}/production`,
     );
     if (info) productionInfo = info;
   }

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

@@ -53,7 +53,6 @@
     min-height: 12rem;
     border-radius: var(--ui-radius-md);
     box-sizing: border-box;
-    overflow: hidden;
   }
 
   .shadow-backdrop.with-controls {
@@ -61,12 +60,22 @@
     grid-template-areas: "preview controls";
   }
 
+  /* Clip slotted children (e.g. Dialog's full-bleed overlay in padding=0 mode)
+     to the backdrop's rounded corners here rather than on the wrapper, so the
+     controls cell's dropdowns can escape vertically. The wrapper's image/color
+     background is still clipped naturally by its own border-radius. */
   .shadow-backdrop-content {
     display: grid;
     align-items: center;
     justify-items: start;
     min-width: 0;
     grid-area: preview;
+    border-radius: var(--ui-radius-md);
+    overflow: hidden;
+  }
+
+  .shadow-backdrop.with-controls .shadow-backdrop-content {
+    border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
   }
 
   .shadow-backdrop-controls {

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

@@ -250,19 +250,18 @@
     padding-top: calc(var(--ui-font-size-xs) + var(--ui-space-4));
   }
 
-  /* Element-grouped mode: subsections fan out across available width, each
-     labeled by the element it targets (e.g. Frame / Header / Body). Three
-     columns at typical editor widths, dropping to two then one as the panel
-     narrows — the auto-fit + minmax does the responsive work without media
-     queries. `align-items: start` keeps columns of different heights aligned
-     to their top edge instead of stretching the shorter ones.
+  /* Element-grouped mode: subsections sit flush against their content width
+     with a 1rem gap between them, wrapping to a new row when the panel is too
+     narrow to fit them side-by-side. Flex (not grid 1fr) so wide viewports
+     don't spread the columns apart — sections cluster left and consume only
+     as much width as their controls need.
      Within a section the two-col split (typography fieldsets + property grid)
      still applies when the section has both. */
   .state-controls.element-grouped {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-    gap: var(--ui-space-20) var(--ui-space-32);
-    align-items: start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-16);
+    align-items: flex-start;
   }
 
   /* Each element section stacks typography fieldset(s) above the property

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

@@ -7,7 +7,9 @@
   import UIFontSizeSelector from '../../ui/UIFontSizeSelector.svelte';
   import UILineHeightSelector from '../../ui/UILineHeightSelector.svelte';
   import UIPaddingSelector from '../../ui/UIPaddingSelector.svelte';
-  import { BLUR, BORDER_WIDTH, DOT_SIZE, RADIUS, SHADOW, DIVIDER_HEIGHT } from '../../ui/variantScales';
+  import UILetterSpacingSelector from '../../ui/UILetterSpacingSelector.svelte';
+  import UIEasingSelector from '../../ui/UIEasingSelector.svelte';
+  import { BLUR, BORDER_WIDTH, DOT_SIZE, DURATION, RADIUS, SHADOW, DIVIDER_HEIGHT, DIVIDER_INSET } from '../../ui/variantScales';
   import {
     editorState,
     getComponentPropertySiblings,
@@ -26,6 +28,7 @@
     | 'radius'
     | 'divider-width'
     | 'divider-height'
+    | 'divider-inset'
     | 'dot-size'
     | 'blur'
     | 'shadow'
@@ -33,10 +36,13 @@
     | 'font-weight'
     | 'font-size'
     | 'line-height'
+    | 'letter-spacing'
     | 'padding'
     | 'padding-split'
     | 'gap'
-    | 'extras';
+    | 'duration'
+    | 'easing'
+    | 'text-color';
 
   type Entry = { kind: Kind; token: Token };
 
@@ -75,44 +81,61 @@
     onchange,
   }: Props = $props();
 
-  /** Suffix/prefix patterns mapped to kinds — single source of truth used by `categorize`.
-      Order matters: `text` must run before `border`/`surface` because `--text-*` would
-      otherwise match `surface` checks if any pattern overlapped. */
+  /** Suffix/prefix patterns mapped to kinds — single source of truth used by `rawKind`.
+      Order matters: `-text` must run before `-border`/`-surface` because `--text-*`
+      would otherwise match `surface`/`border` if any pattern overlapped. Variables
+      that don't match any pattern fall through to `text-color` (renders as a palette
+      picker). Tokens with unconventional suffixes should be renamed. */
   const KIND_PATTERNS: Array<{ kind: Kind; matches: (v: string) => boolean }> = [
-    { kind: 'font-family', matches: (v) => v.endsWith('-font-family') },
-    { kind: 'font-weight', matches: (v) => v.endsWith('-font-weight') },
-    { kind: 'font-size', matches: (v) => v.endsWith('-font-size') || v.endsWith('-icon-size') },
-    { kind: 'line-height', matches: (v) => v.endsWith('-line-height') },
-    { kind: 'extras', matches: (v) => v.endsWith('-text') || v.startsWith('--text-') },
-    { kind: 'radius', matches: (v) => v.endsWith('-radius') || v.startsWith('--radius-') },
-    { kind: 'divider-width', matches: (v) => v.endsWith('-divider-width') || v.endsWith('-divider-thickness') },
+    { kind: 'font-family',    matches: (v) => v.endsWith('-font-family') },
+    { kind: 'font-weight',    matches: (v) => v.endsWith('-font-weight') },
+    { kind: 'font-size',      matches: (v) => v.endsWith('-font-size') || v.endsWith('-icon-size') },
+    { kind: 'line-height',    matches: (v) => v.endsWith('-line-height') },
+    { kind: 'letter-spacing', matches: (v) => v.endsWith('-letter-spacing') },
+    { kind: 'text-color',     matches: (v) => v.endsWith('-text') || v.startsWith('--text-') },
+    { kind: 'radius',         matches: (v) => v.endsWith('-radius') || v.startsWith('--radius-') },
+    { kind: 'divider-width',  matches: (v) => v.endsWith('-divider-width') || v.endsWith('-divider-thickness') },
     { kind: 'divider-height', matches: (v) => v.endsWith('-divider-height') || v.endsWith('-track-height') },
-    { kind: 'dot-size', matches: (v) => v.endsWith('-dot-size') },
-    { kind: 'blur', matches: (v) => v.endsWith('-blur') || v.startsWith('--blur-') },
-    { kind: 'shadow', matches: (v) => v.endsWith('-shadow') || v.startsWith('--shadow-') },
-    { kind: 'padding', matches: (v) => v.endsWith('-padding') || v.endsWith('-margin') },
-    { kind: 'gap', matches: (v) => v.endsWith('-gap') },
-    { kind: 'border-width', matches: (v) => v.endsWith('-border-width') || v.endsWith('-accent-width') || v.endsWith('-hairline-thickness') || v.startsWith('--border-width-') },
-    { kind: 'border', matches: (v) => v.endsWith('-border') || v.startsWith('--border-') },
-    { kind: 'surface', matches: (v) => v.endsWith('-surface') || v.startsWith('--surface-') },
+    { kind: 'divider-inset',  matches: (v) => v.endsWith('-divider-inset') },
+    { kind: 'dot-size',       matches: (v) => v.endsWith('-dot-size') },
+    { kind: 'blur',           matches: (v) => v.endsWith('-blur') || v.startsWith('--blur-') },
+    { kind: 'shadow',         matches: (v) => v.endsWith('-shadow') || v.startsWith('--shadow-') },
+    { kind: 'padding',        matches: (v) => v.endsWith('-padding') || v.endsWith('-margin') },
+    { kind: 'gap',            matches: (v) => v.endsWith('-gap') },
+    { kind: 'duration',       matches: (v) => v.endsWith('-duration') || v.startsWith('--duration-') },
+    { kind: 'easing',         matches: (v) => v.endsWith('-easing') || v.startsWith('--ease-') },
+    { kind: 'border-width',   matches: (v) => v.endsWith('-border-width') || v.endsWith('-accent-width') || v.endsWith('-hairline-thickness') || v.startsWith('--border-width-') },
+    { kind: 'border',         matches: (v) => v.endsWith('-border') || v.startsWith('--border-') },
+    { kind: 'surface',        matches: (v) => v.endsWith('-surface') || v.startsWith('--surface-') },
   ];
 
+  function rawKind(variable: string): Kind {
+    for (const { kind, matches } of KIND_PATTERNS) {
+      if (matches(variable)) return kind;
+    }
+    return 'text-color';
+  }
+
   /** Fixed internal order for tokens within a layout. `padding-split` co-orders with `padding`. */
   const baseKindOrder: Kind[] = [
     'font-family',
     'font-weight',
     'font-size',
     'line-height',
+    'letter-spacing',
     'divider-width',
     'divider-height',
+    'divider-inset',
     'dot-size',
     'radius',
     'padding',
     'padding-split',
     'gap',
+    'duration',
+    'easing',
     'blur',
     'shadow',
-    'extras',
+    'text-color',
     'surface',
     'border-width',
     'border',
@@ -121,13 +144,6 @@
     baseKindOrder.map((k, i) => [k, i]),
   ) as Record<Kind, number>;
 
-  function rawKind(v: string): Kind {
-    for (const { kind, matches } of KIND_PATTERNS) {
-      if (matches(v)) return kind;
-    }
-    return 'extras';
-  }
-
   /** A padding token is "split" when its per-side variables exist for this component. */
   function paddingIsSplit(varName: string, comp: string | undefined, state: typeof $editorState): boolean {
     const sides = ['top', 'right', 'bottom', 'left'];
@@ -148,8 +164,8 @@
   }
 
   /** For sibling/grouping checks we want the canonical kind, not the split-vs-single distinction. */
-  function groupingKind(v: string): Kind {
-    return rawKind(v);
+  function groupingKind(variable: string): Kind {
+    return rawKind(variable);
   }
 
   /** Selector registry: one entry per kind. `extra` props (e.g. UIPaddingSelector's
@@ -167,9 +183,11 @@
     'font-weight': { component: UIFontWeightSelector },
     'font-size': { component: UIFontSizeSelector },
     'line-height': { component: UILineHeightSelector },
+    'letter-spacing': { component: UILetterSpacingSelector },
     'border-width': { component: UIVariantSelector, extra: () => ({ ...BORDER_WIDTH }) },
     'divider-width': { component: UIVariantSelector, extra: () => ({ ...BORDER_WIDTH }) },
     'divider-height': { component: UIVariantSelector, extra: () => ({ ...DIVIDER_HEIGHT }) },
+    'divider-inset': { component: UIVariantSelector, extra: () => ({ ...DIVIDER_INSET }) },
     'dot-size': { component: UIVariantSelector, extra: () => ({ ...DOT_SIZE }) },
     'radius': { component: UIVariantSelector, extra: () => ({ ...RADIUS }) },
     'padding': { component: UIPaddingSelector, extra: (t) => ({ mode: 'single', splittable: t.splittable !== false }) },
@@ -184,31 +202,37 @@
       extra: () => ({ mode: 'sides' }),
     },
     'gap': { component: UIPaddingSelector, extra: () => ({ mode: 'single', splittable: false }) },
+    'duration': { component: UIVariantSelector, extra: () => ({ ...DURATION }) },
+    'easing': { component: UIEasingSelector },
     'blur': { component: UIVariantSelector, extra: () => ({ ...BLUR }) },
     'shadow': { component: UIVariantSelector, extra: () => ({ ...SHADOW }) },
     'surface': { component: UIPaletteSelector },
     'border': { component: UIPaletteSelector },
-    'extras': { component: UIPaletteSelector },
+    'text-color': { component: UIPaletteSelector },
   };
 
-  /** Multi-col rank: same as `orderRank` but with `extras` (text-color-like) hoisted
-      between `line-height` and `border-width` so typography reads as one logical
-      block in column flow. Single-col mode keeps `orderRank` (linked-first sort
-      already segregates extras to the bottom). */
+  /** Multi-col rank: same as `orderRank` but with `text-color` hoisted between
+      `line-height` and `divider-width` so typography reads as one logical block
+      in column flow. Single-col mode keeps `orderRank` (linked-first sort
+      already segregates text-color to the bottom). */
   const multiColRank: Record<Kind, number> = (() => {
     const reordered: Kind[] = [
       'font-family',
       'font-weight',
       'font-size',
       'line-height',
-      'extras',
+      'letter-spacing',
+      'text-color',
       'divider-width',
       'divider-height',
+      'divider-inset',
       'dot-size',
       'radius',
       'padding',
       'padding-split',
       'gap',
+      'duration',
+      'easing',
       'blur',
       'shadow',
       'surface',

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

@@ -582,10 +582,47 @@
   }
 
   .preview-actions {
-    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-12);
+  }
+
+  /* Labels inside previewActions read at the UI body size, matching the
+     variant tab strip they sit beside. Greyscale only. */
+  .preview-actions :global(label) {
     display: inline-flex;
     align-items: center;
     gap: var(--ui-space-8);
+    font-size: var(--ui-font-size-md);
+    color: var(--ui-text-secondary);
+  }
+
+  /* Native <select> styled to match the property-row trigger chrome so
+     toolbar selects share one visual vocabulary with property dropdowns. */
+  .preview-actions :global(select) {
+    appearance: none;
+    -webkit-appearance: none;
+    padding: 0 var(--ui-space-24) 0 var(--ui-space-10);
+    min-height: 1.75rem;
+    background-color: var(--ui-surface-low);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--ui-space-8) center;
+    border: 1px solid var(--ui-border);
+    border-radius: var(--ui-radius-md);
+    color: var(--ui-text-primary);
+    font-family: var(--ui-font-sans);
+    font-size: var(--ui-font-size-md);
+    cursor: pointer;
+    transition: background-color var(--ui-transition-fast), border-color var(--ui-transition-fast);
+  }
+  .preview-actions :global(select:hover) {
+    background-color: var(--ui-surface-high);
+    border-color: var(--ui-border-higher);
+  }
+  .preview-actions :global(select:focus-visible) {
+    outline: 2px solid var(--ui-highlight);
+    outline-offset: 2px;
   }
 
   /* Sits in the backdrop's right-rail column (ShadowBackdrop owns the two-column

package/src/editor/component-editor/scaffolding/buildTypeGroupTokens.ts

@@ -31,7 +31,7 @@ export type BuildTypeGroupTokensOptions = {
     out of the linked block while still appearing in the editor's full token surface
     (used by the reset-button and the design-token resolution test).
 
-    Mirrors the `flatMap`/loop pattern in StandardButtonsEditor and RadioButtonEditor so
+    Mirrors the `flatMap`/loop pattern in ButtonEditor and RadioButtonEditor so
     editors don't have to hand-list 16+ near-identical Token entries. */
 export function buildTypeGroupTokens(
   typeGroups: Record<string, TypeGroupConfig[]>,

package/src/editor/component-editor/scaffolding/siblings.ts

@@ -13,8 +13,8 @@ export type Sibling = {
 
     `variantStates(v)` and `variantTypeGroups(v)` return the same shape the
     parent VariantGroup gets for its own `states` / `typeGroups` props — a map
-    keyed by state name. For single-state-per-variant editors (Badge, Notification,
-    ProgressBar), wrap the single-state builders inline:
+    keyed by state name. For single-state-per-variant editors (Badge,
+    Notification), wrap the single-state builders inline:
       `(v) => ({ [v]: variantTokens(v) })`. */
 export function buildSiblings<V extends string>(
   variants: readonly V[],

package/src/editor/component-editor/scaffolding/types.ts

@@ -27,7 +27,8 @@ export type Token = {
   /** 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. */
+      rather than a verbatim ref copy. Distinct from `picker`: `kind`
+      marks the value's data shape; `picker` selects the editor control. */
   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

package/src/editor/core/components/componentConfigService.ts

@@ -1,12 +1,13 @@
 import type { AliasDiskValue, ComponentConfig, ComponentConfigMeta } from '../themes/themeTypes';
 import { versionedFileResource } from '../storage/files/versionedFileResourceClient';
+import { API_BASE } from '../storage/apiBase';
 
 /**
  * REST client for per-component config files. Parallel to `themeService.ts`
- * but scoped to `/api/component-configs/*`. Each component (button, card, …)
- * has its own lifecycle: default.json (generated from the `.svelte` source),
- * plus user-authored named configs, each with its own active / production
- * pointer.
+ * but scoped to `${API_BASE}/component-configs/*`. Each component (button,
+ * card, …) has its own lifecycle: default.json (generated from the `.svelte`
+ * source), plus user-authored named configs, each with its own active /
+ * production pointer.
  *
  * Both this and `themeService` consume `versionedFileResource(...)`. Adding a
  * third file-managed resource — per the user's "mirror theme-file lifecycle
@@ -34,7 +35,7 @@ export interface ComponentConfigList {
 }
 
 export async function listComponents(): Promise<ComponentSummary[]> {
-  const res = await fetch('/api/component-configs');
+  const res = await fetch(`${API_BASE}/component-configs`);
   if (!res.ok) throw new Error('Failed to list components');
   const data = await res.json();
   return data.components;
@@ -42,7 +43,7 @@ export async function listComponents(): Promise<ComponentSummary[]> {
 
 function resourceFor(component: string) {
   return versionedFileResource<ComponentConfig, ComponentConfigMeta, ComponentProductionInfo>({
-    baseUrl: `/api/component-configs/${encodeURIComponent(component)}`,
+    baseUrl: `${API_BASE}/component-configs/${encodeURIComponent(component)}`,
   });
 }
 

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

@@ -1,5 +1,6 @@
 import type { Manifest, ManifestMeta, ManifestBundle, Theme, ComponentConfig } from '../themes/themeTypes';
 import { versionedFileResource } from '../storage/files/versionedFileResourceClient';
+import { API_BASE } from '../storage/apiBase';
 import { listComponents } from '../components/componentConfigService';
 import { getActiveTheme } from '../themes/themeService';
 
@@ -13,7 +14,7 @@ import { getActiveTheme } from '../themes/themeService';
  */
 
 const manifestsResource = versionedFileResource<Manifest, ManifestMeta, never>({
-  baseUrl: '/api/manifests',
+  baseUrl: `${API_BASE}/manifests`,
 });
 
 export const listManifests = async (): Promise<ManifestMeta[]> => {
@@ -47,7 +48,7 @@ export interface ApplyManifestResult {
  * world" action.
  */
 export async function applyManifest(fileName: string): Promise<ApplyManifestResult> {
-  const res = await fetch(`/api/manifests/${encodeURIComponent(fileName)}/apply`, {
+  const res = await fetch(`${API_BASE}/manifests/${encodeURIComponent(fileName)}/apply`, {
     method: 'PUT',
   });
   if (!res.ok) {
@@ -132,7 +133,7 @@ export interface ImportManifestResult {
  * See temp/manifest-robustness-plan.md §11.
  */
 export async function exportManifest(fileName: string): Promise<void> {
-  const res = await fetch(`/api/manifests/${encodeURIComponent(fileName)}/export`);
+  const res = await fetch(`${API_BASE}/manifests/${encodeURIComponent(fileName)}/export`);
   if (!res.ok) {
     const err = await res.json().catch(() => ({ error: 'Export failed' }));
     throw new Error(err.error || 'Export failed');
@@ -158,7 +159,7 @@ export async function exportManifest(fileName: string): Promise<void> {
  * 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', {
+  const res = await fetch(`${API_BASE}/manifests/import`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(bundle),

package/src/editor/core/storage/apiBase.ts

@@ -0,0 +1,15 @@
+/**
+ * Resolved API base path for the editor's REST client. Injected by the
+ * `themeFileApi` vite plugin via `config().define` so the client and server
+ * always agree on the route prefix, even when a consumer overrides `apiBase`.
+ *
+ * Fallback (no plugin running) matches the plugin's default. The strings must
+ * stay in sync — there is no single source of truth across the build-time /
+ * runtime boundary, but the cost of one constant in two files is small.
+ */
+declare const __LIVE_TOKENS_API_BASE__: string | undefined;
+
+export const API_BASE: string =
+  typeof __LIVE_TOKENS_API_BASE__ !== 'undefined' && __LIVE_TOKENS_API_BASE__
+    ? __LIVE_TOKENS_API_BASE__
+    : '/api/live-tokens';

package/src/editor/core/storage/files/versionedFileResourceClient.ts

@@ -12,7 +12,7 @@
  */
 
 export interface VersionedFileResourceClientOptions {
-  /** REST endpoint root, e.g. `/api/themes` or `/api/component-configs/button`. */
+  /** REST endpoint root, e.g. `${API_BASE}/themes` or `${API_BASE}/component-configs/button`. */
   baseUrl: string;
 }
 

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

@@ -19,7 +19,6 @@ import {
   columnsToVars,
   columnsEqualsDefault,
   overlaysToVars,
-  overlaysEqualsDefault,
   shadowsToVars,
   gradientsToVars,
   componentsToVars,
@@ -30,9 +29,7 @@ export function deriveCssVars(state: EditorState): Record<string, string> {
   if (!columnsEqualsDefault(state.columns)) {
     Object.assign(out, columnsToVars(state.columns));
   }
-  if (!overlaysEqualsDefault(state.overlays)) {
-    Object.assign(out, overlaysToVars(state.overlays));
-  }
+  Object.assign(out, overlaysToVars(state.overlays));
   if (state.shadows.tokens.length > 0) {
     Object.assign(out, shadowsToVars(state.shadows));
   }

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

@@ -51,7 +51,6 @@ import {
 import {
   loadOverlaysFromVars,
   makeDefaultOverlaysState,
-  overlaysEqualsDefault,
   overlaysToVars,
 } from '../themes/slices/overlays';
 import {
@@ -133,14 +132,13 @@ export {
 
 export {
   overlaysToVars,
-  overlaysEqualsDefault,
   OVERLAY_VAR_NAMES,
   applyOverlayVarsToState,
   makeDefaultOverlaysState,
-  overlayTokenToRgba,
-  parseRgba,
-  RGBA_RE,
-  HEX_RE,
+  makeDefaultOverlayTokens,
+  makeDefaultHoverTokens,
+  overlayTokenToCss,
+  parseOverlayCss,
 } from '../themes/slices/overlays';
 
 export {
@@ -548,9 +546,7 @@ export function toTheme(state: EditorState, meta: { name: string }): Theme {
   if (!columnsEqualsDefault(state.columns)) {
     Object.assign(cssVariables, columnsToVars(state.columns));
   }
-  if (!overlaysEqualsDefault(state.overlays)) {
-    Object.assign(cssVariables, overlaysToVars(state.overlays));
-  }
+  Object.assign(cssVariables, overlaysToVars(state.overlays));
   if (state.shadows.tokens.length > 0) {
     Object.assign(cssVariables, shadowsToVars(state.shadows));
   }

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

@@ -21,19 +21,13 @@ export interface ShadowOverrideFlags {
   distance: boolean; blur: boolean; size: boolean;
 }
 
+/** Overlay stop: an aliased color token + an opacity. Emits as
+ *  `color-mix(in srgb, var(<alias>) <opacity%>, transparent)`. */
 export interface OverlayToken {
-  variable: string; label: string;
-  r: number; g: number; b: number; opacity: number;
-}
-
-export interface OverlayChannelGlobals {
-  hue: number; saturation: number; lightness: number;
-  opacityMin: number; opacityMax: number;
-}
-
-export interface OverlayGlobals {
-  overlay: OverlayChannelGlobals;
-  hover: OverlayChannelGlobals;
+  variable: string;
+  label: string;
+  alias: string;
+  opacity: number;
 }
 
 export interface ColumnsState {
@@ -134,7 +128,6 @@ export interface EditorState {
   overlays: {
     tokens: OverlayToken[];
     hoverTokens: OverlayToken[];
-    globals: OverlayGlobals;
   };
   columns: ColumnsState;
   components: Record<string, ComponentSlice>;

package/src/editor/core/themes/migrations/2026-05-13-primary-to-brand.ts

@@ -1,26 +1,6 @@
 import type { Migration } from './index';
 
-/**
- * 2026-05-13: rename the `primary` color family to `brand`.
- *
- * The word "primary" was overloaded — both a color-family slot (alongside
- * info/success/danger/etc.) AND the top of the neutral text-emphasis ramp
- * (`--text-primary` / `--text-secondary` / `--text-tertiary`). Tokens like
- * `--text-primary-color` only existed because `--text-primary` was already
- * taken by neutral. Renaming the family to `brand` dissolves the collision:
- *
- *   --color-primary-{step}    → --color-brand-{step}
- *   --surface-primary[-step]  → --surface-brand[-step]
- *   --border-primary[-step]   → --border-brand[-step]
- *   --text-primary-color      → --text-brand
- *   --text-primary-{step}     → --text-brand-{step}   (step in secondary|tertiary|muted|disabled)
- *
- * The neutral text ramp (`--text-primary`, `--text-secondary`, …) is **left
- * untouched** — it's a different namespace that just happens to share the
- * word. The match list below enumerates the brand-family names explicitly so
- * a substring-on-`primary` mistake can't clobber neutral text or unrelated
- * tokens like `--button-primary-*` (component variant, not family).
- */
+// Match list is explicit so the neutral `--text-primary` ramp (different namespace) isn't clobbered.
 
 const PALETTE_STEPS = ['100','200','300','400','500','600','700','800','850','900','950'] as const;
 const SURFACE_SUFFIXES = ['lowest','lower','low','high','higher','highest'] as const;
@@ -43,7 +23,6 @@ function renameToken(name: string): string {
   return RENAME_MAP[name] ?? name;
 }
 
-/** Rewrite keys only — used for theme cssVariables (values are hex). */
 function renameKeys(rawVars: Record<string, string>): Record<string, string> {
   const out: Record<string, string> = {};
   for (const [k, v] of Object.entries(rawVars)) {
@@ -52,7 +31,6 @@ function renameKeys(rawVars: Record<string, string>): Record<string, string> {
   return out;
 }
 
-/** Rewrite both keys and values — used for component-config aliases. */
 function renameKeysAndValues(rawVars: Record<string, string>): Record<string, string> {
   const out: Record<string, string> = {};
   for (const [k, v] of Object.entries(rawVars)) {
@@ -77,12 +55,7 @@ export const componentMigration_2026_05_13_primaryToBrand: Migration = {
   apply: renameKeysAndValues,
 };
 
-/**
- * Helper for loadFromFile: rename `theme.editorConfigs.Primary` → `Brand`.
- * Lives here (with the rest of the rename) instead of in the migration
- * framework because the framework's contract is `Record<string, string>` —
- * editorConfigs is a structured palette-config map and can't pass through it.
- */
+// Lives outside the migration framework because its contract is Record<string, string>; editorConfigs is structured.
 export function renamePrimaryPaletteKey<T>(editorConfigs: Record<string, T>): Record<string, T> {
   if (!('Primary' in editorConfigs) || 'Brand' in editorConfigs) return editorConfigs;
   const { Primary, ...rest } = editorConfigs;

package/src/editor/core/themes/migrations/2026-05-24-collapsiblesection-drop-active-state.ts

@@ -0,0 +1,28 @@
+import type { Migration } from './index';
+
+/**
+ * 2026-05-24: drop the `active` header state from collapsiblesection.
+ *
+ * The state only paid rent when the component was used as a nav link (an
+ * externally-supplied `active={true}` paired with `href`). No consumer was
+ * using it, so the runtime now omits both the prop and the `&.active` CSS
+ * branch. Strip the matching saved aliases from every variant.
+ */
+function dropActiveState(rawVars: Record<string, string>, meta: { component?: string }): Record<string, string> {
+  if (meta.component !== 'collapsiblesection') return rawVars;
+  const re = /^--collapsiblesection-(chromeless|divider|container)-active-/;
+  const out: Record<string, string> = {};
+  for (const [key, value] of Object.entries(rawVars)) {
+    if (re.test(key)) continue;
+    out[key] = value;
+  }
+  return out;
+}
+
+export const componentMigration_2026_05_24_collapsiblesectionDropActiveState: Migration = {
+  id: '2026-05-24-collapsiblesection-drop-active-state',
+  fromVersion: 14,
+  toVersion: 15,
+  appliesTo: 'component-config',
+  apply: dropActiveState,
+};