@motion-proto/live-tokens 0.78.0 → 0.80.0

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

@@ -1,33 +1,59 @@
 import type { Component } from 'svelte';
-import type { Token, IntrinsicSpec } from './scaffolding/types';
+import type { CatalogueEntry, Token, IntrinsicSpec } from './scaffolding/types';
 import { registerComponentSchema } from '../core/store/editorStore';
 
 import BadgeEditor, { allTokens as badgeTokens } from './BadgeEditor.svelte';
+import { catalogue as badgeCatalogue } from '../../system/components/Badge.svelte';
 import CalloutEditor, { allTokens as calloutTokens } from './CalloutEditor.svelte';
+import { catalogue as calloutCatalogue } from '../../system/components/Callout.svelte';
 import CornerBadgeEditor, { allTokens as cornerBadgeTokens } from './CornerBadgeEditor.svelte';
+import { catalogue as cornerBadgeCatalogue } from '../../system/components/CornerBadge.svelte';
 import ButtonEditor, { allTokens as buttonTokens } from './ButtonEditor.svelte';
+import { catalogue as buttonCatalogue } from '../../system/components/Button.svelte';
 import IconButtonEditor, { allTokens as iconButtonTokens } from './IconButtonEditor.svelte';
+import { catalogue as iconButtonCatalogue } from '../../system/components/IconButton.svelte';
 import CardEditor, { allTokens as cardTokens, intrinsics as cardIntrinsics } from './CardEditor.svelte';
+import { catalogue as cardCatalogue } from '../../system/components/Card.svelte';
 import CodeSnippetEditor, { allTokens as codeSnippetTokens } from './CodeSnippetEditor.svelte';
+import { catalogue as codeSnippetCatalogue } from '../../system/components/CodeSnippet.svelte';
 import CollapsibleSectionEditor, { allTokens as collapsibleSectionTokens } from './CollapsibleSectionEditor.svelte';
+import { catalogue as collapsibleSectionCatalogue } from '../../system/components/CollapsibleSection.svelte';
 import DialogEditor, { allTokens as dialogTokens } from './DialogEditor.svelte';
+import { catalogue as dialogCatalogue } from '../../system/components/Dialog.svelte';
 import ImageEditor, { allTokens as imageTokens, intrinsics as imageIntrinsics } from './ImageEditor.svelte';
+import { catalogue as imageCatalogue } from '../../system/components/Image.svelte';
 import ImageLightboxEditor, { allTokens as imageLightboxTokens } from './ImageLightboxEditor.svelte';
+import { catalogue as imageLightboxCatalogue } from '../../system/components/ImageLightbox.svelte';
 import InlineEditActionsEditor, { allTokens as inlineEditActionsTokens } from './InlineEditActionsEditor.svelte';
+import { catalogue as inlineEditActionsCatalogue } from '../../system/components/InlineEditActions.svelte';
 import InputEditor, { allTokens as inputTokens } from './InputEditor.svelte';
+import { catalogue as inputCatalogue } from '../../system/components/Input.svelte';
 import MenuSelectEditor, { allTokens as menuSelectTokens } from './MenuSelectEditor.svelte';
+import { catalogue as menuSelectCatalogue } from '../../system/components/MenuSelect.svelte';
 import NotificationEditor, { allTokens as notificationTokens } from './NotificationEditor.svelte';
+import { catalogue as notificationCatalogue } from '../../system/components/Notification.svelte';
 import PanelEditor, { allTokens as panelTokens } from './PanelEditor.svelte';
+import { catalogue as panelCatalogue } from '../../system/components/Panel.svelte';
 import ProgressBarEditor, { allTokens as progressBarTokens } from './ProgressBarEditor.svelte';
+import { catalogue as progressBarCatalogue } from '../../system/components/ProgressBar.svelte';
 import SliderEditor, { allTokens as sliderTokens } from './SliderEditor.svelte';
+import { catalogue as sliderCatalogue } from '../../system/components/Slider.svelte';
 import RadioButtonEditor, { allTokens as radioButtonTokens } from './RadioButtonEditor.svelte';
+import { catalogue as radioButtonCatalogue } from '../../system/components/RadioButton.svelte';
 import SectionDividerEditor, { allTokens as sectionDividerTokens, intrinsics as sectionDividerIntrinsics } from './SectionDividerEditor.svelte';
