@motion-proto/live-tokens 0.8.0 → 0.10.0

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/componentSources.ts

@@ -1,9 +1,9 @@
-import { componentRegistry } from '../registry';
+import { getComponentRegistry } from '../registry';
 
 /**
  * Resolve a component id to its runtime source file path. Reads from the
- * single component registry — no parallel mapping to maintain.
+ * merged component registry (built-ins + runtime registrations).
  */
 export function componentSourceFile(component: string): string {
-  return componentRegistry[component as keyof typeof componentRegistry]?.sourceFile ?? '';
+  return getComponentRegistry()[component]?.sourceFile ?? '';
 }

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

@@ -1,16 +1,21 @@
 import type { ComponentSection } from './componentSectionType';
-import { componentRegistryEntries } from '../registry';
+import { getComponentRegistryEntries } from '../registry';
 
 /**
- * Default editor sections — derived from the single component registry. Each
+ * Default editor sections — derived from the merged component registry. Each
  * section's `id` is the canonical lowercase component id (matches the runtime
- * filename, server scan, and `setComponentAlias` key); `label` is the
- * display string; `component` is the editor Svelte component.
+ * filename, server scan, and `setComponentAlias` key); `label` is the display
+ * string; `component` is the editor Svelte component.
  *
- * To add or reorder sections, edit `src/component-editor/registry.ts`.
+ * Recomputed on each call so consumer-registered components (added via
+ * `registerComponent()`) appear after the first-party set in iteration order.
+ *
+ * To add or reorder first-party sections, edit `src/editor/component-editor/registry.ts`.
  */
-export const defaultSections: ComponentSection[] = componentRegistryEntries.map((entry) => ({
-  id: entry.id,
-  label: entry.label,
-  component: entry.editorComponent,
-}));
+export function getDefaultSections(): ComponentSection[] {
+  return getComponentRegistryEntries().map((entry) => ({
+    id: entry.id,
+    label: entry.label,
+    component: entry.editorComponent,
+  }));
+}

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/componentConfigKeys.ts

@@ -4,9 +4,11 @@
 // migration that splits legacy single-bucket aliases into the new
 // {aliases, config} shape.
 //
-// What goes here: literal-valued knobs that don't translate to CSS vars
-// (e.g. Dialog's confirm/cancel variant string is consumed by Dialog.svelte
-// via `$editorState`, not via CSS cascade).
+// What goes here: literal-valued knobs that live in the config bucket rather
+// than the alias bucket. Some are runtime CSS values consumed by live
+// components via the cascade (see CASCADING_COMPONENT_CONFIG_KEYS below);
+// others are editor-only metadata that drive alias rewrites without ever
+// reaching :root.
 //
 // What does NOT go here: aliases whose values are themselves CSS-var refs
 // — even if the value space is constrained (e.g. `--button-shimmer` →
@@ -25,3 +27,12 @@ export const KNOWN_COMPONENT_CONFIG_KEYS: ReadonlySet<string> = new Set([
   '--sectiondivider-md-color-family',
   '--sectiondivider-sm-color-family',
 ]);
+
+// Subset of KNOWN_COMPONENT_CONFIG_KEYS that the renderer emits to :root as
+// CSS vars so live components can read them via the cascade. Editor-only
+// metadata (e.g. `--sectiondivider-*-color-family`, which drives an alias
+// rewrite rather than a runtime value) is intentionally excluded.
+export const CASCADING_COMPONENT_CONFIG_KEYS: ReadonlySet<string> = new Set([
+  '--dialog-confirm-variant',
+  '--dialog-cancel-variant',
+]);

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,
+};

package/src/editor/core/themes/migrations/index.ts

@@ -45,6 +45,11 @@ import { componentMigration_2026_05_19_sectiondividerRichGradient } from './2026
 import { componentMigration_2026_05_20_sectiondividerSlimVariants } from './2026-05-20-sectiondivider-slim-variants';
 import { componentMigration_2026_05_21_sectiondividerSpacingToPadding } from './2026-05-21-sectiondivider-spacing-to-padding';
 import { componentMigration_2026_05_22_sectiondividerIntrinsicsToCss } from './2026-05-22-sectiondivider-intrinsics-to-css';
