foss-design 0.5.0 → 0.6.0

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 // src/cli/index.ts
-import path25 from "path";
+import path26 from "path";
 import { parseArgs } from "util";
 
 // src/core/paths.ts
@@ -134,12 +134,12 @@ function resolveFrom(anchor, request) {
 
 // src/cli/commands/build.ts
 import { spawnSync } from "child_process";
-import fs10 from "fs";
-import path11 from "path";
+import fs12 from "fs";
+import path12 from "path";
 
 // src/build/static.ts
-import fs9 from "fs";
-import path10 from "path";
+import fs11 from "fs";
+import path11 from "path";
 import { build } from "vite";
 
 // src/core/png.ts
@@ -307,8 +307,8 @@ function ensureThumb(file) {
 }
 
 // src/core/project.ts
-import fs6 from "fs";
-import path6 from "path";
+import fs7 from "fs";
+import path7 from "path";
 
 // src/core/canvas.ts
 import { createHash } from "crypto";
@@ -346,8 +346,8 @@ function routeError(pattern) {
   }
   return null;
 }
-function split(path26) {
-  return path26.split("/").filter(Boolean);
+function split(path27) {
+  return path27.split("/").filter(Boolean);
 }
 function compileRoute(pattern) {
   return {
@@ -366,8 +366,8 @@ function decode2(part) {
     return part;
   }
 }
-function scoreRoute(route2, path26) {
-  const parts = split(path26.split(/[?#]/)[0] ?? "").map(decode2);
+function scoreRoute(route2, path27) {
+  const parts = split(path27.split(/[?#]/)[0] ?? "").map(decode2);
   const walk2 = (s, p) => {
     if (s === route2.segments.length) return p === parts.length ? 0 : null;
     const segment = route2.segments[s];
@@ -385,11 +385,11 @@ function scoreRoute(route2, path26) {
   };
   return walk2(0, 0);
 }
-function matchRoute(entries, path26) {
+function matchRoute(entries, path27) {
   let best = null;
   for (const entry of entries) {
     for (const route2 of entry.routes) {
-      const score = scoreRoute(route2, path26);
+      const score = scoreRoute(route2, path27);
       if (score !== null && (!best || score > best.score)) best = { score, value: entry.value };
     }
   }
@@ -426,6 +426,8 @@ var DesignConfigSchema = z.strictObject({
   alias: z.record(z.string(), z.string()).optional(),
   /** Extra folders Tailwind scans for class names, relative to the project root. */
   sources: z.array(z.string()).optional(),
+  /** A folder served at the root of every screen, like Vite's `public`, relative to the project root. */
+  public: z.string().min(1).optional(),
   port: z.number().int().min(1).max(65535).optional()
 });
 var SystemConfigSchema = z.strictObject({
@@ -510,9 +512,9 @@ var CanvasSchema = z.strictObject({
   pages: z.array(z.unknown()).min(1, "add at least one page")
 });
 var ID_PATTERN = /^[a-z0-9][a-z0-9_-]*$/i;
-function formatPath(base, path26) {
+function formatPath(base, path27) {
   let out = base;
-  for (const part of path26) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
+  for (const part of path27) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
   return out;
 }
 function describeZodError(error, base = "") {
@@ -749,7 +751,7 @@ function loadCanvas(paths, canvasId, urls, snapshots) {
     };
     doc.pages.push(out);
   });
-  checkNavigation(doc, screens, issues, fileRel, (file2) => relToRoot(paths, file2));
+  checkNavigation(doc, canvasCodeFiles(dir, screens), issues, fileRel, (file2) => relToRoot(paths, file2));
   return { doc, screens };
 }
 var GO_IMPORT = /import\s*\{[^}]*\bgo\b[^}]*\}\s*from\s*['"]@design\/runtime['"]/;
@@ -768,7 +770,27 @@ function legacyGoLines(file) {
   const calls = [...source.matchAll(GO_USE)].map((match) => lineOf(match.index)).filter((line) => line !== lineOf(imported.index));
   return calls.length ? [...new Set(calls)] : [lineOf(imported.index)];
 }
-function checkNavigation(doc, screens, issues, canvasFile, rel) {
+var CODE_FILE = /\.(?:[cm]?[jt]sx?|html?)$/i;
+function canvasCodeFiles(dir, screens) {
+  const files = new Set(screens.map((screen) => screen.file));
+  const visit = (current) => {
+    let entries;
+    try {
+      entries = fs3.readdirSync(current, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
+      const full = path3.join(current, entry.name);
+      if (entry.isDirectory()) visit(full);
+      else if (entry.isFile() && CODE_FILE.test(entry.name)) files.add(full);
+    }
+  };
+  visit(dir);
+  return [...files];
+}
+function checkNavigation(doc, codeFiles, issues, canvasFile, rel) {
   const frames = doc.pages.flatMap(
     (page) => page.sections.flatMap(
       (section) => section.items.filter((item) => item.kind === "screen" || item.kind === "url").map((item) => ({ page, item }))
@@ -787,7 +809,7 @@ function checkNavigation(doc, screens, issues, canvasFile, rel) {
         });
     }
   }
-  for (const file of new Set(screens.map((screen) => screen.file))) {
+  for (const file of codeFiles) {
     for (const line of legacyGoLines(file)) {
       issues.push({ severity: "error", file: rel(file), at: `line ${line}`, message: GO_REMOVED });
     }
@@ -809,13 +831,49 @@ function summarize(canvas) {
   };
 }
 
+// src/core/public.ts
+import fs4 from "fs";
+import path4 from "path";
+function publicFiles(dir) {
+  const files = [];
+  let root;
+  try {
+    root = fs4.realpathSync(dir);
+  } catch {
+    return files;
+  }
+  const visit = (current) => {
+    let entries;
+    try {
+      entries = fs4.readdirSync(current, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
+      const full = path4.join(current, entry.name);
+      if (entry.isDirectory()) visit(full);
+      else if (entry.isFile()) files.push(toPosix(path4.relative(dir, full)));
+      else if (entry.isSymbolicLink()) {
+        try {
+          const target = fs4.realpathSync(full);
+          if (isInside(root, target) && fs4.statSync(target).isFile()) files.push(toPosix(path4.relative(dir, full)));
+        } catch {
+        }
+      }
+    }
+  };
+  visit(dir);
+  return files.sort();
+}
+
 // src/core/system.ts
-import fs5 from "fs";
-import path5 from "path";
+import fs6 from "fs";
+import path6 from "path";
 
 // src/core/tokens.ts
-import fs4 from "fs";
-import path4 from "path";
+import fs5 from "fs";
+import path5 from "path";
 import postcss from "postcss";
 var NAMESPACES = [
   ["--color-", "color"],
@@ -974,12 +1032,12 @@ function readStylesheets(entry) {
   const seen = /* @__PURE__ */ new Set();
   const files = [];
   const walk2 = (file) => {
-    if (seen.has(file) || !fs4.existsSync(file)) return;
+    if (seen.has(file) || !fs5.existsSync(file)) return;
     seen.add(file);
-    const css2 = fs4.readFileSync(file, "utf8");
+    const css2 = fs5.readFileSync(file, "utf8");
     const imports = [...css2.matchAll(/@import\s+(?:url\()?\s*["']([^"']+)["']/g)].map((m) => m[1]);
     for (const spec of imports) {
-      if (spec.startsWith("./") || spec.startsWith("../")) walk2(path4.resolve(path4.dirname(file), spec));
+      if (spec.startsWith("./") || spec.startsWith("../")) walk2(path5.resolve(path5.dirname(file), spec));
     }
     files.push({ file, css: css2 });
   };
@@ -1115,11 +1173,11 @@ var COMPONENT_EXT = [".tsx", ".jsx", ".ts", ".js", ".vue", ".svelte", ".html"];
 var IMAGE_EXT = /* @__PURE__ */ new Set([".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif", ".svg", ".ico"]);
 var FONT_EXT = /* @__PURE__ */ new Set([".woff", ".woff2", ".ttf", ".otf"]);
 function listFiles(dir, deep = false) {
-  if (!fs5.existsSync(dir)) return [];
+  if (!fs6.existsSync(dir)) return [];
   const out = [];
-  for (const entry of fs5.readdirSync(dir, { withFileTypes: true })) {
+  for (const entry of fs6.readdirSync(dir, { withFileTypes: true })) {
     if (entry.name.startsWith(".")) continue;
-    const full = path5.join(dir, entry.name);
+    const full = path6.join(dir, entry.name);
     if (entry.isDirectory()) {
       if (deep) out.push(...listFiles(full, true));
     } else out.push(full);
@@ -1127,16 +1185,16 @@ function listFiles(dir, deep = false) {
   return out.sort();
 }
 function guessSources(componentsDir, stem) {
-  if (!fs5.existsSync(componentsDir)) return [];
+  if (!fs6.existsSync(componentsDir)) return [];
   const wanted = slugify(stem);
   for (const file of listFiles(componentsDir)) {
-    const ext = path5.extname(file);
-    if (COMPONENT_EXT.includes(ext) && slugify(path5.basename(file, ext)) === wanted) return [file];
+    const ext = path6.extname(file);
+    if (COMPONENT_EXT.includes(ext) && slugify(path6.basename(file, ext)) === wanted) return [file];
   }
-  for (const entry of fs5.readdirSync(componentsDir, { withFileTypes: true })) {
+  for (const entry of fs6.readdirSync(componentsDir, { withFileTypes: true })) {
     if (entry.isDirectory() && slugify(entry.name) === wanted) {
-      const files = listFiles(path5.join(componentsDir, entry.name)).filter(
-        (f) => COMPONENT_EXT.includes(path5.extname(f))
+      const files = listFiles(path6.join(componentsDir, entry.name)).filter(
+        (f) => COMPONENT_EXT.includes(path6.extname(f))
       );
       if (files.length) return files;
     }
@@ -1144,14 +1202,14 @@ function guessSources(componentsDir, stem) {
   return [];
 }
 function loadSystem(paths, urls) {
-  if (!fs5.existsSync(paths.system)) return null;
+  if (!fs6.existsSync(paths.system)) return null;
   const issues = [];
-  const configFile = path5.join(paths.system, "system.json");
+  const configFile = path6.join(paths.system, "system.json");
   const report = (severity, file, message, at) => issues.push({ severity, file: relToRoot(paths, file), message, at });
   let config = null;
-  if (fs5.existsSync(configFile)) {
+  if (fs6.existsSync(configFile)) {
     try {
-      const parsed = SystemConfigSchema.safeParse(JSON.parse(fs5.readFileSync(configFile, "utf8")));
+      const parsed = SystemConfigSchema.safeParse(JSON.parse(fs6.readFileSync(configFile, "utf8")));
       if (parsed.success) config = parsed.data;
       else for (const issue of describeZodError(parsed.error)) report("error", configFile, issue.message, issue.at);
     } catch (error) {
@@ -1160,36 +1218,36 @@ function loadSystem(paths, urls) {
   } else {
     report("warning", configFile, 'system.json is missing; run `design system init` or add { "name": "\u2026" }');
   }
-  const tokensFile = path5.join(paths.system, "tokens.css");
+  const tokensFile = path6.join(paths.system, "tokens.css");
   let stylesheet = null;
   if (config?.stylesheet) {
-    stylesheet = path5.resolve(paths.system, config.stylesheet);
-    if (!fs5.existsSync(stylesheet)) {
+    stylesheet = path6.resolve(paths.system, config.stylesheet);
+    if (!fs6.existsSync(stylesheet)) {
       report("error", configFile, `stylesheet not found: ${config.stylesheet}`, "stylesheet");
       stylesheet = null;
     }
   }
-  const tokenEntry = stylesheet ?? (fs5.existsSync(tokensFile) ? tokensFile : null);
+  const tokenEntry = stylesheet ?? (fs6.existsSync(tokensFile) ? tokensFile : null);
   const tokens = tokenEntry ? parseTokens(readStylesheets(tokenEntry)) : [];
   if (!tokenEntry) report("warning", tokensFile, "no tokens.css: screens get the default Tailwind theme");
-  const specimensDir = path5.join(paths.system, "specimens");
-  const componentsDir = path5.join(paths.system, "components");
+  const specimensDir = path6.join(paths.system, "specimens");
+  const componentsDir = path6.join(paths.system, "components");
   const components = [];
   const specimens = [];
   const usedIds = /* @__PURE__ */ new Set();
   for (const file of listFiles(specimensDir)) {
-    const ext = path5.extname(file).toLowerCase();
+    const ext = path6.extname(file).toLowerCase();
     if (!SPECIMEN_EXT.has(ext)) continue;
-    const stem = path5.basename(file, ext);
+    const stem = path6.basename(file, ext);
     let id2 = slugify(stem);
     if (usedIds.has(id2)) id2 = `${id2}-${usedIds.size + 1}`;
     usedIds.add(id2);
-    const tags = parseDocTags(fs5.readFileSync(file, "utf8"));
-    const sources = (tags.source ?? []).flatMap((value) => value.split(/[\s,]+/)).filter(Boolean).map((value) => path5.resolve(path5.dirname(file), value));
+    const tags = parseDocTags(fs6.readFileSync(file, "utf8"));
+    const sources = (tags.source ?? []).flatMap((value) => value.split(/[\s,]+/)).filter(Boolean).map((value) => path6.resolve(path6.dirname(file), value));
     for (const source of sources) {
-      if (!fs5.existsSync(source)) report("warning", file, `@source not found: ${path5.relative(paths.system, source)}`);
+      if (!fs6.existsSync(source)) report("warning", file, `@source not found: ${path6.relative(paths.system, source)}`);
     }
-    const found = sources.filter((source) => fs5.existsSync(source));
+    const found = sources.filter((source) => fs6.existsSync(source));
     const title = tags.title?.[0] || titleize(stem);
     const format = ext === ".html" ? "html" : "module";
     components.push({
@@ -1215,10 +1273,10 @@ function loadSystem(paths, urls) {
     });
   }
   const guidelines = [];
-  for (const file of listFiles(path5.join(paths.system, "guidelines"))) {
-    if (path5.extname(file).toLowerCase() !== ".md") continue;
-    const stem = path5.basename(file, ".md");
-    const { data, body } = parseFrontmatter(fs5.readFileSync(file, "utf8"));
+  for (const file of listFiles(path6.join(paths.system, "guidelines"))) {
+    if (path6.extname(file).toLowerCase() !== ".md") continue;
+    const stem = path6.basename(file, ".md");
+    const { data, body } = parseFrontmatter(fs6.readFileSync(file, "utf8"));
     const prefix = /^(\d+)[-_. ]+(.*)$/.exec(stem);
     const order = data.order !== void 0 ? Number(data.order) : prefix ? Number(prefix[1]) : 1e3;
     guidelines.push({
@@ -1230,14 +1288,14 @@ function loadSystem(paths, urls) {
   }
   guidelines.sort((a, b) => a.order - b.order || a.title.localeCompare(b.title));
   const assets = [];
-  const assetsDir = path5.join(paths.system, "assets");
+  const assetsDir = path6.join(paths.system, "assets");
   for (const file of listFiles(assetsDir, true)) {
-    const ext = path5.extname(file).toLowerCase();
+    const ext = path6.extname(file).toLowerCase();
     assets.push({
-      name: path5.basename(file),
-      path: path5.relative(paths.system, file).split(path5.sep).join("/"),
+      name: path6.basename(file),
+      path: path6.relative(paths.system, file).split(path6.sep).join("/"),
       url: urls.file(relToDesign(paths, file)),
-      size: fs5.statSync(file).size,
+      size: fs6.statSync(file).size,
       kind: IMAGE_EXT.has(ext) ? "image" : FONT_EXT.has(ext) ? "font" : "other"
     });
   }
@@ -1273,7 +1331,7 @@ function loadSystem(paths, urls) {
     },
     config,
     stylesheet,
-    tokensFile: fs5.existsSync(tokensFile) ? tokensFile : null,
+    tokensFile: fs6.existsSync(tokensFile) ? tokensFile : null,
     specimens
   };
 }
@@ -1289,6 +1347,14 @@ function summarizeSystem(system) {
 }
 
 // src/core/project.ts
+function publicProblem(root, value) {
+  const dir = path7.resolve(root, value);
+  if (!fs7.existsSync(dir) || !fs7.statSync(dir).isDirectory()) return `no folder "${value}"`;
+  const real = fs7.realpathSync(dir);
+  const realRoot = fs7.realpathSync(root);
+  if (real === realRoot || !isInside(realRoot, real)) return `"${value}" is not a folder inside the project`;
+  return null;
+}
 var DesignProject = class {
   constructor(paths, urls, snapshots = null) {
     this.paths = paths;
@@ -1301,14 +1367,15 @@ var DesignProject = class {
   configCache = null;
   systemCache;
   canvasCache = /* @__PURE__ */ new Map();
+  publicCache = null;
   config() {
     if (this.configCache) return this.configCache;
     const issues = [];
     let config = {};
     const file = this.paths.config;
-    if (fs6.existsSync(file)) {
+    if (fs7.existsSync(file)) {
       try {
-        const parsed = DesignConfigSchema.safeParse(JSON.parse(fs6.readFileSync(file, "utf8")));
+        const parsed = DesignConfigSchema.safeParse(JSON.parse(fs7.readFileSync(file, "utf8")));
         if (parsed.success) config = parsed.data;
         else
           for (const issue of describeZodError(parsed.error))
@@ -1321,18 +1388,44 @@ var DesignProject = class {
         });
       }
     }
+    if (config.public !== void 0) {
+      const problem = publicProblem(this.paths.root, config.public);
+      if (problem) {
+        issues.push({ severity: "error", file: relToRoot(this.paths, file), at: "public", message: problem });
+        config = { ...config, public: void 0 };
+      }
+    }
     this.configCache = { config, issues };
     return this.configCache;
   }
+  /** The public folder from design.json, when it is a folder inside the project. */
+  publicDir() {
+    const configured = this.config().config.public;
+    return configured === void 0 ? null : path7.resolve(this.paths.root, configured);
+  }
+  /** The public folder's files, relative to it; `invalidatePublic` when they change. */
+  publicFiles() {
+    if (!this.publicCache) {
+      const dir = this.publicDir();
+      const list = dir ? publicFiles(dir) : [];
+      this.publicCache = { list, set: new Set(list) };
+    }
+    return this.publicCache.list;
+  }
+  /** Whether `rel` is a file the public folder serves (dot-files and links out of it are not). */
+  isPublicFile(rel) {
+    this.publicFiles();
+    return this.publicCache?.set.has(rel) ?? false;
+  }
   name() {
     const configured = this.config().config.name;
     if (configured) return configured;
     try {
-      const manifest = JSON.parse(fs6.readFileSync(path6.join(this.paths.root, "package.json"), "utf8"));
+      const manifest = JSON.parse(fs7.readFileSync(path7.join(this.paths.root, "package.json"), "utf8"));
       if (typeof manifest.name === "string" && manifest.name) return manifest.name;
     } catch {
     }
-    return path6.basename(this.paths.root);
+    return path7.basename(this.paths.root);
   }
   system() {
     if (this.systemCache === void 0) this.systemCache = loadSystem(this.paths, this.urls);
@@ -1344,7 +1437,7 @@ var DesignProject = class {
   canvas(id2) {
     const cached = this.canvasCache.get(id2);
     if (cached) return cached;
-    if (!fs6.existsSync(path6.join(this.paths.canvases, id2))) return null;
+    if (!fs7.existsSync(path7.join(this.paths.canvases, id2))) return null;
     const canvas = loadCanvas(this.paths, id2, this.urls, this.snapshots);
     this.canvasCache.set(id2, canvas);
     return canvas;
@@ -1382,6 +1475,10 @@ var DesignProject = class {
   }
   invalidateConfig() {
     this.configCache = null;
+    this.publicCache = null;
+  }
+  invalidatePublic() {
+    this.publicCache = null;
   }
   invalidateSystem() {
     this.systemCache = void 0;
@@ -1411,21 +1508,21 @@ var STATIC_URLS = {
 };
 
 // src/server/entries.ts
-import fs7 from "fs";
-import path7 from "path";
+import fs8 from "fs";
+import path8 from "path";
 var SYSTEM_CSS = "system.css";
 var HTML_BOOT = "html-boot.js";
 function writeIfChanged(file, content) {
   try {
-    if (fs7.readFileSync(file, "utf8") === content) return false;
+    if (fs8.readFileSync(file, "utf8") === content) return false;
   } catch {
   }
-  fs7.mkdirSync(path7.dirname(file), { recursive: true });
-  fs7.writeFileSync(file, content);
+  fs8.mkdirSync(path8.dirname(file), { recursive: true });
+  fs8.writeFileSync(file, content);
   return true;
 }
 function importPath(fromDir, file) {
-  const rel = toPosix(path7.relative(fromDir, file));
+  const rel = toPosix(path8.relative(fromDir, file));
   return rel.startsWith(".") ? rel : `./${rel}`;
 }
 var css = (file) => JSON.stringify(toPosix(file));
@@ -1438,10 +1535,10 @@ var Entries = class {
     return this.project.paths.entries;
   }
   systemCssFile() {
-    return path7.join(this.dir, SYSTEM_CSS);
+    return path8.join(this.dir, SYSTEM_CSS);
   }
   entryFile(source) {
-    return path7.join(this.dir, source.canvas, `${source.id}.js`);
+    return path8.join(this.dir, source.canvas, `${source.id}.js`);
   }
   /** Tailwind with the design tokens, or the stylesheet system.json names; scans every file in `.design`. */
   systemCss() {
@@ -1458,14 +1555,14 @@ var Entries = class {
       if (system?.tokensFile) lines.push(`@import ${css(system.tokensFile)};`);
     }
     lines.push(`@source ${css(paths.design)};`, `@source not ${css(paths.cache)};`);
-    lines.push(`@source not ${css(path7.join(paths.design, "node_modules"))};`);
-    for (const extra of config.sources ?? []) lines.push(`@source ${css(path7.resolve(paths.root, extra))};`);
+    lines.push(`@source not ${css(path8.join(paths.design, "node_modules"))};`);
+    for (const extra of config.sources ?? []) lines.push(`@source ${css(path8.resolve(paths.root, extra))};`);
     return `${lines.join("\n")}
 `;
   }
   entrySource(source) {
     const file = this.entryFile(source);
-    const dir = path7.dirname(file);
+    const dir = path8.dirname(file);
     const lines = [];
     if (source.system) lines.push(`import ${JSON.stringify(importPath(dir, this.systemCssFile()))}`);
     if (source.builtin === "typography") {
@@ -1480,7 +1577,7 @@ var Entries = class {
         `import * as screen from ${JSON.stringify(importPath(dir, source.file))}`,
         "",
         `const Screen = screen.default ?? Object.values(screen).find((value) => typeof value === 'function')`,
-        "if (!Screen) throw new Error(" + JSON.stringify(`${path7.basename(source.file)} has no component to render: export one as default`) + ")",
+        "if (!Screen) throw new Error(" + JSON.stringify(`${path8.basename(source.file)} has no component to render: export one as default`) + ")",
         "hmr(import.meta.hot)",
         "mount(Screen)"
       );
@@ -1493,14 +1590,14 @@ ${lines.join("\n")}
   sync() {
     writeIfChanged(this.systemCssFile(), this.systemCss());
     writeIfChanged(
-      path7.join(this.dir, HTML_BOOT),
+      path8.join(this.dir, HTML_BOOT),
       `// Generated by foss-design.
 import { boot, hmr } from '@design/runtime'
 boot()
 hmr(import.meta.hot)
 `
     );
-    const wanted = /* @__PURE__ */ new Set([this.systemCssFile(), path7.join(this.dir, HTML_BOOT)]);
+    const wanted = /* @__PURE__ */ new Set([this.systemCssFile(), path8.join(this.dir, HTML_BOOT)]);
     for (const source of this.project.sources()) {
       if (source.format !== "module") continue;
       const file = this.entryFile(source);
@@ -1509,18 +1606,27 @@ hmr(import.meta.hot)
     }
     this.prune(this.dir, wanted);
   }
-  /** Entry files, for dependency pre-bundling. */
+  /**
+   * What the dev server scans for dependencies before any frame loads: the generated entries,
+   * the HTML screens and the boot they load. A dependency found only once frames load makes
+   * Vite bundle again and fail the requests in flight (504 Outdated Optimize Dep).
+   */
   files() {
-    return this.project.sources().filter((source) => source.format === "module").map((source) => this.entryFile(source));
+    const files = [path8.join(this.dir, HTML_BOOT)];
+    for (const source of this.project.sources()) {
+      if (source.format === "module") files.push(this.entryFile(source));
+      else if (!source.builtin && fs8.existsSync(source.file)) files.push(source.file);
+    }
+    return files;
   }
   prune(dir, wanted) {
-    if (!fs7.existsSync(dir)) return;
-    for (const entry of fs7.readdirSync(dir, { withFileTypes: true })) {
-      const full = path7.join(dir, entry.name);
+    if (!fs8.existsSync(dir)) return;
+    for (const entry of fs8.readdirSync(dir, { withFileTypes: true })) {
+      const full = path8.join(dir, entry.name);
       if (entry.isDirectory()) {
         this.prune(full, wanted);
-        if (fs7.readdirSync(full).length === 0) fs7.rmdirSync(full);
-      } else if (!wanted.has(full)) fs7.rmSync(full);
+        if (fs8.readdirSync(full).length === 0) fs8.rmdirSync(full);
+      } else if (!wanted.has(full)) fs8.rmSync(full);
     }
   }
 };
@@ -1536,7 +1642,8 @@ function headTags(head) {
     props: source.props,
     theme: source.theme,
     snapshots: head.snapshots,
-    autoHeight: head.autoHeight
+    autoHeight: head.autoHeight,
+    public: head.public
   };
   const fallback = source.theme ?? head.theme;
   const theme2 = `(function(){var q=new URLSearchParams(location.search).get('theme');var t=${JSON.stringify(source.theme ?? null)}||(q==='dark'||q==='light'?q:${JSON.stringify(fallback)});var r=document.documentElement;r.dataset.theme=t;r.classList.toggle('dark',t==='dark');r.style.colorScheme=t})()`;
@@ -1587,68 +1694,68 @@ ${html}
 }
 
 // src/server/links.ts
-import fs8 from "fs";
-import path8 from "path";
+import fs9 from "fs";
+import path9 from "path";
 var SHIPPED_PACKAGES = ["react", "react-dom", "motion", "lucide-react", "clsx", "tailwind-merge"];
 function findPackageDir(fromDir, name, skip) {
-  let dir = path8.resolve(fromDir);
+  let dir = path9.resolve(fromDir);
   for (; ; ) {
-    const modules = path8.join(dir, "node_modules");
-    const candidate = path8.join(modules, name);
-    if (modules !== skip && fs8.existsSync(path8.join(candidate, "package.json"))) return candidate;
-    const parent = path8.dirname(dir);
+    const modules = path9.join(dir, "node_modules");
+    const candidate = path9.join(modules, name);
+    if (modules !== skip && fs9.existsSync(path9.join(candidate, "package.json"))) return candidate;
+    const parent = path9.dirname(dir);
     if (parent === dir) return null;
     dir = parent;
   }
 }
 function isLink(file) {
   try {
-    return fs8.lstatSync(file).isSymbolicLink();
+    return fs9.lstatSync(file).isSymbolicLink();
   } catch {
     return false;
   }
 }
 function linkShippedPackages(paths) {
-  const modules = path8.join(paths.design, "node_modules");
+  const modules = path9.join(paths.design, "node_modules");
   const linked = [];
   const allow = /* @__PURE__ */ new Set();
   for (const name of SHIPPED_PACKAGES) {
-    const link = path8.join(modules, name);
-    const placedByUser = fs8.existsSync(link) && !isLink(link);
+    const link = path9.join(modules, name);
+    const placedByUser = fs9.existsSync(link) && !isLink(link);
     const own = placedByUser ? link : findPackageDir(paths.design, name, modules);
     if (own) {
-      allow.add(path8.dirname(fs8.realpathSync(own)));
-      if (isLink(link)) fs8.unlinkSync(link);
+      allow.add(path9.dirname(fs9.realpathSync(own)));
+      if (isLink(link)) fs9.unlinkSync(link);
       continue;
     }
     const shipped = findPackageDir(PKG_ROOT, name);
     if (!shipped) continue;
-    const target2 = fs8.realpathSync(shipped);
-    allow.add(path8.dirname(target2));
+    const target2 = fs9.realpathSync(shipped);
+    allow.add(path9.dirname(target2));
     let current2 = null;
     try {
-      current2 = fs8.realpathSync(link);
+      current2 = fs9.realpathSync(link);
     } catch {
     }
     if (current2 !== target2) {
-      if (isLink(link)) fs8.unlinkSync(link);
-      fs8.mkdirSync(path8.dirname(link), { recursive: true });
-      fs8.symlinkSync(target2, link, process.platform === "win32" ? "junction" : "dir");
+      if (isLink(link)) fs9.unlinkSync(link);
+      fs9.mkdirSync(path9.dirname(link), { recursive: true });
+      fs9.symlinkSync(target2, link, process.platform === "win32" ? "junction" : "dir");
     }
     linked.push(name);
   }
-  const self = path8.join(modules, "foss-design");
-  const target = fs8.realpathSync(PKG_ROOT);
+  const self = path9.join(modules, "foss-design");
+  const target = fs9.realpathSync(PKG_ROOT);
   let current = null;
   try {
-    current = fs8.realpathSync(self);
+    current = fs9.realpathSync(self);
   } catch {
   }
   if (current !== target) {
-    if (isLink(self)) fs8.unlinkSync(self);
-    if (!fs8.existsSync(self)) {
-      fs8.mkdirSync(modules, { recursive: true });
-      fs8.symlinkSync(target, self, process.platform === "win32" ? "junction" : "dir");
+    if (isLink(self)) fs9.unlinkSync(self);
+    if (!fs9.existsSync(self)) {
+      fs9.mkdirSync(modules, { recursive: true });
+      fs9.symlinkSync(target, self, process.platform === "win32" ? "junction" : "dir");
     }
   }
   allow.add(target);
@@ -1656,7 +1763,9 @@ function linkShippedPackages(paths) {
 }
 
 // src/server/vite.ts
-import path9 from "path";
+import { createHash as createHash2 } from "crypto";
+import fs10 from "fs";
+import path10 from "path";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 var escapeRegExp = (text2) => text2.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -1668,21 +1777,40 @@ function aliases(project) {
     { find: /^@system\//, replacement: `${toPosix(paths.system)}/` }
   ];
   for (const [key, target] of Object.entries(project.config().config.alias ?? {})) {
-    const replacement = toPosix(path9.resolve(paths.root, target));
+    const replacement = toPosix(path10.resolve(paths.root, target));
     list.push(
       key.endsWith("/") ? { find: new RegExp(`^${escapeRegExp(key)}`), replacement: `${replacement.replace(/\/$/, "")}/` } : { find: new RegExp(`^${escapeRegExp(key)}(?=/|$)`), replacement }
     );
   }
   return list;
 }
+function dropStaleDepCache(paths) {
+  const dir = path10.join(paths.cache, "vite");
+  const stamp = path10.join(paths.cache, "vite-runtime");
+  let runtime = "";
+  try {
+    runtime = createHash2("sha256").update(fs10.readFileSync(PKG.runtime)).digest("hex");
+  } catch {
+  }
+  let seen = "";
+  try {
+    seen = fs10.readFileSync(stamp, "utf8");
+  } catch {
+  }
+  if (seen === runtime) return;
+  fs10.rmSync(dir, { recursive: true, force: true });
+  fs10.mkdirSync(paths.cache, { recursive: true });
+  fs10.writeFileSync(stamp, runtime);
+}
 function baseConfig(project) {
   const { paths } = project;
   return {
     configFile: false,
     envDir: false,
     root: paths.design,
-    cacheDir: path9.join(paths.cache, "vite"),
-    publicDir: false,
+    cacheDir: path10.join(paths.cache, "vite"),
+    // design.json `public`: served under the frames' base, so HTML and CSS paths such as `/logo.png` resolve.
+    publicDir: project.publicDir() ?? false,
     logLevel: "warn",
     clearScreen: false,
     resolve: {
@@ -1700,7 +1828,7 @@ var SOURCE_EXT = /* @__PURE__ */ new Set([".ts", ".tsx", ".jsx", ".mts", ".cts",
 var BUNDLED_REF = /<(script|link|img|source|video|audio|image|use|input)\b[^>]*>/gi;
 var encodePath2 = (rel) => rel.split("/").map(encodeURIComponent).join("/");
 function relUrl(fromDir, file) {
-  const rel = toPosix(path10.relative(fromDir, file));
+  const rel = toPosix(path11.relative(fromDir, file));
   return rel.startsWith(".") ? rel : `./${rel}`;
 }
 function staticSnapshots(paths) {
@@ -1710,7 +1838,7 @@ function staticSnapshots(paths) {
     let data = metaCache.get(canvas);
     if (!data) {
       try {
-        data = JSON.parse(fs9.readFileSync(path10.join(paths.snapshots, canvas, "meta.json"), "utf8"));
+        data = JSON.parse(fs11.readFileSync(path11.join(paths.snapshots, canvas, "meta.json"), "utf8"));
       } catch {
       }
       data ??= {};
@@ -1724,8 +1852,8 @@ function staticSnapshots(paths) {
     const urls = {};
     const thumbs = {};
     for (const theme2 of THEMES) {
-      const file = path10.join(paths.snapshots, canvas, `${id2}.${theme2}.png`);
-      if (!entry[theme2] || !fs9.existsSync(file)) continue;
+      const file = path11.join(paths.snapshots, canvas, `${id2}.${theme2}.png`);
+      if (!entry[theme2] || !fs11.existsSync(file)) continue;
       const rel = `_snap/${canvas}/${id2}.${theme2}.png`;
       copies.set(file, rel);
       urls[theme2] = `${encodePath2(rel)}?v=${entry[theme2]}`;
@@ -1749,29 +1877,29 @@ function rewriteRefs(html, originalDir, stagedDir) {
       (whole, attr, quote, value) => {
         if (!value || /^(?:[a-z][a-z0-9+.-]*:|\/|#|\{)/i.test(value)) return whole;
         const [pathname = "", suffix = ""] = /^([^?#]*)(.*)$/.exec(value).slice(1);
-        const target = path10.resolve(originalDir, decodeURIComponent(pathname));
-        if (!fs9.existsSync(target)) return whole;
+        const target = path11.resolve(originalDir, decodeURIComponent(pathname));
+        if (!fs11.existsSync(target)) return whole;
         return `${attr}${quote}${relUrl(stagedDir, target)}${suffix}${quote}`;
       }
     );
   });
 }
 function copyTree(from, to, filter) {
-  if (!fs9.existsSync(from)) return;
-  for (const entry of fs9.readdirSync(from, { withFileTypes: true })) {
+  if (!fs11.existsSync(from)) return;
+  for (const entry of fs11.readdirSync(from, { withFileTypes: true })) {
     if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
-    const source = path10.join(from, entry.name);
-    const target = path10.join(to, entry.name);
+    const source = path11.join(from, entry.name);
+    const target = path11.join(to, entry.name);
     if (entry.isDirectory()) copyTree(source, target, filter);
-    else if (filter(source) && !fs9.existsSync(target)) {
-      fs9.mkdirSync(path10.dirname(target), { recursive: true });
-      fs9.copyFileSync(source, target);
+    else if (filter(source) && !fs11.existsSync(target)) {
+      fs11.mkdirSync(path11.dirname(target), { recursive: true });
+      fs11.copyFileSync(source, target);
     }
   }
 }
 function writeJson(file, value) {
-  fs9.mkdirSync(path10.dirname(file), { recursive: true });
-  fs9.writeFileSync(file, JSON.stringify(value));
+  fs11.mkdirSync(path11.dirname(file), { recursive: true });
+  fs11.writeFileSync(file, JSON.stringify(value));
 }
 async function buildSite(paths, out, options = {}) {
   const snapshots = staticSnapshots(paths);
@@ -1787,42 +1915,46 @@ async function buildSite(paths, out, options = {}) {
   const entries = new Entries(project);
   entries.sync();
   linkShippedPackages(paths);
-  const staging = path10.join(paths.cache, "build", "src");
-  fs9.rmSync(staging, { recursive: true, force: true });
+  const publicDir = project.publicDir();
+  const publicFiles2 = project.publicFiles();
+  const staging = path11.join(paths.cache, "build", "src");
+  fs11.rmSync(staging, { recursive: true, force: true });
   const fonts = loadedSystem?.doc.fonts ?? [];
   const sources = [...system?.specimens ?? [], ...canvases.flatMap((canvas) => canvas.screens)];
   const inputs = [];
   const htmlScreens = [];
   for (const source of sources) {
-    if (!source.builtin && !fs9.existsSync(source.file)) continue;
-    const siteDir = path10.join("_s", source.canvas, source.id);
-    const dir = path10.join(staging, siteDir);
-    const file = path10.join(dir, "index.html");
-    fs9.mkdirSync(dir, { recursive: true });
+    if (!source.builtin && !fs11.existsSync(source.file)) continue;
+    const siteDir = path11.join("_s", source.canvas, source.id);
+    const dir = path11.join(staging, siteDir);
+    const file = path11.join(dir, "index.html");
+    fs11.mkdirSync(dir, { recursive: true });
     const canvasTheme = source.canvas === SYSTEM_CANVAS ? void 0 : project.canvas(source.canvas)?.doc.theme;
     const head = {
       source,
       theme: canvasTheme ?? "light",
       fonts,
       snapshots: false,
-      autoHeight: source.autoHeight ?? false
+      autoHeight: source.autoHeight ?? false,
+      // The public folder lands at the site root, which frames reach through `../`.
+      public: publicFiles2.length ? { base: `${toPosix(path11.relative(dir, staging))}/`, files: publicFiles2 } : void 0
     };
     if (source.format === "module") {
-      fs9.writeFileSync(file, moduleShell(head, relUrl(dir, entries.entryFile(source))));
+      fs11.writeFileSync(file, moduleShell(head, relUrl(dir, entries.entryFile(source))));
     } else {
-      const raw = rewriteRefs(fs9.readFileSync(source.file, "utf8"), path10.dirname(source.file), dir);
+      const raw = rewriteRefs(fs11.readFileSync(source.file, "utf8"), path11.dirname(source.file), dir);
       const withSystem = source.system && !optsOutOfSystem(raw);
       const html = injectIntoHtml(raw, {
         ...head,
         systemCss: withSystem ? relUrl(dir, entries.systemCssFile()) : void 0,
-        boot: relUrl(dir, path10.join(entries.dir, HTML_BOOT))
+        boot: relUrl(dir, path11.join(entries.dir, HTML_BOOT))
       });
-      fs9.writeFileSync(file, html);
+      fs11.writeFileSync(file, html);
       htmlScreens.push({ source, dir: siteDir });
     }
     inputs.push(file);
   }
-  fs9.mkdirSync(out, { recursive: true });
+  fs11.mkdirSync(out, { recursive: true });
   if (inputs.length) {
     const base = baseConfig(project);
     await build({
@@ -1837,18 +1969,20 @@ async function buildSite(paths, out, options = {}) {
         target: "es2022",
         reportCompressedSize: false,
         chunkSizeWarningLimit: 8e3,
+        // Copied below, without dot-files and links out of the folder, and after the site's own files.
+        copyPublicDir: false,
         rolldownOptions: { input: inputs }
       }
     });
   } else {
-    fs9.rmSync(out, { recursive: true, force: true });
-    fs9.mkdirSync(out, { recursive: true });
+    fs11.rmSync(out, { recursive: true, force: true });
+    fs11.mkdirSync(out, { recursive: true });
   }
   for (const { source, dir } of htmlScreens) {
     copyTree(
-      path10.dirname(source.file),
-      path10.join(out, dir),
-      (file) => !SOURCE_EXT.has(path10.extname(file).toLowerCase())
+      path11.dirname(source.file),
+      path11.join(out, dir),
+      (file) => !SOURCE_EXT.has(path11.extname(file).toLowerCase())
     );
   }
   const files = /* @__PURE__ */ new Set();
@@ -1860,51 +1994,59 @@ async function buildSite(paths, out, options = {}) {
   for (const asset of system?.doc.assets ?? []) files.add(asset.url);
   for (const url of files) {
     const rel = url.slice("_f/".length).split("/").map(decodeURIComponent).join("/");
-    const from = path10.join(paths.design, rel);
-    if (!fs9.existsSync(from)) continue;
-    const to = path10.join(out, "_f", rel);
-    fs9.mkdirSync(path10.dirname(to), { recursive: true });
-    fs9.copyFileSync(from, to);
+    const from = path11.join(paths.design, rel);
+    if (!fs11.existsSync(from)) continue;
+    const to = path11.join(out, "_f", rel);
+    fs11.mkdirSync(path11.dirname(to), { recursive: true });
+    fs11.copyFileSync(from, to);
   }
   const info = project.info(true);
   const snapshotDirs = canvasIds.map((id2) => `_snap/${id2}/`);
   for (const [from, rel] of snapshots.copies) {
     if (!snapshotDirs.some((dir) => rel.startsWith(dir))) continue;
-    const to = path10.join(out, rel);
-    fs9.mkdirSync(path10.dirname(to), { recursive: true });
-    fs9.copyFileSync(from, to);
+    const to = path11.join(out, rel);
+    fs11.mkdirSync(path11.dirname(to), { recursive: true });
+    fs11.copyFileSync(from, to);
   }
   if (!system) info.system = null;
   info.canvases = info.canvases.filter((canvas) => canvasIds.includes(canvas.id));
-  writeJson(path10.join(out, "api", "project.json"), info);
-  for (const canvas of canvases) writeJson(path10.join(out, "api", "canvas", `${canvas.doc.id}.json`), canvas.doc);
+  writeJson(path11.join(out, "api", "project.json"), info);
+  for (const canvas of canvases) writeJson(path11.join(out, "api", "canvas", `${canvas.doc.id}.json`), canvas.doc);
   if (system) {
-    writeJson(path10.join(out, "api", "system.json"), system.doc);
+    writeJson(path11.join(out, "api", "system.json"), system.doc);
     const texts = {};
     for (const component of system.doc.components) {
       for (const rel of [component.specimen, ...component.sources]) {
-        const file = path10.join(paths.root, rel);
-        if (!(rel in texts) && fs9.existsSync(file)) texts[rel] = fs9.readFileSync(file, "utf8");
+        const file = path11.join(paths.root, rel);
+        if (!(rel in texts) && fs11.existsSync(file)) texts[rel] = fs11.readFileSync(file, "utf8");
       }
     }
-    writeJson(path10.join(out, "api", "sources.json"), texts);
+    writeJson(path11.join(out, "api", "sources.json"), texts);
   }
-  fs9.rmSync(staging, { recursive: true, force: true });
+  fs11.rmSync(staging, { recursive: true, force: true });
   const errors = [
     ...only ? [] : project.config().issues,
     ...system?.doc.issues ?? [],
     ...canvases.flatMap((canvas) => canvas.doc.issues)
   ].filter((issue) => issue.severity === "error").length;
   const { absoluteAssets } = options.includeViewer === false ? { absoluteAssets: false } : copyViewer(PKG.viewer, out);
+  if (publicDir) {
+    for (const rel of publicFiles2) {
+      const to = path11.join(out, rel);
+      if (fs11.existsSync(to)) continue;
+      fs11.mkdirSync(path11.dirname(to), { recursive: true });
+      fs11.copyFileSync(path11.join(publicDir, rel), to);
+    }
+  }
   return { out, canvases: canvasIds, frames: inputs.length, errors, absoluteAssets };
 }
 function copyViewer(viewerDir, out) {
   copyTree(viewerDir, out, () => true);
-  const index = path10.join(out, "index.html");
-  const html = fs9.readFileSync(index, "utf8");
+  const index = path11.join(out, "index.html");
+  const html = fs11.readFileSync(index, "utf8");
   const flag2 = "<script>window.__DESIGN_STATIC__=true</script>";
   const head = /<head(\s[^>]*)?>/i.exec(html);
-  fs9.writeFileSync(
+  fs11.writeFileSync(
     index,
     head ? html.slice(0, head.index + head[0].length) + flag2 + html.slice(head.index + head[0].length) : flag2 + html
   );
@@ -1986,8 +2128,8 @@ function progress() {
 // src/cli/commands/build.ts
 function pack(out) {
   const archive = `${out.replace(/[\\/]+$/, "")}.tar.gz`;
-  fs10.rmSync(archive, { force: true });
-  const entries = fs10.readdirSync(out);
+  fs12.rmSync(archive, { force: true });
+  const entries = fs12.readdirSync(out);
   const result = spawnSync("tar", ["-czf", archive, "-C", out, ...entries], {
     stdio: ["ignore", "ignore", "pipe"],
     env: { ...process.env, COPYFILE_DISABLE: "1" }
@@ -1997,10 +2139,10 @@ function pack(out) {
   return archive;
 }
 async function runBuild(paths, canvases, options) {
-  if (!fs10.existsSync(path11.join(PKG.viewer, "index.html"))) {
+  if (!fs12.existsSync(path12.join(PKG.viewer, "index.html"))) {
     throw new CliError("The viewer is missing from this foss-design install (dist/viewer). Rebuild or reinstall it.");
   }
-  const out = path11.resolve(options.out ?? path11.join(paths.cache, "site"));
+  const out = path12.resolve(options.out ?? path12.join(paths.cache, "site"));
   if (out === paths.root || out === paths.design) throw new CliError(`Refusing to build into ${out}`);
   print(dim(`Building ${canvases.length ? canvases.join(", ") : "every canvas"} and the design system\u2026`));
   let result;
@@ -2024,9 +2166,9 @@ async function runBuild(paths, canvases, options) {
 import os from "os";
 
 // src/cloud/units.ts
-import { createHash as createHash2 } from "crypto";
-import fs11 from "fs";
-import path12 from "path";
+import { createHash as createHash3 } from "crypto";
+import fs13 from "fs";
+import path13 from "path";
 var SYSTEM_UNIT = "system";
 var CANVAS_PREFIX = "canvas/";
 var LOCAL_ONLY = /* @__PURE__ */ new Set(["cloud.json", "node_modules"]);
@@ -2054,7 +2196,7 @@ function caseClashes(keys) {
 }
 function unitRoot(paths, key) {
   const id2 = unitCanvasId(key);
-  return id2 === null ? paths.design : path12.join(paths.canvases, id2);
+  return id2 === null ? paths.design : path13.join(paths.canvases, id2);
 }
 function unitRelative(key, rel) {
   const id2 = unitCanvasId(key);
@@ -2069,10 +2211,10 @@ function isUnitPath(key, rel) {
   return id2 !== null && segments[0] === "canvas" && segments[1] === id2 && segments.length > 2;
 }
 function hashBuffer(data) {
-  return createHash2("sha256").update(data).digest("hex");
+  return createHash3("sha256").update(data).digest("hex");
 }
 function hashFile(file) {
-  const data = fs11.readFileSync(file);
+  const data = fs13.readFileSync(file);
   return { hash: hashBuffer(data), size: data.length };
 }
 var warnedLinks = /* @__PURE__ */ new Set();
@@ -2085,34 +2227,34 @@ function warnLink(rel) {
 function walk(dir, base, out) {
   let entries;
   try {
-    entries = fs11.readdirSync(dir, { withFileTypes: true });
+    entries = fs13.readdirSync(dir, { withFileTypes: true });
   } catch {
     return;
   }
   for (const entry of entries) {
     if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
-    const full = path12.join(dir, entry.name);
+    const full = path13.join(dir, entry.name);
     let isFile = entry.isFile();
     let isDir = entry.isDirectory();
     if (entry.isSymbolicLink()) {
       isDir = false;
       isFile = false;
       try {
-        const target = fs11.realpathSync(full);
-        const root = fs11.realpathSync(base);
-        if (target.startsWith(root + path12.sep)) isFile = fs11.statSync(target).isFile();
-        else warnLink(toPosix(path12.relative(base, full)));
+        const target = fs13.realpathSync(full);
+        const root = fs13.realpathSync(base);
+        if (target.startsWith(root + path13.sep)) isFile = fs13.statSync(target).isFile();
+        else warnLink(toPosix(path13.relative(base, full)));
       } catch {
       }
     }
     if (isDir) walk(full, base, out);
-    else if (isFile) out[toPosix(path12.relative(base, full))] = hashFile(full);
+    else if (isFile) out[toPosix(path13.relative(base, full))] = hashFile(full);
   }
 }
 function unitManifest(paths, key) {
   const manifest = {};
   if (key === SYSTEM_UNIT) {
-    if (fs11.existsSync(paths.config) && fs11.statSync(paths.config).isFile())
+    if (fs13.existsSync(paths.config) && fs13.statSync(paths.config).isFile())
       manifest["design.json"] = hashFile(paths.config);
     walk(paths.system, paths.design, manifest);
   } else walk(unitRoot(paths, key), paths.design, manifest);
@@ -2121,13 +2263,13 @@ function unitManifest(paths, key) {
 function buildManifest(dir) {
   const manifest = {};
   const visit = (current) => {
-    for (const entry of fs11.readdirSync(current, { withFileTypes: true })) {
-      const full = path12.join(current, entry.name);
+    for (const entry of fs13.readdirSync(current, { withFileTypes: true })) {
+      const full = path13.join(current, entry.name);
       if (entry.isDirectory()) visit(full);
-      else if (entry.isFile()) manifest[toPosix(path12.relative(dir, full))] = hashFile(full);
+      else if (entry.isFile()) manifest[toPosix(path13.relative(dir, full))] = hashFile(full);
     }
   };
-  if (fs11.existsSync(dir)) visit(dir);
+  if (fs13.existsSync(dir)) visit(dir);
   return sortManifest(manifest);
 }
 function sortManifest(manifest) {
@@ -2136,18 +2278,18 @@ function sortManifest(manifest) {
 function scanLocal(paths) {
   const units = /* @__PURE__ */ new Map();
   const notSynced = [];
-  if (!fs11.existsSync(paths.design)) return { units, notSynced };
+  if (!fs13.existsSync(paths.design)) return { units, notSynced };
   const system = unitManifest(paths, SYSTEM_UNIT);
   if (Object.keys(system).length) units.set(SYSTEM_UNIT, { key: SYSTEM_UNIT, kind: "system", manifest: system });
-  for (const entry of fs11.readdirSync(paths.design, { withFileTypes: true })) {
+  for (const entry of fs13.readdirSync(paths.design, { withFileTypes: true })) {
     const { name } = entry;
     if (name.startsWith(".") || LOCAL_ONLY.has(name)) continue;
     if (name === "design.json" && entry.isFile()) continue;
     if ((name === "system" || name === "canvas") && entry.isDirectory()) continue;
     notSynced.push(entry.isDirectory() ? `${name}/` : name);
   }
-  if (fs11.existsSync(paths.canvases) && fs11.statSync(paths.canvases).isDirectory()) {
-    for (const entry of fs11.readdirSync(paths.canvases, { withFileTypes: true })) {
+  if (fs13.existsSync(paths.canvases) && fs13.statSync(paths.canvases).isDirectory()) {
+    for (const entry of fs13.readdirSync(paths.canvases, { withFileTypes: true })) {
       if (entry.name.startsWith(".")) continue;
       if (!entry.isDirectory() || !ID_PATTERN.test(entry.name)) {
         notSynced.push(`canvas/${entry.name}${entry.isDirectory() ? "/" : ""}`);
@@ -2161,11 +2303,11 @@ function scanLocal(paths) {
   return { units, notSynced: notSynced.sort() };
 }
 function unitBuildDir(paths, key) {
-  return path12.join(paths.cache, "cloud", "build", ...key.split("/"));
+  return path13.join(paths.cache, "cloud", "build", ...key.split("/"));
 }
 async function buildUnit(paths, key, out = unitBuildDir(paths, key)) {
   const id2 = unitCanvasId(key);
-  fs11.rmSync(out, { recursive: true, force: true });
+  fs13.rmSync(out, { recursive: true, force: true });
   return buildSite(paths, out, {
     canvases: id2 === null ? [] : [id2],
     includeSystem: id2 === null,
@@ -2296,7 +2438,7 @@ var CloudClient = class {
   }
   host;
   token;
-  async send(method, path26, init) {
+  async send(method, path27, init) {
     const headers = {
       "User-Agent": `foss-design/${packageVersion()} (${os.platform()})`,
       Accept: "application/json"
@@ -2304,7 +2446,7 @@ var CloudClient = class {
     if (this.token) headers.Authorization = `Bearer ${this.token}`;
     if (init.type) headers["Content-Type"] = init.type;
     try {
-      return await fetch(`${this.host}/api${path26}`, {
+      return await fetch(`${this.host}/api${path27}`, {
         method,
         headers,
         body: init.body,
@@ -2325,8 +2467,8 @@ var CloudClient = class {
     throw errorFor(this.host, response.status, body, response.headers.get("retry-after"));
   }
   /** JSON in, JSON out; any non-2xx answer throws a CloudError. */
-  async request(method, path26, body) {
-    const response = await this.send(method, path26, {
+  async request(method, path27, body) {
+    const response = await this.send(method, path27, {
       body: body === void 0 ? void 0 : JSON.stringify(body),
       type: body === void 0 ? void 0 : "application/json",
       timeout: JSON_TIMEOUT
@@ -2338,7 +2480,7 @@ var CloudClient = class {
     try {
       return JSON.parse(text2);
     } catch {
-      throw new CloudError(`${this.host} answered ${method} ${path26} with something other than JSON`, 0, "bad_response");
+      throw new CloudError(`${this.host} answered ${method} ${path27} with something other than JSON`, 0, "bad_response");
     }
   }
   /** POST /device/code. */
@@ -2472,9 +2614,9 @@ var CloudClient = class {
 };
 
 // src/cloud/credentials.ts
-import fs12 from "fs";
+import fs14 from "fs";
 import os2 from "os";
-import path13 from "path";
+import path14 from "path";
 var DEFAULT_CLOUD = "https://app.fossdesign.dev";
 function normalizeHost(value) {
   let url;
@@ -2491,14 +2633,14 @@ function cloudHost() {
   return normalizeHost(process.env.FOSS_DESIGN_CLOUD || DEFAULT_CLOUD);
 }
 function credentialsFile() {
-  const base = process.platform === "win32" && process.env.APPDATA ? process.env.APPDATA : process.env.XDG_CONFIG_HOME || path13.join(os2.homedir(), ".config");
-  return path13.join(base, "foss-design", "credentials.json");
+  const base = process.platform === "win32" && process.env.APPDATA ? process.env.APPDATA : process.env.XDG_CONFIG_HOME || path14.join(os2.homedir(), ".config");
+  return path14.join(base, "foss-design", "credentials.json");
 }
 function readAll() {
   const file = credentialsFile();
-  if (!fs12.existsSync(file)) return {};
+  if (!fs14.existsSync(file)) return {};
   try {
-    const data = JSON.parse(fs12.readFileSync(file, "utf8"));
+    const data = JSON.parse(fs14.readFileSync(file, "utf8"));
     return data && typeof data === "object" && !Array.isArray(data) ? data : {};
   } catch (error) {
     throw new CliError(`${file} is not valid JSON (${error.message}); fix or delete it`);
@@ -2506,12 +2648,12 @@ function readAll() {
 }
 function writeAll(data) {
   const file = credentialsFile();
-  fs12.mkdirSync(path13.dirname(file), { recursive: true, mode: 448 });
+  fs14.mkdirSync(path14.dirname(file), { recursive: true, mode: 448 });
   const temp = `${file}.${process.pid}.tmp`;
-  fs12.writeFileSync(temp, `${JSON.stringify(data, null, 2)}
+  fs14.writeFileSync(temp, `${JSON.stringify(data, null, 2)}
 `, { mode: 384 });
-  fs12.chmodSync(temp, 384);
-  fs12.renameSync(temp, file);
+  fs14.chmodSync(temp, 384);
+  fs14.renameSync(temp, file);
 }
 function getCredential(host) {
   const entry = readAll()[host];
@@ -2534,17 +2676,17 @@ function requireCredential(host) {
 }
 
 // src/cloud/state.ts
-import fs13 from "fs";
-import path14 from "path";
-var linkFile = (paths) => path14.join(paths.design, "cloud.json");
-var cloudCache = (paths) => path14.join(paths.cache, "cloud");
-var incomingDir = (paths, key) => path14.join(cloudCache(paths), "incoming", ...key.split("/"));
+import fs15 from "fs";
+import path15 from "path";
+var linkFile = (paths) => path15.join(paths.design, "cloud.json");
+var cloudCache = (paths) => path15.join(paths.cache, "cloud");
+var incomingDir = (paths, key) => path15.join(cloudCache(paths), "incoming", ...key.split("/"));
 function readLink(paths) {
   const file = linkFile(paths);
-  if (!fs13.existsSync(file)) return null;
+  if (!fs15.existsSync(file)) return null;
   let data;
   try {
-    data = JSON.parse(fs13.readFileSync(file, "utf8"));
+    data = JSON.parse(fs15.readFileSync(file, "utf8"));
   } catch (error) {
     throw new CliError(`${file} is not valid JSON (${error.message}); run \`design link <project>\` again`);
   }
@@ -2574,9 +2716,9 @@ function writeLink(paths, link) {
     units: sorted(link.units),
     conflicts: sorted(link.conflicts)
   };
-  fs13.writeFileSync(temp, `${JSON.stringify(data, null, 2)}
+  fs15.writeFileSync(temp, `${JSON.stringify(data, null, 2)}
 `);
-  fs13.renameSync(temp, file);
+  fs15.renameSync(temp, file);
 }
 var hashes = (manifest) => Object.fromEntries(Object.entries(manifest).map(([file, entry]) => [file, entry.hash]));
 function diffFiles(a, b) {
@@ -2654,8 +2796,8 @@ var byUnit = (a, b) => a === SYSTEM_UNIT ? -1 : b === SYSTEM_UNIT ? 1 : a < b ?
 var plural = (count, word, many = `${word}s`) => `${count} ${count === 1 ? word : many}`;
 
 // src/cloud/pull.ts
-import fs14 from "fs";
-import path15 from "path";
+import fs16 from "fs";
+import path16 from "path";
 
 // src/capture/frames.ts
 var AUTO_VIEWPORT_HEIGHT = 900;
@@ -2738,34 +2880,34 @@ function checkManifest(key, manifest) {
   }
 }
 function writeInside(root, rel, data) {
-  const file = path15.join(root, rel);
+  const file = path16.join(root, rel);
   if (!isInside(root, file)) throw new CliError(`Refusing to write outside ${root}: ${rel}`);
-  fs14.mkdirSync(path15.dirname(file), { recursive: true });
-  if (!isInside(fs14.realpathSync(root), fs14.realpathSync(path15.dirname(file))))
+  fs16.mkdirSync(path16.dirname(file), { recursive: true });
+  if (!isInside(fs16.realpathSync(root), fs16.realpathSync(path16.dirname(file))))
     throw new CliError(`Refusing to write through a link out of ${root}: ${rel}`);
-  if (fs14.existsSync(file) && fs14.lstatSync(file).isSymbolicLink()) fs14.unlinkSync(file);
-  fs14.writeFileSync(file, data);
+  if (fs16.existsSync(file) && fs16.lstatSync(file).isSymbolicLink()) fs16.unlinkSync(file);
+  fs16.writeFileSync(file, data);
 }
 function pruneEmpty(dir, stop) {
   let current = dir;
   while (isInside(stop, current) && current !== stop) {
     try {
-      if (fs14.readdirSync(current).length) return;
-      fs14.rmdirSync(current);
+      if (fs16.readdirSync(current).length) return;
+      fs16.rmdirSync(current);
     } catch {
       return;
     }
-    current = path15.dirname(current);
+    current = path16.dirname(current);
   }
 }
 function applyUnit(paths, key, local, target, blobs) {
   const counts = { added: 0, changed: 0, removed: 0 };
-  const stop = key === SYSTEM_UNIT ? paths.design : path15.dirname(unitRoot(paths, key));
+  const stop = key === SYSTEM_UNIT ? paths.design : path16.dirname(unitRoot(paths, key));
   for (const rel of Object.keys(local)) {
     if (rel in target) continue;
-    const file = path15.join(paths.design, rel);
-    fs14.rmSync(file, { force: true });
-    pruneEmpty(path15.dirname(file), stop);
+    const file = path16.join(paths.design, rel);
+    fs16.rmSync(file, { force: true });
+    pruneEmpty(path16.dirname(file), stop);
     counts.removed++;
   }
   for (const [rel, entry] of Object.entries(target)) {
@@ -2828,7 +2970,7 @@ async function pull(ctx, options) {
     } else if (!s.ahead) {
       if (s.conflictRev !== void 0) {
         delete link.conflicts[key];
-        fs14.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+        fs16.rmSync(incomingDir(paths, key), { recursive: true, force: true });
       }
       report.units.push({ ...reportFor("up_to_date"), rev: s.baseRev });
     } else if (!s.changed.length) {
@@ -2858,14 +3000,14 @@ async function pull(ctx, options) {
         headRev: unit.headRev,
         incoming: incomingDir(paths, key)
       };
-      entry.message = `changed here and in the cloud; the cloud version (r${unit.headRev}) is in ${path15.relative(paths.root, entry.incoming)}`;
-      if (s.conflictRev === unit.headRev && fs14.existsSync(entry.incoming)) report.units.push(entry);
+      entry.message = `changed here and in the cloud; the cloud version (r${unit.headRev}) is in ${path16.relative(paths.root, entry.incoming)}`;
+      if (s.conflictRev === unit.headRev && fs16.existsSync(entry.incoming)) report.units.push(entry);
       else plans.push({ key, kind: "incoming", remote: unit, report: entry });
     }
   }
   const byHash = /* @__PURE__ */ new Map();
   for (const unit of scan.units.values())
-    for (const [rel, entry] of Object.entries(unit.manifest)) byHash.set(entry.hash, path15.join(paths.design, rel));
+    for (const [rel, entry] of Object.entries(unit.manifest)) byHash.set(entry.hash, path16.join(paths.design, rel));
   const needed = /* @__PURE__ */ new Set();
   for (const plan of plans) {
     if (!plan.remote) continue;
@@ -2876,7 +3018,7 @@ async function pull(ctx, options) {
   const download = [];
   for (const hash of needed) {
     const file = byHash.get(hash);
-    if (file) blobs.set(hash, fs14.readFileSync(file));
+    if (file) blobs.set(hash, fs16.readFileSync(file));
     else download.push(hash);
   }
   if (download.length) {
@@ -2902,11 +3044,11 @@ async function pull(ctx, options) {
       if (plan.remote) link.units[key] = { rev: plan.remote.headRev, files: hashes(plan.remote.manifest) };
       else delete link.units[key];
       delete link.conflicts[key];
-      fs14.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+      fs16.rmSync(incomingDir(paths, key), { recursive: true, force: true });
     } else {
       const dir = incomingDir(paths, key);
-      fs14.rmSync(dir, { recursive: true, force: true });
-      fs14.mkdirSync(dir, { recursive: true });
+      fs16.rmSync(dir, { recursive: true, force: true });
+      fs16.mkdirSync(dir, { recursive: true });
       for (const [rel, file] of Object.entries(plan.remote.manifest))
         writeInside(dir, unitRelative(key, rel), blobs.get(file.hash));
       link.conflicts[key] = plan.remote.headRev;
@@ -2927,8 +3069,8 @@ async function pull(ctx, options) {
 }
 
 // src/cloud/push.ts
-import fs15 from "fs";
-import path16 from "path";
+import fs17 from "fs";
+import path17 from "path";
 function blockedReport(status, message) {
   return {
     unit: status.key,
@@ -3034,7 +3176,7 @@ async function push(ctx, options) {
   for (const key of toPush) {
     const s = status(key);
     if (s.conflictRev !== void 0) {
-      const dir = path16.relative(paths.root, incomingDir(paths, key));
+      const dir = path17.relative(paths.root, incomingDir(paths, key));
       blocked.push(
         blockedReport(s, `pull left the cloud version in ${dir}; merge it, then \`design push --resolved ${key}\``)
       );
@@ -3078,7 +3220,7 @@ async function push(ctx, options) {
   const files = /* @__PURE__ */ new Map();
   const addFiles = (manifest, dir) => {
     for (const [rel, entry] of Object.entries(manifest))
-      if (!files.has(entry.hash)) files.set(entry.hash, path16.join(dir, rel));
+      if (!files.has(entry.hash)) files.set(entry.hash, path17.join(dir, rel));
   };
   for (const key of pushing) {
     const id2 = unitCanvasId(key);
@@ -3110,7 +3252,7 @@ async function push(ctx, options) {
   if (missing.length) {
     const unknown = missing.find((hash) => !files.has(hash));
     if (unknown) throw new CliError(`The cloud asked for ${unknown.slice(0, 12)}, which is not part of this push`);
-    const bytes = missing.reduce((sum, hash) => sum + fs15.statSync(files.get(hash)).size, 0);
+    const bytes = missing.reduce((sum, hash) => sum + fs17.statSync(files.get(hash)).size, 0);
     const bar = ctx.progress();
     const started = Date.now();
     let sentFiles = 0;
@@ -3119,12 +3261,12 @@ async function push(ctx, options) {
     bar.update(line());
     await mapLimit(missing, TRANSFERS, async (hash) => {
       const file = files.get(hash);
-      const data = fs15.readFileSync(file);
+      const data = fs17.readFileSync(file);
       try {
         await client.putBlob(link.project, hash, data);
       } catch (error) {
         if (error instanceof CloudError && error.status === 413)
-          throw new CliError(`${path16.relative(process.cwd(), file)} (${megabytes(data.length)}): ${error.message}`);
+          throw new CliError(`${path17.relative(process.cwd(), file)} (${megabytes(data.length)}): ${error.message}`);
         throw error;
       }
       sentFiles++;
@@ -3146,7 +3288,7 @@ async function push(ctx, options) {
       url: webUrl(link, unit.key)
     });
   }
-  for (const key of resolved) fs15.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+  for (const key of resolved) fs17.rmSync(incomingDir(paths, key), { recursive: true, force: true });
   writeLink(paths, link);
   report.units.sort((a, b) => byUnit(a.unit, b.unit));
   return report;
@@ -3156,8 +3298,9 @@ function refuseLegacyGo(paths, keys) {
   const hits = /* @__PURE__ */ new Set();
   for (const key of keys) {
     if (!key.startsWith("canvas/")) continue;
-    for (const screen of project.canvas(key.slice("canvas/".length))?.screens ?? []) {
-      for (const line of legacyGoLines(screen.file)) hits.add(`${relToRoot(paths, screen.file)}:${line}`);
+    const id2 = key.slice("canvas/".length);
+    for (const file of canvasCodeFiles(path17.join(paths.canvases, id2), project.canvas(id2)?.screens ?? [])) {
+      for (const line of legacyGoLines(file)) hits.add(`${relToRoot(paths, file)}:${line}`);
     }
   }
   if (!hits.size) return;
@@ -3477,7 +3620,7 @@ async function runMe(paths, options) {
 }
 
 // src/capture/chrome.ts
-import fs16 from "fs";
+import fs18 from "fs";
 var CANDIDATES = {
   darwin: [
     "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
@@ -3501,8 +3644,8 @@ var CANDIDATES = {
 };
 function findChrome() {
   const configured = process.env.DESIGN_CHROME;
-  if (configured && fs16.existsSync(configured)) return configured;
-  for (const candidate of CANDIDATES[process.platform] ?? []) if (fs16.existsSync(candidate)) return candidate;
+  if (configured && fs18.existsSync(configured)) return configured;
+  for (const candidate of CANDIDATES[process.platform] ?? []) if (fs18.existsSync(candidate)) return candidate;
   return null;
 }
 async function launchChrome() {
@@ -3515,22 +3658,40 @@ async function launchChrome() {
   const { chromium } = await import("playwright-core");
   return chromium.launch({ executablePath, headless: true, args: ["--hide-scrollbars", "--force-color-profile=srgb"] });
 }
+var OUTDATED_DEP = /Outdated Optimize Dep/;
 async function openFrame(page, url, options = {}) {
-  const errors = [];
-  page.on("pageerror", (error) => errors.push(error.message));
+  let errors = [];
+  let outdated = () => {
+  };
+  const record2 = (text2) => {
+    errors.push(text2);
+    if (OUTDATED_DEP.test(text2)) outdated();
+  };
+  page.on("pageerror", (error) => record2(error.message));
   page.on("console", (message) => {
-    if (message.type() === "error") errors.push(message.text().replace(/^(?:\s*%[osdifcO])+\s*/, ""));
+    if (message.type() !== "error") return;
+    let text2 = message.text().replace(/^(?:\s*%[osdifcO])+\s*/, "");
+    const where = message.location().url;
+    if (/^Failed to load resource/.test(text2) && where && !text2.includes(where)) text2 += ` (${where})`;
+    record2(text2);
   });
-  await page.goto(url, { waitUntil: "load", timeout: options.timeoutMs ?? 3e4 });
-  let ready = options.waitForReady === false;
-  if (!ready) {
-    try {
-      await page.waitForFunction(() => window.__DESIGN_READY__ === true, null, {
+  let ready = false;
+  for (let attempt = 0; attempt < 2; attempt++) {
+    errors = [];
+    ready = options.waitForReady === false;
+    const turnedAway = new Promise((resolve) => {
+      outdated = () => resolve("outdated");
+    });
+    await page.goto(url, { waitUntil: "load", timeout: options.timeoutMs ?? 3e4 });
+    if (!ready) {
+      const signal = page.waitForFunction(() => window.__DESIGN_READY__ === true, null, {
         timeout: options.timeoutMs ?? 2e4
+      }).then(() => "ready");
+      signal.catch(() => {
       });
-      ready = true;
-    } catch {
+      ready = await Promise.race([signal, turnedAway]).catch(() => null) === "ready";
     }
+    if (!errors.some((error) => OUTDATED_DEP.test(error))) break;
   }
   await page.waitForTimeout(options.settleMs ?? 700);
   const runtimeErrors = await page.evaluate(() => window.__DESIGN_ERRORS__ ?? []).catch(() => []);
@@ -3547,26 +3708,26 @@ async function openFrame(page, url, options = {}) {
 }
 
 // src/server/state.ts
-import fs17 from "fs";
-import path17 from "path";
-var stateFile = (paths) => path17.join(paths.cache, "server.json");
-var logFile = (paths) => path17.join(paths.cache, "server.log");
+import fs19 from "fs";
+import path18 from "path";
+var stateFile = (paths) => path18.join(paths.cache, "server.json");
+var logFile = (paths) => path18.join(paths.cache, "server.log");
 function readState(paths) {
   try {
-    return JSON.parse(fs17.readFileSync(stateFile(paths), "utf8"));
+    return JSON.parse(fs19.readFileSync(stateFile(paths), "utf8"));
   } catch {
     return null;
   }
 }
 function writeState(paths, state) {
-  fs17.mkdirSync(paths.cache, { recursive: true });
-  fs17.writeFileSync(stateFile(paths), `${JSON.stringify(state, null, 2)}
+  fs19.mkdirSync(paths.cache, { recursive: true });
+  fs19.writeFileSync(stateFile(paths), `${JSON.stringify(state, null, 2)}
 `);
 }
 function clearState(paths, pid) {
   const state = readState(paths);
   if (pid !== void 0 && state && state.pid !== pid) return;
-  fs17.rmSync(stateFile(paths), { force: true });
+  fs19.rmSync(stateFile(paths), { force: true });
 }
 function pidAlive(pid) {
   try {
@@ -3591,18 +3752,18 @@ async function liveServer(paths) {
 
 // src/cli/commands/preview.ts
 import { spawn } from "child_process";
-import fs21 from "fs";
+import fs23 from "fs";
 
 // src/server/index.ts
-import fs20 from "fs";
+import fs22 from "fs";
 import http from "http";
-import path20 from "path";
+import path21 from "path";
 import sirv from "sirv";
 import { createServer, searchForWorkspaceRoot } from "vite";
 
 // src/server/api.ts
-import fs18 from "fs";
-import path18 from "path";
+import fs20 from "fs";
+import path19 from "path";
 function sendJson(res, status, body) {
   res.writeHead(status, { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" });
   res.end(JSON.stringify(body));
@@ -3653,17 +3814,17 @@ async function handleApi(ctx, req, res, url) {
   }
   if (route2 === "/source") {
     const rel = url.searchParams.get("path") ?? "";
-    const file = path18.resolve(project.paths.root, rel);
-    if (!rel || !isInside(project.paths.root, file) || !fs18.existsSync(file) || fs18.statSync(file).isDirectory()) {
+    const file = path19.resolve(project.paths.root, rel);
+    if (!rel || !isInside(project.paths.root, file) || !fs20.existsSync(file) || fs20.statSync(file).isDirectory()) {
       sendJson(res, 404, { error: "not found" });
       return true;
     }
-    if (fs18.statSync(file).size > 2 * 1024 * 1024) {
+    if (fs20.statSync(file).size > 2 * 1024 * 1024) {
       sendJson(res, 413, { error: "file too large to show" });
       return true;
     }
     res.writeHead(200, { "content-type": "text/plain; charset=utf-8", "cache-control": "no-store" });
-    res.end(fs18.readFileSync(file, "utf8"));
+    res.end(fs20.readFileSync(file, "utf8"));
     return true;
   }
   const snapshotPost = /^\/snapshots\/([^/]+)\/([^/]+)$/.exec(route2);
@@ -3693,7 +3854,7 @@ async function handleApi(ctx, req, res, url) {
       return true;
     }
     res.writeHead(200, { "content-type": "image/png", "cache-control": "public, max-age=31536000, immutable" });
-    fs18.createReadStream(file).pipe(res);
+    fs20.createReadStream(file).pipe(res);
     return true;
   }
   return false;
@@ -3733,8 +3894,8 @@ var EventHub = class {
 };
 
 // src/server/snapshots.ts
-import fs19 from "fs";
-import path19 from "path";
+import fs21 from "fs";
+import path20 from "path";
 var SAFE = /^@?[a-z0-9][a-z0-9_-]*$/i;
 function isSafeSegment(value) {
   return SAFE.test(value);
@@ -3748,14 +3909,14 @@ var SnapshotStore = class {
   urlBase;
   meta = /* @__PURE__ */ new Map();
   metaFile(canvas) {
-    return path19.join(this.dir, canvas, "meta.json");
+    return path20.join(this.dir, canvas, "meta.json");
   }
   load(canvas) {
     const cached = this.meta.get(canvas);
     if (cached) return cached;
     let data = {};
     try {
-      data = JSON.parse(fs19.readFileSync(this.metaFile(canvas), "utf8"));
+      data = JSON.parse(fs21.readFileSync(this.metaFile(canvas), "utf8"));
     } catch {
     }
     this.meta.set(canvas, data);
@@ -3781,21 +3942,21 @@ var SnapshotStore = class {
   };
   save(canvas, id2, theme2, png, height) {
     if (!isSafeSegment(canvas) || !isSafeSegment(id2)) throw new Error("bad snapshot key");
-    const dir = path19.join(this.dir, canvas);
-    fs19.mkdirSync(dir, { recursive: true });
-    fs19.writeFileSync(path19.join(dir, `${id2}.${theme2}.png`), png);
+    const dir = path20.join(this.dir, canvas);
+    fs21.mkdirSync(dir, { recursive: true });
+    fs21.writeFileSync(path20.join(dir, `${id2}.${theme2}.png`), png);
     const data = this.load(canvas);
     const version = Date.now();
     data[id2] = { ...data[id2], [theme2]: version, ...height ? { height } : {} };
-    fs19.writeFileSync(this.metaFile(canvas), JSON.stringify(data));
+    fs21.writeFileSync(this.metaFile(canvas), JSON.stringify(data));
     return { url: this.url(canvas, id2, theme2, version) };
   }
   /** Absolute path of `<id>.<theme>.png`, or of its thumbnail for `<id>.<theme>.thumb.png` (made on first use); null when missing. */
   file(canvas, name) {
     const match = /^(@?[a-z0-9][a-z0-9_-]*)\.(light|dark)(\.thumb)?\.png$/i.exec(name);
     if (!isSafeSegment(canvas) || !match) return null;
-    const file = path19.join(this.dir, canvas, `${match[1]}.${match[2]}.png`);
-    if (!fs19.existsSync(file)) return null;
+    const file = path20.join(this.dir, canvas, `${match[1]}.${match[2]}.png`);
+    if (!fs21.existsSync(file)) return null;
     return match[3] ? ensureThumb(file) : file;
   }
 };
@@ -3834,8 +3995,8 @@ function notFoundPage(res, title, text2) {
 }
 async function startDevServer(options) {
   const paths = designPaths(options.root);
-  if (!fs20.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
-  fs20.mkdirSync(paths.cache, { recursive: true });
+  if (!fs22.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
+  fs22.mkdirSync(paths.cache, { recursive: true });
   const snapshots = new SnapshotStore(paths.snapshots);
   const project = new DesignProject(paths, DEV_URLS, snapshots.lookup);
   const entries = new Entries(project);
@@ -3843,6 +4004,7 @@ async function startDevServer(options) {
   const links = linkShippedPackages(paths);
   const events = new EventHub();
   const httpServer = http.createServer();
+  dropStaleDepCache(paths);
   const base = baseConfig(project);
   const vite = await createServer({
     ...base,
@@ -3861,19 +4023,28 @@ async function startDevServer(options) {
       }
     },
     optimizeDeps: {
-      entries: entries.files().map((file) => toPosix(path20.relative(paths.design, file)))
+      entries: entries.files().map((file) => toPosix(path21.relative(paths.design, file)))
     }
   });
-  const viewer = fs20.existsSync(PKG.viewer) ? sirv(PKG.viewer, { dev: true, etag: true }) : null;
-  const viewerIndex = path20.join(PKG.viewer, "index.html");
+  const publicDir = project.publicDir();
+  const servePublic = publicDir ? sirv(publicDir, { dev: true }) : null;
+  const publicRel = (encoded) => {
+    try {
+      return decodeURIComponent(encoded);
+    } catch {
+      return null;
+    }
+  };
+  const viewer = fs22.existsSync(PKG.viewer) ? sirv(PKG.viewer, { dev: true, etag: true }) : null;
+  const viewerIndex = path21.join(PKG.viewer, "index.html");
   const serveViewerIndex = (res) => {
-    const html = fs20.readFileSync(viewerIndex, "utf8").replace(/<head>/i, '<head>\n<base href="/">');
+    const html = fs22.readFileSync(viewerIndex, "utf8").replace(/<head>/i, '<head>\n<base href="/">');
     res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
     res.end(html);
   };
   const ctx = { project, events, snapshots };
   const systemCssUrl = `/${relToDesign(paths, entries.systemCssFile())}`;
-  const bootUrl = `/${relToDesign(paths, path20.join(entries.dir, HTML_BOOT))}`;
+  const bootUrl = `/${relToDesign(paths, path21.join(entries.dir, HTML_BOOT))}`;
   const frameHead = (source, extra = {}) => {
     const canvasTheme = source.canvas === SYSTEM_CANVAS ? void 0 : project.canvas(source.canvas)?.doc.theme;
     return {
@@ -3882,6 +4053,8 @@ async function startDevServer(options) {
       fonts: project.system()?.doc.fonts ?? [],
       snapshots: source.canvas !== SYSTEM_CANVAS,
       autoHeight: source.autoHeight ?? false,
+      // Vite serves the public folder under the frames' base.
+      public: { base: "/_fs/", files: project.publicFiles() },
       ...extra
     };
   };
@@ -3892,7 +4065,7 @@ async function startDevServer(options) {
       notFoundPage(res, "Screen not found", `No screen "${id2}" in "${canvas}". Check canvas.json.`);
       return;
     }
-    if (!fs20.existsSync(entries.entryFile(source))) entries.sync();
+    if (!fs22.existsSync(entries.entryFile(source))) entries.sync();
     const entryUrl = `/${relToDesign(paths, entries.entryFile(source))}`;
     const html = await vite.transformIndexHtml(url2.pathname + url2.search, moduleShell(frameHead(source), entryUrl));
     res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
@@ -3901,8 +4074,8 @@ async function startDevServer(options) {
   };
   const serveHtmlScreen = async (res, url2) => {
     const rel = decodeURIComponent(url2.pathname.slice("/_fs/".length));
-    const file = path20.resolve(paths.design, rel);
-    if (!isInside(paths.design, file) || !fs20.existsSync(file)) {
+    const file = path21.resolve(paths.design, rel);
+    if (!isInside(paths.design, file) || !fs22.existsSync(file)) {
       notFoundPage(res, "Screen not found", `No file .design/${rel}`);
       return;
     }
@@ -3912,13 +4085,13 @@ async function startDevServer(options) {
       key: `${canvas}/${id2}`,
       canvas,
       id: id2,
-      title: path20.basename(file),
+      title: path21.basename(file),
       file,
       format: "html",
       props: {},
       system: true
     };
-    const raw = fs20.readFileSync(file, "utf8");
+    const raw = fs22.readFileSync(file, "utf8");
     const withSystem = source.system && !optsOutOfSystem(raw);
     const html = injectIntoHtml(
       raw,
@@ -3950,17 +4123,24 @@ async function startDevServer(options) {
         return;
       }
       if (url2.pathname.startsWith("/_fs/")) {
+        const rel = publicRel(url2.pathname.slice("/_fs/".length));
+        if (publicDir && rel !== null && !project.isPublicFile(rel) && fs22.existsSync(path21.join(publicDir, rel))) {
+          notFoundPage(res, "Not found", url2.pathname);
+          return;
+        }
         vite.middlewares(req, res, () => notFoundPage(res, "Not found", url2.pathname));
         return;
       }
       if (viewer) {
+        const notViewer = () => {
+          const rel = publicRel(url2.pathname.slice(1));
+          if (servePublic && rel !== null && project.isPublicFile(rel))
+            servePublic(req, res, () => notFoundPage(res, "Not found", url2.pathname));
+          else if (path21.extname(url2.pathname)) notFoundPage(res, "Not found", url2.pathname);
+          else serveViewerIndex(res);
+        };
         if (url2.pathname === "/" || url2.pathname === "/index.html") serveViewerIndex(res);
-        else
-          viewer(
-            req,
-            res,
-            () => path20.extname(url2.pathname) ? notFoundPage(res, "Not found", url2.pathname) : serveViewerIndex(res)
-          );
+        else viewer(req, res, notViewer);
       } else notFoundPage(res, "Viewer is not built", "Run `pnpm build` in the foss-design package.");
     } catch (error) {
       fail(error);
@@ -3983,7 +4163,8 @@ async function startDevServer(options) {
     }, 60);
   };
   vite.watcher.on("all", (event, file) => {
-    const rel = toPosix(path20.relative(paths.design, file));
+    if (publicDir && isInside(publicDir, file)) project.invalidatePublic();
+    const rel = toPosix(path21.relative(paths.design, file));
     if (rel.startsWith("..") || rel.startsWith(".cache/") || rel.startsWith("node_modules/")) return;
     if (rel === "design.json") {
       queue("config", () => {
@@ -4091,15 +4272,15 @@ async function ensureServer(paths, options) {
   if (stale)
     print(dim(`Restarting the preview server: it runs foss-design ${live2.version}, this is ${packageVersion()}.`));
   if (live2) await stopServer(paths);
-  fs21.mkdirSync(paths.cache, { recursive: true });
-  const log = fs21.openSync(logFile(paths), "w");
+  fs23.mkdirSync(paths.cache, { recursive: true });
+  const log = fs23.openSync(logFile(paths), "w");
   const args = [PKG.cli, "preview", "--foreground", "--root", paths.root];
   if (options.port) args.push("--port", String(options.port));
   const child = spawn(process.execPath, args, { detached: true, stdio: ["ignore", log, log], cwd: paths.root });
   child.unref();
   const state = await waitForServer(paths, 4e4);
   if (!state) {
-    const tail = fs21.existsSync(logFile(paths)) ? fs21.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
+    const tail = fs23.existsSync(logFile(paths)) ? fs23.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
     throw new CliError(`The preview server did not start.
 ${tail.join("\n")}`);
   }
@@ -4277,9 +4458,9 @@ function printLinkIssues(issues, project) {
 }
 
 // src/cli/commands/cloud.ts
-import fs22 from "fs";
+import fs24 from "fs";
 import os3 from "os";
-import path21 from "path";
+import path22 from "path";
 var sleep2 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 async function runLogin() {
   const host = cloudHost();
@@ -4380,7 +4561,7 @@ async function runLink(paths, wanted, options) {
     print(`${dim("Already linked to")} ${project.name} ${dim(`(${project.id}, ${project.role})`)}`);
   } else {
     writeLink(paths, { host, project: project.id, units: {}, conflicts: {} });
-    fs22.rmSync(path21.join(cloudCache(paths), "incoming"), { recursive: true, force: true });
+    fs24.rmSync(path22.join(cloudCache(paths), "incoming"), { recursive: true, force: true });
     const replaced = current ? dim(` (replacing the link to ${current.project})`) : "";
     print(`${green("linked")} .design \u2192 ${bold(project.name)} ${dim(`(${project.id}, ${project.role})`)}${replaced}`);
   }
@@ -4405,8 +4586,8 @@ async function runLink(paths, wanted, options) {
 }
 
 // src/cli/commands/scaffold.ts
-import fs23 from "fs";
-import path22 from "path";
+import fs25 from "fs";
+import path23 from "path";
 
 // src/cli/templates.ts
 var TOKENS_CSS = `/*
@@ -4617,40 +4798,40 @@ function mainScreen(canvasId) {
 
 // src/cli/commands/scaffold.ts
 function write(file, content, root) {
-  if (fs23.existsSync(file)) {
-    print(`  ${dim("exists ")} ${path22.relative(root, file)}`);
+  if (fs25.existsSync(file)) {
+    print(`  ${dim("exists ")} ${path23.relative(root, file)}`);
     return false;
   }
-  fs23.mkdirSync(path22.dirname(file), { recursive: true });
-  fs23.writeFileSync(file, content);
-  print(`  ${green("created")} ${path22.relative(root, file)}`);
+  fs25.mkdirSync(path23.dirname(file), { recursive: true });
+  fs25.writeFileSync(file, content);
+  print(`  ${green("created")} ${path23.relative(root, file)}`);
   return true;
 }
 function ensureGitignored(root) {
-  const file = path22.join(root, ".gitignore");
-  const current = fs23.existsSync(file) ? fs23.readFileSync(file, "utf8") : "";
+  const file = path23.join(root, ".gitignore");
+  const current = fs25.existsSync(file) ? fs25.readFileSync(file, "utf8") : "";
   const covered = current.split(/\r?\n/).map((line) => line.trim()).some((line) => [".design", ".design/", "/.design", "/.design/", ".design/*"].includes(line));
   if (covered) return "present";
   const prefix = current && !current.endsWith("\n") ? "\n" : "";
-  fs23.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
+  fs25.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
 .design/
 `);
   return "added";
 }
 function projectName(root) {
   try {
-    const manifest = JSON.parse(fs23.readFileSync(path22.join(root, "package.json"), "utf8"));
+    const manifest = JSON.parse(fs25.readFileSync(path23.join(root, "package.json"), "utf8"));
     if (typeof manifest.name === "string" && manifest.name) return manifest.name;
   } catch {
   }
-  return path22.basename(root);
+  return path23.basename(root);
 }
 function runInit(root, options) {
   const paths = designPaths(root);
   print(`Setting up ${DESIGN_DIR} in ${root}`);
   write(paths.config, `${JSON.stringify({ name: options.name ?? projectName(root) }, null, 2)}
 `, root);
-  fs23.mkdirSync(paths.canvases, { recursive: true });
+  fs25.mkdirSync(paths.canvases, { recursive: true });
   if (options.gitignore) {
     const result = ensureGitignored(root);
     print(`  ${result === "added" ? green("ignored") : dim("ignored")} .design/ in .gitignore`);
@@ -4662,44 +4843,44 @@ function runSystemInit(root, options) {
   const paths = designPaths(root);
   let base = projectName(root);
   try {
-    base = JSON.parse(fs23.readFileSync(paths.config, "utf8")).name || base;
+    base = JSON.parse(fs25.readFileSync(paths.config, "utf8")).name || base;
   } catch {
   }
   const name = options.name ?? `${base} design system`;
-  print(`Scaffolding the design system in ${path22.relative(root, paths.system)}`);
-  write(path22.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
+  print(`Scaffolding the design system in ${path23.relative(root, paths.system)}`);
+  write(path23.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
 `, root);
-  write(path22.join(paths.system, "tokens.css"), TOKENS_CSS, root);
+  write(path23.join(paths.system, "tokens.css"), TOKENS_CSS, root);
   if (!options.empty) {
-    write(path22.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
-    write(path22.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
-    write(path22.join(paths.system, "specimens", "button.tsx"), BUTTON_SPECIMEN_TSX, root);
+    write(path23.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
+    write(path23.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
+    write(path23.join(paths.system, "specimens", "button.tsx"), BUTTON_SPECIMEN_TSX, root);
   }
 }
 function runNew(root, id2, options) {
   if (!ID_PATTERN.test(id2)) throw new CliError(`"${id2}" is not a valid canvas id: use letters, digits, "-" and "_"`);
   const paths = designPaths(root);
-  const dir = path22.join(paths.canvases, id2);
-  if (fs23.existsSync(path22.join(dir, "canvas.json"))) throw new CliError(`Canvas "${id2}" already exists in ${dir}`);
+  const dir = path23.join(paths.canvases, id2);
+  if (fs25.existsSync(path23.join(dir, "canvas.json"))) throw new CliError(`Canvas "${id2}" already exists in ${dir}`);
   print(`Creating canvas "${id2}"`);
   const title = options.title ?? titleize(id2);
   if (options.empty) {
     write(
-      path22.join(dir, "canvas.json"),
+      path23.join(dir, "canvas.json"),
       `${JSON.stringify({ title, pages: [{ id: "main", title: "Main", sections: [] }] }, null, 2)}
 `,
       root
     );
-    fs23.mkdirSync(path22.join(dir, "screens"), { recursive: true });
+    fs25.mkdirSync(path23.join(dir, "screens"), { recursive: true });
   } else {
-    write(path22.join(dir, "canvas.json"), canvasJson(title), root);
-    write(path22.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
+    write(path23.join(dir, "canvas.json"), canvasJson(title), root);
+    write(path23.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
   }
 }
 
 // src/cli/commands/shot.ts
-import fs24 from "fs";
-import path23 from "path";
+import fs26 from "fs";
+import path24 from "path";
 var OVERVIEW_TIMEOUT = 9e4;
 async function runShot(paths, target, options) {
   const [canvasId = "", screenId] = target.split("/");
@@ -4715,15 +4896,15 @@ async function runShot(paths, target, options) {
     throw new CliError(`No page "${options.page}" in "${canvasId}". Pages: ${doc.pages.map((p) => p.id).join(", ")}`);
   }
   const theme2 = options.theme ?? doc.theme ?? "light";
-  const outBase = path23.resolve(options.out ?? paths.shots);
-  const outDir = path23.join(outBase, canvasId);
-  fs24.mkdirSync(outDir, { recursive: true });
+  const outBase = path24.resolve(options.out ?? paths.shots);
+  const outDir = path24.join(outBase, canvasId);
+  fs26.mkdirSync(outDir, { recursive: true });
   const base = await serverBase(paths);
   const browser = await launchChrome();
   let failed = false;
   try {
     if (options.overview) {
-      if (!fs24.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there is no canvas to shoot.");
+      if (!fs26.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there is no canvas to shoot.");
       const pages = options.page ? [options.page] : screenId ? doc.pages.filter((page) => page.sections.some((section) => section.items.some((item) => item.id === screenId))).map((page) => page.id) : doc.pages.map((page) => page.id);
       for (const pageId of pages) {
         const page = await browser.newPage({ viewport: { width: 1920, height: 1200 } });
@@ -4739,7 +4920,7 @@ async function runShot(paths, target, options) {
           warn(`page "${pageId}": not every frame reported ready within ${OVERVIEW_TIMEOUT / 1e3}s; shooting anyway`);
         }
         await page.waitForTimeout(400);
-        const file = path23.join(outDir, `${pageId}.overview.png`);
+        const file = path24.join(outDir, `${pageId}.overview.png`);
         await page.screenshot({ path: file });
         await page.close();
         print(file);
@@ -4768,7 +4949,7 @@ async function shootFrames(browser, jobs, outDir) {
   let failed = false;
   const results = await mapLimit(jobs, 4, async (job) => {
     const page = await browser.newPage({ viewport: { width: job.width, height: job.height } });
-    const file = path23.join(outDir, `${job.id}.${job.theme}.png`);
+    const file = path24.join(outDir, `${job.id}.${job.theme}.png`);
     try {
       const report = await openFrame(page, job.url, { waitForReady: job.waitForReady });
       await page.screenshot({ path: file, fullPage: job.fullPage });
@@ -4800,8 +4981,8 @@ async function shootSystem(paths, project, id2, options) {
   if (id2 && !all.some((job) => job.id === id2)) {
     throw new CliError(`No specimen "${id2}" in the design system. Specimens: ${all.map((job) => job.id).join(", ")}`);
   }
-  const outDir = path23.join(path23.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
-  fs24.mkdirSync(outDir, { recursive: true });
+  const outDir = path24.join(path24.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
+  fs26.mkdirSync(outDir, { recursive: true });
   const base = await serverBase(paths);
   const jobs = systemFrames(system.doc, base, theme2).filter((job) => !id2 || job.id === id2);
   const browser = await launchChrome();
@@ -4813,7 +4994,7 @@ async function shootSystem(paths, project, id2, options) {
 }
 
 // src/cli/commands/cloud-status.ts
-import path24 from "path";
+import path25 from "path";
 var STATE_TEXT = {
   in_sync: green,
   local_changes: yellow,
@@ -4836,7 +5017,7 @@ function detail(paths, status) {
   if (status.state === "remote_ahead" && !status.local && !status.baseRev) parts.push("not pulled yet");
   if (status.state === "remote_ahead" && status.changed.length && !status.deletedRemotely)
     parts.push(`${plural(status.changed.length, "file")} changed here; the cloud only rebuilt it`);
-  if (status.conflictRev !== void 0) parts.push(`merge ${path24.relative(paths.root, incomingDir(paths, status.key))}`);
+  if (status.conflictRev !== void 0) parts.push(`merge ${path25.relative(paths.root, incomingDir(paths, status.key))}`);
   return parts.join(" \xB7 ");
 }
 async function printCloudStatus(paths, label) {
@@ -5010,7 +5191,7 @@ ${bold("Environment")}
   FOSS_DESIGN_CLOUD  Cloud to sign in and link to (default https://app.fossdesign.dev)
 `;
 function projectPaths(rootOption, requireDesign = true) {
-  const found = rootOption ? path25.resolve(rootOption) : findProjectRoot();
+  const found = rootOption ? path26.resolve(rootOption) : findProjectRoot();
   if (!found) {
     if (!requireDesign) return designPaths(process.cwd());
     throw new CliError("No .design folder here or above. Run `design init` in the project root first.");
@@ -5056,7 +5237,7 @@ async function main(argv) {
   if (values.theme && !theme2) throw new CliError("--theme is light or dark");
   switch (command) {
     case "init":
-      return runInit(values.root ? path25.resolve(values.root) : process.cwd(), {
+      return runInit(values.root ? path26.resolve(values.root) : process.cwd(), {
         name: values.name,
         gitignore: !values["no-gitignore"]
       });