+import { catalogue as sectionDividerCatalogue } from '../../system/components/SectionDivider.svelte';
 import SegmentedControlEditor, { allTokens as segmentedControlTokens } from './SegmentedControlEditor.svelte';
+import { catalogue as segmentedControlCatalogue } from '../../system/components/SegmentedControl.svelte';
 import SideNavigationEditor, { allTokens as sideNavigationTokens } from './SideNavigationEditor.svelte';
+import { catalogue as sideNavigationCatalogue } from '../../system/components/SideNavigation.svelte';
 import TableEditor, { allTokens as tableTokens } from './TableEditor.svelte';
+import { catalogue as tableCatalogue } from '../../system/components/Table.svelte';
 import TabBarEditor, { allTokens as tabBarTokens } from './TabBarEditor.svelte';
+import { catalogue as tabBarCatalogue } from '../../system/components/TabBar.svelte';
 import ToggleEditor, { allTokens as toggleTokens } from './ToggleEditor.svelte';
+import { catalogue as toggleCatalogue } from '../../system/components/Toggle.svelte';
 import TooltipEditor, { allTokens as tooltipTokens } from './TooltipEditor.svelte';
+import { catalogue as tooltipCatalogue } from '../../system/components/Tooltip.svelte';
 
 /** Internal narrowed union of the first-party component ids. Not exposed publicly. */
 type BuiltInComponentId =
@@ -81,6 +107,10 @@ export interface RegistryEntry {
       most components have none. When present, each spec's per-variant default is
       pinned to the runtime `:global(:root)` by intrinsicsContract.test. */
   intrinsics?: IntrinsicSpec[];
+  /** What the component is, what to use it for, and what not to use it for.
+      Imported from the runtime file's own `catalogue` export — never copied —
+      so registryContract.test's identity check pins it to that one source. */
+  catalogue: CatalogueEntry;
   /** `'system'` for first-party entries; `'custom'` for entries added via `registerComponent()`. */
   origin: 'system' | 'custom';
 }
@@ -100,6 +130,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/SegmentedControl.svelte',
     editorComponent: SegmentedControlEditor,
     schema: segmentedControlTokens,
