@motion-proto/live-tokens 0.25.1 → 0.28.0

package/.claude/skills/live-tokens-build-page/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: live-tokens-build-page
-description: Apply the @motion-proto/live-tokens project conventions when building a page: use shipped components from the catalogue, reference theme tokens (never hex/pixel literals), mount routes dynamically, register pageSources, and import site.css per-page. Use when the user asks to build / create / lay out a page, route, hero, marketing page, landing page, dashboard, settings screen, or pricing page; add a route; place / drop / use an existing component on a page; or assemble a screen from the live-tokens catalogue. For component-choice decisions, see live-tokens-pick-component. For authoring a brand-new component, see live-tokens-create-component.
+description: Apply the @motion-proto/live-tokens project conventions when building a page: use shipped components from the catalogue, reference theme tokens (never hex/pixel literals), mount routes dynamically, register each route's page source, and import site.css per-page. Use when the user asks to build / create / lay out a page, route, hero, marketing page, landing page, dashboard, settings screen, or pricing page; add a route; place / drop / use an existing component on a page; or assemble a screen from the live-tokens catalogue. For component-choice decisions, see live-tokens-pick-component. For authoring a brand-new component, see live-tokens-create-component.
 ---
 
 # Building pages in a live-tokens project
@@ -18,8 +18,10 @@ To place children at specific page-column positions, span the parent grid (`grid
 
 ## Wiring
 
-- Mount routes dynamically in `App.svelte` with `$derived.by(() => import(...))`. Static top-level imports evaluate every page module at boot and leak page CSS into editor routes.
-- Register each route in `<LiveEditorOverlay pageSources={...} />` so the "Page Source" button opens the file in VS Code.
+- Add the route the way `App.svelte` already wires routes:
+  - **`<LiveTokensRouter pages={...}>`** (the usual case): add a `pages` entry as `lazy: () => import('./YourPage.svelte')` with a `source: 'src/...'` (and a `label`/`icon` to show it in the nav rail). For a route you can't enumerate (a `/:id`, a path prefix, a gated page), add a `resolve(path) => RouteEntry | null` instead of a `pages` key; same entry shape, so `props` and `source` (hence "Page Source") work identically.
+  - **Manual `<LiveEditorOverlay>`**: dispatch with `$derived.by(() => import(...))` and register the route's source in `pageSources={...}`.
+  Either way use `lazy`, not a static top-level import: static imports evaluate every page module at boot and leak page CSS into the editor routes.
 - Import `site.css` from each page's `<script>` block, never from `main.ts` (would leak into editor routes).
 
 ## Avoid
@@ -32,4 +34,4 @@ To place children at specific page-column positions, span the parent grid (`grid
 
 ## Verify
 
-In dev: change a colour in `/editor` and confirm your page repaints (proves token usage). The overlay's "Page Source" button on the new route opens the page in VS Code (proves the `pageSources` entry). `ColumnsOverlay` (Cmd+G) shows content sitting inside `--columns-max-width`.
+In dev: change a colour in `/editor` and confirm your page repaints (proves token usage). The overlay's "Page Source" button on the new route opens the page in VS Code (proves the route's `source`). `ColumnsOverlay` (Cmd+G) shows content sitting inside `--columns-max-width`.

package/README.md

@@ -11,7 +11,7 @@ A foundational design system for quickly styling and building Svelte + Vite micr
 - **Theme editor** (`/editor` route, dev-only) — the home of real-time token editing. Save themes to disk as JSON, promote one to "production" to bake it into a static `tokens.css` for the build.
 - **Per-component editor** (`/components` route, dev-only) — the home of real-time component-alias editing. Pick token aliases per component without writing CSS.
 - **Live editor overlay** — pins to the top-right of every dev page. Opens the editor in a side panel or floating window so you edit *on the page you're styling*, not in a separate tab. Includes a "Page Source" button that opens the current page's `.svelte` file in VS Code.
