@motion-proto/live-tokens 0.1.0 → 0.3.1

package/dist-plugin/index.cjs

@@ -30,84 +30,153 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/vite-plugin/index.ts
 var index_exports = {};
 __export(index_exports, {
-  tokenFileApi: () => tokenFileApi
+  themeFileApi: () => themeFileApi
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/vite-plugin/tokenFileApi.ts
+// src/vite-plugin/themeFileApi.ts
+var import_fs2 = __toESM(require("fs"), 1);
+var import_path2 = __toESM(require("path"), 1);
+
+// src/lib/parsers/globalRootBlock.ts
+function extractGlobalRootBody(source) {
+  const re = /:global\(:root\)\s*\{([^}]*)\}/g;
+  const bodies = [];
+  let m;
+  while ((m = re.exec(source)) !== null) {
+    bodies.push(m[1]);
+  }
+  return bodies.join("\n");
+}
+
+// src/lib/files/versionedFileResource.ts
+function sanitizeFileName(name) {
+  return name.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9\-_]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "") || "unnamed";
+}
+
+// src/vite-plugin/files/versionedFileResource.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
-function tokenFileApi(opts) {
-  const TOKENS_DIR = import_path.default.resolve(opts.tokensDir);
-  const CSS_PATH = import_path.default.resolve(opts.variablesCssPath);
-  const TOKENS_BACKUP_DIR = opts.tokensBackupDir ? import_path.default.resolve(opts.tokensBackupDir) : import_path.default.join(TOKENS_DIR, "_backups");
-  const CSS_BACKUP_DIR = opts.cssBackupDir ? import_path.default.resolve(opts.cssBackupDir) : import_path.default.join(import_path.default.dirname(CSS_PATH), "_backups");
-  const API_BASE = opts.apiBase ?? "/api";
-  const ACTIVE_FILE = import_path.default.join(TOKENS_DIR, "_active.json");
-  const PRODUCTION_FILE = import_path.default.join(TOKENS_DIR, "_production.json");
-  function ensureTokensDir() {
-    if (!import_fs.default.existsSync(TOKENS_DIR)) {
-      import_fs.default.mkdirSync(TOKENS_DIR, { recursive: true });
-    }
-    if (!import_fs.default.existsSync(import_path.default.join(TOKENS_DIR, "default.json"))) {
-      const defaultTokens = {
-        name: "Default",
-        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-        updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
-        editorConfigs: {},
-        cssVariables: {}
-      };
-      import_fs.default.writeFileSync(import_path.default.join(TOKENS_DIR, "default.json"), JSON.stringify(defaultTokens, null, 2));
-    }
-    if (!import_fs.default.existsSync(ACTIVE_FILE)) {
-      import_fs.default.writeFileSync(ACTIVE_FILE, JSON.stringify({ activeFile: "default" }));
-    }
-    if (!import_fs.default.existsSync(PRODUCTION_FILE)) {
-      const activeFile = getActiveFileName();
-      import_fs.default.writeFileSync(PRODUCTION_FILE, JSON.stringify({ productionFile: activeFile }));
+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 defaultName = opts.defaultName ?? "default";
+  function ensureDir() {
+    if (!import_fs.default.existsSync(dir)) {
+      import_fs.default.mkdirSync(dir, { recursive: true });
     }
   }
-  function backupTokenFile(filePath, fileName) {
-    if (!import_fs.default.existsSync(filePath)) return;
-    if (!import_fs.default.existsSync(TOKENS_BACKUP_DIR)) {
-      import_fs.default.mkdirSync(TOKENS_BACKUP_DIR, { recursive: true });
+  function ensureMeta() {
+    if (!import_fs.default.existsSync(activePath)) {
+      import_fs.default.writeFileSync(activePath, JSON.stringify({ activeFile: defaultName }));
     }
-    const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
-    const backupPath = import_path.default.join(TOKENS_BACKUP_DIR, `${fileName}_${timestamp}.json`);
-    import_fs.default.copyFileSync(filePath, backupPath);
-    const allBackups = import_fs.default.readdirSync(TOKENS_BACKUP_DIR).filter((f) => f.startsWith(`${fileName}_`) && f.endsWith(".json")).sort().reverse();
-    for (const old of allBackups.slice(10)) {
-      import_fs.default.unlinkSync(import_path.default.join(TOKENS_BACKUP_DIR, old));
+    if (!import_fs.default.existsSync(productionPath)) {
+      import_fs.default.writeFileSync(productionPath, JSON.stringify({ productionFile: defaultName }));
     }
   }
-  function backupCssFile() {
-    if (!import_fs.default.existsSync(CSS_PATH)) return;
-    if (!import_fs.default.existsSync(CSS_BACKUP_DIR)) {
-      import_fs.default.mkdirSync(CSS_BACKUP_DIR, { recursive: true });
-    }
-    const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-");
-    const backupPath = import_path.default.join(CSS_BACKUP_DIR, `variables_${timestamp}.css`);
-    import_fs.default.copyFileSync(CSS_PATH, backupPath);
-    const allBackups = import_fs.default.readdirSync(CSS_BACKUP_DIR).filter((f) => f.startsWith("variables_") && f.endsWith(".css")).sort().reverse();
-    for (const old of allBackups.slice(10)) {
-      import_fs.default.unlinkSync(import_path.default.join(CSS_BACKUP_DIR, old));
-    }
+  function filePath(name) {
+    return import_path.default.join(dir, `${name}.json`);
   }
-  function getActiveFileName() {
+  function getActiveName() {
     try {
-      const data = JSON.parse(import_fs.default.readFileSync(ACTIVE_FILE, "utf-8"));
-      return data.activeFile || "default";
+      const data = JSON.parse(import_fs.default.readFileSync(activePath, "utf-8"));
+      return data.activeFile || defaultName;
     } catch {
-      return "default";
+      return defaultName;
     }
   }
-  function getProductionFileName() {
+  function getProductionName() {
     try {
-      const data = JSON.parse(import_fs.default.readFileSync(PRODUCTION_FILE, "utf-8"));
-      return data.productionFile || "default";
+      const data = JSON.parse(import_fs.default.readFileSync(productionPath, "utf-8"));
+      return data.productionFile || defaultName;
     } catch {
-      return "default";
+      return defaultName;
+    }
+  }
+  function setActiveName(name) {
+    import_fs.default.writeFileSync(activePath, JSON.stringify({ activeFile: name }));
+  }
+  function setProductionName(name) {
+    import_fs.default.writeFileSync(productionPath, JSON.stringify({ productionFile: name }));
+  }
+  return {
+    dir,
+    activePath,
+    productionPath,
+    ensureDir,
+    ensureMeta,
+    filePath,
+    getActiveName,
+    getProductionName,
+    setActiveName,
+    setProductionName
+  };
+}
+
+// src/vite-plugin/files/routeTable.ts
+async function dispatch(req, res, routes) {
+  const url = req.url || "";
+  const method = req.method || "GET";
+  for (const route of routes) {
+    if (route.method !== method) continue;
+    let params = [];
+    if (typeof route.pattern === "string") {
+      if (url !== route.pattern) continue;
+    } else {
+      const m = url.match(route.pattern);
+      if (!m) continue;
+      params = m.slice(1);
+    }
+    try {
+      await route.handler({ url, params, req, res });
+    } catch (err) {
+      if (!res.writableEnded) {
+        res.statusCode = 500;
+        res.setHeader("Content-Type", "application/json");
+        res.end(JSON.stringify({ error: err?.message ?? "Internal error" }));
+      }
+    }
+    return true;
+  }
+  return false;
+}
+
+// src/vite-plugin/themeFileApi.ts
+function themeFileApi(opts) {
+  const THEMES_DIR = import_path2.default.resolve(opts.themesDir);
+  const CSS_PATH = import_path2.default.resolve(opts.tokensCssPath);
+  const FONTS_CSS_PATH = opts.fontsCssPath ? import_path2.default.resolve(opts.fontsCssPath) : import_path2.default.join(import_path2.default.dirname(CSS_PATH), "fonts.css");
+  const API_BASE = opts.apiBase ?? "/api";
+  const COMPONENT_CONFIGS_DIR = opts.componentConfigsDir ? import_path2.default.resolve(opts.componentConfigsDir) : import_path2.default.resolve("component-configs");
+  const COMPONENTS_SRC_DIR = opts.componentsSrcDir ? import_path2.default.resolve(opts.componentsSrcDir) : import_path2.default.resolve("src/components");
+  const PRESETS_DIR = opts.presetsDir ? import_path2.default.resolve(opts.presetsDir) : import_path2.default.resolve("presets");
+  const themesResource = versionedFileResourceServer({
+    dir: THEMES_DIR
+  });
+  const componentResourceCache = /* @__PURE__ */ new Map();
+  function componentResource(comp) {
+    let r = componentResourceCache.get(comp);
+    if (!r) {
+      r = versionedFileResourceServer({ dir: import_path2.default.join(COMPONENT_CONFIGS_DIR, comp) });
+      componentResourceCache.set(comp, r);
+    }
+    return r;
+  }
+  const presetsResource = versionedFileResourceServer({ dir: PRESETS_DIR });
+  function ensureThemesDir() {
+    themesResource.ensureDir();
+    if (!import_fs2.default.existsSync(import_path2.default.join(THEMES_DIR, "default.json"))) {
+      const defaultTheme = {
+        name: "Default",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        editorConfigs: {},
+        cssVariables: {}
+      };
+      import_fs2.default.writeFileSync(import_path2.default.join(THEMES_DIR, "default.json"), JSON.stringify(defaultTheme, null, 2));
     }
+    themesResource.ensureMeta();
   }
   function readBody(req) {
     return new Promise((resolve, reject) => {
@@ -122,16 +191,48 @@ function tokenFileApi(opts) {
     res.setHeader("Content-Type", "application/json");
     res.end(JSON.stringify(data));
   }
-  function sanitize(name) {
-    return name.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9\-_]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "") || "unnamed";
+  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;
+    if (!stacks || stacks.length === 0) return {};
+    const familyById = /* @__PURE__ */ new Map();
+    for (const src of sources ?? []) {
+      for (const f of src.families) familyById.set(f.id, f.cssName);
+    }
+    const out = {};
+    for (const stack of stacks) {
+      const parts = [];
+      for (const slot of stack.slots) {
+        if (slot.kind === "project") {
+          const css = familyById.get(slot.familyId);
+          if (css) parts.push(css);
+        } else if (slot.kind === "system") {
+          const cascade = SYSTEM_CASCADES_SSR[slot.preset];
+          if (cascade) parts.push(cascade);
+        } else if (slot.kind === "generic") {
+          parts.push(slot.value);
+        }
+      }
+      if (parts.length > 0) out[stack.variable] = parts.join(", ");
+    }
+    return out;
   }
   function syncTokensToCss(fileName) {
-    const tokenPath = import_path.default.join(TOKENS_DIR, `${fileName}.json`);
-    if (!import_fs.default.existsSync(tokenPath)) return;
-    const tokenData = JSON.parse(import_fs.default.readFileSync(tokenPath, "utf-8"));
-    const cssVars = tokenData.cssVariables || {};
+    const themePath = import_path2.default.join(THEMES_DIR, `${fileName}.json`);
+    if (!import_fs2.default.existsSync(themePath)) return;
+    const themeData = JSON.parse(import_fs2.default.readFileSync(themePath, "utf-8"));
+    const cssVars = { ...themeData.cssVariables || {} };
+    const resolvedFontVars = resolveFontStacks(themeData);
+    for (const [name, value] of Object.entries(resolvedFontVars)) {
+      cssVars[name] = value;
+    }
     if (Object.keys(cssVars).length === 0) return;
-    const cssContent = import_fs.default.readFileSync(CSS_PATH, "utf-8");
+    const cssContent = import_fs2.default.readFileSync(CSS_PATH, "utf-8");
     const remaining = new Set(Object.keys(cssVars));
     const updatedContent = cssContent.replace(
       /^(\s*)(--[\w-]+):\s*(.+);/gm,
@@ -155,290 +256,676 @@ ${newVars}
 }$1`
       );
     }
-    backupCssFile();
-    import_fs.default.writeFileSync(CSS_PATH, finalContent);
-    console.log(`[syncTokensToCss] Wrote ${Object.keys(cssVars).length} variables from "${fileName}" into variables.css`);
+    import_fs2.default.writeFileSync(CSS_PATH, finalContent);
+    console.log(`[syncTokensToCss] Wrote ${Object.keys(cssVars).length} variables from "${fileName}" into tokens.css`);
   }
-  const escapedBase = API_BASE.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const TOKENS_ROUTE = `${API_BASE}/tokens`;
-  const TOKENS_ACTIVE_ROUTE = `${API_BASE}/tokens/active`;
-  const TOKENS_PRODUCTION_ROUTE = `${API_BASE}/tokens/production`;
-  const BACKUPS_ROUTE = `${API_BASE}/backups`;
-  const CURRENT_CSS_ROUTE = `${API_BASE}/current-css`;
-  const TOKEN_BY_NAME_REGEX = new RegExp(`^${escapedBase}/tokens/([a-z0-9\\-_]+)$`);
-  const BACKUP_GET_REGEX = new RegExp(`^${escapedBase}/backups/(tokens|css)/(.+)$`);
-  const BACKUP_RESTORE_REGEX = new RegExp(`^${escapedBase}/backups/(tokens|css)/(.+)/restore$`);
-  return {
-    name: "token-file-api",
-    configureServer(server) {
-      ensureTokensDir();
-      server.middlewares.use(async (req, res, next) => {
-        const url = req.url || "";
-        if (url === TOKENS_ROUTE && req.method === "GET") {
-          try {
-            const activeFile = getActiveFileName();
-            const files = import_fs.default.readdirSync(TOKENS_DIR).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
-              const filePath = import_path.default.join(TOKENS_DIR, f);
-              const data = JSON.parse(import_fs.default.readFileSync(filePath, "utf-8"));
-              const fileName = f.replace(".json", "");
-              return {
-                name: data.name || fileName,
-                fileName,
-                updatedAt: data.updatedAt || "",
-                isActive: fileName === activeFile
-              };
-            });
-            jsonResponse(res, 200, { files });
-          } catch (err) {
-            jsonResponse(res, 500, { error: err.message });
-          }
-          return;
+  function syncFontsToCss(fileName) {
+    const themePath = import_path2.default.join(THEMES_DIR, `${fileName}.json`);
+    if (!import_fs2.default.existsSync(themePath)) return;
+    const themeData = JSON.parse(import_fs2.default.readFileSync(themePath, "utf-8"));
+    const sources = themeData.fontSources;
+    if (!sources) return;
+    const lines = [];
+    lines.push("/* Generated from the production theme by syncFontsToCss. Do not edit. */");
+    lines.push("/* Both fonts.css and fonts/ are in dist/, so relative paths work at runtime. */");
+    lines.push("");
+    for (const source of sources) {
+      const familyNames = source.families.map((f) => f.name).join(", ");
+      const label = source.label ? `${source.label} \u2014 ${familyNames}` : familyNames;
+      lines.push(`/* ${label} */`);
+      if (source.kind === "font-face") {
+        if (source.cssText) lines.push(source.cssText);
+      } else if (source.url) {
+        lines.push(`@import url('${source.url}');`);
+      }
+      lines.push("");
+    }
+    const content = lines.join("\n");
+    if (!import_fs2.default.existsSync(import_path2.default.dirname(FONTS_CSS_PATH))) {
+      import_fs2.default.mkdirSync(import_path2.default.dirname(FONTS_CSS_PATH), { recursive: true });
+    }
+    import_fs2.default.writeFileSync(FONTS_CSS_PATH, content);
+    console.log(`[syncFontsToCss] Wrote ${sources.length} source(s) into ${import_path2.default.basename(FONTS_CSS_PATH)}`);
+  }
+  function extractAliasDeclarations(body) {
+    const aliases = {};
+    const re = /(--[a-z0-9-]+)\s*:\s*var\((--[a-z0-9-]+)\)\s*;/gi;
+    let m;
+    while ((m = re.exec(body)) !== null) aliases[m[1]] = m[2];
+    return aliases;
+  }
+  function componentNameFromFile(filePath) {
+    return import_path2.default.basename(filePath, ".svelte").toLowerCase();
+  }
+  function listComponentSourcePaths() {
+    if (!import_fs2.default.existsSync(COMPONENTS_SRC_DIR)) return [];
+    return import_fs2.default.readdirSync(COMPONENTS_SRC_DIR).filter((f) => f.endsWith(".svelte")).map((f) => import_path2.default.join(COMPONENTS_SRC_DIR, f));
+  }
+  function listComponentNames() {
+    return listComponentSourcePaths().map(componentNameFromFile);
+  }
+  function generateDefaultConfig(comp, sourcePath) {
+    if (!import_fs2.default.existsSync(sourcePath)) return;
+    const r = componentResource(comp);
+    r.ensureDir();
+    const defaultPath = r.filePath("default");
+    const sourceStat = import_fs2.default.statSync(sourcePath);
+    if (import_fs2.default.existsSync(defaultPath)) {
+      const defaultStat = import_fs2.default.statSync(defaultPath);
+      if (defaultStat.mtimeMs >= sourceStat.mtimeMs) return;
+    }
+    const source = import_fs2.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_fs2.default.existsSync(defaultPath)) {
+      try {
+        const existing = JSON.parse(import_fs2.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") {
+          existingAliases = existing.aliases;
         }
-        if (url === TOKENS_ACTIVE_ROUTE && req.method === "GET") {
-          try {
-            const activeFile = getActiveFileName();
-            const filePath = import_path.default.join(TOKENS_DIR, `${activeFile}.json`);
-            if (!import_fs.default.existsSync(filePath)) {
-              jsonResponse(res, 404, { error: "Active token file not found" });
-              return;
-            }
-            const data = JSON.parse(import_fs.default.readFileSync(filePath, "utf-8"));
-            data._fileName = activeFile;
-            jsonResponse(res, 200, data);
-          } catch (err) {
-            jsonResponse(res, 500, { error: err.message });
-          }
-          return;
+      } catch {
+      }
+    }
+    const aliasesUnchanged = existingAliases !== void 0 && JSON.stringify(existingAliases) === JSON.stringify(aliases);
+    const defaultConfig = {
+      name: "default",
+      component: comp,
+      createdAt,
+      updatedAt: aliasesUnchanged && existingUpdatedAt ? existingUpdatedAt : now,
+      aliases
+    };
+    if (aliasesUnchanged && existingUpdatedAt) {
+      const t = /* @__PURE__ */ new Date();
+      import_fs2.default.utimesSync(defaultPath, t, t);
+      return;
+    }
+    import_fs2.default.writeFileSync(defaultPath, JSON.stringify(defaultConfig, null, 2));
+  }
+  function ensureComponentConfigsDir() {
+    if (!import_fs2.default.existsSync(COMPONENT_CONFIGS_DIR)) {
+      import_fs2.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 ensurePresetsDir() {
+    presetsResource.ensureDir();
+    const defaultPath = import_path2.default.join(PRESETS_DIR, "default.json");
+    if (!import_fs2.default.existsSync(defaultPath)) {
+      const componentConfigs = {};
+      for (const comp of listComponentNames()) {
+        componentConfigs[comp] = componentResource(comp).getActiveName();
+      }
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      const defaultPreset = {
+        name: "Default",
+        createdAt: now,
+        updatedAt: now,
+        theme: themesResource.getActiveName(),
+        componentConfigs
+      };
+      import_fs2.default.writeFileSync(defaultPath, JSON.stringify(defaultPreset, null, 2));
+    }
+    presetsResource.ensureMeta();
+  }
+  function readComponentConfig(comp, name) {
+    const filePath = componentResource(comp).filePath(name);
+    if (!import_fs2.default.existsSync(filePath)) return null;
+    try {
+      return JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+    } catch {
+      return null;
+    }
+  }
+  const COMPONENT_OVERRIDES_START = "/* component-aliases:start */";
+  const COMPONENT_OVERRIDES_END = "/* component-aliases:end */";
+  function syncComponentsToCss() {
+    if (!import_fs2.default.existsSync(CSS_PATH)) return;
+    if (!import_fs2.default.existsSync(COMPONENT_CONFIGS_DIR)) return;
+    const lines = [];
+    const components = listComponentNames();
+    for (const comp of components) {
+      const prod = componentResource(comp).getProductionName();
+      if (prod === "default") continue;
+      const prodCfg = readComponentConfig(comp, prod);
+      const defaultCfg = readComponentConfig(comp, "default");
+      if (!prodCfg || !defaultCfg) continue;
+      const overrides = [];
+      for (const [varName, semanticName] of Object.entries(prodCfg.aliases ?? {})) {
+        if ((defaultCfg.aliases ?? {})[varName] !== semanticName) {
+          overrides.push([varName, semanticName]);
         }
-        if (url === TOKENS_ACTIVE_ROUTE && req.method === "PUT") {
-          try {
-            const body = JSON.parse(await readBody(req));
-            const fileName = sanitize(body.name || "default");
-            if (!import_fs.default.existsSync(import_path.default.join(TOKENS_DIR, `${fileName}.json`))) {
-              jsonResponse(res, 404, { error: "Token file not found" });
-              return;
-            }
-            import_fs.default.writeFileSync(ACTIVE_FILE, JSON.stringify({ activeFile: fileName }));
-            jsonResponse(res, 200, { ok: true, activeFile: fileName });
-          } catch (err) {
-            jsonResponse(res, 500, { error: err.message });
-          }
-          return;
+      }
+      if (overrides.length === 0) continue;
+      lines.push(`  /* ${comp} (${prod}) */`);
+      for (const [varName, semanticName] of overrides) {
+        lines.push(`  ${varName}: var(${semanticName});`);
+      }
+    }
+    const block = lines.length > 0 ? `
+
+${COMPONENT_OVERRIDES_START}
+:root:root {
+${lines.join("\n")}
+}
+${COMPONENT_OVERRIDES_END}
+` : "";
+    let cssContent = import_fs2.default.readFileSync(CSS_PATH, "utf-8");
+    const startIdx = cssContent.indexOf(COMPONENT_OVERRIDES_START);
+    const endIdx = cssContent.indexOf(COMPONENT_OVERRIDES_END);
+    if (startIdx !== -1 && endIdx !== -1 && endIdx > startIdx) {
+      let stripStart = startIdx;
+      while (stripStart > 0 && cssContent[stripStart - 1] === "\n") stripStart--;
+      const after = cssContent.slice(endIdx + COMPONENT_OVERRIDES_END.length);
+      cssContent = cssContent.slice(0, stripStart) + (block || "\n") + after.replace(/^\n+/, "");
+    } else if (block) {
+      cssContent = cssContent.replace(/\n*$/, "") + block;
+    }
+    import_fs2.default.writeFileSync(CSS_PATH, cssContent);
+    console.log(
+      `[syncComponentsToCss] Wrote ${lines.filter((l) => !l.trim().startsWith("/*")).length} alias override(s) to tokens.css`
+    );
+  }
+  const escapedBase = API_BASE.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  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 PRESETS_ROUTE = `${API_BASE}/presets`;
+  const PRESETS_ACTIVE_ROUTE = `${API_BASE}/presets/active`;
+  const THEME_BY_NAME_REGEX = new RegExp(`^${escapedBase}/themes/([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_BY_NAME_REGEX = new RegExp(`^${escapedBase}/component-configs/([a-z0-9\\-_]+)/([a-z0-9\\-_]+)$`);
+  const PRESET_APPLY_REGEX = new RegExp(`^${escapedBase}/presets/([a-z0-9\\-_]+)/apply$`);
+  const PRESET_BY_NAME_REGEX = new RegExp(`^${escapedBase}/presets/([a-z0-9\\-_]+)$`);
+  async function handleListThemes(_ctx) {
+    const activeFile = themesResource.getActiveName();
+    const files = import_fs2.default.readdirSync(THEMES_DIR).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
+      const filePath = import_path2.default.join(THEMES_DIR, f);
+      const data = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+      const fileName = f.replace(".json", "");
+      return {
+        name: data.name || fileName,
+        fileName,
+        updatedAt: data.updatedAt || "",
+        isActive: fileName === activeFile
+      };
+    });
+    jsonResponse(_ctx.res, 200, { files });
+  }
+  async function handleGetActiveTheme({ res }) {
+    const activeFile = themesResource.getActiveName();
+    const filePath = themesResource.filePath(activeFile);
+    if (!import_fs2.default.existsSync(filePath)) {
+      jsonResponse(res, 404, { error: "Active theme not found" });
+      return;
+    }
+    const data = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+    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 (!import_fs2.default.existsSync(themesResource.filePath(fileName))) {
+      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 filePath = themesResource.filePath(prodFile);
+    if (!import_fs2.default.existsSync(filePath)) {
+      jsonResponse(res, 200, { fileName: prodFile, name: prodFile, cssVariables: {} });
+      return;
+    }
+    const data = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+    jsonResponse(res, 200, {
+      fileName: prodFile,
+      name: data.name || prodFile,
+      updatedAt: data.updatedAt || "",
+      cssVariables: data.cssVariables || {}
+    });
+  }
+  async function handleSetProductionTheme({ req, res }) {
+    const body = JSON.parse(await readBody(req));
+    const fileName = sanitizeFileName(body.name || "default");
+    if (!import_fs2.default.existsSync(themesResource.filePath(fileName))) {
+      jsonResponse(res, 404, { error: "Theme not found" });
+      return;
+    }
+    themesResource.setProductionName(fileName);
+    syncTokensToCss(fileName);
+    syncFontsToCss(fileName);
+    syncComponentsToCss();
+    const data = JSON.parse(import_fs2.default.readFileSync(themesResource.filePath(fileName), "utf-8"));
+    jsonResponse(res, 200, {
+      ok: true,
+      fileName,
+      name: data.name || fileName,
+      updatedAt: data.updatedAt || ""
+    });
+  }
+  async function handleThemeByName({ params, req, res }) {
+    const [fileName] = params;
+    const filePath = themesResource.filePath(fileName);
+    if (req.method === "GET") {
+      if (!import_fs2.default.existsSync(filePath)) {
+        jsonResponse(res, 404, { error: "Not found" });
+        return;
+      }
+      const data = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+      data._fileName = fileName;
+      jsonResponse(res, 200, data);
+      return;
+    }
+    if (req.method === "PUT") {
+      const body = JSON.parse(await readBody(req));
+      body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+      if (import_fs2.default.existsSync(filePath)) {
+        try {
+          const existing = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+          if (existing.createdAt) body.createdAt = existing.createdAt;
+        } catch {
         }
-        if (url === TOKENS_PRODUCTION_ROUTE && req.method === "GET") {
-          try {
-            const prodFile = getProductionFileName();
-            const filePath = import_path.default.join(TOKENS_DIR, `${prodFile}.json`);
-            if (!import_fs.default.existsSync(filePath)) {
-              jsonResponse(res, 200, { fileName: prodFile, name: prodFile, cssVariables: {} });
-              return;
-            }
-            const data = JSON.parse(import_fs.default.readFileSync(filePath, "utf-8"));
-            jsonResponse(res, 200, {
-              fileName: prodFile,
-              name: data.name || prodFile,
-              updatedAt: data.updatedAt || "",
-              cssVariables: data.cssVariables || {}
-            });
-          } catch (err) {
-            jsonResponse(res, 500, { error: err.message });
-          }
-          return;
+      }
+      if (!body.createdAt) body.createdAt = body.updatedAt;
+      import_fs2.default.writeFileSync(filePath, JSON.stringify(body, null, 2));
+      if (fileName === themesResource.getProductionName()) {
+        syncTokensToCss(fileName);
+        syncFontsToCss(fileName);
+        syncComponentsToCss();
+      }
+      jsonResponse(res, 200, { ok: true, fileName });
+      return;
+    }
+    if (req.method === "DELETE") {
+      if (fileName === "default") {
+        jsonResponse(res, 403, { error: "Cannot delete the default theme" });
+        return;
+      }
+      if (import_fs2.default.existsSync(filePath)) {
+        import_fs2.default.unlinkSync(filePath);
+        if (themesResource.getActiveName() === fileName) {
+          themesResource.setActiveName("default");
         }
-        if (url === TOKENS_PRODUCTION_ROUTE && req.method === "PUT") {
-          try {
-            const body = JSON.parse(await readBody(req));
-            const fileName = sanitize(body.name || "default");
-            if (!import_fs.default.existsSync(import_path.default.join(TOKENS_DIR, `${fileName}.json`))) {
-              jsonResponse(res, 404, { error: "Token file not found" });
-              return;
-            }
-            import_fs.default.writeFileSync(PRODUCTION_FILE, JSON.stringify({ productionFile: fileName }));
-            syncTokensToCss(fileName);
-            const data = JSON.parse(import_fs.default.readFileSync(import_path.default.join(TOKENS_DIR, `${fileName}.json`), "utf-8"));
-            jsonResponse(res, 200, {
-              ok: true,
-              fileName,
-              name: data.name || fileName,
-              updatedAt: data.updatedAt || ""
-            });
-          } catch (err) {
-            jsonResponse(res, 500, { error: err.message });
-          }
-          return;
+      }
+      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()
+      };
+    });
+    jsonResponse(res, 200, { components });
+  }
+  async function handleGetComponentActive({ params, res }) {
+    const [comp] = params;
+    const r = componentResource(comp);
+    const activeFile = r.getActiveName();
+    const cfg = readComponentConfig(comp, activeFile);
+    if (!cfg) {
+      jsonResponse(res, 404, { error: "Active config not found" });
+      return;
+    }
+    jsonResponse(res, 200, { ...cfg, _fileName: activeFile });
+  }
+  async function handleSetComponentActive({ params, req, res }) {
+    const [comp] = params;
+    const body = JSON.parse(await readBody(req));
+    const fileName = sanitizeFileName(body.name || "default");
+    const r = componentResource(comp);
+    const configPath = r.filePath(fileName);
+    if (!import_fs2.default.existsSync(configPath)) {
+      jsonResponse(res, 404, { error: "Config not found" });
+      return;
+    }
+    r.ensureDir();
+    r.setActiveName(fileName);
+    jsonResponse(res, 200, { ok: true, activeFile: fileName });
+  }
+  async function handleGetComponentProduction({ params, 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 || {}
+    });
+  }
+  async function handleSetComponentProduction({ params, req, res }) {
+    const [comp] = params;
+    const body = JSON.parse(await readBody(req));
+    const fileName = sanitizeFileName(body.name || "default");
+    const r = componentResource(comp);
+    const configPath = r.filePath(fileName);
+    if (!import_fs2.default.existsSync(configPath)) {
+      jsonResponse(res, 404, { error: "Config not found" });
+      return;
+    }
+    r.ensureDir();
+    r.setProductionName(fileName);
+    syncComponentsToCss();
+    const cfg = readComponentConfig(comp, fileName);
+    jsonResponse(res, 200, {
+      ok: true,
+      fileName,
+      name: cfg?.name || fileName,
+      aliases: cfg?.aliases || {}
+    });
+  }
+  async function handleComponentConfigByName({ params, req, res }) {
+    const [comp, name] = params;
+    const r = componentResource(comp);
+    const configPath = r.filePath(name);
+    if (req.method === "GET") {
+      if (!import_fs2.default.existsSync(configPath)) {
+        jsonResponse(res, 404, { error: "Not found" });
+        return;
+      }
+      const data = JSON.parse(import_fs2.default.readFileSync(configPath, "utf-8"));
+      data._fileName = name;
+      jsonResponse(res, 200, data);
+      return;
+    }
+    if (req.method === "PUT") {
+      if (name === "default") {
+        jsonResponse(res, 403, { error: "Cannot modify default config (regenerated from source)" });
+        return;
+      }
+      const body = JSON.parse(await readBody(req));
+      body.component = comp;
+      body.name = body.name || name;
+      body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+      if (import_fs2.default.existsSync(configPath)) {
+        try {
+          const existing = JSON.parse(import_fs2.default.readFileSync(configPath, "utf-8"));
+          if (existing.createdAt) body.createdAt = existing.createdAt;
+        } catch {
         }
-        if (url === BACKUPS_ROUTE && req.method === "GET") {
-          try {
-            let fileTimestampToISO2 = function(ts) {
-              return ts.replace(/T(\d{2})-(\d{2})-(\d{2})-(\d{3})Z/, "T$1:$2:$3.$4Z");
-            };
-            var fileTimestampToISO = fileTimestampToISO2;
-            const backups = [];
-            if (import_fs.default.existsSync(TOKENS_BACKUP_DIR)) {
-              for (const f of import_fs.default.readdirSync(TOKENS_BACKUP_DIR)) {
-                if (!f.endsWith(".json")) continue;
-                const match2 = f.match(/^(.+)_(\d{4}-\d{2}-\d{2}T\d{2}-\d{2}-\d{2}-\d{3}Z)\.json$/);
-                if (!match2) continue;
-                const stat = import_fs.default.statSync(import_path.default.join(TOKENS_BACKUP_DIR, f));
-                backups.push({
-                  type: "tokens",
-                  file: f,
-                  name: match2[1],
-                  timestamp: fileTimestampToISO2(match2[2]),
-                  size: stat.size
-                });
-              }
-            }
-            if (import_fs.default.existsSync(CSS_BACKUP_DIR)) {
-              for (const f of import_fs.default.readdirSync(CSS_BACKUP_DIR)) {
-                if (!f.endsWith(".css")) continue;
-                const match2 = f.match(/^(.+)_(\d{4}-\d{2}-\d{2}T\d{2}-\d{2}-\d{2}-\d{3}Z)\.css$/);
-                if (!match2) continue;
-                const stat = import_fs.default.statSync(import_path.default.join(CSS_BACKUP_DIR, f));
-                backups.push({
-                  type: "css",
-                  file: f,
-                  name: match2[1],
-                  timestamp: fileTimestampToISO2(match2[2]),
-                  size: stat.size
-                });
-              }
-            }
-            backups.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
-            jsonResponse(res, 200, { backups });
-          } catch (err) {
-            jsonResponse(res, 500, { error: err.message });
-          }
-          return;
+      }
+      if (!body.createdAt) body.createdAt = body.updatedAt;
+      r.ensureDir();
+      import_fs2.default.writeFileSync(configPath, JSON.stringify(body, null, 2));
+      if (r.getProductionName() === name) {
+        syncComponentsToCss();
+      }
+      jsonResponse(res, 200, { ok: true, fileName: name });
+      return;
+    }
+    if (req.method === "DELETE") {
+      if (name === "default") {
+        jsonResponse(res, 403, { error: "Cannot delete default config" });
+        return;
+      }
+      if (import_fs2.default.existsSync(configPath)) {
+        import_fs2.default.unlinkSync(configPath);
+        if (r.getActiveName() === name) {
+          r.setActiveName("default");
         }
-        {
-          const restoreMatch = url.match(BACKUP_RESTORE_REGEX);
-          if (restoreMatch && req.method === "POST") {
-            const [, type, file] = restoreMatch;
-            try {
-              if (type === "css") {
-                const backupPath = import_path.default.join(CSS_BACKUP_DIR, decodeURIComponent(file));
-                if (!backupPath.startsWith(CSS_BACKUP_DIR) || !import_fs.default.existsSync(backupPath)) {
-                  jsonResponse(res, 404, { error: "Backup not found" });
-                  return;
-                }
-                backupCssFile();
-                import_fs.default.copyFileSync(backupPath, CSS_PATH);
-                jsonResponse(res, 200, { ok: true, restored: file });
-              } else {
-                const backupPath = import_path.default.join(TOKENS_BACKUP_DIR, decodeURIComponent(file));
-                if (!backupPath.startsWith(TOKENS_BACKUP_DIR) || !import_fs.default.existsSync(backupPath)) {
-                  jsonResponse(res, 404, { error: "Backup not found" });
-                  return;
-                }
-                const nameMatch = decodeURIComponent(file).match(/^(.+)_\d{4}-/);
-                if (!nameMatch) {
-                  jsonResponse(res, 400, { error: "Cannot determine token file name from backup" });
-                  return;
-                }
-                const tokenFilePath = import_path.default.join(TOKENS_DIR, `${nameMatch[1]}.json`);
-                backupTokenFile(tokenFilePath, nameMatch[1]);
-                import_fs.default.copyFileSync(backupPath, tokenFilePath);
-                jsonResponse(res, 200, { ok: true, restored: file });
-              }
-            } catch (err) {
-              jsonResponse(res, 500, { error: err.message });
-            }
-            return;
-          }
+        if (r.getProductionName() === name) {
+          r.setProductionName("default");
+          syncComponentsToCss();
         }
-        {
-          const backupMatch = url.match(BACKUP_GET_REGEX);
-          if (backupMatch && req.method === "GET") {
-            const [, type, file] = backupMatch;
-            const dir = type === "css" ? CSS_BACKUP_DIR : TOKENS_BACKUP_DIR;
-            const filePath = import_path.default.join(dir, decodeURIComponent(file));
-            if (!filePath.startsWith(dir) || !import_fs.default.existsSync(filePath)) {
-              jsonResponse(res, 404, { error: "Backup not found" });
-              return;
-            }
-            const content = import_fs.default.readFileSync(filePath, "utf-8");
-            jsonResponse(res, 200, { content, type, file });
-            return;
-          }
+      }
+      jsonResponse(res, 200, { ok: true });
+      return;
+    }
+  }
+  async function handleListComponentConfigs({ params, res }) {
+    const [comp] = params;
+    const r = componentResource(comp);
+    if (!import_fs2.default.existsSync(r.dir)) {
+      jsonResponse(res, 404, { error: "Component not found" });
+      return;
+    }
+    const activeFile = r.getActiveName();
+    const productionFile = r.getProductionName();
+    const files = import_fs2.default.readdirSync(r.dir).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
+      const filePath = import_path2.default.join(r.dir, f);
+      const data = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+      const fileName = f.replace(".json", "");
+      return {
+        name: data.name || fileName,
+        fileName,
+        updatedAt: data.updatedAt || "",
+        isActive: fileName === activeFile,
+        isProduction: fileName === productionFile
+      };
+    });
+    jsonResponse(res, 200, { component: comp, files, activeFile, productionFile });
+  }
+  async function handleListPresets({ res }) {
+    const activeFile = presetsResource.getActiveName();
+    const files = import_fs2.default.readdirSync(PRESETS_DIR).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
+      const filePath = import_path2.default.join(PRESETS_DIR, f);
+      const data = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+      const fileName = f.replace(".json", "");
+      return {
+        name: data.name || fileName,
+        fileName,
+        updatedAt: data.updatedAt || "",
+        isActive: fileName === activeFile
+      };
+    });
+    jsonResponse(res, 200, { files, activeFile });
+  }
+  async function handleGetActivePreset({ res }) {
+    const activeFile = presetsResource.getActiveName();
+    const filePath = presetsResource.filePath(activeFile);
+    if (!import_fs2.default.existsSync(filePath)) {
+      jsonResponse(res, 404, { error: "Active preset not found" });
+      return;
+    }
+    const data = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+    data._fileName = activeFile;
+    jsonResponse(res, 200, data);
+  }
+  async function handleSetActivePreset({ req, res }) {
+    const body = JSON.parse(await readBody(req));
+    const fileName = sanitizeFileName(body.name || "default");
+    if (!import_fs2.default.existsSync(presetsResource.filePath(fileName))) {
+      jsonResponse(res, 404, { error: "Preset not found" });
+      return;
+    }
+    presetsResource.setActiveName(fileName);
+    jsonResponse(res, 200, { ok: true, activeFile: fileName });
+  }
+  async function handlePresetByName({ params, req, res }) {
+    const [fileName] = params;
+    const filePath = presetsResource.filePath(fileName);
+    if (req.method === "GET") {
+      if (!import_fs2.default.existsSync(filePath)) {
+        jsonResponse(res, 404, { error: "Not found" });
+        return;
+      }
+      const data = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+      data._fileName = fileName;
+      jsonResponse(res, 200, data);
+      return;
+    }
+    if (req.method === "PUT") {
+      const body = JSON.parse(await readBody(req));
+      body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+      if (import_fs2.default.existsSync(filePath)) {
+        try {
+          const existing = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
+          if (existing.createdAt) body.createdAt = existing.createdAt;
+        } catch {
         }
-        if (url === CURRENT_CSS_ROUTE && req.method === "GET") {
-          try {
-            const content = import_fs.default.readFileSync(CSS_PATH, "utf-8");
-            jsonResponse(res, 200, { content });
-          } catch (err) {
-            jsonResponse(res, 500, { error: err.message });
-          }
-          return;
+      }
+      if (!body.createdAt) body.createdAt = body.updatedAt;
+      import_fs2.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 preset" });
+        return;
+      }
+      if (import_fs2.default.existsSync(filePath)) {
+        import_fs2.default.unlinkSync(filePath);
+        if (presetsResource.getActiveName() === fileName) {
+          presetsResource.setActiveName("default");
         }
-        const match = url.match(TOKEN_BY_NAME_REGEX);
-        if (match) {
-          const fileName = match[1];
-          const filePath = import_path.default.join(TOKENS_DIR, `${fileName}.json`);
-          if (req.method === "GET") {
-            try {
-              if (!import_fs.default.existsSync(filePath)) {
-                jsonResponse(res, 404, { error: "Not found" });
-                return;
-              }
-              const data = JSON.parse(import_fs.default.readFileSync(filePath, "utf-8"));
-              data._fileName = fileName;
-              jsonResponse(res, 200, data);
-            } catch (err) {
-              jsonResponse(res, 500, { error: err.message });
-            }
-            return;
-          }
-          if (req.method === "PUT") {
-            try {
-              const body = JSON.parse(await readBody(req));
-              body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-              if (import_fs.default.existsSync(filePath)) {
-                try {
-                  const existing = JSON.parse(import_fs.default.readFileSync(filePath, "utf-8"));
-                  if (existing.createdAt) body.createdAt = existing.createdAt;
-                } catch {
-                }
-              }
-              if (!body.createdAt) body.createdAt = body.updatedAt;
-              backupTokenFile(filePath, fileName);
-              import_fs.default.writeFileSync(filePath, JSON.stringify(body, null, 2));
-              if (fileName === getProductionFileName()) {
-                syncTokensToCss(fileName);
-              }
-              jsonResponse(res, 200, { ok: true, fileName });
-            } catch (err) {
-              jsonResponse(res, 500, { error: err.message });
-            }
-            return;
-          }
-          if (req.method === "DELETE") {
-            if (fileName === "default") {
-              jsonResponse(res, 403, { error: "Cannot delete the default token file" });
-              return;
-            }
-            try {
-              if (import_fs.default.existsSync(filePath)) {
-                import_fs.default.unlinkSync(filePath);
-                if (getActiveFileName() === fileName) {
-                  import_fs.default.writeFileSync(ACTIVE_FILE, JSON.stringify({ activeFile: "default" }));
-                }
-              }
-              jsonResponse(res, 200, { ok: true });
-            } catch (err) {
-              jsonResponse(res, 500, { error: err.message });
-            }
-            return;
-          }
-          jsonResponse(res, 405, { error: "Method not allowed" });
-          return;
+      }
+      jsonResponse(res, 200, { ok: true });
+      return;
+    }
+  }
+  async function handleApplyPreset({ params, res }) {
+    const [fileName] = params;
+    const presetPath = presetsResource.filePath(fileName);
+    if (!import_fs2.default.existsSync(presetPath)) {
+      jsonResponse(res, 404, { error: "Preset not found" });
+      return;
+    }
+    const preset = JSON.parse(import_fs2.default.readFileSync(presetPath, "utf-8"));
+    const themeName = sanitizeFileName(preset.theme || "default");
+    const themePath = themesResource.filePath(themeName);
+    if (!import_fs2.default.existsSync(themePath)) {
+      jsonResponse(res, 422, { error: `Preset references missing theme: ${themeName}` });
+      return;
+    }
+    const knownComponents = new Set(listComponentNames());
+    const componentConfigs = preset.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);
+      const cfgPath = r.filePath(sanitized);
+      if (!import_fs2.default.existsSync(cfgPath)) {
+        jsonResponse(res, 422, {
+          error: `Preset references missing config: ${comp}/${sanitized}`
+        });
+        return;
+      }
+      apply.push([comp, sanitized]);
+    }
+    themesResource.setActiveName(themeName);
+    const themeData = JSON.parse(import_fs2.default.readFileSync(themePath, "utf-8"));
+    themeData._fileName = themeName;
+    for (const [comp, configFile] of apply) {
+      const r = componentResource(comp);
+      r.setActiveName(configFile);
+      const cfg = readComponentConfig(comp, configFile);
+      if (cfg) resolvedConfigs[comp] = { ...cfg, _fileName: configFile };
+    }
+    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 };
+    }
+    presetsResource.setActiveName(fileName);
+    jsonResponse(res, 200, {
+      ok: true,
+      preset: { ...preset, _fileName: fileName },
+      theme: themeData,
+      componentConfigs: resolvedConfigs
+    });
+  }
+  function methodNotAllowed({ res }) {
+    jsonResponse(res, 405, { error: "Method not allowed" });
+  }
+  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 },
+    // 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: "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 },
+    { method: "POST", pattern: COMP_PRODUCTION_REGEX, handler: methodNotAllowed },
+    { method: "DELETE", pattern: COMP_PRODUCTION_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 },
+    { method: "DELETE", pattern: COMP_BY_NAME_REGEX, handler: handleComponentConfigByName },
+    { 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 },
+    // 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 },
+    // Presets — list / active are exact strings, must run before regexes
+    { method: "GET", pattern: PRESETS_ROUTE, handler: handleListPresets },
+    { method: "GET", pattern: PRESETS_ACTIVE_ROUTE, handler: handleGetActivePreset },
+    { method: "PUT", pattern: PRESETS_ACTIVE_ROUTE, handler: handleSetActivePreset },
+    // Presets — :name/apply (more specific than :name)
+    { method: "PUT", pattern: PRESET_APPLY_REGEX, handler: handleApplyPreset },
+    { method: "POST", pattern: PRESET_APPLY_REGEX, handler: methodNotAllowed },
+    { method: "GET", pattern: PRESET_APPLY_REGEX, handler: methodNotAllowed },
+    { method: "DELETE", pattern: PRESET_APPLY_REGEX, handler: methodNotAllowed },
+    // Presets — :name CRUD (broadest preset route, runs last)
+    { method: "GET", pattern: PRESET_BY_NAME_REGEX, handler: handlePresetByName },
+    { method: "PUT", pattern: PRESET_BY_NAME_REGEX, handler: handlePresetByName },
+    { method: "DELETE", pattern: PRESET_BY_NAME_REGEX, handler: handlePresetByName }
+  ];
+  return {
+    name: "theme-file-api",
+    config() {
+      return {
+        define: {
+          __PROJECT_ROOT__: JSON.stringify(process.cwd())
         }
-        next();
+      };
+    },
+    configureServer(server) {
+      ensureThemesDir();
+      ensureComponentConfigsDir();
+      ensurePresetsDir();
+      server.middlewares.use(async (req, res, next) => {
+        const handled = await dispatch(req, res, routes);
+        if (!handled) next();
       });
+    },
+    handleHotUpdate(ctx) {
+      const normalized = import_path2.default.resolve(ctx.file);
+      if (!normalized.startsWith(COMPONENTS_SRC_DIR)) return;
+      if (!normalized.endsWith(".svelte")) return;
+      const comp = componentNameFromFile(normalized);
+      generateDefaultConfig(comp, normalized);
     }
   };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  tokenFileApi
+  themeFileApi
 });