@motion-proto/live-tokens 0.67.1 → 0.69.0

package/bin/lib/findings.mjs

@@ -0,0 +1,106 @@
+// Severity resolution and reporting shared by check-page and check-component.
+//
+// Every rule has a default severity. Three things can override it, last wins:
+// `checks.rules` in live-tokens.config.json, then the CLI flags
+// (--off/--warn/--error), then --strict, which promotes every warning.
+//
+// A checker returns findings; this module decides what they mean and how they
+// print. `--json` output is the contract a skill iterates against, so the shape
+// here is deliberately stable.
+
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+export const SEVERITIES = ['off', 'warn', 'error'];
+
+/** Line number of `index` within `text`, 1-based. */
+export function lineOf(text, index) {
+  let line = 1;
+  for (let i = 0; i < index && i < text.length; i++) if (text[i] === '\n') line++;
+  return line;
+}
+
+export function readChecksConfig(root) {
+  const path = join(root, 'live-tokens.config.json');
+  if (!existsSync(path)) return {};
+  try {
+    return JSON.parse(readFileSync(path, 'utf8')).checks ?? {};
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Parse `--off=a,b --warn=c --error=d --strict --json` out of argv.
+ * Unrecognised flags are returned in `rest` for the caller to handle.
+ */
+export function parseCheckFlags(argv) {
+  const opts = { off: [], warn: [], error: [], strict: false, json: false, rest: [] };
+  for (const arg of argv) {
+    const m = arg.match(/^--(off|warn|error)=(.+)$/);
+    if (m) {
+      opts[m[1]].push(...m[2].split(',').map((s) => s.trim()).filter(Boolean));
+    } else if (arg === '--strict') opts.strict = true;
+    else if (arg === '--json') opts.json = true;
+    else opts.rest.push(arg);
+  }
+  return opts;
+}
+
+/**
+ * Resolve each finding's severity and drop the ones turned off.
+ * `rules` maps rule id to its default severity.
+ */
+export function applySeverity(findings, rules, opts = {}, config = {}) {
+  const configured = config.rules ?? {};
+  const resolve = (id) => {
+    let severity = rules[id] ?? 'error';
+    if (SEVERITIES.includes(configured[id])) severity = configured[id];
+    if (opts.off?.includes(id)) severity = 'off';
+    if (opts.warn?.includes(id)) severity = 'warn';
+    if (opts.error?.includes(id)) severity = 'error';
+    if (opts.strict && severity === 'warn') severity = 'error';
+    return severity;
+  };
+  return findings
+    .map((f) => ({ ...f, severity: resolve(f.rule) }))
+    .filter((f) => f.severity !== 'off');
+}
+
+export function countBySeverity(findings) {
+  return {
+    errors: findings.filter((f) => f.severity === 'error').length,
+    warnings: findings.filter((f) => f.severity === 'warn').length,
+  };
+}
+
+export function formatFindings(findings, { label, checked = 0 } = {}) {
+  const { errors, warnings } = countBySeverity(findings);
+  if (findings.length === 0) {
+    return `✓ ${label}: ${checked} file(s) clean.`;
+  }
+  const lines = [];
+  const byFile = new Map();
+  for (const f of findings) {
+    if (!byFile.has(f.file)) byFile.set(f.file, []);
+    byFile.get(f.file).push(f);
+  }
+  for (const [file, group] of byFile) {
+    lines.push(file);
+    for (const f of group.sort((a, b) => a.line - b.line)) {
+      const mark = f.severity === 'error' ? '✗' : '!';
+      lines.push(`  ${mark} ${f.line}:  ${f.message}  [${f.rule}]`);
+    }
+    lines.push('');
+  }
+  lines.push(`${label}: ${errors} error(s), ${warnings} warning(s) across ${checked} file(s).`);
+  if (warnings > 0 && errors === 0) {
+    lines.push('Warnings do not fail the check. Re-run with --strict to treat them as errors.');
+  }
+  return lines.join('\n');
+}
+
+export function toJson(findings, { label, checked = 0 } = {}) {
+  const { errors, warnings } = countBySeverity(findings);
+  return JSON.stringify({ check: label, checked, errors, warnings, findings }, null, 2);
+}

package/bin/lib/tokenVocabulary.mjs

@@ -0,0 +1,213 @@
+// The token and component vocabulary both static checkers validate against.
+//
+// One module so `check-page` and `check-component` can never disagree about
+// what counts as a real token. Two sources feed it:
+//
+//   1. tokens.css — the developer-authored file (the consumer's, or the
+//      package's when a consumer has none yet). A theme token *is* a name
+//      declared here; there is no second register of tokens to consult.
+//   2. Component tokens — every `--<id>-*` a component declares in its
+//      `:global(:root)` block, shipped or consumer-authored.
+//
+// A state word is not a token. `hover` is a segment inside a semantic property
+// name (`--button-outline-hover-surface`), so `var(--hover)` names nothing and
+// the checkers say so.
+//
+// Reads files only. Nothing here may import dist-plugin at module top: CI runs
+// the suite before the plugin is built (see bin/engineLoadsLazily.test.ts).
+
+import { existsSync, readFileSync, readdirSync, realpathSync, statSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { resolveTokensCssPath } from '../migrate.mjs';
+
+const PKG_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '../..');
+
+const SHIPPED_COMPONENTS_DIR = 'src/system/components';
+
+/** Families whose names are governed by the token contract (see TOKENS.md). */
+const CONTRACT_FAMILIES = [
+  'surface', 'text', 'border', 'color', 'space', 'radius', 'font', 'line-height',
+  'letter-spacing', 'shadow', 'blur', 'icon-size', 'scrim', 'tint', 'columns',
+  'heading', 'body', 'editorial', 'eyebrow', 'code', 'easing', 'duration', 'zoom',
+  'gradient', 'stroke',
+];
+
+/** True when `name` belongs to a contract-governed family, so a miss is a typo. */
+export function isContractToken(name) {
+  const stem = name.replace(/^--/, '');
+  return CONTRACT_FAMILIES.some((f) => stem === f || stem.startsWith(`${f}-`));
+}
+
+/** Every `--name:` declared anywhere in a stylesheet or style block. */
+export function declaredCustomProperties(css) {
+  const out = new Set();
+  for (const m of css.matchAll(/(?:^|[;{])\s*(--[a-z0-9-]+)\s*:/gim)) out.add(m[1]);
+  return out;
+}
+
+/** Every `var(--name)` referenced in a stylesheet or style block. */
+export function referencedCustomProperties(css) {
+  const out = new Set();
+  for (const m of css.matchAll(/var\(\s*(--[a-z0-9-]+)/g)) out.add(m[1]);
+  return out;
+}
+
+/**
+ * The body of every `:global(:root) { ... }` block, brace-balanced so a nested
+ * at-rule or an SCSS block inside it neither truncates the block nor leaks
+ * declarations from the rule after it.
+ */
+export function extractGlobalRootBlocks(source) {
+  const out = [];
+  const re = /:global\(:root\)\s*\{/g;
+  let m;
+  while ((m = re.exec(source)) !== null) {
+    const start = m.index + m[0].length;
+    let depth = 1;
+    let i = start;
+    for (; i < source.length && depth > 0; i++) {
+      if (source[i] === '{') depth++;
+      else if (source[i] === '}') depth--;
+    }
+    out.push(source.slice(start, depth === 0 ? i - 1 : i));
+    re.lastIndex = i;
+  }
+  return out;
+}
+
+const STRING_UNION = /^(?:'[^']*'\s*\|?\s*)+$/;
+
+function unionValues(text) {
+  return [...text.matchAll(/'([^']*)'/g)].map((m) => m[1]);
+}
+
+/**
+ * The public props of a component: every name its `interface Props` declares,
+ * and for each prop typed as a union of string literals (inline, via a `type`
+ * alias, or via `typeof <const array>[number]`), the values it accepts.
+ *
+ * Shipped components declare their props this way and none spreads a rest
+ * object onto the element, so an attribute outside this set is silently
+ * dropped at runtime. Returns null when the file declares no `interface Props`.
+ */
+export function componentProps(source) {
+  const script = source.replace(/<style[^>]*>[\s\S]*?<\/style>/g, '');
+  const iface = script.match(/interface\s+Props\b[^{]*\{([\s\S]*?)\n\s*\}/);
+  if (!iface) return null;
+  const aliases = new Map();
+  for (const m of script.matchAll(/\btype\s+(\w+)\s*=\s*([^;]+);/g)) aliases.set(m[1], m[2].trim());
+  const arrays = new Map();
+  for (const m of script.matchAll(/\bconst\s+(\w+)\s*=\s*\[([\s\S]*?)\]\s*as\s+const/g)) arrays.set(m[1], unionValues(m[2]));
+
+  const resolveEnum = (type) => {
+    const t = type.replace(/\|\s*undefined\b/g, '').replace(/\bundefined\s*\|/g, '').trim();
+    if (STRING_UNION.test(t)) return unionValues(t);
+    const viaArray = t.match(/^typeof\s+(\w+)\[number\]$/);
+    if (viaArray) return arrays.get(viaArray[1]) ?? null;
+    if (/^\w+$/.test(t) && aliases.has(t)) return resolveEnum(aliases.get(t));
+    return null;
+  };
+
+  const props = new Set();
+  const enums = new Map();
+  const body = iface[1].replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '');
+  for (const m of body.matchAll(/^\s*(?:readonly\s+)?(\w+)\??\s*:\s*([^;\n]+)/gm)) {
+    props.add(m[1]);
+    const values = resolveEnum(m[2]);
+    if (values) enums.set(m[1], new Set(values));
+  }
+  return { props, enums };
+}
+
+function walk(dir, exts, out = []) {
+  if (!existsSync(dir)) return out;
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    if (entry.name === 'node_modules' || entry.name.startsWith('.') || entry.name.startsWith('__')) continue;
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) walk(full, exts, out);
+    else if (exts.some((e) => entry.name.endsWith(e))) out.push(full);
+  }
+  return out;
+}
+
+function componentFiles(roots) {
+  const seen = new Set();
+  const files = [];
+  for (const dir of roots) {
+    for (const file of walk(dir, ['.svelte'])) {
+      if (file.endsWith('Editor.svelte')) continue;
+      let key = file;
+      try {
+        key = realpathSync(file);
+      } catch {
+        // unreadable link; fall back to the path itself
+      }
+      if (seen.has(key)) continue;
+      seen.add(key);
+      files.push(file);
+    }
+  }
+  return files;
+}
+
+function registeredIds(root) {
+  const ids = new Set();
+  for (const file of walk(join(root, 'src'), ['.ts', '.js', '.mjs', '.svelte'])) {
+    let src;
+    try {
+      src = readFileSync(file, 'utf8');
+    } catch {
+      continue;
+    }
+    if (!/registerComponent|bootLiveTokens/.test(src)) continue;
+    for (const m of src.matchAll(/id\s*:\s*['"]([a-z][a-z0-9]*)['"]/g)) ids.add(m[1]);
+  }
+  return ids;
+}
+
+/**
+ * Build the vocabulary for `root` (a consumer project, or this repo).
+ *
+ * Returns sets of names plus the paths they came from, so a checker can say
+ * *which* tokens.css a finding was judged against.
+ */
+export function loadVocabulary({ root = process.cwd(), pkgRoot = PKG_ROOT } = {}) {
+  const tokensCssPath =
+    resolveTokensCssPath(null, null, root) ??
+    (existsSync(join(pkgRoot, 'src/system/styles/tokens.css'))
+      ? join(pkgRoot, 'src/system/styles/tokens.css')
+      : null);
+
+  const themeTokens = new Set();
+  if (tokensCssPath && existsSync(tokensCssPath)) {
+    for (const n of declaredCustomProperties(readFileSync(tokensCssPath, 'utf8'))) themeTokens.add(n);
+  }
+
+  const componentTokens = new Set();
+  const components = new Map();
+  const dirs = [join(pkgRoot, SHIPPED_COMPONENTS_DIR), join(root, SHIPPED_COMPONENTS_DIR)];
+  for (const file of componentFiles(dirs)) {
+    const Id = file.slice(file.lastIndexOf('/') + 1).replace('.svelte', '');
+    const src = readFileSync(file, 'utf8');
+    components.set(Id.toLowerCase(), { id: Id.toLowerCase(), name: Id, file, props: componentProps(src) });
+    for (const block of extractGlobalRootBlocks(src)) {
+      for (const n of declaredCustomProperties(block)) componentTokens.add(n);
+    }
+  }
+  const registered = registeredIds(root);
+
+  return {
+    themeTokens,
+    componentTokens,
+    components,
+    registered,
+    tokensCssPath,
+    /** True when `name` resolves to something real at runtime. */
+    knows(name) {
+      return themeTokens.has(name) || componentTokens.has(name);
+    },
+  };
+}
+
+export { PKG_ROOT, walk };

package/dist-plugin/adjust/index.cjs

@@ -39,29 +39,74 @@ __export(adjust_exports, {
 module.exports = __toCommonJS(adjust_exports);
 
 // src/editor/core/components/aliasKinds.ts
-var KIND_PATTERNS = [
-  { kind: "font-family", matches: (v) => v.endsWith("-font-family") },
-  { kind: "font-weight", matches: (v) => v.endsWith("-font-weight") },
-  { kind: "font-size", matches: (v) => v.endsWith("-font-size") || v.endsWith("-icon-size") || v.endsWith("-thumb-size") },
-  { kind: "line-height", matches: (v) => v.endsWith("-line-height") },
-  { kind: "letter-spacing", matches: (v) => v.endsWith("-letter-spacing") },
-  { kind: "text-color", matches: (v) => v.endsWith("-text") || v.startsWith("--text-") },
-  { kind: "radius", matches: (v) => v.endsWith("-radius") || v.startsWith("--radius-") },
-  { kind: "divider-width", matches: (v) => v.endsWith("-divider-width") || v.endsWith("-divider-thickness") },
-  { kind: "divider-height", matches: (v) => v.endsWith("-divider-height") || v.endsWith("-track-height") },
-  { kind: "divider-inset", matches: (v) => v.endsWith("-divider-inset") },
-  { kind: "dot-size", matches: (v) => v.endsWith("-dot-size") },
-  { kind: "blur", matches: (v) => v.endsWith("-blur") || v.startsWith("--blur-") },
-  { kind: "scale", matches: (v) => v.endsWith("-scale") || v.startsWith("--scale-") },
-  { kind: "shadow", matches: (v) => v.endsWith("-shadow") || v.startsWith("--shadow-") },
-  { kind: "padding", matches: (v) => v.endsWith("-padding") || v.endsWith("-margin") },
-  { kind: "gap", matches: (v) => v.endsWith("-gap") },
-  { kind: "duration", matches: (v) => v.endsWith("-duration") || v.startsWith("--duration-") },
-  { kind: "easing", matches: (v) => v.endsWith("-easing") || v.startsWith("--ease-") },
-  { kind: "border-width", matches: (v) => v.endsWith("-border-width") || v.endsWith("-accent-width") || v.endsWith("-hairline-thickness") || v.startsWith("--border-width-") },
-  { kind: "border", matches: (v) => v.endsWith("-border") || v.startsWith("--border-") },
-  { kind: "surface", matches: (v) => v.endsWith("-surface") || v.startsWith("--surface-") }
+var KIND_RULES = [
+  { kind: "font-family", suffix: ["-font-family"] },
+  { kind: "font-weight", suffix: ["-font-weight"] },
+  { kind: "font-size", suffix: ["-font-size", "-icon-size", "-thumb-size"] },
+  { kind: "line-height", suffix: ["-line-height"] },
+  { kind: "letter-spacing", suffix: ["-letter-spacing"] },
+  // Element-named colour roles: the property *is* the element it paints.
+  {
+    kind: "text-color",
+    suffix: [
+      "-text",
+      "-label",
+      "-icon",
+      "-title",
+      "-body",
+      "-eyebrow",
+      "-description",
+      "-hint",
+      "-error",
+      "-placeholder",
+      "-value"
+    ],
+    prefix: ["--text-"]
+  },
+  { kind: "radius", suffix: ["-radius"], prefix: ["--radius-"] },
+  { kind: "divider-width", suffix: ["-divider-width", "-divider-thickness"] },
+  { kind: "divider-height", suffix: ["-divider-height", "-track-height"] },
+  { kind: "divider-inset", suffix: ["-divider-inset", "-inset"] },
+  { kind: "dot-size", suffix: ["-dot-size"] },
+  { kind: "blur", suffix: ["-blur"], prefix: ["--blur-"] },
+  { kind: "scale", suffix: ["-scale"], prefix: ["--scale-"] },
+  { kind: "shadow", suffix: ["-shadow"], prefix: ["--shadow-"] },
+  { kind: "padding", suffix: ["-padding", "-margin"] },
+  { kind: "gap", suffix: ["-gap"] },
+  { kind: "duration", suffix: ["-duration"], prefix: ["--duration-"] },
+  { kind: "easing", suffix: ["-easing"], prefix: ["--ease-"] },
+  {
+    kind: "border-width",
+    suffix: ["-border-width", "-accent-width", "-hairline-thickness", "-thickness"],
+    prefix: ["--border-width-"]
+  },
+  { kind: "border", suffix: ["-border"], prefix: ["--border-"] },
+  // 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"
+    ],
+    prefix: ["--surface-", "--tint", "--color-"]
+  }
 ];
+var KIND_PATTERNS = KIND_RULES.map(({ kind, suffix = [], prefix = [] }) => ({
+  kind,
+  matches: (v) => suffix.some((s) => v.endsWith(s)) || prefix.some((p) => v.startsWith(p))
+}));
 var MATCHER_BY_KIND = Object.fromEntries(
   KIND_PATTERNS.map((p) => [p.kind, p.matches])
 );
@@ -980,6 +1025,106 @@ var componentMigration_2026_08_15_lineHeightScaleRename = {
   apply: renameValues
 };
 
+// src/editor/core/themes/migrations/2026-09-01-scrim-rename.ts
+var RENAMED2 = {
+  "--overlay-low": "--scrim-low",
+  "--overlay": "--scrim",
+  "--overlay-high": "--scrim-high"
+};
+var RENAMED_COMPONENT_KEYS = {
+  "--dialog-overlay-surface": "--dialog-scrim-surface"
+};
+var colorsAndTypeMigration_2026_09_01_scrimRename = {
+  id: "2026-09-01-scrim-rename-theme",
+  fromVersion: 5,
+  toVersion: 6,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[RENAMED2[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+var componentMigration_2026_09_01_scrimRename = {
+  id: "2026-09-01-scrim-rename-component",
+  fromVersion: 21,
+  toVersion: 22,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[RENAMED_COMPONENT_KEYS[key] ?? key] = RENAMED2[value] ?? value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-01-tint-rename.ts
+var RENAMED3 = {
+  "--hover-low": "--tint-low",
+  "--hover": "--tint",
+  "--hover-high": "--tint-high"
+};
+var colorsAndTypeMigration_2026_09_01_tintRename = {
+  id: "2026-09-01-tint-rename-theme",
+  fromVersion: 6,
+  toVersion: 7,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) out[RENAMED3[key] ?? key] = value;
+    return out;
+  }
+};
+var componentMigration_2026_09_01_tintRename = {
+  id: "2026-09-01-tint-rename-component",
+  fromVersion: 22,
+  toVersion: 23,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) out[key] = RENAMED3[value] ?? value;
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-01-tabbar-active-tint.ts
+var componentMigration_2026_09_01_tabbarActiveTint = {
+  id: "2026-09-01-tabbar-active-tint",
+  fromVersion: 23,
+  toVersion: 24,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "tabbar") return { ...rawVars };
+    const out = { ...rawVars };
+    if (out["--tabbar-active-surface"] === "--scrim-low") {
+      out["--tabbar-active-surface"] = "--tint-low";
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-01-gate-suffix-enabled.ts
+var RENAMED4 = {
+  "--card-hover-border-active": "--card-hover-border-enabled",
+  "--card-hover-shadow-active": "--card-hover-shadow-enabled",
+  "--image-zoom-hover": "--image-zoom-enabled",
+  "--image-grow-hover": "--image-grow-enabled"
+};
+var componentMigration_2026_09_01_gateSuffixEnabled = {
+  id: "2026-09-01-gate-suffix-enabled",
+  fromVersion: 24,
+  toVersion: 25,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) out[RENAMED4[key] ?? key] = value;
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/index.ts
 var MIGRATIONS = [
   colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
@@ -1007,7 +1152,13 @@ var MIGRATIONS = [
   componentMigration_2026_05_29_toggleDeriveTrackFromThumb,
   colorsAndTypeMigration_2026_08_13_dropLegacyShapeSpaceKeys,
   colorsAndTypeMigration_2026_08_15_lineHeightScaleRename,
-  componentMigration_2026_08_15_lineHeightScaleRename
+  componentMigration_2026_08_15_lineHeightScaleRename,
+  colorsAndTypeMigration_2026_09_01_scrimRename,
+  componentMigration_2026_09_01_scrimRename,
+  colorsAndTypeMigration_2026_09_01_tintRename,
+  componentMigration_2026_09_01_tintRename,
+  componentMigration_2026_09_01_tabbarActiveTint,
+  componentMigration_2026_09_01_gateSuffixEnabled
 ];
 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-DZUzVv8H.cjs';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-bJTCEO4H.cjs';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
 
 type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width';

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-DZUzVv8H.js';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-bJTCEO4H.js';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
 
 type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width';

package/dist-plugin/adjust/index.js

@@ -1,35 +1,80 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-NE6N66EE.js";
+} from "../chunk-GPIBU44G.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs
 } from "../chunk-RVE3MNKM.js";
 
 // src/editor/core/components/aliasKinds.ts
-var KIND_PATTERNS = [
-  { kind: "font-family", matches: (v) => v.endsWith("-font-family") },
-  { kind: "font-weight", matches: (v) => v.endsWith("-font-weight") },
-  { kind: "font-size", matches: (v) => v.endsWith("-font-size") || v.endsWith("-icon-size") || v.endsWith("-thumb-size") },
-  { kind: "line-height", matches: (v) => v.endsWith("-line-height") },
-  { kind: "letter-spacing", matches: (v) => v.endsWith("-letter-spacing") },
-  { kind: "text-color", matches: (v) => v.endsWith("-text") || v.startsWith("--text-") },
-  { kind: "radius", matches: (v) => v.endsWith("-radius") || v.startsWith("--radius-") },
-  { kind: "divider-width", matches: (v) => v.endsWith("-divider-width") || v.endsWith("-divider-thickness") },
-  { kind: "divider-height", matches: (v) => v.endsWith("-divider-height") || v.endsWith("-track-height") },
-  { kind: "divider-inset", matches: (v) => v.endsWith("-divider-inset") },
-  { kind: "dot-size", matches: (v) => v.endsWith("-dot-size") },
-  { kind: "blur", matches: (v) => v.endsWith("-blur") || v.startsWith("--blur-") },
-  { kind: "scale", matches: (v) => v.endsWith("-scale") || v.startsWith("--scale-") },
-  { kind: "shadow", matches: (v) => v.endsWith("-shadow") || v.startsWith("--shadow-") },
-  { kind: "padding", matches: (v) => v.endsWith("-padding") || v.endsWith("-margin") },
-  { kind: "gap", matches: (v) => v.endsWith("-gap") },
-  { kind: "duration", matches: (v) => v.endsWith("-duration") || v.startsWith("--duration-") },
-  { kind: "easing", matches: (v) => v.endsWith("-easing") || v.startsWith("--ease-") },
-  { kind: "border-width", matches: (v) => v.endsWith("-border-width") || v.endsWith("-accent-width") || v.endsWith("-hairline-thickness") || v.startsWith("--border-width-") },
-  { kind: "border", matches: (v) => v.endsWith("-border") || v.startsWith("--border-") },
-  { kind: "surface", matches: (v) => v.endsWith("-surface") || v.startsWith("--surface-") }
+var KIND_RULES = [
+  { kind: "font-family", suffix: ["-font-family"] },
+  { kind: "font-weight", suffix: ["-font-weight"] },
+  { kind: "font-size", suffix: ["-font-size", "-icon-size", "-thumb-size"] },
+  { kind: "line-height", suffix: ["-line-height"] },
+  { kind: "letter-spacing", suffix: ["-letter-spacing"] },
+  // Element-named colour roles: the property *is* the element it paints.
+  {
+    kind: "text-color",
+    suffix: [
+      "-text",
+      "-label",
+      "-icon",
+      "-title",
+      "-body",
+      "-eyebrow",
+      "-description",
+      "-hint",
+      "-error",
+      "-placeholder",
+      "-value"
+    ],
+    prefix: ["--text-"]
+  },
+  { kind: "radius", suffix: ["-radius"], prefix: ["--radius-"] },
+  { kind: "divider-width", suffix: ["-divider-width", "-divider-thickness"] },
+  { kind: "divider-height", suffix: ["-divider-height", "-track-height"] },
+  { kind: "divider-inset", suffix: ["-divider-inset", "-inset"] },
+  { kind: "dot-size", suffix: ["-dot-size"] },
+  { kind: "blur", suffix: ["-blur"], prefix: ["--blur-"] },
+  { kind: "scale", suffix: ["-scale"], prefix: ["--scale-"] },
+  { kind: "shadow", suffix: ["-shadow"], prefix: ["--shadow-"] },
+  { kind: "padding", suffix: ["-padding", "-margin"] },
+  { kind: "gap", suffix: ["-gap"] },
+  { kind: "duration", suffix: ["-duration"], prefix: ["--duration-"] },
+  { kind: "easing", suffix: ["-easing"], prefix: ["--ease-"] },
+  {
+    kind: "border-width",
+    suffix: ["-border-width", "-accent-width", "-hairline-thickness", "-thickness"],
+    prefix: ["--border-width-"]
+  },
+  { kind: "border", suffix: ["-border"], prefix: ["--border-"] },
+  // 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"
+    ],
+    prefix: ["--surface-", "--tint", "--color-"]
+  }
 ];
+var KIND_PATTERNS = KIND_RULES.map(({ kind, suffix = [], prefix = [] }) => ({
+  kind,
+  matches: (v) => suffix.some((s) => v.endsWith(s)) || prefix.some((p) => v.startsWith(p))
+}));
 var MATCHER_BY_KIND = Object.fromEntries(
   KIND_PATTERNS.map((p) => [p.kind, p.matches])
 );