@motion-proto/live-tokens 0.8.0 → 0.10.0

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

@@ -5,23 +5,27 @@ import { registerComponentSchema } from '../core/store/editorStore';
 import BadgeEditor, { allTokens as badgeTokens } from './BadgeEditor.svelte';
 import CalloutEditor, { allTokens as calloutTokens } from './CalloutEditor.svelte';
 import CornerBadgeEditor, { allTokens as cornerBadgeTokens } from './CornerBadgeEditor.svelte';
-import StandardButtonsEditor, { allTokens as buttonTokens } from './StandardButtonsEditor.svelte';
+import ButtonEditor, { allTokens as buttonTokens } from './ButtonEditor.svelte';
 import CardEditor, { allTokens as cardTokens } from './CardEditor.svelte';
 import CollapsibleSectionEditor, { allTokens as collapsibleSectionTokens } from './CollapsibleSectionEditor.svelte';
 import DialogEditor, { allTokens as dialogTokens } from './DialogEditor.svelte';
 import ImageEditor, { allTokens as imageTokens } from './ImageEditor.svelte';
+import ImageLightboxEditor, { allTokens as imageLightboxTokens } from './ImageLightboxEditor.svelte';
 import InlineEditActionsEditor, { allTokens as inlineEditActionsTokens } from './InlineEditActionsEditor.svelte';
+import InputEditor, { allTokens as inputTokens } from './InputEditor.svelte';
 import MenuSelectEditor, { allTokens as menuSelectTokens } from './MenuSelectEditor.svelte';
 import NotificationEditor, { allTokens as notificationTokens } from './NotificationEditor.svelte';
 import ProgressBarEditor, { allTokens as progressBarTokens } from './ProgressBarEditor.svelte';
 import RadioButtonEditor, { allTokens as radioButtonTokens } from './RadioButtonEditor.svelte';
 import SectionDividerEditor, { allTokens as sectionDividerTokens } from './SectionDividerEditor.svelte';
 import SegmentedControlEditor, { allTokens as segmentedControlTokens } from './SegmentedControlEditor.svelte';
+import SideNavigationEditor, { allTokens as sideNavigationTokens } from './SideNavigationEditor.svelte';
 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'
@@ -32,15 +36,25 @@ export type ComponentId =
   | 'callout'
   | 'cornerbadge'
   | 'image'
+  | 'imagelightbox'
   | 'inlineeditactions'
+  | 'input'
   | 'menuselect'
   | 'sectiondivider'
   | 'collapsiblesection'
+  | 'sidenavigation'
   | 'table'
   | 'tabbar'
   | '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 +68,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,14 +87,16 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/SegmentedControl.svelte',
     editorComponent: SegmentedControlEditor,
     schema: segmentedControlTokens,
