@motion-proto/live-tokens 0.9.0 → 0.10.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/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/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,
+};

package/src/editor/core/themes/migrations/2026-05-24-progressbar-collapse-variants.ts

@@ -0,0 +1,41 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-24, progressbar only): ProgressBar
+ * collapsed from a per-variant token namespace (primary/success/warning/
+ * danger/info) to a single token set. Fill color is now a runtime `fill`
+ * prop on the consumer side, not a variant axis.
+ *
+ * Strategy: keep the `primary` namespace's values as the canonical defaults
+ * (rename `--progressbar-primary-X` → `--progressbar-X`); drop the four
+ * remaining variant namespaces entirely. Consumers that previously selected
+ * a non-primary variant lose their variant-specific surface/border/fill
+ * customizations and fall back to the merged single set.
+ */
+const PRIMARY_PREFIX = '--progressbar-primary-';
+const NEW_PREFIX = '--progressbar-';
+const DROP_PREFIXES = [
+  '--progressbar-success-',
+  '--progressbar-warning-',
+  '--progressbar-danger-',
+  '--progressbar-info-',
+];
+
+export const componentMigration_2026_05_24_progressbarCollapseVariants: Migration = {
+  id: '2026-05-24-progressbar-collapse-variants',
+  fromVersion: 13,
+  toVersion: 14,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'progressbar') return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [oldKey, value] of Object.entries(rawVars)) {
+      if (DROP_PREFIXES.some((p) => oldKey.startsWith(p))) continue;
+      const key = oldKey.startsWith(PRIMARY_PREFIX)
+        ? NEW_PREFIX + oldKey.slice(PRIMARY_PREFIX.length)
+        : oldKey;
+      if (!(key in out)) out[key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-05-24-promote-state-shared-tokens.ts

@@ -0,0 +1,59 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-24, button + segmentedcontrol):
+ *
+ * Promotes shape/icon-size properties that don't actually vary per state into
+ * their own "base" part. The editor's per-state shape rows were dead UI — the
+ * runtime treated them as separate tokens that were always linked anyway. The
+ * runtime CSS now reads the default-state token in hover/disabled rules, so
+ * the per-state tokens are dropped entirely.
+ *
+ * Saved per-state overrides are dropped (rare case; users re-customize once).
+ * The default-state value remains the authoritative one.
+ *
+ *   button         drops --button-{v}-{hover|disabled}-{padding|radius|border-width}
+ *                  for v in primary/secondary/outline/success/danger/warning.
+ *
+ *   segmentedcontrol drops --segmentedcontrol-{selected|option-hover|disabled}-icon-size.
+ */
+
+const BUTTON_VARIANTS = ['primary', 'secondary', 'outline', 'success', 'danger', 'warning'] as const;
+const BUTTON_STATES = ['hover', 'disabled'] as const;
+const BUTTON_PROPS = ['padding', 'radius', 'border-width'] as const;
+
+const buttonDeadKeys = new Set<string>(
+  BUTTON_VARIANTS.flatMap((v) =>
+    BUTTON_STATES.flatMap((s) =>
+      BUTTON_PROPS.map((p) => `--button-${v}-${s}-${p}`),
+    ),
+  ),
+);
+
+const segmentedcontrolDeadKeys = new Set<string>([
+  '--segmentedcontrol-selected-icon-size',
+  '--segmentedcontrol-option-hover-icon-size',
+  '--segmentedcontrol-disabled-icon-size',
+]);
+
+export const componentMigration_2026_05_24_promoteStateSharedTokens: Migration = {
+  id: '2026-05-24-promote-state-shared-tokens',
+  fromVersion: 12,
+  toVersion: 13,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    const dead =
+      meta.component === 'button'
+        ? buttonDeadKeys
+        : meta.component === 'segmentedcontrol'
+          ? segmentedcontrolDeadKeys
+          : null;
+    if (!dead) return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (dead.has(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-05-24-segmentedcontrol-divider-inset.ts

@@ -0,0 +1,29 @@
+import type { Migration } from './index';
+
+/**
+ * Component-config migration (2026-05-24, segmentedcontrol only):
+ * `--segmentedcontrol-divider-height` was retired in favor of
+ * `--segmentedcontrol-divider-inset`. The old token set a percentage / pixel
+ * height on a centered flex item; with `Full` (100%) it collapsed to zero in
+ * auto-sized inline-flex parents. The new token is `margin-block` trimmed
+ * from a stretched divider, so Full = 0 inset = bar-height divider.
+ *
+ * Value semantic flipped (larger old value meant taller divider; larger new
+ * value means shorter divider), so the saved customization is dropped rather
+ * than copied across. Users fall back to the new default and re-pick once.
+ */
+export const componentMigration_2026_05_24_segmentedcontrolDividerInset: Migration = {
+  id: '2026-05-24-segmentedcontrol-divider-inset',
+  fromVersion: 11,
+  toVersion: 12,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    if (meta.component !== 'segmentedcontrol') return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (key === '--segmentedcontrol-divider-height') continue;
+      out[key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-05-25-cornerbadge-flatten-variants.ts

@@ -0,0 +1,46 @@
+import type { Migration } from './index';
+
+/**
+ * 2026-05-25: drop the per-variant token axis from cornerbadge.
+ *
+ * CornerBadge's "variants" carried only shape + spacing + type aliases — never
+ * colors (those come from the composed Badge). With every variant's defaults
+ * identical, the axis was 10× duplication that the editor had to tile across
+ * a variant strip for no semantic gain. Collapsing to a single flat token set
+ * removes the strip and the duplication.
+ *
+ * For each `--corner-badge-{variant}-{prop}`, fold into `--corner-badge-{prop}`.
+ * First-occurrence wins on conflict — defaults were uniform so this is a no-op
+ * in the typical case, and any tuned divergence is rare enough that picking
+ * one is better than silently averaging.
+ */
+const VARIANTS = ['primary', 'accent', 'neutral', 'alternate', 'canvas', 'special', 'success', 'warning', 'danger', 'info'] as const;
+const RE = new RegExp(`^--corner-badge-(${VARIANTS.join('|')})-(.+)$`);
+
+function flattenVariants(rawVars: Record<string, string>, meta: { component?: string }): Record<string, string> {
+  if (meta.component !== 'cornerbadge') return rawVars;
+  const out: Record<string, string> = {};
+  const collected: Map<string, string> = new Map();
+  for (const [key, value] of Object.entries(rawVars)) {
+    const m = key.match(RE);
+    if (m) {
+      const prop = m[2];
+      if (!collected.has(prop)) collected.set(prop, value);
+      continue;
+    }
+    out[key] = value;
+  }
+  for (const [prop, value] of collected) {
+    const flatKey = `--corner-badge-${prop}`;
+    if (!(flatKey in out)) out[flatKey] = value;
+  }
+  return out;
+}
+
+export const componentMigration_2026_05_25_cornerbadgeFlattenVariants: Migration = {
+  id: '2026-05-25-cornerbadge-flatten-variants',
+  fromVersion: 15,
+  toVersion: 16,
+  appliesTo: 'component-config',
+  apply: flattenVariants,
+};