@motion-proto/live-tokens 0.47.1 → 0.48.0

package/dist-plugin/index.cjs

@@ -38,8 +38,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // vite-plugin/themeFileApi.ts
-var import_fs3 = __toESM(require("fs"), 1);
-var import_path3 = __toESM(require("path"), 1);
+var import_fs4 = __toESM(require("fs"), 1);
+var import_path4 = __toESM(require("path"), 1);
 
 // src/editor/core/themes/parsers/globalRootBlock.ts
 function extractGlobalRootBody(source) {
@@ -62,7 +62,7 @@ function parseColorOpacity(value) {
 
 // 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";
+  return name.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9\-_]/g, "").replace(/-+/g, "-").replace(/^[-_]+|-+$/g, "") || "unnamed";
 }
 
 // src/editor/core/palettes/oklch.ts
@@ -349,7 +349,33 @@ function nearestPaletteStep(lightnessCurve, baseL) {
   }
   return best;
 }
-function setCurveAnchor(curve, x, y) {
+function setCurveAnchor(curve, x, y, smooth = false) {
+  if (smooth && curve.length === 2) {
+    const [p0, p2] = curve;
+    const mid = { x, y, inDx: 0, inDy: 0, outDx: 0, outDy: 0 };
+    if (Math.abs(p0.x - x) < 0.5) {
+      return {
+        curve: [tangentAnchor(x, y, null, p2), tangentAnchor(p2.x, p2.y, mid, null)],
+        displacedY: p0.y,
+        priorEndpoints: [p0, p2]
+      };
+    }
+    if (Math.abs(p2.x - x) < 0.5) {
+      return {
+        curve: [tangentAnchor(p0.x, p0.y, null, mid), tangentAnchor(x, y, p0, null)],
+        displacedY: p2.y,
+        priorEndpoints: [p0, p2]
+      };
+    }
+    return {
+      curve: [
+        tangentAnchor(p0.x, p0.y, null, mid),
+        tangentAnchor(x, y, p0, p2),
+        tangentAnchor(p2.x, p2.y, mid, null)
+      ],
+      priorEndpoints: [p0, p2]
+    };
+  }
   const existing = curve.findIndex((a) => Math.abs(a.x - x) < 0.5);
   if (existing >= 0) {
     const displacedY = curve[existing].y;
@@ -382,7 +408,8 @@ function fitBetween(a, prev, next) {
   }
   return out;
 }
-function liftCurveAnchor(curve, x, displacedY) {
+function liftCurveAnchor(curve, x, displacedY, priorEndpoints) {
+  if (priorEndpoints) return priorEndpoints;
   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);
@@ -400,6 +427,7 @@ function liftCurveAnchor(curve, x, displacedY) {
 function syncBaseAnchor(cfg) {
   if (cfg.anchorToBase === false) return;
   const prev = cfg.anchorPlacement;
+  const fresh = prev === void 0;
   let lCurve = cfg.lightnessCurve;
   let sCurve = cfg.saturationCurve;
   if (prev) {
@@ -409,11 +437,17 @@ function syncBaseAnchor(cfg) {
   }
   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);
+  const l = setCurveAnchor(lCurve, x, cfg.baseColor.l * 100, fresh);
+  const s = setCurveAnchor(sCurve, x, 100, fresh);
   cfg.lightnessCurve = l.curve;
   cfg.saturationCurve = s.curve;
-  cfg.anchorPlacement = { step, displacedL: l.displacedY, displacedS: s.displacedY };
+  cfg.anchorPlacement = {
+    step,
+    displacedL: l.displacedY,
+    displacedS: s.displacedY,
+    priorLightnessEndpoints: prev?.priorLightnessEndpoints ?? l.priorEndpoints,
+    priorSaturationEndpoints: prev?.priorSaturationEndpoints ?? s.priorEndpoints
+  };
 }
 function computeDerivedOklch(step, base, scaleTitle, scaleCurves, curveOffset) {
   const scale = SCALES.find((s) => s.title === scaleTitle);
@@ -590,6 +624,7 @@ function versionedFileResourceServer(opts) {
   const dir = opts.dir;
   const activePath = import_path.default.join(dir, "_active.json");
   const productionPath = import_path.default.join(dir, "_production.json");
+  const workingPath = import_path.default.join(dir, "_working.json");
   const defaultName = opts.defaultName ?? "default";
   const resolvedDir = import_path.default.resolve(dir);
   const resolvedPackageDir = opts.packageDir ? import_path.default.resolve(opts.packageDir) : null;
@@ -618,6 +653,16 @@ function versionedFileResourceServer(opts) {
     }
     return null;
   }
+  function isPackageFile(name) {
+    if (!resolvedPackageDir) return false;
+    const pkg = import_path.default.join(resolvedPackageDir, `${name}.json`);
+    if (!import_fs.default.existsSync(pkg)) return false;
+    const local = import_path.default.resolve(filePath(name));
+    if (local === pkg) {
+      return opts.packageOwnedNames ? opts.packageOwnedNames.includes(name) : true;
+    }
+    return !import_fs.default.existsSync(local);
+  }
   function readJson(name) {
     const resolved = existingPath(name);
     if (!resolved) return null;
@@ -662,20 +707,44 @@ function versionedFileResourceServer(opts) {
   function setProductionName(name) {
     import_fs.default.writeFileSync(productionPath, JSON.stringify({ productionFile: name }));
   }
+  function hasWorking() {
+    return import_fs.default.existsSync(workingPath);
+  }
+  function readWorking() {
+    if (!import_fs.default.existsSync(workingPath)) return null;
+    const parsed = JSON.parse(import_fs.default.readFileSync(workingPath, "utf-8"));
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      throw new Error(`${workingPath} does not hold a JSON object`);
+    }
+    return parsed;
+  }
+  function writeWorking(data) {
+    ensureDir();
+    import_fs.default.writeFileSync(workingPath, JSON.stringify(data, null, 2));
+  }
+  function clearWorking() {
+    if (import_fs.default.existsSync(workingPath)) import_fs.default.unlinkSync(workingPath);
+  }
   return {
     dir,
     activePath,
     productionPath,
+    workingPath,
     ensureDir,
     ensureMeta,
     filePath,
     existingPath,
+    isPackageFile,
     readJson,
     listNames,
     getActiveName,
     getProductionName,
     setActiveName,
-    setProductionName
+    setProductionName,
+    hasWorking,
+    readWorking,
+    writeWorking,
+    clearWorking
   };
 }
 
@@ -707,6 +776,78 @@ async function dispatch(req, res, routes) {
   return false;
 }
 
+// vite-plugin/themes/normalizeTheme.ts
+var THEME_SCHEMA_VERSION = 3;
+function asObject(value) {
+  return value && typeof value === "object" && !Array.isArray(value) ? value : null;
+}
+function isColorsAndTypeShaped(raw) {
+  const obj = asObject(raw);
+  if (!obj) return false;
+  if ("theme" in obj || "colorsAndType" in obj) return false;
+  return "cssVariables" in obj || "editorConfigs" in obj;
+}
+function stripFileMarker(value) {
+  if (!("_fileName" in value)) return value;
+  const { _fileName, ...rest } = value;
+  return rest;
+}
+function asString(value, fallback) {
+  return typeof value === "string" && value ? value : fallback;
+}
+function migrateEmbeddedKey(src) {
+  const { theme, ...rest } = src;
+  return { ...rest, colorsAndType: theme };
+}
+function normalizeTheme(raw, resolvers) {
+  const input = asObject(raw) ?? {};
+  const migrated = input.schemaVersion !== THEME_SCHEMA_VERSION;
+  const src = migrated ? migrateEmbeddedKey(input) : input;
+  const dropped = [];
+  const now = (/* @__PURE__ */ new Date()).toISOString();
+  const embeddedColorsAndType = asObject(src.colorsAndType);
+  let colorsAndType = null;
+  if (embeddedColorsAndType) {
+    colorsAndType = stripFileMarker(embeddedColorsAndType);
+  } else {
+    const colorsAndTypeName = asString(src.colorsAndType, "default");
+    colorsAndType = asObject(resolvers.readColorsAndType(colorsAndTypeName));
+    if (!colorsAndType) {
+      dropped.push(`colors-and-type:${colorsAndTypeName}`);
+      if (colorsAndTypeName !== "default") colorsAndType = asObject(resolvers.readColorsAndType("default"));
+    }
+    if (colorsAndType) colorsAndType = resolvers.normalizeColorsAndType(stripFileMarker(colorsAndType));
+  }
+  const componentConfigs = {};
+  for (const [comp, value] of Object.entries(asObject(src.componentConfigs) ?? {})) {
+    const embedded = asObject(value);
+    if (embedded) {
+      componentConfigs[comp] = stripFileMarker(embedded);
+      continue;
+    }
+    const configName = asString(value, "default");
+    if (configName === "default") continue;
+    const resolved = asObject(resolvers.readComponentConfig(comp, configName));
+    if (!resolved) {
+      dropped.push(`${comp}/${configName}`);
+      continue;
+    }
+    componentConfigs[comp] = stripFileMarker(resolved);
+  }
+  return {
+    theme: {
+      name: asString(src.name, "Untitled"),
+      createdAt: asString(src.createdAt, now),
+      updatedAt: asString(src.updatedAt, now),
+      schemaVersion: THEME_SCHEMA_VERSION,
+      colorsAndType,
+      componentConfigs
+    },
+    dropped,
+    migrated
+  };
+}
+
 // vite-plugin/files/nameAllocator.ts
 function nextAvailableName(exists, baseName, maxAttempts = 1e3) {
   if (!exists(baseName)) return baseName;
@@ -723,8 +864,9 @@ var import_path2 = __toESM(require("path"), 1);
 var DEFAULT_DATA_DIR = "src/live-tokens/data";
 var KNOWN_CONFIG_KEYS = /* @__PURE__ */ new Set([
   "dataDir",
-  "themesDir",
+  "colorsAndTypeDir",
   "componentConfigsDir",
+  "themesDir",
   "manifestsDir",
   "tokensCssPath"
 ]);
@@ -757,12 +899,69 @@ function resolveDataDirs(opts = {}) {
   const sub = (name) => import_path2.default.resolve(dataDir, name);
   return {
     dataDir,
-    themesDir: opts.themesDir ? import_path2.default.resolve(opts.themesDir) : fileConfig.themesDir ? import_path2.default.resolve(fileConfig.themesDir) : sub("themes"),
+    colorsAndTypeDir: opts.colorsAndTypeDir ? import_path2.default.resolve(opts.colorsAndTypeDir) : fileConfig.colorsAndTypeDir ? import_path2.default.resolve(fileConfig.colorsAndTypeDir) : sub("colors-and-type"),
     componentConfigsDir: opts.componentConfigsDir ? import_path2.default.resolve(opts.componentConfigsDir) : fileConfig.componentConfigsDir ? import_path2.default.resolve(fileConfig.componentConfigsDir) : sub("component-configs"),
-    manifestsDir: opts.manifestsDir ? import_path2.default.resolve(opts.manifestsDir) : fileConfig.manifestsDir ? import_path2.default.resolve(fileConfig.manifestsDir) : sub("manifests")
+    themesDir: opts.themesDir ? import_path2.default.resolve(opts.themesDir) : fileConfig.themesDir ? import_path2.default.resolve(fileConfig.themesDir) : sub("themes"),
+    legacyManifestsDir: fileConfig.manifestsDir ? import_path2.default.resolve(fileConfig.manifestsDir) : void 0
   };
 }
 
+// vite-plugin/files/legacyLayout.ts
+var import_fs3 = __toESM(require("fs"), 1);
+var import_path3 = __toESM(require("path"), 1);
+function jsonFiles(dir) {
+  if (!import_fs3.default.existsSync(dir)) return [];
+  try {
+    return import_fs3.default.readdirSync(dir).filter((f) => f.endsWith(".json")).map((f) => import_path3.default.join(dir, f));
+  } catch {
+    return [];
+  }
+}
+function isDirectory(dir) {
+  try {
+    return import_fs3.default.statSync(dir).isDirectory();
+  } catch {
+    return false;
+  }
+}
+function parseJsonFile(file) {
+  try {
+    return JSON.parse(import_fs3.default.readFileSync(file, "utf-8"));
+  } catch {
+    return null;
+  }
+}
+function holdsATheme(themesDir) {
+  return jsonFiles(themesDir).some((file) => {
+    if (import_path3.default.basename(file).startsWith("_")) return false;
+    const raw = parseJsonFile(file);
+    if (!raw || typeof raw !== "object") return false;
+    return "colorsAndType" in raw || "theme" in raw;
+  });
+}
+function detectLegacyLayout(input) {
+  const manifestsDir = input.configuredManifestsDir ?? import_path3.default.join(input.dataDir, "manifests");
+  const themesHoldAThemeFile = holdsATheme(input.themesDir);
+  if (isDirectory(manifestsDir) && !themesHoldAThemeFile) {
+    return { manifestsDir, evidence: `${manifestsDir} is the pre-0.48 whole-look directory` };
+  }
+  if (jsonFiles(input.colorsAndTypeDir).length > 0) return null;
+  for (const file of jsonFiles(input.themesDir)) {
+    if (import_path3.default.basename(file).startsWith("_")) continue;
+    if (isColorsAndTypeShaped(parseJsonFile(file))) {
+      return { manifestsDir, evidence: `${file} is a colors-and-type file, not a theme` };
+    }
+  }
+  const pointer = ["_active.json", "_production.json"].map((name) => import_path3.default.join(input.themesDir, name)).find((p) => import_fs3.default.existsSync(p));
+  if (pointer && !themesHoldAThemeFile && !import_fs3.default.existsSync(input.colorsAndTypeDir)) {
+    return {
+      manifestsDir,
+      evidence: `${pointer} points at colors and type, and there is no ${import_path3.default.basename(input.colorsAndTypeDir)} directory`
+    };
+  }
+  return null;
+}
+
 // vite-plugin/tokensCssMigrations/cssTokenOps.ts
 var DECL_RE = /(^|[\s;{])(--[a-z0-9-]+)\s*:/gi;
 var REF_RE = /var\(\s*(--[a-z0-9-]+)/gi;
@@ -1163,14 +1362,14 @@ var import_node_url = require("url");
 var import_meta = {};
 var PKG_VERSION = (() => {
   try {
-    let dir = import_path3.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url));
+    let dir = import_path4.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url));
     for (let i = 0; i < 4; i++) {
-      const p = import_path3.default.join(dir, "package.json");
-      if (import_fs3.default.existsSync(p)) {
-        const json = JSON.parse(import_fs3.default.readFileSync(p, "utf-8"));
+      const p = import_path4.default.join(dir, "package.json");
+      if (import_fs4.default.existsSync(p)) {
+        const json = JSON.parse(import_fs4.default.readFileSync(p, "utf-8"));
         if (json?.name === "@motion-proto/live-tokens") return json.version ?? "";
       }
-      const up = import_path3.default.dirname(dir);
+      const up = import_path4.default.dirname(dir);
       if (up === dir) break;
       dir = up;
     }
@@ -1178,65 +1377,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 = import_path3.default.resolve(opts.tokensCssPath);
-  const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? import_path3.default.resolve(opts.tokensGeneratedCssPath) : import_path3.default.join(dataDirs.dataDir, "tokens.generated.css");
-  const FONTS_CSS_PATH = opts.fontsCssPath ? import_path3.default.resolve(opts.fontsCssPath) : import_path3.default.join(import_path3.default.dirname(CSS_PATH), "fonts.css");
+  const THEMES_DIR = dataDirs.themesDir;
+  const CSS_PATH = import_path4.default.resolve(opts.tokensCssPath);
+  const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? import_path4.default.resolve(opts.tokensGeneratedCssPath) : import_path4.default.join(dataDirs.dataDir, "tokens.generated.css");
+  const FONTS_CSS_PATH = opts.fontsCssPath ? import_path4.default.resolve(opts.fontsCssPath) : import_path4.default.join(import_path4.default.dirname(CSS_PATH), "fonts.css");
   const API_BASE = opts.apiBase ?? "/api/live-tokens";
-  const consumerComponentDirs = opts.componentsSrcDir ? [import_path3.default.resolve(opts.componentsSrcDir)] : [import_path3.default.resolve("src/components"), import_path3.default.resolve("src/system/components")];
-  const packageComponentsDir = import_path3.default.resolve(
-    import_path3.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)),
+  const consumerComponentDirs = opts.componentsSrcDir ? [import_path4.default.resolve(opts.componentsSrcDir)] : [import_path4.default.resolve("src/components"), import_path4.default.resolve("src/system/components")];
+  const packageComponentsDir = import_path4.default.resolve(
+    import_path4.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)),
     "..",
     "src",
     "system",
     "components"
   );
-  const packageDataDir = import_path3.default.resolve(
-    import_path3.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)),
+  const packageDataDir = import_path4.default.resolve(
+    import_path4.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url)),
     "..",
     "src",
     "live-tokens",
     "data"
   );
-  const packageThemesDir = import_path3.default.join(packageDataDir, "themes");
-  const packageManifestsDir = import_path3.default.join(packageDataDir, "manifests");
-  const packageComponentConfigsDir = import_path3.default.join(packageDataDir, "component-configs");
+  const packageColorsAndTypeDir = import_path4.default.join(packageDataDir, "colors-and-type");
+  const packageThemesDir = import_path4.default.join(packageDataDir, "themes");
+  const packageComponentConfigsDir = import_path4.default.join(packageDataDir, "component-configs");
+  function shippedColorsAndTypeNames(dataDir) {
+    try {
+      const pkgRoot = import_path4.default.resolve(dataDir, "..", "..", "..");
+      const pkg = JSON.parse(import_fs4.default.readFileSync(import_path4.default.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) => import_path4.default.basename(f, ".json"));
+    } catch {
+      return [];
+    }
+  }
   const COMPONENTS_SCAN_DIRS = [...consumerComponentDirs];
-  if (!COMPONENTS_SCAN_DIRS.includes(packageComponentsDir) && import_fs3.default.existsSync(packageComponentsDir)) {
+  if (!COMPONENTS_SCAN_DIRS.includes(packageComponentsDir) && import_fs4.default.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: import_path3.default.join(COMPONENT_CONFIGS_DIR, comp),
-        packageDir: import_path3.default.join(packageComponentConfigsDir, comp)
+        dir: import_path4.default.join(COMPONENT_CONFIGS_DIR, comp),
+        packageDir: import_path4.default.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) => {
@@ -1251,25 +1464,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 ?? []) {
@@ -1295,21 +1516,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 = `${import_path4.default.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)) {
@@ -1320,12 +1548,10 @@ function themeFileApi(opts) {
       }
     }
     let componentOverrideCount = 0;
-    if (import_fs3.default.existsSync(COMPONENT_CONFIGS_DIR)) {
+    if (import_fs4.default.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 = [];
@@ -1336,7 +1562,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)};`);
         }
@@ -1354,24 +1580,20 @@ function themeFileApi(opts) {
         lines.push("");
       }
     }
-    if (!import_fs3.default.existsSync(import_path3.default.dirname(GENERATED_CSS_PATH))) {
-      import_fs3.default.mkdirSync(import_path3.default.dirname(GENERATED_CSS_PATH), { recursive: true });
+    if (!import_fs4.default.existsSync(import_path4.default.dirname(GENERATED_CSS_PATH))) {
+      import_fs4.default.mkdirSync(import_path4.default.dirname(GENERATED_CSS_PATH), { recursive: true });
     }
-    import_fs3.default.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
+    import_fs4.default.writeFileSync(GENERATED_CSS_PATH, lines.join("\n"));
     console.log(
-      `[regenerateTokensCss] Wrote ${import_path3.default.basename(GENERATED_CSS_PATH)} (${themeVarCount} theme vars, ${componentOverrideCount} component overrides)`
+      `[regenerateTokensCss] Wrote ${import_path4.default.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);
@@ -1391,11 +1613,11 @@ function themeFileApi(opts) {
       lines.push("");
     }
     const content = lines.join("\n");
-    if (!import_fs3.default.existsSync(import_path3.default.dirname(FONTS_CSS_PATH))) {
-      import_fs3.default.mkdirSync(import_path3.default.dirname(FONTS_CSS_PATH), { recursive: true });
+    if (!import_fs4.default.existsSync(import_path4.default.dirname(FONTS_CSS_PATH))) {
+      import_fs4.default.mkdirSync(import_path4.default.dirname(FONTS_CSS_PATH), { recursive: true });
     }
-    import_fs3.default.writeFileSync(FONTS_CSS_PATH, content);
-    console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${import_path3.default.basename(FONTS_CSS_PATH)}`);
+    import_fs4.default.writeFileSync(FONTS_CSS_PATH, content);
+    console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${import_path4.default.basename(FONTS_CSS_PATH)}`);
   }
   function extractAliasDeclarations(body) {
     const aliases = {};
@@ -1410,11 +1632,11 @@ function themeFileApi(opts) {
     return aliases;
   }
   function componentNameFromFile(filePath) {
-    return import_path3.default.basename(filePath, ".svelte").toLowerCase();
+    return import_path4.default.basename(filePath, ".svelte").toLowerCase();
   }
   function isThemeAwareComponent(filePath) {
     try {
-      const source = import_fs3.default.readFileSync(filePath, "utf-8");
+      const source = import_fs4.default.readFileSync(filePath, "utf-8");
       return /:global\(:root\)\s*\{/.test(source);
     } catch {
       return false;
@@ -1423,10 +1645,10 @@ function themeFileApi(opts) {
   function listComponentSourcePaths() {
     const byName = /* @__PURE__ */ new Map();
     for (const dir of COMPONENTS_SCAN_DIRS) {
-      if (!import_fs3.default.existsSync(dir)) continue;
-      for (const f of import_fs3.default.readdirSync(dir)) {
+      if (!import_fs4.default.existsSync(dir)) continue;
+      for (const f of import_fs4.default.readdirSync(dir)) {
         if (!f.endsWith(".svelte")) continue;
-        const full = import_path3.default.join(dir, f);
+        const full = import_path4.default.join(dir, f);
         if (!isThemeAwareComponent(full)) continue;
         const name = componentNameFromFile(f);
         if (!byName.has(name)) byName.set(name, full);
@@ -1440,18 +1662,18 @@ function themeFileApi(opts) {
   function warnOnTokenDrift(log) {
     let tokensCss = "";
     try {
-      tokensCss = import_fs3.default.readFileSync(CSS_PATH, "utf-8");
+      tokensCss = import_fs4.default.readFileSync(CSS_PATH, "utf-8");
     } catch {
       return;
     }
     let generatedCss = "";
     try {
-      generatedCss = import_fs3.default.readFileSync(GENERATED_CSS_PATH, "utf-8");
+      generatedCss = import_fs4.default.readFileSync(GENERATED_CSS_PATH, "utf-8");
     } catch {
     }
     const componentSources = listComponentSourcePaths().map((p) => ({
       name: componentNameFromFile(p),
-      source: import_fs3.default.readFileSync(p, "utf-8")
+      source: import_fs4.default.readFileSync(p, "utf-8")
     }));
     const missing = validateTokensCss({ tokensCss, generatedCss, componentSources });
     if (missing.length === 0) return;
@@ -1459,7 +1681,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 ${import_path3.default.relative(process.cwd(), CSS_PATH)}:
+      `[live-tokens] ${missing.length} token(s) referenced by components are not defined in ${import_path4.default.relative(process.cwd(), CSS_PATH)}:
 ${lines.join("\n")}
   These render as blank/empty editor slots. Run \`npx live-tokens migrate\` to reconcile.`
     );
@@ -1467,37 +1689,37 @@ ${lines.join("\n")}
   function autoMigrateAdditive(log) {
     let before = "";
     try {
-      before = import_fs3.default.readFileSync(CSS_PATH, "utf-8");
+      before = import_fs4.default.readFileSync(CSS_PATH, "utf-8");
     } catch {
       return;
     }
     const { css, applied, changed } = runAdditiveTokensCssMigrations(before);
     if (!changed) return;
-    import_fs3.default.writeFileSync(CSS_PATH, css);
+    import_fs4.default.writeFileSync(CSS_PATH, css);
     log(
-      `[live-tokens] autoMigrate applied ${applied.length} additive migration(s) to ${import_path3.default.relative(process.cwd(), CSS_PATH)}: ${applied.join(", ")}. Review the diff in git.`
+      `[live-tokens] autoMigrate applied ${applied.length} additive migration(s) to ${import_path4.default.relative(process.cwd(), CSS_PATH)}: ${applied.join(", ")}. Review the diff in git.`
     );
   }
   function generateDefaultConfig(comp, sourcePath) {
-    if (!import_fs3.default.existsSync(sourcePath)) return;
+    if (!import_fs4.default.existsSync(sourcePath)) return;
     const r = componentResource(comp);
     r.ensureDir();
     const defaultPath = r.filePath("default");
-    const sourceStat = import_fs3.default.statSync(sourcePath);
-    if (import_fs3.default.existsSync(defaultPath)) {
-      const defaultStat = import_fs3.default.statSync(defaultPath);
+    const sourceStat = import_fs4.default.statSync(sourcePath);
+    if (import_fs4.default.existsSync(defaultPath)) {
+      const defaultStat = import_fs4.default.statSync(defaultPath);
       if (defaultStat.mtimeMs >= sourceStat.mtimeMs) return;
     }
-    const source = import_fs3.default.readFileSync(sourcePath, "utf-8");
+    const source = import_fs4.default.readFileSync(sourcePath, "utf-8");
     const body = extractGlobalRootBody(source);
     const aliases = extractAliasDeclarations(body);
     const now = (/* @__PURE__ */ new Date()).toISOString();
     let createdAt = now;
     let existingUpdatedAt;
     let existingAliases;
-    if (import_fs3.default.existsSync(defaultPath)) {
+    if (import_fs4.default.existsSync(defaultPath)) {
       try {
-        const existing = JSON.parse(import_fs3.default.readFileSync(defaultPath, "utf-8"));
+        const existing = JSON.parse(import_fs4.default.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") {
@@ -1523,57 +1745,191 @@ ${lines.join("\n")}
     };
     if (aliasesUnchanged && existingUpdatedAt) {
       const t = /* @__PURE__ */ new Date();
-      import_fs3.default.utimesSync(defaultPath, t, t);
+      import_fs4.default.utimesSync(defaultPath, t, t);
       return;
     }
-    import_fs3.default.writeFileSync(defaultPath, JSON.stringify(defaultConfig, null, 2));
+    import_fs4.default.writeFileSync(defaultPath, JSON.stringify(defaultConfig, null, 2));
   }
   function ensureComponentConfigsDir() {
-    if (!import_fs3.default.existsSync(COMPONENT_CONFIGS_DIR)) {
-      import_fs3.default.mkdirSync(COMPONENT_CONFIGS_DIR, { recursive: true });
+    if (!import_fs4.default.existsSync(COMPONENT_CONFIGS_DIR)) {
+      import_fs4.default.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 (!import_fs3.default.existsSync(manifestsResource.activePath)) {
-      import_fs3.default.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 = import_path4.default.join(dir, name);
+        if (import_fs4.default.existsSync(p)) legacy.push(import_path4.default.relative(process.cwd(), p));
+      }
+    };
+    check(COLORS_AND_TYPE_DIR);
+    if (import_fs4.default.existsSync(COMPONENT_CONFIGS_DIR)) {
+      for (const entry of import_fs4.default.readdirSync(COMPONENT_CONFIGS_DIR, { withFileTypes: true })) {
+        if (entry.isDirectory()) check(import_path4.default.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 (!import_fs3.default.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 ${import_path4.default.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 ${import_path4.default.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(import_fs3.default.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(import_fs4.default.readFileSync(resolved, "utf-8")))) {
+        return "colors-and-type";
+      }
+    } catch {
     }
-    manifest.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-    import_fs3.default.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 ${import_path4.default.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();
+    import_fs4.default.writeFileSync(themesResource.filePath(fileName), JSON.stringify(theme, null, 2));
+  }
+  function migrateLocalThemes(warn) {
+    if (import_path4.default.resolve(THEMES_DIR) === import_path4.default.resolve(packageThemesDir)) return;
+    if (!import_fs4.default.existsSync(THEMES_DIR)) return;
+    for (const file of import_fs4.default.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(import_fs4.default.readFileSync(import_path4.default.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(import_fs4.default.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 = !import_fs4.default.existsSync(themesResource.productionPath) && listLegacyPointers().length > 0;
+    if (productionPointerHeld) {
+      if (!import_fs4.default.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) => {
@@ -1609,237 +1965,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 (import_fs3.default.existsSync(filePath)) {
+      if (import_fs4.default.existsSync(filePath)) {
         try {
-          const existing = JSON.parse(import_fs3.default.readFileSync(filePath, "utf-8"));
+          const existing = JSON.parse(import_fs4.default.readFileSync(filePath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
-      import_fs3.default.writeFileSync(filePath, JSON.stringify(body, null, 2));
-      if (fileName === themesResource.getProductionName()) {
-        syncTokensToCss(fileName);
-        syncFontsToCss(fileName);
-        syncComponentsToCss();
-      }
+      import_fs4.default.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 (import_fs4.default.existsSync(filePath)) {
+        import_fs4.default.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 (import_fs3.default.existsSync(filePath)) {
-        import_fs3.default.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") {
@@ -1862,19 +2172,16 @@ ${lines.join("\n")}
       body.component = comp;
       body.name = body.name || name;
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      if (import_fs3.default.existsSync(configPath)) {
+      if (import_fs4.default.existsSync(configPath)) {
         try {
-          const existing = JSON.parse(import_fs3.default.readFileSync(configPath, "utf-8"));
+          const existing = JSON.parse(import_fs4.default.readFileSync(configPath, "utf-8"));
           if (existing.createdAt) body.createdAt = existing.createdAt;
         } catch {
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
       r.ensureDir();
-      import_fs3.default.writeFileSync(configPath, JSON.stringify(body, null, 2));
-      if (r.getProductionName() === name) {
-        syncComponentsToCss();
-      }
+      import_fs4.default.writeFileSync(configPath, JSON.stringify(body, null, 2));
       jsonResponse(res, 200, { ok: true, fileName: name });
       return;
     }
@@ -1883,16 +2190,7 @@ ${lines.join("\n")}
         jsonResponse(res, 403, { error: "Cannot delete default config" });
         return;
       }
-      if (import_fs3.default.existsSync(configPath)) {
-        import_fs3.default.unlinkSync(configPath);
-        if (r.getActiveName() === name) {
-          r.setActiveName("default");
-        }
-        if (r.getProductionName() === name) {
-          r.setProductionName("default");
-          syncComponentsToCss();
-        }
-      }
+      if (import_fs4.default.existsSync(configPath)) import_fs4.default.unlinkSync(configPath);
       jsonResponse(res, 200, { ok: true });
       return;
     }
@@ -1900,199 +2198,190 @@ ${lines.join("\n")}
   async function handleListComponentConfigs({ params, res }) {
     const [comp] = params;
     const r = componentResource(comp);
-    if (!import_fs3.default.existsSync(r.dir)) {
+    if (!import_fs4.default.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 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 handleGetActiveManifest({ res }) {
-    const activeFile = manifestsResource.getActiveName();
-    const raw = manifestsResource.readJson(activeFile);
-    if (!raw) {
-      jsonResponse(res, 404, { error: "Active manifest not found" });
+  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 (import_fs3.default.existsSync(filePath)) {
+      const { theme } = normalizeTheme(body, diskThemeResolvers);
+      theme.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+      if (import_fs4.default.existsSync(filePath)) {
         try {
-          const existing = JSON.parse(import_fs3.default.readFileSync(filePath, "utf-8"));
-          if (existing.createdAt) body.createdAt = existing.createdAt;
+          const existing = JSON.parse(import_fs4.default.readFileSync(filePath, "utf-8"));
+          if (existing.createdAt) theme.createdAt = existing.createdAt;
         } catch {
         }
       }
-      if (!body.createdAt) body.createdAt = body.updatedAt;
-      import_fs3.default.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 (import_fs3.default.existsSync(filePath)) {
-        import_fs3.default.unlinkSync(filePath);
-        if (manifestsResource.getActiveName() === fileName) {
-          manifestsResource.setActiveName("default");
+      if (import_fs4.default.existsSync(filePath)) {
+        import_fs4.default.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");
@@ -2105,7 +2394,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));
@@ -2113,117 +2402,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();
-    import_fs3.default.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();
-      import_fs3.default.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();
-    import_fs3.default.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 },
@@ -2231,33 +2515,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",
@@ -2271,19 +2566,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 || !import_fs4.default.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 = import_path3.default.resolve(ctx.file);
+      if (legacyLayout) return;
+      const normalized = import_path4.default.resolve(ctx.file);
       if (!COMPONENTS_SCAN_DIRS.some((d) => normalized.startsWith(d))) return;
       if (!normalized.endsWith(".svelte")) return;
       if (!isThemeAwareComponent(normalized)) return;