+    origin: 'system',
   },
   button: {
     id: 'button',
     label: 'Button',
     icon: 'fas fa-square',
     sourceFile: 'src/system/components/Button.svelte',
-    editorComponent: StandardButtonsEditor,
+    editorComponent: ButtonEditor,
     schema: buttonTokens,
+    origin: 'system',
   },
   notification: {
     id: 'notification',
@@ -92,6 +105,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 +114,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 +123,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 +132,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 +141,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 +150,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 +159,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 +168,16 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/Image.svelte',
     editorComponent: ImageEditor,
     schema: imageTokens,
+    origin: 'system',
+  },
+  imagelightbox: {
+    id: 'imagelightbox',
+    label: 'Image Lightbox',
+    icon: 'fas fa-expand',
+    sourceFile: 'src/system/components/ImageLightbox.svelte',
+    editorComponent: ImageLightboxEditor,
+    schema: imageLightboxTokens,
+    origin: 'system',
   },
   inlineeditactions: {
     id: 'inlineeditactions',
@@ -156,6 +186,16 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/InlineEditActions.svelte',
     editorComponent: InlineEditActionsEditor,
     schema: inlineEditActionsTokens,
+    origin: 'system',
+  },
+  input: {
+    id: 'input',
+    label: 'Input',
+    icon: 'fas fa-i-cursor',
+    sourceFile: 'src/system/components/Input.svelte',
+    editorComponent: InputEditor,
+    schema: inputTokens,
+    origin: 'system',
   },
   menuselect: {
     id: 'menuselect',
@@ -164,6 +204,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 +213,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 +222,16 @@ export const componentRegistry: Readonly<Record<ComponentId, RegistryEntry>> = O
     sourceFile: 'src/system/components/CollapsibleSection.svelte',
     editorComponent: CollapsibleSectionEditor,
     schema: collapsibleSectionTokens,
+    origin: 'system',
+  },
+  sidenavigation: {
+    id: 'sidenavigation',
+    label: 'Side Navigation',
+    icon: 'fas fa-bars-staggered',
+    sourceFile: 'src/system/components/SideNavigation.svelte',
+    editorComponent: SideNavigationEditor,
+    schema: sideNavigationTokens,
+    origin: 'system',
   },
   table: {
     id: 'table',
@@ -188,6 +240,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 +249,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 +258,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 +267,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'>;
 
-/** All canonical component ids, in display order. */
-export const componentIds: ReadonlyArray<ComponentId> = Object.freeze(
-  componentRegistryEntries.map((e) => e.id),
-);
+/**
+ * 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;
+}
+
+/**
+ * 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/ComponentFileManager.svelte

@@ -28,6 +28,7 @@
   import { CURRENT_COMPONENT_SCHEMA_VERSION } from '../../core/themes/migrations';
   import type { CssVarRef } from '../../core/store/editorTypes';
   import { safeFetch } from '../../core/storage/storage';
+  import { API_BASE } from '../../core/storage/apiBase';
   import { flashStatus } from '../../core/flashStatus';
   import ComponentFileMenu from './ComponentFileMenu.svelte';
   import SaveAsDialog from './SaveAsDialog.svelte';
@@ -91,7 +92,7 @@
     const data = await safeFetch<{
       files: ComponentConfigMeta[];
       activeFile: string;
-    }>(`/api/component-configs/${encodeURIComponent(component)}`);
+    }>(`${API_BASE}/component-configs/${encodeURIComponent(component)}`);
     if (!data) return;
     files = data.files;
     activeFileName = data.activeFile;
@@ -103,7 +104,7 @@
     // Preserve existing productionInfo on transient fetch failure rather than
     // clobbering it to null — same behaviour as the previous empty catch.
     const info = await safeFetch<ComponentProductionInfo>(
-      `/api/component-configs/${encodeURIComponent(component)}/production`,
+      `${API_BASE}/component-configs/${encodeURIComponent(component)}/production`,
     );
     if (info) productionInfo = info;
   }

package/src/editor/component-editor/scaffolding/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/StateBlock.svelte

@@ -250,19 +250,18 @@
     padding-top: calc(var(--ui-font-size-xs) + var(--ui-space-4));
   }
 
-  /* Element-grouped mode: subsections fan out across available width, each
-     labeled by the element it targets (e.g. Frame / Header / Body). Three
-     columns at typical editor widths, dropping to two then one as the panel
-     narrows — the auto-fit + minmax does the responsive work without media
-     queries. `align-items: start` keeps columns of different heights aligned
-     to their top edge instead of stretching the shorter ones.
+  /* Element-grouped mode: subsections sit flush against their content width
+     with a 1rem gap between them, wrapping to a new row when the panel is too
+     narrow to fit them side-by-side. Flex (not grid 1fr) so wide viewports
+     don't spread the columns apart — sections cluster left and consume only
+     as much width as their controls need.
      Within a section the two-col split (typography fieldsets + property grid)
      still applies when the section has both. */
   .state-controls.element-grouped {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-    gap: var(--ui-space-20) var(--ui-space-32);
-    align-items: start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-16);
+    align-items: flex-start;
   }
 
   /* Each element section stacks typography fieldset(s) above the property

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

@@ -7,7 +7,9 @@
   import UIFontSizeSelector from '../../ui/UIFontSizeSelector.svelte';
   import UILineHeightSelector from '../../ui/UILineHeightSelector.svelte';
   import UIPaddingSelector from '../../ui/UIPaddingSelector.svelte';
-  import { BLUR, BORDER_WIDTH, DOT_SIZE, RADIUS, SHADOW, DIVIDER_HEIGHT } from '../../ui/variantScales';
+  import UILetterSpacingSelector from '../../ui/UILetterSpacingSelector.svelte';
+  import UIEasingSelector from '../../ui/UIEasingSelector.svelte';
+  import { BLUR, BORDER_WIDTH, DOT_SIZE, DURATION, RADIUS, SHADOW, DIVIDER_HEIGHT, DIVIDER_INSET } from '../../ui/variantScales';
   import {
     editorState,
     getComponentPropertySiblings,
@@ -26,6 +28,7 @@
     | 'radius'
     | 'divider-width'
     | 'divider-height'
+    | 'divider-inset'
     | 'dot-size'
     | 'blur'
     | 'shadow'
@@ -33,10 +36,13 @@
     | 'font-weight'
     | 'font-size'
     | 'line-height'
+    | 'letter-spacing'
     | 'padding'
     | 'padding-split'
     | 'gap'
-    | 'extras';
+    | 'duration'
+    | 'easing'
+    | 'text-color';
 
   type Entry = { kind: Kind; token: Token };
 
@@ -75,44 +81,61 @@
     onchange,
   }: Props = $props();
 
-  /** Suffix/prefix patterns mapped to kinds — single source of truth used by `categorize`.
-      Order matters: `text` must run before `border`/`surface` because `--text-*` would
-      otherwise match `surface` checks if any pattern overlapped. */
+  /** Suffix/prefix patterns mapped to kinds — single source of truth used by `rawKind`.
+      Order matters: `-text` must run before `-border`/`-surface` because `--text-*`
+      would otherwise match `surface`/`border` if any pattern overlapped. Variables
+      that don't match any pattern fall through to `text-color` (renders as a palette
+      picker). Tokens with unconventional suffixes should be renamed. */
   const KIND_PATTERNS: Array<{ kind: Kind; matches: (v: string) => boolean }> = [
-    { kind: 'font-family', matches: (v) => v.endsWith('-font-family') },
-    { kind: 'font-weight', matches: (v) => v.endsWith('-font-weight') },
-    { kind: 'font-size', matches: (v) => v.endsWith('-font-size') || v.endsWith('-icon-size') },
-    { kind: 'line-height', matches: (v) => v.endsWith('-line-height') },
-    { kind: 'extras', matches: (v) => v.endsWith('-text') || v.startsWith('--text-') },
-    { kind: 'radius', matches: (v) => v.endsWith('-radius') || v.startsWith('--radius-') },
-    { kind: 'divider-width', matches: (v) => v.endsWith('-divider-width') || v.endsWith('-divider-thickness') },
+    { kind: 'font-family',    matches: (v) => v.endsWith('-font-family') },
+    { kind: 'font-weight',    matches: (v) => v.endsWith('-font-weight') },
+    { kind: 'font-size',      matches: (v) => v.endsWith('-font-size') || v.endsWith('-icon-size') },
+    { kind: 'line-height',    matches: (v) => v.endsWith('-line-height') },
+    { kind: 'letter-spacing', matches: (v) => v.endsWith('-letter-spacing') },
+    { kind: 'text-color',     matches: (v) => v.endsWith('-text') || v.startsWith('--text-') },
+    { kind: 'radius',         matches: (v) => v.endsWith('-radius') || v.startsWith('--radius-') },
+    { kind: 'divider-width',  matches: (v) => v.endsWith('-divider-width') || v.endsWith('-divider-thickness') },
     { kind: 'divider-height', matches: (v) => v.endsWith('-divider-height') || v.endsWith('-track-height') },
-    { kind: 'dot-size', matches: (v) => v.endsWith('-dot-size') },
-    { kind: 'blur', matches: (v) => v.endsWith('-blur') || v.startsWith('--blur-') },
-    { kind: 'shadow', matches: (v) => v.endsWith('-shadow') || v.startsWith('--shadow-') },
-    { kind: 'padding', matches: (v) => v.endsWith('-padding') || v.endsWith('-margin') },
-    { kind: 'gap', matches: (v) => v.endsWith('-gap') },
-    { kind: 'border-width', matches: (v) => v.endsWith('-border-width') || v.endsWith('-accent-width') || v.endsWith('-hairline-thickness') || v.startsWith('--border-width-') },
-    { kind: 'border', matches: (v) => v.endsWith('-border') || v.startsWith('--border-') },
-    { kind: 'surface', matches: (v) => v.endsWith('-surface') || v.startsWith('--surface-') },
+    { kind: 'divider-inset',  matches: (v) => v.endsWith('-divider-inset') },
+    { kind: 'dot-size',       matches: (v) => v.endsWith('-dot-size') },
+    { kind: 'blur',           matches: (v) => v.endsWith('-blur') || v.startsWith('--blur-') },
+    { kind: 'shadow',         matches: (v) => v.endsWith('-shadow') || v.startsWith('--shadow-') },
+    { kind: 'padding',        matches: (v) => v.endsWith('-padding') || v.endsWith('-margin') },
+    { kind: 'gap',            matches: (v) => v.endsWith('-gap') },
+    { kind: 'duration',       matches: (v) => v.endsWith('-duration') || v.startsWith('--duration-') },
+    { kind: 'easing',         matches: (v) => v.endsWith('-easing') || v.startsWith('--ease-') },
+    { kind: 'border-width',   matches: (v) => v.endsWith('-border-width') || v.endsWith('-accent-width') || v.endsWith('-hairline-thickness') || v.startsWith('--border-width-') },
+    { kind: 'border',         matches: (v) => v.endsWith('-border') || v.startsWith('--border-') },
+    { kind: 'surface',        matches: (v) => v.endsWith('-surface') || v.startsWith('--surface-') },
   ];
 
