@motion-proto/live-tokens 0.71.0 → 0.72.0

package/dist-plugin/fontPairing/index.cjs

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

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

@@ -1,5 +1,5 @@
 import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } 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';
 
 type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';
 interface PairingFace {

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

@@ -1,5 +1,5 @@
 import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } 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';
 
 type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';
 interface PairingFace {

package/dist-plugin/fontPairing/index.js

@@ -1,7 +1,7 @@
 import {
   readLiveTokensConfig,
   resolveDataDirs
-} from "../chunk-RVE3MNKM.js";
+} from "../chunk-W6Y4BWFB.js";
 
 // src/editor/core/fonts/fontParse.ts
 function parseGoogleFontsUrl(url2) {

package/dist-plugin/generateColorsAndType/index.cjs

@@ -1651,6 +1651,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,
@@ -1684,7 +1707,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;
@@ -1999,7 +2023,9 @@ var KNOWN_CONFIG_KEYS = /* @__PURE__ */ new Set([
   "componentConfigsDir",
   "themesDir",
   "manifestsDir",
-  "tokensCssPath"
+  "tokensCssPath",
+  "componentDirs",
+  "checks"
 ]);
 var cached = null;
 function readLiveTokensConfig() {

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

@@ -1,5 +1,5 @@
 import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } 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';
 
 /**

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

@@ -1,5 +1,5 @@
 import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } 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';
 
 /**

package/dist-plugin/generateColorsAndType/index.js

@@ -19,7 +19,7 @@ import {
 import {
   CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION,
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-GPIBU44G.js";
+} from "../chunk-YLCOIGQC.js";
 import {
   cssColorToOklch,
   gamutClamp,
@@ -30,7 +30,7 @@ import {
 import {
   readLiveTokensConfig,
   resolveDataDirs
-} from "../chunk-RVE3MNKM.js";
+} from "../chunk-W6Y4BWFB.js";
 
 // src/editor/core/store/editorCore.ts
 import { writable, derived, get } from "svelte/store";

package/dist-plugin/index.cjs

@@ -1587,6 +1587,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,
@@ -1620,7 +1643,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;
@@ -2601,7 +2625,9 @@ var KNOWN_CONFIG_KEYS = /* @__PURE__ */ new Set([
   "componentConfigsDir",
   "themesDir",
   "manifestsDir",
-  "tokensCssPath"
+  "tokensCssPath",
+  "componentDirs",
+  "checks"
 ]);
 var cached = null;
 function readLiveTokensConfig() {

package/dist-plugin/index.d.cts

@@ -1,6 +1,6 @@
 import { Plugin } from 'vite';
 export { ComponentSource, MissingToken, RunResult, TOKENS_CSS_MIGRATIONS, TokensCssMigration, ValidateInput, runTokensCssMigrations, validateTokensCss } from './tokensCssMigrations/index.cjs';
-import './dataPaths-bJTCEO4H.cjs';
+import './dataPaths-BhWzd5cL.cjs';
 
 interface ThemeFileApiOptions {
     tokensCssPath: string;

package/dist-plugin/index.d.ts

@@ -1,6 +1,6 @@
 import { Plugin } from 'vite';
 export { ComponentSource, MissingToken, RunResult, TOKENS_CSS_MIGRATIONS, TokensCssMigration, ValidateInput, runTokensCssMigrations, validateTokensCss } from './tokensCssMigrations/index.js';
-import './dataPaths-bJTCEO4H.js';
+import './dataPaths-BhWzd5cL.js';
 
 interface ThemeFileApiOptions {
     tokensCssPath: string;

package/dist-plugin/index.js

@@ -13,10 +13,10 @@ import {
   nextAvailableName,
   normalizeTheme,
   versionedFileResourceServer
-} from "./chunk-2YNERPXY.js";
+} from "./chunk-RIXO2E55.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "./chunk-GPIBU44G.js";
+} from "./chunk-YLCOIGQC.js";
 import {
   TOKENS_CSS_MIGRATIONS,
   extractGlobalRootBody,
@@ -31,7 +31,7 @@ import {
 } from "./chunk-7TQQTHI6.js";
 import {
   resolveDataDirs
-} from "./chunk-RVE3MNKM.js";
+} from "./chunk-W6Y4BWFB.js";
 
 // vite-plugin/themeFileApi.ts
 import fs from "fs";

package/dist-plugin/migrateData/index.cjs

@@ -976,6 +976,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,
@@ -1009,7 +1032,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;
@@ -2178,7 +2202,9 @@ var KNOWN_CONFIG_KEYS = /* @__PURE__ */ new Set([
   "componentConfigsDir",
   "themesDir",
   "manifestsDir",
-  "tokensCssPath"
+  "tokensCssPath",
+  "componentDirs",
+  "checks"
 ]);
 var cached = null;
 function readLiveTokensConfig() {

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

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-bJTCEO4H.cjs';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BhWzd5cL.cjs';
 
 interface LegacyRename {
     from: string;

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

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-bJTCEO4H.js';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BhWzd5cL.js';
 
 interface LegacyRename {
     from: string;

package/dist-plugin/migrateData/index.js

@@ -7,14 +7,14 @@ import {
   normalizeTheme,
   planLegacyRenames,
   versionedFileResourceServer
-} from "../chunk-2YNERPXY.js";
+} from "../chunk-RIXO2E55.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-GPIBU44G.js";
+} from "../chunk-YLCOIGQC.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs
-} from "../chunk-RVE3MNKM.js";
+} from "../chunk-W6Y4BWFB.js";
 
 // vite-plugin/migrateData/migrateData.ts
 import fs from "fs";

package/dist-plugin/tokensCssMigrations/index.cjs

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

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

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig } from '../dataPaths-bJTCEO4H.cjs';
+export { r as readLiveTokensConfig } from '../dataPaths-BhWzd5cL.cjs';
 
 /**
  * A `tokens-css` migration: a pure, idempotent transform on the text of a

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

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig } from '../dataPaths-bJTCEO4H.js';
+export { r as readLiveTokensConfig } from '../dataPaths-BhWzd5cL.js';
 
 /**
  * A `tokens-css` migration: a pure, idempotent transform on the text of a

package/dist-plugin/tokensCssMigrations/index.js

@@ -17,7 +17,7 @@ import {
 import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig
-} from "../chunk-RVE3MNKM.js";
+} from "../chunk-W6Y4BWFB.js";
 export {
   TOKENS_CSS_MIGRATIONS,
   collectDefinedTokens,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.71.0",
+  "version": "0.72.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -72,6 +72,10 @@
       "types": "./src/editor/component-editor/index.ts",
       "default": "./src/editor/component-editor/index.ts"
     },
+    "./component-editor/contract": {
+      "types": "./src/editor/component-editor/contract.ts",
+      "default": "./src/editor/component-editor/contract.ts"
+    },
     "./ui": {
       "svelte": "./src/editor/ui/index.ts",
       "types": "./src/editor/ui/index.ts",

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

@@ -36,25 +36,18 @@
       { label: 'hairline thickness', canBeLinked: true, groupKey: 'hairline-thickness', variable: `--sectiondivider-${v}-hairline-thickness`, element: 'hairline' },
     ];
   }
-  function titleOutlineTokens(v: Variant): Token[] {
-    return [
-      { label: 'outline thickness', canBeLinked: true, groupKey: 'title-outline-width', variable: `--sectiondivider-${v}-title-outline-width`, element: 'title' },
-      { label: 'outline color', canBeLinked: true, groupKey: 'title-outline-color', variable: `--sectiondivider-${v}-title-outline-color`, element: 'title' },
-    ];
-  }
   function backgroundTokens(v: Variant): Token[] {
     return [
       { label: 'background', groupKey: 'background', variable: `--sectiondivider-${v}-background`, kind: 'gradient', family: variants.find((x) => x.key === v)!.family },
     ];
   }
   function variantTokens(v: Variant): Token[] {
-    return [...containerTokens(v), ...hairlineTokens(v), ...titleOutlineTokens(v), ...backgroundTokens(v), ...typePaddingTokens(v)];
+    return [...containerTokens(v), ...hairlineTokens(v), ...backgroundTokens(v), ...typePaddingTokens(v)];
   }
   function stateTokens(v: Variant): Token[] {
     return [
       ...containerTokens(v),
       ...hairlineTokens(v),
-      ...titleOutlineTokens(v).map((t) => ({ ...t, hidden: true })),
       ...backgroundTokens(v).map((t) => ({ ...t, hidden: true })),
       ...typePaddingTokens(v),
     ];
@@ -72,8 +65,6 @@
         weightVariable: `--sectiondivider-${v}-title-font-weight`,
         lineHeightVariable: `--sectiondivider-${v}-title-line-height`,
         letterSpacingVariable: `--sectiondivider-${v}-title-letter-spacing`,
-        outlineWidthVariable: `--sectiondivider-${v}-title-outline-width`,
-        outlineColorVariable: `--sectiondivider-${v}-title-outline-color`,
       },
       {
         legend: '',
@@ -127,7 +118,6 @@
   const LINKED_GROUP_KEYS = [
     'container-padding', 'radius', 'border', 'border-width', 'shadow',
     'hairline-color', 'hairline-thickness',
-    'title-outline-width', 'title-outline-color',
     'title-color', 'description-color', 'eyebrow-color',
     'title-padding', 'description-padding', 'eyebrow-padding',
     'title-font-family', 'title-font-weight', 'title-line-height', 'title-letter-spacing',

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

@@ -0,0 +1,175 @@
+/**
+ * The registry contract, as a function a project outside this package can run.
+ *
+ * Node-only: it reads the runtime `.svelte` file and the component's
+ * `default.json` off disk, so it lives behind its own subpath export
+ * (`@motion-proto/live-tokens/component-editor/contract`) rather than in the
+ * browser barrel. A consumer's whole suite is a `describe.each` over their own
+ * registrations and one call:
+ *
+ * ```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([]);
+ *   });
+ * });
+ * ```
+ *
+ * The `origin` filter is load-bearing outside this package: the registry always
+ * carries the shipped components too, and their `sourceFile` paths are relative
+ * to the package root, not the consumer's.
+ */
+import { readFileSync, existsSync } from 'node:fs';
+import path from 'node:path';
+import { get } from 'svelte/store';
+import type { RegistryEntry } from './registry';
+import type { Token } from './scaffolding/types';
+import { parseColorOpacity } from '../core/themes/parsers/colorOpacity';
+import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
+
+export interface RegistryContractOptions {
+  /** Root that `entry.sourceFile` is relative to. Defaults to `process.cwd()`,
+      which is the project root under both vitest and `npm test`. */
+  projectRoot?: string;
+  /** Directory holding `<id>/default.json`. Defaults to
+      `<projectRoot>/src/live-tokens/data/component-configs`. Pass the
+      `componentConfigsDir` from `live-tokens.config.json` when a project moved it. */
+  componentConfigsDir?: string;
+}
+
+const PADDING_SIDE_RE = /-padding-(top|right|bottom|left)$/;
+const PROBE = { kind: 'token', name: '--space-8' } as const;
+
+/**
+ * Tokens excluded from the runtime-declaration and default-seed checks:
+ *   - `hidden: true` (vestigial or hidden by design),
+ *   - `kind: 'gradient'` (structured payloads, stored as gradient objects, not vars),
+ *   - `-padding-(top|right|bottom|left)` (written on demand by the split-padding
+ *     UI and consumed through the `themed-padding` mixin's fallback chain, so
+ *     they exist as neither `:root` declarations nor default seeds).
+ */
+function isEditableSurfaceToken(t: Token): boolean {
+  if (t.hidden) return false;
+  if (t.kind === 'gradient') return false;
+  if (PADDING_SIDE_RE.test(t.variable)) return false;
+  return true;
+}
+
+/** Every `--xxx:` declaration in every `<style>` block of a Svelte file. */
+function extractRuntimeDeclarations(source: string): Set<string> {
+  const out = new Set<string>();
+  const blocks = [...source.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g)].map((m) => m[1]);
+  for (const block of blocks) {
+    for (const m of block.matchAll(/(?:^|[{;\n])\s*(--[a-z0-9-]+)\s*:/g)) {
+      out.add(m[1]);
+    }
+  }
+  return out;
+}
+
+/** Opacity a seeded alias resolves to. A plain token alias is fully opaque; a
+    gradient payload or `transparent` carries no guarantee, so it reads as 0. */
+function seededOpacity(raw: unknown): number {
+  if (typeof raw !== 'string' || raw === 'transparent') return 0;
+  return parseColorOpacity(raw)?.opacity ?? 100;
+}
+
+/**
+ * Run the registry contract against one entry and return a violation line per
+ * failure. An empty array is the pass.
+ *
+ * The contract:
+ *   1. Registration — `sourceFile` resolves to a real file, the schema is non-empty.
+ *   2. Uniqueness — no schema variable is declared twice.
+ *   3. Editor ↔ runtime — every editable token's CSS var is declared in the
+ *      runtime's `<style>` block, so an edit has something to repaint.
+ *   4. Editor ↔ default config — every editable token has a seed alias in
+ *      `<id>/default.json`, so a consumer adopts with full defaults. A component
+ *      with no `default.json` is editor-only; the seed and floor checks 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.
+ */
+export function checkRegistryEntry(
+  entry: RegistryEntry,
+  options: RegistryContractOptions = {},
+): string[] {
+  const projectRoot = options.projectRoot ?? process.cwd();
+  const configsDir =
+    options.componentConfigsDir ??
+    path.resolve(projectRoot, 'src/live-tokens/data/component-configs');
+
+  const violations: string[] = [];
+  const schema = entry.schema ?? [];
+  const runtimePath = path.resolve(projectRoot, entry.sourceFile);
+
+  if (schema.length === 0) violations.push('registration: schema is empty');
+  if (!existsSync(runtimePath)) {
+    violations.push(`registration: sourceFile does not resolve to a file (${runtimePath})`);
+  }
+
+  const seen = new Set<string>();
+  for (const t of schema) {
+    if (seen.has(t.variable)) violations.push(`uniqueness: ${t.variable} is declared twice`);
+    seen.add(t.variable);
+  }
+
+  const editable = schema.filter(isEditableSurfaceToken);
+
+  if (existsSync(runtimePath)) {
+    const runtimeVars = extractRuntimeDeclarations(readFileSync(runtimePath, 'utf-8'));
+    for (const t of editable) {
+      if (!runtimeVars.has(t.variable)) {
+        violations.push(`runtime: ${t.variable} is not declared in ${entry.sourceFile}`);
+      }
+    }
+  }
+
+  const configPath = path.join(configsDir, entry.id, 'default.json');
+  if (existsSync(configPath)) {
+    const config = JSON.parse(readFileSync(configPath, 'utf-8')) as {
+      aliases?: Record<string, unknown>;
+    };
+    const aliases = config.aliases ?? {};
+    for (const t of editable) {
+      if (!(t.variable in aliases)) {
+        violations.push(`default config: ${t.variable} has no seed in ${entry.id}/default.json`);
+      }
+    }
+    for (const t of schema) {
+      if (t.minOpacity === undefined) continue;
+      const opacity = seededOpacity(aliases[t.variable]);
+      if (opacity < t.minOpacity) {
+        violations.push(
+          `opacity floor: ${t.variable} seeds at ${opacity}%, below its ${t.minOpacity}% floor`,
+        );
+      }
+    }
+  }
+
+  const sample = editable[0];
+  if (sample) {
+    setComponentAlias(entry.id, sample.variable, PROBE);
+    const stored = get(editorState).components[entry.id]?.aliases?.[sample.variable];
+    if (JSON.stringify(stored) !== JSON.stringify(PROBE)) {
+      violations.push(
+        `round-trip: setComponentAlias(${entry.id}, ${sample.variable}) stored ${JSON.stringify(stored)}`,
+      );
+    }
+    clearComponentAlias(entry.id, sample.variable);
+  }
+
+  return violations;
+}

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

