@motion-proto/live-tokens 0.50.0 → 0.53.0

package/dist-plugin/index.cjs

@@ -59,32 +59,134 @@ function parseColorOpacity(value) {
   if (!m) return null;
   return { name: m[1], opacity: parseInt(m[2], 10) };
 }
+function formatColorOpacity(name, opacity) {
+  return `color-mix(in srgb, var(${name}) ${opacity}%, transparent)`;
+}
+
+// src/editor/core/themes/parsers/gradient.ts
+var RADIAL_BASE_PX = 100;
+function formatStopColor(s) {
+  const opacity = s.opacity ?? 100;
+  if (s.color.startsWith("--")) {
+    return opacity >= 100 ? `var(${s.color})` : formatColorOpacity(s.color, opacity);
+  }
+  return opacity >= 100 ? s.color : `color-mix(in srgb, ${s.color} ${opacity}%, transparent)`;
+}
+function formatGradientStops(stops) {
+  return stops.map((s) => `${formatStopColor(s)} ${s.position}%`).join(", ");
+}
+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 : RADIAL_BASE_PX;
+  return `ellipse ${(base * ax).toFixed(2)}px ${(base * ay).toFixed(2)}px`;
+}
+function formatGradientValue(v) {
+  if (v.type === "none") return "transparent";
+  if (v.type === "solid") {
+    const first = v.stops[0];
+    return first ? formatStopColor(first) : "transparent";
+  }
+  const stops = formatGradientStops(v.stops);
+  if (v.type === "linear") return `linear-gradient(${v.angle}deg, ${stops})`;
+  return `radial-gradient(${formatRadialShape(v)} at ${v.centerX ?? 50}% 50%, ${stops})`;
+}
+var NUM = String.raw`-?\d+(?:\.\d+)?`;
+var LINEAR_RE = new RegExp(String.raw`^linear-gradient\(\s*(${NUM})deg\s*,\s*(.+)\)$`, "i");
+var RADIAL_RE = new RegExp(
+  String.raw`^radial-gradient\(\s*(circle|circle\s+${NUM}px|ellipse\s+${NUM}px\s+${NUM}px)\s+at\s+(${NUM})%\s+50%\s*,\s*(.+)\)$`,
+  "i"
+);
+var STOP_RE = new RegExp(String.raw`^(.*?)\s+(${NUM})%$`);
+var CIRCLE_RADIUS_RE = new RegExp(String.raw`^circle\s+(${NUM})px$`, "i");
+var ELLIPSE_RE = new RegExp(String.raw`^ellipse\s+(${NUM})px\s+(${NUM})px$`, "i");
+var VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
+function splitTopLevel(s) {
+  const parts = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (c === "(") depth++;
+    else if (c === ")") depth--;
+    else if (c === "," && depth === 0) {
+      parts.push(s.slice(start, i));
+      start = i + 1;
+    }
+  }
+  parts.push(s.slice(start));
+  return parts;
+}
+function parseStop(raw) {
+  const m = raw.trim().match(STOP_RE);
+  if (!m) return null;
+  const position = parseFloat(m[2]);
+  const color = m[1].trim();
+  const opacity = parseColorOpacity(color);
+  if (opacity) return { position, color: opacity.name, opacity: opacity.opacity };
+  const token = color.match(VAR_RE);
+  return { position, color: token ? token[1] : color };
+}
+function parseStops(raw) {
+  const stops = [];
+  for (const part of splitTopLevel(raw)) {
+    const stop = parseStop(part);
+    if (!stop) return null;
+    stops.push(stop);
+  }
+  return stops.length > 0 ? stops : null;
+}
+function parseRadialShape(raw) {
+  const shape = raw.trim();
+  if (/^circle$/i.test(shape)) return {};
+  const circle = shape.match(CIRCLE_RADIUS_RE);
+  if (circle) return { radius: parseFloat(circle[1]) };
+  const ellipse = shape.match(ELLIPSE_RE);
+  if (!ellipse) return null;
+  const ax = parseFloat(ellipse[1]) / RADIAL_BASE_PX;
+  const ay = parseFloat(ellipse[2]) / RADIAL_BASE_PX;
+  return { ...ax === 1 ? {} : { aspectX: ax }, ...ay === 1 ? {} : { aspectY: ay } };
+}
+function parseGradientValue(value) {
+  const css = value.trim();
+  const linear = css.match(LINEAR_RE);
+  if (linear) {
+    const stops2 = parseStops(linear[2]);
+    return stops2 && { type: "linear", angle: parseFloat(linear[1]), stops: stops2 };
+  }
+  const radial = css.match(RADIAL_RE);
+  if (!radial) return null;
+  const shape = parseRadialShape(radial[1]);
+  const stops = parseStops(radial[3]);
+  if (!shape || !stops) return null;
+  const centerX = parseFloat(radial[2]);
+  return {
+    type: "radial",
+    angle: 0,
+    ...shape,
+    ...centerX === 50 ? {} : { centerX },
+    stops
+  };
+}
 
 // src/editor/core/storage/files/versionedFileResourceClient.ts
 function sanitizeFileName(name) {
   return name.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9\-_]/g, "").replace(/-+/g, "-").replace(/^[-_]+|-+$/g, "") || "unnamed";
 }
 
