@motion-proto/live-tokens 0.71.0 → 0.72.0

package/.claude/skills/live-tokens-check-compliance/SKILL.md

@@ -52,7 +52,13 @@ in a line what the rule holds and which of two kinds the fix is:
 Where a finding looks deliberate, a translucent overlay on an app shell or a
 layout size the project owns, say so and name the config entry that would
 record the decision: `"checks": { "rules": { "<rule>": "warn" } }` in
-`live-tokens.config.json`. Recording it is the user's call, not yours.
+`live-tokens.config.json`. Where a whole file is not a themed surface at all,
+hand-tuned artwork or vendored CSS, the entry is
+`"checks": { "exclude": ["src/art/hero.css"] }` — a project-relative path, a
+directory covering what is under it, and naming the file on the command line
+still checks it. Prefer the narrower one: an exclusion drops one file, a
+severity change drops a rule everywhere. Recording either is the user's call,
+not yours.
 
 ## Report
 

package/.claude/skills/live-tokens-create-component/SKILL.md

@@ -230,9 +230,9 @@ It *warns* (non-fatal) when a token-backed default still carries a px or rem ter
 
 Exit code 0 means the static contract is met. Resolve warnings before shipping, or run with `--strict` to make them fail. `--json` prints findings with a stable `rule` id, so you can work through one rule at a time and re-run.
 
-**Then run the registry contract test.** If you're authoring inside the package itself, `src/editor/component-editor/registryContract.test.ts` runs `describe.each(getComponentRegistryEntries())` and verifies, per component, that the registration resolves to a real `sourceFile` and a non-empty schema, that schema variables are unique, that every editable token (excluding `hidden: true`, `kind: 'gradient'`, and padding-side suffixes) is declared in the runtime `<style>` block and seeded in `src/live-tokens/data/component-configs/<id>/default.json`, and that `setComponentAlias` round-trips the alias through the slice.
+**Then run the registry contract test.** `checkRegistryEntry`, from `@motion-proto/live-tokens/component-editor/contract`, takes one registry entry and returns a violation line per failure, so a suite over your own components is a `describe.each` and one call. Per component it verifies that the registration resolves to a real `sourceFile` and a non-empty schema, that schema variables are unique, that every editable token is declared in the runtime `<style>` block and seeded in `component-configs/<id>/default.json`, that a token declaring `minOpacity` seeds at or above its floor, and that `setComponentAlias` round-trips the alias through the slice. The test file, the two lines in it that are load-bearing, and the path options are in `references/contract-tests.md`.
 
-A new first-party component is auto-covered the moment it lands in `builtInRegistry` — `npm test` will fail if any of the five checks miss. For a consumer-authored component, mirror this pattern in your own test suite if you want the same drift protection: `getComponentRegistryEntries` is exported from `@motion-proto/live-tokens` and returns every registration, shipped and custom, once your `main.ts` has run.
+Inside the package, `src/editor/component-editor/registryContract.test.ts` is that same file over `builtInRegistry`, so a new first-party component is auto-covered the moment it lands there — `npm test` fails if any check misses.
 
 **If your component declares `intrinsics`, the intrinsics contract test covers it too.** `src/editor/component-editor/intrinsicsContract.test.ts` iterates every entry with an `intrinsics` array and asserts, per (intrinsic, variant), that the runtime `:global(:root)` declares a default, the default is one of the spec's `values`, and the editor's `default` equals the runtime default. This is what would have caught a getter defaulting to `center` while `:global(:root)` says `start`. Same auto-coverage rule: declare `intrinsics` on the registry entry and the test picks it up.
 

package/.claude/skills/live-tokens-create-component/references/contract-tests.md

