@motion-proto/live-tokens 0.52.1 → 0.54.0

package/dist-plugin/adjust/index.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // vite-plugin/adjust/index.ts
 var adjust_exports = {};
 __export(adjust_exports, {
+  CURRENT_COMPONENT_SCHEMA_VERSION: () => CURRENT_COMPONENT_SCHEMA_VERSION,
   adjustAliases: () => adjustAliases,
   matchesKind: () => matchesKind,
   readLiveTokensConfig: () => readLiveTokensConfig,
@@ -65,9 +66,12 @@ var MATCHER_BY_KIND = Object.fromEntries(
   KIND_PATTERNS.map((p) => [p.kind, p.matches])
 );
 var SIDE_SUFFIXES = ["-top", "-right", "-bottom", "-left"];
-function matchesKind(variable, kind) {
+function stripSide(variable) {
   const side = SIDE_SUFFIXES.find((s) => variable.endsWith(s));
-  return MATCHER_BY_KIND[kind](side ? variable.slice(0, -side.length) : variable);
+  return side ? variable.slice(0, -side.length) : variable;
+}
+function matchesKind(variable, kind) {
+  return MATCHER_BY_KIND[kind](stripSide(variable));
 }
 
 // src/editor/core/components/adjustAliases.ts
@@ -82,7 +86,7 @@ var RADIUS_RUNGS = [
   "--radius-3xl",
   "--radius-4xl"
 ];
-var SPACE_RUNGS = [
+var SPACE_SETTABLE = [
   "--space-0",
   "--space-2",
   "--space-4",
@@ -96,7 +100,10 @@ var SPACE_RUNGS = [
   "--space-32",
   "--space-48"
 ];
-var SPACE_FAMILY = [...SPACE_RUNGS, "--space-40", "--space-64", "--space-96", "--space-128"];
+var SPACE_RUNGS = SPACE_SETTABLE;
+var INSET_RUNGS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf("--space-4"));
+var TEXT_INSET_RUNGS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf("--space-6"));
+var SPACE_FAMILY = [...SPACE_SETTABLE, "--space-40", "--space-64", "--space-96", "--space-128"];
 var BORDER_WIDTH_RUNGS = [
   "--border-width-0",
   "--border-width-1",
@@ -113,37 +120,53 @@ var BORDER_WIDTH_RUNGS = [
   "--border-width-24"
 ];
 var LADDERS = {
-  radius: { rungs: RADIUS_RUNGS, family: [...RADIUS_RUNGS, RADIUS_FULL] },
-  padding: { rungs: SPACE_RUNGS, family: SPACE_FAMILY },
-  gap: { rungs: SPACE_RUNGS, family: SPACE_FAMILY },
-  "border-width": { rungs: BORDER_WIDTH_RUNGS, family: BORDER_WIDTH_RUNGS }
+  radius: {
+    rungs: RADIUS_RUNGS,
+    settable: [...RADIUS_RUNGS, RADIUS_FULL],
+    family: [...RADIUS_RUNGS, RADIUS_FULL]
+  },
+  padding: { rungs: SPACE_RUNGS, settable: SPACE_SETTABLE, family: SPACE_FAMILY },
+  gap: { rungs: SPACE_RUNGS, settable: SPACE_SETTABLE, family: SPACE_FAMILY },
+  "border-width": {
+    rungs: BORDER_WIDTH_RUNGS,
+    settable: BORDER_WIDTH_RUNGS,
+    family: BORDER_WIDTH_RUNGS
+  }
 };
 var TOKEN_NAME = /^--[a-z0-9-]+$/;
-function rungsFor(op) {
-  return op.kind === "radius" && op.full ? [...RADIUS_RUNGS, RADIUS_FULL] : LADDERS[op.kind].rungs;
+function rungsFor(op, variable, aliases) {
+  if (op.kind === "radius") return op.full ? [...RADIUS_RUNGS, RADIUS_FULL] : RADIUS_RUNGS;
+  if (op.kind !== "padding") return LADDERS[op.kind].rungs;
+  const base = stripSide(variable);
+  if (!base.endsWith("-padding")) return LADDERS.padding.rungs;
+  const variant = base.slice(0, -"-padding".length);
+  return `${variant}-text-font-size` in aliases ? TEXT_INSET_RUNGS : INSET_RUNGS;
 }
 function spaceStep(token) {
   return Number(token.slice("--space-".length));
 }
-function nearestSpaceRung(token, rungs) {
+function snapRung(token, rungs, direction) {
   const step = spaceStep(token);
-  let best = 0;
-  for (let i = 1; i < rungs.length; i++) {
-    if (Math.abs(spaceStep(rungs[i]) - step) <= Math.abs(spaceStep(rungs[best]) - step)) best = i;
+  if (direction > 0) return rungs.findIndex((rung) => spaceStep(rung) > step);
+  for (let index = rungs.length - 1; index >= 0; index--) {
+    if (spaceStep(rungs[index]) < step) return index;
   }
-  return best;
+  return -1;
 }
-function resolve(op, value) {
+function resolve(op, variable, value, aliases) {
   if (typeof value !== "string" || !TOKEN_NAME.test(value)) return { skip: "raw-value" };
   if (!LADDERS[op.kind].family.includes(value)) return { skip: "off-ladder" };
   if (op.set !== void 0) return { from: value, to: op.set };
-  const rungs = rungsFor(op);
+  const rungs = rungsFor(op, variable, aliases);
   let index = rungs.indexOf(value);
+  let shift = op.shift;
   if (index < 0) {
     if (value === RADIUS_FULL) return { skip: "pill-preserved" };
-    index = nearestSpaceRung(value, rungs);
+    index = snapRung(value, rungs, shift);
+    if (index < 0) return { skip: "clamped" };
+    shift -= Math.sign(shift);
   }
-  const wanted = index + op.shift;
+  const wanted = index + shift;
   const landed = Math.min(Math.max(wanted, 0), rungs.length - 1);
   if (landed !== wanted && rungs[landed] === value) return { skip: "clamped" };
   return { from: value, to: rungs[landed] };
@@ -157,7 +180,7 @@ function validateOp(op, configs) {
   const hasSet = op.set !== void 0;
   const hasShift = op.shift !== void 0;
   if (hasSet === hasShift) throw new Error(`A ${op.kind} op needs exactly one of "set" or "shift"`);
-  const settable = op.kind === "radius" ? ladder.family : ladder.rungs;
+  const settable = ladder.settable;
   if (hasSet && !settable.includes(op.set)) {
     throw new Error(`"${op.set}" is not on the ${op.kind} ladder`);
   }
@@ -187,7 +210,7 @@ function adjustAliases(configs, ops, now) {
       let changed = false;
       for (const [variable, value] of Object.entries(config.aliases)) {
         if (!matchesKind(variable, op.kind)) continue;
-        const outcome = resolve(op, value);
+        const outcome = resolve(op, variable, value, config.aliases);
         if ("skip" in outcome) {
           reportFor(component).skips.push({ variable, value, reason: outcome.skip });
           continue;
@@ -250,8 +273,749 @@ function resolveDataDirs(opts = {}) {
     legacyManifestsDir: fileConfig.manifestsDir ? import_path.default.resolve(fileConfig.manifestsDir) : void 0
   };
 }
+
+// src/editor/core/themes/migrations/2026-04-24-legacy-keys-and-bg-to-canvas.ts
+var LEGACY_KEY_RENAMES = {
+  "--empty": "--page-bg",
+  "--empty-attachment": "--page-bg-attachment",
+  // Orphan exports dropped from tokens.css; no new home — silently discard.
+  "--border-neutral": null,
+  // Shadow cleanup: these five tokens were removed (low/zero consumers,
+  // aesthetic drift). Dialog migrated onto --shadow-2xl; focus rings moved
+  // to their own --ring-focus-* namespace, which themes don't carry by
+  // default — tokens.css provides the canonical values.
+  "--shadow-app": null,
+  "--shadow-card": null,
+  "--shadow-overlay": null,
+  "--shadow-focus": null,
+  "--shadow-glow-green": null
+};
+var BG_TO_CANVAS_PREFIXES = ["--color-bg-", "--surface-bg", "--border-bg", "--text-bg"];
+function migrateBgToCanvas(rawVars) {
+  for (const oldKey of Object.keys(rawVars)) {
+    for (const prefix of BG_TO_CANVAS_PREFIXES) {
+      if (!oldKey.startsWith(prefix)) continue;
+      const suffix = oldKey.slice(prefix.length);
+      if (suffix && !suffix.startsWith("-")) continue;
+      const newKey = prefix.replace("-bg", "-canvas") + suffix;
+      if (newKey === oldKey) continue;
+      const value = rawVars[oldKey];
+      delete rawVars[oldKey];
+      if (!(newKey in rawVars)) rawVars[newKey] = value;
+      break;
+    }
+  }
+}
+function migrateLegacyKeys(rawVars) {
+  for (const [oldKey, newKey] of Object.entries(LEGACY_KEY_RENAMES)) {
+    if (!(oldKey in rawVars)) continue;
+    const value = rawVars[oldKey];
+    delete rawVars[oldKey];
+    if (newKey && !(newKey in rawVars)) rawVars[newKey] = value;
+  }
+  migrateBgToCanvas(rawVars);
+}
+var colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas = {
+  id: "2026-04-24-legacy-keys-and-bg-to-canvas",
+  fromVersion: 0,
+  toVersion: 1,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = { ...rawVars };
+    migrateLegacyKeys(out);
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-04-24-component-prefix-and-suffix-renames.ts
+var COMPONENT_PREFIX_RENAMES = {
+  "--segment-": "--segmentedcontrol-",
+  "--collapsible-": "--collapsiblesection-",
+  "--progress-": "--progressbar-",
+  "--section-divider-": "--sectiondivider-",
+  "--radio-": "--radiobutton-",
+  "--inline-edit-": "--inlineeditactions-"
+};
+var COMPONENT_SUFFIX_RENAMES = {
+  progressbar: [["-track-bg", "-track-surface"]],
+  inlineeditactions: [
+    ["-bg-hover", "-hover-surface"],
+    ["-bg", "-surface"]
+  ]
+};
+var componentMigration_2026_04_24_prefixAndSuffixRenames = {
+  id: "2026-04-24-component-prefix-and-suffix-renames",
+  fromVersion: 0,
+  toVersion: 1,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const component = meta.component ?? "";
+    const out = {};
+    const suffixRules = COMPONENT_SUFFIX_RENAMES[component] ?? [];
+    for (const [oldKey, value] of Object.entries(rawVars)) {
+      let key = oldKey;
+      if (key === "--detail-nav-bg") key = "--detailnav-surface";
+      for (const [oldPrefix, newPrefix] of Object.entries(COMPONENT_PREFIX_RENAMES)) {
+        if (key.startsWith(oldPrefix)) {
+          key = newPrefix + key.slice(oldPrefix.length);
+          break;
+        }
+      }
+      for (const [oldSuffix, newSuffix] of suffixRules) {
+        if (key.endsWith(oldSuffix)) {
+          key = key.slice(0, -oldSuffix.length) + newSuffix;
+          break;
+        }
+      }
+      if (!(key in out)) out[key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-04-27-segmentedcontrol-disabled-flatten.ts
+var OPTION_DISABLED_PREFIX = "--segmentedcontrol-option-disabled-";
+var DISABLED_PREFIX = "--segmentedcontrol-disabled-";
+var SELECTED_DISABLED_PREFIX = "--segmentedcontrol-selected-disabled-";
+var SELECTED_HOVER_PREFIX = "--segmentedcontrol-selected-hover-";
+var componentMigration_2026_04_27_segmentedcontrolDisabledFlatten = {
+  id: "2026-04-27-segmentedcontrol-disabled-flatten",
+  fromVersion: 1,
+  toVersion: 2,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "segmentedcontrol") return { ...rawVars };
+    const out = {};
+    for (const [oldKey, value] of Object.entries(rawVars)) {
+      let key = oldKey;
+      if (key.startsWith(SELECTED_DISABLED_PREFIX)) continue;
+      if (key.startsWith(SELECTED_HOVER_PREFIX)) continue;
+      if (key.startsWith(OPTION_DISABLED_PREFIX)) {
+        key = DISABLED_PREFIX + key.slice(OPTION_DISABLED_PREFIX.length);
+      }
+      if (!(key in out)) out[key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-08-collapsiblesection-variant-namespace.ts
+var PREFIX = "--collapsiblesection-";
+var STATE_NAMES = /* @__PURE__ */ new Set(["default", "hover", "active", "expanded"]);
+var componentMigration_2026_05_08_collapsiblesectionVariantNamespace = {
+  id: "2026-05-08-collapsiblesection-variant-namespace",
+  fromVersion: 2,
+  toVersion: 3,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "collapsiblesection") return { ...rawVars };
+    const out = {};
+    for (const [oldKey, value] of Object.entries(rawVars)) {
+      let key = oldKey;
+      if (key.startsWith(PREFIX)) {
+        const tail = key.slice(PREFIX.length);
+        const firstSegment = tail.split("-", 1)[0];
+        if (STATE_NAMES.has(firstSegment)) {
+          key = `${PREFIX}container-${tail}`;
+        }
+      }
+      if (!(key in out)) out[key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-08-collapsiblesection-frame-and-cleanup.ts
+var PFX = "--collapsiblesection-";
+var componentMigration_2026_05_08_collapsiblesectionFrameAndCleanup = {
+  id: "2026-05-08-collapsiblesection-frame-and-cleanup",
+  fromVersion: 3,
+  toVersion: 4,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "collapsiblesection") return { ...rawVars };
+    const out = {};
+    for (const prop of ["surface", "border", "border-width", "radius"]) {
+      const src = `${PFX}container-default-${prop}`;
+      if (src in rawVars) {
+        out[`${PFX}container-frame-${prop}`] = rawVars[src];
+      }
+    }
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (/^--collapsiblesection-chromeless-(default|hover|active)-(border|border-width|radius)$/.test(key)) continue;
+      if (/^--collapsiblesection-container-(hover|active)-(border|border-width|radius)$/.test(key)) continue;
+      if (/^--collapsiblesection-container-default-(border|border-width|radius)$/.test(key)) continue;
+      if (/^--collapsiblesection-divider-(default|hover|active)-radius$/.test(key)) continue;
+      if (/^--collapsiblesection-(chromeless|divider|container)-expanded-(border|border-width|radius)$/.test(key)) continue;
+      if (/^--collapsiblesection-(chromeless|divider)-expanded-surface$/.test(key)) continue;
+      if (!(key in out)) out[key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-10-sectiondivider-gradient-stops.ts
+var PFX2 = "--sectiondivider-";
+var VARIANTS = ["canvas", "neutral", "alternate", "primary", "accent", "special"];
+var OLD_STOP_RE = /^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-gradient-stop-\d+$/;
+var componentMigration_2026_05_10_sectiondividerGradientStops = {
+  id: "2026-05-10-sectiondivider-gradient-stops",
+  fromVersion: 4,
+  toVersion: 5,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "sectiondivider") return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (OLD_STOP_RE.test(key)) continue;
+      out[key] = value;
+    }
+    const setIfMissing = (key, fallback) => {
+      if (!(key in out)) out[key] = fallback;
+    };
+    for (const v of VARIANTS) {
+      const old1 = rawVars[`${PFX2}${v}-gradient-stop-1`];
+      const old2 = rawVars[`${PFX2}${v}-gradient-stop-2`];
+      const old4 = rawVars[`${PFX2}${v}-gradient-stop-4`];
+      setIfMissing(`${PFX2}${v}-gradient-angle`, "--gradient-angle-diagonal");
+      setIfMissing(`${PFX2}${v}-gradient-stop-1-color`, old1 ?? `--surface-${v}-highest`);
+      setIfMissing(`${PFX2}${v}-gradient-stop-1-position`, "--gradient-stop-start");
+      setIfMissing(`${PFX2}${v}-gradient-stop-2-color`, old2 ?? `--surface-${v}-higher`);
+      setIfMissing(`${PFX2}${v}-gradient-stop-2-position`, "--gradient-stop-mid");
+      setIfMissing(`${PFX2}${v}-gradient-stop-3-color`, old4 ?? `--surface-${v}`);
+      setIfMissing(`${PFX2}${v}-gradient-stop-3-position`, "--gradient-stop-end");
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-13-primary-to-brand.ts
+var PALETTE_STEPS = ["100", "200", "300", "400", "500", "600", "700", "800", "850", "900", "950"];
+var SURFACE_SUFFIXES = ["lowest", "lower", "low", "high", "higher", "highest"];
+var BORDER_SUFFIXES = ["faint", "subtle", "medium", "strong"];
+var TEXT_SUFFIXES = ["secondary", "tertiary", "muted", "disabled"];
+var RENAME_MAP = (() => {
+  const m = {};
+  for (const step of PALETTE_STEPS) m[`--color-primary-${step}`] = `--color-brand-${step}`;
+  m["--surface-primary"] = "--surface-brand";
+  for (const suf of SURFACE_SUFFIXES) m[`--surface-primary-${suf}`] = `--surface-brand-${suf}`;
+  m["--border-primary"] = "--border-brand";
+  for (const suf of BORDER_SUFFIXES) m[`--border-primary-${suf}`] = `--border-brand-${suf}`;
+  m["--text-primary-color"] = "--text-brand";
+  for (const suf of TEXT_SUFFIXES) m[`--text-primary-${suf}`] = `--text-brand-${suf}`;
+  return m;
+})();
+function renameToken(name) {
+  return RENAME_MAP[name] ?? name;
+}
+function renameKeys(rawVars) {
+  const out = {};
+  for (const [k, v] of Object.entries(rawVars)) {
+    out[renameToken(k)] = v;
+  }
+  return out;
+}
+function renameKeysAndValues(rawVars) {
+  const out = {};
+  for (const [k, v] of Object.entries(rawVars)) {
+    out[renameToken(k)] = renameToken(v);
+  }
+  return out;
+}
+var colorsAndTypeMigration_2026_05_13_primaryToBrand = {
+  id: "2026-05-13-primary-to-brand-theme",
+  fromVersion: 1,
+  toVersion: 2,
+  appliesTo: "colors-and-type",
+  apply: renameKeys
+};
+var componentMigration_2026_05_13_primaryToBrand = {
+  id: "2026-05-13-primary-to-brand-component",
+  fromVersion: 5,
+  toVersion: 6,
+  appliesTo: "component-config",
+  apply: renameKeysAndValues
+};
+
+// src/editor/core/themes/migrations/2026-05-19-collapsiblesection-drop-frame-surface.ts
+function dropFrameSurface(rawVars, meta) {
+  if (meta.component !== "collapsiblesection") return rawVars;
+  const { "--collapsiblesection-container-frame-surface": _drop, ...rest } = rawVars;
+  return rest;
+}
+var componentMigration_2026_05_19_collapsiblesectionDropFrameSurface = {
+  id: "2026-05-19-collapsiblesection-drop-frame-surface",
+  fromVersion: 6,
+  toVersion: 7,
+  appliesTo: "component-config",
+  apply: dropFrameSurface
+};
+
+// src/editor/core/themes/migrations/2026-05-19-sectiondivider-rich-gradient.ts
+var FLAT_RE = /^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-gradient-(angle|stop-[123]-(color|position))$/;
+var componentMigration_2026_05_19_sectiondividerRichGradient = {
+  id: "2026-05-19-sectiondivider-rich-gradient",
+  fromVersion: 7,
+  toVersion: 8,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "sectiondivider") return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (FLAT_RE.test(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-20-sectiondivider-slim-variants.ts
+var VARIANTS2 = ["lg", "md", "sm"];
+var SUFFIX_RENAMES = [
+  [/-title-border-width$/, "-title-outline-width"],
+  [/-title-stroke-color$/, "-title-outline-color"],
+  [
+    /^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-padding$/,
+    "--sectiondivider-$1-spacing"
+  ]
+];
+function renameKeySuffix(key) {
+  for (const [re, repl] of SUFFIX_RENAMES) {
+    if (re.test(key)) return key.replace(re, repl);
+  }
+  return key;
+}
+function splitFamilyKey(key) {
+  const m = key.match(/^--sectiondivider-(canvas|neutral|alternate|primary|accent|special)-(.+)$/);
+  if (!m) return null;
+  return { family: m[1], suffix: m[2] };
+}
+var componentMigration_2026_05_20_sectiondividerSlimVariants = {
+  id: "2026-05-20-sectiondivider-slim-variants",
+  fromVersion: 8,
+  toVersion: 9,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "sectiondivider") return { ...rawVars };
+    const out = {};
+    const canvasValues = {};
+    for (const [rawKey, value] of Object.entries(rawVars)) {
+      const key = renameKeySuffix(rawKey);
+      const parts = splitFamilyKey(key);
+      if (!parts) {
+        out[key] = value;
+        continue;
+      }
+      if (parts.family !== "canvas") continue;
+      canvasValues[parts.suffix] = value;
+    }
+    for (const suffix of Object.keys(canvasValues)) {
+      for (const v of VARIANTS2) {
+        out[`--sectiondivider-${v}-${suffix}`] = canvasValues[suffix];
+      }
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-21-sectiondivider-spacing-to-padding.ts
+var componentMigration_2026_05_21_sectiondividerSpacingToPadding = {
+  id: "2026-05-21-sectiondivider-spacing-to-padding",
+  fromVersion: 9,
+  toVersion: 10,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "sectiondivider") return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const renamed = key.replace(
+        /^--sectiondivider-(lg|md|sm)-spacing$/,
+        "--sectiondivider-$1-padding"
+      );
+      out[renamed] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-22-sectiondivider-intrinsics-to-css.ts
+var componentMigration_2026_05_22_sectiondividerIntrinsicsToCss = {
+  id: "2026-05-22-sectiondivider-intrinsics-to-css",
+  fromVersion: 10,
+  toVersion: 11,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "sectiondivider") return { ...rawVars };
+    const VARIANTS4 = ["lg", "md", "sm"];
+    const prefix = "--sectiondivider-";
+    const dropped = /* @__PURE__ */ new Set();
+    for (const v of VARIANTS4) {
+      dropped.add(`${prefix}${v}-show-eyebrow`);
+      dropped.add(`${prefix}${v}-show-description`);
+      dropped.add(`${prefix}${v}-show-hairline`);
+      dropped.add(`${prefix}${v}-hairline`);
+      dropped.add(`${prefix}${v}-eyebrow-uppercase`);
+    }
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (dropped.has(key)) continue;
+      out[key] = value;
+    }
+    for (const v of VARIANTS4) {
+      const showEyebrow = rawVars[`${prefix}${v}-show-eyebrow`];
+      if (showEyebrow !== void 0) {
+        out[`${prefix}${v}-eyebrow-display`] = showEyebrow === "1" ? "block" : "none";
+      }
+      const showDesc = rawVars[`${prefix}${v}-show-description`];
+      if (showDesc !== void 0) {
+        out[`${prefix}${v}-description-display`] = showDesc === "1" ? "flex" : "none";
+      }
+      const showHair = rawVars[`${prefix}${v}-show-hairline`];
+      const oldHair = rawVars[`${prefix}${v}-hairline`];
+      const oldHairIsPos = typeof oldHair === "string" && oldHair !== "" && oldHair !== "off";
+      let newHair;
+      if (showHair === "") newHair = "none";
+      else if (showHair === "1") newHair = oldHairIsPos ? oldHair : "above-label";
+      else if (oldHair !== void 0) newHair = oldHairIsPos ? oldHair : "none";
+      if (newHair !== void 0) {
+        out[`${prefix}${v}-hairline`] = newHair;
+      }
+      const upper = rawVars[`${prefix}${v}-eyebrow-uppercase`];
+      if (upper !== void 0) {
+        out[`${prefix}${v}-eyebrow-text-transform`] = upper === "1" ? "uppercase" : "none";
+      }
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-24-segmentedcontrol-divider-inset.ts
+var componentMigration_2026_05_24_segmentedcontrolDividerInset = {
+  id: "2026-05-24-segmentedcontrol-divider-inset",
+  fromVersion: 11,
+  toVersion: 12,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "segmentedcontrol") return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (key === "--segmentedcontrol-divider-height") continue;
+      out[key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-24-promote-state-shared-tokens.ts
+var BUTTON_VARIANTS = ["primary", "secondary", "outline", "success", "danger", "warning"];
+var BUTTON_STATES = ["hover", "disabled"];
+var BUTTON_PROPS = ["padding", "radius", "border-width"];
+var buttonDeadKeys = new Set(
+  BUTTON_VARIANTS.flatMap(
+    (v) => BUTTON_STATES.flatMap(
+      (s) => BUTTON_PROPS.map((p) => `--button-${v}-${s}-${p}`)
+    )
+  )
+);
+var segmentedcontrolDeadKeys = /* @__PURE__ */ new Set([
+  "--segmentedcontrol-selected-icon-size",
+  "--segmentedcontrol-option-hover-icon-size",
+  "--segmentedcontrol-disabled-icon-size"
+]);
+var componentMigration_2026_05_24_promoteStateSharedTokens = {
+  id: "2026-05-24-promote-state-shared-tokens",
+  fromVersion: 12,
+  toVersion: 13,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    const dead = meta.component === "button" ? buttonDeadKeys : meta.component === "segmentedcontrol" ? segmentedcontrolDeadKeys : null;
+    if (!dead) return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (dead.has(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-24-progressbar-collapse-variants.ts
+var PRIMARY_PREFIX = "--progressbar-primary-";
+var NEW_PREFIX = "--progressbar-";
+var DROP_PREFIXES = [
+  "--progressbar-success-",
+  "--progressbar-warning-",
+  "--progressbar-danger-",
+  "--progressbar-info-"
+];
+var componentMigration_2026_05_24_progressbarCollapseVariants = {
+  id: "2026-05-24-progressbar-collapse-variants",
+  fromVersion: 13,
+  toVersion: 14,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "progressbar") return { ...rawVars };
+    const out = {};
+    for (const [oldKey, value] of Object.entries(rawVars)) {
+      if (DROP_PREFIXES.some((p) => oldKey.startsWith(p))) continue;
+      const key = oldKey.startsWith(PRIMARY_PREFIX) ? NEW_PREFIX + oldKey.slice(PRIMARY_PREFIX.length) : oldKey;
+      if (!(key in out)) out[key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-24-collapsiblesection-drop-active-state.ts
+function dropActiveState(rawVars, meta) {
+  if (meta.component !== "collapsiblesection") return rawVars;
+  const re = /^--collapsiblesection-(chromeless|divider|container)-active-/;
+  const out = {};
+  for (const [key, value] of Object.entries(rawVars)) {
+    if (re.test(key)) continue;
+    out[key] = value;
+  }
+  return out;
+}
+var componentMigration_2026_05_24_collapsiblesectionDropActiveState = {
+  id: "2026-05-24-collapsiblesection-drop-active-state",
+  fromVersion: 14,
+  toVersion: 15,
+  appliesTo: "component-config",
+  apply: dropActiveState
+};
+
+// src/editor/core/themes/migrations/2026-05-25-cornerbadge-flatten-variants.ts
+var VARIANTS3 = ["primary", "accent", "neutral", "alternate", "canvas", "special", "success", "warning", "danger", "info"];
+var RE = new RegExp(`^--corner-badge-(${VARIANTS3.join("|")})-(.+)$`);
+var CURRENT_COLOR_PROPS = /* @__PURE__ */ new Set(["surface", "border", "text"]);
+function flattenVariants(rawVars, meta) {
+  if (meta.component !== "cornerbadge") return rawVars;
+  const out = {};
+  const collected = /* @__PURE__ */ new Map();
+  for (const [key, value] of Object.entries(rawVars)) {
+    const m = key.match(RE);
+    if (m) {
+      const prop = m[2];
+      if (CURRENT_COLOR_PROPS.has(prop)) {
+        out[key] = value;
+        continue;
+      }
+      if (!collected.has(prop)) collected.set(prop, value);
+      continue;
+    }
+    out[key] = value;
+  }
+  for (const [prop, value] of collected) {
+    const flatKey = `--corner-badge-${prop}`;
+    if (!(flatKey in out)) out[flatKey] = value;
+  }
+  return out;
+}
+var componentMigration_2026_05_25_cornerbadgeFlattenVariants = {
+  id: "2026-05-25-cornerbadge-flatten-variants",
+  fromVersion: 15,
+  toVersion: 16,
+  appliesTo: "component-config",
+  apply: flattenVariants
+};
+
+// src/editor/core/themes/migrations/2026-05-26-drop-overlay-extra-stops.ts
+var DROPPED_TO_KEPT = {
+  "--overlay-lowest": "--overlay-low",
+  "--overlay-lower": "--overlay-low",
+  "--overlay-higher": "--overlay-high",
+  "--overlay-highest": "--overlay-high"
+};
+var colorsAndTypeMigration_2026_05_26_dropOverlayExtraStops = {
+  id: "2026-05-26-drop-overlay-extra-stops-theme",
+  fromVersion: 2,
+  toVersion: 3,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (key in DROPPED_TO_KEPT) continue;
+      out[key] = value;
+    }
+    return out;
+  }
+};
+var componentMigration_2026_05_26_dropOverlayExtraStops = {
+  id: "2026-05-26-drop-overlay-extra-stops-component",
+  fromVersion: 16,
+  toVersion: 17,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[key] = DROPPED_TO_KEPT[value] ?? value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-29-tabbar-indicator-thickness-to-per-state-width.ts
+var TABBAR_STATES = ["default", "hover", "active", "disabled"];
+var OLD_KEY = "--tabbar-bar-indicator-thickness";
+var FALLBACK = "--border-width-2";
+var componentMigration_2026_05_29_tabbarIndicatorThicknessToPerStateWidth = {
+  id: "2026-05-29-tabbar-indicator-thickness-to-per-state-width",
+  fromVersion: 17,
+  toVersion: 18,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "tabbar") return { ...rawVars };
+    const seed = rawVars[OLD_KEY] ?? FALLBACK;
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (key === OLD_KEY) continue;
+      out[key] = value;
+    }
+    for (const state of TABBAR_STATES) {
+      const newKey = `--tabbar-${state}-indicator-border-width`;
+      if (!(newKey in out)) out[newKey] = seed;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-29-segmentedcontrol-small-divider-rename.ts
+var RENAMES = {
+  "--segmentedcontrol-divider-small-thickness": "--segmentedcontrol-small-divider-thickness",
+  "--segmentedcontrol-divider-small-inset": "--segmentedcontrol-small-divider-inset"
+};
+var componentMigration_2026_05_29_segmentedcontrolSmallDividerRename = {
+  id: "2026-05-29-segmentedcontrol-small-divider-rename",
+  fromVersion: 18,
+  toVersion: 19,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "segmentedcontrol") return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      out[RENAMES[key] ?? key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-05-29-toggle-derive-track-from-thumb.ts
+var componentMigration_2026_05_29_toggleDeriveTrackFromThumb = {
+  id: "2026-05-29-toggle-derive-track-from-thumb",
+  fromVersion: 19,
+  toVersion: 20,
+  appliesTo: "component-config",
+  apply(rawVars, meta) {
+    if (meta.component !== "toggle") return { ...rawVars };
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (key === "--toggle-track-width" || key === "--toggle-track-thickness") continue;
+      out[key] = value;
+    }
+    if (!("--toggle-track-padding" in out)) {
+      out["--toggle-track-padding"] = "--space-2";
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-08-13-drop-legacy-shape-space-keys.ts
+var DROPPED = /* @__PURE__ */ new Set([
+  "--badge-trait-radius",
+  "--badge-trait-padding",
+  "--sectiondivider-padding",
+  "--dialog-primary-default-radius",
+  "--dialog-primary-default-padding",
+  "--dialog-primary-hover-radius",
+  "--dialog-primary-hover-padding",
+  "--dialog-secondary-default-radius",
+  "--dialog-secondary-default-padding",
+  "--dialog-secondary-hover-radius",
+  "--dialog-secondary-hover-padding"
+]);
+var colorsAndTypeMigration_2026_08_13_dropLegacyShapeSpaceKeys = {
+  id: "2026-08-13-drop-legacy-shape-space-keys",
+  fromVersion: 3,
+  toVersion: 4,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      if (DROPPED.has(key)) continue;
+      out[key] = value;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-08-15-line-height-scale-rename.ts
+var RENAMED = {
+  "--line-height-xs": "--line-height-none",
+  "--line-height-sm": "--line-height-tighter",
+  "--line-height-md": "--line-height-normal",
+  "--line-height-lg": "--line-height-relaxed",
+  "--line-height-xl": "--line-height-relaxed"
+};
+var REFERENCE = /--line-height-(?:xs|sm|md|lg|xl)(?![\w-])/g;
+function renameValues(rawVars) {
+  const out = {};
+  for (const [key, value] of Object.entries(rawVars)) {
+    out[key] = typeof value === "string" ? value.replace(REFERENCE, (name) => RENAMED[name]) : value;
+  }
+  return out;
+}
+var colorsAndTypeMigration_2026_08_15_lineHeightScaleRename = {
+  id: "2026-08-15-line-height-scale-rename-colors-and-type",
+  fromVersion: 4,
+  toVersion: 5,
+  appliesTo: "colors-and-type",
+  apply: renameValues
+};
+var componentMigration_2026_08_15_lineHeightScaleRename = {
+  id: "2026-08-15-line-height-scale-rename-component",
+  fromVersion: 20,
+  toVersion: 21,
+  appliesTo: "component-config",
+  apply: renameValues
+};
+
+// src/editor/core/themes/migrations/index.ts
+var MIGRATIONS = [
+  colorsAndTypeMigration_2026_04_24_legacyKeysAndBgToCanvas,
+  colorsAndTypeMigration_2026_05_13_primaryToBrand,
+  componentMigration_2026_04_24_prefixAndSuffixRenames,
+  componentMigration_2026_04_27_segmentedcontrolDisabledFlatten,
+  componentMigration_2026_05_08_collapsiblesectionVariantNamespace,
+  componentMigration_2026_05_08_collapsiblesectionFrameAndCleanup,
+  componentMigration_2026_05_10_sectiondividerGradientStops,
+  componentMigration_2026_05_13_primaryToBrand,
+  componentMigration_2026_05_19_collapsiblesectionDropFrameSurface,
+  componentMigration_2026_05_19_sectiondividerRichGradient,
+  componentMigration_2026_05_20_sectiondividerSlimVariants,
+  componentMigration_2026_05_21_sectiondividerSpacingToPadding,
+  componentMigration_2026_05_22_sectiondividerIntrinsicsToCss,
+  componentMigration_2026_05_24_segmentedcontrolDividerInset,
+  componentMigration_2026_05_24_promoteStateSharedTokens,
+  componentMigration_2026_05_24_progressbarCollapseVariants,
+  componentMigration_2026_05_24_collapsiblesectionDropActiveState,
+  componentMigration_2026_05_25_cornerbadgeFlattenVariants,
+  colorsAndTypeMigration_2026_05_26_dropOverlayExtraStops,
+  componentMigration_2026_05_26_dropOverlayExtraStops,
+  componentMigration_2026_05_29_tabbarIndicatorThicknessToPerStateWidth,
+  componentMigration_2026_05_29_segmentedcontrolSmallDividerRename,
+  componentMigration_2026_05_29_toggleDeriveTrackFromThumb,
+  colorsAndTypeMigration_2026_08_13_dropLegacyShapeSpaceKeys,
+  colorsAndTypeMigration_2026_08_15_lineHeightScaleRename,
+  componentMigration_2026_08_15_lineHeightScaleRename
+];
+function countFor(kind) {
+  return MIGRATIONS.filter((m) => m.appliesTo === kind).length;
+}
+var CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION = countFor("colors-and-type");
+var CURRENT_COMPONENT_SCHEMA_VERSION = countFor("component-config");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CURRENT_COMPONENT_SCHEMA_VERSION,
   adjustAliases,
   matchesKind,
   readLiveTokensConfig,