@motion-proto/live-tokens 0.7.1 → 0.8.0

package/dist-plugin/index.js

@@ -18,6 +18,410 @@ 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
+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;
+  const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+  const l = Math.cbrt(l_);
+  const m = Math.cbrt(m_);
+  const s = Math.cbrt(s_);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function oklabToLinearRgb(L, a, b) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+function oklabToOklch(L, a, b) {
+  const c = Math.sqrt(a * a + b * b);
+  let h = Math.atan2(b, a) * 180 / Math.PI;
+  if (h < 0) h += 360;
+  return { l: L, c, h };
+}
+function oklchToOklab(l, c, h) {
+  const hRad = h * Math.PI / 180;
+  return [l, c * Math.cos(hRad), c * Math.sin(hRad)];
+}
+function hexToOklch(hex) {
+  const [r, g, b] = hexToLinearRgb(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 gamutClamp(l, c, h) {
+  if (l <= 0) return { l: 0, c: 0, h };
+  if (l >= 1) return { l: 1, c: 0, h };
+  const [L, a, b] = oklchToOklab(l, c, h);
+  const [r, g, bVal] = oklabToLinearRgb(L, a, b);
+  if (isInGamut(r, g, bVal)) return { l, c, h };
+  let lo = 0;
+  let hi = c;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    const [La, aa, ba] = oklchToOklab(l, mid, h);
+    const [rr, gg, bb] = oklabToLinearRgb(La, aa, ba);
+    if (isInGamut(rr, gg, bb)) {
+      lo = mid;
+    } else {
+      hi = mid;
+    }
+  }
+  return { l, c: lo, h };
+}
+
+// src/editor/ui/curveEngine.ts
+function makeAnchor(x, y, tangentLen = 15) {
+  return { x, y, inDx: -tangentLen, inDy: 0, outDx: tangentLen, outDy: 0 };
+}
+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;
+  return {
+    x: u3 * p0x + 3 * u2 * t * c0x + 3 * u * t2 * c1x + t3 * p1x,
+    y: u3 * p0y + 3 * u2 * t * c0y + 3 * u * t2 * c1y + t3 * p1y
+  };
+}
+function sampleCurve(anchors, xPos) {
+  if (anchors.length === 0) return 0;
+  if (anchors.length === 1) return anchors[0].y;
+  if (xPos <= anchors[0].x) return anchors[0].y;
+  if (xPos >= anchors[anchors.length - 1].x) return anchors[anchors.length - 1].y;
+  let seg = 0;
+  while (seg < anchors.length - 2 && anchors[seg + 1].x < xPos) seg++;
+  const a0 = anchors[seg], a1 = anchors[seg + 1];
+  const p0x = a0.x, p0y = a0.y;
+  const c0x = a0.x + a0.outDx, c0y = a0.y + a0.outDy;
+  const c1x = a1.x + a1.inDx, c1y = a1.y + a1.inDy;
+  const p1x = a1.x, p1y = a1.y;
+  let lo = 0, hi = 1;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    const pt = evalBezier(p0x, p0y, c0x, c0y, c1x, c1y, p1x, p1y, mid);
+    if (pt.x < xPos) lo = mid;
+    else hi = mid;
+  }
+  return evalBezier(p0x, p0y, c0x, c0y, c1x, c1y, p1x, p1y, (lo + hi) / 2).y;
+}
+
+// src/editor/core/palettes/paletteDerivation.ts
+var PALETTE_SPECS = [
+  { label: "Neutral", cssNamespace: "neutral", mode: "gray", initialColor: "#808080" },
+  { label: "Alternate", cssNamespace: "alternate", mode: "gray", initialColor: "#808080" },
+  { label: "Background", cssNamespace: "canvas", mode: "chromatic", emptySelector: true, initialColor: "#1a1a2e" },
+  { label: "Brand", cssNamespace: "brand", mode: "chromatic", initialColor: "#c93636" },
+  { label: "Accent", cssNamespace: "accent", mode: "chromatic", initialColor: "#f49e0b" },
+  { label: "Special", cssNamespace: "special", mode: "chromatic", initialColor: "#8b5cf6" },
+  { label: "Info", cssNamespace: "info", mode: "chromatic", initialColor: "#3077e8" },
+  { label: "Success", cssNamespace: "success", mode: "chromatic", initialColor: "#21c45d" },
+  { label: "Warning", cssNamespace: "warning", mode: "chromatic", initialColor: "#e66e1a" },
+  { label: "Danger", cssNamespace: "danger", mode: "chromatic", initialColor: "#e8304f" }
+];
+var PALETTE_STEPS = [
+  { label: "100" },
+  { label: "200" },
+  { label: "300" },
+  { label: "400" },
+  { label: "500" },
+  { label: "600" },
+  { label: "700" },
+  { label: "800" },
+  { label: "850" },
+  { label: "900" },
+  { label: "950" }
+];
+var GRAY_STEPS = [
+  { label: "100" },
+  { label: "200" },
+  { label: "300" },
+  { label: "400" },
+  { label: "500" },
+  { label: "600" },
+  { label: "700" },
+  { label: "800" },
+  { label: "850" },
+  { label: "900" },
+  { label: "950" }
+];
+var SCALES = [
+  {
+    title: "Surfaces",
+    isText: false,
+    steps: [
+      { name: "lowest", position: -1 },
+      { name: "lower", position: -2 / 3 },
+      { name: "low", position: -1 / 3 },
+      { name: "default", position: 0 },
+      { name: "high", position: 1 / 3 },
+      { name: "higher", position: 2 / 3 },
+      { name: "highest", position: 1 }
+    ]
+  },
+  {
+    title: "Borders",
+    isText: false,
+    steps: [
+      { name: "faint", position: -1 },
+      { name: "subtle", position: -0.5 },
+      { name: "default", position: 0 },
+      { name: "medium", position: 0.5 },
+      { name: "strong", position: 1 }
+    ]
+  },
+  {
+    title: "Text",
+    isText: true,
+    steps: [
+      { name: "primary", position: 0 },
+      { name: "secondary", position: 0 },
+      { name: "tertiary", position: 0 },
+      { name: "muted", position: 0 },
+      { name: "disabled", position: 0 }
+    ]
+  }
+];
+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 DEFAULT_GRAY_LIGHTNESS = () => [makeAnchor(0, 92, 5), makeAnchor(100, 3, 5)];
+var DEFAULT_GRAY_SATURATION = () => [makeAnchor(0, 20, 30), makeAnchor(100, 20, 30)];
+var DEFAULT_TINT_CHROMA = 0.04;
+var defaultScaleCurves = {
+  Surfaces: {
+    lightness: () => [makeAnchor(0, 15, 5), makeAnchor(100, 47, 5)],
+    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+  },
+  Borders: {
+    lightness: () => [makeAnchor(0, 25, 5), makeAnchor(100, 80, 5)],
+    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
+  },
+  Text: {
+    lightness: () => [makeAnchor(0, 120, 30), makeAnchor(100, 55, 30)],
+    saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)]
+  }
+};
+function paletteStepKey(label) {
+  return `Palette-${label}`;
+}
+function grayStepKey(label) {
+  return `gray-${label}`;
+}
+function stepKey(scaleTitle, stepName) {
+  return `${scaleTitle}-${stepName}`;
+}
+function stepIndexToX(index, total) {
+  return total > 1 ? index / (total - 1) * 100 : 50;
+}
+function computePaletteColor(index, base, lightnessCurve, saturationCurve, curveOffset) {
+  const { c: baseC, h } = hexToOklch(base);
+  const xPos = stepIndexToX(index, PALETTE_STEPS.length);
+  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 clamped = gamutClamp(targetL, targetC, h);
+  return oklchToHex(clamped.l, clamped.c, clamped.h);
+}
+function computeGrayColor(index, hue, chroma, grayLightnessCurve, graySaturationCurve, curveOffset) {
+  const xPos = stepIndexToX(index, GRAY_STEPS.length);
+  const lOff = curveOffset["gray-lightness"] ?? 0;
+  const sOff = curveOffset["gray-saturation"] ?? 0;
+  const targetL = Math.max(0, Math.min(100, sampleCurve(grayLightnessCurve, xPos) + lOff)) / 100;
+  const satMul = Math.max(0, Math.min(2, (sampleCurve(graySaturationCurve, xPos) + sOff) / 100));
+  const targetC = chroma * satMul;
+  const clamped = gamutClamp(targetL, targetC, hue);
+  return oklchToHex(clamped.l, clamped.c, clamped.h);
+}
+function computeDerivedColor(step, base, scaleTitle, scaleCurves, curveOffset) {
+  const scale = SCALES.find((s) => s.title === scaleTitle);
+  const idx = scale.steps.indexOf(step);
+  const xPos = stepIndexToX(idx, scale.steps.length);
+  const defs = defaultScaleCurves[scaleTitle];
+  const lCurve = scaleCurves[scaleTitle]?.lightness ?? defs.lightness();
+  const sCurve = scaleCurves[scaleTitle]?.saturation ?? defs.saturation();
+  const lOff = curveOffset[`${scaleTitle}-lightness`] ?? 0;
+  const sOff = curveOffset[`${scaleTitle}-saturation`] ?? 0;
+  const { l: baseL, c: baseC, h: baseH } = hexToOklch(base);
+  let targetL;
+  if (scale.isText) {
+    const lMul = Math.max(0, Math.min(2, (sampleCurve(lCurve, xPos) + lOff) / 100));
+    targetL = Math.max(0, Math.min(1, baseL * lMul));
+  } else {
+    targetL = Math.max(0, Math.min(100, sampleCurve(lCurve, xPos) + lOff)) / 100;
+  }
+  const satMul = Math.max(0, Math.min(2, (sampleCurve(sCurve, xPos) + sOff) / 100));
+  const targetC = baseC * satMul;
+  const clamped = gamutClamp(targetL, targetC, baseH);
+  return oklchToHex(clamped.l, clamped.c, clamped.h);
+}
+function scaleToCssVar(scaleTitle, stepName, cssNamespace) {
+  if (cssNamespace === null) return null;
+  if (scaleTitle === "Surfaces") {
+    const suffix = stepName === "default" ? "" : `-${stepName}`;
+    return cssNamespace === "neutral" ? `--surface-neutral${suffix}` : `--surface-${cssNamespace}${suffix}`;
+  }
+  if (scaleTitle === "Borders") {
+    const suffix = stepName === "default" ? "" : `-${stepName}`;
+    return cssNamespace === "neutral" ? `--border-neutral${suffix}` : `--border-${cssNamespace}${suffix}`;
+  }
+  if (scaleTitle === "Text") {
+    if (cssNamespace === "neutral") return `--text-${stepName}`;
+    return stepName === "primary" ? `--text-${cssNamespace}` : `--text-${cssNamespace}-${stepName}`;
+  }
+  return null;
+}
+function derivePaletteVars(spec, config) {
+  const out = {};
+  if (!config) return out;
+  const baseColor = config.baseColor ?? spec.initialColor;
+  const overrides = config.overrides ?? {};
+  const curveOffset = config.curveOffset ?? {};
+  const scaleCurves = config.scaleCurves ?? {};
+  let baseForScales;
+  if (spec.mode === "gray") {
+    const grayLightnessCurve = config.grayLightnessCurve ?? DEFAULT_GRAY_LIGHTNESS();
+    const graySaturationCurve = config.graySaturationCurve ?? DEFAULT_GRAY_SATURATION();
+    const tintHue = config.tintHue ?? 240;
+    const tintChroma = config.tintChroma ?? DEFAULT_TINT_CHROMA;
+    let gray500 = "#808080";
+    GRAY_STEPS.forEach((step, index) => {
+      const k = grayStepKey(step.label);
+      const hex = computeGrayColor(index, tintHue, tintChroma, grayLightnessCurve, graySaturationCurve, curveOffset);
+      const effective = k in overrides ? overrides[k] : hex;
+      out[`--color-${spec.cssNamespace}-${step.label}`] = effective;
+      if (step.label === "500") gray500 = hex;
+    });
+    baseForScales = gray500;
+  } else {
+    const lightnessCurve = config.lightnessCurve ?? DEFAULT_PALETTE_LIGHTNESS();
+    const saturationCurve = config.saturationCurve ?? DEFAULT_PALETTE_SATURATION();
+    PALETTE_STEPS.forEach((ps, index) => {
+      const k = paletteStepKey(ps.label);
+      const hex = computePaletteColor(index, baseColor, lightnessCurve, saturationCurve, curveOffset);
+      const effective = k in overrides ? overrides[k] : hex;
+      out[`--color-${spec.cssNamespace}-${ps.label}`] = effective;
+    });
+    baseForScales = baseColor;
+  }
+  for (const scale of SCALES) {
+    for (const step of scale.steps) {
+      const k = stepKey(scale.title, step.name);
+      const hex = k in overrides ? overrides[k] : computeDerivedColor(step, baseForScales, scale.title, scaleCurves, curveOffset);
+      const varName = scaleToCssVar(scale.title, step.name, spec.cssNamespace);
+      if (varName) out[varName] = hex;
+    }
+  }
+  if (spec.emptySelector) {
+    const emptyMode = config.emptyMode ?? "solid";
+    const emptyStep = config.emptyStep ?? "850";
+    const gradientStyle = config.gradientStyle ?? "linear";
+    const gradientAngle = config.gradientAngle ?? 180;
+    const gradientReverse = config.gradientReverse ?? false;
+    const gradientSize = config.gradientSize ?? "page";
+    const gradientStops = config.gradientStops ?? [
+      { position: 0, paletteLabel: "800" },
+      { position: 100, paletteLabel: "950" }
+    ];
+    if (emptyMode === "solid") {
+      const stepHex = out[`--color-${spec.cssNamespace}-${emptyStep}`];
+      if (stepHex) out["--page-bg"] = stepHex;
+      out["--page-bg-attachment"] = "scroll";
+    } else {
+      const sortedStops = [...gradientStops].sort(
+        (a, b) => gradientReverse ? b.position - a.position : a.position - b.position
+      );
+      const stopsCss = sortedStops.map((s) => `${out[`--color-${spec.cssNamespace}-${s.paletteLabel}`] ?? "#000000"} ${s.position}%`).join(", ");
+      let gradient;
+      switch (gradientStyle) {
+        case "radial":
+          gradient = `radial-gradient(circle, ${stopsCss})`;
+          break;
+        case "conic":
+          gradient = `conic-gradient(from ${gradientAngle}deg, ${stopsCss})`;
+          break;
+        default:
+          gradient = `linear-gradient(${gradientAngle}deg, ${stopsCss})`;
+      }
+      out["--page-bg"] = gradient;
+      out["--page-bg-attachment"] = gradientSize === "window" ? "fixed" : "scroll";
+    }
+  }
+  return out;
+}
+function palettesToVars(palettes) {
+  const out = {};
+  for (const spec of PALETTE_SPECS) {
+    Object.assign(out, derivePaletteVars(spec, palettes[spec.label]));
+  }
+  return out;
+}
+var HEX_RE = /^#[0-9a-f]{6}$/i;
+function reconcilePalettesFromCssVars(palettes, cssVars) {
+  const next = structuredClone(palettes);
+  const consumed = /* @__PURE__ */ new Set();
+  const snapped = /* @__PURE__ */ new Set();
+  for (const spec of PALETTE_SPECS) {
+    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())) {
+        const hex = anchorHex.trim();
+        if (spec.mode === "gray") {
+          const { c, h } = hexToOklch(hex);
+          next[spec.label] = { ...current, tintHue: h, tintChroma: c, _imported: false };
+        } else {
+          next[spec.label] = { ...current, baseColor: hex, _imported: false };
+        }
+        snapped.add(spec.label);
+      } else {
+        next[spec.label] = { ...current, _imported: false };
+      }
+    }
+    for (const k of Object.keys(derivePaletteVars(spec, next[spec.label]))) {
+      consumed.add(k);
+    }
+  }
+  return { palettes: next, consumed, snapped };
+}
+
 // vite-plugin/files/versionedFileResourceServer.ts
 import fs from "fs";
 import path from "path";
