@motion-proto/live-tokens 0.6.1 → 0.7.1

package/README.md

@@ -33,7 +33,7 @@ export default defineConfig({
     svelte(),
     themeFileApi({
       themesDir: 'themes',
-      tokensCssPath: 'src/styles/tokens.css',
+      tokensCssPath: 'src/system/styles/tokens.css',
     }),
   ],
   optimizeDeps: {
@@ -44,7 +44,7 @@ export default defineConfig({
 
 The `themeFileApi` plugin:
 - Seeds `themes/` with a default theme on first dev-server start.
-- Discovers components at `src/components/*.svelte` and seeds `component-configs/{comp}/default.json` from each component's `:global(:root)` block.
+- Discovers components at `src/system/components/*.svelte` and seeds `component-configs/{comp}/default.json` from each component's `:global(:root)` block.
 - Hosts the `/api/*` routes the editor uses to save and load themes + per-component configs.
 - Auto-injects `__PROJECT_ROOT__` for the overlay's "Page Source" link.
 
@@ -61,6 +61,7 @@ import {
   initEditorStore,
 } from '@motion-proto/live-tokens';
 import App from './App.svelte';
+import { mount } from 'svelte';
 
 configureEditor({ storagePrefix: 'my-app-' });
 
@@ -72,7 +73,7 @@ async function boot() {
   if (import.meta.env.DEV) {
     await initializeTheme();
   }
-  new App({ target: document.getElementById('app')! });
+  mount(App, { target: document.getElementById('app')! });
 }
 
 boot();
@@ -95,7 +96,7 @@ boot();
     { path: '/components', label: 'Components', icon: 'fa-puzzle-piece' },
   ]}
   pageSources={{
-    '/': 'src/pages/Home.svelte',
+    '/': 'src/app/Home.svelte',
   }}
 />
 <ColumnsOverlay />
@@ -135,12 +136,12 @@ CSS variables on `:root`.
 You can use the package's default as a starting point:
 
 ```ts
-import '@motion-proto/live-tokens/starter/tokens.css';
-import '@motion-proto/live-tokens/starter/site.css';   // optional: themed h1/p/a styles
-import '@motion-proto/live-tokens/starter/fonts.css';  // optional: Fraunces + Manrope @font-face
+import '@motion-proto/live-tokens/app/tokens.css';
+import '@motion-proto/live-tokens/app/site.css';   // optional: themed h1/p/a styles
+import '@motion-proto/live-tokens/app/fonts.css';  // optional: Fraunces + Manrope @font-face
 ```
 
-…or copy `node_modules/@motion-proto/live-tokens/src/styles/tokens.css` into
+…or copy `node_modules/@motion-proto/live-tokens/src/system/styles/tokens.css` into
 your project and edit. The editor will seed `themes/default.json` on first
 run and you can promote your edits back into the file.
 
@@ -150,7 +151,7 @@ The minimum a consumer needs after `npm install @motion-proto/live-tokens`:
 
 ```ts
 // src/main.ts
-import '@motion-proto/live-tokens/starter/tokens.css';
+import '@motion-proto/live-tokens/app/tokens.css';
 import { mount } from 'svelte';
 import App from './App.svelte';
 
@@ -189,12 +190,12 @@ npm install
 npm run dev
 ```
 
-Open http://localhost:5173 and replace `src/pages/Home.svelte` with your content. The rest of the wiring is already done — it's the same code the npm package ships, just with the App-shell scaffolding included.
+Open http://localhost:5173 and replace `src/app/Home.svelte` with your content. The rest of the wiring is already done — it's the same code the npm package ships, just with the App-shell scaffolding included.
 
 ## How the editor ships changes to prod
 
 1. Edit in `/editor` or `/components`. Saves write to `themes/{name}.json` and `component-configs/{comp}/{name}.json`.
-2. Promote a theme to "production." Its variables are written into `src/styles/tokens.css` and backed up under `src/styles/_backups/`.
+2. Promote a theme to "production." Its variables are written into `src/system/styles/tokens.css` and backed up under `src/system/styles/_backups/`.
 3. `npm run build` bundles `tokens.css` as plain CSS. No editor code, no JSON lookups, no dev surfaces ship to prod.
 
 ## File ownership — what the plugin writes
@@ -213,8 +214,8 @@ Knowing which files the plugin touches matters when upgrading the package or wor
 **At dev-time editor actions, these files get rewritten by your explicit save/promote:**
 
 - `themes/{name}.json` — every save in the editor.
-- `src/styles/tokens.css` — fully regenerated when you save or promote the production theme. **Treat this as a build artifact.** Hand-edits get clobbered next time the production theme is saved; promote a theme instead.
-- `src/styles/fonts.css` — same rule: regenerated from the theme's font sources.
+- `src/system/styles/tokens.css` — fully regenerated when you save or promote the production theme. **Treat this as a build artifact.** Hand-edits get clobbered next time the production theme is saved; promote a theme instead.
+- `src/system/styles/fonts.css` — same rule: regenerated from the theme's font sources.
 - `component-configs/{comp}/{name}.json` — every save of a per-component config.
 
 ## Maintainer notes — publishing

package/dist-plugin/index.cjs

@@ -27,18 +27,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/vite-plugin/index.ts
+// vite-plugin/index.ts
 var index_exports = {};
 __export(index_exports, {
   themeFileApi: () => themeFileApi
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/vite-plugin/themeFileApi.ts
+// vite-plugin/themeFileApi.ts
 var import_fs2 = __toESM(require("fs"), 1);
 var import_path2 = __toESM(require("path"), 1);
 
-// src/lib/parsers/globalRootBlock.ts
+// src/editor/core/themes/parsers/globalRootBlock.ts
 function extractGlobalRootBody(source) {
   const re = /:global\(:root\)\s*\{([^}]*)\}/g;
   const bodies = [];
@@ -49,12 +49,12 @@ function extractGlobalRootBody(source) {
   return bodies.join("\n");
 }
 
-// src/lib/files/versionedFileResource.ts
+// src/editor/core/storage/files/versionedFileResourceClient.ts
 function sanitizeFileName(name) {
   return name.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9\-_]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "") || "unnamed";
 }
 
-// src/vite-plugin/files/versionedFileResource.ts
+// vite-plugin/files/versionedFileResourceServer.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
 function versionedFileResourceServer(opts) {
@@ -114,7 +114,7 @@ function versionedFileResourceServer(opts) {
   };
 }
 
-// src/vite-plugin/files/routeTable.ts
+// vite-plugin/files/routeTable.ts
 async function dispatch(req, res, routes) {
   const url = req.url || "";
   const method = req.method || "GET";
@@ -142,15 +142,35 @@ async function dispatch(req, res, routes) {
   return false;
 }
 
-// src/vite-plugin/themeFileApi.ts
+// vite-plugin/themeFileApi.ts
+var import_node_url = require("url");
+var import_meta = {};
+var PKG_VERSION = (() => {
+  try {
+    let dir = import_path2.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url));
+    for (let i = 0; i < 4; i++) {
+      const p = import_path2.default.join(dir, "package.json");
+      if (import_fs2.default.existsSync(p)) {
+        const json = JSON.parse(import_fs2.default.readFileSync(p, "utf-8"));
+        if (json?.name === "@motion-proto/live-tokens") return json.version ?? "";
+      }
+      const up = import_path2.default.dirname(dir);
+      if (up === dir) break;
+      dir = up;
+    }
+  } catch {
+  }
+  return "";
+})();
 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 COMPONENTS_SRC_DIR = opts.componentsSrcDir ? import_path2.default.resolve(opts.componentsSrcDir) : import_path2.default.resolve("src/system/components");
+  const MANIFESTS_DIR = opts.manifestsDir ? import_path2.default.resolve(opts.manifestsDir) : import_path2.default.resolve("manifests");
+  const LEGACY_PRESETS_DIR = import_path2.default.resolve("presets");
   const themesResource = versionedFileResourceServer({
     dir: THEMES_DIR
   });
@@ -163,7 +183,7 @@ function themeFileApi(opts) {
     }
     return r;
   }