+import { componentMigration_2026_05_24_segmentedcontrolDividerInset } from './2026-05-24-segmentedcontrol-divider-inset';
+import { componentMigration_2026_05_24_promoteStateSharedTokens } from './2026-05-24-promote-state-shared-tokens';
+import { componentMigration_2026_05_24_progressbarCollapseVariants } from './2026-05-24-progressbar-collapse-variants';
+import { componentMigration_2026_05_24_collapsiblesectionDropActiveState } from './2026-05-24-collapsiblesection-drop-active-state';
+import { componentMigration_2026_05_25_cornerbadgeFlattenVariants } from './2026-05-25-cornerbadge-flatten-variants';
 
 /**
  * Registered migrations. Order in this array does not matter — the runner
@@ -64,6 +69,11 @@ export const MIGRATIONS: Migration[] = [
   componentMigration_2026_05_20_sectiondividerSlimVariants,
   componentMigration_2026_05_21_sectiondividerSpacingToPadding,
   componentMigration_2026_05_22_sectiondividerIntrinsicsToCss,
+  componentMigration_2026_05_24_segmentedcontrolDividerInset,
+  componentMigration_2026_05_24_promoteStateSharedTokens,
+  componentMigration_2026_05_24_progressbarCollapseVariants,
+  componentMigration_2026_05_24_collapsiblesectionDropActiveState,
+  componentMigration_2026_05_25_cornerbadgeFlattenVariants,
 ];
 
 function countFor(kind: 'theme' | 'component-config'): number {

package/src/editor/core/themes/slices/components.ts

@@ -33,6 +33,7 @@ import { writable, derived, get, type Readable } from 'svelte/store';
 import type { CssVarRef, EditorState } from '../../store/editorTypes';
 import { store, mutate } from '../../store/editorCore';
 import { formatGradientValue } from './gradients';
+import { CASCADING_COMPONENT_CONFIG_KEYS } from '../../components/componentConfigKeys';
 
 const EMPTY_COMPONENT_BASELINE = JSON.stringify({ aliases: {}, config: {} });
 
@@ -48,6 +49,11 @@ export function componentsToVars(components: EditorState['components']): Record<
       else if (ref.kind === 'literal') out[varName] = ref.value;
       else out[varName] = formatGradientValue(ref.value);
     }
+    for (const [key, value] of Object.entries(slice.config)) {
+      if (CASCADING_COMPONENT_CONFIG_KEYS.has(key) && typeof value === 'string') {
+        out[key] = value;
+      }
+    }
   }
   return out;
 }
@@ -56,6 +62,9 @@ export function getComponentOwnedVarNames(state: EditorState): string[] {
   const names: string[] = [];
   for (const slice of Object.values(state.components)) {
     for (const name of Object.keys(slice.aliases)) names.push(name);
+    for (const key of Object.keys(slice.config)) {
+      if (CASCADING_COMPONENT_CONFIG_KEYS.has(key)) names.push(key);
+    }
   }
   return names;
 }

package/src/editor/core/themes/themeInit.ts

@@ -5,6 +5,7 @@ import { applyFontSources, applyFontStacks } from '../fonts/fontLoader';
 import { loadFromFile, seedComponentsFromApi } from '../store/editorStore';
 import { getActiveComponentConfig } from '../components/componentConfigService';
 import { safeFetch } from '../storage/storage';
+import { API_BASE } from '../storage/apiBase';
 
 interface ComponentSummaryDto {
   name: string;
@@ -34,7 +35,7 @@ interface ListComponentsDto {
  * `safeFetch` (instead of empty try/catch) to make the silence intentional.
  */
 export async function initializeTheme(): Promise<void> {
-  const theme = await safeFetch<Theme>('/api/themes/active');
+  const theme = await safeFetch<Theme>(`${API_BASE}/themes/active`);
   if (theme) {
     migrateThemeFonts(theme);
     loadFromFile(theme);
@@ -48,7 +49,7 @@ export async function initializeTheme(): Promise<void> {
     activeFileName.set(fileName);
   }
 
-  const list = await safeFetch<ListComponentsDto>('/api/component-configs');
+  const list = await safeFetch<ListComponentsDto>(`${API_BASE}/component-configs`);
   if (list && Array.isArray(list.components)) {
     const configs: Record<
       string,

package/src/editor/core/themes/themeService.ts

@@ -5,6 +5,7 @@ import {
   versionedFileResource,
   sanitizeFileName as sanitizeFileNameImpl,
 } from '../storage/files/versionedFileResourceClient';
+import { API_BASE } from '../storage/apiBase';
 import { loadFromFile as loadEditorState, toTheme, markSaved } from '../store/editorStore';
 import { activeFileName } from '../store/editorConfigStore';
 import { applyFontSources, applyFontStacks } from '../fonts/fontLoader';
@@ -12,7 +13,7 @@ import { migrateThemeFonts } from '../fonts/fontMigration';
 
 // ── API helpers ──────────────────────────────────────────────
 //
-// All theme CRUD goes through `versionedFileResource('/api/themes')` —
+// All theme CRUD goes through `versionedFileResource(`${API_BASE}/themes`)` —
 // shared with `componentConfigService`'s per-component clients. Theme-specific
 // response shapes (ThemeMeta list payload, ProductionInfo) are layered on top
 // via the generic type parameters.
@@ -25,7 +26,7 @@ export interface ProductionInfo {
 }
 
 const themeResource = versionedFileResource<Theme, ThemeMeta, ProductionInfo>({
-  baseUrl: '/api/themes',
+  baseUrl: `${API_BASE}/themes`,
 });
 
 export async function listThemes(): Promise<ThemeMeta[]> {

package/src/editor/index.ts

@@ -7,7 +7,13 @@ export { configureEditor, storageKey } from './core/store/editorConfig';
 export { activeFileName } from './core/store/editorConfigStore';
 export { init as initRouter, route, navigate } from './core/routing/router';
 export { init as initCssVarSync } from './core/cssVarSync';
-export { init as initEditorStore } from './core/store/editorStore';
+export {
+  init as initEditorStore,
+  editorState,
+  setComponentAlias,
+  setComponentConfig,
+  registerComponentSchema,
+} from './core/store/editorStore';
 
 export { setCssVar, removeCssVar } from './core/cssVarSync';
 
@@ -67,3 +73,6 @@ export { hexToOklch, oklchToHex, gamutClamp } from './core/palettes/oklch';
 export type { Oklch } from './core/palettes/oklch';
 
 export { initializeTheme } from './core/themes/themeInit';
+
+export { registerComponent } from './component-editor/registry';
+export type { RegisterComponentEntry, RegistryEntry, ComponentId } from './component-editor/registry';