@@ -140,10 +140,6 @@
                 lineHeightLabel={tg.lineHeightLabel ?? 'line height'}
                 letterSpacingVariable={tg.letterSpacingVariable}
                 letterSpacingLabel={tg.letterSpacingLabel ?? 'letter spacing'}
-                outlineWidthVariable={tg.outlineWidthVariable}
-                outlineWidthLabel={tg.outlineWidthLabel ?? 'outline thickness'}
-                outlineColorVariable={tg.outlineColorVariable}
-                outlineColorLabel={tg.outlineColorLabel ?? 'outline color'}
                 {component}
                 {onchange}
               />
@@ -183,10 +179,6 @@
           lineHeightLabel={tg.lineHeightLabel ?? 'line height'}
           letterSpacingVariable={tg.letterSpacingVariable}
           letterSpacingLabel={tg.letterSpacingLabel ?? 'letter spacing'}
-          outlineWidthVariable={tg.outlineWidthVariable}
-          outlineWidthLabel={tg.outlineWidthLabel ?? 'outline thickness'}
-          outlineColorVariable={tg.outlineColorVariable}
-          outlineColorLabel={tg.outlineColorLabel ?? 'outline color'}
           {component}
           {onchange}
         />

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

@@ -72,6 +72,7 @@
     'divider-height',
     'divider-inset',
     'dot-size',
+    'length',
     'radius',
     'padding',
     'padding-split',
@@ -150,6 +151,9 @@
       extra: () => ({ mode: 'sides' }),
     },
     'gap': { component: UIPaddingSelector, extra: () => ({ mode: 'single', splittable: false }) },
+    /* A bare width/height/size is a length off the same `--space-*` scale gap
+       reads from, so it takes gap's picker rather than a scale of its own. */
+    'length': { component: UIPaddingSelector, extra: () => ({ mode: 'single', splittable: false }) },
     'duration': { component: UIVariantSelector, extra: () => ({ ...DURATION }) },
     'easing': { component: UIEasingSelector },
     'blur': { component: UIVariantSelector, extra: () => ({ ...BLUR }) },
@@ -176,6 +180,7 @@
       'divider-height',
       'divider-inset',
       'dot-size',
+      'length',
       'radius',
       'padding',
       'padding-split',