+    catalogue: segmentedControlCatalogue,
     origin: 'system',
   },
   button: {
@@ -109,6 +140,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Button.svelte',
     editorComponent: ButtonEditor,
     schema: buttonTokens,
+    catalogue: buttonCatalogue,
     origin: 'system',
   },
   iconbutton: {
@@ -118,6 +150,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/IconButton.svelte',
     editorComponent: IconButtonEditor,
     schema: iconButtonTokens,
+    catalogue: iconButtonCatalogue,
     origin: 'system',
   },
   notification: {
@@ -127,6 +160,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Notification.svelte',
     editorComponent: NotificationEditor,
     schema: notificationTokens,
+    catalogue: notificationCatalogue,
     origin: 'system',
   },
   dialog: {
@@ -136,6 +170,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Dialog.svelte',
     editorComponent: DialogEditor,
     schema: dialogTokens,
+    catalogue: dialogCatalogue,
     origin: 'system',
   },
   radiobutton: {
@@ -145,6 +180,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/RadioButton.svelte',
     editorComponent: RadioButtonEditor,
     schema: radioButtonTokens,
+    catalogue: radioButtonCatalogue,
     origin: 'system',
   },
   card: {
@@ -155,6 +191,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     editorComponent: CardEditor,
     schema: cardTokens,
     intrinsics: cardIntrinsics,
+    catalogue: cardCatalogue,
     origin: 'system',
   },
   badge: {
@@ -164,6 +201,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Badge.svelte',
     editorComponent: BadgeEditor,
     schema: badgeTokens,
+    catalogue: badgeCatalogue,
     origin: 'system',
   },
   callout: {
@@ -173,6 +211,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Callout.svelte',
     editorComponent: CalloutEditor,
     schema: calloutTokens,
+    catalogue: calloutCatalogue,
     origin: 'system',
   },
   codesnippet: {
@@ -182,6 +221,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/CodeSnippet.svelte',
     editorComponent: CodeSnippetEditor,
     schema: codeSnippetTokens,
+    catalogue: codeSnippetCatalogue,
     origin: 'system',
   },
   cornerbadge: {
@@ -191,6 +231,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/CornerBadge.svelte',
     editorComponent: CornerBadgeEditor,
     schema: cornerBadgeTokens,
+    catalogue: cornerBadgeCatalogue,
     origin: 'system',
   },
   image: {
@@ -201,6 +242,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     editorComponent: ImageEditor,
     schema: imageTokens,
     intrinsics: imageIntrinsics,
+    catalogue: imageCatalogue,
     origin: 'system',
   },
   imagelightbox: {
@@ -210,6 +252,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/ImageLightbox.svelte',
     editorComponent: ImageLightboxEditor,
     schema: imageLightboxTokens,
+    catalogue: imageLightboxCatalogue,
     origin: 'system',
   },
   inlineeditactions: {
@@ -219,6 +262,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/InlineEditActions.svelte',
     editorComponent: InlineEditActionsEditor,
     schema: inlineEditActionsTokens,
+    catalogue: inlineEditActionsCatalogue,
     origin: 'system',
   },
   input: {
@@ -228,6 +272,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Input.svelte',
     editorComponent: InputEditor,
     schema: inputTokens,
+    catalogue: inputCatalogue,
     origin: 'system',
   },
   menuselect: {
@@ -237,6 +282,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/MenuSelect.svelte',
     editorComponent: MenuSelectEditor,
     schema: menuSelectTokens,
+    catalogue: menuSelectCatalogue,
     origin: 'system',
   },
   panel: {
@@ -246,6 +292,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Panel.svelte',
     editorComponent: PanelEditor,
     schema: panelTokens,
+    catalogue: panelCatalogue,
     origin: 'system',
   },
   sectiondivider: {
@@ -256,6 +303,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     editorComponent: SectionDividerEditor,
     schema: sectionDividerTokens,
     intrinsics: sectionDividerIntrinsics,
+    catalogue: sectionDividerCatalogue,
     origin: 'system',
   },
   collapsiblesection: {
@@ -265,6 +313,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/CollapsibleSection.svelte',
     editorComponent: CollapsibleSectionEditor,
     schema: collapsibleSectionTokens,
+    catalogue: collapsibleSectionCatalogue,
     origin: 'system',
   },
   sidenavigation: {
@@ -274,6 +323,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/SideNavigation.svelte',
     editorComponent: SideNavigationEditor,
     schema: sideNavigationTokens,
+    catalogue: sideNavigationCatalogue,
     origin: 'system',
   },
   table: {
@@ -283,6 +333,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Table.svelte',
     editorComponent: TableEditor,
     schema: tableTokens,
+    catalogue: tableCatalogue,
     origin: 'system',
   },
   tabbar: {
@@ -292,6 +343,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/TabBar.svelte',
     editorComponent: TabBarEditor,
     schema: tabBarTokens,
+    catalogue: tabBarCatalogue,
     origin: 'system',
   },
   toggle: {
@@ -301,6 +353,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Toggle.svelte',
     editorComponent: ToggleEditor,
     schema: toggleTokens,
+    catalogue: toggleCatalogue,
     origin: 'system',
   },
   tooltip: {
@@ -310,6 +363,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Tooltip.svelte',
     editorComponent: TooltipEditor,
     schema: tooltipTokens,
+    catalogue: tooltipCatalogue,
     origin: 'system',
   },
   progressbar: {
@@ -319,6 +373,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/ProgressBar.svelte',
     editorComponent: ProgressBarEditor,
     schema: progressBarTokens,
+    catalogue: progressBarCatalogue,
     origin: 'system',
   },
   slider: {
@@ -328,6 +383,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Slider.svelte',
     editorComponent: SliderEditor,
     schema: sliderTokens,
+    catalogue: sliderCatalogue,
     origin: 'system',
   },
 });

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

@@ -9,7 +9,7 @@
   import UIPaddingSelector from '../../ui/UIPaddingSelector.svelte';
   import UILetterSpacingSelector from '../../ui/UILetterSpacingSelector.svelte';
   import UIEasingSelector from '../../ui/UIEasingSelector.svelte';
