foss-design 0.9.6 → 0.9.8

package/dist/cli.js

@@ -3029,11 +3029,20 @@ 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/capture/cover.ts
-import fs19 from "fs";
+import fs20 from "fs";
+import os3 from "os";
 
 // src/server/snapshots.ts
+import { createHash as createHash5 } from "crypto";
 import fs17 from "fs";
 import path17 from "path";
+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);
@@ -3049,6 +3058,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;
@@ -3083,15 +3098,35 @@ 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];
+  }
+  /** 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) {
     if (!isSafeSegment(canvas) || !isSafeSegment(id2)) throw new Error("bad snapshot key");
     const dir = path17.join(this.dir, canvas);
     fs17.mkdirSync(dir, { recursive: true });
-    fs17.writeFileSync(path17.join(dir, `${id2}.${theme2}.png`), png);
+    const file = path17.join(dir, `${id2}.${theme2}.png`);
+    fs17.writeFileSync(`${file}.${process.pid}.tmp`, png);
+    fs17.renameSync(`${file}.${process.pid}.tmp`, file);
     const data = this.load(canvas);
     const version = Date.now();
-    data[id2] = { ...data[id2], [theme2]: version, ...height ? { height } : {} };
-    fs17.writeFileSync(this.metaFile(canvas), JSON.stringify(data));
+    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 };
+    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. */
@@ -3104,8 +3139,54 @@ var SnapshotStore = class {
   }
 };
 
-// src/capture/chrome.ts
+// src/capture/build-server.ts
 import fs18 from "fs";
