@motion-proto/live-tokens 0.71.0 → 0.72.1

package/.claude/skills/live-tokens-fix-findings/SKILL.md

@@ -3,73 +3,36 @@ name: live-tokens-fix-findings
 description: Bring an existing @motion-proto/live-tokens project into line with its design system by running check-page and check-component, reading the findings, and fixing each by rule until both exit 0. Use when the user asks to make the build pass, fix the design-system errors or warnings, clean up the literals, replace hex or pixel values with tokens, make a page or component themeable, or apply what a check reported. Not for the check itself (live-tokens-check-compliance reports and edits nothing), not for building a new page (live-tokens-build-page) or a new component (live-tokens-create-component), which run the same gate as their last step, and not for a single token edit (use the editor).
 ---
 
-# Fixing what the checkers report
-
-Two checkers hold a project to its design system. `check-page` holds pages:
-every component comes from the catalogue and is passed only the props it
-declares, and every value in page CSS is a theme token. `check-component`
-holds authored components: every token names a semantic property and its
-default is the theme token that property reads. A page or component that
-passes repaints when the theme changes. One that does not has opted out of the
-system silently, and these findings are where.
-
-This skill is the loop for code that already exists. Run the checker, fix one
-rule at a time, run it again, and stop only when both exit 0. When the user has
-not seen the state of the project yet, `npx live-tokens report --json` is the
-reading to start from, and **live-tokens-check-compliance** is the skill that
-presents it without editing; this one edits.
-
-## Reach the checkers
-
-```sh
-npx live-tokens check-page --json           # every page under src/
-npx live-tokens check-component --json      # every component authored under src/system/components
-```
-
-- **Unknown command.** The installed package predates the checkers. Upgrade
-  `@motion-proto/live-tokens`, then run `npx live-tokens migrate --check` and
-  apply what it plans with `--write`; `--tokens <path>` names a tokens.css that
-  sits somewhere other than the four default locations.
-- **No `check:design` script.** A project scaffolded by `create` has one. Add
-  it to any other project's `package.json`:
-  `"check:design": "live-tokens check-page && live-tokens check-component"`.
-  Once it passes, gate the build: `"build": "npm run check:design && vite build"`.
-- **A file, not the project.** `check-page src/pages/Home.svelte` and
-  `check-component <id>` scope a run when the user names one thing.
-
-## The loop
-
-1. Run with `--json`. Each finding carries a stable `rule`, a file, and a line.
-2. Group by rule. Take errors before warnings, and the rule with the most
-   findings first, because one recipe clears the whole group.
-3. Apply that rule's recipe, below, to every finding in the group.
-4. Run again. New findings can appear as old ones clear: a token you reached
-   for may not exist, or a moved import may land somewhere the rule now sees.
-5. Stop at exit 0. Then run once with `--strict` and report what it adds, so
-   the user can decide whether warnings are worth clearing now.
-
-Three things the loop never does:
-
-- **Silence a rule to pass.** `--off=<rule>` is for a single run while
-  working. A severity the project wants changed goes in
-  `live-tokens.config.json` under `"checks": { "rules": { "<rule>": "warn" } }`,
-  with the reason in the commit, and only when the user has made that call.
-- **Mint a token.** A literal with no token behind it is remapped to the
-  nearest existing token by role. No new `--surface-*`, `--text-*`, or
-  `--space-*` is added to `tokens.css` to match a value the page happened to
-  use. If nothing fits, say so and leave the finding.
-- **Change what the page looks like without saying so.** Most remaps land on
-  the same value. When the nearest token differs, `14px` to `--space-16` or a
-  55% black to `--scrim`, name the shift in the report.
+# Fixing the checkers' findings
+
+Two checkers hold a project to its design system. `check-page` holds pages: every component comes from the catalogue and is passed only the props it declares, and every value in page CSS is a theme token. `check-component` holds authored components: every token names a semantic property and its default is the theme token that property reads. A page or component that passes repaints when the theme changes. One that fails has opted out of the system silently, and its findings say where.
+
+This skill is the loop for code that already exists. When the user has not seen the state of the project yet, **live-tokens-check-compliance** presents `npx live-tokens report` without editing; this skill edits.
+
+## Workflow
+
+1. Run both checkers with `--json`. Each finding carries a stable `rule`, a file, and a line.
+   ```sh
+   npx live-tokens check-page --json           # every page under src/
+   npx live-tokens check-component --json      # every component authored under src/system/components
+   ```
+   `check-page src/pages/Home.svelte` and `check-component <id>` scope a run when the user names one thing. Unknown command means the installed package predates the checkers: upgrade `@motion-proto/live-tokens`, then run `npx live-tokens migrate --check` and apply what it plans with `--write` (`--tokens <path>` for a tokens.css outside the four default locations).
+2. Group by rule. Take errors before warnings, and the rule with the most findings first, because one recipe clears the whole group.
+3. Apply that rule's recipe to every finding in the group: colour by role, geometry by scale, or the row in the table below. A component outside the catalogue hands off to **live-tokens-pick-component** for the shipped one that fits, or to **live-tokens-create-component**.
+4. Run again. New findings can appear as old ones clear: a token you reached for may not exist, or a moved import may land where a rule now sees it. Stop at exit 0.
+5. Run once with `--strict` and report what it adds, so the user can decide whether warnings are worth clearing now. Then report by rule.
+
+A project scaffolded by `create` has a `check:design` script. Give any other project one in `package.json`, `"check:design": "live-tokens check-page && live-tokens check-component"`, and once it passes, gate the build: `"build": "npm run check:design && vite build"`.
+
+## Three things the loop never does
+
+- **Silence a rule to pass.** `--off=<rule>` is for a single run while working. A severity the project wants changed goes in `live-tokens.config.json` under `"checks": { "rules": { "<rule>": "warn" } }`, with the reason in the commit, and only when the user has made that call.
+- **Mint a token.** A literal with no token behind it is remapped to the nearest existing token by role. No new `--surface-*`, `--text-*`, or `--space-*` is added to `tokens.css` to match a value the page happened to use. If nothing fits, say so and leave the finding.
+- **Change what the page looks like without saying so.** Most remaps land on the same value. When the nearest token differs, `14px` to `--space-16` or a 55% black to `--scrim`, name the shift in the report.
 
 ## Colour by role, never by hue
 
