@motion-proto/live-tokens 0.7.1 → 0.9.0

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

@@ -37,8 +37,20 @@
     return tokens;
   }
 
+  // Outline is the only variant that paints a surface tint on :active; the rest
+  // express press feedback through transform/shadow only. Expose just the one
+  // tunable property here rather than adding an active state to every variant.
+  const outlineActiveTokens: Token[] = [
+    { label: 'surface color', groupKey: 'surface', variable: '--button-outline-active-surface' },
+  ];
+
   function variantStates(v: Variant): Record<string, Token[]> {
-    return Object.fromEntries(stateNames.map((s) => [s, variantStateTokens(v, s)]));
+    const out: Record<string, Token[]> = {};
+    out.default = variantStateTokens(v, 'default');
+    out.hover = variantStateTokens(v, 'hover');
+    if (v === 'outline') out.active = outlineActiveTokens;
+    out.disabled = variantStateTokens(v, 'disabled');
+    return out;
   }
   export const allTokens: Token[] = variants.flatMap((v) =>
     Object.values(variantStates(v)).flat(),

package/src/editor/component-editor/editors.d.ts

@@ -0,0 +1,10 @@
+// Augment the global `*.svelte` ambient module to expose the named
+// `allTokens` export that each `<Name>Editor.svelte` declares in its
+// `<script module>` block. The default ambient (shipped via
+// node_modules/svelte/types/index.d.ts) declares only a default export,
+// so without this augmentation tsc fails on the named imports in
+// registry.ts.
+
+declare module '*.svelte' {
+  export const allTokens: import('./scaffolding/types').Token[];
+}

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

@@ -1,5 +1,20 @@
 export { default as ComponentsTab } from './scaffolding/ComponentsTab.svelte';
 export type { ComponentSection } from './scaffolding/componentSectionType';
-export { defaultSections } from './scaffolding/defaultSections';
+export { getDefaultSections } from './scaffolding/defaultSections';
 
+// Editor primitives for consumer-authored components.
+export { default as ComponentEditorBase } from './scaffolding/ComponentEditorBase.svelte';
+export { default as VariantGroup } from './scaffolding/VariantGroup.svelte';
+export { default as LinkedBlock } from './scaffolding/LinkedBlock.svelte';
+export { default as TypeEditor } from './scaffolding/TypeEditor.svelte';
 export { default as TokenLayout } from './scaffolding/TokenLayout.svelte';
+
+// Helpers for assembling a VariantGroup's siblings and the linked-block view.
+export { buildSiblings } from './scaffolding/siblings';
+export type { Sibling } from './scaffolding/siblings';
+export { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+export type { LinkedToken, LinkedGroup, LinkedBlockResult } from './scaffolding/linkedBlock';
+export { buildTypeGroupTokens } from './scaffolding/buildTypeGroupTokens';
+
+// Token schema type — the shape of an entry in an editor's `allTokens` array.
+export type { Token } from './scaffolding/types';

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/AngleDial.svelte

@@ -9,10 +9,14 @@
     value?: number;
     label?: string;
     size?: number;
+    /** 'horizontal' (default) lays the label, dial, input, and degree mark on a
+     *  single line. 'vertical' stacks the dial above the input — used when the
+     *  dial sits in its own column with a section header providing the label. */
+    orientation?: 'horizontal' | 'vertical';
     onchange?: (payload: { value: number }) => void;
   }
 
-  let { value = $bindable(0), label = 'Angle', size = 44, onchange }: Props = $props();
+  let { value = $bindable(0), label = 'Angle', size = 44, orientation = 'horizontal', onchange }: Props = $props();
 
   let dialEl: HTMLDivElement | undefined = $state();
   let dragging = $state(false);
@@ -63,8 +67,8 @@
   let indicatorTransform = $derived(`rotate(${value}deg)`);
 </script>
 
-<div class="angle-dial-row">
-  {#if label}
+<div class="angle-dial-row" class:vertical={orientation === 'vertical'}>
+  {#if label && orientation === 'horizontal'}
     <span class="dial-label">{label}:</span>
   {/if}
   <div
@@ -90,16 +94,18 @@
     <div class="indicator" style="transform: {indicatorTransform}"></div>
     <div class="hub"></div>
   </div>
-  <input
-    class="num"
-    type="number"
-    min="0"
-    max="360"
-    step="1"
-    value={value}
-    onchange={onInputChange}
-  />
-  <span class="suffix">°</span>
+  <div class="num-row" style={orientation === 'vertical' ? `width: ${size}px;` : ''}>
+    <input
+      class="num"
+      type="number"
+      min="0"
+      max="360"
+      step="1"
+      value={value}
+      onchange={onInputChange}
+    />
+    <span class="suffix">°</span>
+  </div>
 </div>
 
 <style>
@@ -110,6 +116,39 @@
     font-size: var(--ui-font-size-sm);
     color: var(--ui-text-secondary);
   }
+  /* Stacked layout: dial centered, input + degree mark on the row below. Used
+     when the dial sits in its own grid column with an external section label. */
+  .angle-dial-row.vertical {
+    flex-direction: column;
+    align-items: center;
+    gap: var(--ui-space-6);
+  }
+
+  .num-row {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-8);
+  }
+
+  /* Vertical mode: lock the row to the dial's width and overlay the degree
+     mark inside the input's right padding so the input fills the column
+     instead of the row growing past the dial. */
+  .angle-dial-row.vertical .num-row {
+    position: relative;
+    display: block;
+  }
+  .angle-dial-row.vertical .num {
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 1.25rem;
+  }
+  .angle-dial-row.vertical .suffix {
+    position: absolute;
+    right: var(--ui-space-6);
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
 
   .dial-label {
     user-select: none;

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

@@ -6,7 +6,7 @@
   import { onMount, onDestroy } from 'svelte';
   import UIInfoPopover from '../../ui/UIInfoPopover.svelte';
   import { get } from 'svelte/store';
-  import type { ComponentConfig, ComponentConfigMeta } from '../../core/themes/themeTypes';
+  import type { AliasDiskValue, ComponentConfig, ComponentConfigMeta } from '../../core/themes/themeTypes';
   import { componentSourceFile } from './componentSources';
   import {
     loadComponentConfig,
@@ -125,15 +125,17 @@
     }
   }
 
-  function refToString(ref: CssVarRef): string {
-    return ref.kind === 'token' ? ref.name : ref.value;
+  function refToDiskValue(ref: CssVarRef): AliasDiskValue {
+    if (ref.kind === 'token') return ref.name;
+    if (ref.kind === 'literal') return ref.value;
+    return { kind: 'gradient', value: ref.value };
   }
 
-  function currentAliases(): Record<string, string> {
+  function currentAliases(): Record<string, AliasDiskValue> {
     const slice = get(editorState).components[component];
     if (!slice) return {};
-    const out: Record<string, string> = {};
-    for (const [k, ref] of Object.entries(slice.aliases)) out[k] = refToString(ref);
+    const out: Record<string, AliasDiskValue> = {};
+    for (const [k, ref] of Object.entries(slice.aliases)) out[k] = refToDiskValue(ref);
     return out;
   }
 
@@ -342,7 +344,7 @@
           : isApplied
             ? 'Active config is applied to production'
             : ''}
-        style="flex: 0 0 11.25rem; width: 11.25rem;"
+        style="flex: 0 1 11.25rem; min-width: 0; max-width: 11.25rem;"
       />
       <div class="cfm-actions">
         <ComponentFileMenu
@@ -383,7 +385,7 @@
         name={productionInfo?.name ?? '—'}
         isProtected={productionInfo?.fileName === 'default'}
         protectedTitle="Protected system config"
-        style="flex: 0 0 11.25rem; width: 11.25rem;"
+        style="flex: 0 1 11.25rem; min-width: 0; max-width: 11.25rem;"
       />
       <div class="cfm-actions">
         <UISquareButton
@@ -483,7 +485,6 @@
     font-size: var(--ui-font-size-3xl);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
-    letter-spacing: -0.015em;
     line-height: 1.1;
   }
 
@@ -536,7 +537,6 @@
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-weight-semibold);
     text-transform: uppercase;
-    letter-spacing: 0.08em;
     color: var(--ui-text-secondary);
     line-height: 1.1;
   }
@@ -546,7 +546,6 @@
     align-items: center;
     gap: var(--ui-space-4);
     font-size: 0.75rem;
-    letter-spacing: 0.02em;
     color: var(--ui-text-muted);
     line-height: 1;
   }

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/LinkedBlock.svelte

@@ -311,7 +311,6 @@
     font-size: var(--ui-font-size-md);
     font-weight: var(--ui-font-weight-medium);
     color: var(--ui-text-primary);
-    letter-spacing: 0.005em;
   }
 
   /* Control row hosts a single TokenLayout-rendered selector + resolved value.