@motion-proto/live-tokens 0.47.1 → 0.48.0

package/dist-plugin/index.js

@@ -1,15 +1,31 @@
+import {
+  hexToOklch,
+  palettesToVars,
+  reconcilePalettesFromCssVars,
+  sanitizeFileName
+} from "./chunk-76TFDTJO.js";
+import {
+  THEME_SCHEMA_VERSION,
+  detectLegacyLayout,
+  isColorsAndTypeShaped,
+  nextAvailableName,
+  normalizeTheme,
+  versionedFileResourceServer
+} from "./chunk-6OZFXIQI.js";
 import {
   TOKENS_CSS_MIGRATIONS,
   extractGlobalRootBody,
-  resolveDataDirs,
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-H4TRUINI.js";
+} from "./chunk-44RSTAII.js";
+import {
+  resolveDataDirs
+} from "./chunk-D3ZVKOR4.js";
 
 // vite-plugin/themeFileApi.ts
-import fs2 from "fs";
-import path2 from "path";
+import fs from "fs";
+import path from "path";
 
 // src/editor/core/themes/parsers/colorOpacity.ts
 var COLOR_OPACITY_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+)%,\s*transparent\)$/i;
@@ -19,509 +35,6 @@ function parseColorOpacity(value) {
   return { name: m[1], opacity: parseInt(m[2], 10) };
 }
 
