@motion-proto/live-tokens 0.70.0 → 0.72.0

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.70.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',

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

@@ -1,13 +1,11 @@
 <script lang="ts">
   import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
-  import UIVariantSelector from '../../ui/UIVariantSelector.svelte';
   import UIFontFamilySelector from '../../ui/UIFontFamilySelector.svelte';
   import UIFontSizeSelector from '../../ui/UIFontSizeSelector.svelte';
   import UIFontWeightSelector from '../../ui/UIFontWeightSelector.svelte';
   import UILineHeightSelector from '../../ui/UILineHeightSelector.svelte';
   import UILetterSpacingSelector from '../../ui/UILetterSpacingSelector.svelte';
   import FieldsetWrapper from './FieldsetWrapper.svelte';
-  import { BORDER_WIDTH } from '../../ui/variantScales';
 
   
   
@@ -26,13 +24,6 @@
     lineHeightLabel?: string;
     letterSpacingVariable?: string | undefined;
     letterSpacingLabel?: string;
-    /** Optional outline rows rendered under the typography rows so a text-with-
-      stroke group keeps stroke controls visually nested with the type they
-      drive (e.g. SectionDivider title outline). */
-    outlineWidthVariable?: string | undefined;
-    outlineWidthLabel?: string;
-    outlineColorVariable?: string | undefined;
-    outlineColorLabel?: string;
     /** When set, writes persist through the editor store under this component. */
     component?: string | undefined;
     /** Legend text for the fieldset. */
@@ -54,10 +45,6 @@
     lineHeightLabel = 'line-h',
     letterSpacingVariable = undefined,
     letterSpacingLabel = 'letter-sp',
-    outlineWidthVariable = undefined,
-    outlineWidthLabel = 'outline thickness',
-    outlineColorVariable = undefined,
-    outlineColorLabel = 'outline color',
     component = undefined,
     legend = 'type',
     onchange,
@@ -89,14 +76,6 @@
       <span class="row-label">{letterSpacingLabel}</span>
       <UILetterSpacingSelector variable={letterSpacingVariable} {component} canBeLinked {onchange} />
     {/if}