-`color-literal` is the finding that takes judgement. The replacement is the
-token for what the colour *does*, not the token that happens to be closest in
-hue, because the theme will move every role together and the page must move
-with it. `npx live-tokens tokens --family surface` prints a family's names and
-values (`text`, `border`, `scrim`, `tint` likewise; `--json` for data); the
-families are fixed.
+`color-literal` is the finding that takes judgement. The replacement is the token for what the colour *does*, not the token nearest in hue, because the theme moves every role together and the page must move with it. `npx live-tokens tokens --family surface` prints a family's names and values (`text`, `border`, `scrim`, `tint` likewise; `--json` for data); the families are fixed.
 
 | The literal is | Token family | Notes |
 | --- | --- | --- |
@@ -82,15 +45,11 @@ families are fixed.
 | Fully transparent | `--color-transparent` | Never `transparent` inside a component default. |
 | A gradient | `--gradient-*` | Or compose one from surface tokens. |
 
-A `var(--x, #fff)` fallback is not a finding. A named colour is: `white` and
-`rebeccapurple` are literals like any hex.
+A `var(--x, #fff)` fallback is not a finding. A named colour is: `white` and `rebeccapurple` are literals like any hex.
 
 ## Geometry by scale
 
-`dimension-literal` fires only on the geometry the theme owns: padding,
-margin, gap, border and outline widths, inset offsets, radius, and shadow.
-Sizing (a hero's height, a max content width, a `minmax()` floor) is layout
-and is never reported, so leave it.
+`dimension-literal` fires only on the geometry the theme owns: padding, margin, gap, border and outline widths, inset offsets, radius, and shadow. Sizing (a hero's height, a max content width, a `minmax()` floor) is layout and is never reported, so leave it.
 
 | The literal is | Token | Notes |
 | --- | --- | --- |
@@ -100,8 +59,7 @@ and is never reported, so leave it.
 | A shadow | `--shadow-sm` through `-xl` | Replace the whole value, never one offset. |
 | Part of a `calc()` | The token inside the calc | `calc(var(--space-64) * -2 + var(--space-8))` |
 
-While in the file, motion values take `--duration-*` and `--ease-*` even
-though no rule reports them, and a `blur()` takes `--blur-*`.
+While in the file, motion values take `--duration-*` and `--ease-*` even though no rule reports them, and a `blur()` takes `--blur-*`.
 
 ## Every other rule
 
@@ -120,17 +78,12 @@ though no rule reports them, and a `blur()` takes `--blur-*`.
 | `unknown-suffix`, `state-after-property`, `disabled-is-terminal` | Rename the token. Borrow the name a shipped component uses for the same role; the vocabulary and the state model are in **live-tokens-create-component**. |
 | `color-literal`, `unknown-token-ref`, `default-not-token` (component) | The `:global(:root)` default reads a theme token, composed if needed. A structural keyword (`start`, `contain`) is declared in the editor's `intrinsics`. |
 | `phantom-editor-token`, `phantom-link` | The editor names a token the runtime never declares, or a bare font helper spans slots. Both are editor fixes; see the same skill. |
-| `missing-registration`, `missing-file`, `missing-root-block` | The component is not wired the way the recipe in **live-tokens-create-component** wires it. |
+| `invalid-id`, `missing-file`, `missing-root-block`, `no-tokens`, `missing-component-const`, `missing-all-tokens`, `missing-registration` | The component is not wired the way the recipe in **live-tokens-create-component** wires it: a lowercase id, a runtime file with a `:global(:root)` block, an editor file exporting `component` and `allTokens`, and a `bootLiveTokens` entry. |
 
 ## Report
 
-Say what changed by rule, one line per rule with the count and any visible
-shift. Say what was left and why, with the config entry if the user chose to
-lower a severity. End with the two commands and their exit codes.
+Say what changed by rule, one line per rule with the count and any visible shift. Say what was left and why, with the config entry if the user chose to lower a severity. End with the two commands and their exit codes.
 
 ## Verify
 
-Open `/live-tokens/editor` in dev and change a surface colour and a spacing
-step. Every file the loop touched should repaint. One that does not still
-holds a literal the checker cannot see, which is worth reporting as a gap in
-the checker rather than patching around.
+Open `/live-tokens/editor` in dev and change a surface colour and a spacing step. Every file the loop touched should repaint. One that does not still holds a literal the checker cannot see, which is worth reporting as a gap in the checker rather than patching around.

package/.claude/skills/live-tokens-generate-theme/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: live-tokens-generate-theme
-description: Generate a complete live-tokens theme — color, type, and geometry — from a natural-language brief, delegating the type and geometry halves to its sibling skills. Use whenever the user asks for a theme, look, vibe, brand feel, color scheme, or palette by mood, style, era, season, holiday, or hue; when they name only a color (something red-based, green and gold for St. Patrick's Day); or when they refine an existing theme (warmer, more contrast, calmer). Examples: bright and cheerful, dark and moody, brutalist, mid-century modern, Swiss and minimal, cyberpunk neon, editorial magazine, make it feel like a terminal. Not for a single token (use the editor), type alone (live-tokens-pair-fonts), or geometry alone (live-tokens-adjust-geometry).
+description: Generate a complete live-tokens theme (color, type, and geometry) from a natural-language brief, delegating the type and geometry halves to its sibling skills. Use whenever the user asks for a theme, look, vibe, brand feel, color scheme, or palette by mood, style, era, season, holiday, or hue; when they name only a color (something red-based, green and gold for St. Patrick's Day); or when they refine an existing theme (warmer, more contrast, calmer). Examples: bright and cheerful, dark and moody, brutalist, mid-century modern, Swiss and minimal, cyberpunk neon, editorial magazine, make it feel like a terminal. Not for a single token (use the editor), type alone (live-tokens-pair-fonts), or geometry alone (live-tokens-adjust-geometry).
 ---
 
 # Generating a theme from a brief
@@ -145,7 +145,7 @@ This table is the fallback. When the brief matched an entry in the mood or style
 
 One adjective moves one dial. Warmer and cooler rotate hue; calmer and louder move chroma; lighter, darker, and moodier move Canvas L and the scheme; more contrast widens the L gap between Canvas and Brand and takes chroma out of the ground rather than adding it to the garnish. Leave every seed the user did not name alone, because a refinement that re-rolls the whole palette reads as a different theme and loses the thing they liked.
 
-## What each step writes
+## Files each step writes
 
 Color writes `themes/<slug>.json` and opens it. Type and geometry write the unsaved buffers, which the page already runs. One Save in the editor keeps all three; Adopt ships them. Component aliases and gradients carry forward from the live look into a generated theme; user-tuned gradients survive, stock ones rebuild from the new families.
 

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

@@ -63,7 +63,7 @@ All four pick one option from a set. The right one depends on **option count**,
 | `Dialog`              | Modal, blocks page  | Confirmations, focused tasks the page can't continue around |
 | `Panel`               | Inline, fixed stage | A demo or preview surface whose height must not reflow     |
 
-- Default to `Card`. It's the workhorse. For full-bleed media — cover art, a poster, a chart that reaches its own border — pass `flush` (with `prose={false}`) rather than zeroing its padding tokens from the page.
+- Default to `Card`. It's the workhorse. For full-bleed media (cover art, a poster, a chart that reaches its own border) pass `flush` (with `prose={false}`) rather than zeroing its padding tokens from the page.
 - Reach for `CollapsibleSection` only when the content is *legitimately secondary* (advanced users open it; most skip). Don't use collapse as a styling choice when the content matters.
 - `Panel` is a stage, not a content container. It pins its own height so what it shows can resize without moving the page, which is what a component preview or a live example needs and what article content does not. Content goes in `Card`.
 - **Don't use `Dialog` for routine forms.** Reach for it only when the page cannot meaningfully continue until the user decides (destructive confirmations, payment, sign-in). Routine forms go inline in a `Card`.
@@ -83,7 +83,7 @@ All four pick one option from a set. The right one depends on **option count**,
 - `Tooltip` is for *what an element means*. **Don't use `Tooltip` as the primary location of important content;** it auto-dismisses and isn't accessible for must-read content.
 - `Badge` and `CornerBadge` differ only in positioning. `CornerBadge` lives at a `top-right` / `bottom-left` anchor on a parent (notification counts, "NEW" stickers).
 
-## Display family: what the page shows rather than what it asks
+## Display family: shown, not asked
 
 - `Image` frames a picture in the flow at one of four sizes, with an optional hover zoom. It is the default for any picture the page simply shows.
 - `ImageLightbox` adds click-to-open at full size and takes an array for a gallery. Use it when the detail is the point (screenshots, artwork, charts that need reading), and not for decoration: it puts a modal behind every picture it wraps.
@@ -108,4 +108,4 @@ All three can express a binary choice. The right one depends on what the choice
 
 ---
 
-If nothing in the catalogue fits (a `Slider`, a `DatePicker`, a `Stepper`, a custom widget), author it via **live-tokens-create-component**. **Don't reach for a custom component before checking the catalogue;** a custom component is a maintenance commitment.
+If nothing in the catalogue fits (a `DatePicker`, a `Stepper`, a custom widget), author it via **live-tokens-create-component**. **Don't reach for a custom component before checking the catalogue;** a custom component is a maintenance commitment.

package/CHANGELOG.md

@@ -1,5 +1,114 @@
 # Changelog
 
+## 0.72.1 — The compliance skills have a spine
+
+### Changed
+
+- **`live-tokens-check-compliance` and `live-tokens-fix-findings` open with a
+  numbered workflow**, the same spine the other six skills have: run the
+  command, read the result, apply the recipe, re-run, hand off. Both were
+  prose-first, so a reader (and the Skill Atlas that draws them) had no steps,
+  no gate, and no hand-off to find. fix-findings now also covers the four
+  wiring rules its table skipped (`invalid-id`, `no-tokens`,
+  `missing-component-const`, `missing-all-tokens`).
+
+- **`live-tokens-create-component` is 189 lines, down from 247.** The
+  standalone Toggle walkthrough is folded into the worked-examples list, the
+  verification checklist no longer restates the checker step, and the
+  registration caveat is shorter. Nothing a consumer needs to author a
+  component was removed.
+
+- **The sketch reference's inner-part example carries its reserved class.**
+  The prose said a drawn part takes its own class and its own five
+  `--sketch-*` values; the code under it showed only the CSS, so a part
+  authored from the example was left crisp inside a drawn box.
+
+### Fixed
+
+- **`live-tokens-build-page` no longer promises a Cmd+G shortcut.** There is
+  none; the columns overlay is the vertical-lines button in the overlay's
+  header.
+
+- **`live-tokens-pick-component` no longer lists `Slider` as a component the
+  catalogue lacks.** It shipped in 0.71.0.
+
+## 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-"]
   }