@@ -0,0 +1,99 @@
+# The registry contract as a test in your own project
+
+`checkRegistryEntry` is the contract the package holds its own 26 components
+to, exported so a project outside the package can run it over its own. It takes
+one registry entry and returns a violation line per failure; an empty array is
+the pass.
+
+```ts
+// tests/registryContract.test.ts
+// @vitest-environment happy-dom
+import { describe, it, expect } from 'vitest';
+import { getComponentRegistryEntries, registerComponent } from '@motion-proto/live-tokens';
+import { checkRegistryEntry } from '@motion-proto/live-tokens/component-editor/contract';
+import MyWidgetEditor, { allTokens } from '../src/system/components/MyWidgetEditor.svelte';
+
+registerComponent({
+  id: 'mywidget',
+  label: 'My Widget',
+  icon: 'fas fa-magic',
+  sourceFile: 'src/system/components/MyWidget.svelte',
+  editorComponent: MyWidgetEditor,
+  schema: allTokens,
+});
+
+const mine = getComponentRegistryEntries().filter((e) => e.origin === 'custom');
+
+describe.each(mine.map((e) => [e.id, e] as const))('%s', (_id, entry) => {
+  it('meets the registry contract', () => {
+    expect(checkRegistryEntry(entry)).toEqual([]);
+  });
+});
+```
+
+Two lines there are load-bearing.
+
+- **Register at the top of the test file**, rather than importing `main.ts`.
+  The entries have to exist before `describe.each` reads them, and
+  `bootLiveTokens` would mount the app.
+- **Filter on `origin`.** The registry always carries the shipped components
+  too, and their `sourceFile` paths are relative to the package root, not
+  yours. Without the filter every built-in fails on a path that does not exist
+  in your project.
+
+## Setup
+
+`vitest` and `happy-dom` as devDependencies, and the svelte plugin already in
+`vite.config.ts` so the editor `.svelte` import resolves. The helper reads the
+runtime file and `default.json` off disk, which is why it is node-only and has
+its own subpath.
+
+The package ships Svelte and TypeScript source, and `bootLiveTokens` imports the
+FontAwesome stylesheet. Left external, Node meets that `.css` and stops with
+`Unknown file extension ".css"`, before a single test runs. Inline both so Vite
+transforms them:
+
+```ts
+// vitest.config.ts
+import { defineConfig, mergeConfig } from 'vitest/config';
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      server: { deps: { inline: [/@motion-proto\/live-tokens/, /@fortawesome/] } },
+    },
+  }),
+);
+```
+
+## Paths
+
+Paths resolve against `process.cwd()` and `src/live-tokens/data/component-configs`.
+A project that moved either passes them:
+
+```ts
+checkRegistryEntry(entry, { projectRoot, componentConfigsDir });
+```
+
+`componentConfigsDir` is the same directory `live-tokens.config.json` names.
+
+## What it holds
+
+1. **Registration** — `sourceFile` resolves to a real file, the schema is non-empty.
+2. **Uniqueness** — no schema variable is declared twice.
+3. **Editor to runtime** — every editable token's CSS var is declared in the
+   runtime's `<style>` block, so an edit has something to repaint.
+4. **Editor to default config** — every editable token has a seed alias in
+   `component-configs/<id>/default.json`, so the component adopts with full
+   defaults. A component with no `default.json` is editor-only; this check and
+   the next one skip it.
+5. **Opacity floors** — a token declaring `minOpacity` ships a default at or
+   above it, so a floating panel starts out legible over page content.
+6. **Round-trip** — `setComponentAlias` persists into the slice under the same key.
+
+Checks 3 and 4 exclude `hidden: true` tokens, `kind: 'gradient'` tokens (stored
+as gradient objects, not vars), and `-padding-(top|right|bottom|left)` suffixes
+(written on demand by the split-padding UI and read through the `themed-padding`
+mixin's fallback chain, so they exist as neither `:root` declarations nor seeds).

package/.claude/skills/live-tokens-create-component/references/sketch-mode.md

@@ -176,8 +176,7 @@ inherits, so one declaration covers everything under it:
 
 Travel is stated in px against a glyph whose size the layer cannot know, so the
 dial that suits a card's worth of artwork tears a 16px icon apart. Reach for the
-soft bank before reaching for `none`. The shipped `SectionDivider` is the worked
-example.
+soft bank before reaching for `none`.
 
 ## First-party components
 

package/.claude/skills/live-tokens-create-component/references/token-naming.md

@@ -64,6 +64,12 @@ to that list, so the two cannot drift apart.
 | `-padding`      | Internal spacing                                              |
 | `-gap`          | Spacing between sibling elements                              |
 
+`-width`, `-height` and `-size` are the fall-through: any dimension with no
+more specific name behind it. They read the `--space-*` scale through the same
+picker `-gap` uses, and they match last, so `-border-width`, `-divider-height`,
+`-icon-size` and the rest claim their token first. Reach for the specific name
+when one fits; a stroke is `-border-width` even where the CSS says `outline:`.
+
 ## Typography
 
 | Suffix             | Meaning                  |

package/CHANGELOG.md

@@ -1,5 +1,82 @@
 # Changelog
 
+## 0.72.0 — The contract a consumer can run
+
+### Added
+
+- **The registry contract is a function a consumer can run.** The six
+  per-component checks that hold this package's own components — registration
+  resolves, schema variables are unique, every editable token is declared in
+  the runtime `<style>` and seeded in `default.json`, a declared `minOpacity`
+  is honoured, `setComponentAlias` round-trips — are now `checkRegistryEntry`,
+  exported from `@motion-proto/live-tokens/component-editor/contract`. It takes
+  one registry entry and returns a violation line per failure, so a project
+  outside this package holds its own components to the same contract with a
+  `describe.each` and one call. Paths resolve against `process.cwd()` and
+  `src/live-tokens/data/component-configs`, or the `projectRoot` and
+  `componentConfigsDir` passed in. Node-only, hence its own subpath.
+  `live-tokens-create-component` carries the test file in
+  `references/contract-tests.md`; filtering the registry on
+  `origin === 'custom'` is the line that matters, since the shipped entries
+  name paths relative to the package root.
+
+- **`"checks": { "exclude": [...] }` in `live-tokens.config.json`.** Paths the
+  checkers skip when they discover their own targets: a project-relative path,
+  a directory covering what is under it. For a file that is not a themed
+  surface at all — hand-tuned artwork, vendored CSS — where the only other way
+  out was downgrading a rule for the whole project. Naming the file on the
+  command line still checks it, so the escape hatch cannot hide a file from
+  someone looking straight at it. The dev plugin now also recognises `checks`
+  and `componentDirs`, which the CLI has read for some time while the plugin
+  warned they were unknown keys.
+
+### Changed (breaking)
+
+- **`FloatingTokenTags` is demo artwork, not a shipped component.** It moved to
+  `src/demo/`, so it leaves the published package, the component query and the
+  count, which now agree with the registry at 26. **Breaking for anyone
+  importing `@motion-proto/live-tokens/components/FloatingTokenTags.svelte`;**
+  it was only ever the hero animation of the demo, and it never had a
+  `:global(:root)` block, an editor, or a registry entry.
+
+- **The SectionDivider title outline is removed.** It was the only reason the title was an
+  SVG `<text>` behind a `feMorphology` filter rather than an element, and that
+  SVG carried a `getBBox()` viewBox, a per-instance `MutationObserver` on the
+  document's inline style (filter primitives cannot read a CSS var, so the
+  resolved width and colour had to be read back and pushed onto them by hand),
+  font-load listeners to re-measure, and a title that was neither selectable nor
+  findable. It shipped transparent in the default and in all eight presets, and
+  the trap-out it was built for is done by the layout: the `through-label`
+  hairlines flank the title in a flex row, so no rule ever runs behind the
+  glyphs. The title is now a span that inherits typography like every other
+  component's. `--sectiondivider-{lg,md,sm}-title-outline-width` and
+  `-title-outline-color` are dropped by a component-config migration; the
+  `outlineWidthVariable` / `outlineColorVariable` rows on `TypeGroupConfig` go
+  with them, since nothing else declared one.
+
+### Changed
+
+- **`registered` is read from the registry for shipped components too.** The
+  query assumed a component under `src/system/components` was registered, so
+  `live-tokens components` could name one the editor cannot open and
+  pick-component does not list. It now reads the package's own
+  `builtInRegistry`, the same parse `check-component` uses, which the two now
+  share. A component that is discovered but registered nowhere reports
+  `registered: false`, prints `(NOT registered)`, and is counted out of the
+  catalogue in the summary line.
+
+### Fixed
+
+- **A bare `-width`, `-height` or `-size` no longer renders a colour picker.**
+  The three sat in `KIND_RULES` under `surface`, so `--widget-panel-width` drew
+  a palette while the naming vocabulary documented it as geometry. They are now
+  a `length` kind, matched last among the geometry rules so `-border-width`,
+  `-divider-height`, `-icon-size` and the rest still claim their token first,
+  and drawn with the `--space-*` picker `-gap` uses. The suffix vocabulary is
+  unchanged, so no token is renamed and no project has to migrate. `adjust`
+  does not take the kind: its ladders are density and shape, and a panel width
+  is neither.
+
 ## 0.71.0 — Check this project
 
 ### Added

