@motion-proto/live-tokens 0.94.3 → 0.96.0

package/src/demo/sections/SectionHero.svelte

@@ -29,7 +29,7 @@
 
     <p class="hero-tagline">
       Design system authoring for Svelte.<br />
-      Edit tokens and components directly in the browser.<br />Ship plain CSS.
+      Edit tokens and components directly in the browser.<br class="desktop-break" /> Ship plain CSS.
     </p>
   </div>
 
@@ -63,18 +63,20 @@
   .hero {
     grid-column: 1 / -1;
     position: relative;
-    padding: var(--space-48) 0 var(--space-16);
+    padding: var(--space-48) 0 0;
     display: grid;
-    grid-template-columns: repeat(var(--columns-count), 1fr);
-    column-gap: var(--columns-gutter);
+    grid-template-columns: subgrid;
   }
 
+  /* The title runs across the kite on the full content width; the tagline
+     keeps the first five columns. */
   .hero-text {
-    grid-column: 2 / span 5;
+    grid-column: var(--kit-content);
     grid-row: 1;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-16);
+    display: grid;
+    grid-template-columns: subgrid;
+    align-content: start;
+    row-gap: var(--space-16);
     position: relative;
     padding: var(--space-96) 0 0;
   }
@@ -89,36 +91,37 @@
 
   .hero-title {
     font-family: var(--font-display);
-    font-size: var(--font-size-7xl);
+    font-size: var(--display-xl-font-size);
     font-weight: var(--font-weight-semibold);
     font-variation-settings: 'opsz' 144, 'SOFT' 30;
     color: var(--text-primary);
     line-height: .9;
     margin: 0;
+    grid-column: 1 / -1;
   }
 
   .hero-italic {
     font-family: var(--heading-xl-font-family);
-    font-size: var(--font-size-6xl);
+    font-size: var(--display-lg-font-size);
     font-weight: var(--font-weight-normal);
     color: var(--text-brand);
     font-variation-settings: 'opsz' 144, 'SOFT' 100;
-    white-space: nowrap;
   }
 
   .hero-tagline {
     font-family: var(--body-md-font-family);
-    font-size: var(--font-size-2xl);
+    font-size: var(--body-2xl-font-size);
     color: var(--text-primary);
     line-height: 1.2;
-    max-width: 48rem;
+    grid-column: 1 / span 5;
     margin: var(--space-8) 0 0;
+    text-wrap: pretty;
   }
 
   /* One row: the CTAs on the left rail, the credits on the right, sharing a
      top edge so the buttons sit on the brand-mark line. */
   .hero-actions {
-    grid-column: 2 / -2;
+    grid-column: var(--kit-content);
     grid-row: 2;
     display: grid;
     grid-template-columns: max-content 1fr;
@@ -148,7 +151,7 @@
 
   .hero-byline {
     font-family: var(--font-sans);
-    font-size: var(--font-size-md);
+    font-size: var(--body-md-font-size);
     font-weight: var(--font-weight-normal);
     line-height: var(--line-height-normal);
     color: var(--text-secondary);
@@ -164,20 +167,31 @@
     text-decoration: underline;
   }
 
-  @media (max-width: 960px) {
-    .hero-kite {
-      grid-column: 1 / -1;
+  @media (max-width: 1200px) {
+    /* Stacked, the illustration sits between the title and the tagline, so the
+       wrapper steps aside and each takes its own row of the hero grid. */
+    .hero-text {
+      display: contents;
+    }
+    .hero-title {
       grid-row: 1;
-      height: 28rem;
     }
-    .hero-text {
+    .hero-kite {
       grid-column: 1 / -1;
       grid-row: 2;
-      padding: 0;
+      height: 28rem;
+      margin-top: var(--space-32);
     }
-    .hero-actions {
+    .hero-tagline {
       grid-column: 1 / -1;
       grid-row: 3;
+      margin-top: var(--space-16);
+    }
+    .desktop-break {
+      display: none;
+    }
+    .hero-actions {
+      grid-row: 4;
       grid-template-columns: minmax(0, 1fr);
       row-gap: var(--space-16);
       margin-top: var(--space-12);
@@ -189,9 +203,15 @@
     }
   }
 
+  /* A phone wraps the second line, so the title steps up a size and the two
+     lines get a gap to tell them apart. */
   @media (max-width: 600px) {
     .hero-title {
-      font-size: var(--font-size-5xl);
+      font-size: var(--display-2xl-font-size);
+    }
+    .hero-italic {
+      display: block;
+      margin-top: var(--space-16);
     }
     .hero-controls {
       grid-template-columns: minmax(0, 1fr);

package/src/demo/sections/SectionKit.svelte

@@ -2,11 +2,15 @@
   import Button from '../../system/components/Button.svelte';
   import SectionDivider from '../../system/components/SectionDivider.svelte';
   import SegmentedControl from '../../system/components/SegmentedControl.svelte';
+  import { MediaQuery } from 'svelte/reactivity';
   import Panel from '../../system/components/Panel.svelte';
   import Section from '../Section.svelte';
 
   let { prose = true }: { prose?: boolean } = $props();
 
+  // Matches the demo's phone breakpoint in Demo.svelte.
+  const phone = new MediaQuery('max-width: 600px');
+
   type Override = 'shape' | 'color';
 
   let shape = $state(false);
@@ -35,39 +39,98 @@
     return out;
   })();
 
-  const colorOverride: Record<string, string> = {
-    '--button-primary-surface': 'var(--surface-special-high)',
-    '--button-primary-border': 'var(--border-special)',
-    '--button-primary-hover-surface': 'var(--surface-special-higher)',
-    '--button-primary-hover-border': 'var(--border-special-strong)',
-
-    '--button-outline-border': 'var(--border-special)',
-    '--button-outline-text': 'var(--text-special)',
-    '--button-outline-hover-border': 'var(--border-special-strong)',
-
-    '--button-success-surface': 'var(--surface-accent-low)',
-    '--button-success-border': 'var(--border-accent)',
-    '--button-success-text': 'var(--text-accent)',
-    '--button-success-hover-surface': 'var(--surface-accent-higher)',
-    '--button-success-hover-border': 'var(--border-accent-strong)',
-
-    '--button-warning-surface': 'var(--surface-info-low)',
-    '--button-warning-border': 'var(--border-info)',
-    '--button-warning-text': 'var(--text-info)',
-    '--button-warning-hover-surface': 'var(--surface-info-high)',
-    '--button-warning-hover-border': 'var(--border-info-medium)',
-
-    '--button-danger-surface': 'var(--surface-brand-low)',
-    '--button-danger-border': 'var(--border-brand)',
-    '--button-danger-text': 'var(--text-brand)',
-    '--button-danger-hover-surface': 'var(--surface-brand-high)',
-    '--button-danger-hover-border': 'var(--border-brand-medium)',
-  };
+  const FAMILIES = ['brand', 'accent', 'special', 'info', 'success', 'warning', 'danger'] as const;
+  type Family = (typeof FAMILIES)[number];
+  // The family each swapped variant paints from. Outline follows primary.
+  const SOURCES = { primary: 'brand', success: 'success', warning: 'warning', danger: 'danger' } as const;
+  type Swapped = keyof typeof SOURCES;
+  // Themes can give two families near-identical hues (Autumn's warning and
+  // accent share one), so a fixed swap can land on the colour it replaces.
+  const MIN_HUE_SHIFT = 60;
+  const SAME_HUE = 15;
+
+  let colorMap = $state<Record<Swapped, Family> | null>(null);
+  let colorStep = 0;
+
+  function familyHues(): Record<Family, number> {
+    const probe = document.createElement('span');
+    document.body.appendChild(probe);
+    const hues = {} as Record<Family, number>;
+    for (const family of FAMILIES) {
+      probe.style.color = `var(--color-${family}-500)`;
+      hues[family] = Number(/oklch\(\S+ \S+ ([\d.]+)/.exec(getComputedStyle(probe).color)?.[1] ?? 0);
+    }
+    probe.remove();
+    return hues;
+  }
+
+  function hueGap(a: number, b: number): number {
+    const d = Math.abs(a - b) % 360;
+    return Math.min(d, 360 - d);
+  }
+
+  /** Each variant takes a family far enough round the wheel from its own,
+   *  on a hue no other variant has where the theme has enough, rotated by
+   *  `step`. Hue, not family: two families can share one. */
+  function pickColorMap(step: number): Record<Swapped, Family> {
+    const hues = familyHues();
+    const used: number[] = [];
+    const map = {} as Record<Swapped, Family>;
+    for (const [variant, source] of Object.entries(SOURCES) as [Swapped, Family][]) {
+      const byGap = FAMILIES.filter((f) => f !== source).sort((a, b) => hueGap(hues[b], hues[source]) - hueGap(hues[a], hues[source]));
+      const far = byGap.filter((f) => hueGap(hues[f], hues[source]) >= MIN_HUE_SHIFT);
+      const pool = far.length > 0 ? far : byGap.slice(0, 1);
+      const rotated = pool.map((_, i) => pool[(i + step) % pool.length]);
+      map[variant] = rotated.find((f) => used.every((h) => hueGap(h, hues[f]) >= SAME_HUE)) ?? rotated[0];
+      used.push(hues[map[variant]]);
+    }
+    return map;
+  }
+
+  function nextColorMap(): Record<Swapped, Family> {
+    const current = JSON.stringify(colorMap);
+    for (let tries = 0; tries < FAMILIES.length; tries++) {
+      const map = pickColorMap(++colorStep);
+      if (JSON.stringify(map) !== current) return map;
+    }
+    return pickColorMap(colorStep);
+  }
+
+  function colorOverride({ primary: p, success: s, warning: w, danger: d }: Record<Swapped, Family>): Record<string, string> {
+    return {
+      '--button-primary-surface': `var(--surface-${p}-high)`,
+      '--button-primary-border': `var(--border-${p})`,
+      '--button-primary-hover-surface': `var(--surface-${p}-higher)`,
+      '--button-primary-hover-border': `var(--border-${p}-strong)`,
+
+      '--button-outline-border': `var(--border-${p})`,
+      '--button-outline-text': `var(--text-${p})`,
+      '--button-outline-hover-border': `var(--border-${p}-strong)`,
+
+      '--button-success-surface': `var(--surface-${s}-low)`,
+      '--button-success-border': `var(--border-${s})`,
+      '--button-success-text': `var(--text-${s})`,
+      '--button-success-hover-surface': `var(--surface-${s}-higher)`,
+      '--button-success-hover-border': `var(--border-${s}-strong)`,
+
+      '--button-warning-surface': `var(--surface-${w}-low)`,
+      '--button-warning-border': `var(--border-${w})`,
+      '--button-warning-text': `var(--text-${w})`,
+      '--button-warning-hover-surface': `var(--surface-${w}-high)`,
+      '--button-warning-hover-border': `var(--border-${w}-medium)`,
+
+      '--button-danger-surface': `var(--surface-${d}-low)`,
+      '--button-danger-border': `var(--border-${d})`,
+      '--button-danger-text': `var(--text-${d})`,
+      '--button-danger-hover-surface': `var(--surface-${d}-high)`,
+      '--button-danger-hover-border': `var(--border-${d}-medium)`,
+    };
+  }
 
   let stageStyle = $derived.by(() => {
     const merged: Record<string, string> = {};
     if (shape) Object.assign(merged, shapeOverride);
-    if (color) Object.assign(merged, colorOverride);
+    if (color && colorMap) Object.assign(merged, colorOverride(colorMap));
     return Object.entries(merged)
       .map(([k, v]) => `${k}: ${v}`)
       .join('; ');
@@ -96,9 +159,11 @@
       lastApplied = shape ? 'shape' : color ? 'color' : null;
       return;
     }
+    // Every press of Color is a new swap, so it never toggles back off.
     if (v === 'color') {
-      color = !color;
-      lastApplied = color ? 'color' : shape ? 'shape' : null;
+      colorMap = nextColorMap();
+      color = true;
+      lastApplied = 'color';
     }
   }
 </script>
@@ -156,7 +221,7 @@
     <div class="swap-block">
       <div class="swap-control">
         <SectionDivider title="Swap tokens with a click" variant="sm" />
-        <SegmentedControl {segments} value={activeSegment} onchange={handleSelect} />
+        <SegmentedControl {segments} value={activeSegment} onchange={handleSelect} size={phone.current ? 'small' : 'default'} />
       </div>
 
       <Panel style={stageStyle}>
@@ -184,7 +249,7 @@
      columns and the row stops at column 9, leaving column 10 open on the right. */
   .kit-grid {
     display: grid;
-    grid-template-columns: repeat(calc(var(--columns-count) - 2), 1fr);
+    grid-template-columns: repeat(calc(var(--columns-count) - 2), minmax(0, 1fr));
     column-gap: var(--columns-gutter);
     row-gap: var(--space-32);
   }
@@ -202,7 +267,8 @@
     padding: 0 0 var(--space-12);
   }
 
-  /* Title, body and icon mirror the Card typography used in the Layers section. */
+  /* Title and body match the Card in the Layers section at desktop sizes, and
+     take the text styles' phone sizes below it. */
   .kit-icon {
     font-size: var(--icon-size-2xl);
     color: var(--text-primary);
@@ -211,7 +277,7 @@
   .kit-title {
     color: var(--text-primary);
     font-family: var(--font-sans);
-    font-size: var(--font-size-2xl);
+    font-size: var(--heading-md-font-size);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-normal);
   }
@@ -219,7 +285,7 @@
   .kit-body {
     padding: var(--space-12) 0 0;
     font-family: var(--font-sans);
-    font-size: var(--font-size-xl);
+    font-size: var(--body-xl-font-size);
     line-height: var(--line-height-normal);
     font-weight: var(--font-weight-normal);
     color: var(--text-secondary);
@@ -270,7 +336,7 @@
     --sketch-hatch-color: var(--color-brand-500);
   }
 
-  /* The head only carries a surface of its own when stacked (see the 960
+  /* The head only carries a surface of its own when stacked (see the 1200
      breakpoint). Here it has none, and --sketch-fill inherits, so without this
      the layer would draw the lead's wash a second time behind the head. */
   .kit-lead .kit-head {
@@ -288,14 +354,14 @@
   }
 
   .kit-lead .kit-title {
-    font-size: var(--font-size-4xl);
+    font-size: var(--heading-xl-font-size);
     font-weight: var(--font-weight-bold);
   }
 
   .kit-lead .kit-body {
     grid-column: 4 / span 6;
     padding: var(--space-32) 0;
-    font-size: var(--font-size-2xl);
+    font-size: var(--body-2xl-font-size);
     color: var(--text-primary);
   }
 
@@ -304,7 +370,7 @@
   .kit-preview {
     margin-top: var(--space-32);
     display: grid;
-    grid-template-columns: repeat(calc(var(--columns-count) - 2), 1fr);
+    grid-template-columns: repeat(calc(var(--columns-count) - 2), minmax(0, 1fr));
     column-gap: var(--columns-gutter);
   }
 
@@ -349,7 +415,7 @@
   .stage-eyebrow {
     align-self: center;
     font-family: var(--font-sans);
-    font-size: var(--font-size-md);
+    font-size: var(--body-md-font-size);
     font-weight: var(--font-weight-medium);
     letter-spacing: var(--letter-spacing-wide);
     text-transform: uppercase;
@@ -373,9 +439,10 @@
     justify-content: center;
   }
 
-  @media (max-width: 960px) {
-    .kit-grid {
-      grid-template-columns: 1fr;
+  @media (max-width: 1200px) {
+    .kit-grid,
+    .kit-preview {
+      grid-template-columns: minmax(0, 1fr);
     }
     .kit-item {
       grid-column: auto;
@@ -404,7 +471,36 @@
     }
     .kit-lead .kit-body {
       padding: var(--space-16) var(--space-20);
-      font-size: var(--font-size-xl);
+      font-size: var(--body-xl-font-size);
+    }
+  }
+
+  /* Phone: the lead's text lines up with the page margin, and the head's tint
+     bleeds out to the screen edges. The tint is a border-image outset, which
+     paints past the box without widening the section. The swap control spans
+     the column, its segments sharing the width. */
+  @media (max-width: 600px) {
+    .swap-control {
+      margin-top: var(--space-8);
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--space-8);
+    }
+    .swap-control :global(.segmented-control) {
+      display: flex;
+    }
+    .swap-control :global(.segment) {
+      flex: 1 1 0;
+      min-width: 0;
+      justify-content: center;
+    }
+    .kit-lead .kit-head {
+      padding-inline: 0;
+      background: none;
+      border-image: conic-gradient(var(--kit-head-tint) 0 0) fill 0 / 0 / 0 var(--columns-margin);
+    }
+    .kit-lead .kit-body {
+      padding-inline: 0;
     }
   }
 </style>

package/src/demo/sections/SectionLayers.svelte

@@ -28,7 +28,7 @@
 <style>
   .arch {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     column-gap: var(--columns-gutter);
     row-gap: var(--space-32);
   }
@@ -46,9 +46,9 @@
     border-radius: var(--radius-sm);
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1200px) {
     .arch {
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(0, 1fr);
     }
   }
 </style>

package/src/demo/sections/SectionOffering.svelte

@@ -17,13 +17,15 @@
   .offering {
     grid-column: 1 / -1;
     display: grid;
-    grid-template-columns: repeat(var(--columns-count), 1fr);
-    column-gap: var(--columns-gutter);
+    grid-template-columns: subgrid;
   }
 
   .offering-quote {
-    grid-column: 3 / -3;
+    grid-column: var(--kit-narrow);
+    justify-self: center;
+    max-width: 24em;
     margin: 0;
+    font-size: var(--heading-lg-font-size);
   }
 
   .offering-quote blockquote {
@@ -38,12 +40,13 @@
 
   .offering-quote p {
     font-family: var(--font-serif);
-    font-size: var(--font-size-3xl);
+    font-size: var(--heading-lg-font-size);
     font-weight: var(--font-weight-normal);
     color: var(--text-primary);
     line-height: 1.2;
     margin: 0;
     hyphens: none;
+    text-wrap: pretty;
     text-indent: -0.55em;
   }
 
@@ -65,29 +68,11 @@
     margin-top: 0;
     font-family: var(--font-serif);
     font-weight: var(--font-weight-normal);
-    font-size: var(--font-size-3xl);
+    font-size: var(--heading-lg-font-size);
     font-variation-settings: 'opsz' 144, 'SOFT' 100;
     letter-spacing: 0.01em;
     color: var(--text-primary);
     text-align: right;
     padding-right: 0.4em;
   }
-
-  @media (max-width: 960px) {
-    .offering-quote {
-      grid-column: 2 / -2;
-    }
-    .offering-quote p {
-      font-size: var(--font-size-xl);
-    }
-  }
-
-  @media (max-width: 600px) {
-    .offering-quote {
-      grid-column: 1 / -1;
-    }
-    .offering-quote p {
-      font-size: var(--font-size-4xl);
-    }
-  }
 </style>

package/src/editor/bootstrap.ts

@@ -18,11 +18,8 @@ import { mount, type Component } from 'svelte';
 import * as cssVarSync from './core/cssVarSync';
 import * as router from './core/routing/router';
 import * as columnsOverlay from './overlay/columnsOverlay';
-import * as editorStore from './core/store/editorStore';
-import * as themeDocumentSync from './core/themes/themeDocumentSync';
-import * as liveStateStream from './core/themes/liveStateStream';
-import { initializeTheme } from './core/themes/themeInit';
-import { registerComponent, type RegisterComponentEntry } from './component-editor/registry';
+import { registerComponent } from './component-editor/registration';
+import type { RegisterComponentEntry } from './component-editor/registry';
 import { registerSketchStyle, type RegisterSketchStyleInput } from './core/sketch/sketchRegistry';
 
 export interface BootLiveTokensOptions {
@@ -43,7 +40,6 @@ export async function bootLiveTokens(
   cssVarSync.init();
   router.init();
   columnsOverlay.init();
-  editorStore.init();
 
   // Before the DEV block: `initializeTheme` recovers the open theme's style by
   // name against the pool, so the pool has to be whole by the time it runs.
@@ -52,6 +48,16 @@ export async function bootLiveTokens(
   }
 
   if (import.meta.env.DEV) {
+    // Imported here, never statically, so a build drops the editor. The
+    // registry alone imports every shipped component and editor.
+    const [editorStore, themeDocumentSync, liveStateStream, { initializeTheme }] = await Promise.all([
+      import('./core/store/editorStore'),
+      import('./core/themes/themeDocumentSync'),
+      import('./core/themes/liveStateStream'),
+      import('./core/themes/themeInit'),
+      import('./component-editor/registry'),
+    ]);
+    editorStore.init();
     themeDocumentSync.init();
     liveStateStream.init();
     if (opts.components) {

package/src/editor/component-editor/ImageEditor.svelte

@@ -50,7 +50,7 @@
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
   import { buildSiblings } from './scaffolding/siblings';
-  import demoImageUrl from '../../system/assets/offering.webp';
+  import demoImageUrl from '../../system/assets/newspaper.webp';
   import { editorState, setComponentAlias } from '../core/store/editorStore';
 
   let aliases = $derived(

package/src/editor/component-editor/ImageLightboxEditor.svelte

@@ -45,13 +45,12 @@
   import ImageLightbox from '../../system/components/ImageLightbox.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import offeringUrl from '../../system/assets/offering.webp';
   import newspaperUrl from '../../system/assets/newspaper.webp';
 
   const demoImages = [
-    // Offering carries explicit dimensions (the no-reflow path); Newspaper omits
-    // them to exercise self-measure from the loaded image.
-    { src: offeringUrl, alt: 'Offering', width: 1455, height: 970 },
+    // The first entry carries explicit dimensions (the no-reflow path); the second
+    // omits them to exercise self-measure from the loaded image.
+    { src: newspaperUrl, alt: 'Newspaper', width: 2048, height: 1152 },
     { src: newspaperUrl, alt: 'Newspaper' },
   ];
 

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

@@ -0,0 +1,36 @@
+import type { RegisterComponentEntry } from './registry';
+
+/*
+ * `registerComponent` lives apart from `registry.ts` so a production build can
+ * call it without bundling the registry, which imports every shipped component
+ * and editor. Entries wait here until the registry loads, which happens in dev
+ * only.
+ */
+
+type Sink = (entry: RegisterComponentEntry) => void;
+
+const pending: RegisterComponentEntry[] = [];
+let sink: Sink | null = null;
+
+/**
+ * Register a consumer-authored component with the editor. 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 (sink) sink(entry);
+  else pending.push(entry);
+}
+
+/** Called once by `registry.ts` as it loads. Drains the entries registered
+    before it, in call order, and takes every later one directly. */
+export function attachRegistry(next: Sink): void {
+  sink = next;
+  for (const entry of pending.splice(0)) next(entry);
+}

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

@@ -1,6 +1,9 @@
 import type { Component } from 'svelte';
 import type { CatalogueEntry, Token, IntrinsicSpec } from './scaffolding/types';
 import { registerComponentSchema } from '../core/store/editorStore';
+import { attachRegistry } from './registration';
+
+export { registerComponent } from './registration';
 
 import BadgeEditor, { allTokens as badgeTokens } from './BadgeEditor.svelte';
 import { catalogue as badgeCatalogue } from '../../system/components/Badge.svelte';
@@ -433,18 +436,7 @@ 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 {
+function addCustomComponent(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.`,
@@ -496,6 +488,7 @@ export function getComponentIds(): ReadonlyArray<string> {
 for (const entry of Object.values(builtInRegistry)) {
   registerComponentSchema(entry.id, entry.schema);
 }
+attachRegistry(addCustomComponent);
 
 /**
  * Validate that the server's filesystem scan matches the merged registry's id list.