@motion-proto/live-tokens 0.52.1 → 0.53.0

package/dist-plugin/migrateData/index.cjs

@@ -171,8 +171,889 @@ function versionedFileResourceServer(opts) {
   };
 }
 
+// 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");
+function runMigrations(kind, fileVersion, rawVars, meta = {}) {
+  const applicable = MIGRATIONS.filter((m) => m.appliesTo === kind && m.fromVersion >= fileVersion).sort((a, b) => a.toVersion - b.toVersion);
+  let out = { ...rawVars };
+  for (const m of applicable) {
+    out = m.apply(out, meta);
+  }
+  return out;
+}
+
+// src/editor/core/themes/migrateComponentConfig.ts
+function migrateComponentConfig(component, aliasesIn, rawConfig, fileVersion) {
+  const stringPart = {};
+  const objectPart = {};
+  for (const [k, v] of Object.entries(aliasesIn)) {
+    if (typeof v === "string") stringPart[k] = v;
+    else objectPart[k] = v;
+  }
+  const configOut = {};
+  for (const [k, v] of Object.entries(rawConfig ?? {})) {
+    if (typeof v === "string") stringPart[k] = v;
+    else configOut[k] = v;
+  }
+  if (component === "sectiondivider") {
+    synthesizeSectionDividerGradients(stringPart, objectPart);
+  }
+  const migratedString = runMigrations("component-config", fileVersion, stringPart, { component });
+  const migratedObject = component === "sectiondivider" ? renameSectionDividerObjectSlots(objectPart) : objectPart;
+  return {
+    aliases: { ...migratedString, ...migratedObject },
+    config: configOut
+  };
+}
+var FAMILIES = ["canvas", "neutral", "alternate", "primary", "accent", "special"];
+var SIZE_VARIANTS = ["lg", "md", "sm"];
+function renameSectionDividerObjectSlots(objectPart) {
+  const canvasSourceKeys = [
+    "--sectiondivider-canvas-background",
+    "--sectiondivider-canvas-gradient",
+    "--sectiondivider-color-canvas-background"
+  ];
+  let canvasGradient;
+  for (const key of canvasSourceKeys) {
+    if (objectPart[key] !== void 0) {
+      canvasGradient = objectPart[key];
+      break;
+    }
+  }
+  const out = {};
+  for (const [key, value] of Object.entries(objectPart)) {
+    let isFamilyGradient = false;
+    for (const f of FAMILIES) {
+      if (key === `--sectiondivider-${f}-background` || key === `--sectiondivider-${f}-gradient` || key === `--sectiondivider-color-${f}-background`) {
+        isFamilyGradient = true;
+        break;
+      }
+    }
+    if (isFamilyGradient) continue;
+    out[key] = value;
+  }
+  if (canvasGradient !== void 0) {
+    for (const v of SIZE_VARIANTS) {
+      out[`--sectiondivider-${v}-background`] = canvasGradient;
+    }
+  }
+  return out;
+}
+var SECTIONDIVIDER_VARIANTS = ["canvas", "neutral", "alternate", "primary", "accent", "special"];
+function synthesizeSectionDividerGradients(stringPart, objectPart) {
+  const GRADIENT_ANGLE_TOKENS = {
+    "--gradient-angle-horizontal": 90,
+    "--gradient-angle-vertical": 180,
+    "--gradient-angle-diagonal": 135,
+    "--gradient-angle-counter-diagonal": 45
+  };
+  const GRADIENT_STOP_POSITIONS = {
+    "--gradient-stop-start": 0,
+    "--gradient-stop-mid": 50,
+    "--gradient-stop-end": 100
+  };
+  const parseAngle = (raw) => {
+    if (!raw) return 135;
+    if (raw.startsWith("--")) return GRADIENT_ANGLE_TOKENS[raw] ?? 135;
+    const m = raw.match(/^(-?\d+(?:\.\d+)?)\s*deg$/i);
+    return m ? parseFloat(m[1]) : 135;
+  };
+  const parsePosition = (raw, fallback) => {
+    if (!raw) return fallback;
+    if (raw.startsWith("--")) return GRADIENT_STOP_POSITIONS[raw] ?? fallback;
+    const m = raw.match(/^(-?\d+(?:\.\d+)?)\s*%$/);
+    return m ? parseFloat(m[1]) : fallback;
+  };
+  const parseStopColor = (raw) => {
+    if (!raw) return null;
+    if (raw.startsWith("--")) return { color: raw };
+    const mix = raw.match(/^color-mix\(\s*in\s+srgb\s*,\s*var\((--[a-z0-9-]+)\)\s+([\d.]+)%\s*,\s*transparent\s*\)$/i);
+    if (mix) return { color: mix[1], opacity: parseFloat(mix[2]) };
+    return null;
+  };
+  for (const v of SECTIONDIVIDER_VARIANTS) {
+    const slot = `--sectiondivider-${v}-gradient`;
+    if (slot in objectPart) continue;
+    const angleKey = `${slot}-angle`;
+    const has1 = stringPart[`${slot}-stop-1-color`] !== void 0;
+    const has2 = stringPart[`${slot}-stop-2-color`] !== void 0;
+    const has3 = stringPart[`${slot}-stop-3-color`] !== void 0;
+    if (!has1 && !has2 && !has3) continue;
+    const stops = [];
+    const positionDefaults = [0, 50, 100];
+    for (let i = 1; i <= 3; i++) {
+      const c = parseStopColor(stringPart[`${slot}-stop-${i}-color`]);
+      if (!c) continue;
+      const pos = parsePosition(stringPart[`${slot}-stop-${i}-position`], positionDefaults[i - 1]);
+      stops.push({ position: pos, color: c.color, ...c.opacity !== void 0 ? { opacity: c.opacity } : {} });
+    }
+    if (stops.length < 2) continue;
+    objectPart[slot] = {
+      kind: "gradient",
+      value: {
+        type: "linear",
+        angle: parseAngle(stringPart[angleKey]),
+        stops
+      }
+    };
+  }
+}
+
+// src/editor/core/themes/themeTypes.ts
+var THEME_SCHEMA_VERSION = 4;
+
+// src/editor/core/components/componentConfigKeys.ts
+var KNOWN_COMPONENT_CONFIG_KEYS = /* @__PURE__ */ new Set([
+  "--dialog-confirm-variant",
+  "--dialog-cancel-variant",
+  // SectionDivider per-variant `color-family` is editor metadata that drives
+  // the family-swap rewrite on aliases. It is not a runtime CSS value, so it
+  // stays in the config bucket. The other intrinsics (align, hairline,
+  // eyebrow/description visibility, eyebrow text-transform) now flow through
+  // the alias bucket as cascading CSS vars — see the 2026-05-22 migration.
+  "--sectiondivider-lg-color-family",
+  "--sectiondivider-md-color-family",
+  "--sectiondivider-sm-color-family"
+]);
+
 // vite-plugin/themes/normalizeTheme.ts
