foss-design 0.9.5 → 0.9.7

package/dist/cli.js

@@ -1,7 +1,9 @@
 #!/usr/bin/env node
 
 // src/cli/index.ts
-import path34 from "path";
+import { spawnSync as spawnSync3 } from "child_process";
+import fs37 from "fs";
+import path35 from "path";
 import { parseArgs } from "util";
 
 // src/core/paths.ts
@@ -346,8 +348,8 @@ function routeError(pattern) {
   }
   return null;
 }
-function split(path35) {
-  return path35.split("/").filter(Boolean);
+function split(path36) {
+  return path36.split("/").filter(Boolean);
 }
 function compileRoute(pattern) {
   return {
@@ -366,8 +368,8 @@ function decode2(part) {
     return part;
   }
 }
-function scoreRoute(route2, path35) {
-  const parts = split(path35.split(/[?#]/)[0] ?? "").map(decode2);
+function scoreRoute(route2, path36) {
+  const parts = split(path36.split(/[?#]/)[0] ?? "").map(decode2);
   const walk2 = (s, p) => {
     if (s === route2.segments.length) return p === parts.length ? 0 : null;
     const segment = route2.segments[s];
@@ -385,11 +387,11 @@ function scoreRoute(route2, path35) {
   };
   return walk2(0, 0);
 }
-function matchRoute(entries, path35) {
+function matchRoute(entries, path36) {
   let best = null;
   for (const entry of entries) {
     for (const route2 of entry.routes) {
-      const score = scoreRoute(route2, path35);
+      const score = scoreRoute(route2, path36);
       if (score !== null && (!best || score > best.score)) best = { score, value: entry.value };
     }
   }
@@ -516,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, path35) {
+function formatPath(base, path36) {
   let out = base;
-  for (const part of path35) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
+  for (const part of path36) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
   return out;
 }
 function describeZodError(error, base = "") {
@@ -2632,7 +2634,7 @@ var CloudClient = class {
   }
   host;
   token;
-  async send(method, path35, init) {
+  async send(method, path36, init) {
     const headers = {
       "User-Agent": `foss-design/${packageVersion()} (${os.platform()})`,
       Accept: "application/json"
@@ -2640,7 +2642,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${path35}`, {
+      return await fetch(`${this.host}/api${path36}`, {
         method,
         headers,
         body: init.body,
@@ -2661,8 +2663,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, path35, body) {
-    const response = await this.send(method, path35, {
+  async request(method, path36, body) {
+    const response = await this.send(method, path36, {
       body: body === void 0 ? void 0 : JSON.stringify(body),
       type: body === void 0 ? void 0 : "application/json",
       timeout: JSON_TIMEOUT
@@ -2674,7 +2676,7 @@ var CloudClient = class {
     try {
       return JSON.parse(text2);
     } catch {
-      throw new CloudError(`${this.host} answered ${method} ${path35} with something other than JSON`, 0, "bad_response");
+      throw new CloudError(`${this.host} answered ${method} ${path36} with something other than JSON`, 0, "bad_response");
     }
   }
   /** POST /device/code. */
@@ -3027,7 +3029,8 @@ var byUnit = (a, b) => a === SYSTEM_UNIT ? -1 : b === SYSTEM_UNIT ? 1 : a < b ?
 var plural = (count, word, many = `${word}s`) => `${count} ${count === 1 ? word : many}`;
 
 // src/capture/cover.ts
-import fs19 from "fs";
+import fs20 from "fs";
+import os3 from "os";
 
 // src/server/snapshots.ts
 import fs17 from "fs";
@@ -3085,11 +3088,15 @@ var SnapshotStore = class {
     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 temp = `${this.metaFile(canvas)}.${process.pid}.tmp`;
+    fs17.writeFileSync(temp, JSON.stringify(data));
+    fs17.renameSync(temp, this.metaFile(canvas));
     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. */
@@ -3102,8 +3109,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",
@@ -3127,8 +3180,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() {
@@ -3159,6 +3212,8 @@ async function openFrame(page, url, options = {}) {
     record2(text2);
   });
   let ready = false;
+  let loadedAt = 0;
+  let readyMs;
   let reloads = 0;
   const onNavigate = () => {
     reloads++;
@@ -3171,6 +3226,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, {
@@ -3179,6 +3235,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);
@@ -3196,7 +3253,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
@@ -3273,121 +3335,168 @@ async function mapLimit(items, limit, fn) {
 
 // src/capture/cover.ts
 var SNAPSHOT_WIDTH = 900;
-async function refreshCovers(paths, canvasIds, base) {
+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);
   const project = new DesignProject(paths, DEV_URLS, store.lookup);
   const stale = [];
   for (const id2 of canvasIds) {
     const canvas = project.canvas(id2);
-    if (!canvas || canvas.doc.cover && "url" in canvas.doc.cover) continue;
-    const screen = canvas.doc.cover?.screen ?? canvas.screens[0]?.id;
-    const source = canvas.screens.find((item) => item.id === screen);
-    if (!screen || !source || !fs19.existsSync(source.file)) continue;
-    const taken = store.version(id2, screen, "light");
-    if (!taken || taken < fs19.statSync(source.file).mtimeMs) stale.push({ canvas: id2, screen });
-  }
-  if (!stale.length) return [];
-  if (!findChrome()) return ["No Chrome here, so canvas covers keep their last snapshot."];
-  const url = await base();
+    if (!canvas) continue;
+    const inLight = canvasFrames(canvas.doc, "", "light", { page: filter.page, includeUrls: false });
+    const inDark = new Map(
+      canvasFrames(canvas.doc, "", "dark", { page: filter.page, includeUrls: false }).map((job) => [job.id, job.theme])
+    );
+    const files = new Map(canvas.screens.map((screen) => [screen.id, screen.file]));
+    for (const job of inLight) {
+      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 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 });
+      }
+    }
+  }
+  return stale;
+}
+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 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 lines = [];
+  const failed = [];
+  const started = Date.now();
+  let done = 0;
+  const line = () => `Snapshots ${done}/${targets.length} (both themes, as the viewer and the cloud show them)`;
+  progress2.update(line());
   try {
-    for (const { canvas, screen } of stale) {
-      const doc = project.canvas(canvas).doc;
-      const job = canvasFrames(doc, url, "light", { id: screen })[0];
-      if (!job) continue;
-      const page = await browser.newPage({
-        viewport: { width: job.width, height: job.height },
-        deviceScaleFactor: Math.min(1, SNAPSHOT_WIDTH / job.width)
-      });
-      try {
-        const report = await openFrame(page, job.url, { waitForReady: job.waitForReady });
-        if (!report.ready) {
-          lines.push(`${canvas}: ${screen} did not finish rendering, so its cover keeps the last snapshot`);
-          continue;
-        }
-        const png = await page.screenshot({ fullPage: job.fullPage });
-        const height = job.fullPage ? await page.evaluate(() => document.documentElement.scrollHeight) : void 0;
-        store.save(canvas, screen, "light", png, height);
-      } finally {
-        await page.close().catch(() => {
+    await mapLimit([...targets], TABS, async ({ canvas, screen, theme: theme2 }) => {
+      const job = canvasFrames(docOf(canvas), url, theme2, { id: screen })[0];
+      if (job) {
+        const page = await browser.newPage({
+          viewport: { width: job.width, height: job.height },
+          deviceScaleFactor: Math.min(1, SNAPSHOT_WIDTH / job.width),
+          colorScheme: theme2
         });
+        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);
+          } else failed.push(`${canvas}/${screen} (${theme2})`);
+        } catch {
+          failed.push(`${canvas}/${screen} (${theme2})`);
+        } finally {
+          await page.close().catch(() => {
+          });
+        }
       }
-    }
+      done++;
+      progress2.update(line());
+    });
   } finally {
     await browser.close();
-  }
-  return lines;
+    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`);
+  if (!failed.length) return [];
+  const shown = failed.slice(0, 5).join(", ");
+  return [
+    `${failed.length} screen${failed.length === 1 ? "" : "s"} did not finish rendering, so they keep their last snapshot: ${shown}${failed.length > 5 ? ", \u2026" : ""}. \`design check --render\` says why.`
+  ];
 }
 
 // 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;
@@ -3397,7 +3506,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;
     }
@@ -3406,19 +3515,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];
@@ -3474,11 +3583,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);
@@ -3488,15 +3597,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 [];
@@ -3515,8 +3624,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);
@@ -3551,12 +3660,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)) {
@@ -3626,7 +3735,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) {
@@ -3655,7 +3764,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) {
@@ -3676,7 +3785,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) {
@@ -3712,7 +3821,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,
@@ -3723,7 +3832,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;
@@ -3753,8 +3862,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,
@@ -3870,7 +3979,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,
@@ -3919,7 +4028,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);
@@ -3951,7 +4060,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;
@@ -3960,12 +4069,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++;
@@ -3975,7 +4084,18 @@ async function push(ctx, options) {
     bar.done(`Uploaded ${plural(missing.length, "file")} (${megabytes(bytes)}) in ${seconds(started)}`);
   }
   log(`Pushing ${plural(units.length, "unit")}\u2026`);
-  const revs2 = await client.push(link.project, units);
+  let revs2;
+  try {
+    revs2 = await client.push(link.project, units);
+  } catch (error) {
+    if (!(error instanceof CloudError) || error.status !== 409 || error.error !== "conflict") throw error;
+    report.ok = false;
+    report.error = {
+      code: "pull_first",
+      message: "Nothing was pushed: someone pushed first. Run `design pull`, then push again."
+    };
+    return report;
+  }
   for (const unit of units) {
     const rev = revs2.get(unit.key) ?? unit.baseRev + 1;
     link.units[unit.key] = { rev, files: hashes(unit.source) };
@@ -3987,7 +4107,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;
@@ -3998,7 +4118,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}`);
     }
   }
@@ -4014,18 +4134,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));
@@ -4076,17 +4196,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")) {
@@ -4133,7 +4253,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;
@@ -4173,26 +4293,82 @@ var EventHub = class {
 };
 
 // src/server/state.ts
-import fs26 from "fs";
-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 || 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) => 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 {
+    fs27.mkdirSync(registryDir(), { recursive: true });
+    fs27.writeFileSync(entryFile(state.pid), `${JSON.stringify(state, null, 2)}
 `);
+  } catch {
+  }
 }
 function clearState(paths, pid) {
   const state = readState(paths);
+  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 = fs27.readdirSync(registryDir()).filter((name) => name.endsWith(".json"));
+  } catch {
+    return [];
+  }
+  const found = [];
+  for (const name of files) {
+    const file = path25.join(registryDir(), name);
+    let state = null;
+    try {
+      state = JSON.parse(fs27.readFileSync(file, "utf8"));
+    } catch {
+    }
+    if (!state?.pid || !pidAlive(state.pid)) {
+      fs27.rmSync(file, { force: true });
+      continue;
+    }
+    let recorded = null;
+    try {
+      recorded = JSON.parse(fs27.readFileSync(path25.join(state.root, ".design", ".cache", "server.json"), "utf8"));
+    } catch {
+    }
+    found.push({ ...state, tracked: recorded?.pid === state.pid });
+  }
+  return found.sort((a, b) => a.startedAt.localeCompare(b.startedAt));
+}
+async function stopPreview(entry) {
+  try {
+    process.kill(entry.pid, "SIGTERM");
+  } catch {
+  }
+  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");
+  try {
+    if (JSON.parse(fs27.readFileSync(stateAt, "utf8")).pid === entry.pid)
+      fs27.rmSync(stateAt, { force: true });
+  } catch {
+  }
 }
 function pidAlive(pid) {
   try {
@@ -4249,15 +4425,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({
@@ -4276,8 +4452,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/");
         }
       },
@@ -4286,11 +4462,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);
@@ -4298,16 +4474,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 {
@@ -4328,7 +4504,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" });
@@ -4337,8 +4513,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;
     }
@@ -4348,13 +4524,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,
@@ -4387,7 +4563,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;
         }
@@ -4399,7 +4575,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);
@@ -4427,7 +4603,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", () => {
@@ -4487,7 +4663,7 @@ async function startDevServer(options) {
 // src/cli/commands/preview.ts
 function openBrowser(url) {
   const [command, args] = process.platform === "darwin" ? ["open", [url]] : process.platform === "win32" ? ["cmd", ["/c", "start", '""', url]] : ["xdg-open", [url]];
-  const child = spawn(command, args, { stdio: "ignore", detached: true });
+  const child = spawn(command, args, { stdio: "ignore", detached: true, windowsHide: true });
   child.on("error", () => {
   });
   child.unref();
@@ -4535,15 +4711,23 @@ async function ensureServer(paths, options) {
   if (stale)
     print(dim(`Restarting the preview server: it runs foss-design ${live2.version}, this is ${packageVersion()}.`));
   if (live2) await stopServer(paths);
-  fs28.mkdirSync(paths.cache, { recursive: true });
-  const log = fs28.openSync(logFile(paths), "w");
+  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);
+  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, { detached: true, stdio: ["ignore", log, log], cwd: paths.root });
+  const child = spawn(process.execPath, args, {
+    detached: true,
+    windowsHide: true,
+    stdio: ["ignore", log, log],
+    cwd: paths.root
+  });
   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")}`);
   }
@@ -4569,6 +4753,27 @@ async function runPreview(paths, options) {
 async function runStop(paths) {
   print(await stopServer(paths) ? "Stopped the preview server." : "No preview server is running for this project.");
 }
+var since = (iso) => {
+  const minutes = Math.max(0, Math.round((Date.now() - new Date(iso).getTime()) / 6e4));
+  return minutes < 60 ? `${minutes}m` : `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+};
+function runPreviews(options) {
+  const previews = listPreviews();
+  if (options.json) return print(JSON.stringify({ previews }, null, 2));
+  if (!previews.length) return print("No preview servers are running.");
+  for (const preview of previews) {
+    const orphan = preview.tracked ? "" : ` ${bold("orphan")} ${dim("(its project names another server)")}`;
+    print(`${preview.url}  ${preview.root}${orphan}`);
+    print(dim(`  foss-design ${preview.version} \xB7 pid ${preview.pid} \xB7 up ${since(preview.startedAt)}`));
+  }
+}
+async function runStopAll() {
+  const previews = listPreviews();
+  for (const preview of previews) await stopPreview(preview);
+  print(
+    previews.length ? `Stopped ${previews.length} preview server${previews.length === 1 ? "" : "s"}.` : "No preview servers are running."
+  );
+}
 
 // src/cli/commands/sync.ts
 var GOOD = /* @__PURE__ */ new Set(["pushed", "created", "updated", "deleted"]);
@@ -4649,11 +4854,19 @@ async function runSync(paths, command, json, run) {
   if (!report.ok && report.error) throw new CliError(report.error.message, 2);
 }
 function runPush(paths, units, options) {
-  const beforeBuild = (canvasIds) => refreshCovers(paths, canvasIds, async () => `http://127.0.0.1:${(await ensureServer(paths, {})).port}`);
   return runSync(paths, "push", options.json, async (ctx) => {
+    const beforeBuild = (canvasIds) => takeSnapshots(
+      paths,
+      staleSnapshots(paths, canvasIds),
+      async () => `http://127.0.0.1:${(await ensureServer(paths, {})).port}`,
+      ctx.progress()
+    );
     const first = await push(ctx, { units, resolved: options.resolved, beforeBuild });
     if (first.ok || first.error?.code !== "pull_first") return first;
-    ctx.log("The cloud is ahead: merging its changes first\u2026");
+    const raced = first.error.message.includes("someone pushed first");
+    ctx.log(
+      raced ? "Someone pushed while this push was uploading: merging their changes first\u2026" : "The cloud is ahead: merging its changes first\u2026"
+    );
     const pulled = await pull(ctx, { units: [], theirs: [] });
     if (!pulled.ok) {
       pulled.error = {
@@ -4665,7 +4878,7 @@ function runPush(paths, units, options) {
     ctx.link = readLink(paths);
     const second = await push(ctx, { units, resolved: [], beforeBuild });
     second.hints.unshift(
-      `Merged the cloud's changes first: ${pulled.units.filter((entry) => entry.action !== "up_to_date").map((entry) => `${entry.unit} (${entry.action.replaceAll("_", " ")})`).join(", ")}`
+      `${raced ? "Someone pushed while this push was uploading; merged" : "Merged"} the cloud's changes first: ${pulled.units.filter((entry) => entry.action !== "up_to_date").map((entry) => `${entry.unit} (${entry.action.replaceAll("_", " ")})`).join(", ")}`
     );
     return second;
   });
@@ -4897,6 +5110,7 @@ async function runMe(paths, options) {
 
 // src/cli/commands/check.ts
 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]);
@@ -4929,35 +5143,90 @@ 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();
   }
 }
-async function runCheck(paths, canvases, options) {
+async function runCheck(paths, targets, options) {
   const project = new DesignProject(paths, DEV_URLS);
   const known = project.canvasIds();
-  const unknown = canvases.filter((id2) => !known.includes(id2));
-  if (unknown.length) {
-    throw new CliError(
-      `No canvas ${unknown.map((id2) => `"${id2}"`).join(", ")}. Canvases: ${known.join(", ") || "none yet"}`
-    );
+  const picked = /* @__PURE__ */ new Map();
+  for (const target of targets) {
+    const [canvasId = "", screenId] = target.split("/");
+    if (!known.includes(canvasId))
+      throw new CliError(`No canvas "${canvasId}". Canvases: ${known.join(", ") || "none yet"}`);
+    const screens = picked.has(canvasId) ? picked.get(canvasId) : /* @__PURE__ */ new Set();
+    if (!screenId || screens === null) picked.set(canvasId, null);
+    else picked.set(canvasId, screens.add(screenId));
+  }
+  const canvases = [...picked.keys()];
+  if (options.page) {
+    if (canvases.length !== 1)
+      throw new CliError("--page needs exactly one canvas: `design check <canvas> --page <id>`");
+    const doc = project.canvas(canvases[0]).doc;
+    if (!doc.pages.some((page) => page.id === options.page))
+      throw new CliError(`No page "${options.page}" in "${doc.id}". Pages: ${doc.pages.map((p) => p.id).join(", ")}`);
+  }
+  for (const [canvasId, screens] of picked) {
+    if (!screens) continue;
+    const doc = project.canvas(canvasId).doc;
+    const ids = new Set(canvasFrames(doc, "", "light", { page: options.page, skipMissing: false }).map((job) => job.id));
+    const missing = [...screens].filter((id2) => !ids.has(id2));
+    if (missing.length)
+      throw new CliError(
+        `No screen ${missing.map((id2) => `"${id2}"`).join(", ")} in "${canvasId}"${options.page ? ` on page "${options.page}"` : ""}. Screens: ${[...ids].slice(0, 30).join(", ")}${ids.size > 30 ? ", \u2026" : ""}`
+      );
   }
   const issues = canvases.length ? canvases.flatMap((id2) => project.canvas(id2)?.doc.issues ?? []) : project.issues();
   let frames = [];
   if (options.render) {
-    const wasRunning = await liveServer(paths);
-    const server = await ensureServer(paths, {});
-    if (!wasRunning && !options.json)
-      print(dim(`Started the preview server at ${server.url} (\`design stop\` stops it).`));
-    const base = `http://127.0.0.1:${server.port}`;
-    const docs = (canvases.length ? canvases : known).map((id2) => project.canvas(id2).doc);
-    const jobs = docs.flatMap((doc) => canvasFrames(doc, base, doc.theme ?? "light", { includeUrls: false }));
-    const system = project.system();
-    if (!canvases.length && system) jobs.unshift(...systemFrames(system.doc, base, "light"));
-    if (!options.json) print(dim(`Loading ${plural2(jobs.length, "frame")} in Chrome via ${server.url}\u2026`));
-    frames = await renderFrames(jobs);
+    let base;
+    let docOf = (id2) => project.canvas(id2).doc;
+    let systemDoc = project.system()?.doc ?? null;
+    let close = async () => {
+    };
+    if (options.built) {
+      if (!options.json) print(dim("Building the screens as design push does\u2026"));
+      const build2 = await serveBuild(paths, "check-build", {
+        canvases: canvases.length ? canvases : void 0,
+        includeSystem: !canvases.length
+      });
+      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);
+      const server = await ensureServer(paths, {});
+      if (!wasRunning && !options.json)
+        print(dim(`Started the preview server at ${server.url} (\`design stop\` stops it).`));
+      base = `http://127.0.0.1:${server.port}`;
+    }
+    const jobs = (canvases.length ? canvases : known).flatMap((id2) => {
+      const doc = docOf(id2);
+      const theme2 = doc.theme ?? "light";
+      const screens = picked.get(id2);
+      const filter = { includeUrls: false, page: options.page };
+      return screens ? [...screens].flatMap((screen) => canvasFrames(doc, base, theme2, { ...filter, id: screen })) : canvasFrames(doc, base, theme2, filter);
+    });
+    if (!canvases.length && systemDoc) jobs.unshift(...systemFrames(systemDoc, base, "light"));
+    if (!options.json) print(dim(`Loading ${plural2(jobs.length, "frame")} in Chrome\u2026`));
+    try {
+      frames = await renderFrames(jobs);
+    } finally {
+      await close();
+    }
   }
   const linkIssues = options.render ? unroutedLinks(frames, project, canvases.length ? canvases : known) : [];
   const errors = issues.filter((issue) => issue.severity === "error").length;
@@ -4975,10 +5244,20 @@ async function runCheck(paths, canvases, 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 scope = canvases.length ? plural2(canvases.length, "canvas", "canvases") : "the project";
+    const screens = [...picked.values()].reduce((sum, set) => sum + (set?.size ?? 0), 0);
+    const scope = !canvases.length ? "the project" : screens && [...picked.values()].every(Boolean) ? plural2(screens, "screen") : options.page ? `page "${options.page}" of ${canvases[0]}` : plural2(canvases.length, "canvas", "canvases");
     if (!errors && !warnings && !broken.length) {
       print(
         green(
@@ -5047,14 +5326,14 @@ function printLinkIssues(issues, project) {
 }
 
 // src/cli/commands/cloud.ts
-import fs29 from "fs";
-import os3 from "os";
-import path26 from "path";
+import fs30 from "fs";
+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(os3.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)}`);
@@ -5150,7 +5429,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: {} });
-    fs29.rmSync(path26.join(cloudCache(paths), "incoming"), { recursive: true, force: true });
+    fs30.rmSync(path27.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}`);
   }
@@ -5177,8 +5456,8 @@ async function runLink(paths, wanted, options) {
 }
 
 // src/cli/commands/icon.ts
-import fs30 from "fs";
-import path27 from "path";
+import fs31 from "fs";
+import path28 from "path";
 async function toCloud(paths, file) {
   const link = readLink(paths);
   if (!link) return;
@@ -5189,10 +5468,10 @@ async function toCloud(paths, file) {
   }
   const client = new CloudClient(link.host, credential.token);
   try {
-    const ext = file ? path27.extname(file).slice(1) : null;
+    const ext = file ? path28.extname(file).slice(1) : null;
     await client.setProjectIcon(
       link.project,
-      file && ext ? { data: fs30.readFileSync(file), type: ICON_TYPES[ext] } : null
+      file && ext ? { data: fs31.readFileSync(file), type: ICON_TYPES[ext] } : null
     );
     link.icon = file ? iconHash(file) : null;
     writeLink(paths, link);
@@ -5205,35 +5484,35 @@ async function runIcon(paths, file, options) {
   if (options.remove) {
     const had = iconFile(paths);
     writeIcon(paths, null);
-    print(had ? `${green("Removed")} ${path27.relative(process.cwd(), had)}` : "The project has no icon.");
+    print(had ? `${green("Removed")} ${path28.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(`${path27.relative(process.cwd(), current)} ${dim(`${Math.ceil(fs30.statSync(current).size / 1024)} KB`)}`);
+    return print(`${path28.relative(process.cwd(), current)} ${dim(`${Math.ceil(fs31.statSync(current).size / 1024)} KB`)}`);
   }
   let data;
   try {
-    data = fs30.readFileSync(file);
+    data = fs31.readFileSync(file);
   } catch {
     throw new CliError(`No file ${file}`);
   }
-  const problem = iconProblem(data, path27.extname(file).slice(1).toLowerCase() || void 0);
+  const problem = iconProblem(data, path28.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: ${path27.relative(process.cwd(), written)}`);
+  print(`${green("Set")} the project icon: ${path28.relative(process.cwd(), written)}`);
   await toCloud(paths, written);
 }
 
 // src/cli/commands/import.ts
-import fs32 from "fs";
-import path29 from "path";
+import fs33 from "fs";
+import path30 from "path";
 
 // src/import/claude-design.ts
-import fs31 from "fs";
-import path28 from "path";
+import fs32 from "fs";
+import path29 from "path";
 
 // src/import/markup.ts
 var VOID = /* @__PURE__ */ new Set([
@@ -5841,11 +6120,11 @@ function boardId(file, used) {
   return id2;
 }
 function importClaudeDesign(dir, options = {}) {
-  const canvasFile = path28.join(dir, "canvas.json");
-  if (!fs31.existsSync(canvasFile))
+  const canvasFile = path29.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(fs31.readFileSync(canvasFile, "utf8"));
-  const templates = fs31.readdirSync(dir).filter((file) => file.endsWith(EXT));
+  const source = JSON.parse(fs32.readFileSync(canvasFile, "utf8"));
+  const templates = fs32.readdirSync(dir).filter((file) => file.endsWith(EXT));
   if (!templates.length) throw new Error(`No ${EXT} files in ${dir}`);
   const known = new Set(templates.map((file) => file.slice(0, -EXT.length)));
   const warnings = /* @__PURE__ */ new Map();
@@ -5872,7 +6151,7 @@ function importClaudeDesign(dir, options = {}) {
     try {
       files.set(
         `${name}.jsx`,
-        convertFile(name, fs31.readFileSync(path28.join(dir, file), "utf8"), { known, routes, warn: warn2 })
+        convertFile(name, fs32.readFileSync(path29.join(dir, file), "utf8"), { known, routes, warn: warn2 })
       );
     } catch (error) {
       warn2(`could not be converted: ${error.message}`);
@@ -5920,7 +6199,7 @@ function importClaudeDesign(dir, options = {}) {
     screens++;
   }
   const canvas = {
-    title: options.title ?? source.title ?? path28.basename(path28.resolve(dir)),
+    title: options.title ?? source.title ?? path29.basename(path29.resolve(dir)),
     description: "Imported from Claude Design.",
     // The templates bring their own styles; the design system's reset would restyle them.
     system: false,
@@ -5932,21 +6211,21 @@ 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 = path29.resolve(from);
-  if (!fs32.existsSync(dir) || !fs32.statSync(dir).isDirectory()) throw new CliError(`No folder ${from}`);
+  const dir = path30.resolve(from);
+  if (!fs33.existsSync(dir) || !fs33.statSync(dir).isDirectory()) throw new CliError(`No folder ${from}`);
   let result;
   try {
     result = importClaudeDesign(dir, { title: options.title });
   } catch (error) {
     throw new CliError(error.message);
   }
-  const id2 = options.canvas ?? (slug(String(result.canvas.title)) || slug(path29.basename(dir)) || "imported");
+  const id2 = options.canvas ?? (slug(String(result.canvas.title)) || slug(path30.basename(dir)) || "imported");
   if (!ID_PATTERN.test(id2)) throw new CliError(`"${id2}" is no canvas id; pass one with --canvas <id>`);
-  const out = path29.join(paths.canvases, id2);
-  if (fs32.existsSync(out)) throw new CliError(`.design/canvas/${id2} exists; pick another id with --canvas <id>`);
-  fs32.mkdirSync(path29.join(out, "screens"), { recursive: true });
-  for (const [name, content] of result.files) fs32.writeFileSync(path29.join(out, "screens", name), content);
-  fs32.writeFileSync(path29.join(out, "canvas.json"), `${JSON.stringify(result.canvas, null, 2)}
+  const out = path30.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)}
 `);
   print(`${green("Imported")} ${bold(String(result.canvas.title))} \u2192 .design/canvas/${id2}`);
   print(
@@ -5966,7 +6245,7 @@ function runImport(paths, from, options) {
 
 // src/cli/commands/merge.ts
 import { spawnSync as spawnSync2 } from "child_process";
-import path30 from "path";
+import path31 from "path";
 import { createInterface } from "readline/promises";
 var KIND = {
   text: "both sides changed lines, the markers show them",
@@ -5982,7 +6261,7 @@ function matchTargets(paths, states, targets) {
       for (const conflict of openConflicts(paths, unit)) picked.push({ state: unit, conflict });
       continue;
     }
-    const rel = [path30.relative(paths.design, path30.resolve(target)), target.replace(/^\.design\//, "")];
+    const rel = [path31.relative(paths.design, path31.resolve(target)), target.replace(/^\.design\//, "")];
     const found = states.flatMap(
       (state) => state.conflicts.filter((item) => rel.includes(item.path)).map((conflict) => ({ state, conflict }))
     );
@@ -5998,7 +6277,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}: ${path30.relative(process.cwd(), sideFile(paths, state.unit, conflict.path, side))}`).join(" \xB7 ");
+      const sides = ["here", "cloud", "base"].map((side) => `${side}: ${path31.relative(process.cwd(), sideFile(paths, state.unit, conflict.path, side))}`).join(" \xB7 ");
       print(`      ${dim(sides)}`);
     }
   }
@@ -6079,7 +6358,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, [path30.join(paths.design, conflict.path)], { stdio: "inherit", shell: true });
+            spawnSync2(editor, [path31.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."));
           }
@@ -6098,7 +6377,7 @@ async function runMerge(paths, targets, options) {
 }
 
 // src/cli/commands/rename.ts
-import fs33 from "fs";
+import fs34 from "fs";
 async function runRename(paths, name) {
   const trimmed = name.trim();
   if (!trimmed) throw new CliError("Usage: design rename <name>");
@@ -6113,17 +6392,17 @@ async function runRename(paths, name) {
   }
   let config = {};
   try {
-    config = JSON.parse(fs33.readFileSync(paths.config, "utf8"));
+    config = JSON.parse(fs34.readFileSync(paths.config, "utf8"));
   } catch {
   }
-  fs33.writeFileSync(paths.config, `${JSON.stringify({ ...config, name: trimmed }, null, 2)}
+  fs34.writeFileSync(paths.config, `${JSON.stringify({ ...config, name: trimmed }, null, 2)}
 `);
   print(`${green("Renamed")} the project to ${trimmed} (.design/design.json)`);
 }
 
 // src/cli/commands/scaffold.ts
-import fs34 from "fs";
-import path31 from "path";
+import fs35 from "fs";
+import path32 from "path";
 
 // src/cli/templates.ts
 var TOKENS_CSS = `/*
@@ -6334,40 +6613,40 @@ function mainScreen(canvasId) {
 
 // src/cli/commands/scaffold.ts
 function write(file, content, root) {
-  if (fs34.existsSync(file)) {
-    print(`  ${dim("exists ")} ${path31.relative(root, file)}`);
+  if (fs35.existsSync(file)) {
+    print(`  ${dim("exists ")} ${path32.relative(root, file)}`);
     return false;
   }
-  fs34.mkdirSync(path31.dirname(file), { recursive: true });
-  fs34.writeFileSync(file, content);
-  print(`  ${green("created")} ${path31.relative(root, file)}`);
+  fs35.mkdirSync(path32.dirname(file), { recursive: true });
+  fs35.writeFileSync(file, content);
+  print(`  ${green("created")} ${path32.relative(root, file)}`);
   return true;
 }
 function ensureGitignored(root) {
-  const file = path31.join(root, ".gitignore");
-  const current = fs34.existsSync(file) ? fs34.readFileSync(file, "utf8") : "";
+  const file = path32.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";
   const prefix = current && !current.endsWith("\n") ? "\n" : "";
-  fs34.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
+  fs35.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
 .design/
 `);
   return "added";
 }
 function projectName(root) {
   try {
-    const manifest = JSON.parse(fs34.readFileSync(path31.join(root, "package.json"), "utf8"));
+    const manifest = JSON.parse(fs35.readFileSync(path32.join(root, "package.json"), "utf8"));
     if (typeof manifest.name === "string" && manifest.name) return manifest.name;
   } catch {
   }
-  return path31.basename(root);
+  return path32.basename(root);
 }
 function runInit(root, options) {
   const paths = designPaths(root);
   print(`Setting up ${DESIGN_DIR} in ${root}`);
   write(paths.config, `${JSON.stringify({ name: options.name ?? projectName(root) }, null, 2)}
 `, root);
-  fs34.mkdirSync(paths.canvases, { recursive: true });
+  fs35.mkdirSync(paths.canvases, { recursive: true });
   if (options.gitignore) {
     const result = ensureGitignored(root);
     print(`  ${result === "added" ? green("ignored") : dim("ignored")} .design/ in .gitignore`);
@@ -6381,44 +6660,44 @@ function runSystemInit(root, options) {
   const paths = designPaths(root);
   let base = projectName(root);
   try {
-    base = JSON.parse(fs34.readFileSync(paths.config, "utf8")).name || base;
+    base = JSON.parse(fs35.readFileSync(paths.config, "utf8")).name || base;
   } catch {
   }
   const name = options.name ?? `${base} design system`;
-  print(`Scaffolding the design system in ${path31.relative(root, paths.system)}`);
-  write(path31.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
+  print(`Scaffolding the design system in ${path32.relative(root, paths.system)}`);
+  write(path32.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
 `, root);
-  write(path31.join(paths.system, "tokens.css"), TOKENS_CSS, root);
+  write(path32.join(paths.system, "tokens.css"), TOKENS_CSS, root);
   if (!options.empty) {
-    write(path31.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
-    write(path31.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
-    write(path31.join(paths.system, "specimens", "button.tsx"), BUTTON_SPECIMEN_TSX, root);
+    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);
   }
 }
 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 = path31.join(paths.canvases, id2);
-  if (fs34.existsSync(path31.join(dir, "canvas.json"))) throw new CliError(`Canvas "${id2}" already exists in ${dir}`);
+  const dir = path32.join(paths.canvases, id2);
+  if (fs35.existsSync(path32.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(
-      path31.join(dir, "canvas.json"),
+      path32.join(dir, "canvas.json"),
       `${JSON.stringify({ title, pages: [{ id: "main", title: "Main", sections: [] }] }, null, 2)}
 `,
       root
     );
-    fs34.mkdirSync(path31.join(dir, "screens"), { recursive: true });
+    fs35.mkdirSync(path32.join(dir, "screens"), { recursive: true });
   } else {
-    write(path31.join(dir, "canvas.json"), canvasJson(title), root);
-    write(path31.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
+    write(path32.join(dir, "canvas.json"), canvasJson(title), root);
+    write(path32.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
   }
 }
 
 // src/cli/commands/shot.ts
-import fs35 from "fs";
-import path32 from "path";
+import fs36 from "fs";
+import path33 from "path";
 var OVERVIEW_TIMEOUT = 9e4;
 async function runShot(paths, target, options) {
   const [canvasId = "", screenId] = target.split("/");
@@ -6434,15 +6713,15 @@ async function runShot(paths, target, options) {
     throw new CliError(`No page "${options.page}" in "${canvasId}". Pages: ${doc.pages.map((p) => p.id).join(", ")}`);
   }
   const theme2 = options.theme ?? doc.theme ?? "light";
-  const outBase = path32.resolve(options.out ?? paths.shots);
-  const outDir = path32.join(outBase, canvasId);
-  fs35.mkdirSync(outDir, { recursive: true });
+  const outBase = path33.resolve(options.out ?? paths.shots);
+  const outDir = path33.join(outBase, canvasId);
+  fs36.mkdirSync(outDir, { recursive: true });
   const base = await serverBase(paths);
   const browser = await launchChrome();
   let failed = false;
   try {
     if (options.overview) {
-      if (!fs35.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there is no canvas to shoot.");
+      if (!fs36.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there is no canvas to shoot.");
       const pages = options.page ? [options.page] : screenId ? doc.pages.filter((page) => page.sections.some((section) => section.items.some((item) => item.id === screenId))).map((page) => page.id) : doc.pages.map((page) => page.id);
       for (const pageId of pages) {
         const page = await browser.newPage({ viewport: { width: 1920, height: 1200 } });
@@ -6458,7 +6737,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 = path32.join(outDir, `${pageId}.overview.png`);
+        const file = path33.join(outDir, `${pageId}.overview.png`);
         await page.screenshot({ path: file });
         await page.close();
         print(file);
@@ -6487,7 +6766,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 = path32.join(outDir, `${job.id}.${job.theme}.png`);
+    const file = path33.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 });
@@ -6519,8 +6798,8 @@ async function shootSystem(paths, project, id2, options) {
   if (id2 && !all.some((job) => job.id === id2)) {
     throw new CliError(`No specimen "${id2}" in the design system. Specimens: ${all.map((job) => job.id).join(", ")}`);
   }
-  const outDir = path32.join(path32.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
-  fs35.mkdirSync(outDir, { recursive: true });
+  const outDir = path33.join(path33.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);
   const browser = await launchChrome();
@@ -6531,8 +6810,36 @@ async function shootSystem(paths, project, id2, options) {
   }
 }
 
+// src/cli/commands/snapshots.ts
+async function runSnapshots(paths, targets, options) {
+  const known = new DesignProject(paths, DEV_URLS).canvasIds();
+  const picked = /* @__PURE__ */ new Map();
+  for (const target of targets) {
+    const [canvas = "", screen] = target.split("/");
+    if (!known.includes(canvas))
+      throw new CliError(`No canvas "${canvas}". Canvases: ${known.join(", ") || "none yet"}`);
+    const screens = picked.has(canvas) ? picked.get(canvas) : /* @__PURE__ */ new Set();
+    picked.set(canvas, !screen || screens === null ? null : screens.add(screen));
+  }
+  if (options.page && picked.size !== 1)
+    throw new CliError("--page needs exactly one canvas: `design snapshots <canvas> --page <id>`");
+  const canvases = picked.size ? [...picked.keys()] : known;
+  const stale = canvases.flatMap(
+    (canvas) => staleSnapshots(paths, [canvas], { page: options.page, screens: picked.get(canvas) ?? void 0 })
+  );
+  if (!stale.length) return print(green("\u2713 Every screen has current snapshots in both themes."));
+  print(dim(`${stale.length} snapshot${stale.length === 1 ? "" : "s"} to take`));
+  const lines = await takeSnapshots(
+    paths,
+    stale,
+    async () => `http://127.0.0.1:${(await ensureServer(paths, {})).port}`,
+    progress()
+  );
+  for (const line of lines) print(line);
+}
+
 // src/cli/commands/cloud-status.ts
-import path33 from "path";
+import path34 from "path";
 var STATE_TEXT = {
   in_sync: green,
   local_changes: yellow,
@@ -6555,7 +6862,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 ${path33.relative(paths.root, incomingDir(paths, status.key))}`);
+  if (status.conflictRev !== void 0) parts.push(`merge ${path34.relative(paths.root, incomingDir(paths, status.key))}`);
   return parts.join(" \xB7 ");
 }
 async function printCloudStatus(paths, label) {
@@ -6685,15 +6992,23 @@ ${bold("Preview")}
                                              it; one from another version restarts) and print its URL;
                                              --open also opens a browser
           [--restart] [--foreground]
-  stop                                       Stop the viewer
+  stop [--all]                               Stop the viewer; --all stops every preview on this machine
+  previews [--json]                          Every preview running on this machine: project, URL,
+                                             version, uptime; orphans (a project's untracked server) marked
   status                                     Viewer state, a project summary and, with a cloud link, the
                                              account, the linked project and each unit: in sync, local
                                              changes, remote ahead, conflict or archived
 
 ${bold("Verify")}
-  check [canvas\u2026] [--render] [--json]        Validate canvas.json and the system (go() is an error);
-                                             --render loads every screen in Chrome and reports runtime
-                                             errors and links that lead to no screen
+  check [<canvas>[/<screen>]\u2026] [--page <id>] Validate canvas.json and the system (go() is an error);
+        [--render [--built]] [--json]        --render loads every screen in Chrome and reports runtime
+                                             errors and links that lead to no screen; --built renders
+                                             the production build design push uploads instead of the
+                                             dev server. Narrow it to canvases, one page (--page) or
+                                             single screens
+  snapshots [<canvas>[/<screen>]\u2026]           Take the snapshots screens lack, in both themes, for the
+            [--page <id>]                    viewer to show while frames do not run (push does this
+                                             for the canvases it pushes)
   shot <canvas>[/<screen>] [--page <id>]     Screenshot screens with Chrome (PNG paths are printed);
        [--theme light|dark] [--out <dir>]    @system or @system/<id> shoots the design system specimens
        [--overview]
@@ -6712,7 +7027,7 @@ ${bold("Cloud")}  ${dim("units: system (design.json + system/) and canvas/<id>;
   push [canvas\u2026] [--json]                    Build and upload what changed here (or the named units); a
        [--resolved <unit>]                   system change pushes every active canvas with it. When the
                                              cloud is ahead it pulls and merges first, then pushes; it
-                                             stops on conflicts. Refreshes each canvas's cover snapshot.
+                                             stops on conflicts. Takes missing snapshots (both themes).
                                              Prints the web link of every pushed canvas; refuses screens
                                              that still call go()
   pull [canvas\u2026] [--json]                    Take cloud changes into .design; a unit changed on both sides
@@ -6742,7 +7057,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 ? path34.resolve(rootOption) : findProjectRoot();
+  const found = rootOption ? path35.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.");
@@ -6769,6 +7084,8 @@ async function main(argv) {
       open: { type: "boolean" },
       port: { type: "string" },
       restart: { type: "boolean" },
+      all: { type: "boolean" },
+      built: { type: "boolean" },
       foreground: { type: "boolean" },
       render: { type: "boolean" },
       json: { type: "boolean" },
@@ -6793,7 +7110,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 ? path34.resolve(values.root) : process.cwd(), {
+      return runInit(values.root ? path35.resolve(values.root) : process.cwd(), {
         name: values.name,
         gitignore: !values["no-gitignore"]
       });
@@ -6831,11 +7148,20 @@ async function main(argv) {
       });
     }
     case "stop":
-      return runStop(projectPaths(values.root));
+      return values.all ? runStopAll() : runStop(projectPaths(values.root));
+    case "previews":
+      return runPreviews({ json: !!values.json });
     case "status":
       return runStatus(projectPaths(values.root));
     case "check":
-      return runCheck(projectPaths(values.root), rest, { render: !!values.render, json: !!values.json });
+      return runCheck(projectPaths(values.root), rest, {
+        render: !!values.render,
+        json: !!values.json,
+        page: values.page,
+        built: !!values.built
+      });
+    case "snapshots":
+      return runSnapshots(projectPaths(values.root), rest, { page: values.page });
     case "shot": {
       if (!rest[0]) throw new CliError("Usage: design shot <canvas>[/<screen>] [--page <id>] [--theme light|dark]");
       return runShot(projectPaths(values.root), rest[0], {
@@ -6884,20 +7210,42 @@ async function main(argv) {
       throw new CliError(`Unknown command "${command}". Run \`design --help\`.`);
   }
 }
-main(process.argv.slice(2)).catch((error) => {
-  endLine();
-  if (error instanceof CliError) {
-    process.stderr.write(`${red("error")} ${error.message}
-`);
-    process.exit(error.code);
+function relaunchFromRealPath() {
+  if (process.platform !== "win32" || process.env.FOSS_DESIGN_RELAUNCHED) return false;
+  const script = process.argv[1];
+  if (!script) return false;
+  let realScript;
+  let realCwd;
+  try {
+    realScript = fs37.realpathSync.native(script);
+    realCwd = fs37.realpathSync.native(process.cwd());
+  } catch {
+    return false;
   }
-  if (error.code?.startsWith("ERR_PARSE_ARGS")) {
-    process.stderr.write(`${red("error")} ${error.message}
+  const same = (a, b) => path35.resolve(a).toLowerCase() === path35.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",
+    cwd: realCwd,
+    env: { ...process.env, FOSS_DESIGN_RELAUNCHED: "1" }
+  });
+  process.exit(result.status ?? 1);
+}
+if (!relaunchFromRealPath())
+  main(process.argv.slice(2)).catch((error) => {
+    endLine();
+    if (error instanceof CliError) {
+      process.stderr.write(`${red("error")} ${error.message}
+`);
+      process.exit(error.code);
+    }
+    if (error.code?.startsWith("ERR_PARSE_ARGS")) {
+      process.stderr.write(`${red("error")} ${error.message}
 Run \`design --help\`.
 `);
-    process.exit(2);
-  }
-  process.stderr.write(`${red("error")} ${error?.stack ?? String(error)}
+      process.exit(2);
+    }
+    process.stderr.write(`${red("error")} ${error?.stack ?? String(error)}
 `);
-  process.exit(1);
-});
+    process.exit(1);
+  });