package/README.md

@@ -11,7 +11,7 @@ The editor is dev-only. Production builds get plain CSS variables and the compon
 ## Features
 
 - **Live token editing.** Colors, typography, spacing, radii, shadows, motion, palettes, and gradients. Every input writes a CSS variable, so the page repaints with no reload and no build step.
-- **Live component editing.** 26 shipped Svelte components (Button, IconButton, Input, Card, Dialog, Badge, Callout, Table, Tooltip, Toggle, TabBar, SegmentedControl, RadioButton, MenuSelect, ProgressBar, CornerBadge, SectionDivider, CollapsibleSection, Notification, Image, ImageLightbox, CodeSnippet, SideNavigation, Panel, InlineEditActions) declare their design-token aliases in a `:global(:root)` block. Rewire an alias from the component's editor and it updates everywhere that component is used, on your real pages.
+- **Live component editing.** 26 shipped Svelte components (Button, IconButton, Input, Card, Dialog, Badge, Callout, Table, Tooltip, Toggle, TabBar, SegmentedControl, RadioButton, MenuSelect, ProgressBar, CornerBadge, SectionDivider, CollapsibleSection, Notification, Image, ImageLightbox, CodeSnippet, SideNavigation, Panel, InlineEditActions, Slider) declare their design-token aliases in a `:global(:root)` block. Rewire an alias from the component's editor and it updates everywhere that component is used, on your real pages.
 - **Four dev-only routes.** `/live-tokens/editor` for tokens, `/live-tokens/colors` for palettes, `/live-tokens/components` for per-component aliases, `/live-tokens/docs` for the user guide.
 - **Editor overlay.** Pins to the top right of every dev page and opens the editor in a side panel or floating window, so you edit on the page you are styling. Its "Page Source" button opens the current page's `.svelte` file in VS Code.
 - **Themes.** A theme is a whole look in one file: colors and type plus a config for every component, stored by value. Loading one changes a single pointer file, and nothing your site ships changes until you Adopt. Export a theme and import it into another project to restore the look in one step.