-// src/editor/core/palettes/oklch.ts
+// src/system/internal/oklch.ts
 function srgbToLinear(c) {
   return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
 }
-function linearToSrgb(c) {
-  return c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
-}
 function hexToLinearRgb(hex) {
   const r = parseInt(hex.slice(1, 3), 16) / 255;
   const g = parseInt(hex.slice(3, 5), 16) / 255;
   const b = parseInt(hex.slice(5, 7), 16) / 255;
   return [srgbToLinear(r), srgbToLinear(g), srgbToLinear(b)];
 }
-function linearRgbToHex(r, g, b) {
-  const toHex = (c) => {
-    const v = Math.round(Math.max(0, Math.min(1, linearToSrgb(c))) * 255);
-    return v.toString(16).padStart(2, "0");
-  };
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
 function linearRgbToOklab(r, g, b) {
   const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
   const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
@@ -126,19 +228,10 @@ function hexToOklch(hex) {
   const [L, a, bVal] = linearRgbToOklab(r, g, b);
   return oklabToOklch(L, a, bVal);
 }
-function oklchToHex(l, c, h) {
-  const [L, a, b] = oklchToOklab(l, c, h);
-  const [r, g, bVal] = oklabToLinearRgb(L, a, b);
-  return linearRgbToHex(r, g, bVal);
-}
 function isInGamut(r, g, b) {
   const eps = 1e-4;
   return r >= -eps && r <= 1 + eps && g >= -eps && g <= 1 + eps && b >= -eps && b <= 1 + eps;
 }
-function oklchToHexClamped(l, c, h) {
-  const g = gamutClamp(l, c, h);
-  return oklchToHex(g.l, g.c, g.h);
-}
 function gamutClamp(l, c, h) {
   if (l <= 0) return { l: 0, c: 0, h };
   if (l >= 1) return { l: 1, c: 0, h };
@@ -159,6 +252,31 @@ function gamutClamp(l, c, h) {
   }
   return { l, c: lo, h };
 }
+function trim(value, decimals) {
+  return Number(value.toFixed(decimals)).toString();
+}
+function oklchToCss(l, c, h) {
+  const cs = trim(c, 4);
+  return `oklch(${trim(l, 4)} ${cs} ${cs === "0" ? "0" : trim(h, 2)})`;
+}
+function oklchToCssClamped(l, c, h) {
+  const g = gamutClamp(l, c, h);
+  return oklchToCss(g.l, g.c, g.h);
+}
+var OKLCH_RE = /^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)(%?)\s+([\d.]+)(?:deg)?\s*\)$/i;
+var HEX6_RE = /^#[0-9a-f]{6}$/i;
+function parseOklchCss(value) {
+  const m = OKLCH_RE.exec(value.trim());
+  if (!m) return null;
+  const l = Number.parseFloat(m[1]) / (m[2] === "%" ? 100 : 1);
+  const c = Number.parseFloat(m[3]) * (m[4] === "%" ? 4e-3 : 1);
+  return { l, c, h: Number.parseFloat(m[5]) };
+}
+function cssColorToOklch(value) {
+  const raw = value.trim();
+  if (HEX6_RE.test(raw)) return hexToOklch(raw);
+  return parseOklchCss(raw);
+}
 
 // src/editor/ui/curveEngine.ts
 function makeAnchor(x, y, tangentLen = 15) {
@@ -183,6 +301,15 @@ function tangentAnchor(x, y, prev, next) {
   const outDx = next ? (next.x - x) * HANDLE_SPAN : 0;
   return { x, y, inDx, inDy: m * inDx, outDx, outDy: m * outDx };
 }
+function isCornerAnchor(a) {
+  return a.inDx === 0 && a.inDy === 0 && a.outDx === 0 && a.outDy === 0;
+}
+function resmoothAutoCurve(anchors) {
+  if (anchors.length < 2) return anchors;
+  return anchors.map(
+    (a, i) => isCornerAnchor(a) ? a : tangentAnchor(a.x, a.y, anchors[i - 1] ?? null, anchors[i + 1] ?? null)
+  );
+}
 function evalBezier(p0x, p0y, c0x, c0y, c1x, c1y, p1x, p1y, t) {
   const u = 1 - t, u2 = u * u, u3 = u2 * u;
   const t2 = t * t, t3 = t2 * t;
@@ -278,37 +405,39 @@ var SCALES = [
 ];
 var BW_GUARD_MIN_L = 0.17;
 var BW_GUARD_MAX_L = 0.93;
-var DEFAULT_PALETTE_LIGHTNESS = () => [makeAnchor(0, 95, 5), makeAnchor(100, 8, 5)];
-var DEFAULT_PALETTE_SATURATION = () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)];
+var autoCurve = (...anchors) => resmoothAutoCurve(anchors);
+var DEFAULT_PALETTE_LIGHTNESS = () => autoCurve(makeAnchor(0, 95), makeAnchor(100, 8));
+var DEFAULT_PALETTE_SATURATION = () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 100));
+var wrapHue = (h) => (h % 360 + 360) % 360;
 function scaleCurveDefaults(scheme = "dark") {
   if (scheme === "light") {
     return {
       Surfaces: {
-        lightness: () => [makeAnchor(0, 98, 5), makeAnchor(100, 82, 5)],
-        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+        lightness: () => autoCurve(makeAnchor(0, 98), makeAnchor(100, 82)),
+        saturation: () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 100))
       },
       Borders: {
-        lightness: () => [makeAnchor(0, 92, 5), makeAnchor(100, 45, 5)],
-        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+        lightness: () => autoCurve(makeAnchor(0, 92), makeAnchor(100, 45)),
+        saturation: () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 100))
       },
       Text: {
-        lightness: () => [makeAnchor(0, 30, 30), makeAnchor(100, 120, 30)],
-        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)]
+        lightness: () => autoCurve(makeAnchor(0, 30), makeAnchor(100, 120)),
+        saturation: () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 15))
       }
     };
   }
   return {
     Surfaces: {
-      lightness: () => [makeAnchor(0, 15, 5), makeAnchor(100, 47, 5)],
-      saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+      lightness: () => autoCurve(makeAnchor(0, 15), makeAnchor(100, 47)),
+      saturation: () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 100))
     },
     Borders: {
-      lightness: () => [makeAnchor(0, 25, 5), makeAnchor(100, 80, 5)],
-      saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+      lightness: () => autoCurve(makeAnchor(0, 25), makeAnchor(100, 80)),
+      saturation: () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 100))
     },
     Text: {
-      lightness: () => [makeAnchor(0, 120, 30), makeAnchor(100, 55, 30)],
-      saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)]
+      lightness: () => autoCurve(makeAnchor(0, 120), makeAnchor(100, 55)),
+      saturation: () => autoCurve(makeAnchor(0, 100), makeAnchor(100, 15))
     }
   };
 }
