@motion-proto/live-tokens 0.50.0 → 0.53.0

package/dist-plugin/generateColorsAndType/index.js

@@ -4,18 +4,28 @@ import {
   PALETTE_SPECS,
   PALETTE_STEPS,
   SCALES,
-  gamutClamp,
-  hexToOklch,
+  formatGradientValue,
   makeAnchor,
-  oklchToHex,
   palettesToVars,
+  resmoothAutoCurve,
   sanitizeFileName,
   scaleCurveDefaults,
   scaleStepToX,
   scaleToCssVar,
   setCurveAnchor,
   syncBaseAnchor
-} from "../chunk-76TFDTJO.js";
+} from "../chunk-PB2JTK2H.js";
+import {
+  CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION,
+  CURRENT_COMPONENT_SCHEMA_VERSION
+} from "../chunk-NE6N66EE.js";
+import {
+  cssColorToOklch,
+  gamutClamp,
+  hexToOklch,
+  oklchToHex,
+  oklchToHexClamped
+} from "../chunk-YR6GPXW2.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs
@@ -75,38 +85,6 @@ function makeDefaultGradients() {
     }
   ];
 }
-function formatGradientStop(s) {
-  return `${formatGradientStopColor(s)} ${s.position}%`;
-}
-function formatGradientValue(v) {
-  if (v.type === "none") return "transparent";
-  if (v.type === "solid") {
-    const first = v.stops[0];
-    if (!first) return "transparent";
-    return formatGradientStopColor(first);
-  }
-  const stops = v.stops.map(formatGradientStop).join(", ");
-  if (v.type === "linear") return `linear-gradient(${v.angle}deg, ${stops})`;
-  const cx = v.centerX ?? 50;
-  return `radial-gradient(${formatRadialShape(v)} at ${cx}% 50%, ${stops})`;
-}
-var DEFAULT_RADIAL_BASE_PX = 100;
-function formatRadialShape(v) {
-  const ax = v.aspectX ?? 1;
-  const ay = v.aspectY ?? 1;
-  if (ax === 1 && ay === 1) {
-    return v.radius && v.radius > 0 ? `circle ${v.radius}px` : "circle";
-  }
-  const base = v.radius && v.radius > 0 ? v.radius : DEFAULT_RADIAL_BASE_PX;
-  const rx = base * ax;
-  const ry = base * ay;
-  return `ellipse ${rx.toFixed(2)}px ${ry.toFixed(2)}px`;
-}
-function formatGradientStopColor(s) {
-  const base = s.color.startsWith("--") ? `var(${s.color})` : s.color;
-  const opacity = s.opacity ?? 100;
-  return opacity >= 100 ? base : `color-mix(in srgb, ${base} ${opacity}%, transparent)`;
-}
 
 // src/editor/core/palettes/contrast.ts
 var AA_BODY = 4.5;
@@ -188,7 +166,7 @@ function findLForContrast(opts) {
 }
 
 // src/editor/ui/palette/paletteMath.ts
-var DEFAULT_NEUTRAL_LIGHTNESS = () => [makeAnchor(0, 92, 5), makeAnchor(100, 3, 5)];
+var DEFAULT_NEUTRAL_LIGHTNESS = () => resmoothAutoCurve([makeAnchor(0, 92), makeAnchor(100, 3)]);
 function defaultPaletteConfig(opts) {
   const cfg = {
     baseColor: opts.baseColor,
@@ -212,746 +190,6 @@ function defaultScaleCurvesObject(scheme = "dark") {
   };
 }
 
-// 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_STEPS2 = ["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_STEPS2) 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");
-
 // src/editor/core/themes/generateColorsAndType.ts
 var HEX_RE = /^#[0-9a-f]{6}$/i;
 var HARMONY_MODES = [
@@ -1055,12 +293,16 @@ function surfaceVars() {
     "--page-bg"
   ];
 }
+function varToHex(value) {
+  const parsed = value ? cssColorToOklch(value) : null;
+  return parsed ? oklchToHexClamped(parsed.l, parsed.c, parsed.h) : null;
+}
 function worstSurface(textHex, vars) {
   let against = "";
   let ratio = Infinity;
   for (const surfVar of surfaceVars()) {
-    const surfHex = vars[surfVar];
-    if (!surfHex || !HEX_RE.test(surfHex)) continue;
+    const surfHex = varToHex(vars[surfVar]);
+    if (!surfHex) continue;
     const r = contrastRatio(textHex, surfHex);
     if (r < ratio) {
       ratio = r;
@@ -1088,17 +330,18 @@ function runContrastGate(configs, scheme) {
     const vars = palettesToVars(configs);
     let anyFixed = false;
     for (const def of defs) {
-      const textHex = vars[def.textVar];
-      if (!textHex) continue;
+      const text = cssColorToOklch(vars[def.textVar] ?? "");
+      if (!text) continue;
+      const textHex = oklchToHexClamped(text.l, text.c, text.h);
       const worst = worstSurface(textHex, vars);
       if (worst.ratio >= def.floor) continue;
       const cfg = configs[def.paletteLabel];
       const seed = cfg.baseColor;
       const solved = findLForContrast({
-        against: vars[worst.against],
+        against: varToHex(vars[worst.against]) ?? "#000000",
         ratio: def.target,
         direction,
-        c: hexToOklch(textHex).c,
+        c: text.c,
         h: seed.h,
         lMax: Math.min(1, 2 * seed.l)
       });
@@ -1110,7 +353,7 @@ function runContrastGate(configs, scheme) {
   }
   const finalVars = palettesToVars(configs);
   const checks = defs.map((def) => {
-    const worst = worstSurface(finalVars[def.textVar] ?? "#000000", finalVars);
+    const worst = worstSurface(varToHex(finalVars[def.textVar]) ?? "#000000", finalVars);
     return {
       textVar: def.textVar,
       floor: def.floor,
@@ -1214,6 +457,7 @@ function buildColorsAndTypeFromSeeds(brief, carry = {}, now = (/* @__PURE__ */ n
   };
 }
 export {
+  CURRENT_COMPONENT_SCHEMA_VERSION,
   buildColorsAndTypeFromSeeds,
   readLiveTokensConfig,
   resolveDataDirs,