package/bin/check-component.mjs

@@ -23,7 +23,7 @@ import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
 import { extname, join, relative } from 'node:path';
 import { hasColorLiteral, hasDimensionLiteral, stripVarFallbacks } from './lib/cssValues.mjs';
 import { lineOf } from './lib/findings.mjs';
-import { PKG_ROOT, declaredCustomProperties, extractGlobalRootBlocks, isContractToken, loadVocabulary } from './lib/tokenVocabulary.mjs';
+import { PKG_ROOT, builtInIds, declaredCustomProperties, extractGlobalRootBlocks, isContractToken, loadVocabulary } from './lib/tokenVocabulary.mjs';
 
 export const COMPONENT_RULES = {
   'invalid-id': 'error',
@@ -71,18 +71,9 @@ function readKnownSuffixes(root) {
   return [];
 }
 
-const BUILT_IN_REGISTRY = 'src/editor/component-editor/registry.ts';
-
 /** True when `id` is one of the package's own components. */
 function isBuiltIn(id) {
-  for (const base of [PKG_ROOT, process.cwd()]) {
-    const path = join(base, BUILT_IN_REGISTRY);
-    if (!existsSync(path)) continue;
-    const src = readFileSync(path, 'utf8');
-    const block = src.match(/builtInRegistry[^=]*=\s*Object\.freeze\(\{([\s\S]*?)\n\}\);/);
-    if (block && new RegExp(`\\bid:\\s*'${id}'`).test(block[1])) return true;
-  }
-  return false;
+  return builtInIds(process.cwd(), PKG_ROOT).has(id);
 }
 
 // Per-side padding names (`--card-body-padding-top`) are written by the padding

package/bin/check-page.mjs

@@ -12,7 +12,7 @@
 
 import { existsSync, readFileSync, statSync } from 'node:fs';
 import { join, relative, resolve, basename } from 'node:path';
-import { lineOf } from './lib/findings.mjs';
+import { isExcluded, lineOf } from './lib/findings.mjs';
 import { blankStrings, hasColorLiteral, hasDimensionLiteral, stripVarFallbacks } from './lib/cssValues.mjs';
 import { isContractToken, loadVocabulary, walk } from './lib/tokenVocabulary.mjs';
 import { resolveTokensCssPath } from './migrate.mjs';
@@ -382,6 +382,7 @@ export function discoverPages(root) {
   return walk(src, ['.svelte', '.css', '.ts', '.js']).filter((f) => {
     const rel = relative(root, f);
     if (NOT_PAGES.some((d) => rel.startsWith(`${d}/`))) return false;
+    if (isExcluded(rel, root)) return false;
     if (f === tokensCss || TOKEN_SOURCES.includes(basename(f))) return false;
     if (/\.(test|spec)\.[tj]s$/.test(rel)) return false;
     if (rel.endsWith('.ts') || rel.endsWith('.js')) return /main\.(ts|js)$/.test(rel);
@@ -396,7 +397,7 @@ export function checkPages(targets, { root = process.cwd(), vocabulary } = {}) {
     const full = resolve(root, t);
     if (!existsSync(full)) continue;
     if (statSync(full).isDirectory()) {
-      files.push(...walk(full, ['.svelte', '.css']));
+      files.push(...walk(full, ['.svelte', '.css']).filter((f) => !isExcluded(relative(root, f), root)));
     } else {
       files.push(full);
     }

package/bin/cli.mjs

@@ -75,7 +75,8 @@ Both check commands accept:
   --strict                    Treat warnings as errors
   --off=<rule,...>            Silence rules; --warn=/--error= change severity
                               (or set "checks": { "rules": {...} } in
-                              live-tokens.config.json)
+                              live-tokens.config.json; "checks": { "exclude":
+                              [...] } drops paths from discovery entirely)
   generate-theme <brief.json> [--no-activate] [--dry-run] [--carry-from <name>]
                               Build a full theme from a 10-seed OKLCH brief
                               (see the live-tokens-generate-theme skill),

package/bin/lib/catalogue.mjs

@@ -44,7 +44,7 @@ export function describeComponents(vocab, { root = process.cwd() } = {}) {
       name: entry.name,
       origin: entry.origin,
       file: relative(root, entry.file),
-      registered: entry.origin === 'shipped' || vocab.registered.has(entry.id),
+      registered: vocab.builtIn.has(entry.id) || vocab.registered.has(entry.id),
       description: descriptionOf(source),
       variants: entry.props?.enums.get('variant') ? [...entry.props.enums.get('variant')] : [],
       props,
@@ -99,7 +99,11 @@ export function formatComponents(list, { id } = {}) {
     if (c.description) lines.push(`${''.padEnd(29)} ${c.description}`);
   }
   lines.push('');
-  lines.push(`${list.length} component(s). \`live-tokens components <id>\` prints one with its props and tokens.`);
+  const unregistered = list.filter((c) => !c.registered).length;
+  lines.push(
+    `${list.length} component(s)${unregistered ? `, ${unregistered} not registered and so not in the catalogue` : ''}. ` +
+      '`live-tokens components <id>` prints one with its props and tokens.',
+  );
   return lines.join('\n');
 }
 

package/bin/lib/findings.mjs

@@ -30,6 +30,23 @@ export function readChecksConfig(root) {
   }
 }
 
+/**
+ * `checks.exclude` in live-tokens.config.json: paths the checkers do not read
+ * when they discover their own targets. Each entry is a project-relative path;
+ * a directory entry covers everything under it. For a file that is not a themed
+ * surface — hand-tuned artwork, vendored CSS — where the alternative is
+ * downgrading a rule for the whole project. Naming the file explicitly on the
+ * command line still checks it.
+ */
+export function isExcluded(relPath, root) {
+  const list = readChecksConfig(root).exclude;
+  if (!Array.isArray(list)) return false;
+  return list.some((entry) => {
+    const e = String(entry).replace(/\/+$/, '');
+    return relPath === e || relPath.startsWith(`${e}/`);
+  });
+}
+
 /**
  * Parse `--off=a,b --warn=c --error=d --strict --json` out of argv.
  * Unrecognised flags are returned in `rest` for the caller to handle.

package/bin/lib/report.mjs

@@ -61,7 +61,7 @@ export function buildReport(vocab, { root = process.cwd() } = {}) {
       name: c.name,
       origin: c.origin,
       file: relative(root, c.file),
-      registered: c.origin === 'shipped' || vocab.registered.has(c.id),
+      registered: vocab.builtIn.has(c.id) || vocab.registered.has(c.id),
       described: /^\s*<!--[\s\S]*?-->/.test(source),
       tokens: c.tokens.size,
       unread: unreadTokens(source, c.tokens.keys()),

package/bin/lib/tokenVocabulary.mjs

@@ -164,6 +164,24 @@ function componentFiles(roots) {
   return files;
 }
 
+/** The package's own component ids, read from the frozen registry that declares
+    them. A shipped component is registered by the package rather than by the
+    project, so it never appears in the project's own `registerComponent` scan. */
+const BUILT_IN_REGISTRY = 'src/editor/component-editor/registry.ts';
+
+export function builtInIds(root = process.cwd(), pkgRoot = PKG_ROOT) {
+  const ids = new Set();
+  for (const base of [pkgRoot, root]) {
+    const path = join(base, BUILT_IN_REGISTRY);
+    if (!existsSync(path)) continue;
+    const block = readFileSync(path, 'utf8')
+      .match(/builtInRegistry[^=]*=\s*Object\.freeze\(\{([\s\S]*?)\n\}\);/);
+    if (!block) continue;
+    for (const m of block[1].matchAll(/\bid:\s*'([a-z][a-z0-9]*)'/g)) ids.add(m[1]);
+  }
+  return ids;
+}
+
 function registeredIds(root) {
   const ids = new Set();
   for (const file of walk(join(root, 'src'), ['.ts', '.js', '.mjs', '.svelte'])) {
@@ -223,12 +241,14 @@ export function loadVocabulary({ root = process.cwd(), pkgRoot = PKG_ROOT } = {}
     });
   }
   const registered = registeredIds(root);
+  const builtIn = builtInIds(root, pkgRoot);
 
   return {
     themeTokens,
     componentTokens,
     components,
     registered,
+    builtIn,
     tokensCssPath,
     /** True when `name` resolves to something real at runtime. */
     knows(name) {

package/dist-plugin/adjust/index.cjs

@@ -81,6 +81,10 @@ var KIND_RULES = [
     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.
+  { 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.
   {
@@ -95,10 +99,7 @@ var KIND_RULES = [
       "-accent",
       "-color",
       "-tint",
-      "-opacity",
-      "-width",
-      "-height",
-      "-size"
+      "-opacity"
     ],
     prefix: ["--surface-", "--tint", "--color-"]
   }
@@ -281,7 +282,9 @@ var KNOWN_CONFIG_KEYS = /* @__PURE__ */ new Set([
   "componentConfigsDir",
   "themesDir",
   "manifestsDir",
-  "tokensCssPath"
+  "tokensCssPath",
+  "componentDirs",
+  "checks"
 ]);
 var cached = null;
 function readLiveTokensConfig() {
@@ -1125,6 +1128,29 @@ var componentMigration_2026_09_01_gateSuffixEnabled = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-02-sectiondivider-drop-title-outline.ts
+var DROPPED2 = new Set(
+  ["lg", "md", "sm"].flatMap((v) => [
+    `--sectiondivider-${v}-title-outline-width`,
+    `--sectiondivider-${v}-title-outline-color`
+  ])
+);
+var componentMigration_2026_09_02_sectiondividerDropTitleOutline = {
+  id: "2026-09-02-sectiondivider-drop-title-outline",
+  fromVersion: 25,
+  toVersion: 26,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "sectiondivider") return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (DROPPED2.has(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/index.ts
 var MIGRATIONS = [
   colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -1158,7 +1184,8 @@ var MIGRATIONS = [
   colorsAndTypeMigration_2026_09_01_tintRename,
   componentMigration_2026_09_01_tintRename,
   componentMigration_2026_09_01_tabbarActiveTint,
-  componentMigration_2026_09_01_gateSuffixEnabled
+  componentMigration_2026_09_01_gateSuffixEnabled,
+  componentMigration_2026_09_02_sectiondividerDropTitleOutline
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

package/dist-plugin/adjust/index.d.cts

@@ -1,5 +1,5 @@
 import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-DSV3Zisf.cjs';
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-bJTCEO4H.cjs';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BhWzd5cL.cjs';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
 
 type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width';
@@ -37,7 +37,7 @@ interface AdjustResult {
 }
 declare function adjustAliases(configs: Record<string, ComponentConfig>, ops: readonly AdjustOp[], now: string): AdjustResult;
 
-type TokenKind = 'surface' | 'border' | 'border-width' | 'radius' | 'divider-width' | 'divider-height' | 'divider-inset' | 'dot-size' | 'blur' | 'scale' | 'shadow' | 'font-family' | 'font-weight' | 'font-size' | 'line-height' | 'letter-spacing' | 'padding' | 'gap' | 'duration' | 'easing' | 'text-color';
+type TokenKind = 'surface' | 'border' | 'border-width' | 'radius' | 'divider-width' | 'divider-height' | 'divider-inset' | 'dot-size' | 'length' | 'blur' | 'scale' | 'shadow' | 'font-family' | 'font-weight' | 'font-size' | 'line-height' | 'letter-spacing' | 'padding' | 'gap' | 'duration' | 'easing' | 'text-color';
 /** Side-aware kind test. Per-side paddings (`--card-default-body-padding-top`)
     are written by UIPaddingSelector and never declared as editor tokens, so
     `rawKind` never meets one; the CLI does, and they belong with their parent. */

package/dist-plugin/adjust/index.d.ts

@@ -1,5 +1,5 @@
 import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-DSV3Zisf.js';
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-bJTCEO4H.js';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BhWzd5cL.js';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
 
 type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width';
@@ -37,7 +37,7 @@ interface AdjustResult {
 }
 declare function adjustAliases(configs: Record<string, ComponentConfig>, ops: readonly AdjustOp[], now: string): AdjustResult;
 
-type TokenKind = 'surface' | 'border' | 'border-width' | 'radius' | 'divider-width' | 'divider-height' | 'divider-inset' | 'dot-size' | 'blur' | 'scale' | 'shadow' | 'font-family' | 'font-weight' | 'font-size' | 'line-height' | 'letter-spacing' | 'padding' | 'gap' | 'duration' | 'easing' | 'text-color';
+type TokenKind = 'surface' | 'border' | 'border-width' | 'radius' | 'divider-width' | 'divider-height' | 'divider-inset' | 'dot-size' | 'length' | 'blur' | 'scale' | 'shadow' | 'font-family' | 'font-weight' | 'font-size' | 'line-height' | 'letter-spacing' | 'padding' | 'gap' | 'duration' | 'easing' | 'text-color';
 /** Side-aware kind test. Per-side paddings (`--card-default-body-padding-top`)
     are written by UIPaddingSelector and never declared as editor tokens, so
     `rawKind` never meets one; the CLI does, and they belong with their parent. */

package/dist-plugin/adjust/index.js

@@ -1,10 +1,10 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-GPIBU44G.js";
+} from "../chunk-YLCOIGQC.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs
-} from "../chunk-RVE3MNKM.js";
+} from "../chunk-W6Y4BWFB.js";
 
 // src/editor/core/components/aliasKinds.ts
 var KIND_RULES = [
@@ -49,6 +49,10 @@ var KIND_RULES = [
     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.
+  { 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.
   {
@@ -63,10 +67,7 @@ var KIND_RULES = [
       "-accent",
       "-color",
       "-tint",
-      "-opacity",
-      "-width",
-      "-height",
-      "-size"
+      "-opacity"
     ],
     prefix: ["--surface-", "--tint", "--color-"]
   }

package/dist-plugin/{chunk-2YNERPXY.js → chunk-RIXO2E55.js}

@@ -1,7 +1,7 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION,
   runMigrations
-} from "./chunk-GPIBU44G.js";
+} from "./chunk-YLCOIGQC.js";
 
 // vite-plugin/files/versionedFileResourceServer.ts
 import fs from "fs";

package/dist-plugin/{chunk-RVE3MNKM.js → chunk-W6Y4BWFB.js}

@@ -8,7 +8,9 @@ var KNOWN_CONFIG_KEYS = /* @__PURE__ */ new Set([
   "componentConfigsDir",
   "themesDir",
   "manifestsDir",
-  "tokensCssPath"
+  "tokensCssPath",
+  "componentDirs",
+  "checks"
 ]);
 var cached = null;
 function readLiveTokensConfig() {

package/dist-plugin/{chunk-GPIBU44G.js → chunk-YLCOIGQC.js}

@@ -803,6 +803,29 @@ var componentMigration_2026_09_01_gateSuffixEnabled = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-02-sectiondivider-drop-title-outline.ts
+var DROPPED2 = new Set(
+  ["lg", "md", "sm"].flatMap((v) => [
+    `--sectiondivider-${v}-title-outline-width`,
+    `--sectiondivider-${v}-title-outline-color`
+  ])
+);
+var componentMigration_2026_09_02_sectiondividerDropTitleOutline = {
+  id: "2026-09-02-sectiondivider-drop-title-outline",
+  fromVersion: 25,
+  toVersion: 26,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "sectiondivider") return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (DROPPED2.has(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/index.ts
 var MIGRATIONS = [
   colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -836,7 +859,8 @@ var MIGRATIONS = [
   colorsAndTypeMigration_2026_09_01_tintRename,
   componentMigration_2026_09_01_tintRename,
   componentMigration_2026_09_01_tabbarActiveTint,
-  componentMigration_2026_09_01_gateSuffixEnabled
+  componentMigration_2026_09_01_gateSuffixEnabled,
+  componentMigration_2026_09_02_sectiondividerDropTitleOutline
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

package/dist-plugin/{dataPaths-bJTCEO4H.d.ts → dataPaths-BhWzd5cL.d.cts}

@@ -16,6 +16,10 @@ interface LiveTokensFileConfig {
      * migrate` CLI has no plugin options, so it reads this key to locate the file.
      */
     tokensCssPath?: string;
+    /** Extra directories the component checkers and the registry query discover. */
+    componentDirs?: string[];
+    /** Checker settings: `rules` per-rule severities, `exclude` paths to skip. */
+    checks?: Record<string, unknown>;
 }
 interface ResolveDataDirsInput {
     dataDir?: string;

package/dist-plugin/{dataPaths-bJTCEO4H.d.cts → dataPaths-BhWzd5cL.d.ts}

@@ -16,6 +16,10 @@ interface LiveTokensFileConfig {
      * migrate` CLI has no plugin options, so it reads this key to locate the file.
      */
     tokensCssPath?: string;
+    /** Extra directories the component checkers and the registry query discover. */
+    componentDirs?: string[];
+    /** Checker settings: `rules` per-rule severities, `exclude` paths to skip. */
+    checks?: Record<string, unknown>;
 }
 interface ResolveDataDirsInput {
     dataDir?: string;