-  const presetsResource = versionedFileResourceServer({ dir: PRESETS_DIR });
+  const manifestsResource = versionedFileResourceServer({ dir: MANIFESTS_DIR });
   function ensureThemesDir() {
     themesResource.ensureDir();
     if (!import_fs2.default.existsSync(import_path2.default.join(THEMES_DIR, "default.json"))) {
@@ -359,25 +379,63 @@ ${newVars}
       r.ensureMeta();
     }
   }
-  function ensurePresetsDir() {
-    presetsResource.ensureDir();
-    const defaultPath = import_path2.default.join(PRESETS_DIR, "default.json");
+  function ensureManifestsDir() {
+    if (!import_fs2.default.existsSync(MANIFESTS_DIR) && import_fs2.default.existsSync(LEGACY_PRESETS_DIR)) {
+      import_fs2.default.renameSync(LEGACY_PRESETS_DIR, MANIFESTS_DIR);
+      const legacyProd = import_path2.default.join(MANIFESTS_DIR, "_production.json");
+      if (import_fs2.default.existsSync(legacyProd)) import_fs2.default.unlinkSync(legacyProd);
+    }
+    manifestsResource.ensureDir();
+    const defaultPath = import_path2.default.join(MANIFESTS_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 Preset",
+      const defaultManifest = {
+        name: "Default",
         createdAt: now,
         updatedAt: now,
         theme: themesResource.getActiveName(),
         componentConfigs
       };
-      import_fs2.default.writeFileSync(defaultPath, JSON.stringify(defaultPreset, null, 2));
+      import_fs2.default.writeFileSync(defaultPath, JSON.stringify(defaultManifest, null, 2));
+    }
+    if (!import_fs2.default.existsSync(manifestsResource.activePath)) {
+      import_fs2.default.writeFileSync(
+        manifestsResource.activePath,
+        JSON.stringify({ activeFile: "default" })
+      );
+    } else {
+      const activeName = manifestsResource.getActiveName();
+      if (!import_fs2.default.existsSync(manifestsResource.filePath(activeName))) {
+        manifestsResource.setActiveName("default");
+      }
     }
-    presetsResource.ensureMeta();
+    const stragglerProd = import_path2.default.join(MANIFESTS_DIR, "_production.json");
+    if (import_fs2.default.existsSync(stragglerProd)) import_fs2.default.unlinkSync(stragglerProd);
+  }
+  function patchActiveManifest(field, comp, fileName) {
+    const activeFile = manifestsResource.getActiveName();
+    if (activeFile === "default") return false;
+    const manifestPath = manifestsResource.filePath(activeFile);
+    if (!import_fs2.default.existsSync(manifestPath)) return false;
+    let manifest;
+    try {
+      manifest = JSON.parse(import_fs2.default.readFileSync(manifestPath, "utf-8"));
+    } catch {
+      return false;
+    }
+    if (field === "theme") {
+      manifest.theme = fileName;
+    } else if (field === "component" && comp) {
+      manifest.componentConfigs = manifest.componentConfigs ?? {};
+      manifest.componentConfigs[comp] = fileName;
+    }
+    manifest.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+    import_fs2.default.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+    return true;
   }
   function readComponentConfig(comp, name) {
     const filePath = componentResource(comp).filePath(name);
@@ -442,16 +500,15 @@ ${COMPONENT_OVERRIDES_END}
   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 PRESETS_PRODUCTION_ROUTE = `${API_BASE}/presets/production`;
+  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 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\\-_]+)$`);
+  const MANIFEST_APPLY_REGEX = new RegExp(`^${escapedBase}/manifests/([a-z0-9\\-_]+)/apply$`);
+  const MANIFEST_BY_NAME_REGEX = new RegExp(`^${escapedBase}/manifests/([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) => {
@@ -510,10 +567,18 @@ ${COMPONENT_OVERRIDES_END}
       jsonResponse(res, 404, { error: "Theme not found" });
       return;
     }
+    if (manifestsResource.getActiveName() === "default") {
+      jsonResponse(res, 409, {
+        error: "Active manifest is protected. Save As first.",
+        code: "ACTIVE_IS_PROTECTED"
+      });
+      return;
+    }
     themesResource.setProductionName(fileName);
     syncTokensToCss(fileName);
     syncFontsToCss(fileName);
     syncComponentsToCss();
+    patchActiveManifest("theme", null, fileName);
     const data = JSON.parse(import_fs2.default.readFileSync(themesResource.filePath(fileName), "utf-8"));
     jsonResponse(res, 200, {
       ok: true,
@@ -560,6 +625,13 @@ ${COMPONENT_OVERRIDES_END}
         jsonResponse(res, 403, { error: "Cannot delete the default theme" });
         return;
       }
+      if (themesResource.getProductionName() === fileName) {
+        jsonResponse(res, 403, {
+          error: "Cannot delete the production theme. Adopt a different theme first.",
+          code: "PRODUCTION_THEME"
+        });
+        return;
+      }
       if (import_fs2.default.existsSync(filePath)) {
         import_fs2.default.unlinkSync(filePath);
         if (themesResource.getActiveName() === fileName) {
@@ -627,9 +699,17 @@ ${COMPONENT_OVERRIDES_END}
       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,
@@ -719,112 +799,46 @@ ${COMPONENT_OVERRIDES_END}
     });
     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);
+  async function handleListManifests({ res }) {
+    const activeFile = manifestsResource.getActiveName();
+    const files = import_fs2.default.readdirSync(MANIFESTS_DIR).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
+      const filePath = import_path2.default.join(MANIFESTS_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
+        isActive: fileName === activeFile,
+        isProtected: fileName === "default"
       };
     });
     jsonResponse(res, 200, { files, activeFile });
   }