+  function rawKind(variable: string): Kind {
+    for (const { kind, matches } of KIND_PATTERNS) {
+      if (matches(variable)) return kind;
+    }
+    return 'text-color';
+  }
+
   /** Fixed internal order for tokens within a layout. `padding-split` co-orders with `padding`. */
   const baseKindOrder: Kind[] = [
     'font-family',
     'font-weight',
     'font-size',
     'line-height',
+    'letter-spacing',
     'divider-width',
     'divider-height',
+    'divider-inset',
     'dot-size',
     'radius',
     'padding',
     'padding-split',
     'gap',
+    'duration',
+    'easing',
     'blur',
     'shadow',
-    'extras',
+    'text-color',
     'surface',
     'border-width',
     'border',
@@ -121,13 +144,6 @@
     baseKindOrder.map((k, i) => [k, i]),
   ) as Record<Kind, number>;
 
-  function rawKind(v: string): Kind {
-    for (const { kind, matches } of KIND_PATTERNS) {
-      if (matches(v)) return kind;
-    }
-    return 'extras';
-  }
-
   /** A padding token is "split" when its per-side variables exist for this component. */
   function paddingIsSplit(varName: string, comp: string | undefined, state: typeof $editorState): boolean {
     const sides = ['top', 'right', 'bottom', 'left'];
@@ -148,8 +164,8 @@
   }
 
   /** For sibling/grouping checks we want the canonical kind, not the split-vs-single distinction. */