+import http from "http";
+import path18 from "path";
+import sirv from "sirv";
+async function serveBuild(paths, name, options) {
+  const out = path18.join(paths.cache, name);
+  fs18.rmSync(out, { recursive: true, force: true });
+  await buildSite(paths, out, {
+    canvases: options.canvases,
+    includeSystem: options.includeSystem,
+    includeViewer: false
+  });
+  const files = sirv(out, { dev: true });
+  const server = http.createServer((req, res) => {
+    const url = new URL(req.url ?? "/", "http://localhost");
+    const segments = url.pathname.split("/").map((segment) => {
+      try {
+        return decodeURIComponent(segment);
+      } catch {
+        return segment;
+      }
+    });
+    req.url = segments.join("/") + url.search;
+    files(req, res, () => {
+      res.statusCode = 404;
+      res.end("Not found");
+    });
+  });
+  await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve));
+  return {
+    base: `http://127.0.0.1:${server.address().port}`,
+    read(rel) {
+      try {
+        return JSON.parse(fs18.readFileSync(path18.join(out, rel), "utf8"));
+      } catch {
+        return null;
+      }
+    },
+    close: () => new Promise((resolve) => {
+      server.closeAllConnections();
+      server.close(() => resolve());
+    })
+  };
+}
+
+// src/capture/chrome.ts
+import fs19 from "fs";
 var CANDIDATES = {
   darwin: [
     "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
@@ -3129,8 +3210,8 @@ var CANDIDATES = {
 };
 function findChrome() {
   const configured = process.env.DESIGN_CHROME;
-  if (configured && fs18.existsSync(configured)) return configured;
-  for (const candidate of CANDIDATES[process.platform] ?? []) if (fs18.existsSync(candidate)) return candidate;
+  if (configured && fs19.existsSync(configured)) return configured;
+  for (const candidate of CANDIDATES[process.platform] ?? []) if (fs19.existsSync(candidate)) return candidate;
   return null;
 }
 async function launchChrome() {
@@ -3161,6 +3242,8 @@ async function openFrame(page, url, options = {}) {
     record2(text2);
   });
   let ready = false;
+  let loadedAt = 0;
+  let readyMs;
   let reloads = 0;
   const onNavigate = () => {
     reloads++;
@@ -3173,6 +3256,7 @@ async function openFrame(page, url, options = {}) {
       outdated = () => resolve("outdated");
     });
     await page.goto(url, { waitUntil: "load", timeout: options.timeoutMs ?? 3e4 });
+    loadedAt = Date.now();
     page.on("load", onNavigate);
     if (!ready) {
       const signal = page.waitForFunction(() => window.__DESIGN_READY__ === true, null, {
@@ -3181,6 +3265,7 @@ async function openFrame(page, url, options = {}) {
       signal.catch(() => {
       });
       ready = await Promise.race([signal, turnedAway]).catch(() => null) === "ready";
+      if (ready) readyMs = Date.now() - loadedAt;
     }
     if (ready || options.waitForReady === false) await page.waitForTimeout(options.settleMs ?? 700);
     page.off("load", onNavigate);
@@ -3198,7 +3283,12 @@ async function openFrame(page, url, options = {}) {
   const unique2 = errors.filter(
     (error, index) => error && !errors.some((other, j) => j !== index && other && other.length < error.length && error.includes(other))
   );
-  return { errors: [...new Set(unique2)], ready, ...held ? { held } : {} };
+  return {
+    errors: [...new Set(unique2)],
+    ready,
+    ...held ? { held } : {},
+    ...readyMs !== void 0 ? { readyMs } : {}
+  };
 }
 
 // src/capture/frames.ts
@@ -3275,7 +3365,7 @@ async function mapLimit(items, limit, fn) {
 
 // src/capture/cover.ts
 var SNAPSHOT_WIDTH = 900;
-var TABS = 4;
+var TABS = Math.min(8, Math.max(2, os3.availableParallelism() - 1));
 var THEMES2 = ["light", "dark"];
 function staleSnapshots(paths, canvasIds, filter = {}) {
   const store = new SnapshotStore(paths.snapshots);
@@ -3292,25 +3382,43 @@ function staleSnapshots(paths, canvasIds, filter = {}) {
     for (const job of inLight) {
       if (filter.screens && !filter.screens.has(job.id)) continue;
       const file = files.get(job.id);
-      if (!file || !fs19.existsSync(file)) continue;
-      const changed = fs19.statSync(file).mtimeMs;
+      if (!file || !fs20.existsSync(file)) continue;
+      const hash = 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 });
       }
     }
   }
   return stale;
 }
-async function takeSnapshots(paths, targets, base, progress2) {
+async function takeSnapshots(paths, targets, preview, progress2) {
   if (!targets.length) return [];
   if (!findChrome()) return ["No Chrome here, so screens keep the snapshots they have."];
   const store = new SnapshotStore(paths.snapshots);
   const project = new DesignProject(paths, DEV_URLS, store.lookup);
-  const url = await base();
+  const canvases = [...new Set(targets.map((target) => target.canvas))];
+  progress2.update(`Building ${canvases.join(", ")} to take snapshots from\u2026`);
+  let url;
+  let docOf = (id2) => project.canvas(id2).doc;
+  let stop = async () => {
+  };
+  try {
+    const build2 = await serveBuild(paths, "snapshot-build", { canvases, includeSystem: false });
+    url = build2.base;
+    docOf = (id2) => build2.read(`api/canvas/${id2}.json`) ?? project.canvas(id2).doc;
+    stop = build2.close;
+  } catch {
+    url = await preview();
+  }
   const browser = await launchChrome();
   const failed = [];
   const started = Date.now();
@@ -3318,8 +3426,8 @@ async function takeSnapshots(paths, targets, base, 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 }) => {
-      const job = canvasFrames(project.canvas(canvas).doc, url, theme2, { id: screen })[0];
+    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({
           viewport: { width: job.width, height: job.height },
@@ -3331,7 +3439,7 @@ async function takeSnapshots(paths, targets, base, progress2) {
           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);
+            store.save(canvas, screen, theme2, png, height, source);
           } else failed.push(`${canvas}/${screen} (${theme2})`);
         } catch {
           failed.push(`${canvas}/${screen} (${theme2})`);
@@ -3345,6 +3453,7 @@ async function takeSnapshots(paths, targets, base, progress2) {
     });
   } finally {
     await browser.close();
+    await stop();
   }
   const seconds2 = Math.round((Date.now() - started) / 1e3);
   progress2.done(`Took ${targets.length - failed.length} snapshot${targets.length === 1 ? "" : "s"} in ${seconds2}s`);
@@ -3356,73 +3465,73 @@ async function takeSnapshots(paths, targets, base, progress2) {
 }
 
 // src/cloud/pull.ts
-import fs23 from "fs";
-import path21 from "path";
+import fs24 from "fs";
+import path22 from "path";
 
 // src/cloud/merge.ts
-import fs21 from "fs";
-import path19 from "path";
+import fs22 from "fs";
+import path20 from "path";
 import { merge as diff3 } from "node-diff3";
 
 // src/cloud/write.ts
-import fs20 from "fs";
-import path18 from "path";
+import fs21 from "fs";
+import path19 from "path";
 function writeInside(root, rel, data) {
-  const file = path18.join(root, rel);
+  const file = path19.join(root, rel);
   if (!isInside(root, file)) throw new CliError(`Refusing to write outside ${root}: ${rel}`);
-  fs20.mkdirSync(path18.dirname(file), { recursive: true });
-  if (!isInside(fs20.realpathSync(root), fs20.realpathSync(path18.dirname(file))))
+  fs21.mkdirSync(path19.dirname(file), { recursive: true });
+  if (!isInside(fs21.realpathSync(root), fs21.realpathSync(path19.dirname(file))))
     throw new CliError(`Refusing to write through a link out of ${root}: ${rel}`);
-  if (fs20.existsSync(file) && fs20.lstatSync(file).isSymbolicLink()) fs20.unlinkSync(file);
-  fs20.writeFileSync(file, data);
+  if (fs21.existsSync(file) && fs21.lstatSync(file).isSymbolicLink()) fs21.unlinkSync(file);
+  fs21.writeFileSync(file, data);
 }
 function pruneEmpty(dir, stop) {
   let current = dir;
   while (isInside(stop, current) && current !== stop) {
     try {
-      if (fs20.readdirSync(current).length) return;
-      fs20.rmdirSync(current);
+      if (fs21.readdirSync(current).length) return;
+      fs21.rmdirSync(current);
     } catch {
       return;
     }
-    current = path18.dirname(current);
+    current = path19.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) => path19.join(cloudCache(paths), "merge", ...key.split("/"));
-var stateFile = (paths, key) => path19.join(mergeDir(paths, key), "state.json");
-var sideFile = (paths, key, rel, side) => path19.join(mergeDir(paths, key), side, rel);
+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);
 function readMergeState(paths, key) {
   try {
-    return JSON.parse(fs21.readFileSync(stateFile(paths, key), "utf8"));
+    return JSON.parse(fs22.readFileSync(stateFile(paths, key), "utf8"));
   } catch {
     return null;
   }
 }
 function saveState(paths, state) {
-  fs21.mkdirSync(mergeDir(paths, state.unit), { recursive: true });
-  fs21.writeFileSync(stateFile(paths, state.unit), `${JSON.stringify(state, null, 2)}
+  fs22.mkdirSync(mergeDir(paths, state.unit), { recursive: true });
+  fs22.writeFileSync(stateFile(paths, state.unit), `${JSON.stringify(state, null, 2)}
 `);
 }
 function mergingUnits(paths) {
-  const root = path19.join(cloudCache(paths), "merge");
+  const root = path20.join(cloudCache(paths), "merge");
   const found = [];
   const visit = (dir, prefix) => {
-    if (fs21.existsSync(path19.join(dir, "state.json"))) {
+    if (fs22.existsSync(path20.join(dir, "state.json"))) {
       const state = readMergeState(paths, prefix);
       if (state) found.push(state);
       return;
     }
     let entries = [];
     try {
-      entries = fs21.readdirSync(dir, { withFileTypes: true });
+      entries = fs22.readdirSync(dir, { withFileTypes: true });
     } catch {
     }
     for (const entry of entries)
-      if (entry.isDirectory()) visit(path19.join(dir, entry.name), prefix ? `${prefix}/${entry.name}` : entry.name);
+      if (entry.isDirectory()) visit(path20.join(dir, entry.name), prefix ? `${prefix}/${entry.name}` : entry.name);
   };
   visit(root, "");
   return found;
@@ -3432,7 +3541,7 @@ function openConflicts(paths, state) {
   return state.conflicts.filter((conflict) => {
     if (conflict.kind !== "text") return true;
     try {
-      return MARKER.test(fs21.readFileSync(path19.join(paths.design, conflict.path), "utf8"));
+      return MARKER.test(fs22.readFileSync(path20.join(paths.design, conflict.path), "utf8"));
     } catch {
       return false;
     }
@@ -3441,19 +3550,19 @@ function openConflicts(paths, state) {
 function keep(paths, key, rel, side, data) {
   if (!data) return;
   const file = sideFile(paths, key, rel, side);
-  fs21.mkdirSync(path19.dirname(file), { recursive: true });
-  fs21.writeFileSync(file, data);
+  fs22.mkdirSync(path20.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 : path19.dirname(unitRoot(paths, key));
-  fs21.rmSync(mergeDir(paths, key), { recursive: true, force: true });
-  const read = (rel) => fs21.readFileSync(path19.join(paths.design, rel));
+  const stop = key === SYSTEM_UNIT ? paths.design : path20.dirname(unitRoot(paths, key));
+  fs22.rmSync(mergeDir(paths, key), { recursive: true, force: true });
+  const read = (rel) => fs22.readFileSync(path20.join(paths.design, rel));
   const remove = (rel) => {
-    const file = path19.join(paths.design, rel);
-    fs21.rmSync(file, { force: true });
-    pruneEmpty(path19.dirname(file), stop);
+    const file = path20.join(paths.design, rel);
+    fs22.rmSync(file, { force: true });
+    pruneEmpty(path20.dirname(file), stop);
   };
   for (const rel of [.../* @__PURE__ */ new Set([...Object.keys(base), ...Object.keys(here), ...Object.keys(cloud2)])].sort()) {
     const b = base[rel];
@@ -3509,11 +3618,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 : path19.dirname(unitRoot(paths, state.unit));
-  if (fs21.existsSync(kept)) writeInside(paths.design, rel, fs21.readFileSync(kept));
+  const stop = state.unit === SYSTEM_UNIT ? paths.design : path20.dirname(unitRoot(paths, state.unit));
+  if (fs22.existsSync(kept)) writeInside(paths.design, rel, fs22.readFileSync(kept));
   else {
-    fs21.rmSync(path19.join(paths.design, rel), { force: true });
-    pruneEmpty(path19.dirname(path19.join(paths.design, rel)), stop);
+    fs22.rmSync(path20.join(paths.design, rel), { force: true });
+    pruneEmpty(path20.dirname(path20.join(paths.design, rel)), stop);
   }
   state.conflicts = state.conflicts.filter((item) => item.path !== rel);
   saveState(paths, state);
@@ -3523,15 +3632,15 @@ function finishMerge(paths, link, key, accept = false) {
   if (state) {
     const open2 = openConflicts(paths, state).filter((conflict) => !(accept && conflict.kind !== "text"));
     if (open2.length) return open2;
-    fs21.rmSync(mergeDir(paths, key), { recursive: true, force: true });
+    fs22.rmSync(mergeDir(paths, key), { recursive: true, force: true });
   }
   delete link.conflicts[key];
   return [];
 }
 
 // src/cloud/meta.ts
-import fs22 from "fs";
-import path20 from "path";
+import fs23 from "fs";
+import path21 from "path";
 async function syncProjectMeta(paths, client, link) {
   const remote = await client.project(link.project);
   if (!remote) return [];
@@ -3550,8 +3659,8 @@ async function syncProjectMeta(paths, client, link) {
   if (localChanged && !cloudChanged) {
     try {
       if (file) {
-        const ext = path20.extname(file).slice(1);
-        await client.setProjectIcon(link.project, { data: fs22.readFileSync(file), type: ICON_TYPES[ext] });
+        const ext = path21.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 {
         await client.setProjectIcon(link.project, null);
@@ -3586,12 +3695,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 : path21.dirname(unitRoot(paths, key));
+  const stop = key === SYSTEM_UNIT ? paths.design : path22.dirname(unitRoot(paths, key));
   for (const rel of Object.keys(local)) {
     if (rel in target) continue;
-    const file = path21.join(paths.design, rel);
-    fs23.rmSync(file, { force: true });
-    pruneEmpty(path21.dirname(file), stop);
+    const file = path22.join(paths.design, rel);
+    fs24.rmSync(file, { force: true });
+    pruneEmpty(path22.dirname(file), stop);
     counts.removed++;
   }
   for (const [rel, entry] of Object.entries(target)) {
@@ -3661,7 +3770,7 @@ async function pull(ctx, options) {
       }
       if (s.conflictRev !== void 0) {
         finishMerge(paths, link, key, true);
-        fs23.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+        fs24.rmSync(incomingDir(paths, key), { recursive: true, force: true });
       }
       report.units.push({ ...reportFor("up_to_date"), rev: s.baseRev });
     } else if (!s.changed.length) {
@@ -3690,7 +3799,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, path21.join(paths.design, rel));
+    for (const [rel, entry] of Object.entries(unit.manifest)) byHash.set(entry.hash, path22.join(paths.design, rel));
   const needed = /* @__PURE__ */ new Set();
   const bases = /* @__PURE__ */ new Set();
   for (const plan of plans) {
@@ -3711,7 +3820,7 @@ async function pull(ctx, options) {
   const download = [];
   for (const hash of needed) {
     const file = byHash.get(hash);
-    if (file) blobs.set(hash, fs23.readFileSync(file));
+    if (file) blobs.set(hash, fs24.readFileSync(file));
     else download.push(hash);
   }
   if (download.length) {
@@ -3747,7 +3856,7 @@ 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];
-      fs23.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+      fs24.rmSync(incomingDir(paths, key), { recursive: true, force: true });
     } else {
       const result = mergeUnit(
         paths,
@@ -3758,7 +3867,7 @@ async function pull(ctx, options) {
         plan.remote.manifest,
         (hash) => blobs.get(hash)
       );
-      fs23.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+      fs24.rmSync(incomingDir(paths, key), { recursive: true, force: true });
       link.units[key] = { rev: plan.remote.headRev, files: hashes(plan.remote.manifest) };
       entry.rev = plan.remote.headRev;
       entry.files = result.files;
@@ -3788,8 +3897,8 @@ async function pull(ctx, options) {
 }
 
 // src/cloud/push.ts
-import fs24 from "fs";
-import path22 from "path";
+import fs25 from "fs";
+import path23 from "path";
 function blockedReport(status, message) {
   return {
     unit: status.key,
@@ -3905,7 +4014,7 @@ async function push(ctx, options) {
   for (const key of toPush) {
     const s = status(key);
     if (s.conflictRev !== void 0) {
-      const dir = path22.relative(paths.root, incomingDir(paths, key));
+      const dir = path23.relative(paths.root, incomingDir(paths, key));
       blocked.push(
         blockedReport(
           s,
@@ -3954,7 +4063,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, path22.join(dir, rel));
+      if (!files.has(entry.hash)) files.set(entry.hash, path23.join(dir, rel));
   };
   for (const key of pushing) {
     const id2 = unitCanvasId(key);
@@ -3986,7 +4095,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 + fs24.statSync(files.get(hash)).size, 0);
+    const bytes = missing.reduce((sum, hash) => sum + fs25.statSync(files.get(hash)).size, 0);
     const bar = ctx.progress();
     const started = Date.now();
     let sentFiles = 0;
@@ -3995,12 +4104,12 @@ async function push(ctx, options) {
     bar.update(line());
     await mapLimit(missing, TRANSFERS, async (hash) => {
       const file = files.get(hash);
-      const data = fs24.readFileSync(file);
+      const data = fs25.readFileSync(file);
       try {
         await client.putBlob(link.project, hash, data);
       } catch (error) {
         if (error instanceof CloudError && error.status === 413)
-          throw new CliError(`${path22.relative(process.cwd(), file)} (${megabytes(data.length)}): ${error.message}`);
+          throw new CliError(`${path23.relative(process.cwd(), file)} (${megabytes(data.length)}): ${error.message}`);
         throw error;
       }
       sentFiles++;
@@ -4033,7 +4142,7 @@ async function push(ctx, options) {
       url: webUrl(link, unit.key)
     });
   }
-  for (const key of resolved) fs24.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+  for (const key of resolved) fs25.rmSync(incomingDir(paths, key), { recursive: true, force: true });
   writeLink(paths, link);
   report.units.sort((a, b) => byUnit(a.unit, b.unit));
   return report;
@@ -4044,7 +4153,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(path22.join(paths.canvases, id2), project.canvas(id2)?.screens ?? [])) {
+    for (const file of canvasCodeFiles(path23.join(paths.canvases, id2), project.canvas(id2)?.screens ?? [])) {
       for (const line of legacyGoLines(file)) hits.add(`${relToRoot(paths, file)}:${line}`);
     }
   }
@@ -4060,18 +4169,18 @@ Still using go():
 
 // src/cli/commands/preview.ts
 import { spawn } from "child_process";
-import fs28 from "fs";
+import fs29 from "fs";
 
 // src/server/index.ts
-import fs27 from "fs";
-import http from "http";
-import path25 from "path";
-import sirv from "sirv";
+import fs28 from "fs";
+import http2 from "http";
+import path26 from "path";
+import sirv2 from "sirv";
 import { createServer, searchForWorkspaceRoot } from "vite";
 
 // src/server/api.ts
-import fs25 from "fs";
-import path23 from "path";
+import fs26 from "fs";
+import path24 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));
@@ -4122,17 +4231,17 @@ async function handleApi(ctx, req, res, url) {
   }
   if (route2 === "/source") {
     const rel = url.searchParams.get("path") ?? "";
-    const file = path23.resolve(project.paths.root, rel);
-    if (!rel || !isInside(project.paths.root, file) || !fs25.existsSync(file) || fs25.statSync(file).isDirectory()) {
+    const file = path24.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;
     }
-    if (fs25.statSync(file).size > 2 * 1024 * 1024) {
+    if (fs26.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(fs25.readFileSync(file, "utf8"));
+    res.end(fs26.readFileSync(file, "utf8"));
     return true;
   }
   if (route2 === "/icon" && (method === "PUT" || method === "DELETE")) {
@@ -4162,7 +4271,8 @@ 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 file = project.source(canvas, id2)?.file;
+      const { url: snapshotUrl } = snapshots.save(canvas, id2, theme2, body, height, file ? sourceHash(file) : null);
       project.invalidateCanvas(canvas);
       events.send({ type: "snapshot", canvas, id: id2, theme: theme2, url: snapshotUrl, height });
       sendJson(res, 200, { url: snapshotUrl });
@@ -4179,7 +4289,7 @@ async function handleApi(ctx, req, res, url) {
       return true;
     }
     res.writeHead(200, { "content-type": "image/png", "cache-control": "public, max-age=31536000, immutable" });
-    fs25.createReadStream(file).pipe(res);
+    fs26.createReadStream(file).pipe(res);
     return true;
   }
   return false;
@@ -4219,62 +4329,62 @@ var EventHub = class {
 };
 
 // src/server/state.ts
-import fs26 from "fs";
-import os3 from "os";
-import path24 from "path";
-var stateFile2 = (paths) => path24.join(paths.cache, "server.json");
-var logFile = (paths) => path24.join(paths.cache, "server.log");
+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");
 function readState(paths) {
   try {
-    return JSON.parse(fs26.readFileSync(stateFile2(paths), "utf8"));
+    return JSON.parse(fs27.readFileSync(stateFile2(paths), "utf8"));
   } catch {
     return null;
   }
 }
 function registryDir() {
-  const base = process.platform === "win32" ? process.env.LOCALAPPDATA || process.env.APPDATA || path24.join(os3.homedir(), "AppData", "Local") : process.env.XDG_CACHE_HOME || path24.join(os3.homedir(), ".cache");
-  return path24.join(base, "foss-design", "previews");
+  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");
 }
-var entryFile = (pid) => path24.join(registryDir(), `${pid}.json`);
+var entryFile = (pid) => path25.join(registryDir(), `${pid}.json`);
 function writeState(paths, state) {
-  fs26.mkdirSync(paths.cache, { recursive: true });
-  fs26.writeFileSync(stateFile2(paths), `${JSON.stringify(state, null, 2)}
+  fs27.mkdirSync(paths.cache, { recursive: true });
+  fs27.writeFileSync(stateFile2(paths), `${JSON.stringify(state, null, 2)}
 `);
   try {
-    fs26.mkdirSync(registryDir(), { recursive: true });
-    fs26.writeFileSync(entryFile(state.pid), `${JSON.stringify(state, null, 2)}
+    fs27.mkdirSync(registryDir(), { recursive: true });
+    fs27.writeFileSync(entryFile(state.pid), `${JSON.stringify(state, null, 2)}
 `);
   } catch {
   }
 }
 function clearState(paths, pid) {
   const state = readState(paths);
-  fs26.rmSync(entryFile(pid ?? state?.pid ?? -1), { force: true });
+  fs27.rmSync(entryFile(pid ?? state?.pid ?? -1), { force: true });
   if (pid !== void 0 && state && state.pid !== pid) return;
-  fs26.rmSync(stateFile2(paths), { force: true });
+  fs27.rmSync(stateFile2(paths), { force: true });
 }
 function listPreviews() {
   let files = [];
   try {
-    files = fs26.readdirSync(registryDir()).filter((name) => name.endsWith(".json"));
+    files = fs27.readdirSync(registryDir()).filter((name) => name.endsWith(".json"));
   } catch {
     return [];
   }
   const found = [];
   for (const name of files) {
-    const file = path24.join(registryDir(), name);
+    const file = path25.join(registryDir(), name);
     let state = null;
     try {
-      state = JSON.parse(fs26.readFileSync(file, "utf8"));
+      state = JSON.parse(fs27.readFileSync(file, "utf8"));
     } catch {
     }
     if (!state?.pid || !pidAlive(state.pid)) {
-      fs26.rmSync(file, { force: true });
+      fs27.rmSync(file, { force: true });
       continue;
     }
     let recorded = null;
     try {
-      recorded = JSON.parse(fs26.readFileSync(path24.join(state.root, ".design", ".cache", "server.json"), "utf8"));
+      recorded = JSON.parse(fs27.readFileSync(path25.join(state.root, ".design", ".cache", "server.json"), "utf8"));
     } catch {
     }
     found.push({ ...state, tracked: recorded?.pid === state.pid });
@@ -4288,11 +4398,11 @@ async function stopPreview(entry) {
   }
   const until = Date.now() + 5e3;
   while (Date.now() < until && pidAlive(entry.pid)) await new Promise((resolve) => setTimeout(resolve, 100));
-  fs26.rmSync(entryFile(entry.pid), { force: true });
-  const stateAt = path24.join(entry.root, ".design", ".cache", "server.json");
+  fs27.rmSync(entryFile(entry.pid), { force: true });
+  const stateAt = path25.join(entry.root, ".design", ".cache", "server.json");
   try {
-    if (JSON.parse(fs26.readFileSync(stateAt, "utf8")).pid === entry.pid)
-      fs26.rmSync(stateAt, { force: true });
+    if (JSON.parse(fs27.readFileSync(stateAt, "utf8")).pid === entry.pid)
+      fs27.rmSync(stateAt, { force: true });
   } catch {
   }
 }
@@ -4351,15 +4461,15 @@ function notFoundPage(res, title, text2) {
 }
 async function startDevServer(options) {
   const paths = designPaths(options.root);
-  if (!fs27.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
-  fs27.mkdirSync(paths.cache, { recursive: true });
+  if (!fs28.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
+  fs28.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);
   entries.sync();
   const links = linkShippedPackages(paths, project.appDir());
   const events = new EventHub();
-  const httpServer = http.createServer();
+  const httpServer = http2.createServer();
   dropStaleDepCache(paths, project.appDir());
   const base = baseConfig(project);
   const vite = await createServer({
@@ -4378,8 +4488,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(path25.relative(paths.cache, file));
-          const inCache = rel !== "" && !rel.startsWith("..") && !path25.isAbsolute(rel);
+          const rel = toPosix(path26.relative(paths.cache, file));
+          const inCache = rel !== "" && !rel.startsWith("..") && !path26.isAbsolute(rel);
           return inCache && rel !== "entries" && !rel.startsWith("entries/");
         }
       },
@@ -4388,11 +4498,11 @@ async function startDevServer(options) {
       forwardConsole: false
     },
     optimizeDeps: {
-      entries: entries.files().map((file) => toPosix(path25.relative(paths.design, file)))
+      entries: entries.files().map((file) => toPosix(path26.relative(paths.design, file)))
     }
   });
   const publicDir = project.publicDir();
-  const servePublic = publicDir ? sirv(publicDir, { dev: true }) : null;
+  const servePublic = publicDir ? sirv2(publicDir, { dev: true }) : null;
   const publicRel = (encoded) => {
     try {
       return decodeURIComponent(encoded);
@@ -4400,16 +4510,16 @@ async function startDevServer(options) {
       return null;
     }
   };
-  const viewer = fs27.existsSync(PKG.viewer) ? sirv(PKG.viewer, { dev: true, etag: true }) : null;
-  const viewerIndex = path25.join(PKG.viewer, "index.html");
+  const viewer = fs28.existsSync(PKG.viewer) ? sirv2(PKG.viewer, { dev: true, etag: true }) : null;
+  const viewerIndex = path26.join(PKG.viewer, "index.html");
   const serveViewerIndex = (res) => {
-    const html = fs27.readFileSync(viewerIndex, "utf8").replace(/<head>/i, '<head>\n<base href="/">');
+    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" });
     res.end(html);
   };
   const ctx = { project, events, snapshots };
   const systemCssUrl = `/${relToDesign(paths, entries.systemCssFile())}`;
-  const bootUrl = `/${relToDesign(paths, path25.join(entries.dir, HTML_BOOT))}`;
+  const bootUrl = `/${relToDesign(paths, path26.join(entries.dir, HTML_BOOT))}`;
   const frameHead = (source, extra = {}) => {
     const canvasTheme = source.canvas === SYSTEM_CANVAS ? void 0 : project.canvas(source.canvas)?.doc.theme;
     return {
@@ -4430,7 +4540,7 @@ async function startDevServer(options) {
       notFoundPage(res, "Screen not found", `No screen "${id2}" in "${canvas}". Check canvas.json.`);
       return;
     }
-    if (!fs27.existsSync(entries.entryFile(source))) entries.sync();
+    if (!fs28.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" });
@@ -4439,8 +4549,8 @@ async function startDevServer(options) {
   };
   const serveHtmlScreen = async (res, url2) => {
     const rel = decodeURIComponent(url2.pathname.slice("/_fs/".length));
-    const file = path25.resolve(paths.design, rel);
-    if (!isInside(paths.design, file) || !fs27.existsSync(file)) {
+    const file = path26.resolve(paths.design, rel);
+    if (!isInside(paths.design, file) || !fs28.existsSync(file)) {
       notFoundPage(res, "Screen not found", `No file .design/${rel}`);
       return;
     }
@@ -4450,13 +4560,13 @@ async function startDevServer(options) {
       key: `${canvas}/${id2}`,
       canvas,
       id: id2,
-      title: path25.basename(file),
+      title: path26.basename(file),
       file,
       format: "html",
       props: {},
       system: true
     };
-    const raw = fs27.readFileSync(file, "utf8");
+    const raw = fs28.readFileSync(file, "utf8");
     const withSystem = source.system && !optsOutOfSystem(raw);
     const html = injectIntoHtml(
       raw,
@@ -4489,7 +4599,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) && fs27.existsSync(path25.join(publicDir, rel))) {
+        if (publicDir && rel !== null && !project.isPublicFile(rel) && fs28.existsSync(path26.join(publicDir, rel))) {
           notFoundPage(res, "Not found", url2.pathname);
           return;
         }
@@ -4501,7 +4611,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 (path25.extname(url2.pathname)) notFoundPage(res, "Not found", url2.pathname);
+          else if (path26.extname(url2.pathname)) notFoundPage(res, "Not found", url2.pathname);
           else serveViewerIndex(res);
         };
         if (url2.pathname === "/" || url2.pathname === "/index.html") serveViewerIndex(res);
@@ -4529,7 +4639,7 @@ async function startDevServer(options) {
   };
   vite.watcher.on("all", (event, file) => {
     if (publicDir && isInside(publicDir, file)) project.invalidatePublic();
-    const rel = toPosix(path25.relative(paths.design, file));
+    const rel = toPosix(path26.relative(paths.design, file));
     if (rel.startsWith("..") || rel.startsWith(".cache/") || rel.startsWith("node_modules/")) return;
     if (rel === "design.json") {
       queue("config", () => {
@@ -4640,8 +4750,8 @@ async function ensureServer(paths, options) {
   const recorded = readState(paths);
   if (recorded && pidAlive(recorded.pid)) await stopPreview(recorded);
   for (const other of listPreviews()) if (other.root === paths.root) await stopPreview(other);
-  fs28.mkdirSync(paths.cache, { recursive: true });
-  const log = fs28.openSync(logFile(paths), "w");
+  fs29.mkdirSync(paths.cache, { recursive: true });
+  const log = fs29.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, {
@@ -4653,7 +4763,7 @@ async function ensureServer(paths, options) {
   child.unref();
   const state = await waitForServer(paths, 4e4);
   if (!state) {
-    const tail = fs28.existsSync(logFile(paths)) ? fs28.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
+    const tail = fs29.existsSync(logFile(paths)) ? fs29.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
     throw new CliError(`The preview server did not start.
 ${tail.join("\n")}`);
   }
@@ -5035,11 +5145,8 @@ async function runMe(paths, options) {
 }
 
 // src/cli/commands/check.ts
-import fs29 from "fs";
-import http2 from "http";
-import path26 from "path";
-import sirv2 from "sirv";
 var plural2 = (count, word, many = `${word}s`) => `${count} ${count === 1 ? word : many}`;
+var SLOW_MS = 3e3;
 function printIssues(issues) {
   const byFile = /* @__PURE__ */ new Map();
   for (const issue of issues) byFile.set(issue.file, [...byFile.get(issue.file) ?? [], issue]);
@@ -5072,7 +5179,15 @@ async function renderFrames(jobs) {
         await page.close().catch(() => {
         });
       }
-      return { key: job.key, url: job.url, ready: report.ready, held: report.held, errors: report.errors, links };
+      return {
+        key: job.key,
+        url: job.url,
+        ready: report.ready,
+        held: report.held,
+        readyMs: report.readyMs,
+        errors: report.errors,
+        links
+      };
     });
   } finally {
     await browser.close();
@@ -5117,42 +5232,15 @@ async function runCheck(paths, targets, options) {
     let close = async () => {
     };
     if (options.built) {
-      const out = path26.join(paths.cache, "check-build");
-      fs29.rmSync(out, { recursive: true, force: true });
       if (!options.json) print(dim("Building the screens as design push does\u2026"));
-      await buildSite(paths, out, {
+      const build2 = await serveBuild(paths, "check-build", {
         canvases: canvases.length ? canvases : void 0,
-        includeSystem: !canvases.length,
-        includeViewer: false
+        includeSystem: !canvases.length
       });
-      const read = (rel) => {
-        try {
-          return JSON.parse(fs29.readFileSync(path26.join(out, rel), "utf8"));
-        } catch {
-          return null;
-        }
-      };
-      docOf = (id2) => read(`api/canvas/${id2}.json`) ?? project.canvas(id2).doc;
-      systemDoc = canvases.length ? null : read("api/system.json");
-      const files = sirv2(out, { dev: true });
-      const server = http2.createServer((req, res) => {
-        const url = new URL(req.url ?? "/", "http://localhost");
-        const segments = url.pathname.split("/").map((segment) => {
-          try {
-            return decodeURIComponent(segment);
-          } catch {
-            return segment;
-          }
-        });
-        req.url = segments.join("/") + url.search;
-        files(req, res, () => {
-          res.statusCode = 404;
-          res.end("Not found");
-        });
-      });
-      await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve));
-      base = `http://127.0.0.1:${server.address().port}`;
-      close = () => new Promise((resolve) => server.close(() => resolve()));
+      docOf = (id2) => build2.read(`api/canvas/${id2}.json`) ?? project.canvas(id2).doc;
+      systemDoc = canvases.length ? null : build2.read("api/system.json");
+      base = build2.base;
+      close = build2.close;
       if (!options.json) print(dim(`Serving the build at ${base}`));
     } else {
       const wasRunning = await liveServer(paths);
@@ -5192,7 +5280,16 @@ async function runCheck(paths, targets, options) {
         if (frame.held) print(`    ${red(`holdReady() was not released within 20s (${frame.held} still held)`)}`);
         else if (!frame.ready) print(`    ${red("did not finish rendering (no ready signal within 20s)")}`);
         for (const error of frame.errors) print(`    ${red(error.split("\n")[0])}`);
+        if (frame.readyMs !== void 0 && frame.readyMs > SLOW_MS)
+          print(`    ${yellow(`slow: ${(frame.readyMs / 1e3).toFixed(1)}s to become ready`)}`);
       }
+      const slow = frames.filter((frame) => (frame.readyMs ?? 0) > SLOW_MS);
+      if (slow.length)
+        print(
+          dim(
+            `${plural2(slow.length, "screen")} took over ${SLOW_MS / 1e3}s to become ready; every frame of them costs that in the viewer, check and push snapshots. See what they wait for (retries, timers, polling, entrance gates).`
+          )
+        );
     }
     if (linkIssues.length) printLinkIssues(linkIssues, project);
     const screens = [...picked.values()].reduce((sum, set) => sum + (set?.size ?? 0), 0);
@@ -5266,13 +5363,13 @@ function printLinkIssues(issues, project) {
 
 // src/cli/commands/cloud.ts
 import fs30 from "fs";
-import os4 from "os";
+import os5 from "os";
 import path27 from "path";
 var sleep2 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 async function runLogin() {
   const host = cloudHost();
   const client = new CloudClient(host, null);
-  const code = await client.deviceCode(os4.hostname());
+  const code = await client.deviceCode(os5.hostname());
   const url = new URL(code.verification_uri_complete || code.verification_uri, host).toString();
   const expiresIn = code.expires_in ?? 600;
   print(`${bold("Sign in to foss-design Cloud")} ${dim(host)}`);