-  async function handleGetActivePreset({ res }) {
-    const activeFile = presetsResource.getActiveName();
-    const filePath = presetsResource.filePath(activeFile);
+  async function handleGetActiveManifest({ res }) {
+    const activeFile = manifestsResource.getActiveName();
+    const filePath = manifestsResource.filePath(activeFile);
     if (!import_fs2.default.existsSync(filePath)) {
-      jsonResponse(res, 404, { error: "Active preset not found" });
+      jsonResponse(res, 404, { error: "Active manifest 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 }) {
+  async function handleSetActiveManifest({ 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" });
+    if (!import_fs2.default.existsSync(manifestsResource.filePath(fileName))) {
+      jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
-    presetsResource.setActiveName(fileName);
+    manifestsResource.setActiveName(fileName);
     jsonResponse(res, 200, { ok: true, activeFile: fileName });
   }
-  async function handleGetProductionPreset({ res }) {
-    const prodFile = presetsResource.getProductionName();
-    const filePath = presetsResource.filePath(prodFile);
-    if (!import_fs2.default.existsSync(filePath)) {
-      jsonResponse(res, 200, {
-        fileName: prodFile,
-        name: prodFile,
-        theme: "default",
-        componentConfigs: {},
-        updatedAt: ""
-      });
-      return;
-    }
-    const data = JSON.parse(import_fs2.default.readFileSync(filePath, "utf-8"));
-    jsonResponse(res, 200, {
-      fileName: prodFile,
-      name: data.name || prodFile,
-      theme: data.theme || "default",
-      componentConfigs: data.componentConfigs || {},
-      updatedAt: data.updatedAt || ""
-    });
-  }
-  async function handleSetProductionPreset({ req, res }) {
-    const body = JSON.parse(await readBody(req));
-    const fileName = sanitizeFileName(body.name || "default");
-    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");
-    if (!import_fs2.default.existsSync(themesResource.filePath(themeName))) {
-      jsonResponse(res, 422, { error: `Preset references missing theme: ${themeName}` });
-      return;
-    }
-    const knownComponents = new Set(listComponentNames());
-    const componentConfigs = preset.componentConfigs ?? {};
-    const apply = [];
-    for (const [comp, configFile] of Object.entries(componentConfigs)) {
-      if (!knownComponents.has(comp)) continue;
-      const sanitized = sanitizeFileName(String(configFile) || "default");
-      if (!import_fs2.default.existsSync(componentResource(comp).filePath(sanitized))) {
-        jsonResponse(res, 422, {
-          error: `Preset references missing config: ${comp}/${sanitized}`
-        });
-        return;
-      }
-      apply.push([comp, sanitized]);
-    }
-    themesResource.setProductionName(themeName);
-    for (const [comp, configFile] of apply) {
-      componentResource(comp).setProductionName(configFile);
-    }
-    presetsResource.setProductionName(fileName);
-    syncTokensToCss(themeName);
-    syncFontsToCss(themeName);
-    syncComponentsToCss();
-    jsonResponse(res, 200, {
-      ok: true,
-      fileName,
-      name: preset.name || fileName,
-      theme: themeName,
-      componentConfigs: Object.fromEntries(apply),
-      updatedAt: preset.updatedAt || ""
-    });
-  }
-  async function handlePresetByName({ params, req, res }) {
+  async function handleManifestByName({ params, req, res }) {
     const [fileName] = params;
-    const filePath = presetsResource.filePath(fileName);
+    const filePath = manifestsResource.filePath(fileName);
     if (req.method === "GET") {
       if (!import_fs2.default.existsSync(filePath)) {
         jsonResponse(res, 404, { error: "Not found" });
@@ -837,7 +851,7 @@ ${COMPONENT_OVERRIDES_END}
     }
     if (req.method === "PUT") {
       if (fileName === "default") {
-        jsonResponse(res, 403, { error: "Cannot overwrite the default preset" });
+        jsonResponse(res, 403, { error: "Cannot overwrite the default manifest" });
         return;
       }
       const body = JSON.parse(await readBody(req));
@@ -856,35 +870,35 @@ ${COMPONENT_OVERRIDES_END}
     }
     if (req.method === "DELETE") {
       if (fileName === "default") {
-        jsonResponse(res, 403, { error: "Cannot delete the default preset" });
+        jsonResponse(res, 403, { error: "Cannot delete the default manifest" });
         return;
       }
       if (import_fs2.default.existsSync(filePath)) {
         import_fs2.default.unlinkSync(filePath);
-        if (presetsResource.getActiveName() === fileName) {
-          presetsResource.setActiveName("default");
+        if (manifestsResource.getActiveName() === fileName) {
+          manifestsResource.setActiveName("default");
         }
       }
       jsonResponse(res, 200, { ok: true });
       return;
     }
   }
-  async function handleApplyPreset({ params, res }) {
+  async function handleApplyManifest({ params, res }) {
     const [fileName] = params;
-    const presetPath = presetsResource.filePath(fileName);
-    if (!import_fs2.default.existsSync(presetPath)) {
-      jsonResponse(res, 404, { error: "Preset not found" });
+    const manifestPath = manifestsResource.filePath(fileName);
+    if (!import_fs2.default.existsSync(manifestPath)) {
+      jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
-    const preset = JSON.parse(import_fs2.default.readFileSync(presetPath, "utf-8"));
-    const themeName = sanitizeFileName(preset.theme || "default");
+    const manifest = JSON.parse(import_fs2.default.readFileSync(manifestPath, "utf-8"));
+    const themeName = sanitizeFileName(manifest.theme || "default");
     const themePath = themesResource.filePath(themeName);
     if (!import_fs2.default.existsSync(themePath)) {
-      jsonResponse(res, 422, { error: `Preset references missing theme: ${themeName}` });
+      jsonResponse(res, 422, { error: `Manifest references missing theme: ${themeName}` });
       return;
     }
     const knownComponents = new Set(listComponentNames());
-    const componentConfigs = preset.componentConfigs ?? {};
+    const componentConfigs = manifest.componentConfigs ?? {};
     const resolvedConfigs = {};
     const apply = [];
     for (const [comp, configFile] of Object.entries(componentConfigs)) {
@@ -894,7 +908,7 @@ ${COMPONENT_OVERRIDES_END}
       const cfgPath = r.filePath(sanitized);
       if (!import_fs2.default.existsSync(cfgPath)) {
         jsonResponse(res, 422, {
-          error: `Preset references missing config: ${comp}/${sanitized}`
+          error: `Manifest references missing config: ${comp}/${sanitized}`
         });
         return;
       }
@@ -915,10 +929,10 @@ ${COMPONENT_OVERRIDES_END}
       const cfg = readComponentConfig(comp, activeName);
       if (cfg) resolvedConfigs[comp] = { ...cfg, _fileName: activeName };
     }
-    presetsResource.setActiveName(fileName);
+    manifestsResource.setActiveName(fileName);
     jsonResponse(res, 200, {
       ok: true,
-      preset: { ...preset, _fileName: fileName },
+      manifest: { ...manifest, _fileName: fileName },
       theme: themeData,
       componentConfigs: resolvedConfigs
     });
@@ -956,35 +970,34 @@ ${COMPONENT_OVERRIDES_END}
     { 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 / production 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 },
-    { method: "GET", pattern: PRESETS_PRODUCTION_ROUTE, handler: handleGetProductionPreset },
-    { method: "PUT", pattern: PRESETS_PRODUCTION_ROUTE, handler: handleSetProductionPreset },
-    // 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 }
+    // 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 — :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 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 }
   ];
   return {
     name: "theme-file-api",
     config() {
       return {
         define: {
-          __PROJECT_ROOT__: JSON.stringify(process.cwd())
+          __PROJECT_ROOT__: JSON.stringify(process.cwd()),
+          __APP_VERSION__: JSON.stringify(PKG_VERSION)
         }
       };
     },
     configureServer(server) {
       ensureThemesDir();
       ensureComponentConfigsDir();
-      ensurePresetsDir();
+      ensureManifestsDir();
       server.middlewares.use(async (req, res, next) => {
         const handled = await dispatch(req, res, routes);
         if (!handled) next();

package/dist-plugin/index.d.cts

@@ -7,7 +7,7 @@ interface ThemeFileApiOptions {
     apiBase?: string;
     componentConfigsDir?: string;
     componentsSrcDir?: string;
-    presetsDir?: string;
+    manifestsDir?: string;
 }
 declare function themeFileApi(opts: ThemeFileApiOptions): Plugin;
 

package/dist-plugin/index.d.ts

@@ -7,7 +7,7 @@ interface ThemeFileApiOptions {
     apiBase?: string;
     componentConfigsDir?: string;
     componentsSrcDir?: string;
-    presetsDir?: string;
+    manifestsDir?: string;
 }
 declare function themeFileApi(opts: ThemeFileApiOptions): Plugin;