-  function groupingKind(v: string): Kind {
-    return rawKind(v);
+  function groupingKind(variable: string): Kind {
+    return rawKind(variable);
   }
 
   /** Selector registry: one entry per kind. `extra` props (e.g. UIPaddingSelector's
@@ -167,9 +183,11 @@
     'font-weight': { component: UIFontWeightSelector },
     'font-size': { component: UIFontSizeSelector },
     'line-height': { component: UILineHeightSelector },
+    'letter-spacing': { component: UILetterSpacingSelector },
     'border-width': { component: UIVariantSelector, extra: () => ({ ...BORDER_WIDTH }) },
     'divider-width': { component: UIVariantSelector, extra: () => ({ ...BORDER_WIDTH }) },
     'divider-height': { component: UIVariantSelector, extra: () => ({ ...DIVIDER_HEIGHT }) },
+    'divider-inset': { component: UIVariantSelector, extra: () => ({ ...DIVIDER_INSET }) },
     'dot-size': { component: UIVariantSelector, extra: () => ({ ...DOT_SIZE }) },
     'radius': { component: UIVariantSelector, extra: () => ({ ...RADIUS }) },
     'padding': { component: UIPaddingSelector, extra: (t) => ({ mode: 'single', splittable: t.splittable !== false }) },
@@ -184,31 +202,37 @@
       extra: () => ({ mode: 'sides' }),
     },
     'gap': { component: UIPaddingSelector, extra: () => ({ mode: 'single', splittable: false }) },
+    'duration': { component: UIVariantSelector, extra: () => ({ ...DURATION }) },
+    'easing': { component: UIEasingSelector },
     'blur': { component: UIVariantSelector, extra: () => ({ ...BLUR }) },
     'shadow': { component: UIVariantSelector, extra: () => ({ ...SHADOW }) },
     'surface': { component: UIPaletteSelector },
     'border': { component: UIPaletteSelector },
-    'extras': { component: UIPaletteSelector },
+    'text-color': { component: UIPaletteSelector },
   };
 
-  /** Multi-col rank: same as `orderRank` but with `extras` (text-color-like) hoisted
-      between `line-height` and `border-width` so typography reads as one logical
-      block in column flow. Single-col mode keeps `orderRank` (linked-first sort
-      already segregates extras to the bottom). */
+  /** Multi-col rank: same as `orderRank` but with `text-color` hoisted between
+      `line-height` and `divider-width` so typography reads as one logical block
+      in column flow. Single-col mode keeps `orderRank` (linked-first sort
+      already segregates text-color to the bottom). */
   const multiColRank: Record<Kind, number> = (() => {
     const reordered: Kind[] = [
       'font-family',
       'font-weight',
       'font-size',
       'line-height',
-      'extras',
+      'letter-spacing',
+      'text-color',
       'divider-width',
       'divider-height',
+      'divider-inset',
       'dot-size',
       'radius',
       'padding',
       'padding-split',
       'gap',
+      'duration',
+      'easing',
       'blur',
       'shadow',
       'surface',