-  import { BLUR, BORDER_WIDTH, DOT_SIZE, DURATION, RADIUS, SCALE, SHADOW, DIVIDER_HEIGHT, DIVIDER_INSET } from '../../ui/variantScales';
+  import { BLUR, BORDER_WIDTH, DOT_SIZE, DURATION, RADIUS, SCALE, SHADOW, TRACK_HEIGHT, HAIRLINE_INSET } from '../../ui/variantScales';
   import {
     editorState,
     getComponentPropertySiblings,
@@ -68,8 +68,8 @@
     'font-size',
     'line-height',
     'letter-spacing',
-    'divider-height',
-    'divider-inset',
+    'track-height',
+    'hairline-inset',
     'dot-size',
     'length',
     'radius',
@@ -84,8 +84,8 @@
     'text-color',
     'surface',
     'border-width',
-    'divider-width',
-    'accent-width',
+    'hairline-width',
+    'indicator-width',
     'border',
   ];
   const orderRank: Record<Kind, number> = Object.fromEntries(
@@ -135,10 +135,10 @@
     'line-height': { component: UILineHeightSelector },
     'letter-spacing': { component: UILetterSpacingSelector },
     'border-width': { component: UIVariantSelector, extra: () => ({ ...BORDER_WIDTH }) },
-    'divider-width': { component: UIVariantSelector, extra: () => ({ ...BORDER_WIDTH }) },
-    'accent-width': { component: UIVariantSelector, extra: () => ({ ...BORDER_WIDTH }) },
-    'divider-height': { component: UIVariantSelector, extra: () => ({ ...DIVIDER_HEIGHT }) },
-    'divider-inset': { component: UIVariantSelector, extra: () => ({ ...DIVIDER_INSET }) },
+    'hairline-width': { component: UIVariantSelector, extra: () => ({ ...BORDER_WIDTH }) },
+    'indicator-width': { component: UIVariantSelector, extra: () => ({ ...BORDER_WIDTH }) },
+    'track-height': { component: UIVariantSelector, extra: () => ({ ...TRACK_HEIGHT }) },
+    'hairline-inset': { component: UIVariantSelector, extra: () => ({ ...HAIRLINE_INSET }) },
     'dot-size': { component: UIVariantSelector, extra: () => ({ ...DOT_SIZE }) },
     'radius': { component: UIVariantSelector, extra: () => ({ ...RADIUS }) },
     'padding': { component: UIPaddingSelector, extra: (t) => ({ mode: 'single', splittable: t.splittable !== false }) },
@@ -167,7 +167,7 @@
   };
 
   /** Multi-col rank: same as `orderRank` but with `text-color` hoisted between
-      `line-height` and `divider-height` so typography reads as one logical block
+      `line-height` and `track-height` 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> = (() => {
@@ -178,8 +178,8 @@
       'line-height',
       'letter-spacing',
       'text-color',
-      'divider-height',
-      'divider-inset',
+      'track-height',
+      'hairline-inset',
       'dot-size',
       'length',
       'radius',
@@ -193,8 +193,8 @@
       'shadow',
       'surface',
       'border-width',
-      'divider-width',
-      'accent-width',
+      'hairline-width',
+      'indicator-width',
       'border',
     ];
     return Object.fromEntries(reordered.map((k, i) => [k, i])) as Record<Kind, number>;

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

@@ -621,6 +621,9 @@
     align-items: center;
     gap: var(--ui-space-24);
     flex-wrap: wrap;
+    /* The overlay's collapsed pill publishes its inset while it rests in the
+       top band; once this header pins under it, the tabs wrap clear. */
+    padding-right: var(--lt-pill-inset, 0px);
   }
 
   .preview-actions {

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

@@ -1,3 +1,18 @@
+/** A component's catalogue entry: what it is, what to use it for, what not
+    to use it for, and what any guidance-bearing prop's values mean. Exported
+    as `catalogue` from the runtime file's `<script module>` block — the
+    Svelte compiler drops a leading HTML comment before it reaches the
+    running editor, so this is the one form every reader (CLI, registry,
+    consumer) can read. */
+export type CatalogueEntry = {
+  /** One sentence: what the component is. */
+  description: string;
+  useFor: string;
+  notFor: string;
+  /** Keyed by prop name; the value explains that prop's values. */
+  props?: Record<string, string>;
+};
+
 /** Editor token: a single CSS custom property the user can theme. */
 export type Token = {
   label: string;

package/src/editor/core/components/adjustAliases.ts

@@ -1,7 +1,7 @@
 import { matchesKind, stripSide } from './aliasKinds';
 import type { AliasDiskValue, ComponentConfig } from '../themes/themeTypes';
 
-export type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width' | 'divider-width' | 'accent-width';
+export type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width' | 'hairline-width' | 'indicator-width';
 
 export interface AdjustOp {
   /** Component id; omitted applies the op to every config. */
@@ -88,7 +88,7 @@ const BORDER_WIDTH_SETTABLE = [
 const STROKE_STEPS = BORDER_WIDTH_SETTABLE.slice(1);
 
 /** Three stroke roles ride the one `--border-width-*` scale. A border
-    encloses, a divider separates, an accent emphasises, and an intent
+    encloses, a hairline separates, an indicator emphasises, and an intent
     such as "hairline rules" names one role without the others. */
 const STROKE_SCALE = {
   steps: STROKE_STEPS,
@@ -105,8 +105,8 @@ const SCALES: Record<AdjustKind, { steps: string[]; settable: string[]; family:
   padding: { steps: SPACE_STEPS, settable: SPACE_SETTABLE, family: SPACE_FAMILY },
   gap: { steps: SPACE_STEPS, settable: SPACE_SETTABLE, family: SPACE_FAMILY },
   'border-width': STROKE_SCALE,
-  'divider-width': STROKE_SCALE,
-  'accent-width': STROKE_SCALE,
+  'hairline-width': STROKE_SCALE,
+  'indicator-width': STROKE_SCALE,
 };
 
 const TOKEN_NAME = /^--[a-z0-9-]+$/;

package/src/editor/core/components/aliasKinds.ts

@@ -2,11 +2,11 @@ export type TokenKind =
   | 'surface'
   | 'border'
   | 'border-width'
-  | 'divider-width'
-  | 'accent-width'
+  | 'hairline-width'
+  | 'indicator-width'
   | 'radius'
-  | 'divider-height'
-  | 'divider-inset'
+  | 'track-height'
+  | 'hairline-inset'
   | 'dot-size'
   | 'length'
   | 'blur'
@@ -25,14 +25,15 @@ export type TokenKind =
 
 /** Suffix and prefix data mapped to kinds — the one source of truth for the
     editor's selector layout, the `adjust` CLI, and `check-component`'s naming
-    rule, so the three cannot drift. `bin/check-component.mjs` reads the
+    rule, so the three cannot drift. `bin/lib/componentSource.mjs` reads the
     `suffix:` arrays out of this file, which is why they are plain literals.
 
-    Order matters: `-text` must run before `-border`/`-surface`, and
-    `-accent-width` before `-accent` and `-width`, because the first match wins. A variable
-    matching nothing falls through to `text-color` (a palette picker), but that
-    fall-through is a smell — `check-component` rejects an unrecognised suffix,
-    so add the name here rather than letting it drift. */
+    Order matters: `-text` must run before `-border`/`-surface`, and every
+    named `-width` before the bare `length` rule, because the first match
+    wins. A variable matching nothing falls through to `text-color` (a
+    palette picker), but that fall-through is a smell — `check-component`
+    rejects an unrecognised suffix, so add the name here rather than letting
+    it drift. */
 export const KIND_RULES: ReadonlyArray<{
   kind: TokenKind;
   suffix?: readonly string[];
@@ -49,11 +50,12 @@ export const KIND_RULES: ReadonlyArray<{
                             prefix: ['--text-'] },
   { kind: 'radius',         suffix: ['-radius'], prefix: ['--radius-'] },
   // Three stroke roles share the `--border-width-*` scale: a border encloses,
-  // a divider separates, an accent emphasises. `set-geometry` moves each role
-  // on its own, so a suffix has to say which line it names.
-  { kind: 'divider-width',  suffix: ['-divider-width', '-divider-thickness', '-hairline-thickness', '-thickness'] },
-  { kind: 'divider-height', suffix: ['-divider-height', '-track-height'] },
-  { kind: 'divider-inset',  suffix: ['-divider-inset', '-inset'] },
+  // a hairline separates, an indicator emphasises. `set-geometry` moves each
+  // role on its own, so a suffix has to say which line it names.
+  { kind: 'hairline-width', suffix: ['-hairline-width'] },
+  { kind: 'indicator-width', suffix: ['-indicator-width'] },
+  { kind: 'track-height',   suffix: ['-track-height'] },
+  { kind: 'hairline-inset', suffix: ['-hairline-inset'] },
   { kind: 'dot-size',       suffix: ['-dot-size'] },
   { kind: 'blur',           suffix: ['-blur'], prefix: ['--blur-'] },
   { kind: 'scale',          suffix: ['-scale'], prefix: ['--scale-'] },
@@ -62,17 +64,16 @@ export const KIND_RULES: ReadonlyArray<{
   { kind: 'gap',            suffix: ['-gap'] },
   { kind: 'duration',       suffix: ['-duration'], prefix: ['--duration-'] },
   { kind: 'easing',         suffix: ['-easing'], prefix: ['--ease-'] },
-  { kind: 'accent-width',   suffix: ['-accent-width', '-indicator-width'] },
   { kind: 'border-width',   suffix: ['-border-width'], prefix: ['--border-width-'] },
   { kind: 'border',         suffix: ['-border'], prefix: ['--border-'] },
   // A dimension with no more specific name behind it — a panel's width, an
   // avatar's size. Last of the geometry rules, so every `-border-width`,
-  // `-divider-height`, `-icon-size` and the rest claim their token first.
+  // `-track-height`, `-icon-size` and the rest claim their token first.
   { kind: 'length',         suffix: ['-width', '-height', '-size'] },
   // Fills. A tint is a wash over a surface, so it takes the surface picker: the
   // full palette with an alpha, not just the tint stops it defaults to.
-  { kind: 'surface',        suffix: ['-surface', '-fill', '-divider', '-background', '-indicator',
-                                     '-thumb', '-accent', '-color', '-tint', '-opacity'],
+  { kind: 'surface',        suffix: ['-surface', '-fill', '-indicator',
+                                     '-thumb', '-color', '-tint', '-opacity'],
                             prefix: ['--surface-', '--tint', '--color-'] },
 ];
 

package/src/editor/core/sketch/sketchLayer.ts

@@ -95,7 +95,7 @@ interface PartSpec {
 }
 
 const BADGE_VARIANTS = [
-  'primary', 'accent', 'special', 'neutral', 'alternate',
+  'brand', 'accent', 'special', 'neutral', 'alternate',
   'canvas', 'info', 'success', 'warning', 'danger',
 ];
 /** `outline` is filled by its border alone, so it is listed separately. */
@@ -169,7 +169,7 @@ const PART_SPECS: readonly PartSpec[] = [
   },
   {
     sel: '.es-root.variant-container > .section-content',
-    fill: 'var(--collapsiblesection-container-expanded-surface)', stroke: 'transparent',
+    fill: 'var(--collapsiblesection-container-open-surface)', stroke: 'transparent',
     hatch: 'var(--collapsiblesection-container-frame-border)',
   },
   {
@@ -218,7 +218,7 @@ const PART_SPECS: readonly PartSpec[] = [
     unmasked: true,
   },
   { sel: '.tab', stem: 'tabbar-default', radius: 'var(--tabbar-default-tab-top-radius, 0px)' },
-  { sel: '.tab.active', stem: 'tabbar-active', radius: 'var(--tabbar-active-tab-top-radius, 0px)' },
+  { sel: '.tab.selected', stem: 'tabbar-selected', radius: 'var(--tabbar-selected-tab-top-radius, 0px)' },
   {
     sel: '.segmented-control',
     fill: 'var(--segmentedcontrol-bar-surface)',

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

@@ -1,7 +1,7 @@
 /**
  * Component-config migration, disk-shape in and disk-shape out. Extracted
- * from `editorStore.ts` (Wave 1 of `docs/plans/theme-completeness.md`) so the
- * server (`normalizeTheme`) can run the same migration an embedded theme
+ * from `editorStore.ts` so the server (`normalizeTheme`) can run the same
+ * migration an embedded theme
  * config gets on the client, instead of reading it raw.
  */
 
@@ -98,7 +98,7 @@ function renameSectionDividerObjectSlots(
   }
 
   // If we found a canvas gradient (any era), fan it into the three new
-  // per-variant background slots and drop every other family's gradient.
+  // per-variant surface slots and drop every other family's gradient.
   // If no canvas gradient is found, pass through non-family keys verbatim
   // so non-migration data (theme tokens, other components) isn't touched.
   const out: Record<string, AliasDiskValue> = {};
@@ -116,14 +116,22 @@ function renameSectionDividerObjectSlots(
         break;
       }
     }
-    // Pass through anything that's already at the final lg/md/sm shape so
-    // re-running the migration is idempotent.
     if (isFamilyGradient) continue;
+    // A size-keyed `-background` slot is the pre-surface-rename shape (the
+    // migration runner only sees string keys, so an object-valued one never
+    // reaches it); carry its value forward under `-surface`.
+    const backgroundVariant = SIZE_VARIANTS.find((v) => key === `--sectiondivider-${v}-background`);
+    if (backgroundVariant) {
+      out[`--sectiondivider-${backgroundVariant}-surface`] = value;
+      continue;
+    }
+    // Pass through anything that's already at the final lg/md/sm `-surface`
+    // shape so re-running the migration is idempotent.
     out[key] = value;
   }
   if (canvasGradient !== undefined) {
     for (const v of SIZE_VARIANTS) {
-      out[`--sectiondivider-${v}-background`] = canvasGradient;
+      out[`--sectiondivider-${v}-surface`] = canvasGradient;
     }
   }
   return out;

package/src/editor/core/themes/migrations/2026-09-13-badge-brand.ts

@@ -0,0 +1,42 @@
+import type { Migration } from './index';
+
+/**
+ * Badge and CornerBadge say brand (2026-09-13).
+ *
+ * `primary` meant two things: the one primary action on Button and
+ * IconButton, and the brand color family on Badge and CornerBadge. The
+ * badges take the name their tokens already carry (`--surface-brand`);
+ * Button's and IconButton's `primary` is untouched. Values are unchanged, so
+ * this is a pure key rename.
+ */
+const BADGE_SUFFIXES = [
+  'surface', 'text', 'border',
+  'text-font-family', 'text-font-size', 'text-font-weight', 'text-line-height',
+  'border-width', 'radius', 'padding', 'shadow', 'blur', 'icon-size',
+];
+const CORNERBADGE_SUFFIXES = ['surface', 'border', 'text'];
+
+const RENAMES: Record<string, Record<string, string>> = {
+  badge: Object.fromEntries(
+    BADGE_SUFFIXES.map((s) => [`--badge-primary-${s}`, `--badge-brand-${s}`]),
+  ),
+  cornerbadge: Object.fromEntries(
+    CORNERBADGE_SUFFIXES.map((s) => [`--cornerbadge-primary-${s}`, `--cornerbadge-brand-${s}`]),
+  ),
+};
+
+export const componentMigration_2026_09_13_badgeBrand: Migration = {
+  id: '2026-09-13-badge-brand',
+  fromVersion: 34,
+  toVersion: 35,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES[meta.component] : undefined;
+    if (!renames) return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/2026-09-13-collapsiblesection-open.ts

@@ -0,0 +1,33 @@
+import type { Migration } from './index';
+
+/**
+ * CollapsibleSection's expanded state reads open (2026-09-13).
+ *
+ * `expanded` is a prop rename to `open`, matching Dialog and Tooltip. The
+ * four `-expanded-` properties read `-open-`. Values are unchanged, so this
+ * is a pure key rename.
+ */
+const RENAMES: Record<string, Record<string, string>> = {
+  collapsiblesection: {
+    '--collapsiblesection-chromeless-expanded-padding': '--collapsiblesection-chromeless-open-padding',
+    '--collapsiblesection-hairline-expanded-padding': '--collapsiblesection-hairline-open-padding',
+    '--collapsiblesection-container-expanded-surface': '--collapsiblesection-container-open-surface',
+    '--collapsiblesection-container-expanded-padding': '--collapsiblesection-container-open-padding',
+  },
+};
+
+export const componentMigration_2026_09_13_collapsiblesectionOpen: Migration = {
+  id: '2026-09-13-collapsiblesection-open',
+  fromVersion: 33,
+  toVersion: 34,
+  appliesTo: 'component-config',
+  apply(rawVars, meta) {
+    const renames = meta.component ? RENAMES[meta.component] : undefined;
+    if (!renames) return { ...rawVars };
+    const out: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[renames[key] ?? key] = value;
+    }
+    return out;
+  },
+};