-    {#if outlineWidthVariable}
-      <span class="row-label">{outlineWidthLabel}</span>
-      <UIVariantSelector variable={outlineWidthVariable} {component} canBeLinked {...BORDER_WIDTH} {onchange} />
-    {/if}
-    {#if outlineColorVariable}
-      <span class="row-label">{outlineColorLabel}</span>
-      <UIPaletteSelector variable={outlineColorVariable} {component} canBeLinked {onchange} />
-    {/if}
   </div>
 </FieldsetWrapper>
 

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

@@ -105,7 +105,7 @@
 
   let activeTab: string = $state('');
 
-  const TYPE_PROPS = ['colorVariable', 'familyVariable', 'sizeVariable', 'weightVariable', 'lineHeightVariable', 'letterSpacingVariable', 'outlineWidthVariable', 'outlineColorVariable'] as const;
+  const TYPE_PROPS = ['colorVariable', 'familyVariable', 'sizeVariable', 'weightVariable', 'lineHeightVariable', 'letterSpacingVariable'] as const;
   // Carry per-side derived vars so split padding fully transfers; no-op when absent.
   const PADDING_SIDES = ['top', 'right', 'bottom', 'left'] as const;
 
@@ -147,7 +147,7 @@
 
   /** TypeGroup props whose values are color tokens; preserve-color-families
       skips these in the typeGroups copy loop. */
-  const COLOR_TYPE_PROPS = new Set(['colorVariable', 'outlineColorVariable']);
+  const COLOR_TYPE_PROPS = new Set(['colorVariable']);
 
   /** True iff `colorRef` is a CSS-var token whose slug contains `family`
       as a hyphen-delimited segment (e.g. `--surface-canvas-low` ∋ `canvas`). */

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

@@ -69,9 +69,7 @@ export type IntrinsicSpec = {
 
 /** Editor type-group: a fieldset containing a coordinated set of typography tokens
     (text color + font-family/size/weight/line-height) for a piece of content
-    (e.g. a card title, notification body). Optional outline rows let
-    text-with-stroke groups (e.g. SectionDivider title) keep their stroke
-    width/color visually nested with the typography that drives them. */
+    (e.g. a card title, notification body). */
 export type TypeGroupConfig = {
   legend?: string;
   colorVariable: string;
@@ -89,10 +87,6 @@ export type TypeGroupConfig = {
   lineHeightLabel?: string;
   letterSpacingVariable?: string;
   letterSpacingLabel?: string;
-  outlineWidthVariable?: string;
-  outlineWidthLabel?: string;
-  outlineColorVariable?: string;
-  outlineColorLabel?: string;
   /** Explicit groupKey for this group's color token. Wins over every derivation
       (structural or `groupKeyFor`) and is never recomputed — the durable, one-line
       fix when the derived key is wrong. */

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

@@ -7,6 +7,7 @@ export type TokenKind =
   | 'divider-height'
   | 'divider-inset'
   | 'dot-size'
+  | 'length'
   | 'blur'
   | 'scale'
   | 'shadow'
@@ -60,11 +61,14 @@ export const KIND_RULES: ReadonlyArray<{
   { kind: 'border-width',   suffix: ['-border-width', '-accent-width', '-hairline-thickness', '-thickness'],
                             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.
   { kind: 'surface',        suffix: ['-surface', '-fill', '-divider', '-background', '-indicator',
-                                     '-thumb', '-accent', '-color', '-tint', '-opacity',
-                                     '-width', '-height', '-size'],
+                                     '-thumb', '-accent', '-color', '-tint', '-opacity'],
                             prefix: ['--surface-', '--tint', '--color-'] },
 ];
 

package/src/editor/core/themes/migrations/2026-09-02-sectiondivider-drop-title-outline.ts

@@ -0,0 +1,39 @@
+import type { Migration } from './index';
+
+/**
+ * SectionDivider title outline, removed (2026-09-02).
+ *
+ * The outline was a decorative stroke around the title's glyphs, and the only
+ * reason the title was an SVG `<text>` behind a `feMorphology` filter rather
+ * than an element. That SVG cost a `getBBox()` viewBox, a per-instance
+ * MutationObserver on the document's inline style (filter primitives cannot
+ * read a CSS var), font-load listeners to re-measure, and a title that was not
+ * selectable or 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.
+ *
+ * Dropping the keys rather than rebinding them: nothing reads the values now.
+ */
+const DROPPED = new Set(
+  ['lg', 'md', 'sm'].flatMap((v) => [
+    `--sectiondivider-${v}-title-outline-width`,
+    `--sectiondivider-${v}-title-outline-color`,
+  ]),
+);
+
+export const componentMigration_2026_09_02_sectiondividerDropTitleOutline: Migration = {
+  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: Record<string, string> = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (DROPPED.has(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  },
+};

package/src/editor/core/themes/migrations/index.ts

@@ -72,6 +72,7 @@ import {
 } from './2026-09-01-tint-rename';
 import { componentMigration_2026_09_01_tabbarActiveTint } from './2026-09-01-tabbar-active-tint';
 import { componentMigration_2026_09_01_gateSuffixEnabled } from './2026-09-01-gate-suffix-enabled';
+import { componentMigration_2026_09_02_sectiondividerDropTitleOutline } from './2026-09-02-sectiondivider-drop-title-outline';
 
 /**
  * Registered migrations. Order in this array does not matter — the runner
@@ -110,6 +111,7 @@ export const MIGRATIONS: Migration[] = [
   componentMigration_2026_09_01_tintRename,
   componentMigration_2026_09_01_tabbarActiveTint,
   componentMigration_2026_09_01_gateSuffixEnabled,
+  componentMigration_2026_09_02_sectiondividerDropTitleOutline,
 ];
 
 function countFor(kind: 'colors-and-type' | 'component-config'): number {

package/src/live-tokens/data/themes/autumn.json

@@ -3515,7 +3515,6 @@
         "--sectiondivider-lg-title-font-size": "--font-size-5xl",
         "--sectiondivider-lg-title-line-height": "--line-height-normal",
         "--sectiondivider-lg-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-lg-title-outline-width": "--border-width-4",
         "--sectiondivider-lg-description-font-family": "--font-sans",
         "--sectiondivider-lg-description-font-weight": "--font-weight-medium",
         "--sectiondivider-lg-description-font-size": "--font-size-lg",
@@ -3537,14 +3536,12 @@
         "--sectiondivider-lg-description": "--text-alternate",
         "--sectiondivider-lg-eyebrow": "--text-brand",
         "--sectiondivider-lg-border": "--color-transparent",
-        "--sectiondivider-lg-title-outline-color": "transparent",
         "--sectiondivider-lg-hairline-color": "--border-brand-medium",
         "--sectiondivider-md-title-font-family": "--font-display",
         "--sectiondivider-md-title-font-weight": "--font-weight-bold",
         "--sectiondivider-md-title-font-size": "--font-size-4xl",
         "--sectiondivider-md-title-line-height": "--line-height-normal",
         "--sectiondivider-md-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-md-title-outline-width": "--border-width-4",
         "--sectiondivider-md-description-font-family": "--font-sans",
         "--sectiondivider-md-description-font-weight": "--font-weight-medium",
         "--sectiondivider-md-description-font-size": "--font-size-lg",
@@ -3566,14 +3563,12 @@
         "--sectiondivider-md-description": "--text-secondary",
         "--sectiondivider-md-eyebrow": "--text-tertiary",
         "--sectiondivider-md-border": "--color-transparent",
-        "--sectiondivider-md-title-outline-color": "transparent",
         "--sectiondivider-md-hairline-color": "--border-brand-medium",
         "--sectiondivider-sm-title-font-family": "--font-display",
         "--sectiondivider-sm-title-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-title-font-size": "--font-size-3xl",
         "--sectiondivider-sm-title-line-height": "--line-height-normal",
         "--sectiondivider-sm-title-letter-spacing": "--letter-spacing-normal",
-        "--sectiondivider-sm-title-outline-width": "--border-width-4",
         "--sectiondivider-sm-description-font-family": "--font-sans",
         "--sectiondivider-sm-description-font-weight": "--font-weight-medium",
         "--sectiondivider-sm-description-font-size": "--font-size-5xl",
@@ -3595,7 +3590,6 @@
         "--sectiondivider-sm-description": "--text-secondary",
         "--sectiondivider-sm-eyebrow": "--text-tertiary",
         "--sectiondivider-sm-border": "--color-transparent",
-        "--sectiondivider-sm-title-outline-color": "transparent",
         "--sectiondivider-sm-hairline-color": "color-mix(in srgb, var(--border-brand-medium) 50%, transparent)"
       }
     },
@@ -4036,5 +4030,5 @@
       }
     }
   },
-  "componentSchemaVersion": 25
+  "componentSchemaVersion": 26
 }