-// 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
-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 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 };
-  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 };
-}
-var HANDLE_SPAN = 1 / 3;
-function tangentSlope(prev, x, y, next) {
-  const hPrev = prev ? x - prev.x : 0;
-  const hNext = next ? next.x - x : 0;
-  const dPrev = hPrev > 0 ? (y - prev.y) / hPrev : null;
-  const dNext = hNext > 0 ? (next.y - y) / hNext : null;
-  if (dPrev === null) return dNext ?? 0;
-  if (dNext === null) return dPrev;
-  if (dPrev * dNext <= 0) return 0;
-  const wPrev = 2 * hNext + hPrev;
-  const wNext = hNext + 2 * hPrev;
-  return (wPrev + wNext) / (wPrev / dPrev + wNext / dNext);
-}
-function tangentAnchor(x, y, prev, next) {
-  const m = tangentSlope(prev, x, y, next);
-  const inDx = prev ? -(x - prev.x) * HANDLE_SPAN : 0;
-  const outDx = next ? (next.x - x) * HANDLE_SPAN : 0;
-  return { x, y, inDx, inDy: m * inDx, outDx, outDy: m * outDx };
-}
-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: "Brand", cssNamespace: "brand", initialColor: { l: 0.5573, c: 0.1841, h: 25.49 } },
-  { label: "Accent", cssNamespace: "accent", initialColor: { l: 0.7674, c: 0.164, h: 70.44 } },
-  { label: "Special", cssNamespace: "special", initialColor: { l: 0.6056, c: 0.2189, h: 292.72 } },
-  { label: "Canvas", cssNamespace: "canvas", emptySelector: true, initialColor: { l: 0.2284, c: 0.0384, h: 282.93 } },
-  { label: "Neutral", cssNamespace: "neutral", neutral: true, initialColor: { l: 0.5679, c: 0.0134, h: 240.07 } },
-  { label: "Alternate", cssNamespace: "alternate", neutral: true, displayLabel: "Alternate (neutral)", initialColor: { l: 0.5873, c: 87e-4, h: 48.57 } },
-  { label: "Info", cssNamespace: "info", initialColor: { l: 0.5871, c: 0.1855, h: 259.56 } },
-  { label: "Success", cssNamespace: "success", initialColor: { l: 0.7198, c: 0.1918, h: 149.52 } },
-  { label: "Warning", cssNamespace: "warning", initialColor: { l: 0.6704, c: 0.1716, h: 48.75 } },
-  { label: "Danger", cssNamespace: "danger", initialColor: { l: 0.6103, c: 0.2165, h: 18.1 } }
-];
-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 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 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)];
-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)]
-      },
-      Borders: {
-        lightness: () => [makeAnchor(0, 92, 5), makeAnchor(100, 45, 5)],
-        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)]
-      },
-      Text: {
-        lightness: () => [makeAnchor(0, 30, 30), makeAnchor(100, 120, 30)],
-        saturation: () => [makeAnchor(0, 100, 30), makeAnchor(100, 15, 30)]
-      }
-    };
-  }
-  return {
-    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)]
-    }
-  };
-}
-var defaultScaleCurves = scaleCurveDefaults("dark");
-function paletteStepKey(label) {
-  return `Palette-${label}`;
-}
-function stepKey(scaleTitle, stepName) {
-  return `${scaleTitle}-${stepName}`;
-}
-function stepIndexToX(index) {
-  return index / (PALETTE_STEPS.length - 1) * 100;
-}
-function scaleStepToX(step, scale) {
-  const idx = scale.steps.indexOf(step);
-  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);
-}
-function computePaletteOklch(index, base, lightnessCurve, saturationCurve, curveOffset) {
-  const { c: baseC, h } = 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;
-  return gamutClamp(targetL, targetC, h);
-}
-function nearestPaletteStep(lightnessCurve, baseL) {
-  let best = 0;
-  let bestD = Infinity;
-  for (let i = 0; i < PALETTE_STEPS.length; i++) {
-    const d = Math.abs(sampleCurve(lightnessCurve, stepIndexToX(i)) - baseL * 100);
-    if (d < bestD) {
-      bestD = d;
-      best = i;
-    }
-  }
-  return best;
-}
-function setCurveAnchor(curve, x, y) {
-  const existing = curve.findIndex((a) => Math.abs(a.x - x) < 0.5);
-  if (existing >= 0) {
-    const displacedY = curve[existing].y;
-    return { curve: curve.map((a, i) => i === existing ? { ...a, x, y } : a), displacedY };
-  }
-  let insertAt = curve.findIndex((a) => a.x > x);
-  if (insertAt < 0) insertAt = curve.length;
-  const prev = curve[insertAt - 1] ?? null;
-  const next = curve[insertAt] ?? null;
-  const out = [...curve];
-  if (prev && next) {
-    const span = next.x - prev.x;
-    out[insertAt - 1] = scaleOutHandle(prev, (x - prev.x) / span);
-    out[insertAt] = scaleInHandle(next, (next.x - x) / span);
-  }
-  out.splice(insertAt, 0, fitBetween(tangentAnchor(x, y, prev, next), out[insertAt - 1] ?? null, out[insertAt] ?? null));
-  return { curve: out };
-}
-var scaleOutHandle = (a, k) => ({ ...a, outDx: a.outDx * k, outDy: a.outDy * k });
-var scaleInHandle = (a, k) => ({ ...a, inDx: a.inDx * k, inDy: a.inDy * k });
-function fitBetween(a, prev, next) {
-  let out = a;
-  if (prev) {
-    const room = a.x - (prev.x + prev.outDx);
-    if (room < -out.inDx) out = scaleInHandle(out, room <= 0 ? 0 : room / -out.inDx);
-  }
-  if (next) {
-    const room = next.x + next.inDx - a.x;
-    if (room < out.outDx) out = scaleOutHandle(out, room <= 0 ? 0 : room / out.outDx);
-  }
-  return out;
-}
-function liftCurveAnchor(curve, x, displacedY) {
-  const idx = curve.findIndex((a) => Math.abs(a.x - x) < 0.5);
-  if (idx < 0) return curve;
-  if (displacedY !== void 0) return curve.map((a, i) => i === idx ? { ...a, y: displacedY } : a);
-  if (idx === 0 || idx === curve.length - 1) return curve;
-  const out = curve.filter((_, i) => i !== idx);
-  const prev = curve[idx - 1];
-  const next = curve[idx + 1];
-  if (prev && next) {
-    const span = next.x - prev.x;
-    out[idx - 1] = scaleOutHandle(prev, span / (curve[idx].x - prev.x));
-    out[idx] = scaleInHandle(next, span / (next.x - curve[idx].x));
-  }
-  return out;
-}
-function syncBaseAnchor(cfg) {
-  if (cfg.anchorToBase === false) return;
-  const prev = cfg.anchorPlacement;
-  let lCurve = cfg.lightnessCurve;
-  let sCurve = cfg.saturationCurve;
-  if (prev) {
-    const prevX = stepIndexToX(prev.step);
-    lCurve = liftCurveAnchor(lCurve, prevX, prev.displacedL);
-    sCurve = liftCurveAnchor(sCurve, prevX, prev.displacedS);
-  }
-  const step = nearestPaletteStep(lCurve, cfg.baseColor.l);
-  const x = stepIndexToX(step);
-  const l = setCurveAnchor(lCurve, x, cfg.baseColor.l * 100);
-  const s = setCurveAnchor(sCurve, x, 100);
-  cfg.lightnessCurve = l.curve;
-  cfg.saturationCurve = s.curve;
-  cfg.anchorPlacement = { step, displacedL: l.displacedY, displacedS: s.displacedY };
-}
-function computeDerivedOklch(step, base, scaleTitle, scaleCurves, curveOffset) {
-  const scale = SCALES.find((s) => s.title === scaleTitle);
-  const xPos = scaleStepToX(step, scale);
-  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 } = 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;
-  return gamutClamp(targetL, targetC, baseH);
-}
-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 derivePaletteValues(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 ?? {};
-  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 value = k in overrides ? { kind: "color", ...overrides[k] } : { kind: "color", ...computePaletteOklch(index, baseColor, lightnessCurve, saturationCurve, curveOffset) };
-    out[`--color-${spec.cssNamespace}-${ps.label}`] = value;
-  });
-  for (const scale of SCALES) {
-    for (const step of scale.steps) {
-      const k = stepKey(scale.title, step.name);
-      const value = k in overrides ? { kind: "color", ...overrides[k] } : { kind: "color", ...computeDerivedOklch(step, baseColor, scale.title, scaleCurves, curveOffset) };
-      const varName = scaleToCssVar(scale.title, step.name, spec.cssNamespace);
-      if (varName) out[varName] = value;
-    }
-  }
-  const textPrimary = out["--text-primary"];
-  if (textPrimary?.kind === "color") {
-    const mirroredL = Math.max(BW_GUARD_MIN_L, Math.min(BW_GUARD_MAX_L, 1 - textPrimary.l));
-    out["--text-inverted"] = { kind: "color", ...gamutClamp(mirroredL, textPrimary.c, textPrimary.h) };
-  }
-  if (spec.emptySelector) {
-    const emptyMode = config.emptyMode ?? "solid";
-    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") {
-      out["--page-bg"] = { kind: "color", ...baseColor };
-      out["--page-bg-attachment"] = { kind: "raw", css: "scroll" };
-    } else {
-      const sortedStops = [...gradientStops].sort(
-        (a, b) => gradientReverse ? b.position - a.position : a.position - b.position
-      );
-      const stopsCss = sortedStops.map((s) => {
-        const stopValue = out[`--color-${spec.cssNamespace}-${s.paletteLabel}`];
-        const hex = stopValue ? serializeDerivedValue(stopValue) : "#000000";
-        return `${hex} ${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"] = { kind: "raw", css: gradient };
-      out["--page-bg-attachment"] = { kind: "raw", css: gradientSize === "window" ? "fixed" : "scroll" };
-    }
-  }
-  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) {
-    Object.assign(out, derivePaletteValues(spec, palettes[spec.label]));
-  }
-  return out;
-}
-function palettesToVars(palettes) {
-  const out = {};
-  for (const [k, v] of Object.entries(palettesToValues(palettes))) {
-    out[k] = serializeDerivedValue(v);
-  }
-  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())) {
-        next[spec.label] = { ...current, baseColor: hexToOklch(anchorHex.trim()), _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]))) {
-      consumed.add(k);
-    }
-  }
-  return { palettes: next, consumed, snapped };
-}
-
 // src/editor/core/themes/migrations/2026-07-21-palette-oklch-basis.ts
 var round = (v, dp) => {
   const f = 10 ** dp;
@@ -542,102 +55,6 @@ function migratePaletteColorsToOklch(editorConfigs) {
   return out;
 }
 
-// vite-plugin/files/versionedFileResourceServer.ts
-import fs from "fs";
-import path from "path";
-function versionedFileResourceServer(opts) {
-  const dir = opts.dir;
-  const activePath = path.join(dir, "_active.json");
-  const productionPath = path.join(dir, "_production.json");
-  const defaultName = opts.defaultName ?? "default";
-  const resolvedDir = path.resolve(dir);
-  const resolvedPackageDir = opts.packageDir ? path.resolve(opts.packageDir) : null;
-  function ensureDir() {
-    if (!fs.existsSync(dir)) {
-      fs.mkdirSync(dir, { recursive: true });
-    }
-  }
-  function ensureMeta() {
-    if (!fs.existsSync(activePath)) {
-      fs.writeFileSync(activePath, JSON.stringify({ activeFile: defaultName }));
-    }
-    if (!fs.existsSync(productionPath)) {
-      fs.writeFileSync(productionPath, JSON.stringify({ productionFile: defaultName }));
-    }
-  }
-  function filePath(name) {
-    return path.join(dir, `${name}.json`);
-  }
-  function existingPath(name) {
-    const local = filePath(name);
-    if (fs.existsSync(local)) return local;
-    if (resolvedPackageDir) {
-      const pkg = path.join(resolvedPackageDir, `${name}.json`);
-      if (fs.existsSync(pkg)) return pkg;
-    }
-    return null;
-  }
-  function readJson(name) {
-    const resolved = existingPath(name);
-    if (!resolved) return null;
-    return JSON.parse(fs.readFileSync(resolved, "utf-8"));
-  }
-  function listNames() {
-    const names = [];
-    const seen = /* @__PURE__ */ new Set();
-    const collect = (d) => {
-      if (!d || !fs.existsSync(d)) return;
-      for (const f of fs.readdirSync(d)) {
-        if (!f.endsWith(".json") || f.startsWith("_")) continue;
-        const name = f.slice(0, -".json".length);
-        if (seen.has(name)) continue;
-        seen.add(name);
-        names.push(name);
-      }
-    };
-    collect(resolvedDir);
-    if (resolvedPackageDir && resolvedPackageDir !== resolvedDir) collect(resolvedPackageDir);
-    return names;
-  }
-  function getActiveName() {
-    try {
-      const data = JSON.parse(fs.readFileSync(activePath, "utf-8"));
-      return data.activeFile || defaultName;
-    } catch {
-      return defaultName;
-    }
-  }
-  function getProductionName() {
-    try {
-      const data = JSON.parse(fs.readFileSync(productionPath, "utf-8"));
-      return data.productionFile || defaultName;
-    } catch {
-      return defaultName;
-    }
-  }
-  function setActiveName(name) {
-    fs.writeFileSync(activePath, JSON.stringify({ activeFile: name }));
-  }
-  function setProductionName(name) {
-    fs.writeFileSync(productionPath, JSON.stringify({ productionFile: name }));
-  }
-  return {
-    dir,
-    activePath,
-    productionPath,
-    ensureDir,
-    ensureMeta,
-    filePath,
-    existingPath,
-    readJson,
-    listNames,
-    getActiveName,
-    getProductionName,
-    setActiveName,
-    setProductionName
-  };
-}
-
 // vite-plugin/files/routeTable.ts
 async function dispatch(req, res, routes) {
   const url = req.url || "";
@@ -666,28 +83,18 @@ 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 = (() => {
   try {
-    let dir = path2.dirname(fileURLToPath(import.meta.url));
+    let dir = path.dirname(fileURLToPath(import.meta.url));
     for (let i = 0; i < 4; i++) {
-      const p = path2.join(dir, "package.json");
-      if (fs2.existsSync(p)) {
-        const json = JSON.parse(fs2.readFileSync(p, "utf-8"));
+      const p = path.join(dir, "package.json");
+      if (fs.existsSync(p)) {
+        const json = JSON.parse(fs.readFileSync(p, "utf-8"));
         if (json?.name === "@motion-proto/live-tokens") return json.version ?? "";
       }
-      const up = path2.dirname(dir);
+      const up = path.dirname(dir);
       if (up === dir) break;
       dir = up;
     }
@@ -695,65 +102,79 @@ var PKG_VERSION = (() => {
   }
   return "";
 })();
+var BUNDLE_KIND_BY_VERSION = {
+  1: "manifest-bundle",
+  [THEME_SCHEMA_VERSION]: "theme-bundle"
+};
 function themeFileApi(opts) {
   const dataDirs = resolveDataDirs({
     dataDir: opts.dataDir,
-    themesDir: opts.themesDir,
+    colorsAndTypeDir: opts.colorsAndTypeDir,
     componentConfigsDir: opts.componentConfigsDir,
-    manifestsDir: opts.manifestsDir
+    themesDir: opts.themesDir
   });
-  const THEMES_DIR = dataDirs.themesDir;
+  const COLORS_AND_TYPE_DIR = dataDirs.colorsAndTypeDir;
   const COMPONENT_CONFIGS_DIR = dataDirs.componentConfigsDir;
-  const MANIFESTS_DIR = dataDirs.manifestsDir;
-  const CSS_PATH = path2.resolve(opts.tokensCssPath);
-  const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? path2.resolve(opts.tokensGeneratedCssPath) : path2.join(dataDirs.dataDir, "tokens.generated.css");
-  const FONTS_CSS_PATH = opts.fontsCssPath ? path2.resolve(opts.fontsCssPath) : path2.join(path2.dirname(CSS_PATH), "fonts.css");
+  const THEMES_DIR = dataDirs.themesDir;
+  const CSS_PATH = path.resolve(opts.tokensCssPath);
+  const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? path.resolve(opts.tokensGeneratedCssPath) : path.join(dataDirs.dataDir, "tokens.generated.css");
+  const FONTS_CSS_PATH = opts.fontsCssPath ? path.resolve(opts.fontsCssPath) : path.join(path.dirname(CSS_PATH), "fonts.css");
   const API_BASE = opts.apiBase ?? "/api/live-tokens";
-  const consumerComponentDirs = opts.componentsSrcDir ? [path2.resolve(opts.componentsSrcDir)] : [path2.resolve("src/components"), path2.resolve("src/system/components")];
-  const packageComponentsDir = path2.resolve(
-    path2.dirname(fileURLToPath(import.meta.url)),
+  const consumerComponentDirs = opts.componentsSrcDir ? [path.resolve(opts.componentsSrcDir)] : [path.resolve("src/components"), path.resolve("src/system/components")];
+  const packageComponentsDir = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
     "..",
     "src",
     "system",
     "components"
   );
-  const packageDataDir = path2.resolve(
-    path2.dirname(fileURLToPath(import.meta.url)),
+  const packageDataDir = path.resolve(
+    path.dirname(fileURLToPath(import.meta.url)),
     "..",
     "src",
     "live-tokens",
     "data"
   );
-  const packageThemesDir = path2.join(packageDataDir, "themes");
-  const packageManifestsDir = path2.join(packageDataDir, "manifests");
-  const packageComponentConfigsDir = path2.join(packageDataDir, "component-configs");
+  const packageColorsAndTypeDir = path.join(packageDataDir, "colors-and-type");
+  const packageThemesDir = path.join(packageDataDir, "themes");
+  const packageComponentConfigsDir = path.join(packageDataDir, "component-configs");
+  function shippedColorsAndTypeNames(dataDir) {
+    try {
+      const pkgRoot = path.resolve(dataDir, "..", "..", "..");
+      const pkg = JSON.parse(fs.readFileSync(path.join(pkgRoot, "package.json"), "utf-8"));
+      const files = Array.isArray(pkg.files) ? pkg.files : [];
+      return files.filter((f) => /^src\/live-tokens\/data\/colors-and-type\/[^/]+\.json$/.test(f)).map((f) => path.basename(f, ".json"));
+    } catch {
+      return [];
+    }
+  }
   const COMPONENTS_SCAN_DIRS = [...consumerComponentDirs];
-  if (!COMPONENTS_SCAN_DIRS.includes(packageComponentsDir) && fs2.existsSync(packageComponentsDir)) {
+  if (!COMPONENTS_SCAN_DIRS.includes(packageComponentsDir) && fs.existsSync(packageComponentsDir)) {
     COMPONENTS_SCAN_DIRS.push(packageComponentsDir);
   }
-  const themesResource = versionedFileResourceServer({
-    dir: THEMES_DIR,
-    packageDir: packageThemesDir
+  const colorsAndTypeResource = versionedFileResourceServer({
+    dir: COLORS_AND_TYPE_DIR,
+    packageDir: packageColorsAndTypeDir,
+    packageOwnedNames: shippedColorsAndTypeNames(packageDataDir)
   });
   const componentResourceCache = /* @__PURE__ */ new Map();
   function componentResource(comp) {
     let r = componentResourceCache.get(comp);
     if (!r) {
       r = versionedFileResourceServer({
-        dir: path2.join(COMPONENT_CONFIGS_DIR, comp),
-        packageDir: path2.join(packageComponentConfigsDir, comp)
+        dir: path.join(COMPONENT_CONFIGS_DIR, comp),
+        packageDir: path.join(packageComponentConfigsDir, comp)
       });
       componentResourceCache.set(comp, r);
     }
     return r;
   }
-  const manifestsResource = versionedFileResourceServer({
-    dir: MANIFESTS_DIR,
-    packageDir: packageManifestsDir
+  const themesResource = versionedFileResourceServer({
+    dir: THEMES_DIR,
+    packageDir: packageThemesDir
   });
-  function ensureThemesDir() {
-    themesResource.ensureDir();
-    themesResource.ensureMeta();
+  function ensureColorsAndTypeDir() {
+    colorsAndTypeResource.ensureDir();
   }
   function readBody(req) {
     return new Promise((resolve, reject) => {
@@ -768,25 +189,33 @@ 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 ?? {};
+  function rejectReservedName(res, name) {
+    if (!name.startsWith("_")) return false;
+    jsonResponse(res, 400, {
+      error: 'Names starting with "_" are reserved',
+      code: "RESERVED_NAME"
+    });
+    return true;
+  }
+  function normalizeColorsAndType(colorsAndType) {
+    if (!colorsAndType || typeof colorsAndType !== "object") return colorsAndType;
+    const palettes = colorsAndType.editorConfigs ?? {};
+    const cssVars = colorsAndType.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 };
+    return { ...colorsAndType, 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',
     "system-ui-mono": 'ui-monospace, "SF Mono", Menlo, Consolas, monospace'
   };
-  function resolveFontStacks(themeData) {
-    const stacks = themeData.fontStacks;
-    const sources = themeData.fontSources;
+  function resolveFontStacks(colorsAndTypeData) {
+    const stacks = colorsAndTypeData.fontStacks;
+    const sources = colorsAndTypeData.fontSources;
     if (!stacks || stacks.length === 0) return {};
     const familyById = /* @__PURE__ */ new Map();
     for (const src of sources ?? []) {
@@ -812,21 +241,28 @@ function themeFileApi(opts) {
   }
   function regenerateTokensCss() {
     const lines = [];
-    lines.push("/* Generated by themeFileApi from the production theme and component configs. Do not edit. */");
+    lines.push("/* Generated by themeFileApi from the production theme. Do not edit. */");
     lines.push("/* tokens.css holds developer-authored defaults; this file holds editor overrides. */");
     lines.push("");
     const productionThemeName = themesResource.getProductionName();
-    const themeData = themesResource.readJson(productionThemeName);
-    let themeVarCount = 0;
-    if (themeData) {
-      const cssVars = { ...themeData.cssVariables || {} };
-      Object.assign(cssVars, palettesToVars(migratePaletteColorsToOklch(themeData.editorConfigs ?? {})));
-      const resolvedFontVars = resolveFontStacks(themeData);
+    const productionTheme = readTheme(productionThemeName)?.theme ?? null;
+    if (themesResource.existingPath(productionThemeName) !== null && !productionTheme?.colorsAndType) {
+      const tail = `${path.basename(GENERATED_CSS_PATH)} was left as it was.`;
+      throw new Error(
+        unreadableThemeReason(productionThemeName) === "colors-and-type" ? `[live-tokens] ${notAThemeError(productionThemeName)} ${tail}` : `[live-tokens] Production theme "${productionThemeName}" is unreadable, so ${tail} Repair the theme file or adopt another theme.`
+      );
+    }
+    const colorsAndTypeData = productionTheme?.colorsAndType;
+    let colorsAndTypeVarCount = 0;
+    if (colorsAndTypeData) {
+      const cssVars = { ...colorsAndTypeData.cssVariables || {} };
+      Object.assign(cssVars, palettesToVars(migratePaletteColorsToOklch(colorsAndTypeData.editorConfigs ?? {})));
+      const resolvedFontVars = resolveFontStacks(colorsAndTypeData);
       for (const [name, value] of Object.entries(resolvedFontVars)) {
         cssVars[name] = value;
       }
-      themeVarCount = Object.keys(cssVars).length;
-      if (themeVarCount > 0) {
+      colorsAndTypeVarCount = Object.keys(cssVars).length;
+      if (colorsAndTypeVarCount > 0) {
         lines.push(`/* Production theme: ${productionThemeName} */`);
         lines.push(":root:root {");
         for (const [name, value] of Object.entries(cssVars)) {
@@ -837,12 +273,10 @@ function themeFileApi(opts) {
       }
     }
     let componentOverrideCount = 0;
-    if (fs2.existsSync(COMPONENT_CONFIGS_DIR)) {
+    if (fs.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 prodCfg = productionTheme?.componentConfigs[comp];
         const defaultCfg = readComponentConfig(comp, "default");
         if (!prodCfg || !defaultCfg) continue;
         const overrides = [];
@@ -853,7 +287,7 @@ function themeFileApi(opts) {
           }
         }
         if (overrides.length === 0) continue;
-        const block = [`  /* ${comp} (${prod}) */`];
+        const block = [`  /* ${comp} */`];
         for (const [varName, semanticValue] of overrides) {
           block.push(`  ${varName}: ${aliasValueToCss(semanticValue)};`);
         }
@@ -871,24 +305,20 @@ function themeFileApi(opts) {
         lines.push("");
       }
     }
-    if (!fs2.existsSync(path2.dirname(GENERATED_CSS_PATH))) {
-      fs2.mkdirSync(path2.dirname(GENERATED_CSS_PATH), { recursive: true });
+    if (!fs.existsSync(path.dirname(GENERATED_CSS_PATH))) {
+      fs.mkdirSync(path.dirname(GENERATED_CSS_PATH), { recursive: true });
     }
-    fs2.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
+    fs.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
     console.log(
-      `[regenerateTokensCss] Wrote ${path2.basename(GENERATED_CSS_PATH)} (${themeVarCount} theme vars, ${componentOverrideCount} component overrides)`
+      `[regenerateTokensCss] Wrote ${path.basename(GENERATED_CSS_PATH)} (${colorsAndTypeVarCount} theme vars, ${componentOverrideCount} component overrides)`
     );
   }
-  function syncTokensToCss(_fileName) {
-    regenerateTokensCss();
-  }
-  function syncFontsToCss(fileName) {
-    const themeData = themesResource.readJson(fileName);
-    if (!themeData) return;
-    const sources = themeData.fontSources;
+  function syncFontsToCss(colorsAndTypeData) {
+    if (!colorsAndTypeData) return;
+    const sources = colorsAndTypeData.fontSources;
     if (!sources) return;
     const lines = [];
-    lines.push("/* Generated from the production theme by syncFontsToCss. Do not edit. */");
+    lines.push("/* Generated from the production colors and type by syncFontsToCss. Do not edit. */");
     lines.push("/* Both fonts.css and fonts/ are in dist/, so relative paths work at runtime. */");
     lines.push("");
     const urlSources = sources.filter((s) => s.kind !== "font-face" && s.url);
@@ -908,11 +338,11 @@ function themeFileApi(opts) {
       lines.push("");
     }
     const content = lines.join("\n");
-    if (!fs2.existsSync(path2.dirname(FONTS_CSS_PATH))) {
-      fs2.mkdirSync(path2.dirname(FONTS_CSS_PATH), { recursive: true });
+    if (!fs.existsSync(path.dirname(FONTS_CSS_PATH))) {
+      fs.mkdirSync(path.dirname(FONTS_CSS_PATH), { recursive: true });
     }
-    fs2.writeFileSync(FONTS_CSS_PATH, content);
-    console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${path2.basename(FONTS_CSS_PATH)}`);
+    fs.writeFileSync(FONTS_CSS_PATH, content);
+    console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${path.basename(FONTS_CSS_PATH)}`);
   }
   function extractAliasDeclarations(body) {
     const aliases = {};
@@ -927,11 +357,11 @@ function themeFileApi(opts) {
     return aliases;
   }
   function componentNameFromFile(filePath) {
-    return path2.basename(filePath, ".svelte").toLowerCase();
+    return path.basename(filePath, ".svelte").toLowerCase();
   }
   function isThemeAwareComponent(filePath) {
     try {
-      const source = fs2.readFileSync(filePath, "utf-8");
+      const source = fs.readFileSync(filePath, "utf-8");
       return /:global\(:root\)\s*\{/.test(source);
     } catch {
       return false;
@@ -940,10 +370,10 @@ function themeFileApi(opts) {
   function listComponentSourcePaths() {
     const byName = /* @__PURE__ */ new Map();
     for (const dir of COMPONENTS_SCAN_DIRS) {
-      if (!fs2.existsSync(dir)) continue;
-      for (const f of fs2.readdirSync(dir)) {
+      if (!fs.existsSync(dir)) continue;
+      for (const f of fs.readdirSync(dir)) {
         if (!f.endsWith(".svelte")) continue;
-        const full = path2.join(dir, f);
+        const full = path.join(dir, f);
         if (!isThemeAwareComponent(full)) continue;
         const name = componentNameFromFile(f);
         if (!byName.has(name)) byName.set(name, full);
@@ -957,18 +387,18 @@ function themeFileApi(opts) {
   function warnOnTokenDrift(log) {
     let tokensCss = "";
     try {
-      tokensCss = fs2.readFileSync(CSS_PATH, "utf-8");
+      tokensCss = fs.readFileSync(CSS_PATH, "utf-8");
     } catch {
       return;
     }
     let generatedCss = "";
     try {
-      generatedCss = fs2.readFileSync(GENERATED_CSS_PATH, "utf-8");
+      generatedCss = fs.readFileSync(GENERATED_CSS_PATH, "utf-8");
     } catch {
     }
     const componentSources = listComponentSourcePaths().map((p) => ({
       name: componentNameFromFile(p),
-      source: fs2.readFileSync(p, "utf-8")
+      source: fs.readFileSync(p, "utf-8")
     }));
     const missing = validateTokensCss({ tokensCss, generatedCss, componentSources });
     if (missing.length === 0) return;
@@ -976,7 +406,7 @@ function themeFileApi(opts) {
       (m) => `  ${m.token}  (referenced by ${m.referencedBy.join(", ")})`
     );
     log(
-      `[live-tokens] ${missing.length} token(s) referenced by components are not defined in ${path2.relative(process.cwd(), CSS_PATH)}:
+      `[live-tokens] ${missing.length} token(s) referenced by components are not defined in ${path.relative(process.cwd(), CSS_PATH)}:
 ${lines.join("\n")}
   These render as blank/empty editor slots. Run \`npx live-tokens migrate\` to reconcile.`
     );
@@ -984,37 +414,37 @@ ${lines.join("\n")}
   function autoMigrateAdditive(log) {
     let before = "";
     try {
-      before = fs2.readFileSync(CSS_PATH, "utf-8");
+      before = fs.readFileSync(CSS_PATH, "utf-8");
     } catch {
       return;
     }
     const { css, applied, changed } = runAdditiveTokensCssMigrations(before);
     if (!changed) return;
-    fs2.writeFileSync(CSS_PATH, css);
+    fs.writeFileSync(CSS_PATH, css);
     log(
-      `[live-tokens] autoMigrate applied ${applied.length} additive migration(s) to ${path2.relative(process.cwd(), CSS_PATH)}: ${applied.join(", ")}. Review the diff in git.`
+      `[live-tokens] autoMigrate applied ${applied.length} additive migration(s) to ${path.relative(process.cwd(), CSS_PATH)}: ${applied.join(", ")}. Review the diff in git.`
     );
   }
   function generateDefaultConfig(comp, sourcePath) {
-    if (!fs2.existsSync(sourcePath)) return;
+    if (!fs.existsSync(sourcePath)) return;
     const r = componentResource(comp);
     r.ensureDir();
     const defaultPath = r.filePath("default");
-    const sourceStat = fs2.statSync(sourcePath);
-    if (fs2.existsSync(defaultPath)) {
-      const defaultStat = fs2.statSync(defaultPath);
+    const sourceStat = fs.statSync(sourcePath);
+    if (fs.existsSync(defaultPath)) {
+      const defaultStat = fs.statSync(defaultPath);
       if (defaultStat.mtimeMs >= sourceStat.mtimeMs) return;
     }
-    const source = fs2.readFileSync(sourcePath, "utf-8");
+    const source = fs.readFileSync(sourcePath, "utf-8");
     const body = extractGlobalRootBody(source);
     const aliases = extractAliasDeclarations(body);
     const now = (/* @__PURE__ */ new Date()).toISOString();
     let createdAt = now;
     let existingUpdatedAt;
     let existingAliases;
-    if (fs2.existsSync(defaultPath)) {
+    if (fs.existsSync(defaultPath)) {
       try {
-        const existing = JSON.parse(fs2.readFileSync(defaultPath, "utf-8"));
+        const existing = JSON.parse(fs.readFileSync(defaultPath, "utf-8"));
         if (existing.createdAt) createdAt = existing.createdAt;
         if (typeof existing.updatedAt === "string") existingUpdatedAt = existing.updatedAt;
         if (existing.aliases && typeof existing.aliases === "object") {
@@ -1040,57 +470,191 @@ ${lines.join("\n")}
     };
     if (aliasesUnchanged && existingUpdatedAt) {
       const t = /* @__PURE__ */ new Date();
-      fs2.utimesSync(defaultPath, t, t);
+      fs.utimesSync(defaultPath, t, t);
       return;
     }
-    fs2.writeFileSync(defaultPath, JSON.stringify(defaultConfig, null, 2));
+    fs.writeFileSync(defaultPath, JSON.stringify(defaultConfig, null, 2));
   }
   function ensureComponentConfigsDir() {
-    if (!fs2.existsSync(COMPONENT_CONFIGS_DIR)) {
-      fs2.mkdirSync(COMPONENT_CONFIGS_DIR, { recursive: true });
+    if (!fs.existsSync(COMPONENT_CONFIGS_DIR)) {
+      fs.mkdirSync(COMPONENT_CONFIGS_DIR, { recursive: true });
     }
     for (const sourcePath of listComponentSourcePaths()) {
       const comp = componentNameFromFile(sourcePath);
       const r = componentResource(comp);
       r.ensureDir();
       generateDefaultConfig(comp, sourcePath);
-      r.ensureMeta();
     }
   }
-  function ensureManifestsDir() {
-    manifestsResource.ensureDir();
-    if (!fs2.existsSync(manifestsResource.activePath)) {
-      fs2.writeFileSync(
-        manifestsResource.activePath,
-        JSON.stringify({ activeFile: "default" })
-      );
-    } else {
-      const activeName = manifestsResource.getActiveName();
-      if (manifestsResource.existingPath(activeName) === null) {
-        manifestsResource.setActiveName("default");
+  function listLegacyPointers() {
+    const legacy = [];
+    const check = (dir) => {
+      for (const name of ["_active.json", "_production.json"]) {
+        const p = path.join(dir, name);
+        if (fs.existsSync(p)) legacy.push(path.relative(process.cwd(), p));
+      }
+    };
+    check(COLORS_AND_TYPE_DIR);
+    if (fs.existsSync(COMPONENT_CONFIGS_DIR)) {
+      for (const entry of fs.readdirSync(COMPONENT_CONFIGS_DIR, { withFileTypes: true })) {
+        if (entry.isDirectory()) check(path.join(COMPONENT_CONFIGS_DIR, entry.name));
       }
     }
+    return legacy;
   }
-  function patchActiveManifest(field, comp, fileName) {
-    const activeFile = manifestsResource.getActiveName();
-    if (activeFile === "default") return false;
-    const manifestPath = manifestsResource.filePath(activeFile);
-    if (!fs2.existsSync(manifestPath)) return false;
-    let manifest;
+  function warnOnLegacyPointers(legacy, bakeHeld, warn) {
+    if (legacy.length === 0) return;
+    warn(
+      `[live-tokens] ${legacy.length} legacy pointer file(s) left from the pre-working-set data model, starting with ${legacy[0]}. They are no longer read. Run \`npx live-tokens migrate\` to heal the tree.` + (bakeHeld ? ` Until then this tree has named no production theme, so ${path.basename(GENERATED_CSS_PATH)} is left exactly as it is rather than rebuilt from the default.` : "")
+    );
+  }
+  function warnOnLegacyLayout(evidence, warn) {
+    warn(
+      `[live-tokens] This project still uses the data layout from 0.47 and earlier: ${evidence}. Since 0.48 the whole-look theme files live in \`themes/\` and the colors and type live in \`colors-and-type/\`. Nothing in the data directory was written, the editor cannot save, and ${path.basename(GENERATED_CSS_PATH)} is left exactly as it is. Run \`npx live-tokens migrate\` to move the directories and heal the tree, then restart the dev server.`
+    );
+  }
+  const diskThemeResolvers = {
+    readColorsAndType: (name) => colorsAndTypeResource.readJson(sanitizeFileName(name)),
+    readComponentConfig: (comp, name) => readComponentConfig(comp, sanitizeFileName(name)),
+    normalizeColorsAndType: (colorsAndType) => normalizeColorsAndType(colorsAndType)
+  };
+  function readTheme(fileName) {
+    let raw;
     try {
-      manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
+      raw = themesResource.readJson(fileName);
     } catch {
-      return false;
+      return null;
     }
-    if (field === "theme") {
-      manifest.theme = fileName;
-    } else if (field === "component" && comp) {
-      manifest.componentConfigs = manifest.componentConfigs ?? {};
-      manifest.componentConfigs[comp] = fileName;
+    if (!raw) return null;
+    if (isColorsAndTypeShaped(raw)) return null;
+    return normalizeTheme(raw, diskThemeResolvers);
+  }
+  function unreadableThemeReason(fileName) {
+    const resolved = themesResource.existingPath(fileName);
+    if (resolved === null) return "missing";
+    try {
+      if (isColorsAndTypeShaped(JSON.parse(fs.readFileSync(resolved, "utf-8")))) {
+        return "colors-and-type";
+      }
+    } catch {
     }
-    manifest.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-    fs2.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
-    return true;
+    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 ${path.basename(COLORS_AND_TYPE_DIR)}/ or delete it.`;
+  }
+  function respondUnreadableTheme(res, fileName, missingError) {
+    switch (unreadableThemeReason(fileName)) {
+      case "missing":
+        jsonResponse(res, 404, { error: missingError });
+        return;
+      case "colors-and-type":
+        jsonResponse(res, 422, { error: notAThemeError(fileName), code: "CORRUPT_THEME" });
+        return;
+      case "corrupt":
+        jsonResponse(res, 422, {
+          error: `Theme file "${fileName}" is not valid JSON`,
+          code: "CORRUPT_THEME"
+        });
+    }
+  }
+  function writeTheme(fileName, theme) {
+    themesResource.ensureDir();
+    fs.writeFileSync(themesResource.filePath(fileName), JSON.stringify(theme, null, 2));
+  }
+  function migrateLocalThemes(warn) {
+    if (path.resolve(THEMES_DIR) === path.resolve(packageThemesDir)) return;
+    if (!fs.existsSync(THEMES_DIR)) return;
+    for (const file of fs.readdirSync(THEMES_DIR)) {
+      if (!file.endsWith(".json") || file.startsWith("_")) continue;
+      const fileName = file.slice(0, -".json".length);
+      if (fileName === "default") continue;
+      let raw;
+      try {
+        raw = JSON.parse(fs.readFileSync(path.join(THEMES_DIR, file), "utf-8"));
+      } catch {
+        continue;
+      }
+      if (isColorsAndTypeShaped(raw)) {
+        warn(`[live-tokens] ${notAThemeError(fileName)} It is left untouched.`);
+        continue;
+      }
+      const { theme, dropped, migrated } = normalizeTheme(raw, diskThemeResolvers);
+      if (!migrated) continue;
+      writeTheme(fileName, theme);
+      if (dropped.length > 0) {
+        warn(
+          `[live-tokens] Theme "${fileName}": ${dropped.join(", ")} no longer exists; those slices now use their defaults.`
+        );
+      }
+    }
+  }
+  function ensureDefaultTheme(warn) {
+    let existing = null;
+    try {
+      existing = JSON.parse(fs.readFileSync(themesResource.filePath("default"), "utf-8"));
+    } catch {
+    }
+    if (isColorsAndTypeShaped(existing)) {
+      warn(`[live-tokens] ${notAThemeError("default")} The Default theme was not materialised.`);
+      return;
+    }
+    const colorsAndType = normalizeColorsAndType(colorsAndTypeResource.readJson("default"));
+    const componentConfigs = {};
+    for (const comp of listComponentNames()) {
+      const cfg = readComponentConfig(comp, "default");
+      if (cfg) componentConfigs[comp] = cfg;
+    }
+    if (existing?.schemaVersion === THEME_SCHEMA_VERSION && JSON.stringify(existing.colorsAndType) === JSON.stringify(colorsAndType) && JSON.stringify(existing.componentConfigs) === JSON.stringify(componentConfigs)) {
+      return;
+    }
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    writeTheme("default", {
+      name: "Motion Proto",
+      createdAt: typeof existing?.createdAt === "string" ? existing.createdAt : now,
+      updatedAt: now,
+      schemaVersion: THEME_SCHEMA_VERSION,
+      colorsAndType,
+      componentConfigs
+    });
+  }
+  function ensureThemesDir(warn) {
+    themesResource.ensureDir();
+    ensureDefaultTheme(warn);
+    migrateLocalThemes(warn);
+    const productionPointerHeld = !fs.existsSync(themesResource.productionPath) && listLegacyPointers().length > 0;
+    if (productionPointerHeld) {
+      if (!fs.existsSync(themesResource.activePath)) themesResource.setActiveName("default");
+    } else {
+      themesResource.ensureMeta();
+    }
+    if (themesResource.existingPath(themesResource.getActiveName()) === null) {
+      themesResource.setActiveName("default");
+    }
+    if (themesResource.existingPath(themesResource.getProductionName()) === null) {
+      themesResource.setProductionName("default");
+    }
+    return { productionPointerHeld };
+  }
+  function activeTheme() {
+    return readTheme(themesResource.getActiveName())?.theme ?? null;
+  }
+  function resolveLiveColorsAndType(theme) {
+    const working = colorsAndTypeResource.readWorking();
+    if (working !== null) return { data: normalizeColorsAndType(working), source: "working" };
+    if (theme?.colorsAndType) return { data: theme.colorsAndType, source: "theme" };
+    const shipped = colorsAndTypeResource.readJson("default");
+    if (!shipped) return null;
+    return { data: normalizeColorsAndType(shipped), source: "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");
+    if (!cfg) return null;
+    return { data: cfg, source: "default" };
   }
   function formatAliasGradient(v) {
     const stopColor = (s) => {
@@ -1126,237 +690,191 @@ ${lines.join("\n")}
       return null;
     }
   }
-  function syncComponentsToCss() {
-    regenerateTokensCss();
-  }
   const escapedBase = API_BASE.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const COLORS_AND_TYPE_ROUTE = `${API_BASE}/colors-and-type`;
+  const COLORS_AND_TYPE_ACTIVE_ROUTE = `${API_BASE}/colors-and-type/active`;
+  const COLORS_AND_TYPE_PRODUCTION_ROUTE = `${API_BASE}/colors-and-type/production`;
+  const COLORS_AND_TYPE_WORKING_ROUTE = `${API_BASE}/colors-and-type/working`;
+  const COMPONENT_CONFIGS_ROUTE = `${API_BASE}/component-configs`;
   const THEMES_ROUTE = `${API_BASE}/themes`;
   const THEMES_ACTIVE_ROUTE = `${API_BASE}/themes/active`;
   const THEMES_PRODUCTION_ROUTE = `${API_BASE}/themes/production`;
-  const COMPONENT_CONFIGS_ROUTE = `${API_BASE}/component-configs`;
-  const MANIFESTS_ROUTE = `${API_BASE}/manifests`;
-  const MANIFESTS_ACTIVE_ROUTE = `${API_BASE}/manifests/active`;
-  const THEME_BY_NAME_REGEX = new RegExp(`^${escapedBase}/themes/([a-z0-9\\-_]+)$`);
+  const COLORS_AND_TYPE_BY_NAME_REGEX = new RegExp(`^${escapedBase}/colors-and-type/([a-z0-9\\-_]+)$`);
   const COMP_LIST_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)$`);
   const COMP_ACTIVE_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)/active$`);
   const COMP_PRODUCTION_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)/production$`);
+  const COMP_WORKING_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)/working$`);
   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();
-    const files = themesResource.listNames().map((fileName) => {
-      const data = themesResource.readJson(fileName);
+  const THEME_APPLY_REGEX = new RegExp(`^${escapedBase}/themes/([a-z0-9\\-_]+)/apply$`);
+  const THEME_EXPORT_REGEX = new RegExp(`^${escapedBase}/themes/([a-z0-9\\-_]+)/export$`);
+  const THEME_IMPORT_ROUTE = `${API_BASE}/themes/import`;
+  const THEME_BY_NAME_REGEX = new RegExp(`^${escapedBase}/themes/([a-z0-9\\-_]+)$`);
+  const PRODUCTION_ROUTE = `${API_BASE}/production`;
+  async function handleListColorsAndType(_ctx) {
+    const files = colorsAndTypeResource.listNames().map((fileName) => {
+      const data = colorsAndTypeResource.readJson(fileName);
       return {
         name: data?.name || fileName,
         fileName,
         updatedAt: data?.updatedAt || "",
-        isActive: fileName === activeFile
+        // Package-owned rows are the shipped presets and the default. The Load
+        // window offers those as whole themes, so it lists only the rows a
+        // local file backs — including a local copy of a shipped name, which
+        // holds whatever the user did to it.
+        isPackage: colorsAndTypeResource.isPackageFile(fileName)
       };
     });
     jsonResponse(_ctx.res, 200, { files });
   }
-  async function handleGetActiveTheme({ res }) {
-    const activeFile = themesResource.getActiveName();
-    const raw = themesResource.readJson(activeFile);
-    if (!raw) {
-      jsonResponse(res, 404, { error: "Active theme not found" });
-      return;
-    }
-    const data = normalizeTheme(raw);
-    data._fileName = activeFile;
-    jsonResponse(res, 200, data);
-  }
-  async function handleSetActiveTheme({ req, res }) {
-    const body = JSON.parse(await readBody(req));
-    const fileName = sanitizeFileName(body.name || "default");
-    if (themesResource.existingPath(fileName) === null) {
-      jsonResponse(res, 404, { error: "Theme not found" });
-      return;
-    }
-    themesResource.setActiveName(fileName);
-    jsonResponse(res, 200, { ok: true, activeFile: fileName });
-  }
-  async function handleGetProductionTheme({ res }) {
-    const prodFile = themesResource.getProductionName();
-    const raw = themesResource.readJson(prodFile);
-    if (!raw) {
-      jsonResponse(res, 200, { fileName: prodFile, name: prodFile, cssVariables: {} });
+  async function handleGetActiveColorsAndType({ res }) {
+    const resolved = resolveLiveColorsAndType(activeTheme());
+    if (!resolved) {
+      jsonResponse(res, 404, { error: "Active colors and type not found" });
       return;
     }
-    const data = normalizeTheme(raw);
     jsonResponse(res, 200, {
-      fileName: prodFile,
-      name: data.name || prodFile,
-      updatedAt: data.updatedAt || "",
-      cssVariables: data.cssVariables || {}
+      ...resolved.data,
+      _fileName: themesResource.getActiveName(),
+      _source: resolved.source
     });
   }
-  async function handleSetProductionTheme({ req, res }) {
-    const body = JSON.parse(await readBody(req));
-    const fileName = sanitizeFileName(body.name || "default");
-    if (themesResource.existingPath(fileName) === null) {
-      jsonResponse(res, 404, { error: "Theme not found" });
-      return;
+  async function readBufferBody(req, res) {
+    let parsed;
+    try {
+      parsed = JSON.parse(await readBody(req));
+    } catch {
+      parsed = void 0;
     }
-    if (manifestsResource.getActiveName() === "default") {
-      jsonResponse(res, 409, {
-        error: "Active manifest is protected. Save As first.",
-        code: "ACTIVE_IS_PROTECTED"
-      });
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      jsonResponse(res, 400, { error: "Body must be a JSON object", code: "INVALID_BODY" });
+      return null;
+    }
+    return parsed;
+  }
+  async function handleGetWorkingColorsAndType({ res }) {
+    const raw = colorsAndTypeResource.readWorking();
+    if (raw === null) {
+      jsonResponse(res, 404, { error: "No working colors and type" });
       return;
     }
-    themesResource.setProductionName(fileName);
-    syncTokensToCss(fileName);
-    syncFontsToCss(fileName);
-    syncComponentsToCss();
-    patchActiveManifest("theme", null, fileName);
-    const data = themesResource.readJson(fileName);
-    jsonResponse(res, 200, {
-      ok: true,
-      fileName,
-      name: data?.name || fileName,
-      updatedAt: data?.updatedAt || ""
-    });
+    jsonResponse(res, 200, normalizeColorsAndType(raw));
   }
-  async function handleThemeByName({ params, req, res }) {
+  async function handleSetWorkingColorsAndType({ req, res }) {
+    const body = await readBufferBody(req, res);
+    if (!body) return;
+    colorsAndTypeResource.writeWorking(body);
+    jsonResponse(res, 200, { ok: true });
+  }
+  async function handleClearWorkingColorsAndType({ res }) {
+    colorsAndTypeResource.clearWorking();
+    jsonResponse(res, 200, { ok: true });
+  }
+  async function handleColorsAndTypeByName({ params, req, res }) {
     const [fileName] = params;
-    const filePath = themesResource.filePath(fileName);
+    if (rejectReservedName(res, fileName)) return;
+    const filePath = colorsAndTypeResource.filePath(fileName);
     if (req.method === "GET") {
-      const raw = themesResource.readJson(fileName);
+      const raw = colorsAndTypeResource.readJson(fileName);
       if (!raw) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = normalizeTheme(raw);
+      const data = normalizeColorsAndType(raw);
       data._fileName = fileName;
       jsonResponse(res, 200, data);
       return;
     }
     if (req.method === "PUT") {
       if (fileName === "default") {
-        jsonResponse(res, 403, { error: "Cannot overwrite the default theme (live from package)" });
+        jsonResponse(res, 403, { error: "Cannot overwrite the default colors and type (live from package)" });
         return;
       }
       const body = JSON.parse(await readBody(req));
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (fs2.existsSync(filePath)) {
+      if (fs.existsSync(filePath)) {
         try {
-          const existing = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
+          const existing = JSON.parse(fs.readFileSync(filePath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
-      fs2.writeFileSync(filePath, JSON.stringify(body, null, 2));
-      if (fileName === themesResource.getProductionName()) {
-        syncTokensToCss(fileName);
-        syncFontsToCss(fileName);
-        syncComponentsToCss();
-      }
+      fs.writeFileSync(filePath, JSON.stringify(body, null, 2));
       jsonResponse(res, 200, { ok: true, fileName });
       return;
     }
     if (req.method === "DELETE") {
       if (fileName === "default") {
-        jsonResponse(res, 403, { error: "Cannot delete the default theme" });
+        jsonResponse(res, 403, { error: "Cannot delete the default colors and type" });
         return;
       }
-      if (themesResource.getProductionName() === fileName) {
+      if (fs.existsSync(filePath)) {
+        fs.unlinkSync(filePath);
+      } else if (colorsAndTypeResource.existingPath(fileName)) {
         jsonResponse(res, 403, {
-          error: "Cannot delete the production theme. Adopt a different theme first.",
-          code: "PRODUCTION_THEME"
+          error: "Cannot delete colors and type shipped with the package. Saving it creates a local copy; deleting that copy restores the shipped version.",
+          code: "PACKAGE_COLORS_AND_TYPE"
         });
         return;
       }
-      if (fs2.existsSync(filePath)) {
-        fs2.unlinkSync(filePath);
-        if (themesResource.getActiveName() === fileName) {
-          themesResource.setActiveName("default");
-        }
-      }
       jsonResponse(res, 200, { ok: true });
       return;
     }
   }
   async function handleListComponents({ res }) {
-    const components = listComponentNames().map((comp) => {
-      const r = componentResource(comp);
-      return {
-        name: comp,
-        activeFile: r.getActiveName(),
-        productionFile: r.getProductionName()
-      };
-    });
+    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"
+    }));
     jsonResponse(res, 200, { components });
   }
+  function rejectUnknownComponent(res, comp) {
+    if (listComponentNames().includes(comp)) return false;
+    jsonResponse(res, 404, { error: `Unknown component "${comp}"`, code: "UNKNOWN_COMPONENT" });
+    return true;
+  }
   async function handleGetComponentActive({ params, res }) {
     const [comp] = params;
-    const r = componentResource(comp);
-    const activeFile = r.getActiveName();
-    const cfg = readComponentConfig(comp, activeFile);
-    if (!cfg) {
+    const resolved = resolveLiveComponentConfig(comp, activeTheme());
+    if (!resolved) {
       jsonResponse(res, 404, { error: "Active config not found" });
       return;
     }
-    jsonResponse(res, 200, { ...cfg, _fileName: activeFile });
+    jsonResponse(res, 200, {
+      ...resolved.data,
+      _fileName: themesResource.getActiveName(),
+      _source: resolved.source
+    });
   }
-  async function handleSetComponentActive({ params, req, res }) {
+  async function handleGetComponentWorking({ params, res }) {
     const [comp] = params;
-    const body = JSON.parse(await readBody(req));
-    const fileName = sanitizeFileName(body.name || "default");
-    const r = componentResource(comp);
-    if (r.existingPath(fileName) === null) {
-      jsonResponse(res, 404, { error: "Config not found" });
+    const raw = componentResource(comp).readWorking();
+    if (raw === null) {
+      jsonResponse(res, 404, { error: "No working config" });
       return;
     }
-    r.ensureDir();
-    r.setActiveName(fileName);
-    jsonResponse(res, 200, { ok: true, activeFile: fileName });
+    jsonResponse(res, 200, raw);
   }
-  async function handleGetComponentProduction({ params, res }) {
+  async function handleSetComponentWorking({ params, req, res }) {
     const [comp] = params;
-    const r = componentResource(comp);
-    const prodFile = r.getProductionName();
-    const cfg = readComponentConfig(comp, prodFile);
-    jsonResponse(res, 200, {
-      fileName: prodFile,
-      name: cfg?.name || prodFile,
-      aliases: cfg?.aliases || {}
-    });
+    if (rejectUnknownComponent(res, comp)) return;
+    const body = await readBufferBody(req, res);
+    if (!body) return;
+    componentResource(comp).writeWorking(body);
+    jsonResponse(res, 200, { ok: true });
   }
-  async function handleSetComponentProduction({ params, req, res }) {
+  async function handleClearComponentWorking({ params, res }) {
     const [comp] = params;
-    const body = JSON.parse(await readBody(req));
-    const fileName = sanitizeFileName(body.name || "default");
-    const r = componentResource(comp);
-    if (r.existingPath(fileName) === null) {
-      jsonResponse(res, 404, { error: "Config not found" });
-      return;
-    }
-    if (manifestsResource.getActiveName() === "default") {
-      jsonResponse(res, 409, {
-        error: "Active manifest is protected. Save As first.",
-        code: "ACTIVE_IS_PROTECTED"
-      });
-      return;
-    }
-    r.ensureDir();
-    r.setProductionName(fileName);
-    syncComponentsToCss();
-    patchActiveManifest("component", comp, fileName);
-    const cfg = readComponentConfig(comp, fileName);
-    jsonResponse(res, 200, {
-      ok: true,
-      fileName,
-      name: cfg?.name || fileName,
-      aliases: cfg?.aliases || {}
-    });
+    componentResource(comp).clearWorking();
+    jsonResponse(res, 200, { ok: true });
   }
   async function handleComponentConfigByName({ params, req, res }) {
     const [comp, name] = params;
+    if (rejectReservedName(res, name)) return;
     const r = componentResource(comp);
     const configPath = r.filePath(name);
     if (req.method === "GET") {
@@ -1379,19 +897,16 @@ ${lines.join("\n")}
       body.component = comp;
       body.name = body.name || name;
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (fs2.existsSync(configPath)) {
+      if (fs.existsSync(configPath)) {
         try {
-          const existing = JSON.parse(fs2.readFileSync(configPath, "utf-8"));
+          const existing = JSON.parse(fs.readFileSync(configPath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
       r.ensureDir();
-      fs2.writeFileSync(configPath, JSON.stringify(body, null, 2));
-      if (r.getProductionName() === name) {
-        syncComponentsToCss();
-      }
+      fs.writeFileSync(configPath, JSON.stringify(body, null, 2));
       jsonResponse(res, 200, { ok: true, fileName: name });
       return;
     }
@@ -1400,16 +915,7 @@ ${lines.join("\n")}
         jsonResponse(res, 403, { error: "Cannot delete default config" });
         return;
       }
-      if (fs2.existsSync(configPath)) {
-        fs2.unlinkSync(configPath);
-        if (r.getActiveName() === name) {
-          r.setActiveName("default");
-        }
-        if (r.getProductionName() === name) {
-          r.setProductionName("default");
-          syncComponentsToCss();
-        }
-      }
+      if (fs.existsSync(configPath)) fs.unlinkSync(configPath);
       jsonResponse(res, 200, { ok: true });
       return;
     }
@@ -1417,199 +923,190 @@ ${lines.join("\n")}
   async function handleListComponentConfigs({ params, res }) {
     const [comp] = params;
     const r = componentResource(comp);
-    if (!fs2.existsSync(r.dir)) {
+    if (!fs.existsSync(r.dir)) {
       jsonResponse(res, 404, { error: "Component not found" });
       return;
     }
-    const activeFile = r.getActiveName();
-    const productionFile = r.getProductionName();
     const files = r.listNames().map((fileName) => {
       const data = r.readJson(fileName);
       return {
         name: data?.name || fileName,
         fileName,
-        updatedAt: data?.updatedAt || "",
-        isActive: fileName === activeFile,
-        isProduction: fileName === productionFile
+        updatedAt: data?.updatedAt || ""
       };
     });
-    jsonResponse(res, 200, { component: comp, files, activeFile, productionFile });
+    jsonResponse(res, 200, { component: comp, files });
   }
-  async function handleListManifests({ res }) {
-    const activeFile = manifestsResource.getActiveName();
-    const files = manifestsResource.listNames().map((fileName) => {
-      const data = manifestsResource.readJson(fileName);
-      return {
-        name: data?.name || fileName,
+  async function handleListThemes({ res }) {
+    const activeFile = themesResource.getActiveName();
+    const productionFile = themesResource.getProductionName();
+    const files = [];
+    for (const fileName of themesResource.listNames()) {
+      const read = readTheme(fileName);
+      if (!read) {
+        console.warn(
+          unreadableThemeReason(fileName) === "colors-and-type" ? `[live-tokens] ${notAThemeError(fileName)} It is left out of the theme list.` : `[live-tokens] Theme "${fileName}" is unreadable and was left out of the list.`
+        );
+        continue;
+      }
+      files.push({
+        name: read.theme.name,
         fileName,
-        updatedAt: data?.updatedAt || "",
+        updatedAt: read.theme.updatedAt,
         isActive: fileName === activeFile,
+        isProduction: fileName === productionFile,
         isProtected: fileName === "default"
-      };
-    });
-    jsonResponse(res, 200, { files, activeFile });
+      });
+    }
+    jsonResponse(res, 200, { files, activeFile, productionFile });
   }
-  async function handleGetActiveManifest({ res }) {
-    const activeFile = manifestsResource.getActiveName();
-    const raw = manifestsResource.readJson(activeFile);
-    if (!raw) {
-      jsonResponse(res, 404, { error: "Active manifest not found" });
+  async function handleGetProductionTheme({ res }) {
+    const fileName = themesResource.getProductionName();
+    const read = readTheme(fileName);
+    if (!read) {
+      respondUnreadableTheme(res, fileName, "Production theme not found");
+      return;
+    }
+    jsonResponse(res, 200, { ...read.theme, _fileName: fileName });
+  }
+  async function handleGetActiveTheme({ res }) {
+    const activeFile = themesResource.getActiveName();
+    const read = readTheme(activeFile);
+    if (!read) {
+      respondUnreadableTheme(res, activeFile, "Active theme not found");
       return;
     }
-    const data = raw;
-    data._fileName = activeFile;
-    jsonResponse(res, 200, data);
+    jsonResponse(res, 200, { ...read.theme, _fileName: activeFile });
   }
-  async function handleSetActiveManifest({ req, res }) {
+  async function handleSetActiveTheme({ req, res }) {
     const body = JSON.parse(await readBody(req));
     const fileName = sanitizeFileName(body.name || "default");
-    if (manifestsResource.existingPath(fileName) === null) {
-      jsonResponse(res, 404, { error: "Manifest not found" });
+    if (themesResource.existingPath(fileName) === null) {
+      jsonResponse(res, 404, { error: "Theme not found" });
       return;
     }
-    manifestsResource.setActiveName(fileName);
+    themesResource.setActiveName(fileName);
     jsonResponse(res, 200, { ok: true, activeFile: fileName });
   }
-  async function handleManifestByName({ params, req, res }) {
+  async function handleThemeByName({ params, req, res }) {
     const [fileName] = params;
-    const filePath = manifestsResource.filePath(fileName);
+    if (rejectReservedName(res, fileName)) return;
+    const filePath = themesResource.filePath(fileName);
     if (req.method === "GET") {
-      const raw = manifestsResource.readJson(fileName);
-      if (!raw) {
-        jsonResponse(res, 404, { error: "Not found" });
+      const read = readTheme(fileName);
+      if (!read) {
+        respondUnreadableTheme(res, fileName, "Not found");
         return;
       }
-      const data = raw;
-      data._fileName = fileName;
-      jsonResponse(res, 200, data);
+      jsonResponse(res, 200, { ...read.theme, _fileName: fileName });
       return;
     }
     if (req.method === "PUT") {
       if (fileName === "default") {
-        jsonResponse(res, 403, { error: "Cannot overwrite the default manifest" });
+        jsonResponse(res, 403, { error: "Cannot overwrite the default theme" });
         return;
       }
       const body = JSON.parse(await readBody(req));
-      body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (fs2.existsSync(filePath)) {
+      const { theme } = normalizeTheme(body, diskThemeResolvers);
+      theme.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+      if (fs.existsSync(filePath)) {
         try {
-          const existing = JSON.parse(fs2.readFileSync(filePath, "utf-8"));
-          if (existing.createdAt) body.createdAt = existing.createdAt;
+          const existing = JSON.parse(fs.readFileSync(filePath, "utf-8"));
+          if (existing.createdAt) theme.createdAt = existing.createdAt;
         } catch {
         }
       }
-      if (!body.createdAt) body.createdAt = body.updatedAt;
-      fs2.writeFileSync(filePath, JSON.stringify(body, null, 2));
+      writeTheme(fileName, theme);
       jsonResponse(res, 200, { ok: true, fileName });
       return;
     }
     if (req.method === "DELETE") {
       if (fileName === "default") {
-        jsonResponse(res, 403, { error: "Cannot delete the default manifest" });
+        jsonResponse(res, 403, { error: "Cannot delete the default theme" });
+        return;
+      }
+      if (fileName === themesResource.getProductionName()) {
+        jsonResponse(res, 403, {
+          error: "Cannot delete the theme that is in production. Adopt another theme first.",
+          code: "PRODUCTION_THEME"
+        });
         return;
       }
-      if (fs2.existsSync(filePath)) {
-        fs2.unlinkSync(filePath);
-        if (manifestsResource.getActiveName() === fileName) {
-          manifestsResource.setActiveName("default");
+      if (fs.existsSync(filePath)) {
+        fs.unlinkSync(filePath);
+        if (themesResource.existingPath(fileName) === null && themesResource.getActiveName() === fileName) {
+          themesResource.setActiveName("default");
         }
+      } else if (themesResource.existingPath(fileName)) {
+        jsonResponse(res, 403, {
+          error: "Cannot delete a theme shipped with the package. Saving it creates a local copy; deleting that copy restores the shipped version.",
+          code: "PACKAGE_THEME"
+        });
+        return;
       }
       jsonResponse(res, 200, { ok: true });
       return;
     }
   }
-  async function handleApplyManifest({ params, res }) {
+  async function handleApplyTheme({ params, res }) {
     const [fileName] = params;
-    const manifest = manifestsResource.readJson(fileName);
-    if (!manifest) {
-      jsonResponse(res, 404, { error: "Manifest not found" });
+    if (rejectReservedName(res, fileName)) return;
+    const read = readTheme(fileName);
+    if (!read) {
+      respondUnreadableTheme(res, fileName, "Theme not found");
       return;
     }
-    const themeName = sanitizeFileName(manifest.theme || "default");
-    if (themesResource.existingPath(themeName) === null) {
-      jsonResponse(res, 422, { error: `Manifest references missing theme: ${themeName}` });
+    const { theme } = read;
+    const isDefault = fileName === "default";
+    if (!isDefault && !theme.colorsAndType) {
+      jsonResponse(res, 422, { error: "This theme carries no colors and type" });
       return;
     }
-    const knownComponents = new Set(listComponentNames());
-    const componentConfigs = manifest.componentConfigs ?? {};
-    const resolvedConfigs = {};
-    const apply = [];
-    for (const [comp, configFile] of Object.entries(componentConfigs)) {
-      if (!knownComponents.has(comp)) continue;
-      const sanitized = sanitizeFileName(String(configFile) || "default");
-      const r = componentResource(comp);
-      if (r.existingPath(sanitized) === null) {
-        jsonResponse(res, 422, {
-          error: `Manifest references missing config: ${comp}/${sanitized}`
-        });
-        return;
-      }
-      apply.push([comp, sanitized]);
-    }
-    themesResource.setActiveName(themeName);
-    themesResource.setProductionName(themeName);
-    syncTokensToCss(themeName);
-    syncFontsToCss(themeName);
-    const themeData = normalizeTheme(themesResource.readJson(themeName));
-    themeData._fileName = themeName;
-    for (const [comp, configFile] of apply) {
+    if (isDefault) colorsAndTypeResource.clearWorking();
+    else colorsAndTypeResource.writeWorking(theme.colorsAndType);
+    const knownComponents = listComponentNames();
+    for (const comp of knownComponents) {
+      const embedded = isDefault ? void 0 : theme.componentConfigs[comp];
       const r = componentResource(comp);
-      r.setActiveName(configFile);
-      r.setProductionName(configFile);
-      const cfg = readComponentConfig(comp, configFile);
-      if (cfg) resolvedConfigs[comp] = { ...cfg, _fileName: configFile };
+      if (embedded) r.writeWorking({ ...embedded, component: comp });
+      else r.clearWorking();
     }
+    themesResource.setActiveName(fileName);
+    const resolvedConfigs = {};
     for (const comp of knownComponents) {
-      if (resolvedConfigs[comp]) continue;
-      const activeName = componentResource(comp).getActiveName();
-      const cfg = readComponentConfig(comp, activeName);
-      if (cfg) resolvedConfigs[comp] = { ...cfg, _fileName: activeName };
+      const resolved = resolveLiveComponentConfig(comp, theme);
+      if (resolved) resolvedConfigs[comp] = { ...resolved.data, _fileName: fileName, _source: resolved.source };
     }
-    syncComponentsToCss();
-    manifestsResource.setActiveName(fileName);
+    const resolvedColorsAndType = resolveLiveColorsAndType(theme);
+    const skippedComponents = Object.keys(theme.componentConfigs).filter(
+      (comp) => !knownComponents.includes(comp)
+    );
     jsonResponse(res, 200, {
       ok: true,
-      manifest: { ...manifest, _fileName: fileName },
-      theme: themeData,
-      componentConfigs: resolvedConfigs
+      theme: { ...theme, _fileName: fileName },
+      colorsAndType: resolvedColorsAndType && {
+        ...resolvedColorsAndType.data,
+        _fileName: fileName,
+        _source: resolvedColorsAndType.source
+      },
+      componentConfigs: resolvedConfigs,
+      skippedComponents
     });
   }
-  async function handleExportManifest({ params, res }) {
+  async function handleExportTheme({ params, res }) {
     const [fileName] = params;
-    const manifest = manifestsResource.readJson(fileName);
-    if (!manifest) {
-      jsonResponse(res, 404, { error: "Manifest not found" });
-      return;
-    }
-    const themeName = sanitizeFileName(manifest.theme || "default");
-    const theme = themesResource.readJson(themeName);
-    if (!theme) {
-      jsonResponse(res, 422, { error: `Manifest references missing theme: ${themeName}` });
+    if (rejectReservedName(res, fileName)) return;
+    const read = readTheme(fileName);
+    if (!read) {
+      respondUnreadableTheme(res, fileName, "Theme not found");
       return;
     }
-    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 cfg = componentResource(comp).readJson(sanitized);
-      if (!cfg) {
-        jsonResponse(res, 422, {
-          error: `Manifest references missing config: ${comp}/${sanitized}`
-        });
-        return;
-      }
-      componentConfigs[`${comp}/${sanitized}`] = cfg;
-    }
     const bundle = {
-      kind: "manifest-bundle",
-      schemaVersion: 1,
+      kind: "theme-bundle",
+      schemaVersion: THEME_SCHEMA_VERSION,
       liveTokensVersion: PKG_VERSION,
       exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
-      manifest,
-      theme,
-      componentConfigs
+      manifest: read.theme
     };
     res.statusCode = 200;
     res.setHeader("Content-Type", "application/json");
@@ -1622,7 +1119,7 @@ ${lines.join("\n")}
   function nextAvailableName2(exists, baseName) {
     return nextAvailableName(exists, sanitizeFileName(baseName));
   }
-  async function handleImportManifest({ req, res }) {
+  async function handleImportTheme({ req, res }) {
     let bundle;
     try {
       bundle = JSON.parse(await readBody(req));
@@ -1630,117 +1127,112 @@ ${lines.join("\n")}
       jsonResponse(res, 400, { error: "Body is not valid JSON" });
       return;
     }
-    if (!bundle || bundle.kind !== "manifest-bundle") {
+    if (!bundle || !Object.values(BUNDLE_KIND_BY_VERSION).includes(bundle.kind)) {
       jsonResponse(res, 400, {
-        error: "Not a manifest bundle (kind discriminator missing or wrong)"
+        error: "Not a theme bundle (kind discriminator missing or wrong)"
       });
       return;
     }
-    if (bundle.schemaVersion !== 1) {
+    if (bundle.kind !== BUNDLE_KIND_BY_VERSION[bundle.schemaVersion]) {
       jsonResponse(res, 400, {
-        error: `Unsupported bundle schemaVersion: ${bundle.schemaVersion}`
+        error: `Unsupported bundle: kind "${bundle.kind}" with schemaVersion ${bundle.schemaVersion}`
       });
       return;
     }
-    if (!bundle.manifest || !bundle.theme || !bundle.componentConfigs) {
-      jsonResponse(res, 400, { error: "Bundle missing manifest / theme / componentConfigs" });
+    if (!bundle.manifest) {
+      jsonResponse(res, 400, { error: "Bundle missing theme" });
+      return;
+    }
+    const bundleResolvers = {
+      readColorsAndType: () => bundle.theme,
+      readComponentConfig: (comp, name) => bundle.componentConfigs?.[`${comp}/${name}`],
+      normalizeColorsAndType: (colorsAndType) => normalizeColorsAndType(colorsAndType)
+    };
+    const { theme, dropped } = normalizeTheme(bundle.manifest, bundleResolvers);
+    if (theme.colorsAndType) theme.colorsAndType = normalizeColorsAndType(theme.colorsAndType);
+    if (!theme.colorsAndType) {
+      jsonResponse(res, 400, { error: "Bundle carries no theme" });
       return;
     }
+    theme.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
     const renames = {};
-    const now = (/* @__PURE__ */ new Date()).toISOString();
-    const originalThemeName = sanitizeFileName(bundle.manifest.theme || "default");
-    const finalThemeName = nextAvailableName2(
+    const originalName = sanitizeFileName(theme.name || "imported");
+    const finalName = nextAvailableName2(
       (n) => themesResource.existingPath(n) !== null,
-      originalThemeName
+      originalName
     );
-    if (finalThemeName !== originalThemeName) {
-      renames[`theme:${originalThemeName}`] = finalThemeName;
+    if (finalName !== originalName) {
+      renames[`theme:${originalName}`] = finalName;
     }
-    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.existingPath(n) !== null,
-        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));
+    writeTheme(finalName, theme);
+    jsonResponse(res, 200, {
+      ok: true,
+      theme: finalName,
+      renames,
+      dropped
+    });
+  }
+  async function handleAdoptLook({ res }) {
+    const activeName = themesResource.getActiveName();
+    if (activeName === "default") {
+      jsonResponse(res, 409, {
+        error: "Active theme is protected. Save As first.",
+        code: "ACTIVE_IS_PROTECTED"
+      });
+      return;
     }
-    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.existingPath(n) !== null,
-      originalManifestName
-    );
-    if (finalManifestName !== originalManifestName) {
-      renames[`manifest:${originalManifestName}`] = finalManifestName;
+    const read = readTheme(activeName);
+    if (!read) {
+      respondUnreadableTheme(res, activeName, "Active theme not found");
+      return;
     }
-    manifestsResource.ensureDir();
-    fs2.writeFileSync(
-      manifestsResource.filePath(finalManifestName),
-      JSON.stringify(rewrittenManifest, null, 2)
-    );
+    themesResource.setProductionName(activeName);
+    regenerateTokensCss();
+    syncFontsToCss(read.theme.colorsAndType);
     jsonResponse(res, 200, {
       ok: true,
-      manifest: finalManifestName,
-      renames
+      productionTheme: {
+        fileName: activeName,
+        name: read.theme.name,
+        updatedAt: read.theme.updatedAt
+      }
     });
   }
   function methodNotAllowed({ res }) {
     jsonResponse(res, 405, { error: "Method not allowed" });
   }
+  let legacyLayout = null;
   const routes = [
-    // Themes — list / active / production are exact strings, must run before THEME_BY_NAME_REGEX
-    { method: "GET", pattern: THEMES_ROUTE, handler: handleListThemes },
-    { method: "GET", pattern: THEMES_ACTIVE_ROUTE, handler: handleGetActiveTheme },
-    { method: "PUT", pattern: THEMES_ACTIVE_ROUTE, handler: handleSetActiveTheme },
-    { method: "GET", pattern: THEMES_PRODUCTION_ROUTE, handler: handleGetProductionTheme },
-    { method: "PUT", pattern: THEMES_PRODUCTION_ROUTE, handler: handleSetProductionTheme },
+    // Colors and type — list / active / production / working are exact strings;
+    // they must run before COLORS_AND_TYPE_BY_NAME_REGEX
+    { method: "GET", pattern: COLORS_AND_TYPE_ROUTE, handler: handleListColorsAndType },
+    { method: "GET", pattern: COLORS_AND_TYPE_ACTIVE_ROUTE, handler: handleGetActiveColorsAndType },
+    { method: "PUT", pattern: COLORS_AND_TYPE_ACTIVE_ROUTE, handler: methodNotAllowed },
+    { method: "GET", pattern: COLORS_AND_TYPE_PRODUCTION_ROUTE, handler: methodNotAllowed },
+    { method: "PUT", pattern: COLORS_AND_TYPE_PRODUCTION_ROUTE, handler: methodNotAllowed },
+    { method: "POST", pattern: COLORS_AND_TYPE_PRODUCTION_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: COLORS_AND_TYPE_PRODUCTION_ROUTE, handler: methodNotAllowed },
+    { method: "GET", pattern: COLORS_AND_TYPE_WORKING_ROUTE, handler: handleGetWorkingColorsAndType },
+    { method: "PUT", pattern: COLORS_AND_TYPE_WORKING_ROUTE, handler: handleSetWorkingColorsAndType },
+    { method: "DELETE", pattern: COLORS_AND_TYPE_WORKING_ROUTE, handler: handleClearWorkingColorsAndType },
+    { method: "POST", pattern: COLORS_AND_TYPE_WORKING_ROUTE, handler: methodNotAllowed },
     // Component configs — list of components
     { method: "GET", pattern: COMPONENT_CONFIGS_ROUTE, handler: handleListComponents },
     // Component configs — :comp/active (must precede :comp/:name)
     { method: "GET", pattern: COMP_ACTIVE_REGEX, handler: handleGetComponentActive },
-    { method: "PUT", pattern: COMP_ACTIVE_REGEX, handler: handleSetComponentActive },
+    { method: "PUT", pattern: COMP_ACTIVE_REGEX, handler: methodNotAllowed },
     { method: "POST", pattern: COMP_ACTIVE_REGEX, handler: methodNotAllowed },
     { method: "DELETE", pattern: COMP_ACTIVE_REGEX, handler: methodNotAllowed },
-    // Component configs — :comp/production (must precede :comp/:name)
-    { method: "GET", pattern: COMP_PRODUCTION_REGEX, handler: handleGetComponentProduction },
-    { method: "PUT", pattern: COMP_PRODUCTION_REGEX, handler: handleSetComponentProduction },
+    // Component configs — :comp/production, retired with the per-layer pointers
+    { method: "GET", pattern: COMP_PRODUCTION_REGEX, handler: methodNotAllowed },
+    { method: "PUT", pattern: COMP_PRODUCTION_REGEX, handler: methodNotAllowed },
     { method: "POST", pattern: COMP_PRODUCTION_REGEX, handler: methodNotAllowed },
     { method: "DELETE", pattern: COMP_PRODUCTION_REGEX, handler: methodNotAllowed },
+    // Component configs — :comp/working (must precede :comp/:name)
+    { method: "GET", pattern: COMP_WORKING_REGEX, handler: handleGetComponentWorking },
+    { method: "PUT", pattern: COMP_WORKING_REGEX, handler: handleSetComponentWorking },
+    { method: "DELETE", pattern: COMP_WORKING_REGEX, handler: handleClearComponentWorking },
+    { method: "POST", pattern: COMP_WORKING_REGEX, handler: methodNotAllowed },
     // Component configs — :comp/:name (must precede :comp listing)
     { method: "GET", pattern: COMP_BY_NAME_REGEX, handler: handleComponentConfigByName },
     { method: "PUT", pattern: COMP_BY_NAME_REGEX, handler: handleComponentConfigByName },
@@ -1748,33 +1240,44 @@ ${lines.join("\n")}
     { method: "POST", pattern: COMP_BY_NAME_REGEX, handler: methodNotAllowed },
     // Component configs — list configs for :comp (broadest, runs last among comp routes)
     { method: "GET", pattern: COMP_LIST_REGEX, handler: handleListComponentConfigs },
+    // Colors and type — :name CRUD (broadest colors-and-type route, runs last)
+    { method: "GET", pattern: COLORS_AND_TYPE_BY_NAME_REGEX, handler: handleColorsAndTypeByName },
+    { method: "PUT", pattern: COLORS_AND_TYPE_BY_NAME_REGEX, handler: handleColorsAndTypeByName },
+    { method: "DELETE", pattern: COLORS_AND_TYPE_BY_NAME_REGEX, handler: handleColorsAndTypeByName },
+    // Themes — list / active / production are exact strings, must run before regexes
+    { method: "GET", pattern: THEMES_ROUTE, handler: handleListThemes },
+    { method: "GET", pattern: THEMES_ACTIVE_ROUTE, handler: handleGetActiveTheme },
+    { method: "PUT", pattern: THEMES_ACTIVE_ROUTE, handler: handleSetActiveTheme },
+    { method: "GET", pattern: THEMES_PRODUCTION_ROUTE, handler: handleGetProductionTheme },
+    // Adopt is the one door that moves the production pointer; naming a theme
+    // here would be a second, silent way to publish.
+    { method: "PUT", pattern: THEMES_PRODUCTION_ROUTE, handler: methodNotAllowed },
+    { method: "POST", pattern: THEMES_PRODUCTION_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: THEMES_PRODUCTION_ROUTE, handler: methodNotAllowed },
+    // Themes — exact import route runs before :name regexes
+    { method: "POST", pattern: THEME_IMPORT_ROUTE, handler: handleImportTheme },
+    { method: "PUT", pattern: THEME_IMPORT_ROUTE, handler: methodNotAllowed },
+    { method: "GET", pattern: THEME_IMPORT_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: THEME_IMPORT_ROUTE, handler: methodNotAllowed },
+    // Themes — :name/apply (more specific than :name)
+    { method: "PUT", pattern: THEME_APPLY_REGEX, handler: handleApplyTheme },
+    { method: "POST", pattern: THEME_APPLY_REGEX, handler: methodNotAllowed },
+    { method: "GET", pattern: THEME_APPLY_REGEX, handler: methodNotAllowed },
+    { method: "DELETE", pattern: THEME_APPLY_REGEX, handler: methodNotAllowed },
+    // Themes — :name/export (more specific than :name)
+    { method: "GET", pattern: THEME_EXPORT_REGEX, handler: handleExportTheme },
+    { method: "PUT", pattern: THEME_EXPORT_REGEX, handler: methodNotAllowed },
+    { method: "POST", pattern: THEME_EXPORT_REGEX, handler: methodNotAllowed },
+    { method: "DELETE", pattern: THEME_EXPORT_REGEX, handler: methodNotAllowed },
     // Themes — :name CRUD (broadest theme route, runs last)
     { method: "GET", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "PUT", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "DELETE", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
-    // Manifests — list / active are exact strings, must run before regexes
-    { 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 },
-    { method: "DELETE", pattern: MANIFEST_BY_NAME_REGEX, handler: handleManifestByName }
+    // Production — the whole-look adopt door
+    { method: "PUT", pattern: PRODUCTION_ROUTE, handler: handleAdoptLook },
+    { method: "GET", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
+    { method: "POST", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed }
   ];
   return {
     name: "theme-file-api",
@@ -1788,19 +1291,42 @@ ${lines.join("\n")}
       };
     },
     configureServer(server) {
-      ensureThemesDir();
-      ensureComponentConfigsDir();
-      ensureManifestsDir();
-      regenerateTokensCss();
-      if (opts.autoMigrate) autoMigrateAdditive((msg) => server.config.logger.info(msg));
-      warnOnTokenDrift((msg) => server.config.logger.warn(msg));
+      legacyLayout = detectLegacyLayout({
+        dataDir: dataDirs.dataDir,
+        colorsAndTypeDir: COLORS_AND_TYPE_DIR,
+        themesDir: THEMES_DIR,
+        configuredManifestsDir: dataDirs.legacyManifestsDir
+      });
+      if (legacyLayout) {
+        warnOnLegacyLayout(legacyLayout.evidence, (msg) => server.config.logger.warn(msg));
+      } else {
+        ensureColorsAndTypeDir();
+        ensureComponentConfigsDir();
+        const { productionPointerHeld } = ensureThemesDir((msg) => server.config.logger.warn(msg));
+        if (!productionPointerHeld || !fs.existsSync(GENERATED_CSS_PATH)) regenerateTokensCss();
+        if (opts.autoMigrate) autoMigrateAdditive((msg) => server.config.logger.info(msg));
+        warnOnTokenDrift((msg) => server.config.logger.warn(msg));
+        warnOnLegacyPointers(
+          listLegacyPointers(),
+          productionPointerHeld,
+          (msg) => server.config.logger.warn(msg)
+        );
+      }
       server.middlewares.use(async (req, res, next) => {
+        if (legacyLayout && req.method !== "GET" && (req.url ?? "").startsWith(API_BASE)) {
+          jsonResponse(res, 409, {
+            error: "This project still uses the data layout from 0.47 and earlier. Run `npx live-tokens migrate`, then restart the dev server.",
+            code: "LEGACY_LAYOUT"
+          });
+          return;
+        }
         const handled = await dispatch(req, res, routes);
         if (!handled) next();
       });
     },
     handleHotUpdate(ctx) {
-      const normalized = path2.resolve(ctx.file);
+      if (legacyLayout) return;
+      const normalized = path.resolve(ctx.file);
       if (!COMPONENTS_SCAN_DIRS.some((d) => normalized.startsWith(d))) return;
       if (!normalized.endsWith(".svelte")) return;
       if (!isThemeAwareComponent(normalized)) return;