@@ -106,6 +510,16 @@ async function dispatch(req, res, routes) {
   return false;
 }
 
+// vite-plugin/files/nameAllocator.ts
+function nextAvailableName(exists, baseName, maxAttempts = 1e3) {
+  if (!exists(baseName)) return baseName;
+  for (let i = 2; i < maxAttempts; i++) {
+    const candidate = `${baseName}-${i}`;
+    if (!exists(candidate)) return candidate;
+  }
+  throw new Error(`Could not allocate a non-colliding name for "${baseName}"`);
+}
+
 // vite-plugin/themeFileApi.ts
 import { fileURLToPath } from "url";
 var PKG_VERSION = (() => {
@@ -128,6 +542,7 @@ var PKG_VERSION = (() => {
 function themeFileApi(opts) {
   const THEMES_DIR = path2.resolve(opts.themesDir);
   const CSS_PATH = path2.resolve(opts.tokensCssPath);
+  const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? path2.resolve(opts.tokensGeneratedCssPath) : path2.join(path2.dirname(CSS_PATH), "tokens.generated.css");
   const FONTS_CSS_PATH = opts.fontsCssPath ? path2.resolve(opts.fontsCssPath) : path2.join(path2.dirname(CSS_PATH), "fonts.css");
   const API_BASE = opts.apiBase ?? "/api";
   const COMPONENT_CONFIGS_DIR = opts.componentConfigsDir ? path2.resolve(opts.componentConfigsDir) : path2.resolve("component-configs");
@@ -174,6 +589,17 @@ function themeFileApi(opts) {
     res.setHeader("Content-Type", "application/json");
     res.end(JSON.stringify(data));
   }
+  function normalizeTheme(theme) {
+    if (!theme || typeof theme !== "object") return theme;
+    const palettes = theme.editorConfigs ?? {};
+    const cssVars = theme.cssVariables ?? {};
+    const { palettes: nextPalettes, consumed } = reconcilePalettesFromCssVars(palettes, cssVars);
+    const nextCssVars = {};
+    for (const [k, v] of Object.entries(cssVars)) {
+      if (!consumed.has(k)) nextCssVars[k] = v;
+    }
+    return { ...theme, editorConfigs: nextPalettes, cssVariables: nextCssVars };
+  }
   const SYSTEM_CASCADES_SSR = {
     "system-ui-sans": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
     "system-ui-serif": 'Georgia, "Times New Roman", serif',
@@ -205,42 +631,78 @@ function themeFileApi(opts) {
     }
     return out;
   }
-  function syncTokensToCss(fileName) {
-    const themePath = path2.join(THEMES_DIR, `${fileName}.json`);
-    if (!fs2.existsSync(themePath)) return;
-    const themeData = JSON.parse(fs2.readFileSync(themePath, "utf-8"));
-    const cssVars = { ...themeData.cssVariables || {} };
-    const resolvedFontVars = resolveFontStacks(themeData);
-    for (const [name, value] of Object.entries(resolvedFontVars)) {
-      cssVars[name] = value;
-    }
-    if (Object.keys(cssVars).length === 0) return;
-    const cssContent = fs2.readFileSync(CSS_PATH, "utf-8");
-    const remaining = new Set(Object.keys(cssVars));
-    const updatedContent = cssContent.replace(
-      /^(\s*)(--[\w-]+):\s*(.+);/gm,
-      (_match, indent, varName, oldValue) => {
-        if (cssVars[varName] !== void 0) {
-          remaining.delete(varName);
-          return `${indent}${varName}: ${cssVars[varName]};`;
+  function regenerateTokensCss() {
+    const lines = [];
+    lines.push("/* Generated by themeFileApi from the production theme and component configs. Do not edit. */");
+    lines.push("/* tokens.css holds developer-authored defaults; this file holds editor overrides. */");
+    lines.push("");
+    const productionThemeName = themesResource.getProductionName();
+    const themePath = path2.join(THEMES_DIR, `${productionThemeName}.json`);
+    let themeVarCount = 0;
+    if (fs2.existsSync(themePath)) {
+      const themeData = JSON.parse(fs2.readFileSync(themePath, "utf-8"));
+      const cssVars = { ...themeData.cssVariables || {} };
+      Object.assign(cssVars, palettesToVars(themeData.editorConfigs ?? {}));
+      const resolvedFontVars = resolveFontStacks(themeData);
+      for (const [name, value] of Object.entries(resolvedFontVars)) {
+        cssVars[name] = value;
+      }
+      themeVarCount = Object.keys(cssVars).length;
+      if (themeVarCount > 0) {
+        lines.push(`/* Production theme: ${productionThemeName} */`);
+        lines.push(":root:root {");
+        for (const [name, value] of Object.entries(cssVars)) {
+          lines.push(`  ${name}: ${value};`);
         }
-        return `${indent}${varName}: ${oldValue.trim()};`;
+        lines.push("}");
+        lines.push("");
       }
-    );
-    let finalContent = updatedContent;
-    if (remaining.size > 0) {
-      const newVars = [...remaining].map((name) => `  ${name}: ${cssVars[name]};`).join("\n");
-      finalContent = finalContent.replace(
-        /\n\}(\s*)$/,
-        `
-
-  /* Token additions */
-${newVars}
-}$1`
-      );
     }
-    fs2.writeFileSync(CSS_PATH, finalContent);
-    console.log(`[syncTokensToCss] Wrote ${Object.keys(cssVars).length} variables from "${fileName}" into tokens.css`);
+    let componentOverrideCount = 0;
+    if (fs2.existsSync(COMPONENT_CONFIGS_DIR)) {
+      const blocks = [];
+      for (const comp of listComponentNames()) {
+        const prod = componentResource(comp).getProductionName();
+        if (prod === "default") continue;
+        const prodCfg = readComponentConfig(comp, prod);
+        const defaultCfg = readComponentConfig(comp, "default");
+        if (!prodCfg || !defaultCfg) continue;
+        const overrides = [];
+        const defaultAliases = defaultCfg.aliases ?? {};
+        for (const [varName, semanticValue] of Object.entries(prodCfg.aliases ?? {})) {
+          if (!aliasValuesEqual(defaultAliases[varName], semanticValue)) {
+            overrides.push([varName, semanticValue]);
+          }
+        }
+        if (overrides.length === 0) continue;
+        const block = [`  /* ${comp} (${prod}) */`];
+        for (const [varName, semanticValue] of overrides) {
+          block.push(`  ${varName}: ${aliasValueToCss(semanticValue)};`);
+        }
+        blocks.push(block);
+        componentOverrideCount += overrides.length;
+      }
+      if (blocks.length > 0) {
+        lines.push("/* Component aliases (production configs differing from defaults) */");
+        lines.push(":root:root {");
+        for (let i = 0; i < blocks.length; i++) {
+          if (i > 0) lines.push("");
+          lines.push(...blocks[i]);
+        }
+        lines.push("}");
+        lines.push("");
+      }
+    }
+    if (!fs2.existsSync(path2.dirname(GENERATED_CSS_PATH))) {
+      fs2.mkdirSync(path2.dirname(GENERATED_CSS_PATH), { recursive: true });
+    }
+    fs2.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
+    console.log(
+      `[regenerateTokensCss] Wrote ${path2.basename(GENERATED_CSS_PATH)} (${themeVarCount} theme vars, ${componentOverrideCount} component overrides)`
+    );
+  }
+  function syncTokensToCss(_fileName) {
+    regenerateTokensCss();
   }
   function syncFontsToCss(fileName) {
     const themePath = path2.join(THEMES_DIR, `${fileName}.json`);
@@ -252,15 +714,20 @@ ${newVars}
     lines.push("/* Generated from the production theme by syncFontsToCss. Do not edit. */");
     lines.push("/* Both fonts.css and fonts/ are in dist/, so relative paths work at runtime. */");
     lines.push("");
-    for (const source of sources) {
+    const urlSources = sources.filter((s) => s.kind !== "font-face" && s.url);
+    const faceSources = sources.filter((s) => s.kind === "font-face" && s.cssText);
+    for (const source of urlSources) {
       const familyNames = source.families.map((f) => f.name).join(", ");
       const label = source.label ? `${source.label} \u2014 ${familyNames}` : familyNames;
       lines.push(`/* ${label} */`);
-      if (source.kind === "font-face") {
-        if (source.cssText) lines.push(source.cssText);
-      } else if (source.url) {
-        lines.push(`@import url('${source.url}');`);
-      }
+      lines.push(`@import url('${source.url}');`);
+      lines.push("");
+    }
+    for (const source of faceSources) {
+      const familyNames = source.families.map((f) => f.name).join(", ");
+      const label = source.label ? `${source.label} \u2014 ${familyNames}` : familyNames;
+      lines.push(`/* ${label} */`);
+      lines.push(source.cssText);
       lines.push("");
     }
     const content = lines.join("\n");
@@ -400,6 +867,33 @@ ${newVars}
     fs2.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
     return true;
   }
+  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);
+  }
+  function aliasValuesEqual(a, b) {
+    if (a === void 0 || b === void 0) return a === b;
+    if (typeof a === "string" && typeof b === "string") return a === b;
+    if (typeof a !== typeof b) return false;
+    return JSON.stringify(a) === JSON.stringify(b);
+  }
   function readComponentConfig(comp, name) {
     const filePath = componentResource(comp).filePath(name);
     if (!fs2.existsSync(filePath)) return null;
@@ -409,54 +903,8 @@ ${newVars}
       return null;
     }
   }
-  const COMPONENT_OVERRIDES_START = "/* component-aliases:start */";
-  const COMPONENT_OVERRIDES_END = "/* component-aliases:end */";
   function syncComponentsToCss() {
-    if (!fs2.existsSync(CSS_PATH)) return;
-    if (!fs2.existsSync(COMPONENT_CONFIGS_DIR)) return;
-    const lines = [];
-    const components = listComponentNames();
-    for (const comp of components) {
-      const prod = componentResource(comp).getProductionName();
-      if (prod === "default") continue;
-      const prodCfg = readComponentConfig(comp, prod);
-      const defaultCfg = readComponentConfig(comp, "default");
-      if (!prodCfg || !defaultCfg) continue;
-      const overrides = [];
-      for (const [varName, semanticName] of Object.entries(prodCfg.aliases ?? {})) {
-        if ((defaultCfg.aliases ?? {})[varName] !== semanticName) {
-          overrides.push([varName, semanticName]);
-        }
-      }
-      if (overrides.length === 0) continue;
-      lines.push(`  /* ${comp} (${prod}) */`);
-      for (const [varName, semanticName] of overrides) {
-        lines.push(`  ${varName}: var(${semanticName});`);
-      }
-    }
-    const block = lines.length > 0 ? `
-
-${COMPONENT_OVERRIDES_START}
-:root:root {
-${lines.join("\n")}
-}
-${COMPONENT_OVERRIDES_END}
-` : "";
-    let cssContent = fs2.readFileSync(CSS_PATH, "utf-8");
-    const startIdx = cssContent.indexOf(COMPONENT_OVERRIDES_START);
-    const endIdx = cssContent.indexOf(COMPONENT_OVERRIDES_END);
-    if (startIdx !== -1 && endIdx !== -1 && endIdx > startIdx) {
-      let stripStart = startIdx;
-      while (stripStart > 0 && cssContent[stripStart - 1] === "\n") stripStart--;
-      const after = cssContent.slice(endIdx + COMPONENT_OVERRIDES_END.length);
-      cssContent = cssContent.slice(0, stripStart) + (block || "\n") + after.replace(/^\n+/, "");
-    } else if (block) {
-      cssContent = cssContent.replace(/\n*$/, "") + block;
-    }
-    fs2.writeFileSync(CSS_PATH, cssContent);
-    console.log(
-      `[syncComponentsToCss] Wrote ${lines.filter((l) => !l.trim().startsWith("/*")).length} alias override(s) to tokens.css`
-    );
+    regenerateTokensCss();
   }
   const escapedBase = API_BASE.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   const THEMES_ROUTE = `${API_BASE}/themes`;
@@ -471,6 +919,8 @@ ${COMPONENT_OVERRIDES_END}
   const COMP_PRODUCTION_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)/production$`);
   const COMP_BY_NAME_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)/([a-z0-9\\-_]+)$`);
   const MANIFEST_APPLY_REGEX = new RegExp(`^${escapedBase}/manifests/([a-z0-9\\-_]+)/apply$`);
+  const MANIFEST_EXPORT_REGEX = new RegExp(`^${escapedBase}/manifests/([a-z0-9\\-_]+)/export$`);
+  const MANIFEST_IMPORT_ROUTE = `${API_BASE}/manifests/import`;
   const MANIFEST_BY_NAME_REGEX = new RegExp(`^${escapedBase}/manifests/([a-z0-9\\-_]+)$`);
   async function handleListThemes(_ctx) {
     const activeFile = themesResource.getActiveName();
@@ -494,7 +944,7 @@ ${COMPONENT_OVERRIDES_END}
       jsonResponse(res, 404, { error: "Active theme not found" });
       return;
     }
-    const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+    const data = normalizeTheme(JSON.parse(fs2.readFileSync(filePath, "utf-8")));
     data._fileName = activeFile;
     jsonResponse(res, 200, data);
   }
@@ -515,7 +965,7 @@ ${COMPONENT_OVERRIDES_END}
       jsonResponse(res, 200, { fileName: prodFile, name: prodFile, cssVariables: {} });
       return;
     }
-    const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+    const data = normalizeTheme(JSON.parse(fs2.readFileSync(filePath, "utf-8")));
     jsonResponse(res, 200, {
       fileName: prodFile,
       name: data.name || prodFile,
@@ -558,7 +1008,7 @@ ${COMPONENT_OVERRIDES_END}
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+      const data = normalizeTheme(JSON.parse(fs2.readFileSync(filePath, "utf-8")));
       data._fileName = fileName;
       jsonResponse(res, 200, data);
       return;
@@ -878,11 +1328,15 @@ ${COMPONENT_OVERRIDES_END}
       apply.push([comp, sanitized]);
     }
     themesResource.setActiveName(themeName);
-    const themeData = JSON.parse(fs2.readFileSync(themePath, "utf-8"));
+    themesResource.setProductionName(themeName);
+    syncTokensToCss(themeName);
+    syncFontsToCss(themeName);
+    const themeData = normalizeTheme(JSON.parse(fs2.readFileSync(themePath, "utf-8")));
     themeData._fileName = themeName;
     for (const [comp, configFile] of apply) {
       const r = componentResource(comp);
       r.setActiveName(configFile);
+      r.setProductionName(configFile);
       const cfg = readComponentConfig(comp, configFile);
       if (cfg) resolvedConfigs[comp] = { ...cfg, _fileName: configFile };
     }
@@ -892,6 +1346,7 @@ ${COMPONENT_OVERRIDES_END}
       const cfg = readComponentConfig(comp, activeName);
       if (cfg) resolvedConfigs[comp] = { ...cfg, _fileName: activeName };
     }
+    syncComponentsToCss();
     manifestsResource.setActiveName(fileName);
     jsonResponse(res, 200, {
       ok: true,
@@ -900,6 +1355,157 @@ ${COMPONENT_OVERRIDES_END}
       componentConfigs: resolvedConfigs
     });
   }
+  async function handleExportManifest({ params, res }) {
+    const [fileName] = params;
+    const manifestPath = manifestsResource.filePath(fileName);
+    if (!fs2.existsSync(manifestPath)) {
+      jsonResponse(res, 404, { error: "Manifest not found" });
+      return;
+    }
+    const manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
+    const themeName = sanitizeFileName(manifest.theme || "default");
+    const themePath = themesResource.filePath(themeName);
+    if (!fs2.existsSync(themePath)) {
+      jsonResponse(res, 422, { error: `Manifest references missing theme: ${themeName}` });
+      return;
+    }
+    const theme = JSON.parse(fs2.readFileSync(themePath, "utf-8"));
+    const knownComponents = new Set(listComponentNames());
+    const componentConfigs = {};
+    for (const [comp, configFile] of Object.entries(manifest.componentConfigs ?? {})) {
+      if (!knownComponents.has(comp)) continue;
+      const sanitized = sanitizeFileName(String(configFile) || "default");
+      if (sanitized === "default") continue;
+      const cfgPath = componentResource(comp).filePath(sanitized);
+      if (!fs2.existsSync(cfgPath)) {
+        jsonResponse(res, 422, {
+          error: `Manifest references missing config: ${comp}/${sanitized}`
+        });
+        return;
+      }
+      const cfg = JSON.parse(fs2.readFileSync(cfgPath, "utf-8"));
+      componentConfigs[`${comp}/${sanitized}`] = cfg;
+    }
+    const bundle = {
+      kind: "manifest-bundle",
+      schemaVersion: 1,
+      liveTokensVersion: PKG_VERSION,
+      exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      manifest,
+      theme,
+      componentConfigs
+    };
+    res.statusCode = 200;
+    res.setHeader("Content-Type", "application/json");
+    res.setHeader(
+      "Content-Disposition",
+      `attachment; filename="${fileName}.bundle.json"`
+    );
+    res.end(JSON.stringify(bundle, null, 2));
+  }
+  function nextAvailableName2(resourceFilePath, baseName) {
+    return nextAvailableName(
+      (n) => fs2.existsSync(resourceFilePath(n)),
+      sanitizeFileName(baseName)
+    );
+  }
+  async function handleImportManifest({ req, res }) {
+    let bundle;
+    try {
+      bundle = JSON.parse(await readBody(req));
+    } catch {
+      jsonResponse(res, 400, { error: "Body is not valid JSON" });
+      return;
+    }
+    if (!bundle || bundle.kind !== "manifest-bundle") {
+      jsonResponse(res, 400, {
+        error: "Not a manifest bundle (kind discriminator missing or wrong)"
+      });
+      return;
+    }
+    if (bundle.schemaVersion !== 1) {
+      jsonResponse(res, 400, {
+        error: `Unsupported bundle schemaVersion: ${bundle.schemaVersion}`
+      });
+      return;
+    }
+    if (!bundle.manifest || !bundle.theme || !bundle.componentConfigs) {
+      jsonResponse(res, 400, { error: "Bundle missing manifest / theme / componentConfigs" });
+      return;
+    }
+    const renames = {};
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    const originalThemeName = sanitizeFileName(bundle.manifest.theme || "default");
+    const finalThemeName = nextAvailableName2(
+      (n) => themesResource.filePath(n),
+      originalThemeName
+    );
+    if (finalThemeName !== originalThemeName) {
+      renames[`theme:${originalThemeName}`] = finalThemeName;
+    }
+    const themeBody = { ...bundle.theme };
+    themeBody.updatedAt = now;
+    if (!themeBody.createdAt) themeBody.createdAt = now;
+    themesResource.ensureDir();
+    fs2.writeFileSync(themesResource.filePath(finalThemeName), JSON.stringify(themeBody, null, 2));
+    const knownComponents = new Set(listComponentNames());
+    const componentRenames = {};
+    for (const [key, cfgValue] of Object.entries(bundle.componentConfigs)) {
+      const [comp, originalName] = key.split("/");
+      if (!comp || !originalName) continue;
+      if (!knownComponents.has(comp)) continue;
+      const r = componentResource(comp);
+      const finalName = nextAvailableName2(
+        (n) => r.filePath(n),
+        originalName
+      );
+      if (finalName !== originalName) {
+        renames[`componentConfig:${comp}/${originalName}`] = finalName;
+      }
+      componentRenames[`${comp}/${originalName}`] = finalName;
+      const cfgBody = { ...cfgValue };
+      cfgBody.component = comp;
+      cfgBody.name = finalName;
+      cfgBody.updatedAt = now;
+      if (!cfgBody.createdAt) cfgBody.createdAt = now;
+      r.ensureDir();
+      fs2.writeFileSync(r.filePath(finalName), JSON.stringify(cfgBody, null, 2));
+    }
+    const rewrittenManifest = {
+      ...bundle.manifest,
+      theme: finalThemeName,
+      componentConfigs: {}
+    };
+    for (const [comp, configName] of Object.entries(bundle.manifest.componentConfigs ?? {})) {
+      const original = String(configName);
+      if (original === "default") {
+        rewrittenManifest.componentConfigs[comp] = "default";
+        continue;
+      }
+      const finalName = componentRenames[`${comp}/${original}`] ?? original;
+      rewrittenManifest.componentConfigs[comp] = finalName;
+    }
+    rewrittenManifest.updatedAt = now;
+    if (!rewrittenManifest.createdAt) rewrittenManifest.createdAt = now;
+    const originalManifestName = sanitizeFileName(bundle.manifest.name || "imported");
+    const finalManifestName = nextAvailableName2(
+      (n) => manifestsResource.filePath(n),
+      originalManifestName
+    );
+    if (finalManifestName !== originalManifestName) {
+      renames[`manifest:${originalManifestName}`] = finalManifestName;
+    }
+    manifestsResource.ensureDir();
+    fs2.writeFileSync(
+      manifestsResource.filePath(finalManifestName),
+      JSON.stringify(rewrittenManifest, null, 2)
+    );
+    jsonResponse(res, 200, {
+      ok: true,
+      manifest: finalManifestName,
+      renames
+    });
+  }
   function methodNotAllowed({ res }) {
     jsonResponse(res, 405, { error: "Method not allowed" });
   }
@@ -937,11 +1543,21 @@ ${COMPONENT_OVERRIDES_END}
     { method: "GET", pattern: MANIFESTS_ROUTE, handler: handleListManifests },
     { method: "GET", pattern: MANIFESTS_ACTIVE_ROUTE, handler: handleGetActiveManifest },
     { method: "PUT", pattern: MANIFESTS_ACTIVE_ROUTE, handler: handleSetActiveManifest },
+    // Manifests — exact import route runs before :name regexes
+    { method: "POST", pattern: MANIFEST_IMPORT_ROUTE, handler: handleImportManifest },
+    { method: "PUT", pattern: MANIFEST_IMPORT_ROUTE, handler: methodNotAllowed },
+    { method: "GET", pattern: MANIFEST_IMPORT_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: MANIFEST_IMPORT_ROUTE, handler: methodNotAllowed },
     // Manifests — :name/apply (more specific than :name)
     { method: "PUT", pattern: MANIFEST_APPLY_REGEX, handler: handleApplyManifest },
     { method: "POST", pattern: MANIFEST_APPLY_REGEX, handler: methodNotAllowed },
     { method: "GET", pattern: MANIFEST_APPLY_REGEX, handler: methodNotAllowed },
     { method: "DELETE", pattern: MANIFEST_APPLY_REGEX, handler: methodNotAllowed },
+    // Manifests — :name/export (more specific than :name)
+    { method: "GET", pattern: MANIFEST_EXPORT_REGEX, handler: handleExportManifest },
+    { method: "PUT", pattern: MANIFEST_EXPORT_REGEX, handler: methodNotAllowed },
+    { method: "POST", pattern: MANIFEST_EXPORT_REGEX, handler: methodNotAllowed },
+    { method: "DELETE", pattern: MANIFEST_EXPORT_REGEX, handler: methodNotAllowed },
     // Manifests — :name CRUD (broadest manifest route, runs last)
     { method: "GET", pattern: MANIFEST_BY_NAME_REGEX, handler: handleManifestByName },
     { method: "PUT", pattern: MANIFEST_BY_NAME_REGEX, handler: handleManifestByName },
@@ -961,6 +1577,7 @@ ${COMPONENT_OVERRIDES_END}
       ensureThemesDir();
       ensureComponentConfigsDir();
       ensureManifestsDir();
+      regenerateTokensCss();
       server.middlewares.use(async (req, res, next) => {
         const handled = await dispatch(req, res, routes);
         if (!handled) next();