foss-design 0.9.7 → 0.9.9

package/dist/cli.js

@@ -3,7 +3,7 @@
 // src/cli/index.ts
 import { spawnSync as spawnSync3 } from "child_process";
 import fs37 from "fs";
-import path35 from "path";
+import path36 from "path";
 import { parseArgs } from "util";
 
 // src/core/paths.ts
@@ -348,8 +348,8 @@ function routeError(pattern) {
   }
   return null;
 }
-function split(path36) {
-  return path36.split("/").filter(Boolean);
+function split(path37) {
+  return path37.split("/").filter(Boolean);
 }
 function compileRoute(pattern) {
   return {
@@ -368,8 +368,8 @@ function decode2(part) {
     return part;
   }
 }
-function scoreRoute(route2, path36) {
-  const parts = split(path36.split(/[?#]/)[0] ?? "").map(decode2);
+function scoreRoute(route2, path37) {
+  const parts = split(path37.split(/[?#]/)[0] ?? "").map(decode2);
   const walk2 = (s, p) => {
     if (s === route2.segments.length) return p === parts.length ? 0 : null;
     const segment = route2.segments[s];
@@ -387,11 +387,11 @@ function scoreRoute(route2, path36) {
   };
   return walk2(0, 0);
 }
-function matchRoute(entries, path36) {
+function matchRoute(entries, path37) {
   let best = null;
   for (const entry of entries) {
     for (const route2 of entry.routes) {
-      const score = scoreRoute(route2, path36);
+      const score = scoreRoute(route2, path37);
       if (score !== null && (!best || score > best.score)) best = { score, value: entry.value };
     }
   }
@@ -518,9 +518,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, path36) {
+function formatPath(base, path37) {
   let out = base;
-  for (const part of path36) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
+  for (const part of path37) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
   return out;
 }
 function describeZodError(error, base = "") {
@@ -2150,10 +2150,23 @@ async function buildSite(paths, out, options = {}) {
     inputs.push(file);
   }
   fs12.mkdirSync(out, { recursive: true });
+  const moduleMap = {};
   if (inputs.length) {
     const base = baseConfig(project);
     await build({
       ...base,
+      plugins: [
+        ...base.plugins ?? [],
+        options.moduleMap ? {
+          name: "design-module-map",
+          generateBundle(_, bundle) {
+            for (const [file, chunk2] of Object.entries(bundle)) {
+              if (chunk2.type !== "chunk") continue;
+              moduleMap[file] = (chunk2.moduleIds ?? []).map((id2) => id2.split("?")[0]).filter((id2) => path12.isAbsolute(id2) && !id2.includes(`${path12.sep}node_modules${path12.sep}`)).map((id2) => toPosix(path12.relative(paths.root, id2))).filter((rel) => !rel.startsWith(".."));
+            }
+          }
+        } : null
+      ],
       root: staging,
       base: "./",
       logLevel: "warn",
@@ -2173,6 +2186,7 @@ async function buildSite(paths, out, options = {}) {
     fs12.rmSync(out, { recursive: true, force: true });
     fs12.mkdirSync(out, { recursive: true });
   }
+  if (options.moduleMap) fs12.writeFileSync(path12.join(out, "modules.json"), JSON.stringify(moduleMap));
   for (const { source, dir } of htmlScreens) {
     copyTree(
       path12.dirname(source.file),
@@ -2634,7 +2648,7 @@ var CloudClient = class {
   }
   host;
   token;
-  async send(method, path36, init) {
+  async send(method, path37, init) {
     const headers = {
       "User-Agent": `foss-design/${packageVersion()} (${os.platform()})`,
       Accept: "application/json"
@@ -2642,7 +2656,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${path36}`, {
+      return await fetch(`${this.host}/api${path37}`, {
         method,
         headers,
         body: init.body,
@@ -2663,8 +2677,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, path36, body) {
-    const response = await this.send(method, path36, {
+  async request(method, path37, body) {
+    const response = await this.send(method, path37, {
       body: body === void 0 ? void 0 : JSON.stringify(body),
       type: body === void 0 ? void 0 : "application/json",
       timeout: JSON_TIMEOUT
@@ -2676,7 +2690,7 @@ var CloudClient = class {
     try {
       return JSON.parse(text2);
     } catch {
-      throw new CloudError(`${this.host} answered ${method} ${path36} with something other than JSON`, 0, "bad_response");
+      throw new CloudError(`${this.host} answered ${method} ${path37} with something other than JSON`, 0, "bad_response");
     }
   }
   /** POST /device/code. */
@@ -3031,10 +3045,32 @@ var plural = (count, word, many = `${word}s`) => `${count} ${count === 1 ? word
 // src/capture/cover.ts
 import fs20 from "fs";
 import os3 from "os";
+import path19 from "path";
 
 // src/server/snapshots.ts
+import { createHash as createHash5 } from "crypto";
 import fs17 from "fs";
 import path17 from "path";
+function depsHash(root, rels, cache = /* @__PURE__ */ new Map()) {
+  const hash = createHash5("sha1");
+  for (const rel of [...rels].sort()) {
+    let one = cache.get(rel);
+    if (one === void 0) {
+      one = sourceHash(path17.join(root, rel)) ?? "missing";
+      cache.set(rel, one);
+    }
+    hash.update(`${rel}\0${one}
+`);
+  }
+  return hash.digest("hex").slice(0, 16);
+}
+function sourceHash(file) {
+  try {
+    return createHash5("sha1").update(fs17.readFileSync(file)).digest("hex").slice(0, 16);
+  } catch {
+    return null;
+  }
+}
 var SAFE = /^@?[a-z0-9][a-z0-9_-]*$/i;
 function isSafeSegment(value) {
   return SAFE.test(value);
@@ -3050,6 +3086,12 @@ var SnapshotStore = class {
   metaFile(canvas) {
     return path17.join(this.dir, canvas, "meta.json");
   }
+  /** Written aside and renamed: a run stopped mid-write leaves the old file, not half of one. */
+  writeMeta(canvas, data) {
+    const temp = `${this.metaFile(canvas)}.${process.pid}.tmp`;
+    fs17.writeFileSync(temp, JSON.stringify(data));
+    fs17.renameSync(temp, this.metaFile(canvas));
+  }
   load(canvas) {
     const cached = this.meta.get(canvas);
     if (cached) return cached;
@@ -3084,7 +3126,26 @@ var SnapshotStore = class {
     if (!isSafeSegment(canvas) || !isSafeSegment(id2)) return null;
     return this.load(canvas)[id2]?.[theme2] ?? null;
   }
-  save(canvas, id2, theme2, png, height) {
+  /** The source hash recorded with the snapshot; undefined for snapshots taken before hashes were kept. */
+  source(canvas, id2, theme2) {
+    if (!isSafeSegment(canvas) || !isSafeSegment(id2)) return void 0;
+    return this.load(canvas)[id2]?.sources?.[theme2];
+  }
+  /** The files the snapshot's frame loaded, when a build told (see `Meta.deps`). */
+  deps(canvas, id2) {
+    if (!isSafeSegment(canvas) || !isSafeSegment(id2)) return void 0;
+    return this.load(canvas)[id2]?.deps;
+  }
+  /** Record `hash` for a snapshot taken before hashes were kept: from now on it counts as that content's. */
+  adopt(canvas, id2, theme2, hash) {
+    if (!isSafeSegment(canvas) || !isSafeSegment(id2)) return;
+    const data = this.load(canvas);
+    const entry = data[id2];
+    if (!entry?.[theme2]) return;
+    entry.sources = { ...entry.sources, [theme2]: hash };
+    this.writeMeta(canvas, data);
+  }
+  save(canvas, id2, theme2, png, height, source, deps) {
     if (!isSafeSegment(canvas) || !isSafeSegment(id2)) throw new Error("bad snapshot key");
     const dir = path17.join(this.dir, canvas);
     fs17.mkdirSync(dir, { recursive: true });
@@ -3093,10 +3154,12 @@ var SnapshotStore = class {
     fs17.renameSync(`${file}.${process.pid}.tmp`, file);
     const data = this.load(canvas);
     const version = Date.now();
-    data[id2] = { ...data[id2], [theme2]: version, ...height ? { height } : {} };
-    const temp = `${this.metaFile(canvas)}.${process.pid}.tmp`;
-    fs17.writeFileSync(temp, JSON.stringify(data));
-    fs17.renameSync(temp, this.metaFile(canvas));
+    const previous = data[id2];
+    const sources = { ...previous?.sources };
+    if (source) sources[theme2] = source;
+    else delete sources[theme2];
+    data[id2] = { ...previous, [theme2]: version, ...height ? { height } : {}, sources, ...deps ? { deps } : {} };
+    this.writeMeta(canvas, 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. */
@@ -3120,7 +3183,8 @@ async function serveBuild(paths, name, options) {
   await buildSite(paths, out, {
     canvases: options.canvases,
     includeSystem: options.includeSystem,
-    includeViewer: false
+    includeViewer: false,
+    moduleMap: options.moduleMap
   });
   const files = sirv(out, { dev: true });
   const server = http.createServer((req, res) => {
@@ -3341,6 +3405,7 @@ function staleSnapshots(paths, canvasIds, filter = {}) {
   const store = new SnapshotStore(paths.snapshots);
   const project = new DesignProject(paths, DEV_URLS, store.lookup);
   const stale = [];
+  const hashes2 = /* @__PURE__ */ new Map();
   for (const id2 of canvasIds) {
     const canvas = project.canvas(id2);
     if (!canvas) continue;
@@ -3353,13 +3418,19 @@ function staleSnapshots(paths, canvasIds, filter = {}) {
       if (filter.screens && !filter.screens.has(job.id)) continue;
       const file = files.get(job.id);
       if (!file || !fs20.existsSync(file)) continue;
-      const changed = fs20.statSync(file).mtimeMs;
+      const deps = store.deps(id2, job.id);
+      const hash = deps ? depsHash(paths.root, deps, hashes2) : sourceHash(file);
       const pinned = inDark.get(job.id) === job.theme;
       const themes = pinned ? [job.theme] : THEMES2;
-      const screen = { id: job.id };
       for (const theme2 of themes) {
-        const taken = store.version(id2, screen.id, theme2);
-        if (!taken || taken < changed) stale.push({ canvas: id2, screen: screen.id, theme: theme2 });
+        if (!store.version(id2, job.id, theme2)) {
+          stale.push({ canvas: id2, screen: job.id, theme: theme2, source: hash });
+          continue;
+        }
+        const recorded = store.source(id2, job.id, theme2);
+        if (recorded === void 0) {
+          if (hash) store.adopt(id2, job.id, theme2, hash);
+        } else if (recorded !== hash) stale.push({ canvas: id2, screen: job.id, theme: theme2, source: hash });
       }
     }
   }
@@ -3376,9 +3447,12 @@ async function takeSnapshots(paths, targets, preview, progress2) {
   let docOf = (id2) => project.canvas(id2).doc;
   let stop = async () => {
   };
+  let modules = null;
+  const hashes2 = /* @__PURE__ */ new Map();
   try {
-    const build2 = await serveBuild(paths, "snapshot-build", { canvases, includeSystem: false });
+    const build2 = await serveBuild(paths, "snapshot-build", { canvases, includeSystem: false, moduleMap: true });
     url = build2.base;
+    modules = build2.read("modules.json");
     docOf = (id2) => build2.read(`api/canvas/${id2}.json`) ?? project.canvas(id2).doc;
     stop = build2.close;
   } catch {
@@ -3391,7 +3465,7 @@ async function takeSnapshots(paths, targets, preview, progress2) {
   const line = () => `Snapshots ${done}/${targets.length} (both themes, as the viewer and the cloud show them)`;
   progress2.update(line());
   try {
-    await mapLimit([...targets], TABS, async ({ canvas, screen, theme: theme2 }) => {
+    await mapLimit([...targets], TABS, async ({ canvas, screen, theme: theme2, source }) => {
       const job = canvasFrames(docOf(canvas), url, theme2, { id: screen })[0];
       if (job) {
         const page = await browser.newPage({
@@ -3399,12 +3473,25 @@ async function takeSnapshots(paths, targets, preview, progress2) {
           deviceScaleFactor: Math.min(1, SNAPSHOT_WIDTH / job.width),
           colorScheme: theme2
         });
+        const loaded = /* @__PURE__ */ new Set();
+        page.on("request", (request) => {
+          const at = request.url();
+          if (at.startsWith(url)) loaded.add(decodeURIComponent(new URL(at).pathname.slice(1)));
+        });
         try {
           const report = await openFrame(page, job.url, { waitForReady: job.waitForReady });
           if (report.ready) {
             const png = await page.screenshot({ fullPage: job.fullPage });
             const height = job.fullPage ? await page.evaluate(() => document.documentElement.scrollHeight) : void 0;
-            store.save(canvas, screen, theme2, png, height);
+            const file = project.source(canvas, screen)?.file;
+            const deps = modules ? [
+              .../* @__PURE__ */ new Set([
+                ...[...loaded].flatMap((rel) => modules[rel] ?? []),
+                ...file ? [toPosix(path19.relative(paths.root, file))] : []
+              ])
+            ].sort() : [];
+            const hash = deps.length ? depsHash(paths.root, deps, hashes2) : source;
+            store.save(canvas, screen, theme2, png, height, hash, deps.length ? deps : void 0);
           } else failed.push(`${canvas}/${screen} (${theme2})`);
         } catch {
           failed.push(`${canvas}/${screen} (${theme2})`);
@@ -3431,21 +3518,21 @@ async function takeSnapshots(paths, targets, preview, progress2) {
 
 // src/cloud/pull.ts
 import fs24 from "fs";
-import path22 from "path";
+import path23 from "path";
 
 // src/cloud/merge.ts
 import fs22 from "fs";
-import path20 from "path";
+import path21 from "path";
 import { merge as diff3 } from "node-diff3";
 
 // src/cloud/write.ts
 import fs21 from "fs";
-import path19 from "path";
+import path20 from "path";
 function writeInside(root, rel, data) {
-  const file = path19.join(root, rel);
+  const file = path20.join(root, rel);
   if (!isInside(root, file)) throw new CliError(`Refusing to write outside ${root}: ${rel}`);
-  fs21.mkdirSync(path19.dirname(file), { recursive: true });
-  if (!isInside(fs21.realpathSync(root), fs21.realpathSync(path19.dirname(file))))
+  fs21.mkdirSync(path20.dirname(file), { recursive: true });
+  if (!isInside(fs21.realpathSync(root), fs21.realpathSync(path20.dirname(file))))
     throw new CliError(`Refusing to write through a link out of ${root}: ${rel}`);
   if (fs21.existsSync(file) && fs21.lstatSync(file).isSymbolicLink()) fs21.unlinkSync(file);
   fs21.writeFileSync(file, data);
@@ -3459,16 +3546,16 @@ function pruneEmpty(dir, stop) {
     } catch {
       return;
     }
-    current = path19.dirname(current);
+    current = path20.dirname(current);
   }
 }
 
 // src/cloud/merge.ts
 var TEXT = /\.(?:[cm]?[jt]sx?|json|css|scss|html?|mdx?|svg|txt|ya?ml|csv|xml|toml)$/i;
 var isText = (rel, ...data) => TEXT.test(rel) && data.every((buffer) => !buffer || !buffer.subarray(0, 8192).includes(0));
-var mergeDir = (paths, key) => path20.join(cloudCache(paths), "merge", ...key.split("/"));
-var stateFile = (paths, key) => path20.join(mergeDir(paths, key), "state.json");
-var sideFile = (paths, key, rel, side) => path20.join(mergeDir(paths, key), side, rel);
+var mergeDir = (paths, key) => path21.join(cloudCache(paths), "merge", ...key.split("/"));
+var stateFile = (paths, key) => path21.join(mergeDir(paths, key), "state.json");
+var sideFile = (paths, key, rel, side) => path21.join(mergeDir(paths, key), side, rel);
 function readMergeState(paths, key) {
   try {
     return JSON.parse(fs22.readFileSync(stateFile(paths, key), "utf8"));
@@ -3482,10 +3569,10 @@ function saveState(paths, state) {
 `);
 }
 function mergingUnits(paths) {
-  const root = path20.join(cloudCache(paths), "merge");
+  const root = path21.join(cloudCache(paths), "merge");
   const found = [];
   const visit = (dir, prefix) => {
-    if (fs22.existsSync(path20.join(dir, "state.json"))) {
+    if (fs22.existsSync(path21.join(dir, "state.json"))) {
       const state = readMergeState(paths, prefix);
       if (state) found.push(state);
       return;
@@ -3496,7 +3583,7 @@ function mergingUnits(paths) {
     } catch {
     }
     for (const entry of entries)
-      if (entry.isDirectory()) visit(path20.join(dir, entry.name), prefix ? `${prefix}/${entry.name}` : entry.name);
+      if (entry.isDirectory()) visit(path21.join(dir, entry.name), prefix ? `${prefix}/${entry.name}` : entry.name);
   };
   visit(root, "");
   return found;
@@ -3506,7 +3593,7 @@ function openConflicts(paths, state) {
   return state.conflicts.filter((conflict) => {
     if (conflict.kind !== "text") return true;
     try {
-      return MARKER.test(fs22.readFileSync(path20.join(paths.design, conflict.path), "utf8"));
+      return MARKER.test(fs22.readFileSync(path21.join(paths.design, conflict.path), "utf8"));
     } catch {
       return false;
     }
@@ -3515,19 +3602,19 @@ function openConflicts(paths, state) {
 function keep(paths, key, rel, side, data) {
   if (!data) return;
   const file = sideFile(paths, key, rel, side);
-  fs22.mkdirSync(path20.dirname(file), { recursive: true });
+  fs22.mkdirSync(path21.dirname(file), { recursive: true });
   fs22.writeFileSync(file, data);
 }
 function mergeUnit(paths, key, headRev, base, here, cloud2, blob) {
   const files = { added: 0, changed: 0, removed: 0, merged: 0 };
   const conflicts = [];
-  const stop = key === SYSTEM_UNIT ? paths.design : path20.dirname(unitRoot(paths, key));
+  const stop = key === SYSTEM_UNIT ? paths.design : path21.dirname(unitRoot(paths, key));
   fs22.rmSync(mergeDir(paths, key), { recursive: true, force: true });
-  const read = (rel) => fs22.readFileSync(path20.join(paths.design, rel));
+  const read = (rel) => fs22.readFileSync(path21.join(paths.design, rel));
   const remove = (rel) => {
-    const file = path20.join(paths.design, rel);
+    const file = path21.join(paths.design, rel);
     fs22.rmSync(file, { force: true });
-    pruneEmpty(path20.dirname(file), stop);
+    pruneEmpty(path21.dirname(file), stop);
   };
   for (const rel of [.../* @__PURE__ */ new Set([...Object.keys(base), ...Object.keys(here), ...Object.keys(cloud2)])].sort()) {
     const b = base[rel];
@@ -3583,11 +3670,11 @@ function resolveConflict(paths, state, rel, side) {
   const conflict = state.conflicts.find((item) => item.path === rel);
   if (!conflict) return;
   const kept = sideFile(paths, state.unit, rel, side);
-  const stop = state.unit === SYSTEM_UNIT ? paths.design : path20.dirname(unitRoot(paths, state.unit));
+  const stop = state.unit === SYSTEM_UNIT ? paths.design : path21.dirname(unitRoot(paths, state.unit));
   if (fs22.existsSync(kept)) writeInside(paths.design, rel, fs22.readFileSync(kept));
   else {
-    fs22.rmSync(path20.join(paths.design, rel), { force: true });
-    pruneEmpty(path20.dirname(path20.join(paths.design, rel)), stop);
+    fs22.rmSync(path21.join(paths.design, rel), { force: true });
+    pruneEmpty(path21.dirname(path21.join(paths.design, rel)), stop);
   }
   state.conflicts = state.conflicts.filter((item) => item.path !== rel);
   saveState(paths, state);
@@ -3605,7 +3692,7 @@ function finishMerge(paths, link, key, accept = false) {
 
 // src/cloud/meta.ts
 import fs23 from "fs";
-import path21 from "path";
+import path22 from "path";
 async function syncProjectMeta(paths, client, link) {
   const remote = await client.project(link.project);
   if (!remote) return [];
@@ -3624,7 +3711,7 @@ async function syncProjectMeta(paths, client, link) {
   if (localChanged && !cloudChanged) {
     try {
       if (file) {
-        const ext = path21.extname(file).slice(1);
+        const ext = path22.extname(file).slice(1);
         await client.setProjectIcon(link.project, { data: fs23.readFileSync(file), type: ICON_TYPES[ext] });
         lines.push("The project icon went up to the cloud.");
       } else {
@@ -3660,12 +3747,12 @@ function checkManifest(key, manifest) {
 }
 function applyUnit(paths, key, local, target, blobs) {
   const counts = { added: 0, changed: 0, removed: 0 };
-  const stop = key === SYSTEM_UNIT ? paths.design : path22.dirname(unitRoot(paths, key));
+  const stop = key === SYSTEM_UNIT ? paths.design : path23.dirname(unitRoot(paths, key));
   for (const rel of Object.keys(local)) {
     if (rel in target) continue;
-    const file = path22.join(paths.design, rel);
+    const file = path23.join(paths.design, rel);
     fs24.rmSync(file, { force: true });
-    pruneEmpty(path22.dirname(file), stop);
+    pruneEmpty(path23.dirname(file), stop);
     counts.removed++;
   }
   for (const [rel, entry] of Object.entries(target)) {
@@ -3764,7 +3851,7 @@ async function pull(ctx, options) {
   }
   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, path22.join(paths.design, rel));
+    for (const [rel, entry] of Object.entries(unit.manifest)) byHash.set(entry.hash, path23.join(paths.design, rel));
   const needed = /* @__PURE__ */ new Set();
   const bases = /* @__PURE__ */ new Set();
   for (const plan of plans) {
@@ -3863,7 +3950,7 @@ async function pull(ctx, options) {
 
 // src/cloud/push.ts
 import fs25 from "fs";
-import path23 from "path";
+import path24 from "path";
 function blockedReport(status, message) {
   return {
     unit: status.key,
@@ -3979,7 +4066,7 @@ async function push(ctx, options) {
   for (const key of toPush) {
     const s = status(key);
     if (s.conflictRev !== void 0) {
-      const dir = path23.relative(paths.root, incomingDir(paths, key));
+      const dir = path24.relative(paths.root, incomingDir(paths, key));
       blocked.push(
         blockedReport(
           s,
@@ -4028,7 +4115,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, path23.join(dir, rel));
+      if (!files.has(entry.hash)) files.set(entry.hash, path24.join(dir, rel));
   };
   for (const key of pushing) {
     const id2 = unitCanvasId(key);
@@ -4074,7 +4161,7 @@ async function push(ctx, options) {
         await client.putBlob(link.project, hash, data);
       } catch (error) {
         if (error instanceof CloudError && error.status === 413)
-          throw new CliError(`${path23.relative(process.cwd(), file)} (${megabytes(data.length)}): ${error.message}`);
+          throw new CliError(`${path24.relative(process.cwd(), file)} (${megabytes(data.length)}): ${error.message}`);
         throw error;
       }
       sentFiles++;
@@ -4118,7 +4205,7 @@ function refuseLegacyGo(paths, keys) {
   for (const key of keys) {
     if (!key.startsWith("canvas/")) continue;
     const id2 = key.slice("canvas/".length);
-    for (const file of canvasCodeFiles(path23.join(paths.canvases, id2), project.canvas(id2)?.screens ?? [])) {
+    for (const file of canvasCodeFiles(path24.join(paths.canvases, id2), project.canvas(id2)?.screens ?? [])) {
       for (const line of legacyGoLines(file)) hits.add(`${relToRoot(paths, file)}:${line}`);
     }
   }
@@ -4139,13 +4226,13 @@ import fs29 from "fs";
 // src/server/index.ts
 import fs28 from "fs";
 import http2 from "http";
-import path26 from "path";
+import path27 from "path";
 import sirv2 from "sirv";
 import { createServer, searchForWorkspaceRoot } from "vite";
 
 // src/server/api.ts
 import fs26 from "fs";
-import path24 from "path";
+import path25 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));
@@ -4196,7 +4283,7 @@ async function handleApi(ctx, req, res, url) {
   }
   if (route2 === "/source") {
     const rel = url.searchParams.get("path") ?? "";
-    const file = path24.resolve(project.paths.root, rel);
+    const file = path25.resolve(project.paths.root, rel);
     if (!rel || !isInside(project.paths.root, file) || !fs26.existsSync(file) || fs26.statSync(file).isDirectory()) {
       sendJson(res, 404, { error: "not found" });
       return true;
@@ -4236,7 +4323,10 @@ async function handleApi(ctx, req, res, url) {
     try {
       const body = await readBody(req);
       if (body.subarray(0, 8).toString("hex") !== "89504e470d0a1a0a") throw new Error("not a PNG");
-      const { url: snapshotUrl } = snapshots.save(canvas, id2, theme2, body, height);
+      const deps = snapshots.deps(canvas, id2);
+      const file = project.source(canvas, id2)?.file;
+      const source = deps ? depsHash(project.paths.root, deps) : file ? sourceHash(file) : null;
+      const { url: snapshotUrl } = snapshots.save(canvas, id2, theme2, body, height, source);
       project.invalidateCanvas(canvas);
       events.send({ type: "snapshot", canvas, id: id2, theme: theme2, url: snapshotUrl, height });
       sendJson(res, 200, { url: snapshotUrl });
@@ -4295,9 +4385,9 @@ var EventHub = class {
 // src/server/state.ts
 import fs27 from "fs";
 import os4 from "os";
-import path25 from "path";
-var stateFile2 = (paths) => path25.join(paths.cache, "server.json");
-var logFile = (paths) => path25.join(paths.cache, "server.log");
+import path26 from "path";
+var stateFile2 = (paths) => path26.join(paths.cache, "server.json");
+var logFile = (paths) => path26.join(paths.cache, "server.log");
 function readState(paths) {
   try {
     return JSON.parse(fs27.readFileSync(stateFile2(paths), "utf8"));
@@ -4306,10 +4396,10 @@ function readState(paths) {
   }
 }
 function registryDir() {
-  const base = process.platform === "win32" ? process.env.LOCALAPPDATA || process.env.APPDATA || path25.join(os4.homedir(), "AppData", "Local") : process.env.XDG_CACHE_HOME || path25.join(os4.homedir(), ".cache");
-  return path25.join(base, "foss-design", "previews");
+  const base = process.platform === "win32" ? process.env.LOCALAPPDATA || process.env.APPDATA || path26.join(os4.homedir(), "AppData", "Local") : process.env.XDG_CACHE_HOME || path26.join(os4.homedir(), ".cache");
+  return path26.join(base, "foss-design", "previews");
 }
-var entryFile = (pid) => path25.join(registryDir(), `${pid}.json`);
+var entryFile = (pid) => path26.join(registryDir(), `${pid}.json`);
 function writeState(paths, state) {
   fs27.mkdirSync(paths.cache, { recursive: true });
   fs27.writeFileSync(stateFile2(paths), `${JSON.stringify(state, null, 2)}
@@ -4336,7 +4426,7 @@ function listPreviews() {
   }
   const found = [];
   for (const name of files) {
-    const file = path25.join(registryDir(), name);
+    const file = path26.join(registryDir(), name);
     let state = null;
     try {
       state = JSON.parse(fs27.readFileSync(file, "utf8"));
@@ -4348,7 +4438,7 @@ function listPreviews() {
     }
     let recorded = null;
     try {
-      recorded = JSON.parse(fs27.readFileSync(path25.join(state.root, ".design", ".cache", "server.json"), "utf8"));
+      recorded = JSON.parse(fs27.readFileSync(path26.join(state.root, ".design", ".cache", "server.json"), "utf8"));
     } catch {
     }
     found.push({ ...state, tracked: recorded?.pid === state.pid });
@@ -4363,7 +4453,7 @@ async function stopPreview(entry) {
   const until = Date.now() + 5e3;
   while (Date.now() < until && pidAlive(entry.pid)) await new Promise((resolve) => setTimeout(resolve, 100));
   fs27.rmSync(entryFile(entry.pid), { force: true });
-  const stateAt = path25.join(entry.root, ".design", ".cache", "server.json");
+  const stateAt = path26.join(entry.root, ".design", ".cache", "server.json");
   try {
     if (JSON.parse(fs27.readFileSync(stateAt, "utf8")).pid === entry.pid)
       fs27.rmSync(stateAt, { force: true });
@@ -4452,8 +4542,8 @@ async function startDevServer(options) {
         // `.cache` is ours (server.log, snapshots, builds): a change there must not reload frames. The
         // generated entries are modules the frames load, so those stay watched.
         ignored: (file) => {
-          const rel = toPosix(path26.relative(paths.cache, file));
-          const inCache = rel !== "" && !rel.startsWith("..") && !path26.isAbsolute(rel);
+          const rel = toPosix(path27.relative(paths.cache, file));
+          const inCache = rel !== "" && !rel.startsWith("..") && !path27.isAbsolute(rel);
           return inCache && rel !== "entries" && !rel.startsWith("entries/");
         }
       },
@@ -4462,7 +4552,7 @@ async function startDevServer(options) {
       forwardConsole: false
     },
     optimizeDeps: {
-      entries: entries.files().map((file) => toPosix(path26.relative(paths.design, file)))
+      entries: entries.files().map((file) => toPosix(path27.relative(paths.design, file)))
     }
   });
   const publicDir = project.publicDir();
@@ -4475,7 +4565,7 @@ async function startDevServer(options) {
     }
   };
   const viewer = fs28.existsSync(PKG.viewer) ? sirv2(PKG.viewer, { dev: true, etag: true }) : null;
-  const viewerIndex = path26.join(PKG.viewer, "index.html");
+  const viewerIndex = path27.join(PKG.viewer, "index.html");
   const serveViewerIndex = (res) => {
     const html = fs28.readFileSync(viewerIndex, "utf8").replace(/<head>/i, '<head>\n<base href="/">');
     res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
@@ -4483,7 +4573,7 @@ async function startDevServer(options) {
   };
   const ctx = { project, events, snapshots };
   const systemCssUrl = `/${relToDesign(paths, entries.systemCssFile())}`;
-  const bootUrl = `/${relToDesign(paths, path26.join(entries.dir, HTML_BOOT))}`;
+  const bootUrl = `/${relToDesign(paths, path27.join(entries.dir, HTML_BOOT))}`;
   const frameHead = (source, extra = {}) => {
     const canvasTheme = source.canvas === SYSTEM_CANVAS ? void 0 : project.canvas(source.canvas)?.doc.theme;
     return {
@@ -4513,7 +4603,7 @@ async function startDevServer(options) {
   };
   const serveHtmlScreen = async (res, url2) => {
     const rel = decodeURIComponent(url2.pathname.slice("/_fs/".length));
-    const file = path26.resolve(paths.design, rel);
+    const file = path27.resolve(paths.design, rel);
     if (!isInside(paths.design, file) || !fs28.existsSync(file)) {
       notFoundPage(res, "Screen not found", `No file .design/${rel}`);
       return;
@@ -4524,7 +4614,7 @@ async function startDevServer(options) {
       key: `${canvas}/${id2}`,
       canvas,
       id: id2,
-      title: path26.basename(file),
+      title: path27.basename(file),
       file,
       format: "html",
       props: {},
@@ -4563,7 +4653,7 @@ async function startDevServer(options) {
       }
       if (url2.pathname.startsWith("/_fs/")) {
         const rel = publicRel(url2.pathname.slice("/_fs/".length));
-        if (publicDir && rel !== null && !project.isPublicFile(rel) && fs28.existsSync(path26.join(publicDir, rel))) {
+        if (publicDir && rel !== null && !project.isPublicFile(rel) && fs28.existsSync(path27.join(publicDir, rel))) {
           notFoundPage(res, "Not found", url2.pathname);
           return;
         }
@@ -4575,7 +4665,7 @@ async function startDevServer(options) {
           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 (path26.extname(url2.pathname)) notFoundPage(res, "Not found", url2.pathname);
+          else if (path27.extname(url2.pathname)) notFoundPage(res, "Not found", url2.pathname);
           else serveViewerIndex(res);
         };
         if (url2.pathname === "/" || url2.pathname === "/index.html") serveViewerIndex(res);
@@ -4603,7 +4693,7 @@ async function startDevServer(options) {
   };
   vite.watcher.on("all", (event, file) => {
     if (publicDir && isInside(publicDir, file)) project.invalidatePublic();
-    const rel = toPosix(path26.relative(paths.design, file));
+    const rel = toPosix(path27.relative(paths.design, file));
     if (rel.startsWith("..") || rel.startsWith(".cache/") || rel.startsWith("node_modules/")) return;
     if (rel === "design.json") {
       queue("config", () => {
@@ -5328,7 +5418,7 @@ function printLinkIssues(issues, project) {
 // src/cli/commands/cloud.ts
 import fs30 from "fs";
 import os5 from "os";
-import path27 from "path";
+import path28 from "path";
 var sleep2 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 async function runLogin() {
   const host = cloudHost();
@@ -5429,7 +5519,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: {} });
-    fs30.rmSync(path27.join(cloudCache(paths), "incoming"), { recursive: true, force: true });
+    fs30.rmSync(path28.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}`);
   }
@@ -5457,7 +5547,7 @@ async function runLink(paths, wanted, options) {
 
 // src/cli/commands/icon.ts
 import fs31 from "fs";
-import path28 from "path";
+import path29 from "path";
 async function toCloud(paths, file) {
   const link = readLink(paths);
   if (!link) return;
@@ -5468,7 +5558,7 @@ async function toCloud(paths, file) {
   }
   const client = new CloudClient(link.host, credential.token);
   try {
-    const ext = file ? path28.extname(file).slice(1) : null;
+    const ext = file ? path29.extname(file).slice(1) : null;
     await client.setProjectIcon(
       link.project,
       file && ext ? { data: fs31.readFileSync(file), type: ICON_TYPES[ext] } : null
@@ -5484,14 +5574,14 @@ async function runIcon(paths, file, options) {
   if (options.remove) {
     const had = iconFile(paths);
     writeIcon(paths, null);
-    print(had ? `${green("Removed")} ${path28.relative(process.cwd(), had)}` : "The project has no icon.");
+    print(had ? `${green("Removed")} ${path29.relative(process.cwd(), had)}` : "The project has no icon.");
     await toCloud(paths, null);
     return;
   }
   if (!file) {
     const current = iconFile(paths);
     if (!current) return print("The project has no icon. Set one with `design icon <file.svg|png|webp>`.");
-    return print(`${path28.relative(process.cwd(), current)} ${dim(`${Math.ceil(fs31.statSync(current).size / 1024)} KB`)}`);
+    return print(`${path29.relative(process.cwd(), current)} ${dim(`${Math.ceil(fs31.statSync(current).size / 1024)} KB`)}`);
   }
   let data;
   try {
@@ -5499,20 +5589,20 @@ async function runIcon(paths, file, options) {
   } catch {
     throw new CliError(`No file ${file}`);
   }
-  const problem = iconProblem(data, path28.extname(file).slice(1).toLowerCase() || void 0);
+  const problem = iconProblem(data, path29.extname(file).slice(1).toLowerCase() || void 0);
   if (problem) throw new CliError(`${file}: ${problem}`);
   const written = writeIcon(paths, data);
-  print(`${green("Set")} the project icon: ${path28.relative(process.cwd(), written)}`);
+  print(`${green("Set")} the project icon: ${path29.relative(process.cwd(), written)}`);
   await toCloud(paths, written);
 }
 
 // src/cli/commands/import.ts
 import fs33 from "fs";
-import path30 from "path";
+import path31 from "path";
 
 // src/import/claude-design.ts
 import fs32 from "fs";
-import path29 from "path";
+import path30 from "path";
 
 // src/import/markup.ts
 var VOID = /* @__PURE__ */ new Set([
@@ -6120,7 +6210,7 @@ function boardId(file, used) {
   return id2;
 }
 function importClaudeDesign(dir, options = {}) {
-  const canvasFile = path29.join(dir, "canvas.json");
+  const canvasFile = path30.join(dir, "canvas.json");
   if (!fs32.existsSync(canvasFile))
     throw new Error(`No canvas.json in ${dir}: point at the exported Claude Design project folder`);
   const source = JSON.parse(fs32.readFileSync(canvasFile, "utf8"));
@@ -6151,7 +6241,7 @@ function importClaudeDesign(dir, options = {}) {
     try {
       files.set(
         `${name}.jsx`,
-        convertFile(name, fs32.readFileSync(path29.join(dir, file), "utf8"), { known, routes, warn: warn2 })
+        convertFile(name, fs32.readFileSync(path30.join(dir, file), "utf8"), { known, routes, warn: warn2 })
       );
     } catch (error) {
       warn2(`could not be converted: ${error.message}`);
@@ -6199,7 +6289,7 @@ function importClaudeDesign(dir, options = {}) {
     screens++;
   }
   const canvas = {
-    title: options.title ?? source.title ?? path29.basename(path29.resolve(dir)),
+    title: options.title ?? source.title ?? path30.basename(path30.resolve(dir)),
     description: "Imported from Claude Design.",
     // The templates bring their own styles; the design system's reset would restyle them.
     system: false,
@@ -6211,7 +6301,7 @@ function importClaudeDesign(dir, options = {}) {
 // src/cli/commands/import.ts
 var slug = (text2) => text2.normalize("NFKD").replace(/[^\w\s-]/g, "").trim().replace(/[\s_]+/g, "-").toLowerCase();
 function runImport(paths, from, options) {
-  const dir = path30.resolve(from);
+  const dir = path31.resolve(from);
   if (!fs33.existsSync(dir) || !fs33.statSync(dir).isDirectory()) throw new CliError(`No folder ${from}`);
   let result;
   try {
@@ -6219,13 +6309,13 @@ function runImport(paths, from, options) {
   } catch (error) {
     throw new CliError(error.message);
   }
-  const id2 = options.canvas ?? (slug(String(result.canvas.title)) || slug(path30.basename(dir)) || "imported");
+  const id2 = options.canvas ?? (slug(String(result.canvas.title)) || slug(path31.basename(dir)) || "imported");
   if (!ID_PATTERN.test(id2)) throw new CliError(`"${id2}" is no canvas id; pass one with --canvas <id>`);
-  const out = path30.join(paths.canvases, id2);
+  const out = path31.join(paths.canvases, id2);
   if (fs33.existsSync(out)) throw new CliError(`.design/canvas/${id2} exists; pick another id with --canvas <id>`);
-  fs33.mkdirSync(path30.join(out, "screens"), { recursive: true });
-  for (const [name, content] of result.files) fs33.writeFileSync(path30.join(out, "screens", name), content);
-  fs33.writeFileSync(path30.join(out, "canvas.json"), `${JSON.stringify(result.canvas, null, 2)}
+  fs33.mkdirSync(path31.join(out, "screens"), { recursive: true });
+  for (const [name, content] of result.files) fs33.writeFileSync(path31.join(out, "screens", name), content);
+  fs33.writeFileSync(path31.join(out, "canvas.json"), `${JSON.stringify(result.canvas, null, 2)}
 `);
   print(`${green("Imported")} ${bold(String(result.canvas.title))} \u2192 .design/canvas/${id2}`);
   print(
@@ -6245,7 +6335,7 @@ function runImport(paths, from, options) {
 
 // src/cli/commands/merge.ts
 import { spawnSync as spawnSync2 } from "child_process";
-import path31 from "path";
+import path32 from "path";
 import { createInterface } from "readline/promises";
 var KIND = {
   text: "both sides changed lines, the markers show them",
@@ -6261,7 +6351,7 @@ function matchTargets(paths, states, targets) {
       for (const conflict of openConflicts(paths, unit)) picked.push({ state: unit, conflict });
       continue;
     }
-    const rel = [path31.relative(paths.design, path31.resolve(target)), target.replace(/^\.design\//, "")];
+    const rel = [path32.relative(paths.design, path32.resolve(target)), target.replace(/^\.design\//, "")];
     const found = states.flatMap(
       (state) => state.conflicts.filter((item) => rel.includes(item.path)).map((conflict) => ({ state, conflict }))
     );
@@ -6277,7 +6367,7 @@ function printOpen(paths, states) {
     print(`${bold(state.unit)} ${dim(`merged with cloud r${state.headRev}`)}`);
     for (const conflict of open2) {
       print(`  ${red("\u2717")} ${conflict.path}  ${dim(KIND[conflict.kind])}`);
-      const sides = ["here", "cloud", "base"].map((side) => `${side}: ${path31.relative(process.cwd(), sideFile(paths, state.unit, conflict.path, side))}`).join(" \xB7 ");
+      const sides = ["here", "cloud", "base"].map((side) => `${side}: ${path32.relative(process.cwd(), sideFile(paths, state.unit, conflict.path, side))}`).join(" \xB7 ");
       print(`      ${dim(sides)}`);
     }
   }
@@ -6358,7 +6448,7 @@ async function runMerge(paths, targets, options) {
           if (answer === "s") break;
           if (answer === "e" && edit) {
             const editor = process.env.VISUAL || process.env.EDITOR || "vi";
-            spawnSync2(editor, [path31.join(paths.design, conflict.path)], { stdio: "inherit", shell: true });
+            spawnSync2(editor, [path32.join(paths.design, conflict.path)], { stdio: "inherit", shell: true });
             if (!openConflicts(paths, state).some((item) => item.path === conflict.path)) break;
             print(yellow("  Conflict markers are still there."));
           }
@@ -6402,7 +6492,7 @@ async function runRename(paths, name) {
 
 // src/cli/commands/scaffold.ts
 import fs35 from "fs";
-import path32 from "path";
+import path33 from "path";
 
 // src/cli/templates.ts
 var TOKENS_CSS = `/*
@@ -6614,16 +6704,16 @@ function mainScreen(canvasId) {
 // src/cli/commands/scaffold.ts
 function write(file, content, root) {
   if (fs35.existsSync(file)) {
-    print(`  ${dim("exists ")} ${path32.relative(root, file)}`);
+    print(`  ${dim("exists ")} ${path33.relative(root, file)}`);
     return false;
   }
-  fs35.mkdirSync(path32.dirname(file), { recursive: true });
+  fs35.mkdirSync(path33.dirname(file), { recursive: true });
   fs35.writeFileSync(file, content);
-  print(`  ${green("created")} ${path32.relative(root, file)}`);
+  print(`  ${green("created")} ${path33.relative(root, file)}`);
   return true;
 }
 function ensureGitignored(root) {
-  const file = path32.join(root, ".gitignore");
+  const file = path33.join(root, ".gitignore");
   const current = fs35.existsSync(file) ? fs35.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";
@@ -6635,11 +6725,11 @@ function ensureGitignored(root) {
 }
 function projectName(root) {
   try {
-    const manifest = JSON.parse(fs35.readFileSync(path32.join(root, "package.json"), "utf8"));
+    const manifest = JSON.parse(fs35.readFileSync(path33.join(root, "package.json"), "utf8"));
     if (typeof manifest.name === "string" && manifest.name) return manifest.name;
   } catch {
   }
-  return path32.basename(root);
+  return path33.basename(root);
 }
 function runInit(root, options) {
   const paths = designPaths(root);
@@ -6664,40 +6754,40 @@ function runSystemInit(root, options) {
   } catch {
   }
   const name = options.name ?? `${base} design system`;
-  print(`Scaffolding the design system in ${path32.relative(root, paths.system)}`);
-  write(path32.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
+  print(`Scaffolding the design system in ${path33.relative(root, paths.system)}`);
+  write(path33.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
 `, root);
-  write(path32.join(paths.system, "tokens.css"), TOKENS_CSS, root);
+  write(path33.join(paths.system, "tokens.css"), TOKENS_CSS, root);
   if (!options.empty) {
-    write(path32.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
-    write(path32.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
-    write(path32.join(paths.system, "specimens", "button.tsx"), BUTTON_SPECIMEN_TSX, root);
+    write(path33.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
+    write(path33.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
+    write(path33.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 = path32.join(paths.canvases, id2);
-  if (fs35.existsSync(path32.join(dir, "canvas.json"))) throw new CliError(`Canvas "${id2}" already exists in ${dir}`);
+  const dir = path33.join(paths.canvases, id2);
+  if (fs35.existsSync(path33.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(
-      path32.join(dir, "canvas.json"),
+      path33.join(dir, "canvas.json"),
       `${JSON.stringify({ title, pages: [{ id: "main", title: "Main", sections: [] }] }, null, 2)}
 `,
       root
     );
-    fs35.mkdirSync(path32.join(dir, "screens"), { recursive: true });
+    fs35.mkdirSync(path33.join(dir, "screens"), { recursive: true });
   } else {
-    write(path32.join(dir, "canvas.json"), canvasJson(title), root);
-    write(path32.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
+    write(path33.join(dir, "canvas.json"), canvasJson(title), root);
+    write(path33.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
   }
 }
 
 // src/cli/commands/shot.ts
 import fs36 from "fs";
-import path33 from "path";
+import path34 from "path";
 var OVERVIEW_TIMEOUT = 9e4;
 async function runShot(paths, target, options) {
   const [canvasId = "", screenId] = target.split("/");
@@ -6713,8 +6803,8 @@ 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 = path33.resolve(options.out ?? paths.shots);
-  const outDir = path33.join(outBase, canvasId);
+  const outBase = path34.resolve(options.out ?? paths.shots);
+  const outDir = path34.join(outBase, canvasId);
   fs36.mkdirSync(outDir, { recursive: true });
   const base = await serverBase(paths);
   const browser = await launchChrome();
@@ -6737,7 +6827,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 = path33.join(outDir, `${pageId}.overview.png`);
+        const file = path34.join(outDir, `${pageId}.overview.png`);
         await page.screenshot({ path: file });
         await page.close();
         print(file);
@@ -6766,7 +6856,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 = path33.join(outDir, `${job.id}.${job.theme}.png`);
+    const file = path34.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 });
@@ -6798,7 +6888,7 @@ 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 = path33.join(path33.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
+  const outDir = path34.join(path34.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
   fs36.mkdirSync(outDir, { recursive: true });
   const base = await serverBase(paths);
   const jobs = systemFrames(system.doc, base, theme2).filter((job) => !id2 || job.id === id2);
@@ -6823,6 +6913,16 @@ async function runSnapshots(paths, targets, options) {
   }
   if (options.page && picked.size !== 1)
     throw new CliError("--page needs exactly one canvas: `design snapshots <canvas> --page <id>`");
+  const project = new DesignProject(paths, DEV_URLS);
+  for (const [canvas, screens] of picked) {
+    if (!screens) continue;
+    const ids = new Set(project.canvas(canvas).screens.map((screen) => screen.id));
+    const missing = [...screens].filter((id2) => !ids.has(id2));
+    if (missing.length)
+      throw new CliError(
+        `No screen ${missing.map((id2) => `"${id2}"`).join(", ")} in "${canvas}". Screens: ${[...ids].slice(0, 30).join(", ")}${ids.size > 30 ? ", \u2026" : ""}`
+      );
+  }
   const canvases = picked.size ? [...picked.keys()] : known;
   const stale = canvases.flatMap(
     (canvas) => staleSnapshots(paths, [canvas], { page: options.page, screens: picked.get(canvas) ?? void 0 })
@@ -6839,7 +6939,7 @@ async function runSnapshots(paths, targets, options) {
 }
 
 // src/cli/commands/cloud-status.ts
-import path34 from "path";
+import path35 from "path";
 var STATE_TEXT = {
   in_sync: green,
   local_changes: yellow,
@@ -6862,7 +6962,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 ${path34.relative(paths.root, incomingDir(paths, status.key))}`);
+  if (status.conflictRev !== void 0) parts.push(`merge ${path35.relative(paths.root, incomingDir(paths, status.key))}`);
   return parts.join(" \xB7 ");
 }
 async function printCloudStatus(paths, label) {
@@ -7057,7 +7157,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 ? path35.resolve(rootOption) : findProjectRoot();
+  const found = rootOption ? path36.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.");
@@ -7110,7 +7210,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 ? path35.resolve(values.root) : process.cwd(), {
+      return runInit(values.root ? path36.resolve(values.root) : process.cwd(), {
         name: values.name,
         gitignore: !values["no-gitignore"]
       });
@@ -7222,7 +7322,7 @@ function relaunchFromRealPath() {
   } catch {
     return false;
   }
-  const same = (a, b) => path35.resolve(a).toLowerCase() === path35.resolve(b).toLowerCase();
+  const same = (a, b) => path36.resolve(a).toLowerCase() === path36.resolve(b).toLowerCase();
   if (same(realScript, script) && same(realCwd, process.cwd())) return false;
   const result = spawnSync3(process.execPath, [...process.execArgv, realScript, ...process.argv.slice(2)], {
     stdio: "inherit",