@@ -327,14 +456,16 @@ function scaleStepToX(step, scale) {
   return scale.steps.length > 1 ? idx / (scale.steps.length - 1) * 100 : 50;
 }
 function serializeDerivedValue(value) {
-  return value.kind === "raw" ? value.css : oklchToHexClamped(value.l, value.c, value.h);
+  return value.kind === "raw" ? value.css : oklchToCssClamped(value.l, value.c, value.h);
 }
-function computePaletteOklch(index, base, lightnessCurve, saturationCurve, curveOffset) {
-  const { c: baseC, h } = base;
+function computePaletteOklch(index, base, lightnessCurve, saturationCurve, curveOffset, hueCurve) {
+  const { c: baseC } = base;
   const xPos = stepIndexToX(index);
   const targetL = Math.max(0, Math.min(100, sampleCurve(lightnessCurve, xPos) + (curveOffset.lightness ?? 0))) / 100;
   const satMul = Math.max(0, Math.min(2, (sampleCurve(saturationCurve, xPos) + (curveOffset.saturation ?? 0)) / 100));
   const targetC = baseC * satMul;
+  const hueDelta = (hueCurve ? sampleCurve(hueCurve, xPos) : 0) + (curveOffset.hue ?? 0);
+  const h = hueDelta === 0 ? base.h : wrapHue(base.h + hueDelta);
   return gamutClamp(targetL, targetC, h);
 }
 function nearestPaletteStep(lightnessCurve, baseL) {
@@ -430,10 +561,12 @@ function syncBaseAnchor(cfg) {
   const fresh = prev === void 0;
   let lCurve = cfg.lightnessCurve;
   let sCurve = cfg.saturationCurve;
+  let hCurve = cfg.hueCurve;
   if (prev) {
     const prevX = stepIndexToX(prev.step);
     lCurve = liftCurveAnchor(lCurve, prevX, prev.displacedL);
     sCurve = liftCurveAnchor(sCurve, prevX, prev.displacedS);
+    if (hCurve) hCurve = liftCurveAnchor(hCurve, prevX, prev.displacedH);
   }
   const step = nearestPaletteStep(lCurve, cfg.baseColor.l);
   const x = stepIndexToX(step);
@@ -441,12 +574,19 @@ function syncBaseAnchor(cfg) {
   const s = setCurveAnchor(sCurve, x, 100, fresh);
   cfg.lightnessCurve = l.curve;
   cfg.saturationCurve = s.curve;
+  const h = hCurve ? setCurveAnchor(hCurve, x, 0, fresh) : void 0;
+  if (h) cfg.hueCurve = h.curve;
   cfg.anchorPlacement = {
     step,
     displacedL: l.displacedY,
     displacedS: s.displacedY,
+    displacedH: h?.displacedY,
     priorLightnessEndpoints: prev?.priorLightnessEndpoints ?? l.priorEndpoints,
-    priorSaturationEndpoints: prev?.priorSaturationEndpoints ?? s.priorEndpoints
+    priorSaturationEndpoints: prev?.priorSaturationEndpoints ?? s.priorEndpoints,
+    // No else-branch reading `prev?.priorHueEndpoints`: that could only fire
+    // if a placed hue curve later went absent, which RJC 7 (reset never
+    // deletes) never lets happen.
+    priorHueEndpoints: h ? prev?.priorHueEndpoints ?? h.priorEndpoints : void 0
   };
 }
 function computeDerivedOklch(step, base, scaleTitle, scaleCurves, curveOffset) {
@@ -455,8 +595,10 @@ function computeDerivedOklch(step, base, scaleTitle, scaleCurves, curveOffset) {
   const defs = defaultScaleCurves[scaleTitle];
   const lCurve = scaleCurves[scaleTitle]?.lightness ?? defs.lightness();
   const sCurve = scaleCurves[scaleTitle]?.saturation ?? defs.saturation();
+  const hCurve = scaleCurves[scaleTitle]?.hue;
   const lOff = curveOffset[`${scaleTitle}-lightness`] ?? 0;
   const sOff = curveOffset[`${scaleTitle}-saturation`] ?? 0;
+  const hOff = curveOffset[`${scaleTitle}-hue`] ?? 0;
   const { l: baseL, c: baseC, h: baseH } = base;
   let targetL;
   if (scale.isText) {
@@ -467,7 +609,9 @@ function computeDerivedOklch(step, base, scaleTitle, scaleCurves, curveOffset) {
   }
   const satMul = Math.max(0, Math.min(2, (sampleCurve(sCurve, xPos) + sOff) / 100));
   const targetC = baseC * satMul;
-  return gamutClamp(targetL, targetC, baseH);
+  const hueDelta = (hCurve ? sampleCurve(hCurve, xPos) : 0) + hOff;
+  const targetH = hueDelta === 0 ? baseH : wrapHue(baseH + hueDelta);
+  return gamutClamp(targetL, targetC, targetH);
 }
 function scaleToCssVar(scaleTitle, stepName, cssNamespace) {
   if (cssNamespace === null) return null;
@@ -496,7 +640,7 @@ function derivePaletteValues(spec, config) {
   const saturationCurve = config.saturationCurve ?? DEFAULT_PALETTE_SATURATION();
   PALETTE_STEPS.forEach((ps, index) => {
     const k = paletteStepKey(ps.label);
-    const value = k in overrides ? { kind: "color", ...overrides[k] } : { kind: "color", ...computePaletteOklch(index, baseColor, lightnessCurve, saturationCurve, curveOffset) };
+    const value = k in overrides ? { kind: "color", ...overrides[k] } : { kind: "color", ...computePaletteOklch(index, baseColor, lightnessCurve, saturationCurve, curveOffset, config.hueCurve) };
     out[`--color-${spec.cssNamespace}-${ps.label}`] = value;
   });
   for (const scale of SCALES) {
@@ -531,8 +675,8 @@ function derivePaletteValues(spec, config) {
       );
       const stopsCss = sortedStops.map((s) => {
         const stopValue = out[`--color-${spec.cssNamespace}-${s.paletteLabel}`];
-        const hex = stopValue ? serializeDerivedValue(stopValue) : "#000000";
-        return `${hex} ${s.position}%`;
+        const css = stopValue ? serializeDerivedValue(stopValue) : "oklch(0 0 0)";
+        return `${css} ${s.position}%`;
       }).join(", ");
       let gradient;
       switch (gradientStyle) {
@@ -551,13 +695,6 @@ function derivePaletteValues(spec, config) {
   }
   return out;
 }
-function derivePaletteVars(spec, config) {
-  const out = {};
-  for (const [k, v] of Object.entries(derivePaletteValues(spec, config))) {
-    out[k] = serializeDerivedValue(v);
-  }
-  return out;
-}
 function palettesToValues(palettes) {
   const out = {};
   for (const spec of PALETTE_SPECS) {
@@ -572,7 +709,6 @@ function palettesToVars(palettes) {
   }
   return out;
 }
-var HEX_RE = /^#[0-9a-f]{6}$/i;
 function reconcilePalettesFromCssVars(palettes, cssVars) {
   const next = structuredClone(palettes);
   const consumed = /* @__PURE__ */ new Set();
@@ -581,16 +717,17 @@ function reconcilePalettesFromCssVars(palettes, cssVars) {
     const current = next[spec.label];
     if (current === void 0) continue;
     if (current._imported === true) {
-      const anchorHex = cssVars[`--color-${spec.cssNamespace}-500`];
-      if (anchorHex && HEX_RE.test(anchorHex.trim())) {
-        next[spec.label] = { ...current, baseColor: hexToOklch(anchorHex.trim()), _imported: false };
+      const anchor = cssVars[`--color-${spec.cssNamespace}-500`];
+      const anchorOklch = anchor ? cssColorToOklch(anchor) : null;
+      if (anchorOklch) {
+        next[spec.label] = { ...current, baseColor: anchorOklch, _imported: false };
         syncBaseAnchor(next[spec.label]);
         snapped.add(spec.label);
       } else {
         next[spec.label] = { ...current, _imported: false };
       }
     }
-    for (const k of Object.keys(derivePaletteVars(spec, next[spec.label]))) {
+    for (const k of Object.keys(derivePaletteValues(spec, next[spec.label]))) {
       consumed.add(k);
     }
   }
@@ -617,6 +754,754 @@ function migratePaletteColorsToOklch(editorConfigs) {
   return out;
 }
 
+// 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");
+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;
+}
+
 // vite-plugin/files/versionedFileResourceServer.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -776,8 +1661,141 @@ async function dispatch(req, res, routes) {
   return false;
 }
 
+// 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;
 }
@@ -799,10 +1817,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);
@@ -821,18 +1870,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);
+      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);
+    }
+    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;
     }
-    const configName = asString(value, "default");
-    if (configName === "default") continue;
-    const resolved = asObject(resolvers.readComponentConfig(comp, configName));
-    if (!resolved) {
-      dropped.push(`${comp}/${configName}`);
-      continue;
+    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++;
     }
-    componentConfigs[comp] = stripFileMarker(resolved);
   }
   return {
     theme: {
@@ -841,10 +1914,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
   };
 }
 
@@ -987,7 +2062,7 @@ function ensureScale(css, opts) {
   lines.splice(insertAfter + 1, 0, ...block);
   return lines.join("\n");
 }
-function renameToken(css, oldName, newName) {
+function renameToken2(css, oldName, newName) {
   const defined = collectDefinedTokens(css);
   if (!defined.has(oldName) || defined.has(newName)) return css;
   const re = new RegExp(escapeRe(oldName) + "(?![a-z0-9-])", "gi");
@@ -1206,7 +2281,7 @@ var tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions = {
 };
 
 // vite-plugin/tokensCssMigrations/migrations/2026-07-20-line-height-rename.ts
-var RENAMES = [
+var RENAMES2 = [
   ["--line-height-xs", "--line-height-none"],
   ["--line-height-sm", "--line-height-tighter"],
   ["--line-height-md", "--line-height-normal"],
@@ -1226,7 +2301,7 @@ var tokensCssMigration_2026_07_20_lineHeightRename = {
   description: "Reshape --line-height-{xs..xl} to leading vocabulary (none/tightest/tighter/tight/normal/relaxed); retire the 2.0 slot",
   apply(css) {
     let out = css;
-    for (const [oldName, newName] of RENAMES) out = renameToken(out, oldName, newName);
+    for (const [oldName, newName] of RENAMES2) out = renameToken2(out, oldName, newName);
     out = removeToken(out, "--line-height-xl");
     out = ensureScale(out, {
       anchorPrefixes: ["--line-height-", "--font-size-", "--font-weight-", "--font-"],
@@ -1303,6 +2378,20 @@ var tokensCssMigration_2026_07_20_semanticTextStyles = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-08-19-oklch-color-values.ts
+var HEX_DECLARATION_RE = /(--[a-z0-9-]+:\s*)#([0-9a-f]{6})(?=\s*[;}])/gi;
+var tokensCssMigration_2026_08_19_oklchColorValues = {
+  id: "2026-08-19-oklch-color-values",
+  kind: "breaking",
+  description: "Rewrite hex token values as oklch()",
+  apply(css) {
+    return css.replace(HEX_DECLARATION_RE, (_match, prefix, hex) => {
+      const { l, c, h } = hexToOklch(`#${hex}`);
+      return `${prefix}${oklchToCss(l, c, h)}`;
+    });
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -1311,7 +2400,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_06_04_removeDeadSizeIconScale,
   tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions,
   tokensCssMigration_2026_07_20_lineHeightRename,
-  tokensCssMigration_2026_07_20_semanticTextStyles
+  tokensCssMigration_2026_07_20_semanticTextStyles,
+  tokensCssMigration_2026_08_19_oklchColorValues
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);
@@ -1379,8 +2469,29 @@ var PKG_VERSION = (() => {
 })();
 var BUNDLE_KIND_BY_VERSION = {
   1: "manifest-bundle",
+  3: "theme-bundle",
   [THEME_SCHEMA_VERSION]: "theme-bundle"
 };
+function extractAliasDeclarations(body) {
+  const aliases = {};
+  const re = /(--[a-z0-9-]+)\s*:\s*([^;]+);/gi;
+  let m;
+  while ((m = re.exec(body)) !== null) {
+    const value = m[2].trim();
+    const plain = value.match(/^var\((--[a-z0-9-]+)\)$/i);
+    if (plain) {
+      aliases[m[1]] = plain[1];
+      continue;
+    }
+    if (parseColorOpacity(value)) {
+      aliases[m[1]] = value;
+      continue;
+    }
+    const gradient = parseGradientValue(value);
+    if (gradient) aliases[m[1]] = { kind: "gradient", value: gradient };
+  }
+  return aliases;
+}
 function themeFileApi(opts) {
   const dataDirs = resolveDataDirs({
     dataDir: opts.dataDir,
@@ -1557,6 +2668,7 @@ function themeFileApi(opts) {
         const overrides = [];
         const defaultAliases = defaultCfg.aliases ?? {};
         for (const [varName, semanticValue] of Object.entries(prodCfg.aliases ?? {})) {
+          if (!(varName in defaultAliases)) continue;
           if (!aliasValuesEqual(defaultAliases[varName], semanticValue)) {
             overrides.push([varName, semanticValue]);
           }
@@ -1619,18 +2731,6 @@ function themeFileApi(opts) {
     import_fs4.default.writeFileSync(FONTS_CSS_PATH, content);
     console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${import_path4.default.basename(FONTS_CSS_PATH)}`);
   }
-  function extractAliasDeclarations(body) {
-    const aliases = {};
-    const re = /(--[a-z0-9-]+)\s*:\s*([^;]+);/gi;
-    let m;
-    while ((m = re.exec(body)) !== null) {
-      const value = m[2].trim();
-      const plain = value.match(/^var\((--[a-z0-9-]+)\)$/i);
-      if (plain) aliases[m[1]] = plain[1];
-      else if (parseColorOpacity(value)) aliases[m[1]] = value;
-    }
-    return aliases;
-  }
   function componentNameFromFile(filePath) {
     return import_path4.default.basename(filePath, ".svelte").toLowerCase();
   }
@@ -1706,17 +2806,10 @@ ${lines.join("\n")}
     r.ensureDir();
     const defaultPath = r.filePath("default");
     const sourceStat = import_fs4.default.statSync(sourcePath);
-    if (import_fs4.default.existsSync(defaultPath)) {
-      const defaultStat = import_fs4.default.statSync(defaultPath);
-      if (defaultStat.mtimeMs >= sourceStat.mtimeMs) return;
-    }
-    const source = import_fs4.default.readFileSync(sourcePath, "utf-8");
-    const body = extractGlobalRootBody(source);
-    const aliases = extractAliasDeclarations(body);
-    const now = (/* @__PURE__ */ new Date()).toISOString();
-    let createdAt = now;
+    let createdAt = (/* @__PURE__ */ new Date()).toISOString();
     let existingUpdatedAt;
     let existingAliases;
+    let existingSchemaVersion;
     if (import_fs4.default.existsSync(defaultPath)) {
       try {
         const existing = JSON.parse(import_fs4.default.readFileSync(defaultPath, "utf-8"));
@@ -1725,25 +2818,29 @@ ${lines.join("\n")}
         if (existing.aliases && typeof existing.aliases === "object") {
           existingAliases = existing.aliases;
         }
+        if (typeof existing.schemaVersion === "number") existingSchemaVersion = existing.schemaVersion;
       } catch {
       }
-    }
-    if (existingAliases) {
-      for (const [token, val] of Object.entries(existingAliases)) {
-        if (val !== null && typeof val === "object" && !(token in aliases)) {
-          aliases[token] = val;
-        }
+      const defaultStat = import_fs4.default.statSync(defaultPath);
+      if (defaultStat.mtimeMs >= sourceStat.mtimeMs && existingSchemaVersion === CURRENT_COMPONENT_SCHEMA_VERSION) {
+        return;
       }
     }
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    const source = import_fs4.default.readFileSync(sourcePath, "utf-8");
+    const body = extractGlobalRootBody(source);
+    const aliases = extractAliasDeclarations(body);
     const aliasesUnchanged = existingAliases !== void 0 && JSON.stringify(existingAliases) === JSON.stringify(aliases);
+    const schemaStampCurrent = existingSchemaVersion === CURRENT_COMPONENT_SCHEMA_VERSION;
     const defaultConfig = {
       name: "default",
       component: comp,
       createdAt,
       updatedAt: aliasesUnchanged && existingUpdatedAt ? existingUpdatedAt : now,
-      aliases
+      aliases,
+      schemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION
     };
-    if (aliasesUnchanged && existingUpdatedAt) {
+    if (aliasesUnchanged && schemaStampCurrent && existingUpdatedAt) {
       const t = /* @__PURE__ */ new Date();
       import_fs4.default.utimesSync(defaultPath, t, t);
       return;
@@ -1791,6 +2888,7 @@ ${lines.join("\n")}
   const diskThemeResolvers = {
     readColorsAndType: (name) => colorsAndTypeResource.readJson(sanitizeFileName(name)),
     readComponentConfig: (comp, name) => readComponentConfig(comp, sanitizeFileName(name)),
+    listComponentNames,
     normalizeColorsAndType: (colorsAndType) => normalizeColorsAndType(colorsAndType)
   };
   function readTheme(fileName) {
@@ -1816,7 +2914,7 @@ ${lines.join("\n")}
     return "corrupt";
   }
   function notAThemeError(fileName) {
-    return `"${fileName}" is a colors-and-type file, not a theme. Before 0.48 those lived in themes/; move it to ${import_path4.default.basename(COLORS_AND_TYPE_DIR)}/ or delete it.`;
+    return `"${fileName}" is a colors-and-type file, not a theme. Before 0.48 those lived in themes/; move it to ${import_path4.default.basename(COLORS_AND_TYPE_DIR)}/ or delete it. To build a theme, use the theme generator skill "generate-theme".`;
   }
   function respondUnreadableTheme(res, fileName, missingError) {
     switch (unreadableThemeReason(fileName)) {
@@ -1878,19 +2976,26 @@ ${lines.join("\n")}
     const componentConfigs = {};
     for (const comp of listComponentNames()) {
       const cfg = readComponentConfig(comp, "default");
-      if (cfg) componentConfigs[comp] = cfg;
+      if (cfg) {
+        const { schemaVersion: _standaloneStamp, ...rest } = cfg;
+        componentConfigs[comp] = rest;
+      }
     }
-    if (existing?.schemaVersion === THEME_SCHEMA_VERSION && JSON.stringify(existing.colorsAndType) === JSON.stringify(colorsAndType) && JSON.stringify(existing.componentConfigs) === JSON.stringify(componentConfigs)) {
+    const contentUnchanged = JSON.stringify(existing?.colorsAndType) === JSON.stringify(colorsAndType) && JSON.stringify(existing?.componentConfigs) === JSON.stringify(componentConfigs);
+    if (existing?.schemaVersion === THEME_SCHEMA_VERSION && existing?.componentSchemaVersion === CURRENT_COMPONENT_SCHEMA_VERSION && contentUnchanged) {
       return;
     }
     const now = (/* @__PURE__ */ new Date()).toISOString();
     writeTheme("default", {
       name: "Motion Proto",
       createdAt: typeof existing?.createdAt === "string" ? existing.createdAt : now,
-      updatedAt: now,
+      // A stamp-only rewrite (componentSchemaVersion catching up) is not a
+      // content change, so it doesn't bump this the way a real edit would.
+      updatedAt: contentUnchanged && typeof existing?.updatedAt === "string" ? existing.updatedAt : now,
       schemaVersion: THEME_SCHEMA_VERSION,
       colorsAndType,
-      componentConfigs
+      componentConfigs,
+      componentSchemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION
     });
   }
   function ensureThemesDir(warn) {
@@ -1922,14 +3027,24 @@ ${lines.join("\n")}
     if (!shipped) return null;
     return { data: normalizeColorsAndType(shipped), source: "default" };
   }
+  const loggedMissingThemeEntries = /* @__PURE__ */ new Set();
+  function resolveComponentConfigOrDefault(comp, theme) {
+    const embedded = theme?.componentConfigs[comp];
+    if (embedded) return { ...embedded, component: comp };
+    if (!loggedMissingThemeEntries.has(comp)) {
+      loggedMissingThemeEntries.add(comp);
+      console.warn(
+        `[live-tokens] "${comp}" has no entry in the open theme; resolving from its shipped default.`
+      );
+    }
+    return readComponentConfig(comp, "default");
+  }
   function resolveLiveComponentConfig(comp, theme) {
     const working = componentResource(comp).readWorking();
     if (working !== null) return { data: working, source: "working" };
-    const embedded = theme?.componentConfigs[comp];
-    if (embedded) return { data: { ...embedded, component: comp }, source: "theme" };
-    const cfg = readComponentConfig(comp, "default");
+    const cfg = resolveComponentConfigOrDefault(comp, theme);
     if (!cfg) return null;
-    return { data: cfg, source: "default" };
+    return { data: cfg, source: "theme" };
   }
   function resolveSavedColorsAndType(theme) {
     if (theme?.colorsAndType) return theme.colorsAndType;
@@ -1937,9 +3052,7 @@ ${lines.join("\n")}
     return shipped ? normalizeColorsAndType(shipped) : null;
   }
   function resolveSavedComponentConfig(comp, theme) {
-    const embedded = theme?.componentConfigs[comp];
-    if (embedded) return { ...embedded, component: comp };
-    return readComponentConfig(comp, "default");
+    return resolveComponentConfigOrDefault(comp, theme);
   }
   function sameJsonValue(a, b) {
     if (a === null || b === null) return a === b;
@@ -1975,26 +3088,9 @@ ${lines.join("\n")}
       if (entry.isDirectory()) componentResource(entry.name).clearWorking();
     }
   }
-  function formatAliasGradient(v) {
-    const stopColor = (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)`;
-    };
-    if (v.type === "none") return "transparent";
-    if (v.type === "solid") {
-      const first = v.stops[0];
-      if (!first) return "transparent";
-      return stopColor(first);
-    }
-    const stops = v.stops.map((s) => `${stopColor(s)} ${s.position}%`).join(", ");
-    if (v.type === "linear") return `linear-gradient(${v.angle}deg, ${stops})`;
-    const radial = v.radius && v.radius > 0 ? `circle ${v.radius}px at center` : "circle";
-    return `radial-gradient(${radial}, ${stops})`;
-  }
   function aliasValueToCss(v) {
     if (typeof v === "string") return v.startsWith("--") ? `var(${v})` : v;
-    return formatAliasGradient(v.value);
+    return formatGradientValue(v.value);
   }
   function aliasValuesEqual(a, b) {
     if (a === void 0 || b === void 0) return a === b;
@@ -2144,13 +3240,9 @@ ${lines.join("\n")}
     }
   }
   async function handleListComponents({ res }) {
-    const theme = activeTheme();
     const components = listComponentNames().map((comp) => ({
       name: comp,
-      // Presence, not a parse: one corrupt buffer must not take the listing
-      // down, and the door only has to say where each component's live config
-      // comes from.
-      source: componentResource(comp).hasWorking() ? "working" : theme?.componentConfigs[comp] ? "theme" : "default"
+      source: componentResource(comp).hasWorking() ? "working" : "theme"
     }));
     jsonResponse(res, 200, { components });
   }
@@ -2161,6 +3253,7 @@ ${lines.join("\n")}
   }
   async function handleGetComponentActive({ params, res }) {
     const [comp] = params;
+    if (rejectUnknownComponent(res, comp)) return;
     const resolved = resolveLiveComponentConfig(comp, activeTheme());
     if (!resolved) {
       jsonResponse(res, 404, { error: "Active config not found" });
@@ -2407,9 +3500,11 @@ ${lines.join("\n")}
       respondUnreadableTheme(res, fileName, "Theme not found");
       return;
     }
-    const { theme } = read;
+    const { theme, filled } = read;
     if (!theme.colorsAndType) {
-      jsonResponse(res, 422, { error: "This theme carries no colors and type" });
+      jsonResponse(res, 422, {
+        error: 'This theme carries no colors and type. Build one with the theme generator skill "generate-theme".'
+      });
       return;
     }
     clearAllWorking();
@@ -2433,7 +3528,8 @@ ${lines.join("\n")}
         _source: resolvedColorsAndType.source
       },
       componentConfigs: resolvedConfigs,
-      skippedComponents
+      skippedComponents,
+      filled
     });
   }
   async function handleExportTheme({ params, res }) {
@@ -2488,10 +3584,27 @@ ${lines.join("\n")}
     }
     const bundleResolvers = {
       readColorsAndType: () => bundle.theme,
-      readComponentConfig: (comp, name) => bundle.componentConfigs?.[`${comp}/${name}`],
+      // A named ref resolves inside the bundle only — a v1 bundle's
+      // `${comp}/${name}` map is itself the sender's data, and a stale name
+      // must still land in `dropped` rather than quietly picking up this
+      // install's copy. But `'default'` never named a bundled entry; v1
+      // spelled "no override" that way (normalizeTheme.ts's pointer-
+      // resolution loop treats it identically), so it always meant *this
+      // install's* default, not something the bundle carries. The
+      // completeness fill (Wave 2 of docs/plans/theme-completeness.md) relies
+      // on that fall-through: without it, `readComponentConfig(comp,
+      // 'default')` answers undefined for every component (no bundle ever
+      // carries a `<comp>/default` entry), the fill loop no-ops 25 times, and
+      // an incomplete bundle stays incomplete forever — exactly the drift RJC
+      // 10 exists to prevent.
+      readComponentConfig: (comp, name) => bundle.componentConfigs?.[`${comp}/${name}`] ?? (name === "default" ? readComponentConfig(comp, "default") : void 0),
+      // Installed components are a property of this install, not of the
+      // bundle being imported, so the completeness fill (Wave 2) uses the
+      // same list the disk resolver does.
+      listComponentNames,
       normalizeColorsAndType: (colorsAndType) => normalizeColorsAndType(colorsAndType)
     };
-    const { theme, dropped } = normalizeTheme(bundle.manifest, bundleResolvers);
+    const { theme, dropped, filled } = normalizeTheme(bundle.manifest, bundleResolvers);
     if (theme.colorsAndType) theme.colorsAndType = normalizeColorsAndType(theme.colorsAndType);
     if (!theme.colorsAndType) {
       jsonResponse(res, 400, { error: "Bundle carries no theme" });
@@ -2512,7 +3625,8 @@ ${lines.join("\n")}
       ok: true,
       theme: finalName,
       renames,
-      dropped
+      dropped,
+      filled
     });
   }
   async function handleAdoptLook({ res }) {