-var THEME_SCHEMA_VERSION = 3;
 function asObject(value) {
   return value && typeof value === "object" && !Array.isArray(value) ? value : null;
 }
@@ -194,10 +1075,41 @@ function migrateEmbeddedKey(src) {
   const { theme, ...rest } = src;
   return { ...rest, colorsAndType: theme };
 }
+function routeKnownConfigKeys(aliases, config) {
+  const outAliases = { ...aliases };
+  const outConfig = { ...config };
+  for (const key of Object.keys(outAliases)) {
+    if (!KNOWN_COMPONENT_CONFIG_KEYS.has(key)) continue;
+    if (outConfig[key] === void 0) outConfig[key] = outAliases[key];
+    delete outAliases[key];
+  }
+  return { aliases: outAliases, config: outConfig };
+}
+function migrateEmbeddedComponentConfig(comp, config, fileVersion) {
+  const { schemaVersion: _entryStamp, aliases: rawAliases, config: rawConfig, ...rest } = config;
+  const aliasesIn = asObject(rawAliases);
+  if (!aliasesIn) {
+    return rawConfig !== void 0 ? { ...rest, config: rawConfig } : rest;
+  }
+  const migratedConfig = migrateComponentConfig(
+    comp,
+    aliasesIn,
+    asObject(rawConfig) ?? void 0,
+    fileVersion
+  );
+  const split = routeKnownConfigKeys(migratedConfig.aliases, migratedConfig.config);
+  const out = { ...rest, aliases: split.aliases };
+  if (rawConfig !== void 0 || Object.keys(split.config).length > 0) {
+    out.config = split.config;
+  }
+  return out;
+}
 function normalizeTheme(raw, resolvers) {
   const input = asObject(raw) ?? {};
   const migrated = input.schemaVersion !== THEME_SCHEMA_VERSION;
-  const src = migrated ? migrateEmbeddedKey(input) : input;
+  const inputVersion = typeof input.schemaVersion === "number" ? input.schemaVersion : 0;
+  const src = inputVersion < 3 ? migrateEmbeddedKey(input) : input;
+  const componentSchemaVersion = typeof input.componentSchemaVersion === "number" ? input.componentSchemaVersion : 0;
   const dropped = [];
   const now = (/* @__PURE__ */ new Date()).toISOString();
   const embeddedColorsAndType = asObject(src.colorsAndType);
@@ -216,18 +1128,42 @@ function normalizeTheme(raw, resolvers) {
   const componentConfigs = {};
   for (const [comp, value] of Object.entries(asObject(src.componentConfigs) ?? {})) {
     const embedded = asObject(value);
+    let resolvedConfig;
     if (embedded) {
-      componentConfigs[comp] = stripFileMarker(embedded);
-      continue;
+      resolvedConfig = stripFileMarker(embedded);
+    } else {
+      const configName = asString(value, "default");
+      const resolved = asObject(resolvers.readComponentConfig(comp, configName));
+      if (!resolved) {
+        dropped.push(`${comp}/${configName}`);
+        continue;
+      }
+      resolvedConfig = stripFileMarker(resolved);
     }
-    const configName = asString(value, "default");
-    if (configName === "default") continue;
-    const resolved = asObject(resolvers.readComponentConfig(comp, configName));
-    if (!resolved) {
-      dropped.push(`${comp}/${configName}`);
+    componentConfigs[comp] = migrateEmbeddedComponentConfig(comp, resolvedConfig, componentSchemaVersion);
+  }
+  const filled = { components: [], aliases: 0, orphans: 0 };
+  for (const comp of resolvers.listComponentNames()) {
+    const base = asObject(resolvers.readComponentConfig(comp, "default"));
+    const baseAliases = base ? asObject(base.aliases) : null;
+    if (!base || !baseAliases) continue;
+    const entry = componentConfigs[comp];
+    if (!entry) {
+      const { schemaVersion: _standaloneStamp, ...rest } = stripFileMarker(base);
+      componentConfigs[comp] = structuredClone(rest);
+      filled.components.push(comp);
       continue;
     }
-    componentConfigs[comp] = stripFileMarker(resolved);
+    const entryAliases = asObject(entry.aliases) ?? {};
+    for (const key of Object.keys(baseAliases)) {
+      if (key in entryAliases) continue;
+      entryAliases[key] = structuredClone(baseAliases[key]);
+      filled.aliases++;
+    }
+    entry.aliases = entryAliases;
+    for (const key of Object.keys(entryAliases)) {
+      if (!(key in baseAliases)) filled.orphans++;
+    }
   }
   return {
     theme: {
@@ -236,10 +1172,12 @@ function normalizeTheme(raw, resolvers) {
       updatedAt: asString(src.updatedAt, now),
       schemaVersion: THEME_SCHEMA_VERSION,
       colorsAndType,
-      componentConfigs
+      componentConfigs,
+      componentSchemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION
     },
     dropped,
-    migrated
+    migrated,
+    filled
   };
 }
 
@@ -482,6 +1420,7 @@ function migrateData(opts) {
   const resolvers = {
     readColorsAndType: (name) => colorsRes.readJson(name),
     readComponentConfig: (comp, name) => compRes(comp).readJson(name),
+    listComponentNames: () => comps,
     normalizeColorsAndType: (colorsAndType) => colorsAndType
   };
   const upgradedThemes = [];
@@ -561,7 +1500,6 @@ function migrateData(opts) {
       for (const comp of comps) {
         const pointed = prodConfigs.get(comp);
         if (!isObject(pointed)) continue;
-        if (sameContent(pointed, defaultConfig(comp))) continue;
         componentConfigs[comp] = stripMarkers(pointed);
       }
       recoveredTheme = {
@@ -570,7 +1508,11 @@ function migrateData(opts) {
         updatedAt: now,
         schemaVersion: THEME_SCHEMA_VERSION,
         colorsAndType: isObject(prodColors) ? stripMarkers(prodColors) : null,
-        componentConfigs
+        componentConfigs,
+        // The configs above are what boot just wrote (`prodConfigs`, read off
+        // the pointed files), at the current component schema — not 0, which
+        // would misdescribe them as unmigrated.
+        componentSchemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION
       };
       const slug = nextAvailableName((n) => themesRes.existingPath(n) !== null, RECOVERED_SLUG);
       recoveredThemePath = themesRes.filePath(slug);