-- **Preset bundles** — capture a whole site configuration (active theme + every component's active config) as a single portable artifact. Drop a preset into a new project to restore the full styling in one step.
+- **Manifests** — a manifest captures a whole site configuration as one portable artifact: the theme in one slot, every component in its own slot, each holding either the shipped default or a custom file. Export it as a bundle and import it into another project to restore the full styling in one step.
 - **Vite plugin** — hosts the `/api/live-tokens/{themes,component-configs,manifests}/*` routes that persist your edits to disk as you make them. The single namespace keeps live-tokens' routes from colliding with anything your app serves under `/api`.
 - **Claude Code skill suite** — three bundled skills so you can drive the package in plain English. `build-page` composes pages from the shipped components. `pick-component` decides between confusing pairs (TabBar vs SegmentedControl, Card vs CollapsibleSection). `create-component` authors a new editable component against the project's naming, state-model, and import rules. One command to install all three: `npx @motion-proto/live-tokens setup-claude`. See [Claude Code skills](#claude-code-skills) below.
 
@@ -122,7 +122,7 @@ bootLiveTokens(App, '#app', {
 ```
 
 `<LiveTokensRouter>` owns the dev overlay (`<LiveEditorOverlay>` +
-`<ColumnsOverlay>`), the editor routes (`/editor`, `/components`), the
+`<ColumnsOverlay>`), the editor routes (`/editor`, `/components`, `/docs`), the
 in-app link-click interception, and the nav-rail/page-source plumbing the
 overlay needs. Each entry in `pages` is one of your routes; entries with a
 `label` appear in the overlay's nav rail. Pass pages as `lazy: () => import('./Page.svelte')`
@@ -131,6 +131,28 @@ visited; pass `component: PageComponent` instead for an eagerly-imported
 page. The editor routes are dispatched internally, so you don't have to
 dynamic-import the library's editor pages yourself.
 
+For routes you can't enumerate ahead of time (a `/:id` or `/:slug`, a path
+prefix, or a page shown only when some condition holds), add a `resolve`
+function from the current path to a `RouteEntry`; return `null` to fall
+through. It's plain code, so params, prefixes, and gating are a regex and an
+`if`, and the package ships no route syntax of its own. Resolution order is
+`pages[path]`, then `resolve(path)`, then the `pages['/']` fallback, so adding
+`resolve` never changes how existing `pages` entries match. A resolved entry
+can carry `props`, letting one page component serve many paths (such as the
+matched id), and its `source` gives the dynamic route a working "Page Source"
+button just like a static one.
+
+```svelte
+<LiveTokensRouter
+  pages={{ '/': { lazy: () => import('./Home.svelte'), label: 'Home' } }}
+  resolve={(path) => {
+    const m = path.match(/^\/module\/(.+)$/);
+    if (!m) return null;
+    return { lazy: () => import('./ModulePage.svelte'), props: { id: m[1] }, source: 'src/ModulePage.svelte' };
+  }}
+/>
+```
+
 You can also relocate or disable a default editor route via the
 `editorRoutes` prop: `<LiveTokensRouter pages={…} editorRoutes={{ editor: '/admin/editor', components: false }} />`.
 Pass a string to move a route; pass `false` to remove the route entirely
@@ -147,7 +169,10 @@ individual init functions (`initCssVarSync`, `initRouter`,
 `<LiveEditorOverlay>`, `<ColumnsOverlay>`, and the editor page exports
 (`@motion-proto/live-tokens/editor`,
 `@motion-proto/live-tokens/component-editor-page`) all stay exported. Use
-them directly if you need a custom shell or non-standard route dispatch.
+them directly to build a custom shell: render arbitrary markup per route, host
+a foreign matcher, or drive the overlay yourself. You do **not** need this for
+dynamic or gated routes; reach for `resolve` above, which keeps the overlay,
+nav rail, and page-source intact.
 
 ### Use components
 

package/dist-plugin/index.cjs

@@ -477,6 +477,8 @@ function versionedFileResourceServer(opts) {
   const activePath = import_path.default.join(dir, "_active.json");
   const productionPath = import_path.default.join(dir, "_production.json");
   const defaultName = opts.defaultName ?? "default";
+  const resolvedDir = import_path.default.resolve(dir);
+  const resolvedPackageDir = opts.packageDir ? import_path.default.resolve(opts.packageDir) : null;
   function ensureDir() {
     if (!import_fs.default.existsSync(dir)) {
       import_fs.default.mkdirSync(dir, { recursive: true });
@@ -493,6 +495,37 @@ function versionedFileResourceServer(opts) {
   function filePath(name) {
     return import_path.default.join(dir, `${name}.json`);
   }
+  function existingPath(name) {
+    const local = filePath(name);
+    if (import_fs.default.existsSync(local)) return local;
+    if (resolvedPackageDir) {
+      const pkg = import_path.default.join(resolvedPackageDir, `${name}.json`);
+      if (import_fs.default.existsSync(pkg)) return pkg;
+    }
+    return null;
+  }
+  function readJson(name) {
+    const resolved = existingPath(name);
+    if (!resolved) return null;
+    return JSON.parse(import_fs.default.readFileSync(resolved, "utf-8"));
+  }
+  function listNames() {
+    const names = [];
+    const seen = /* @__PURE__ */ new Set();
+    const collect = (d) => {
+      if (!d || !import_fs.default.existsSync(d)) return;
+      for (const f of import_fs.default.readdirSync(d)) {
+        if (!f.endsWith(".json") || f.startsWith("_")) continue;
+        const name = f.slice(0, -".json".length);
+        if (seen.has(name)) continue;
+        seen.add(name);
+        names.push(name);
+      }
+    };
+    collect(resolvedDir);
+    if (resolvedPackageDir && resolvedPackageDir !== resolvedDir) collect(resolvedPackageDir);
+    return names;
+  }
   function getActiveName() {
     try {
       const data = JSON.parse(import_fs.default.readFileSync(activePath, "utf-8"));
@@ -522,6 +555,9 @@ function versionedFileResourceServer(opts) {
     ensureDir,
     ensureMeta,
     filePath,
+    existingPath,
+    readJson,
+    listNames,
     getActiveName,
     getProductionName,
     setActiveName,
@@ -826,36 +862,42 @@ function themeFileApi(opts) {
     "system",
     "components"
   );
+  const packageDataDir = import_path3.default.resolve(
+    import_path3.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 COMPONENTS_SCAN_DIRS = [...consumerComponentDirs];
   if (!COMPONENTS_SCAN_DIRS.includes(packageComponentsDir) && import_fs3.default.existsSync(packageComponentsDir)) {
     COMPONENTS_SCAN_DIRS.push(packageComponentsDir);
   }
-  const LEGACY_PRESETS_DIR = import_path3.default.resolve("presets");
   const themesResource = versionedFileResourceServer({
-    dir: THEMES_DIR
+    dir: THEMES_DIR,
+    packageDir: packageThemesDir
   });
   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) });
+      r = versionedFileResourceServer({
+        dir: import_path3.default.join(COMPONENT_CONFIGS_DIR, comp),
+        packageDir: import_path3.default.join(packageComponentConfigsDir, comp)
+      });
       componentResourceCache.set(comp, r);
     }
     return r;
   }
-  const manifestsResource = versionedFileResourceServer({ dir: MANIFESTS_DIR });
+  const manifestsResource = versionedFileResourceServer({
+    dir: MANIFESTS_DIR,
+    packageDir: packageManifestsDir
+  });
   function ensureThemesDir() {
     themesResource.ensureDir();
-    if (!import_fs3.default.existsSync(import_path3.default.join(THEMES_DIR, "default.json"))) {
-      const defaultTheme = {
-        name: "Default Theme",
-        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-        updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
-        editorConfigs: {},
-        cssVariables: {}
-      };
-      import_fs3.default.writeFileSync(import_path3.default.join(THEMES_DIR, "default.json"), JSON.stringify(defaultTheme, null, 2));
-    }
     themesResource.ensureMeta();
   }
   function readBody(req) {
@@ -919,10 +961,9 @@ function themeFileApi(opts) {
     lines.push("/* tokens.css holds developer-authored defaults; this file holds editor overrides. */");
     lines.push("");
     const productionThemeName = themesResource.getProductionName();
-    const themePath = import_path3.default.join(THEMES_DIR, `${productionThemeName}.json`);
+    const themeData = themesResource.readJson(productionThemeName);
     let themeVarCount = 0;
-    if (import_fs3.default.existsSync(themePath)) {
-      const themeData = JSON.parse(import_fs3.default.readFileSync(themePath, "utf-8"));
+    if (themeData) {
       const cssVars = { ...themeData.cssVariables || {} };
       Object.assign(cssVars, palettesToVars(themeData.editorConfigs ?? {}));
       const resolvedFontVars = resolveFontStacks(themeData);
@@ -987,9 +1028,8 @@ function themeFileApi(opts) {
     regenerateTokensCss();
   }
   function syncFontsToCss(fileName) {
-    const themePath = import_path3.default.join(THEMES_DIR, `${fileName}.json`);
-    if (!import_fs3.default.existsSync(themePath)) return;
-    const themeData = JSON.parse(import_fs3.default.readFileSync(themePath, "utf-8"));
+    const themeData = themesResource.readJson(fileName);
+    if (!themeData) return;
     const sources = themeData.fontSources;
     if (!sources) return;
     const lines = [];
@@ -1149,28 +1189,7 @@ ${lines.join("\n")}
     }
   }
   function ensureManifestsDir() {
-    if (!import_fs3.default.existsSync(MANIFESTS_DIR) && import_fs3.default.existsSync(LEGACY_PRESETS_DIR)) {
-      import_fs3.default.renameSync(LEGACY_PRESETS_DIR, MANIFESTS_DIR);
-      const legacyProd = import_path3.default.join(MANIFESTS_DIR, "_production.json");
-      if (import_fs3.default.existsSync(legacyProd)) import_fs3.default.unlinkSync(legacyProd);
-    }
     manifestsResource.ensureDir();
-    const defaultPath = import_path3.default.join(MANIFESTS_DIR, "default.json");
-    if (!import_fs3.default.existsSync(defaultPath)) {
-      const componentConfigs = {};
-      for (const comp of listComponentNames()) {
-        componentConfigs[comp] = componentResource(comp).getActiveName();
-      }
-      const now = (/* @__PURE__ */ new Date()).toISOString();
-      const defaultManifest = {
-        name: "Default",
-        createdAt: now,
-        updatedAt: now,
-        theme: themesResource.getActiveName(),
-        componentConfigs
-      };
-      import_fs3.default.writeFileSync(defaultPath, JSON.stringify(defaultManifest, null, 2));
-    }
     if (!import_fs3.default.existsSync(manifestsResource.activePath)) {
       import_fs3.default.writeFileSync(
         manifestsResource.activePath,
@@ -1178,12 +1197,10 @@ ${lines.join("\n")}
       );
     } else {
       const activeName = manifestsResource.getActiveName();
-      if (!import_fs3.default.existsSync(manifestsResource.filePath(activeName))) {
+      if (manifestsResource.existingPath(activeName) === null) {
         manifestsResource.setActiveName("default");
       }
     }
-    const stragglerProd = import_path3.default.join(MANIFESTS_DIR, "_production.json");
-    if (import_fs3.default.existsSync(stragglerProd)) import_fs3.default.unlinkSync(stragglerProd);
   }
   function patchActiveManifest(field, comp, fileName) {
     const activeFile = manifestsResource.getActiveName();
@@ -1234,10 +1251,8 @@ ${lines.join("\n")}
     return JSON.stringify(a) === JSON.stringify(b);
   }
   function readComponentConfig(comp, name) {
-    const filePath = componentResource(comp).filePath(name);
-    if (!import_fs3.default.existsSync(filePath)) return null;
     try {
-      return JSON.parse(import_fs3.default.readFileSync(filePath, "utf-8"));
+      return componentResource(comp).readJson(name);
     } catch {
       return null;
     }
@@ -1263,14 +1278,12 @@ ${lines.join("\n")}
   const MANIFEST_BY_NAME_REGEX = new RegExp(`^${escapedBase}/manifests/([a-z0-9\\-_]+)$`);
   async function handleListThemes(_ctx) {
     const activeFile = themesResource.getActiveName();
-    const files = import_fs3.default.readdirSync(THEMES_DIR).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
-      const filePath = import_path3.default.join(THEMES_DIR, f);
-      const data = JSON.parse(import_fs3.default.readFileSync(filePath, "utf-8"));
-      const fileName = f.replace(".json", "");
+    const files = themesResource.listNames().map((fileName) => {
+      const data = themesResource.readJson(fileName);
       return {
-        name: data.name || fileName,
+        name: data?.name || fileName,
         fileName,
-        updatedAt: data.updatedAt || "",
+        updatedAt: data?.updatedAt || "",
         isActive: fileName === activeFile
       };
     });
@@ -1278,19 +1291,19 @@ ${lines.join("\n")}
   }
   async function handleGetActiveTheme({ res }) {
     const activeFile = themesResource.getActiveName();
-    const filePath = themesResource.filePath(activeFile);
-    if (!import_fs3.default.existsSync(filePath)) {
+    const raw = themesResource.readJson(activeFile);
+    if (!raw) {
       jsonResponse(res, 404, { error: "Active theme not found" });
       return;
     }
-    const data = normalizeTheme(JSON.parse(import_fs3.default.readFileSync(filePath, "utf-8")));
+    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 (!import_fs3.default.existsSync(themesResource.filePath(fileName))) {
+    if (themesResource.existingPath(fileName) === null) {
       jsonResponse(res, 404, { error: "Theme not found" });
       return;
     }
@@ -1299,12 +1312,12 @@ ${lines.join("\n")}
   }
   async function handleGetProductionTheme({ res }) {
     const prodFile = themesResource.getProductionName();
-    const filePath = themesResource.filePath(prodFile);
-    if (!import_fs3.default.existsSync(filePath)) {
+    const raw = themesResource.readJson(prodFile);
+    if (!raw) {
       jsonResponse(res, 200, { fileName: prodFile, name: prodFile, cssVariables: {} });
       return;
     }
-    const data = normalizeTheme(JSON.parse(import_fs3.default.readFileSync(filePath, "utf-8")));
+    const data = normalizeTheme(raw);
     jsonResponse(res, 200, {
       fileName: prodFile,
       name: data.name || prodFile,
@@ -1315,7 +1328,7 @@ ${lines.join("\n")}
   async function handleSetProductionTheme({ req, res }) {
     const body = JSON.parse(await readBody(req));
     const fileName = sanitizeFileName(body.name || "default");
-    if (!import_fs3.default.existsSync(themesResource.filePath(fileName))) {
+    if (themesResource.existingPath(fileName) === null) {
       jsonResponse(res, 404, { error: "Theme not found" });
       return;
     }
@@ -1331,28 +1344,33 @@ ${lines.join("\n")}
     syncFontsToCss(fileName);
     syncComponentsToCss();
     patchActiveManifest("theme", null, fileName);
-    const data = JSON.parse(import_fs3.default.readFileSync(themesResource.filePath(fileName), "utf-8"));
+    const data = themesResource.readJson(fileName);
     jsonResponse(res, 200, {
       ok: true,
       fileName,
-      name: data.name || fileName,
-      updatedAt: data.updatedAt || ""
+      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_fs3.default.existsSync(filePath)) {
+      const raw = themesResource.readJson(fileName);
+      if (!raw) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = normalizeTheme(JSON.parse(import_fs3.default.readFileSync(filePath, "utf-8")));
+      const data = normalizeTheme(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)" });
+        return;
+      }
       const body = JSON.parse(await readBody(req));
       body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
       if (import_fs3.default.existsSync(filePath)) {
@@ -1421,8 +1439,7 @@ ${lines.join("\n")}
     const body = JSON.parse(await readBody(req));
     const fileName = sanitizeFileName(body.name || "default");
     const r = componentResource(comp);
-    const configPath = r.filePath(fileName);
-    if (!import_fs3.default.existsSync(configPath)) {
+    if (r.existingPath(fileName) === null) {
       jsonResponse(res, 404, { error: "Config not found" });
       return;
     }
@@ -1446,8 +1463,7 @@ ${lines.join("\n")}
     const body = JSON.parse(await readBody(req));
     const fileName = sanitizeFileName(body.name || "default");
     const r = componentResource(comp);
-    const configPath = r.filePath(fileName);
-    if (!import_fs3.default.existsSync(configPath)) {
+    if (r.existingPath(fileName) === null) {
       jsonResponse(res, 404, { error: "Config not found" });
       return;
     }
@@ -1475,11 +1491,12 @@ ${lines.join("\n")}
     const r = componentResource(comp);
     const configPath = r.filePath(name);
     if (req.method === "GET") {
-      if (!import_fs3.default.existsSync(configPath)) {
+      const raw = r.readJson(name);
+      if (!raw) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = JSON.parse(import_fs3.default.readFileSync(configPath, "utf-8"));
+      const data = raw;
       data._fileName = name;
       jsonResponse(res, 200, data);
       return;
@@ -1537,14 +1554,12 @@ ${lines.join("\n")}
     }
     const activeFile = r.getActiveName();
     const productionFile = r.getProductionName();
-    const files = import_fs3.default.readdirSync(r.dir).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
-      const filePath = import_path3.default.join(r.dir, f);
-      const data = JSON.parse(import_fs3.default.readFileSync(filePath, "utf-8"));
-      const fileName = f.replace(".json", "");
+    const files = r.listNames().map((fileName) => {
+      const data = r.readJson(fileName);
       return {
-        name: data.name || fileName,
+        name: data?.name || fileName,
         fileName,
-        updatedAt: data.updatedAt || "",
+        updatedAt: data?.updatedAt || "",
         isActive: fileName === activeFile,
         isProduction: fileName === productionFile
       };
@@ -1553,14 +1568,12 @@ ${lines.join("\n")}
   }
   async function handleListManifests({ res }) {
     const activeFile = manifestsResource.getActiveName();
-    const files = import_fs3.default.readdirSync(MANIFESTS_DIR).filter((f) => f.endsWith(".json") && !f.startsWith("_")).map((f) => {
-      const filePath = import_path3.default.join(MANIFESTS_DIR, f);
-      const data = JSON.parse(import_fs3.default.readFileSync(filePath, "utf-8"));
-      const fileName = f.replace(".json", "");
+    const files = manifestsResource.listNames().map((fileName) => {
+      const data = manifestsResource.readJson(fileName);
       return {
-        name: data.name || fileName,
+        name: data?.name || fileName,
         fileName,
-        updatedAt: data.updatedAt || "",
+        updatedAt: data?.updatedAt || "",
         isActive: fileName === activeFile,
         isProtected: fileName === "default"
       };
@@ -1569,19 +1582,19 @@ ${lines.join("\n")}
   }
   async function handleGetActiveManifest({ res }) {
     const activeFile = manifestsResource.getActiveName();
-    const filePath = manifestsResource.filePath(activeFile);
-    if (!import_fs3.default.existsSync(filePath)) {
+    const raw = manifestsResource.readJson(activeFile);
+    if (!raw) {
       jsonResponse(res, 404, { error: "Active manifest not found" });
       return;
     }
-    const data = JSON.parse(import_fs3.default.readFileSync(filePath, "utf-8"));
+    const data = raw;
     data._fileName = activeFile;
     jsonResponse(res, 200, data);
   }
   async function handleSetActiveManifest({ req, res }) {
     const body = JSON.parse(await readBody(req));
     const fileName = sanitizeFileName(body.name || "default");
-    if (!import_fs3.default.existsSync(manifestsResource.filePath(fileName))) {
+    if (manifestsResource.existingPath(fileName) === null) {
       jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
@@ -1592,11 +1605,12 @@ ${lines.join("\n")}
     const [fileName] = params;
     const filePath = manifestsResource.filePath(fileName);
     if (req.method === "GET") {
-      if (!import_fs3.default.existsSync(filePath)) {
+      const raw = manifestsResource.readJson(fileName);
+      if (!raw) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
       }
-      const data = JSON.parse(import_fs3.default.readFileSync(filePath, "utf-8"));
+      const data = raw;
       data._fileName = fileName;
       jsonResponse(res, 200, data);
       return;
@@ -1637,15 +1651,13 @@ ${lines.join("\n")}
   }
   async function handleApplyManifest({ params, res }) {
     const [fileName] = params;
-    const manifestPath = manifestsResource.filePath(fileName);
-    if (!import_fs3.default.existsSync(manifestPath)) {
+    const manifest = manifestsResource.readJson(fileName);
+    if (!manifest) {
       jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
-    const manifest = JSON.parse(import_fs3.default.readFileSync(manifestPath, "utf-8"));
     const themeName = sanitizeFileName(manifest.theme || "default");
-    const themePath = themesResource.filePath(themeName);
-    if (!import_fs3.default.existsSync(themePath)) {
+    if (themesResource.existingPath(themeName) === null) {
       jsonResponse(res, 422, { error: `Manifest references missing theme: ${themeName}` });
       return;
     }
@@ -1657,8 +1669,7 @@ ${lines.join("\n")}
       if (!knownComponents.has(comp)) continue;
       const sanitized = sanitizeFileName(String(configFile) || "default");
       const r = componentResource(comp);
-      const cfgPath = r.filePath(sanitized);
-      if (!import_fs3.default.existsSync(cfgPath)) {
+      if (r.existingPath(sanitized) === null) {
         jsonResponse(res, 422, {
           error: `Manifest references missing config: ${comp}/${sanitized}`
         });
@@ -1670,7 +1681,7 @@ ${lines.join("\n")}
     themesResource.setProductionName(themeName);
     syncTokensToCss(themeName);
     syncFontsToCss(themeName);
-    const themeData = normalizeTheme(JSON.parse(import_fs3.default.readFileSync(themePath, "utf-8")));
+    const themeData = normalizeTheme(themesResource.readJson(themeName));
     themeData._fileName = themeName;
     for (const [comp, configFile] of apply) {
       const r = componentResource(comp);
@@ -1696,33 +1707,30 @@ ${lines.join("\n")}
   }
   async function handleExportManifest({ params, res }) {
     const [fileName] = params;
-    const manifestPath = manifestsResource.filePath(fileName);
-    if (!import_fs3.default.existsSync(manifestPath)) {
+    const manifest = manifestsResource.readJson(fileName);
+    if (!manifest) {
       jsonResponse(res, 404, { error: "Manifest not found" });
       return;
     }
-    const manifest = JSON.parse(import_fs3.default.readFileSync(manifestPath, "utf-8"));
     const themeName = sanitizeFileName(manifest.theme || "default");
-    const themePath = themesResource.filePath(themeName);
-    if (!import_fs3.default.existsSync(themePath)) {
+    const theme = themesResource.readJson(themeName);
+    if (!theme) {
       jsonResponse(res, 422, { error: `Manifest references missing theme: ${themeName}` });
       return;
     }
-    const theme = JSON.parse(import_fs3.default.readFileSync(themePath, "utf-8"));
     const knownComponents = new Set(listComponentNames());
     const componentConfigs = {};
     for (const [comp, configFile] of Object.entries(manifest.componentConfigs ?? {})) {
       if (!knownComponents.has(comp)) continue;
       const sanitized = sanitizeFileName(String(configFile) || "default");
       if (sanitized === "default") continue;
-      const cfgPath = componentResource(comp).filePath(sanitized);
-      if (!import_fs3.default.existsSync(cfgPath)) {
+      const cfg = componentResource(comp).readJson(sanitized);
+      if (!cfg) {
         jsonResponse(res, 422, {
           error: `Manifest references missing config: ${comp}/${sanitized}`
         });
         return;
       }
-      const cfg = JSON.parse(import_fs3.default.readFileSync(cfgPath, "utf-8"));
       componentConfigs[`${comp}/${sanitized}`] = cfg;
     }
     const bundle = {
@@ -1742,11 +1750,8 @@ ${lines.join("\n")}
     );
     res.end(JSON.stringify(bundle, null, 2));
   }
-  function nextAvailableName2(resourceFilePath, baseName) {
-    return nextAvailableName(
-      (n) => import_fs3.default.existsSync(resourceFilePath(n)),
-      sanitizeFileName(baseName)
-    );
+  function nextAvailableName2(exists, baseName) {
+    return nextAvailableName(exists, sanitizeFileName(baseName));
   }
   async function handleImportManifest({ req, res }) {
     let bundle;
@@ -1776,7 +1781,7 @@ ${lines.join("\n")}
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const originalThemeName = sanitizeFileName(bundle.manifest.theme || "default");
     const finalThemeName = nextAvailableName2(
-      (n) => themesResource.filePath(n),
+      (n) => themesResource.existingPath(n) !== null,
       originalThemeName
     );
     if (finalThemeName !== originalThemeName) {
@@ -1795,7 +1800,7 @@ ${lines.join("\n")}
       if (!knownComponents.has(comp)) continue;
       const r = componentResource(comp);
       const finalName = nextAvailableName2(
-        (n) => r.filePath(n),
+        (n) => r.existingPath(n) !== null,
         originalName
       );
       if (finalName !== originalName) {
@@ -1828,7 +1833,7 @@ ${lines.join("\n")}
     if (!rewrittenManifest.createdAt) rewrittenManifest.createdAt = now;
     const originalManifestName = sanitizeFileName(bundle.manifest.name || "imported");
     const finalManifestName = nextAvailableName2(
-      (n) => manifestsResource.filePath(n),
+      (n) => manifestsResource.existingPath(n) !== null,
       originalManifestName
     );
     if (finalManifestName !== originalManifestName) {