@motion-proto/live-tokens 0.8.0 → 0.9.0

package/src/editor/component-editor/registry.ts

@@ -21,7 +21,8 @@ import TableEditor, { allTokens as tableTokens } from './TableEditor.svelte';
 import TabBarEditor, { allTokens as tabBarTokens } from './TabBarEditor.svelte';
 import TooltipEditor, { allTokens as tooltipTokens } from './TooltipEditor.svelte';
 
-export type ComponentId =
+/** Internal narrowed union of the first-party component ids. Not exposed publicly. */
+type BuiltInComponentId =
   | 'segmentedcontrol'
   | 'button'
   | 'notification'
@@ -41,6 +42,13 @@ export type ComponentId =
   | 'tooltip'
   | 'progressbar';
 
+/**
+ * Public component id type. Widened to `string` because consumers can register
+ * their own components at runtime via `registerComponent()`. Internal code that
+ * needs to narrow to first-party ids can reference `BuiltInComponentId`.
+ */
+export type ComponentId = string;
+
 export interface RegistryEntry {
   /** Canonical id — lowercase, matches the runtime component filename + server scan + `setComponentAlias` key. */
   id: ComponentId;
@@ -54,21 +62,18 @@ export interface RegistryEntry {
   editorComponent: Component<any, any, any>;
   /** Flat token list — the editor's declarative description of its token surface. */
   schema: Token[];
+  /** `'system'` for first-party entries; `'custom'` for entries added via `registerComponent()`. */
+  origin: 'system' | 'custom';
 }
 
 /**
- * Single source of truth for every component editor. Each entry binds the
- * canonical id to its label, icon, source file, editor component, and token
- * schema. Display order in the nav rail is sorted alphabetically by label
- * (see `componentRegistryEntries` below) — order in this object literal does
- * not affect the UI.
- *
- * Adding a component:
- *   1. Author `src/components/<Name>.svelte` (declares CSS vars in `:global(:root)`)
- *   2. Author `src/component-editor/<Name>Editor.svelte` (exports `allTokens` from a `<script context="module">` block)
+ * First-party registry. Frozen; runtime additions go in `customRegistry`.
+ * Adding a first-party component:
+ *   1. Author `src/system/components/<Name>.svelte` (declares CSS vars in `:global(:root)`)
+ *   2. Author `src/editor/component-editor/<Name>Editor.svelte` (exports `allTokens`)
  *   3. Add an entry below.
  */
-export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = Object.freeze({
+const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Object.freeze({
   segmentedcontrol: {
     id: 'segmentedcontrol',
     label: 'Segmented Control',
@@ -76,6 +81,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/SegmentedControl.svelte',
     editorComponent: SegmentedControlEditor,
     schema: segmentedControlTokens,
+    origin: 'system',
   },
   button: {
     id: 'button',
@@ -84,6 +90,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/Button.svelte',
     editorComponent: StandardButtonsEditor,
     schema: buttonTokens,
+    origin: 'system',
   },
   notification: {
     id: 'notification',
@@ -92,6 +99,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/Notification.svelte',
     editorComponent: NotificationEditor,
     schema: notificationTokens,
+    origin: 'system',
   },
   dialog: {
     id: 'dialog',
@@ -100,6 +108,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/Dialog.svelte',
     editorComponent: DialogEditor,
     schema: dialogTokens,
+    origin: 'system',
   },
   radiobutton: {
     id: 'radiobutton',
@@ -108,6 +117,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/RadioButton.svelte',
     editorComponent: RadioButtonEditor,
     schema: radioButtonTokens,
+    origin: 'system',
   },
   card: {
     id: 'card',
@@ -116,6 +126,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/Card.svelte',
     editorComponent: CardEditor,
     schema: cardTokens,
+    origin: 'system',
   },
   badge: {
     id: 'badge',
@@ -124,6 +135,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/Badge.svelte',
     editorComponent: BadgeEditor,
     schema: badgeTokens,
+    origin: 'system',
   },
   callout: {
     id: 'callout',
@@ -132,6 +144,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/Callout.svelte',
     editorComponent: CalloutEditor,
     schema: calloutTokens,
+    origin: 'system',
   },
   cornerbadge: {
     id: 'cornerbadge',
@@ -140,6 +153,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/CornerBadge.svelte',
     editorComponent: CornerBadgeEditor,
     schema: cornerBadgeTokens,
+    origin: 'system',
   },
   image: {
     id: 'image',
@@ -148,6 +162,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/Image.svelte',
     editorComponent: ImageEditor,
     schema: imageTokens,
+    origin: 'system',
   },
   inlineeditactions: {
     id: 'inlineeditactions',
@@ -156,6 +171,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/InlineEditActions.svelte',
     editorComponent: InlineEditActionsEditor,
     schema: inlineEditActionsTokens,
+    origin: 'system',
   },
   menuselect: {
     id: 'menuselect',
@@ -164,6 +180,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/MenuSelect.svelte',
     editorComponent: MenuSelectEditor,
     schema: menuSelectTokens,
+    origin: 'system',
   },
   sectiondivider: {
     id: 'sectiondivider',
@@ -172,6 +189,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/SectionDivider.svelte',
     editorComponent: SectionDividerEditor,
     schema: sectionDividerTokens,
+    origin: 'system',
   },
   collapsiblesection: {
     id: 'collapsiblesection',
@@ -180,6 +198,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/CollapsibleSection.svelte',
     editorComponent: CollapsibleSectionEditor,
     schema: collapsibleSectionTokens,
+    origin: 'system',
   },
   table: {
     id: 'table',
@@ -188,6 +207,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/Table.svelte',
     editorComponent: TableEditor,
     schema: tableTokens,
+    origin: 'system',
   },
   tabbar: {
     id: 'tabbar',
@@ -196,6 +216,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/TabBar.svelte',
     editorComponent: TabBarEditor,
     schema: tabBarTokens,
+    origin: 'system',
   },
   tooltip: {
     id: 'tooltip',
@@ -204,6 +225,7 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/Tooltip.svelte',
     editorComponent: TooltipEditor,
     schema: tooltipTokens,
+    origin: 'system',
   },
   progressbar: {
     id: 'progressbar',
@@ -212,34 +234,89 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/ProgressBar.svelte',
     editorComponent: ProgressBarEditor,
     schema: progressBarTokens,
+    origin: 'system',
   },
 });
 
-/** Display-ordered list of registry entries — sorted alphabetically by label. Iteration order matches the nav rail. */
-export const componentRegistryEntries: ReadonlyArray<RegistryEntry> = Object.freeze(
-  Object.values(componentRegistry).sort((a, b) => a.label.localeCompare(b.label)),
-);
+/** Mutable map of consumer-registered components, populated by `registerComponent()`. */
+const customRegistry = new Map<string, RegistryEntry>();
+
+/** Argument shape for `registerComponent()`. `origin` is set internally to `'custom'`. */
+export type RegisterComponentEntry = Omit<RegistryEntry, 'origin'>;
+
+/**
+ * Register a consumer-authored component at runtime. Call from `main.ts`
+ * before app mount.
+ *
+ * Collision rule: if `entry.id` matches a built-in id, a warning is logged and
+ * the custom entry wins (the custom editor and schema replace the built-in for
+ * the rest of the session).
+ *
+ * Side effect: registers the schema with the editor store so reset-to-default
+ * and sibling-group resolution work for the new component.
+ */
+export function registerComponent(entry: RegisterComponentEntry): void {
+  if (entry.id in builtInRegistry) {
+    console.warn(
+      `[registerComponent] custom component "${entry.id}" overrides a built-in. The custom editor will be used.`,
+    );
+  }
+  const stored: RegistryEntry = { ...entry, origin: 'custom' };
+  customRegistry.set(entry.id, stored);
+  registerComponentSchema(entry.id, entry.schema);
+}
+
+/**
+ * Merged registry: built-ins overlaid with customs (custom wins on id collision).
+ * Recomputed on each call so callers see runtime registrations made after their
+ * own module-load order.
+ */
+export function getComponentRegistry(): Readonly<Record<string, RegistryEntry>> {
+  const merged: Record<string, RegistryEntry> = { ...builtInRegistry };
+  for (const [id, entry] of customRegistry) {
+    merged[id] = entry;
+  }
+  return merged;
+}
 
-/** All canonical component ids, in display order. */
-export const componentIds: ReadonlyArray<ComponentId> = Object.freeze(
-  componentRegistryEntries.map((e) => e.id),
-);
+/**
+ * Display-ordered entries: system first (alphabetical by label), then custom
+ * (alphabetical by label). Iteration order matches the nav rail's grouping.
+ * The nav rail renders a divider between the two groups when customs exist.
+ */
+export function getComponentRegistryEntries(): ReadonlyArray<RegistryEntry> {
+  const merged = getComponentRegistry();
+  const system: RegistryEntry[] = [];
+  const custom: RegistryEntry[] = [];
+  for (const entry of Object.values(merged)) {
+    (entry.origin === 'system' ? system : custom).push(entry);
+  }
+  system.sort((a, b) => a.label.localeCompare(b.label));
+  custom.sort((a, b) => a.label.localeCompare(b.label));
+  return [...system, ...custom];
+}
+
+/** All component ids, in display order. */
+export function getComponentIds(): ReadonlyArray<string> {
+  return getComponentRegistryEntries().map((e) => e.id);
+}
 
-// Eager schema registration. Replaces the side-effect-on-import pattern that
-// each editor module previously used (top-of-script `registerComponentSchema(...)`).
-// Runs once at module load, before any editor instance mounts.
-for (const entry of componentRegistryEntries) {
+// Eager schema registration for built-ins. Customs register lazily inside
+// `registerComponent()` so the store knows about every component before any
+// editor instance mounts.
+for (const entry of Object.values(builtInRegistry)) {
   registerComponentSchema(entry.id, entry.schema);
 }
 
 /**
- * Validate that the server's filesystem scan matches the registry's id list.
+ * Validate that the server's filesystem scan matches the merged registry's id list.
  * Logs a warning when ids drift. Called at boot from the editor page.
  */
 export function validateRegistryAgainstServerScan(serverIds: ReadonlyArray<string>): void {
-  const registrySet = new Set<string>(componentIds);
+  const ids = getComponentIds();
+  const registrySet = new Set<string>(ids);
   const serverSet = new Set<string>(serverIds);
-  const missingOnServer = componentIds.filter((id) => !serverSet.has(id));
+  const missingOnServer = ids.filter((id) => !serverSet.has(id));
   const extraOnServer = serverIds.filter((id) => !registrySet.has(id));
   if (missingOnServer.length > 0) {
     console.warn(

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

@@ -1,13 +1,13 @@
 <script lang="ts">
   import type { ComponentSection } from './componentSectionType';
-  import { defaultSections } from './defaultSections';
+  import { getDefaultSections } from './defaultSections';
 
   interface Props {
     sections?: ComponentSection[];
     selectedComponent?: string;
   }
 
-  let { sections = defaultSections, selectedComponent = sections[0]?.id ?? '' }: Props = $props();
+  let { sections = getDefaultSections(), selectedComponent = sections[0]?.id ?? '' }: Props = $props();
 </script>
 
 <div class="components-container">

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/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/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/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';

package/src/editor/pages/ComponentEditorPage.svelte

@@ -5,7 +5,7 @@
   import ComponentsTab from '../component-editor/scaffolding/ComponentsTab.svelte';
   import ManifestFileManager from '../ui/ManifestFileManager.svelte';
   import { navigate } from '../core/routing/router';
-  import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
+  import { getComponentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../core/components/componentConfigService';
   import { selectedComponent } from '../core/store/editorViewStore';
   import { componentDirty } from '../core/store/editorStore';
@@ -96,7 +96,9 @@
     window.removeEventListener('keydown', handleKeydown);
   });
 
-  const componentNavItems = componentRegistryEntries.map(({ id, label, icon }) => ({ id, label, icon }));
+  const allComponentNavItems = getComponentRegistryEntries().map(({ id, label, icon, origin }) => ({ id, label, icon, origin }));
+  const systemNavItems = allComponentNavItems.filter((i) => i.origin === 'system');
+  const customNavItems = allComponentNavItems.filter((i) => i.origin === 'custom');
 </script>
 
 <!--
@@ -146,7 +148,7 @@
       {/if}
     </div>
     <div class="nav-items">
-      {#each componentNavItems as item}
+      {#each systemNavItems as item}
         <button
           class="nav-item"
           class:active={$selectedComponent === item.id}
@@ -162,6 +164,27 @@
           {/if}
         </button>
       {/each}
+      {#if customNavItems.length > 0}
+        <div class="nav-divider">
+          <span class="nav-divider-label">Custom</span>
+        </div>
+        {#each customNavItems as item}
+          <button
+            class="nav-item"
+            class:active={$selectedComponent === item.id}
+            class:dirty={$componentDirty[item.id]}
+            onmouseenter={(e) => showHint(item.label, e.currentTarget)}
+            onmouseleave={hideHint}
+            onclick={() => selectComponent(item.id)}
+          >
+            <i class={item.icon}></i>
+            <span class="rail-label">{item.label}</span>
+            {#if $componentDirty[item.id]}
+              <span class="dirty-dot" aria-label="Unsaved changes" title="Unsaved changes"></span>
+            {/if}
+          </button>
+        {/each}
+      {/if}
     </div>
     {#if drawerOpen}
       <div class="sidebar-footer">
@@ -331,6 +354,33 @@
     background: black;
   }
 
+  /* Divider between SYSTEM and CUSTOM groups. The horizontal line uses the
+     dimmer border token (sub-element separator), with an uppercase eyebrow
+     label that fades out when the rail is collapsed so the line still reads. */
+  .nav-divider {
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    align-items: center;
+    height: 28px;
+    margin-top: var(--ui-space-8);
+    border-top: 1px solid var(--ui-border-low);
+  }
+
+  .nav-divider-label {
+    grid-column: 2;
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    opacity: 0;
+    transition: opacity 180ms ease;
+  }
+
+  .components-shell.rail-expanded .nav-divider-label {
+    opacity: 1;
+  }
+
   .sidebar-footer {
     flex-shrink: 0;
     margin-top: auto;

package/src/editor/pages/EditorShell.svelte

@@ -13,7 +13,7 @@
   import { editorState } from '../core/store/editorStore';
   import { editorView, sidebarCondensed, selectedComponent } from '../core/store/editorViewStore';
   import { componentDirty } from '../core/store/editorStore';
-  import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
+  import { getComponentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../core/components/componentConfigService';
 
   const tokenNavItems = [
@@ -29,7 +29,9 @@
     { id: 'utility-tokens', label: 'Utility Tokens', icon: 'fas fa-sliders' }
   ];
 
-  const componentNavItems = componentRegistryEntries.map(({ id, label, icon }) => ({ id, label, icon }));
+  const allComponentNavItems = getComponentRegistryEntries().map(({ id, label, icon, origin }) => ({ id, label, icon, origin }));
+  const systemNavItems = allComponentNavItems.filter((i) => i.origin === 'system');
+  const customNavItems = allComponentNavItems.filter((i) => i.origin === 'custom');
 
   let selectedTokenSection: string | null = $state(null);
   let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = $state('idle');
@@ -149,7 +151,7 @@
       {/if}
     {:else}
       <div class="nav-items">
-        {#each componentNavItems as item}
+        {#each systemNavItems as item}
           <button
             class="nav-item"
             class:active={$selectedComponent === item.id}
@@ -165,6 +167,27 @@
             {/if}
           </button>
         {/each}
+        {#if customNavItems.length > 0}
+          <div class="nav-divider">
+            <span class="nav-divider-label">Custom</span>
+          </div>
+          {#each customNavItems as item}
+            <button
+              class="nav-item"
+              class:active={$selectedComponent === item.id}
+              class:dirty={$componentDirty[item.id]}
+              onmouseenter={(e) => showHint(item.label, e.currentTarget)}
+              onmouseleave={hideHint}
+              onclick={() => selectComponent(item.id)}
+            >
+              <i class={item.icon}></i>
+              <span class="nav-label">{item.label}</span>
+              {#if $componentDirty[item.id]}
+                <span class="dirty-dot" aria-label="Unsaved changes" title="Unsaved changes"></span>
+              {/if}
+            </button>
+          {/each}
+        {/if}
       </div>
       {#if !condensed}
         <div class="sidebar-footer">
@@ -248,6 +271,33 @@
     flex-shrink: 0;
   }
 
+  /* Divider between SYSTEM and CUSTOM groups. The horizontal line uses the
+     dimmer border token (sub-element separator), with an uppercase eyebrow
+     label that fades out when the rail is condensed so the line still reads. */
+  .nav-divider {
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    align-items: center;
+    height: 28px;
+    margin-top: var(--ui-space-8);
+    border-top: 1px solid var(--ui-border-low);
+  }
+
+  .nav-divider-label {
+    grid-column: 2;
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    opacity: 1;
+    transition: opacity 180ms ease;
+  }
+
+  .layout.condensed .nav-divider-label {
+    opacity: 0;
+  }
+
   .nav-item {
     position: relative;
     display: grid;

package/src/system/components/Dialog.svelte

@@ -2,7 +2,6 @@
   import { createEventDispatcher, tick } from 'svelte';
   import type { Snippet } from 'svelte';
   import Button from './Button.svelte';
-  import { editorState } from '../../editor/core/store/editorStore';
   import type { ButtonVariant, DialogButtonSpec } from './types';
 
   const BUTTON_VARIANTS: readonly ButtonVariant[] = ['primary', 'secondary', 'outline', 'success', 'danger', 'warning'];
@@ -10,6 +9,18 @@
     return v && (BUTTON_VARIANTS as readonly string[]).includes(v) ? (v as ButtonVariant) : fallback;
   }
 
+  // Read the configured Button variants from :root. The editor mutates these
+  // inline on documentElement via cssVarSync; a MutationObserver picks the
+  // changes up without coupling this component to the editor module graph.
+  // In production the var lives in the generated stylesheet and never
+  // changes, so the observer registers but never fires.
+  function readCssVar(name: string): string {
+    if (typeof document === 'undefined') return '';
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  }
+  let confirmVarValue = $state(readCssVar('--dialog-confirm-variant'));
+  let cancelVarValue = $state(readCssVar('--dialog-cancel-variant'));
+
   interface Props {
     show?: boolean;
     title?: string;
@@ -39,9 +50,8 @@
     children,
   }: Props = $props();
 
-  let configuredConfig = $derived($editorState.components.dialog?.config ?? {});
-  let effectiveConfirmVariant = $derived(confirm?.variant ?? asVariant(configuredConfig['--dialog-confirm-variant'] as string | undefined, 'primary'));
-  let effectiveCancelVariant = $derived(cancel?.variant ?? asVariant(configuredConfig['--dialog-cancel-variant'] as string | undefined, 'outline'));
+  let effectiveConfirmVariant = $derived(confirm?.variant ?? asVariant(confirmVarValue, 'primary'));
+  let effectiveCancelVariant = $derived(cancel?.variant ?? asVariant(cancelVarValue, 'outline'));
 
   // Dual-fire bridge — see Button.svelte for the deprecation timeline.
   const dispatch = createEventDispatcher<{
@@ -52,6 +62,16 @@
   let cancelButtonRef: HTMLButtonElement = $state()!;
   let closeButtonRef: HTMLButtonElement = $state()!;
 
+  $effect(() => {
+    if (typeof document === 'undefined') return;
+    const obs = new MutationObserver(() => {
+      confirmVarValue = readCssVar('--dialog-confirm-variant');
+      cancelVarValue = readCssVar('--dialog-cancel-variant');
+    });
+    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
+    return () => obs.disconnect();
+  });
+
   // Focus the primary button when dialog opens (skip in inline mode so the editor doesn't steal focus).
   $effect(() => {
     if (show && !inline) {