foss-design 0.8.1 → 0.9.0

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 // src/cli/index.ts
-import path30 from "path";
+import path34 from "path";
 import { parseArgs } from "util";
 
 // src/core/paths.ts
@@ -346,8 +346,8 @@ function routeError(pattern) {
   }
   return null;
 }
-function split(path31) {
-  return path31.split("/").filter(Boolean);
+function split(path35) {
+  return path35.split("/").filter(Boolean);
 }
 function compileRoute(pattern) {
   return {
@@ -366,8 +366,8 @@ function decode2(part) {
     return part;
   }
 }
-function scoreRoute(route2, path31) {
-  const parts = split(path31.split(/[?#]/)[0] ?? "").map(decode2);
+function scoreRoute(route2, path35) {
+  const parts = split(path35.split(/[?#]/)[0] ?? "").map(decode2);
   const walk2 = (s, p) => {
     if (s === route2.segments.length) return p === parts.length ? 0 : null;
     const segment = route2.segments[s];
@@ -385,11 +385,11 @@ function scoreRoute(route2, path31) {
   };
   return walk2(0, 0);
 }
-function matchRoute(entries, path31) {
+function matchRoute(entries, path35) {
   let best = null;
   for (const entry of entries) {
     for (const route2 of entry.routes) {
-      const score = scoreRoute(route2, path31);
+      const score = scoreRoute(route2, path35);
       if (score !== null && (!best || score > best.score)) best = { score, value: entry.value };
     }
   }
@@ -511,12 +511,14 @@ var CanvasSchema = z.strictObject({
   system: z.boolean().optional(),
   /** Theme screens open in (default follows the viewer). */
   theme: theme.optional(),
+  /** The canvas's picture in lists: a screen id, or an image in the canvas folder (PNG, JPEG, WebP, SVG, 512 KB). */
+  cover: z.string().min(1).optional(),
   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, path31) {
+function formatPath(base, path35) {
   let out = base;
-  for (const part of path31) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
+  for (const part of path35) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
   return out;
 }
 function describeZodError(error, base = "") {
@@ -754,8 +756,37 @@ function loadCanvas(paths, canvasId, urls, snapshots) {
     doc.pages.push(out);
   });
   checkNavigation(doc, canvasCodeFiles(dir, screens), issues, fileRel, (file2) => relToRoot(paths, file2));
+  if (top.success && top.data.cover) doc.cover = resolveCover(top.data.cover, dir, screens, paths, urls, report);
   return { doc, screens };
 }
+var MAX_COVER_BYTES = 512 * 1024;
+var COVER_IMAGE = /\.(png|jpe?g|webp|svg)$/i;
+function resolveCover(cover, dir, screens, paths, urls, report) {
+  if (screens.some((screen) => screen.id === cover)) return { screen: cover };
+  const file = path3.resolve(dir, cover);
+  if (!isInside(dir, file) || !COVER_IMAGE.test(file)) {
+    report(
+      "error",
+      `cover "${cover}" is neither a screen id nor a PNG, JPEG, WebP or SVG in the canvas folder`,
+      "cover"
+    );
+    return void 0;
+  }
+  if (!fs3.existsSync(file)) {
+    report("error", `cover "${cover}" does not exist`, "cover");
+    return void 0;
+  }
+  const { size: size2, mtimeMs } = fs3.statSync(file);
+  if (size2 > MAX_COVER_BYTES) {
+    report(
+      "error",
+      `cover "${cover}" is ${Math.ceil(size2 / 1024)} KB; the limit is ${MAX_COVER_BYTES / 1024} KB`,
+      "cover"
+    );
+    return void 0;
+  }
+  return { url: `${urls.file(relToDesign(paths, file))}?v=${Math.round(mtimeMs)}` };
+}
 var GO_IMPORT = /import\s*\{[^}]*\bgo\b[^}]*\}\s*from\s*['"]@design\/runtime['"]/;
 var GO_USE = /\bgo\s*\(/g;
 var GO_REMOVED = 'go() is no longer supported: link to the screen instead (<a href="/verify">, or history.pushState in code) and give that screen a "route" in canvas.json';
@@ -820,7 +851,8 @@ function checkNavigation(doc, codeFiles, issues, canvasFile, rel) {
 function summarize(canvas) {
   const { doc } = canvas;
   const screens = doc.pages.flatMap((page) => page.sections.flatMap((section) => section.items));
-  const firstScreen = screens.find((item) => item.kind === "screen" && item.snapshots);
+  const chosen = doc.cover && "screen" in doc.cover ? doc.cover.screen : null;
+  const firstScreen = chosen ? screens.find((item) => item.kind === "screen" && item.id === chosen) : screens.find((item) => item.kind === "screen" && item.snapshots);
   return {
     id: doc.id,
     title: doc.title,
@@ -829,19 +861,21 @@ function summarize(canvas) {
     screens: screens.filter((item) => item.kind === "screen" || item.kind === "url").length,
     updatedAt: doc.updatedAt,
     issues: doc.issues.filter((issue) => issue.severity === "error").length,
-    cover: firstScreen && firstScreen.kind === "screen" ? firstScreen.snapshots?.light ?? firstScreen.snapshots?.dark : void 0
+    cover: doc.cover && "url" in doc.cover ? doc.cover.url : firstScreen && firstScreen.kind === "screen" ? firstScreen.snapshots?.light ?? firstScreen.snapshots?.dark : void 0
   };
 }
 
 // src/core/icon.ts
+import { createHash as createHash2 } from "crypto";
 import fs4 from "fs";
 import path4 from "path";
 var ICON_EXTENSIONS = ["svg", "png", "webp"];
 var MAX_ICON_BYTES = 256 * 1024;
 var iconName = (ext) => `icon.${ext}`;
 function iconFile(paths) {
+  migrateIcon(paths);
   for (const ext of ICON_EXTENSIONS) {
-    const file = path4.join(paths.system, iconName(ext));
+    const file = path4.join(paths.design, iconName(ext));
     if (fs4.existsSync(file) && fs4.statSync(file).isFile()) return file;
   }
   return null;
@@ -864,21 +898,33 @@ function iconProblem(data, ext) {
   return null;
 }
 function writeIcon(paths, data) {
-  for (const ext2 of ICON_EXTENSIONS) fs4.rmSync(path4.join(paths.system, iconName(ext2)), { force: true });
+  for (const ext2 of ICON_EXTENSIONS) fs4.rmSync(path4.join(paths.design, iconName(ext2)), { force: true });
   if (!data) return null;
   const ext = sniffIcon(data);
-  fs4.mkdirSync(paths.system, { recursive: true });
-  const file = path4.join(paths.system, iconName(ext));
+  fs4.mkdirSync(paths.design, { recursive: true });
+  const file = path4.join(paths.design, iconName(ext));
   fs4.writeFileSync(file, data);
   return file;
 }
-function onlyIcon(dir) {
+function migrateIcon(paths) {
+  for (const ext of ICON_EXTENSIONS) {
+    const old = path4.join(paths.system, iconName(ext));
+    if (!fs4.existsSync(old)) continue;
+    const target = path4.join(paths.design, iconName(ext));
+    if (ICON_EXTENSIONS.some((other) => fs4.existsSync(path4.join(paths.design, iconName(other))))) fs4.rmSync(old);
+    else fs4.renameSync(old, target);
+  }
   try {
-    return fs4.readdirSync(dir).filter((name) => !name.startsWith(".")).every((name) => ICON_EXTENSIONS.some((ext) => name === iconName(ext)));
+    fs4.rmdirSync(paths.system);
   } catch {
-    return false;
   }
 }
+var iconHash = (file) => createHash2("sha256").update(fs4.readFileSync(file)).digest("hex");
+var ICON_TYPES = {
+  svg: "image/svg+xml",
+  png: "image/png",
+  webp: "image/webp"
+};
 
 // src/core/public.ts
 import fs5 from "fs";
@@ -1251,7 +1297,7 @@ function guessSources(componentsDir, stem) {
   return [];
 }
 function loadSystem(paths, urls) {
-  if (!fs7.existsSync(paths.system) || onlyIcon(paths.system)) return null;
+  if (!fs7.existsSync(paths.system)) return null;
   const issues = [];
   const configFile = path7.join(paths.system, "system.json");
   const report = (severity, file, message, at) => issues.push({ severity, file: relToRoot(paths, file), message, at });
@@ -1480,6 +1526,11 @@ var DesignProject = class {
     return this.publicCache?.set.has(rel) ?? false;
   }
   name() {
+    try {
+      const linked = JSON.parse(fs8.readFileSync(path8.join(this.paths.design, "cloud.json"), "utf8")).name;
+      if (typeof linked === "string" && linked) return linked;
+    } catch {
+    }
     const configured = this.config().config.name;
     if (configured) return configured;
     try {
@@ -1902,7 +1953,7 @@ function linkShippedPackages(paths, appDir = null) {
 }
 
 // src/server/vite.ts
-import { createHash as createHash2 } from "crypto";
+import { createHash as createHash3 } from "crypto";
 import fs11 from "fs";
 import path11 from "path";
 import tailwindcss from "@tailwindcss/vite";
@@ -1928,7 +1979,7 @@ function dropStaleDepCache(paths, appDir = null) {
   const stamp = path11.join(paths.cache, "vite-runtime");
   let runtime = "";
   try {
-    runtime = createHash2("sha256").update(fs11.readFileSync(PKG.runtime)).digest("hex");
+    runtime = createHash3("sha256").update(fs11.readFileSync(PKG.runtime)).digest("hex");
   } catch {
   }
   if (appDir) runtime += ` ${appDir}`;
@@ -2127,12 +2178,14 @@ async function buildSite(paths, out, options = {}) {
   }
   const files = /* @__PURE__ */ new Set();
   for (const canvas of canvases) {
+    const cover = canvas.doc.cover && "url" in canvas.doc.cover ? canvas.doc.cover.url.split("?")[0] : null;
+    if (cover?.startsWith("_f/")) files.add(cover);
     for (const page of canvas.doc.pages)
       for (const section of page.sections)
         for (const item of section.items) if (item.kind === "image" && item.url.startsWith("_f/")) files.add(item.url);
   }
   for (const asset of system?.doc.assets ?? []) files.add(asset.url);
-  const icon = project.iconUrl();
+  const icon = options.includeViewer === false ? null : project.iconUrl();
   if (icon) files.add(icon.split("?")[0]);
   for (const url of files) {
     const rel = url.slice("_f/".length).split("/").map(decodeURIComponent).join("/");
@@ -2308,12 +2361,12 @@ async function runBuild(paths, canvases, options) {
 import os from "os";
 
 // src/cloud/units.ts
-import { createHash as createHash3 } from "crypto";
+import { createHash as createHash4 } from "crypto";
 import fs14 from "fs";
 import path14 from "path";
 var SYSTEM_UNIT = "system";
 var CANVAS_PREFIX = "canvas/";
-var LOCAL_ONLY = /* @__PURE__ */ new Set(["cloud.json", "node_modules"]);
+var LOCAL_ONLY = /* @__PURE__ */ new Set(["cloud.json", "node_modules", "icon.svg", "icon.png", "icon.webp"]);
 var canvasUnit = (id2) => `${CANVAS_PREFIX}${id2}`;
 function unitCanvasId(key) {
   return key.startsWith(CANVAS_PREFIX) ? key.slice(CANVAS_PREFIX.length) : null;
@@ -2340,10 +2393,6 @@ function unitRoot(paths, key) {
   const id2 = unitCanvasId(key);
   return id2 === null ? paths.design : path14.join(paths.canvases, id2);
 }
-function unitRelative(key, rel) {
-  const id2 = unitCanvasId(key);
-  return id2 === null ? rel : rel.slice(`${CANVAS_PREFIX}${id2}/`.length);
-}
 function isUnitPath(key, rel) {
   if (!rel || rel.includes("\\") || rel.includes("\0") || rel.startsWith("/")) return false;
   const segments = rel.split("/");
@@ -2353,7 +2402,7 @@ function isUnitPath(key, rel) {
   return id2 !== null && segments[0] === "canvas" && segments[1] === id2 && segments.length > 2;
 }
 function hashBuffer(data) {
-  return createHash3("sha256").update(data).digest("hex");
+  return createHash4("sha256").update(data).digest("hex");
 }
 function hashFile(file) {
   const data = fs14.readFileSync(file);
@@ -2526,7 +2575,8 @@ function parseProject(value, fallbackRole) {
     name: text(data.name) ?? id2,
     role: text(data.role) ?? fallbackRole,
     archived: flag(data.archived, data.archivedAt, data.archived_at),
-    banned: flag(data.banned, data.bannedAt, data.banned_at)
+    banned: flag(data.banned, data.bannedAt, data.banned_at),
+    icon: /[?&]v=([0-9a-f]{64})/.exec(text(data.icon) ?? "")?.[1] ?? null
   };
 }
 function parseUnit(value) {
@@ -2580,7 +2630,7 @@ var CloudClient = class {
   }
   host;
   token;
-  async send(method, path31, init) {
+  async send(method, path35, init) {
     const headers = {
       "User-Agent": `foss-design/${packageVersion()} (${os.platform()})`,
       Accept: "application/json"
@@ -2588,7 +2638,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${path31}`, {
+      return await fetch(`${this.host}/api${path35}`, {
         method,
         headers,
         body: init.body,
@@ -2609,8 +2659,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, path31, body) {
-    const response = await this.send(method, path31, {
+  async request(method, path35, body) {
+    const response = await this.send(method, path35, {
       body: body === void 0 ? void 0 : JSON.stringify(body),
       type: body === void 0 ? void 0 : "application/json",
       timeout: JSON_TIMEOUT
@@ -2622,7 +2672,7 @@ var CloudClient = class {
     try {
       return JSON.parse(text2);
     } catch {
-      throw new CloudError(`${this.host} answered ${method} ${path31} with something other than JSON`, 0, "bad_response");
+      throw new CloudError(`${this.host} answered ${method} ${path35} with something other than JSON`, 0, "bad_response");
     }
   }
   /** POST /device/code. */
@@ -2663,6 +2713,34 @@ var CloudClient = class {
     if (!project) throw new CloudError(`${this.host} did not return the new project`, 0, "bad_response");
     return project;
   }
+  /** One of the caller's projects, from the project list; null when it is not among them. */
+  async project(projectId) {
+    const { owned, shared } = await this.projects();
+    return [...owned, ...shared].find((item) => item.id === projectId) ?? null;
+  }
+  /** PATCH /projects/:id: the owner renames the project. */
+  async renameProject(projectId, name) {
+    const body = record(await this.request("PATCH", `/projects/${projectId}`, { name }));
+    const project = parseProject(body.project, "owner");
+    if (!project) throw new CloudError(`${this.host} sent no project back`, 0, "bad_response");
+    return project;
+  }
+  /** GET /projects/:id/icon: the icon's bytes and type, or null without one. */
+  async projectIcon(projectId) {
+    const response = await this.send("GET", `/projects/${projectId}/icon`, { timeout: JSON_TIMEOUT });
+    if (response.status === 404) return null;
+    if (!response.ok) await this.fail(response);
+    return { data: Buffer.from(await response.arrayBuffer()), type: response.headers.get("content-type") ?? "" };
+  }
+  /** PUT or DELETE /projects/:id/icon (owner and editors). */
+  async setProjectIcon(projectId, icon) {
+    const response = await this.send(icon ? "PUT" : "DELETE", `/projects/${projectId}/icon`, {
+      body: icon ? new Uint8Array(icon.data) : void 0,
+      type: icon?.type,
+      timeout: JSON_TIMEOUT
+    });
+    if (!response.ok) await this.fail(response);
+  }
   async units(projectId) {
     const body = await this.request("GET", `/projects/${encodeURIComponent(projectId)}/units`);
     const list = Array.isArray(body) ? body : record(body).units;
@@ -2841,7 +2919,14 @@ function readLink(paths) {
   }
   const conflicts = {};
   for (const [key, rev] of Object.entries(data.conflicts ?? {})) if (typeof rev === "number") conflicts[key] = rev;
-  return { host: data.host, project: data.project, units, conflicts };
+  return {
+    host: data.host,
+    project: data.project,
+    units,
+    conflicts,
+    ...typeof data.name === "string" ? { name: data.name } : {},
+    ...typeof data.icon === "string" || data.icon === null ? { icon: data.icon } : {}
+  };
 }
 function requireLink(paths) {
   const link = readLink(paths);
@@ -2855,6 +2940,8 @@ function writeLink(paths, link) {
   const data = {
     host: link.host,
     project: link.project,
+    ...link.name !== void 0 ? { name: link.name } : {},
+    ...link.icon !== void 0 ? { icon: link.icon } : {},
     units: sorted(link.units),
     conflicts: sorted(link.conflicts)
   };
@@ -2937,9 +3024,178 @@ var unique = (keys) => [...new Set(keys)];
 var byUnit = (a, b) => a === SYSTEM_UNIT ? -1 : b === SYSTEM_UNIT ? 1 : a < b ? -1 : a > b ? 1 : 0;
 var plural = (count, word, many = `${word}s`) => `${count} ${count === 1 ? word : many}`;
 
-// src/cloud/pull.ts
+// src/capture/cover.ts
+import fs19 from "fs";
+
+// src/server/snapshots.ts
 import fs17 from "fs";
 import path17 from "path";
+var SAFE = /^@?[a-z0-9][a-z0-9_-]*$/i;
+function isSafeSegment(value) {
+  return SAFE.test(value);
+}
+var SnapshotStore = class {
+  constructor(dir, urlBase = "/api/snapshots") {
+    this.dir = dir;
+    this.urlBase = urlBase;
+  }
+  dir;
+  urlBase;
+  meta = /* @__PURE__ */ new Map();
+  metaFile(canvas) {
+    return path17.join(this.dir, canvas, "meta.json");
+  }
+  load(canvas) {
+    const cached = this.meta.get(canvas);
+    if (cached) return cached;
+    let data = {};
+    try {
+      data = JSON.parse(fs17.readFileSync(this.metaFile(canvas), "utf8"));
+    } catch {
+    }
+    this.meta.set(canvas, data);
+    return data;
+  }
+  url(canvas, id2, theme2, version, thumb = false) {
+    const name = `${encodeURIComponent(id2)}.${theme2}${thumb ? ".thumb" : ""}.png`;
+    return `${this.urlBase}/${encodeURIComponent(canvas)}/${name}?v=${version}`;
+  }
+  lookup = (canvas, id2) => {
+    if (!isSafeSegment(canvas) || !isSafeSegment(id2)) return null;
+    const entry = this.load(canvas)[id2];
+    if (!entry) return null;
+    const urls = {};
+    const thumbs = {};
+    for (const theme2 of ["light", "dark"]) {
+      const version = entry[theme2];
+      if (!version) continue;
+      urls[theme2] = this.url(canvas, id2, theme2, version);
+      thumbs[theme2] = this.url(canvas, id2, theme2, version, true);
+    }
+    return { urls, thumbs, height: entry.height };
+  };
+  /** When the snapshot was taken (ms), or null without one. */
+  version(canvas, id2, theme2) {
+    if (!isSafeSegment(canvas) || !isSafeSegment(id2)) return null;
+    return this.load(canvas)[id2]?.[theme2] ?? null;
+  }
+  save(canvas, id2, theme2, png, height) {
+    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 data = this.load(canvas);
+    const version = Date.now();
+    data[id2] = { ...data[id2], [theme2]: version, ...height ? { height } : {} };
+    fs17.writeFileSync(this.metaFile(canvas), JSON.stringify(data));
+    return { url: this.url(canvas, id2, theme2, version) };
+  }
+  /** Absolute path of `<id>.<theme>.png`, or of its thumbnail for `<id>.<theme>.thumb.png` (made on first use); null when missing. */
+  file(canvas, name) {
+    const match = /^(@?[a-z0-9][a-z0-9_-]*)\.(light|dark)(\.thumb)?\.png$/i.exec(name);
+    if (!isSafeSegment(canvas) || !match) return null;
+    const file = path17.join(this.dir, canvas, `${match[1]}.${match[2]}.png`);
+    if (!fs17.existsSync(file)) return null;
+    return match[3] ? ensureThumb(file) : file;
+  }
+};
+
+// src/capture/chrome.ts
+import fs18 from "fs";
+var CANDIDATES = {
+  darwin: [
+    "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+    "/Applications/Chromium.app/Contents/MacOS/Chromium",
+    "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
+    "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"
+  ],
+  linux: [
+    "/usr/bin/google-chrome",
+    "/usr/bin/google-chrome-stable",
+    "/usr/bin/chromium",
+    "/usr/bin/chromium-browser",
+    "/snap/bin/chromium",
+    "/usr/bin/microsoft-edge"
+  ],
+  win32: [
+    "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
+    "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
+    "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"
+  ]
+};
+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;
+  return null;
+}
+async function launchChrome() {
+  const executablePath = findChrome();
+  if (!executablePath) {
+    throw new Error(
+      "No Chrome, Chromium or Edge found. Install one, or point DESIGN_CHROME at a Chromium-based browser binary."
+    );
+  }
+  const { chromium } = await import("playwright-core");
+  return chromium.launch({ executablePath, headless: true, args: ["--hide-scrollbars", "--force-color-profile=srgb"] });
+}
+var OUTDATED_DEP = /Outdated Optimize Dep/;
+async function openFrame(page, url, options = {}) {
+  let errors = [];
+  let outdated = () => {
+  };
+  const record2 = (text2) => {
+    errors.push(text2);
+    if (OUTDATED_DEP.test(text2)) outdated();
+  };
+  page.on("pageerror", (error) => record2(error.message));
+  page.on("console", (message) => {
+    if (message.type() !== "error") return;
+    let text2 = message.text().replace(/^(?:\s*%[osdifcO])+\s*/, "");
+    const where = message.location().url;
+    if (/^Failed to load resource/.test(text2) && where && !text2.includes(where)) text2 += ` (${where})`;
+    record2(text2);
+  });
+  let ready = false;
+  let reloads = 0;
+  const onNavigate = () => {
+    reloads++;
+  };
+  for (let attempt = 0; attempt < 2; attempt++) {
+    errors = [];
+    reloads = 0;
+    ready = options.waitForReady === false;
+    const turnedAway = new Promise((resolve) => {
+      outdated = () => resolve("outdated");
+    });
+    await page.goto(url, { waitUntil: "load", timeout: options.timeoutMs ?? 3e4 });
+    page.on("load", onNavigate);
+    if (!ready) {
+      const signal = page.waitForFunction(() => window.__DESIGN_READY__ === true, null, {
+        timeout: options.timeoutMs ?? 2e4
+      }).then(() => "ready");
+      signal.catch(() => {
+      });
+      ready = await Promise.race([signal, turnedAway]).catch(() => null) === "ready";
+    }
+    if (ready || options.waitForReady === false) await page.waitForTimeout(options.settleMs ?? 700);
+    page.off("load", onNavigate);
+    if (!reloads && !errors.some((error) => OUTDATED_DEP.test(error))) break;
+  }
+  if (reloads) errors.push(`the page reloaded itself ${reloads === 1 ? "once" : `${reloads} times`} while it loaded`);
+  const held = ready ? 0 : await page.evaluate(() => window.__DESIGN_HOLDS__ ?? 0).catch(() => 0);
+  const runtimeErrors = await page.evaluate(() => window.__DESIGN_ERRORS__ ?? []).catch(() => []);
+  for (const error of runtimeErrors) if (!errors.includes(error)) errors.push(error);
+  const overlay = await page.evaluate(() => {
+    const el = document.querySelector("vite-error-overlay");
+    return el?.shadowRoot?.querySelector(".message")?.textContent ?? null;
+  }).catch(() => null);
+  if (overlay) errors.unshift(overlay.trim());
+  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 } : {} };
+}
 
 // src/capture/frames.ts
 var AUTO_VIEWPORT_HEIGHT = 900;
@@ -3013,73 +3269,323 @@ async function mapLimit(items, limit, fn) {
   return results;
 }
 
-// src/cloud/pull.ts
-var HASH = /^[0-9a-f]{64}$/;
-function checkManifest(key, manifest) {
-  for (const [rel, entry] of Object.entries(manifest)) {
-    if (!isUnitPath(key, rel)) throw new CliError(`The cloud sent a path that does not belong to ${key}: "${rel}"`);
-    if (!HASH.test(entry.hash)) throw new CliError(`The cloud sent a bad hash for ${rel} in ${key}`);
+// src/capture/cover.ts
+var SNAPSHOT_WIDTH = 900;
+async function refreshCovers(paths, canvasIds, base) {
+  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();
+  const browser = await launchChrome();
+  const lines = [];
+  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(() => {
+        });
+      }
+    }
+  } finally {
+    await browser.close();
   }
+  return lines;
 }
+
+// src/cloud/pull.ts
+import fs23 from "fs";
+import path21 from "path";
+
+// src/cloud/merge.ts
+import fs21 from "fs";
+import path19 from "path";
+import { merge as diff3 } from "node-diff3";
+
+// src/cloud/write.ts
+import fs20 from "fs";
+import path18 from "path";
 function writeInside(root, rel, data) {
-  const file = path17.join(root, rel);
+  const file = path18.join(root, rel);
   if (!isInside(root, file)) throw new CliError(`Refusing to write outside ${root}: ${rel}`);
-  fs17.mkdirSync(path17.dirname(file), { recursive: true });
-  if (!isInside(fs17.realpathSync(root), fs17.realpathSync(path17.dirname(file))))
+  fs20.mkdirSync(path18.dirname(file), { recursive: true });
+  if (!isInside(fs20.realpathSync(root), fs20.realpathSync(path18.dirname(file))))
     throw new CliError(`Refusing to write through a link out of ${root}: ${rel}`);
-  if (fs17.existsSync(file) && fs17.lstatSync(file).isSymbolicLink()) fs17.unlinkSync(file);
-  fs17.writeFileSync(file, data);
+  if (fs20.existsSync(file) && fs20.lstatSync(file).isSymbolicLink()) fs20.unlinkSync(file);
+  fs20.writeFileSync(file, data);
 }
 function pruneEmpty(dir, stop) {
   let current = dir;
   while (isInside(stop, current) && current !== stop) {
     try {
-      if (fs17.readdirSync(current).length) return;
-      fs17.rmdirSync(current);
+      if (fs20.readdirSync(current).length) return;
+      fs20.rmdirSync(current);
     } catch {
       return;
     }
-    current = path17.dirname(current);
+    current = path18.dirname(current);
   }
 }
-function applyUnit(paths, key, local, target, blobs) {
-  const counts = { added: 0, changed: 0, removed: 0 };
-  const stop = key === SYSTEM_UNIT ? paths.design : path17.dirname(unitRoot(paths, key));
-  for (const rel of Object.keys(local)) {
-    if (rel in target) continue;
-    const file = path17.join(paths.design, rel);
-    fs17.rmSync(file, { force: true });
-    pruneEmpty(path17.dirname(file), stop);
-    counts.removed++;
-  }
-  for (const [rel, entry] of Object.entries(target)) {
-    if (local[rel]?.hash === entry.hash) continue;
-    writeInside(paths.design, rel, blobs.get(entry.hash));
-    if (local[rel]) counts.changed++;
-    else counts.added++;
+
+// 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);
+function readMergeState(paths, key) {
+  try {
+    return JSON.parse(fs21.readFileSync(stateFile(paths, key), "utf8"));
+  } catch {
+    return null;
   }
-  return counts;
 }
-async function pull(ctx, options) {
-  const { paths, client } = ctx;
-  const link = structuredClone(ctx.link);
-  const report = newReport("pull", link);
-  const selected = unique(options.units.map(unitArg));
-  const theirs = unique(options.theirs.map(unitArg));
-  const scan = scanLocal(paths);
-  const remote = await client.units(link.project);
-  const local = (key) => scan.units.get(key)?.manifest ?? {};
-  const keys = selected.length || theirs.length ? unique([...selected, ...theirs]) : allUnitKeys(link, /* @__PURE__ */ new Map(), remote);
-  const clashes = caseClashes([...remote.keys(), ...scan.units.keys(), ...Object.keys(link.units)]);
-  const plans = [];
-  for (const key of keys.sort(byUnit)) {
-    const clash = clashes.get(key);
-    if (clash !== void 0) {
-      report.units.push({
-        unit: key,
-        action: "conflict",
-        message: `differs from ${clash} only by letter case; rename one of them before pulling`
-      });
+function saveState(paths, state) {
+  fs21.mkdirSync(mergeDir(paths, state.unit), { recursive: true });
+  fs21.writeFileSync(stateFile(paths, state.unit), `${JSON.stringify(state, null, 2)}
+`);
+}
+function mergingUnits(paths) {
+  const root = path19.join(cloudCache(paths), "merge");
+  const found = [];
+  const visit = (dir, prefix) => {
+    if (fs21.existsSync(path19.join(dir, "state.json"))) {
+      const state = readMergeState(paths, prefix);
+      if (state) found.push(state);
+      return;
+    }
+    let entries = [];
+    try {
+      entries = fs21.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);
+  };
+  visit(root, "");
+  return found;
+}
+var MARKER = /^(<{7}|={7}|>{7})( |$)/m;
+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"));
+    } catch {
+      return false;
+    }
+  });
+}
+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);
+}
+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 remove = (rel) => {
+    const file = path19.join(paths.design, rel);
+    fs21.rmSync(file, { force: true });
+    pruneEmpty(path19.dirname(file), stop);
+  };
+  for (const rel of [.../* @__PURE__ */ new Set([...Object.keys(base), ...Object.keys(here), ...Object.keys(cloud2)])].sort()) {
+    const b = base[rel];
+    const h = here[rel]?.hash;
+    const c = cloud2[rel]?.hash;
+    if (h === c || c === b) continue;
+    if (h === b) {
+      if (c) {
+        writeInside(paths.design, rel, blob(c));
+        if (h) files.changed++;
+        else files.added++;
+      } else {
+        remove(rel);
+        files.removed++;
+      }
+      continue;
+    }
+    const cloudData = c ? blob(c) : void 0;
+    const hereData = h ? read(rel) : void 0;
+    if (!h || !c) {
+      const kind = h ? "deleted_in_cloud" : "deleted_here";
+      keep(paths, key, rel, "here", hereData);
+      keep(paths, key, rel, "cloud", cloudData);
+      if (!h && cloudData) writeInside(paths.design, rel, cloudData);
+      conflicts.push({ path: rel, kind });
+      continue;
+    }
+    const baseData = b ? blob(b) : void 0;
+    if (isText(rel, hereData, cloudData, baseData)) {
+      const lines = (data) => data ? data.toString("utf8").split("\n") : [];
+      const result = diff3(lines(hereData), lines(baseData), lines(cloudData), {
+        label: { a: "here", b: "cloud" }
+      });
+      writeInside(paths.design, rel, Buffer.from(result.result.join("\n")));
+      if (!result.conflict) {
+        files.merged++;
+        continue;
+      }
+      keep(paths, key, rel, "base", baseData);
+      keep(paths, key, rel, "here", hereData);
+      keep(paths, key, rel, "cloud", cloudData);
+      conflicts.push({ path: rel, kind: "text" });
+      continue;
+    }
+    keep(paths, key, rel, "here", hereData);
+    keep(paths, key, rel, "cloud", cloudData);
+    conflicts.push({ path: rel, kind: "binary" });
+  }
+  if (conflicts.length) saveState(paths, { unit: key, headRev, conflicts });
+  return { files, conflicts };
+}
+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));
+  else {
+    fs21.rmSync(path19.join(paths.design, rel), { force: true });
+    pruneEmpty(path19.dirname(path19.join(paths.design, rel)), stop);
+  }
+  state.conflicts = state.conflicts.filter((item) => item.path !== rel);
+  saveState(paths, state);
+}
+function finishMerge(paths, link, key, accept = false) {
+  const state = readMergeState(paths, key);
+  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 });
+  }
+  delete link.conflicts[key];
+  return [];
+}
+
+// src/cloud/meta.ts
+import fs22 from "fs";
+import path20 from "path";
+async function syncProjectMeta(paths, client, link) {
+  const remote = await client.project(link.project);
+  if (!remote) return [];
+  const lines = [];
+  link.name = remote.name;
+  const file = iconFile(paths);
+  const local = file ? iconHash(file) : null;
+  const cloud2 = remote.icon;
+  if (local === cloud2) {
+    link.icon = cloud2;
+    return lines;
+  }
+  const base = link.icon;
+  const localChanged = base === void 0 ? cloud2 === null : local !== base;
+  const cloudChanged = base === void 0 ? local === null : cloud2 !== base;
+  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] });
+        lines.push("The project icon went up to the cloud.");
+      } else {
+        await client.setProjectIcon(link.project, null);
+        lines.push("The project icon was removed in the cloud too.");
+      }
+      link.icon = local;
+    } catch (error) {
+      if (!(error instanceof CloudError) || error.status === 0) throw error;
+      lines.push(`The project icon stays here only: ${error.message}`);
+    }
+    return lines;
+  }
+  const icon = cloud2 ? await client.projectIcon(link.project) : null;
+  if (icon && !sniffIcon(icon.data))
+    return [...lines, "The cloud sent a project icon that is no image; it was left out."];
+  writeIcon(paths, icon?.data ?? null);
+  link.icon = cloud2;
+  lines.push(
+    localChanged ? "The project icon changed here and in the cloud; the cloud's is kept." : cloud2 ? "The project icon came down from the cloud." : "The project icon was removed in the cloud, so here too."
+  );
+  return lines;
+}
+
+// src/cloud/pull.ts
+var HASH = /^[0-9a-f]{64}$/;
+var MERGE_HINT = "Resolve with `design merge` (it lists the files; `--here` or `--cloud` settles one or a unit), then `design push`.";
+function checkManifest(key, manifest) {
+  for (const [rel, entry] of Object.entries(manifest)) {
+    if (!isUnitPath(key, rel)) throw new CliError(`The cloud sent a path that does not belong to ${key}: "${rel}"`);
+    if (!HASH.test(entry.hash)) throw new CliError(`The cloud sent a bad hash for ${rel} in ${key}`);
+  }
+}
+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));
+  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);
+    counts.removed++;
+  }
+  for (const [rel, entry] of Object.entries(target)) {
+    if (local[rel]?.hash === entry.hash) continue;
+    writeInside(paths.design, rel, blobs.get(entry.hash));
+    if (local[rel]) counts.changed++;
+    else counts.added++;
+  }
+  return counts;
+}
+async function pull(ctx, options) {
+  const { paths, client } = ctx;
+  const link = structuredClone(ctx.link);
+  const report = newReport("pull", link);
+  for (const line of await syncProjectMeta(ctx.paths, ctx.client, link)) report.hints.push(line);
+  const selected = unique(options.units.map(unitArg));
+  const theirs = unique(options.theirs.map(unitArg));
+  const scan = scanLocal(paths);
+  const remote = await client.units(link.project);
+  const local = (key) => scan.units.get(key)?.manifest ?? {};
+  const keys = selected.length || theirs.length ? unique([...selected, ...theirs]) : allUnitKeys(link, /* @__PURE__ */ new Map(), remote);
+  const clashes = caseClashes([...remote.keys(), ...scan.units.keys(), ...Object.keys(link.units)]);
+  const plans = [];
+  for (const key of keys.sort(byUnit)) {
+    const clash = clashes.get(key);
+    if (clash !== void 0) {
+      report.units.push({
+        unit: key,
+        action: "conflict",
+        message: `differs from ${clash} only by letter case; rename one of them before pulling`
+      });
       continue;
     }
     const unit = remote.get(key) ?? null;
@@ -3110,9 +3616,15 @@ async function pull(ctx, options) {
       entry.message = "local changes discarded";
       plans.push({ key, kind: "apply", remote: unit, report: entry });
     } else if (!s.ahead) {
+      const merging = readMergeState(paths, key);
+      const open2 = merging ? openConflicts(paths, merging) : [];
+      if (open2.length) {
+        report.units.push({ ...reportFor("conflict"), rev: s.baseRev, conflicts: open2, message: MERGE_HINT });
+        continue;
+      }
       if (s.conflictRev !== void 0) {
-        delete link.conflicts[key];
-        fs17.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+        finishMerge(paths, link, key, true);
+        fs23.rmSync(incomingDir(paths, key), { recursive: true, force: true });
       }
       report.units.push({ ...reportFor("up_to_date"), rev: s.baseRev });
     } else if (!s.changed.length) {
@@ -3136,31 +3648,33 @@ async function pull(ctx, options) {
         message: "deleted in the cloud; your local changes are kept and `design push` creates it again"
       });
     } else {
-      const entry = {
-        ...reportFor("conflict"),
-        rev: void 0,
-        headRev: unit.headRev,
-        incoming: incomingDir(paths, key)
-      };
-      entry.message = `changed here and in the cloud; the cloud version (r${unit.headRev}) is in ${path17.relative(paths.root, entry.incoming)}`;
-      if (s.conflictRev === unit.headRev && fs17.existsSync(entry.incoming)) report.units.push(entry);
-      else plans.push({ key, kind: "incoming", remote: unit, report: entry });
+      plans.push({ key, kind: "merge", remote: unit, report: { ...reportFor("merged"), headRev: unit.headRev } });
     }
   }
   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, path17.join(paths.design, rel));
+    for (const [rel, entry] of Object.entries(unit.manifest)) byHash.set(entry.hash, path21.join(paths.design, rel));
   const needed = /* @__PURE__ */ new Set();
+  const bases = /* @__PURE__ */ new Set();
   for (const plan of plans) {
     if (!plan.remote) continue;
     checkManifest(plan.key, plan.remote.manifest);
     for (const entry of Object.values(plan.remote.manifest)) needed.add(entry.hash);
+    if (plan.kind !== "merge") continue;
+    const base = link.units[plan.key]?.files ?? {};
+    const here = local(plan.key);
+    for (const [rel, hash] of Object.entries(base)) {
+      const h = here[rel]?.hash;
+      const c = plan.remote.manifest[rel]?.hash;
+      if (h && c && h !== hash && c !== hash && h !== c) bases.add(hash);
+    }
   }
+  for (const hash of bases) if (!needed.has(hash) && byHash.has(hash)) needed.add(hash);
   const blobs = /* @__PURE__ */ new Map();
   const download = [];
   for (const hash of needed) {
     const file = byHash.get(hash);
-    if (file) blobs.set(hash, fs17.readFileSync(file));
+    if (file) blobs.set(hash, fs23.readFileSync(file));
     else download.push(hash);
   }
   if (download.length) {
@@ -3179,6 +3693,16 @@ async function pull(ctx, options) {
     });
     bar.done(`Downloaded ${plural(download.length, "file")} (${megabytes(gotBytes)}) in ${seconds(started)}`);
   }
+  await mapLimit(
+    [...bases].filter((hash) => !blobs.has(hash)),
+    TRANSFERS,
+    async (hash) => {
+      try {
+        blobs.set(hash, await client.getBlob(link.project, hash));
+      } catch {
+      }
+    }
+  );
   for (const plan of plans) {
     const { key, report: entry } = plan;
     if (plan.kind === "apply") {
@@ -3186,14 +3710,30 @@ 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];
-      fs17.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+      fs23.rmSync(incomingDir(paths, key), { recursive: true, force: true });
     } else {
-      const dir = incomingDir(paths, key);
-      fs17.rmSync(dir, { recursive: true, force: true });
-      fs17.mkdirSync(dir, { recursive: true });
-      for (const [rel, file] of Object.entries(plan.remote.manifest))
-        writeInside(dir, unitRelative(key, rel), blobs.get(file.hash));
-      link.conflicts[key] = plan.remote.headRev;
+      const result = mergeUnit(
+        paths,
+        key,
+        plan.remote.headRev,
+        link.units[key]?.files ?? {},
+        local(key),
+        plan.remote.manifest,
+        (hash) => blobs.get(hash)
+      );
+      fs23.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;
+      if (result.conflicts.length) {
+        link.conflicts[key] = plan.remote.headRev;
+        entry.action = "conflict";
+        entry.conflicts = result.conflicts;
+        entry.message = `${plural(result.conflicts.length, "file")} changed on both sides did not merge. ${MERGE_HINT}`;
+      } else {
+        delete link.conflicts[key];
+        entry.message = `merged with the cloud's changes (r${plan.remote.headRev})${result.files.merged ? `, ${plural(result.files.merged, "file")} line by line` : ""}; \`design push\` takes your changes up`;
+      }
     }
     report.units.push(entry);
   }
@@ -3204,15 +3744,15 @@ async function pull(ctx, options) {
     report.ok = false;
     report.error = {
       code: "conflict",
-      message: `${plural(conflicts.length, "unit")} changed both here and in the cloud. Merge the cloud version from incoming/ into your files, then \`design push --resolved <unit>\`; or \`design pull --theirs <unit>\` to take the cloud version.`
+      message: `${plural(conflicts.length, "unit")} changed both here and in the cloud and did not merge cleanly. ${MERGE_HINT}`
     };
   }
   return report;
 }
 
 // src/cloud/push.ts
-import fs18 from "fs";
-import path18 from "path";
+import fs24 from "fs";
+import path22 from "path";
 function blockedReport(status, message) {
   return {
     unit: status.key,
@@ -3226,6 +3766,7 @@ async function push(ctx, options) {
   const { paths, client, log } = ctx;
   const link = structuredClone(ctx.link);
   const report = newReport("push", link);
+  for (const line of await syncProjectMeta(ctx.paths, ctx.client, link)) report.hints.push(line);
   const selected = unique(options.units.map(unitArg));
   const resolved = unique(options.resolved.map(unitArg));
   const scan = scanLocal(paths);
@@ -3237,10 +3778,19 @@ async function push(ctx, options) {
       `These canvases differ only by letter case: ${pairs.join(", ")}. On macOS and Windows they share one folder; rename one of them.`
     );
   }
+  for (const key of Object.keys(link.conflicts)) if (readMergeState(paths, key)) finishMerge(paths, link, key);
   for (const key of resolved) {
     const head = link.conflicts[key];
-    if (head === void 0)
+    if (head === void 0) {
+      if (link.units[key]) continue;
       throw new CliError(`${key} has no pending conflict; --resolved is for units \`design pull\` reported in conflict`);
+    }
+    if (readMergeState(paths, key)) {
+      const open2 = finishMerge(paths, link, key, true);
+      if (open2.length)
+        throw new CliError(`${key} still has conflict markers in ${open2.map((item) => item.path).join(", ")}`);
+      continue;
+    }
     link.units[key] = { rev: head, files: link.units[key]?.files ?? {} };
     delete link.conflicts[key];
   }
@@ -3318,9 +3868,12 @@ async function push(ctx, options) {
   for (const key of toPush) {
     const s = status(key);
     if (s.conflictRev !== void 0) {
-      const dir = path18.relative(paths.root, incomingDir(paths, key));
+      const dir = path22.relative(paths.root, incomingDir(paths, key));
       blocked.push(
-        blockedReport(s, `pull left the cloud version in ${dir}; merge it, then \`design push --resolved ${key}\``)
+        blockedReport(
+          s,
+          readMergeState(paths, key) ? "a merge with the cloud has conflicts left: `design merge` lists them and settles them" : `pull left the cloud version in ${dir}; merge it, then \`design push --resolved ${key}\``
+        )
       );
     } else if (s.ahead) {
       blocked.push(
@@ -3356,13 +3909,15 @@ async function push(ctx, options) {
     return false;
   });
   if (!pushing.length) return report;
+  const canvasIds = pushing.map(unitCanvasId).filter((id2) => id2 !== null);
+  if (options.beforeBuild) for (const line of await options.beforeBuild(canvasIds)) report.hints.push(line);
   const project = new DesignProject(paths, STATIC_URLS);
   const systemRev = remote.get(SYSTEM_UNIT)?.headRev ?? 0;
   const units = [];
   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, path18.join(dir, rel));
+      if (!files.has(entry.hash)) files.set(entry.hash, path22.join(dir, rel));
   };
   for (const key of pushing) {
     const id2 = unitCanvasId(key);
@@ -3394,7 +3949,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 + fs18.statSync(files.get(hash)).size, 0);
+    const bytes = missing.reduce((sum, hash) => sum + fs24.statSync(files.get(hash)).size, 0);
     const bar = ctx.progress();
     const started = Date.now();
     let sentFiles = 0;
@@ -3403,12 +3958,12 @@ async function push(ctx, options) {
     bar.update(line());
     await mapLimit(missing, TRANSFERS, async (hash) => {
       const file = files.get(hash);
-      const data = fs18.readFileSync(file);
+      const data = fs24.readFileSync(file);
       try {
         await client.putBlob(link.project, hash, data);
       } catch (error) {
         if (error instanceof CloudError && error.status === 413)
-          throw new CliError(`${path18.relative(process.cwd(), file)} (${megabytes(data.length)}): ${error.message}`);
+          throw new CliError(`${path22.relative(process.cwd(), file)} (${megabytes(data.length)}): ${error.message}`);
         throw error;
       }
       sentFiles++;
@@ -3430,7 +3985,7 @@ async function push(ctx, options) {
       url: webUrl(link, unit.key)
     });
   }
-  for (const key of resolved) fs18.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+  for (const key of resolved) fs24.rmSync(incomingDir(paths, key), { recursive: true, force: true });
   writeLink(paths, link);
   report.units.sort((a, b) => byUnit(a.unit, b.unit));
   return report;
@@ -3441,7 +3996,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(path18.join(paths.canvases, id2), project.canvas(id2)?.screens ?? [])) {
+    for (const file of canvasCodeFiles(path22.join(paths.canvases, id2), project.canvas(id2)?.screens ?? [])) {
       for (const line of legacyGoLines(file)) hits.add(`${relToRoot(paths, file)}:${line}`);
     }
   }
@@ -3455,496 +4010,50 @@ Still using go():
   );
 }
 
-// src/cli/commands/sync.ts
-var GOOD = /* @__PURE__ */ new Set(["pushed", "created", "updated", "deleted"]);
-var BAD = /* @__PURE__ */ new Set(["conflict", "remote_ahead"]);
-var QUIET = /* @__PURE__ */ new Set(["up_to_date", "unchanged"]);
-function revs(entry) {
-  if (entry.action === "created") return entry.rev !== void 0 ? `r${entry.rev}` : "";
-  if (entry.action === "deleted") return "";
-  if (GOOD.has(entry.action))
-    return entry.baseRev && entry.baseRev !== entry.rev ? `r${entry.baseRev} \u2192 r${entry.rev}` : `r${entry.rev}`;
-  if (BAD.has(entry.action) && entry.headRev !== void 0) return `r${entry.baseRev ?? 0} \u2192 r${entry.headRev}`;
-  return "";
+// src/cli/commands/preview.ts
+import { spawn } from "child_process";
+import fs28 from "fs";
+
+// src/server/index.ts
+import fs27 from "fs";
+import http from "http";
+import path25 from "path";
+import sirv from "sirv";
+import { createServer, searchForWorkspaceRoot } from "vite";
+
+// src/server/api.ts
+import fs25 from "fs";
+import path23 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));
 }
-function printReport(report) {
-  const verb = report.command === "push" ? "Pushed to" : "Pulled from";
-  const shown = report.units.filter((entry) => !QUIET.has(entry.action));
-  const quiet = report.units.length - shown.length;
-  const moved = report.units.some((entry) => GOOD.has(entry.action));
-  if (report.ok && !moved) print(`${bold(`Nothing to ${report.command}`)} ${dim(report.url)}`);
-  else if (report.ok) print(`${bold(verb)} ${report.url}`);
-  else print(`${bold(report.command === "push" ? "Push stopped" : "Pull finished with conflicts")} ${dim(report.host)}`);
-  const width = Math.max(0, ...shown.map((entry) => entry.unit.length));
-  for (const entry of shown) {
-    const mark = GOOD.has(entry.action) ? green("\u2713") : BAD.has(entry.action) ? red("\u2717") : yellow("!");
-    const files = entry.files ? dim(
-      [
-        entry.files.added && `+${entry.files.added}`,
-        entry.files.changed && `~${entry.files.changed}`,
-        entry.files.removed && `-${entry.files.removed}`
-      ].filter(Boolean).join(" ")
-    ) : "";
-    const detail2 = [entry.action.replaceAll("_", " "), revs(entry), files].filter(Boolean).join("  ");
-    print(`  ${mark} ${entry.unit.padEnd(width)}  ${detail2}`);
-    if (entry.url && GOOD.has(entry.action)) print(`      ${dim("\u2192")} ${entry.url}`);
-    if (entry.message) print(`      ${dim(entry.message)}`);
-  }
-  if (quiet) print(dim(`  ${plural(quiet, "unit")} ${report.command === "push" ? "unchanged" : "up to date"}`));
-  for (const hint of report.hints) print(dim(hint));
+function readBody(req, limit = 25 * 1024 * 1024) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    let size2 = 0;
+    req.on("data", (chunk2) => {
+      size2 += chunk2.length;
+      if (size2 > limit) {
+        reject(new Error("body too large"));
+        req.destroy();
+      } else chunks.push(chunk2);
+    });
+    req.on("end", () => resolve(Buffer.concat(chunks)));
+    req.on("error", reject);
+  });
 }
-async function runSync(paths, command, json, run) {
-  let report;
-  try {
-    report = await run(json ? openSync(paths, () => {
-    }) : openSync(paths, (line) => print(dim(line)), progress));
-  } catch (error) {
-    if (!json) throw error;
-    let link = null;
-    try {
-      link = readLink(paths);
-    } catch {
-    }
-    const cloud2 = error instanceof CloudError ? error : null;
-    const failure = {
-      ok: false,
-      command,
-      host: link?.host ?? "",
-      project: link?.project ?? "",
-      url: link ? webUrl(link) : "",
-      units: [],
-      hints: [],
-      error: {
-        code: cloud2?.error ?? (error instanceof CliError ? "error" : "internal"),
-        message: error.message,
-        status: cloud2?.status || void 0,
-        limit: cloud2?.limit
-      }
-    };
-    print(JSON.stringify(failure, null, 2));
-    process.exitCode = error instanceof CliError ? error.code : 1;
-    return;
+async function handleApi(ctx, req, res, url) {
+  const { project, events, snapshots } = ctx;
+  const route2 = url.pathname.slice("/api".length);
+  const method = req.method ?? "GET";
+  if (route2 === "/health") {
+    sendJson(res, 200, { ok: true, root: project.paths.root, version: packageVersion(), pid: process.pid });
+    return true;
   }
-  if (json) {
-    print(JSON.stringify(report, null, 2));
-    if (!report.ok) process.exitCode = 2;
-    return;
-  }
-  printReport(report);
-  if (!report.ok && report.error) throw new CliError(report.error.message, 2);
-}
-function runPush(paths, units, options) {
-  return runSync(paths, "push", options.json, (ctx) => push(ctx, { units, resolved: options.resolved }));
-}
-function runPull(paths, units, options) {
-  return runSync(paths, "pull", options.json, (ctx) => pull(ctx, { units, theirs: options.theirs }));
-}
-
-// src/cli/commands/canvases.ts
-var publicUrl = (host, publicId) => `${host.replace(/\/+$/, "")}/s/${publicId}`;
-function ago(iso) {
-  const seconds2 = Math.max(0, (Date.now() - Date.parse(iso)) / 1e3);
-  if (!Number.isFinite(seconds2)) return "";
-  if (seconds2 < 60) return "just now";
-  const [value, unit] = seconds2 < 3600 ? [seconds2 / 60, "minute"] : seconds2 < 86400 ? [seconds2 / 3600, "hour"] : seconds2 < 86400 * 60 ? [seconds2 / 86400, "day"] : [seconds2 / (86400 * 30), "month"];
-  return `${plural(Math.floor(value), unit)} ago`;
-}
-function cloud(paths) {
-  const link = requireLink(paths);
-  const credential = requireCredential(link.host);
-  return { link, client: new CloudClient(link.host, credential.token) };
-}
-function canvasArg(value, usage) {
-  if (!value) throw new CliError(`Usage: ${usage}`);
-  const key = unitArg(value);
-  if (key === SYSTEM_UNIT) throw new CliError(`The design system is not a canvas. Usage: ${usage}`);
-  return key.slice("canvas/".length);
-}
-async function remoteCanvas(client, project, canvas) {
-  const unit = (await client.units(project)).get(canvasUnit(canvas));
-  if (!unit) throw new CliError(`${canvas} is not in the cloud yet: \`design push ${canvas}\` uploads it`);
-  return unit;
-}
-async function runCanvases(paths, options) {
-  const project = new DesignProject(paths, STATIC_URLS);
-  const local = project.canvasIds().map((id2) => project.canvas(id2).doc);
-  const link = readLink(paths);
-  let remote = null;
-  let cloudNote = link ? null : "not linked to foss-design Cloud \u2014 `design link`";
-  if (link) {
-    const credential = getCredential(link.host);
-    if (!credential) cloudNote = `not signed in to ${link.host} \u2014 \`design login\``;
-    else {
-      try {
-        remote = await new CloudClient(link.host, credential.token).units(link.project);
-      } catch (error) {
-        cloudNote = `cloud unavailable: ${error.message}`;
-      }
-    }
-  }
-  const scan = link ? scanLocal(paths) : null;
-  const ids = [
-    .../* @__PURE__ */ new Set([
-      ...local.map((doc) => doc.id),
-      ...[...remote?.keys() ?? []].filter((key) => key.startsWith("canvas/")).map((key) => key.slice(7))
-    ])
-  ].sort();
-  const rows = ids.map((id2) => {
-    const doc = local.find((entry) => entry.id === id2);
-    const unit = remote?.get(canvasUnit(id2));
-    const status = link && remote ? unitStatus(canvasUnit(id2), link, scan?.units.get(canvasUnit(id2))?.manifest, remote) : null;
-    const frames = doc?.pages.flatMap((page) => page.sections.flatMap((section) => section.items)).filter((item) => item.kind === "screen" || item.kind === "url");
-    return {
-      id: id2,
-      title: doc?.title ?? unit?.title ?? id2,
-      local: !!doc,
-      pages: doc?.pages.length ?? null,
-      screens: frames?.length ?? null,
-      errors: doc?.issues.filter((issue) => issue.severity === "error").length ?? 0,
-      cloud: unit ? {
-        rev: unit.headRev,
-        state: status?.state ?? null,
-        archived: unit.archived,
-        url: webUrl(link, canvasUnit(id2)),
-        publicUrl: unit.publicId ? publicUrl(link.host, unit.publicId) : null
-      } : null
-    };
-  });
-  if (options.json) return print(JSON.stringify({ canvases: rows, cloud: cloudNote }, null, 2));
-  if (!rows.length) print(dim("No canvases yet: `design new <canvas>` creates one."));
-  const width = Math.max(0, ...rows.map((row) => row.id.length));
-  for (const row of rows) {
-    const facts = row.local ? [`${plural(row.pages ?? 0, "page")} \xB7 ${plural(row.screens ?? 0, "screen")}`] : [yellow("only in the cloud \u2014 `design pull`")];
-    if (row.errors) facts.push(red(plural(row.errors, "error")));
-    if (row.cloud) {
-      const state = row.cloud.archived ? dim("archived") : row.cloud.state === "in_sync" ? green("in sync") : row.cloud.state ? yellow(row.cloud.state.replaceAll("_", " ")) : "";
-      facts.push([`r${row.cloud.rev}`, state].filter(Boolean).join(" "));
-    } else if (remote && row.local) facts.push(dim("not pushed"));
-    print(`${bold(row.id.padEnd(width))}  ${row.title}  ${dim("\xB7")} ${facts.join(dim(" \xB7 "))}`);
-    if (row.cloud && !row.cloud.archived) print(`${" ".repeat(width)}  ${dim("\u2192")} ${row.cloud.url}`);
-    if (row.cloud?.publicUrl) print(`${" ".repeat(width)}  ${dim("public")} ${cyan(row.cloud.publicUrl)}`);
-  }
-  if (cloudNote) print(dim(cloudNote));
-}
-async function runUrl(paths, value, options) {
-  const canvas = canvasArg(value, "design url <canvas>");
-  const { link, client } = cloud(paths);
-  const unit = await remoteCanvas(client, link.project, canvas);
-  const url = webUrl(link, canvasUnit(canvas));
-  const pub = unit.publicId ? publicUrl(link.host, unit.publicId) : null;
-  if (options.json) return print(JSON.stringify({ canvas, url, publicUrl: pub, archived: unit.archived }, null, 2));
-  print(url);
-  if (pub) print(`${dim("public")} ${pub}`);
-  if (unit.archived) print(dim("archived \u2014 `design unarchive` brings it back"));
-}
-async function runPublish(paths, value, publish) {
-  const verb = publish ? "publish" : "unpublish";
-  const canvas = canvasArg(value, `design ${verb} <canvas>`);
-  const { link, client } = cloud(paths);
-  await remoteCanvas(client, link.project, canvas);
-  const { publicId } = await client.canvasAction(link.project, canvas, verb);
-  if (publish) {
-    const id2 = publicId ?? (await remoteCanvas(client, link.project, canvas)).publicId;
-    print(`${green("\u2713")} Published ${bold(canvas)}: anyone with the link can view it`);
-    if (id2) print(`  ${cyan(publicUrl(link.host, id2))}`);
-  } else print(`${green("\u2713")} ${bold(canvas)} has no public link now; members still open it in the project`);
-}
-async function runArchive(paths, value, archive) {
-  const verb = archive ? "archive" : "unarchive";
-  const canvas = canvasArg(value, `design ${verb} <canvas>`);
-  const { link, client } = cloud(paths);
-  await remoteCanvas(client, link.project, canvas);
-  await client.canvasAction(link.project, canvas, verb);
-  print(
-    archive ? `${green("\u2713")} Archived ${bold(canvas)} in the cloud; its history is kept. \`design unarchive ${canvas}\` brings it back.` : `${green("\u2713")} ${bold(canvas)} is active again ${dim(webUrl(link, canvasUnit(canvas)))}`
-  );
-}
-async function runHistory(paths, value, options) {
-  if (!value) throw new CliError("Usage: design history <canvas|system>");
-  const key = unitArg(value);
-  const { link, client } = cloud(paths);
-  let revisions;
-  try {
-    revisions = await client.revisions(link.project, key);
-  } catch (error) {
-    if (error instanceof CloudError && error.status === 404)
-      throw new CliError(`${key} is not in the cloud yet: \`design push\` uploads it`);
-    throw error;
-  }
-  if (options.json) return print(JSON.stringify({ unit: key, revisions }, null, 2));
-  print(`${bold(key)} ${dim(webUrl(link, key))}`);
-  for (const rev of revisions) {
-    const parts = [
-      rev.head ? green("current") : rev.rollbackAllowed ? "" : dim("built on an older system"),
-      ago(rev.createdAt),
-      rev.author ?? "",
-      rev.screens !== null ? plural(rev.screens, "screen") : "",
-      rev.bytes !== null ? megabytes(rev.bytes) : ""
-    ].filter(Boolean);
-    print(`  ${bold(`r${rev.rev}`.padEnd(5))} ${parts.join(dim(" \xB7 "))}`);
-  }
-  const target = revisions.find((rev) => rev.rollbackAllowed);
-  if (key !== SYSTEM_UNIT && target)
-    print(dim(`\`design rollback ${key.slice(7)} ${target.rev}\` makes a revision current again`));
-  if (key === SYSTEM_UNIT) print(dim("The design system is not rolled back; change it and push."));
-}
-async function runRollback(paths, value, revArg) {
-  const canvas = canvasArg(value, "design rollback <canvas> <rev>");
-  const rev = Number((revArg ?? "").replace(/^r/i, ""));
-  if (!Number.isInteger(rev) || rev < 1)
-    throw new CliError("Usage: design rollback <canvas> <rev>  (see `design history <canvas>`)");
-  const { link, client } = cloud(paths);
-  const head = await client.rollback(link.project, canvasUnit(canvas), rev);
-  print(`${green("\u2713")} ${bold(canvas)}: r${rev} is current again as r${head} in the cloud`);
-  await runPull(paths, [canvas], { theirs: [], json: false });
-}
-var obj = (value) => value && typeof value === "object" && !Array.isArray(value) ? value : {};
-var n = (value) => typeof value === "number" && Number.isFinite(value) ? value : 0;
-async function runMe(paths, options) {
-  const link = paths ? readLink(paths) : null;
-  const host = link?.host ?? cloudHost();
-  const credential = requireCredential(host);
-  const client = new CloudClient(host, credential.token);
-  const [me, usage, activity] = await Promise.all([
-    client.request("GET", "/me").then(obj),
-    client.request("GET", "/me/usage").then(obj),
-    client.request("GET", "/me/activity").then(obj)
-  ]);
-  const plan = obj(usage.plan);
-  const limits = obj(usage.limits);
-  const totals = obj(activity.totals);
-  let linked = null;
-  if (link) {
-    const projects = await client.projects().catch(() => null);
-    const project = projects && [...projects.owned, ...projects.shared].find((p) => p.id === link.project);
-    linked = project ? { id: project.id, name: project.name, role: project.role } : { id: link.project, name: "", role: "" };
-  }
-  const data = {
-    host,
-    email: me.email,
-    name: me.name,
-    memberSince: me.createdAt,
-    plan: { id: plan.id, name: plan.name, expiresAt: plan.expiresAt ?? null },
-    storage: { usedBytes: n(usage.storageBytes), limitBytes: n(limits.storage_bytes) },
-    activeProjects: { used: n(usage.activeProjects), limit: n(limits.active_projects) },
-    canvases: n(totals.canvases),
-    screens: n(totals.screens),
-    pushesLastYear: n(totals.pushesLastYear),
-    pushesPerHour: n(limits.pushes_per_hour),
-    linked
-  };
-  if (options.json) return print(JSON.stringify(data, null, 2));
-  const label = (text2) => dim(text2.padEnd(10));
-  const date = (iso) => typeof iso === "string" ? new Date(iso).toDateString().slice(4) : "";
-  const share = data.storage.limitBytes ? Math.round(data.storage.usedBytes / data.storage.limitBytes * 100) : 0;
-  print(
-    `${bold(String(data.email ?? ""))}${data.name && data.name !== data.email ? ` ${dim(`(${data.name})`)}` : ""} ${dim(host)}`
-  );
-  print(
-    `${label("Plan")}${bold(String(data.plan.name ?? "Free"))} ${dim(data.plan.expiresAt ? `until ${date(data.plan.expiresAt)}` : "no end date")}`
-  );
-  print(
-    `${label("Storage")}${megabytes(data.storage.usedBytes)} of ${megabytes(data.storage.limitBytes)} ${(share >= 90 ? red : share >= 80 ? yellow : dim)(`(${share}%)`)}`
-  );
-  print(`${label("Projects")}${data.activeProjects.used} of ${data.activeProjects.limit} active`);
-  print(
-    `${label("Canvases")}${plural(data.canvases, "canvas", "canvases")} in your projects \xB7 ${plural(data.screens, "screen")}`
-  );
-  print(
-    `${label("Pushes")}${plural(data.pushesLastYear, "push", "pushes")} in the last year ${dim(`\xB7 up to ${data.pushesPerHour} an hour`)}`
-  );
-  if (linked)
-    print(
-      `${label("Linked")}${linked.name || linked.id}${linked.role ? dim(` as ${linked.role}`) : ""} ${dim(webUrl(link))}`
-    );
-  else if (paths) print(`${label("Linked")}${dim("no \u2014 `design link`")}`);
-  print(`${label("Since")}${date(data.memberSince)} ${dim(`\xB7 plans and upgrades: ${host.replace(/\/+$/, "")}/plans`)}`);
-}
-
-// src/capture/chrome.ts
-import fs19 from "fs";
-var CANDIDATES = {
-  darwin: [
-    "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
-    "/Applications/Chromium.app/Contents/MacOS/Chromium",
-    "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
-    "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"
-  ],
-  linux: [
-    "/usr/bin/google-chrome",
-    "/usr/bin/google-chrome-stable",
-    "/usr/bin/chromium",
-    "/usr/bin/chromium-browser",
-    "/snap/bin/chromium",
-    "/usr/bin/microsoft-edge"
-  ],
-  win32: [
-    "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
-    "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
-    "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"
-  ]
-};
-function findChrome() {
-  const configured = process.env.DESIGN_CHROME;
-  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() {
-  const executablePath = findChrome();
-  if (!executablePath) {
-    throw new Error(
-      "No Chrome, Chromium or Edge found. Install one, or point DESIGN_CHROME at a Chromium-based browser binary."
-    );
-  }
-  const { chromium } = await import("playwright-core");
-  return chromium.launch({ executablePath, headless: true, args: ["--hide-scrollbars", "--force-color-profile=srgb"] });
-}
-var OUTDATED_DEP = /Outdated Optimize Dep/;
-async function openFrame(page, url, options = {}) {
-  let errors = [];
-  let outdated = () => {
-  };
-  const record2 = (text2) => {
-    errors.push(text2);
-    if (OUTDATED_DEP.test(text2)) outdated();
-  };
-  page.on("pageerror", (error) => record2(error.message));
-  page.on("console", (message) => {
-    if (message.type() !== "error") return;
-    let text2 = message.text().replace(/^(?:\s*%[osdifcO])+\s*/, "");
-    const where = message.location().url;
-    if (/^Failed to load resource/.test(text2) && where && !text2.includes(where)) text2 += ` (${where})`;
-    record2(text2);
-  });
-  let ready = false;
-  let reloads = 0;
-  const onNavigate = () => {
-    reloads++;
-  };
-  for (let attempt = 0; attempt < 2; attempt++) {
-    errors = [];
-    reloads = 0;
-    ready = options.waitForReady === false;
-    const turnedAway = new Promise((resolve) => {
-      outdated = () => resolve("outdated");
-    });
-    await page.goto(url, { waitUntil: "load", timeout: options.timeoutMs ?? 3e4 });
-    page.on("load", onNavigate);
-    if (!ready) {
-      const signal = page.waitForFunction(() => window.__DESIGN_READY__ === true, null, {
-        timeout: options.timeoutMs ?? 2e4
-      }).then(() => "ready");
-      signal.catch(() => {
-      });
-      ready = await Promise.race([signal, turnedAway]).catch(() => null) === "ready";
-    }
-    if (ready || options.waitForReady === false) await page.waitForTimeout(options.settleMs ?? 700);
-    page.off("load", onNavigate);
-    if (!reloads && !errors.some((error) => OUTDATED_DEP.test(error))) break;
-  }
-  if (reloads) errors.push(`the page reloaded itself ${reloads === 1 ? "once" : `${reloads} times`} while it loaded`);
-  const held = ready ? 0 : await page.evaluate(() => window.__DESIGN_HOLDS__ ?? 0).catch(() => 0);
-  const runtimeErrors = await page.evaluate(() => window.__DESIGN_ERRORS__ ?? []).catch(() => []);
-  for (const error of runtimeErrors) if (!errors.includes(error)) errors.push(error);
-  const overlay = await page.evaluate(() => {
-    const el = document.querySelector("vite-error-overlay");
-    return el?.shadowRoot?.querySelector(".message")?.textContent ?? null;
-  }).catch(() => null);
-  if (overlay) errors.unshift(overlay.trim());
-  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 } : {} };
-}
-
-// src/server/state.ts
-import fs20 from "fs";
-import path19 from "path";
-var stateFile = (paths) => path19.join(paths.cache, "server.json");
-var logFile = (paths) => path19.join(paths.cache, "server.log");
-function readState(paths) {
-  try {
-    return JSON.parse(fs20.readFileSync(stateFile(paths), "utf8"));
-  } catch {
-    return null;
-  }
-}
-function writeState(paths, state) {
-  fs20.mkdirSync(paths.cache, { recursive: true });
-  fs20.writeFileSync(stateFile(paths), `${JSON.stringify(state, null, 2)}
-`);
-}
-function clearState(paths, pid) {
-  const state = readState(paths);
-  if (pid !== void 0 && state && state.pid !== pid) return;
-  fs20.rmSync(stateFile(paths), { force: true });
-}
-function pidAlive(pid) {
-  try {
-    process.kill(pid, 0);
-    return true;
-  } catch (error) {
-    return error.code === "EPERM";
-  }
-}
-async function liveServer(paths) {
-  const state = readState(paths);
-  if (!state || !pidAlive(state.pid)) return null;
-  try {
-    const response = await fetch(`http://127.0.0.1:${state.port}/api/health`, { signal: AbortSignal.timeout(1500) });
-    if (!response.ok) return null;
-    const health = await response.json();
-    return health.root === paths.root ? state : null;
-  } catch {
-    return null;
-  }
-}
-
-// src/cli/commands/preview.ts
-import { spawn } from "child_process";
-import fs24 from "fs";
-
-// src/server/index.ts
-import fs23 from "fs";
-import http from "http";
-import path22 from "path";
-import sirv from "sirv";
-import { createServer, searchForWorkspaceRoot } from "vite";
-
-// src/server/api.ts
-import fs21 from "fs";
-import path20 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));
-}
-function readBody(req, limit = 25 * 1024 * 1024) {
-  return new Promise((resolve, reject) => {
-    const chunks = [];
-    let size2 = 0;
-    req.on("data", (chunk2) => {
-      size2 += chunk2.length;
-      if (size2 > limit) {
-        reject(new Error("body too large"));
-        req.destroy();
-      } else chunks.push(chunk2);
-    });
-    req.on("end", () => resolve(Buffer.concat(chunks)));
-    req.on("error", reject);
-  });
-}
-async function handleApi(ctx, req, res, url) {
-  const { project, events, snapshots } = ctx;
-  const route2 = url.pathname.slice("/api".length);
-  const method = req.method ?? "GET";
-  if (route2 === "/health") {
-    sendJson(res, 200, { ok: true, root: project.paths.root, version: packageVersion(), pid: process.pid });
-    return true;
-  }
-  if (route2 === "/events") {
-    events.attach(req, res);
-    return true;
+  if (route2 === "/events") {
+    events.attach(req, res);
+    return true;
   }
   if (route2 === "/project") {
     sendJson(res, 200, project.info(false));
@@ -3965,17 +4074,17 @@ async function handleApi(ctx, req, res, url) {
   }
   if (route2 === "/source") {
     const rel = url.searchParams.get("path") ?? "";
-    const file = path20.resolve(project.paths.root, rel);
-    if (!rel || !isInside(project.paths.root, file) || !fs21.existsSync(file) || fs21.statSync(file).isDirectory()) {
+    const file = path23.resolve(project.paths.root, rel);
+    if (!rel || !isInside(project.paths.root, file) || !fs25.existsSync(file) || fs25.statSync(file).isDirectory()) {
       sendJson(res, 404, { error: "not found" });
       return true;
     }
-    if (fs21.statSync(file).size > 2 * 1024 * 1024) {
+    if (fs25.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(fs21.readFileSync(file, "utf8"));
+    res.end(fs25.readFileSync(file, "utf8"));
     return true;
   }
   if (route2 === "/icon" && (method === "PUT" || method === "DELETE")) {
@@ -4022,7 +4131,7 @@ async function handleApi(ctx, req, res, url) {
       return true;
     }
     res.writeHead(200, { "content-type": "image/png", "cache-control": "public, max-age=31536000, immutable" });
-    fs21.createReadStream(file).pipe(res);
+    fs25.createReadStream(file).pipe(res);
     return true;
   }
   return false;
@@ -4061,73 +4170,48 @@ var EventHub = class {
   }
 };
 
-// src/server/snapshots.ts
-import fs22 from "fs";
-import path21 from "path";
-var SAFE = /^@?[a-z0-9][a-z0-9_-]*$/i;
-function isSafeSegment(value) {
-  return SAFE.test(value);
-}
-var SnapshotStore = class {
-  constructor(dir, urlBase = "/api/snapshots") {
-    this.dir = dir;
-    this.urlBase = urlBase;
-  }
-  dir;
-  urlBase;
-  meta = /* @__PURE__ */ new Map();
-  metaFile(canvas) {
-    return path21.join(this.dir, canvas, "meta.json");
-  }
-  load(canvas) {
-    const cached = this.meta.get(canvas);
-    if (cached) return cached;
-    let data = {};
-    try {
-      data = JSON.parse(fs22.readFileSync(this.metaFile(canvas), "utf8"));
-    } catch {
-    }
-    this.meta.set(canvas, data);
-    return data;
-  }
-  url(canvas, id2, theme2, version, thumb = false) {
-    const name = `${encodeURIComponent(id2)}.${theme2}${thumb ? ".thumb" : ""}.png`;
-    return `${this.urlBase}/${encodeURIComponent(canvas)}/${name}?v=${version}`;
+// 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");
+function readState(paths) {
+  try {
+    return JSON.parse(fs26.readFileSync(stateFile2(paths), "utf8"));
+  } catch {
+    return null;
   }
-  lookup = (canvas, id2) => {
-    if (!isSafeSegment(canvas) || !isSafeSegment(id2)) return null;
-    const entry = this.load(canvas)[id2];
-    if (!entry) return null;
-    const urls = {};
-    const thumbs = {};
-    for (const theme2 of ["light", "dark"]) {
-      const version = entry[theme2];
-      if (!version) continue;
-      urls[theme2] = this.url(canvas, id2, theme2, version);
-      thumbs[theme2] = this.url(canvas, id2, theme2, version, true);
-    }
-    return { urls, thumbs, height: entry.height };
-  };
-  save(canvas, id2, theme2, png, height) {
-    if (!isSafeSegment(canvas) || !isSafeSegment(id2)) throw new Error("bad snapshot key");
-    const dir = path21.join(this.dir, canvas);
-    fs22.mkdirSync(dir, { recursive: true });
-    fs22.writeFileSync(path21.join(dir, `${id2}.${theme2}.png`), png);
-    const data = this.load(canvas);
-    const version = Date.now();
-    data[id2] = { ...data[id2], [theme2]: version, ...height ? { height } : {} };
-    fs22.writeFileSync(this.metaFile(canvas), JSON.stringify(data));
-    return { url: this.url(canvas, id2, theme2, version) };
+}
+function writeState(paths, state) {
+  fs26.mkdirSync(paths.cache, { recursive: true });
+  fs26.writeFileSync(stateFile2(paths), `${JSON.stringify(state, null, 2)}
+`);
+}
+function clearState(paths, pid) {
+  const state = readState(paths);
+  if (pid !== void 0 && state && state.pid !== pid) return;
+  fs26.rmSync(stateFile2(paths), { force: true });
+}
+function pidAlive(pid) {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (error) {
+    return error.code === "EPERM";
   }
-  /** Absolute path of `<id>.<theme>.png`, or of its thumbnail for `<id>.<theme>.thumb.png` (made on first use); null when missing. */
-  file(canvas, name) {
-    const match = /^(@?[a-z0-9][a-z0-9_-]*)\.(light|dark)(\.thumb)?\.png$/i.exec(name);
-    if (!isSafeSegment(canvas) || !match) return null;
-    const file = path21.join(this.dir, canvas, `${match[1]}.${match[2]}.png`);
-    if (!fs22.existsSync(file)) return null;
-    return match[3] ? ensureThumb(file) : file;
+}
+async function liveServer(paths) {
+  const state = readState(paths);
+  if (!state || !pidAlive(state.pid)) return null;
+  try {
+    const response = await fetch(`http://127.0.0.1:${state.port}/api/health`, { signal: AbortSignal.timeout(1500) });
+    if (!response.ok) return null;
+    const health = await response.json();
+    return health.root === paths.root ? state : null;
+  } catch {
+    return null;
   }
-};
+}
 
 // src/server/index.ts
 var DEFAULT_PORT = 0;
@@ -4163,8 +4247,8 @@ function notFoundPage(res, title, text2) {
 }
 async function startDevServer(options) {
   const paths = designPaths(options.root);
-  if (!fs23.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
-  fs23.mkdirSync(paths.cache, { recursive: true });
+  if (!fs27.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
+  fs27.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);
@@ -4190,8 +4274,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(path22.relative(paths.cache, file));
-          const inCache = rel !== "" && !rel.startsWith("..") && !path22.isAbsolute(rel);
+          const rel = toPosix(path25.relative(paths.cache, file));
+          const inCache = rel !== "" && !rel.startsWith("..") && !path25.isAbsolute(rel);
           return inCache && rel !== "entries" && !rel.startsWith("entries/");
         }
       },
@@ -4200,7 +4284,7 @@ async function startDevServer(options) {
       forwardConsole: false
     },
     optimizeDeps: {
-      entries: entries.files().map((file) => toPosix(path22.relative(paths.design, file)))
+      entries: entries.files().map((file) => toPosix(path25.relative(paths.design, file)))
     }
   });
   const publicDir = project.publicDir();
@@ -4212,16 +4296,16 @@ async function startDevServer(options) {
       return null;
     }
   };
-  const viewer = fs23.existsSync(PKG.viewer) ? sirv(PKG.viewer, { dev: true, etag: true }) : null;
-  const viewerIndex = path22.join(PKG.viewer, "index.html");
+  const viewer = fs27.existsSync(PKG.viewer) ? sirv(PKG.viewer, { dev: true, etag: true }) : null;
+  const viewerIndex = path25.join(PKG.viewer, "index.html");
   const serveViewerIndex = (res) => {
-    const html = fs23.readFileSync(viewerIndex, "utf8").replace(/<head>/i, '<head>\n<base href="/">');
+    const html = fs27.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, path22.join(entries.dir, HTML_BOOT))}`;
+  const bootUrl = `/${relToDesign(paths, path25.join(entries.dir, HTML_BOOT))}`;
   const frameHead = (source, extra = {}) => {
     const canvasTheme = source.canvas === SYSTEM_CANVAS ? void 0 : project.canvas(source.canvas)?.doc.theme;
     return {
@@ -4242,7 +4326,7 @@ async function startDevServer(options) {
       notFoundPage(res, "Screen not found", `No screen "${id2}" in "${canvas}". Check canvas.json.`);
       return;
     }
-    if (!fs23.existsSync(entries.entryFile(source))) entries.sync();
+    if (!fs27.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" });
@@ -4251,8 +4335,8 @@ async function startDevServer(options) {
   };
   const serveHtmlScreen = async (res, url2) => {
     const rel = decodeURIComponent(url2.pathname.slice("/_fs/".length));
-    const file = path22.resolve(paths.design, rel);
-    if (!isInside(paths.design, file) || !fs23.existsSync(file)) {
+    const file = path25.resolve(paths.design, rel);
+    if (!isInside(paths.design, file) || !fs27.existsSync(file)) {
       notFoundPage(res, "Screen not found", `No file .design/${rel}`);
       return;
     }
@@ -4262,13 +4346,13 @@ async function startDevServer(options) {
       key: `${canvas}/${id2}`,
       canvas,
       id: id2,
-      title: path22.basename(file),
+      title: path25.basename(file),
       file,
       format: "html",
       props: {},
       system: true
     };
-    const raw = fs23.readFileSync(file, "utf8");
+    const raw = fs27.readFileSync(file, "utf8");
     const withSystem = source.system && !optsOutOfSystem(raw);
     const html = injectIntoHtml(
       raw,
@@ -4301,7 +4385,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) && fs23.existsSync(path22.join(publicDir, rel))) {
+        if (publicDir && rel !== null && !project.isPublicFile(rel) && fs27.existsSync(path25.join(publicDir, rel))) {
           notFoundPage(res, "Not found", url2.pathname);
           return;
         }
@@ -4313,7 +4397,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 (path22.extname(url2.pathname)) notFoundPage(res, "Not found", url2.pathname);
+          else if (path25.extname(url2.pathname)) notFoundPage(res, "Not found", url2.pathname);
           else serveViewerIndex(res);
         };
         if (url2.pathname === "/" || url2.pathname === "/index.html") serveViewerIndex(res);
@@ -4341,7 +4425,7 @@ async function startDevServer(options) {
   };
   vite.watcher.on("all", (event, file) => {
     if (publicDir && isInside(publicDir, file)) project.invalidatePublic();
-    const rel = toPosix(path22.relative(paths.design, file));
+    const rel = toPosix(path25.relative(paths.design, file));
     if (rel.startsWith("..") || rel.startsWith(".cache/") || rel.startsWith("node_modules/")) return;
     if (rel === "design.json") {
       queue("config", () => {
@@ -4412,76 +4496,401 @@ function printUrls(paths, url) {
   for (const id2 of project.canvasIds()) print(`  ${dim("canvas")} ${url}/c/${id2}`);
   if (project.system()) print(`  ${dim("system")} ${url}/system`);
 }
-async function waitForServer(paths, timeoutMs) {
-  const until = Date.now() + timeoutMs;
-  while (Date.now() < until) {
-    const live2 = await liveServer(paths);
-    if (live2) return live2;
-    await new Promise((resolve) => setTimeout(resolve, 150));
-  }
-  return null;
+async function waitForServer(paths, timeoutMs) {
+  const until = Date.now() + timeoutMs;
+  while (Date.now() < until) {
+    const live2 = await liveServer(paths);
+    if (live2) return live2;
+    await new Promise((resolve) => setTimeout(resolve, 150));
+  }
+  return null;
+}
+async function stopServer(paths) {
+  const state = readState(paths);
+  if (!state) return false;
+  try {
+    process.kill(state.pid, "SIGTERM");
+  } catch {
+    clearState(paths);
+    return false;
+  }
+  const until = Date.now() + 5e3;
+  while (Date.now() < until) {
+    try {
+      process.kill(state.pid, 0);
+    } catch {
+      break;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  clearState(paths);
+  return true;
+}
+async function ensureServer(paths, options) {
+  const live2 = await liveServer(paths);
+  const stale = live2 && live2.version !== packageVersion();
+  if (live2 && !options.restart && !stale) return live2;
+  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 args = [PKG.cli, "preview", "--foreground", "--root", paths.root];
+  if (options.port) args.push("--port", String(options.port));
+  const child = spawn(process.execPath, args, { detached: true, stdio: ["ignore", log, log], cwd: paths.root });
+  child.unref();
+  const state = await waitForServer(paths, 4e4);
+  if (!state) {
+    const tail = fs28.existsSync(logFile(paths)) ? fs28.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
+    throw new CliError(`The preview server did not start.
+${tail.join("\n")}`);
+  }
+  return state;
+}
+async function runPreview(paths, options) {
+  const openPath = typeof options.open === "string" ? options.open : "";
+  if (options.foreground) {
+    const server = await startDevServer({ root: paths.root, port: options.port });
+    printUrls(paths, server.url);
+    if (options.open) openBrowser(`${server.url}${openPath}`);
+    const shutdown = () => {
+      void server.close().finally(() => process.exit(0));
+    };
+    process.on("SIGINT", shutdown);
+    process.on("SIGTERM", shutdown);
+    return;
+  }
+  const state = await ensureServer(paths, options);
+  printUrls(paths, state.url);
+  if (options.open) openBrowser(`${state.url}${openPath}`);
+}
+async function runStop(paths) {
+  print(await stopServer(paths) ? "Stopped the preview server." : "No preview server is running for this project.");
+}
+
+// src/cli/commands/sync.ts
+var GOOD = /* @__PURE__ */ new Set(["pushed", "created", "updated", "deleted"]);
+var BAD = /* @__PURE__ */ new Set(["conflict", "remote_ahead"]);
+var QUIET = /* @__PURE__ */ new Set(["up_to_date", "unchanged"]);
+function revs(entry) {
+  if (entry.action === "created") return entry.rev !== void 0 ? `r${entry.rev}` : "";
+  if (entry.action === "deleted") return "";
+  if (GOOD.has(entry.action))
+    return entry.baseRev && entry.baseRev !== entry.rev ? `r${entry.baseRev} \u2192 r${entry.rev}` : `r${entry.rev}`;
+  if (BAD.has(entry.action) && entry.headRev !== void 0) return `r${entry.baseRev ?? 0} \u2192 r${entry.headRev}`;
+  return "";
+}
+function printReport(report) {
+  const verb = report.command === "push" ? "Pushed to" : "Pulled from";
+  const shown = report.units.filter((entry) => !QUIET.has(entry.action));
+  const quiet = report.units.length - shown.length;
+  const moved = report.units.some((entry) => GOOD.has(entry.action));
+  if (report.ok && !moved) print(`${bold(`Nothing to ${report.command}`)} ${dim(report.url)}`);
+  else if (report.ok) print(`${bold(verb)} ${report.url}`);
+  else print(`${bold(report.command === "push" ? "Push stopped" : "Pull finished with conflicts")} ${dim(report.host)}`);
+  const width = Math.max(0, ...shown.map((entry) => entry.unit.length));
+  for (const entry of shown) {
+    const mark = GOOD.has(entry.action) ? green("\u2713") : BAD.has(entry.action) ? red("\u2717") : yellow("!");
+    const files = entry.files ? dim(
+      [
+        entry.files.added && `+${entry.files.added}`,
+        entry.files.changed && `~${entry.files.changed}`,
+        entry.files.removed && `-${entry.files.removed}`
+      ].filter(Boolean).join(" ")
+    ) : "";
+    const detail2 = [entry.action.replaceAll("_", " "), revs(entry), files].filter(Boolean).join("  ");
+    print(`  ${mark} ${entry.unit.padEnd(width)}  ${detail2}`);
+    if (entry.url && GOOD.has(entry.action)) print(`      ${dim("\u2192")} ${entry.url}`);
+    if (entry.message) print(`      ${dim(entry.message)}`);
+  }
+  if (quiet) print(dim(`  ${plural(quiet, "unit")} ${report.command === "push" ? "unchanged" : "up to date"}`));
+  for (const hint of report.hints) print(dim(hint));
+}
+async function runSync(paths, command, json, run) {
+  let report;
+  try {
+    report = await run(json ? openSync(paths, () => {
+    }) : openSync(paths, (line) => print(dim(line)), progress));
+  } catch (error) {
+    if (!json) throw error;
+    let link = null;
+    try {
+      link = readLink(paths);
+    } catch {
+    }
+    const cloud2 = error instanceof CloudError ? error : null;
+    const failure = {
+      ok: false,
+      command,
+      host: link?.host ?? "",
+      project: link?.project ?? "",
+      url: link ? webUrl(link) : "",
+      units: [],
+      hints: [],
+      error: {
+        code: cloud2?.error ?? (error instanceof CliError ? "error" : "internal"),
+        message: error.message,
+        status: cloud2?.status || void 0,
+        limit: cloud2?.limit
+      }
+    };
+    print(JSON.stringify(failure, null, 2));
+    process.exitCode = error instanceof CliError ? error.code : 1;
+    return;
+  }
+  if (json) {
+    print(JSON.stringify(report, null, 2));
+    if (!report.ok) process.exitCode = 2;
+    return;
+  }
+  printReport(report);
+  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 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 pulled = await pull(ctx, { units: [], theirs: [] });
+    if (!pulled.ok) {
+      pulled.error = {
+        code: pulled.error?.code ?? "conflict",
+        message: `Nothing was pushed: ${pulled.error?.message ?? "the pull did not finish"}`
+      };
+      return pulled;
+    }
+    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(", ")}`
+    );
+    return second;
+  });
+}
+function runPull(paths, units, options) {
+  return runSync(paths, "pull", options.json, (ctx) => pull(ctx, { units, theirs: options.theirs }));
+}
+
+// src/cli/commands/canvases.ts
+var publicUrl = (host, publicId) => `${host.replace(/\/+$/, "")}/s/${publicId}`;
+function ago(iso) {
+  const seconds2 = Math.max(0, (Date.now() - Date.parse(iso)) / 1e3);
+  if (!Number.isFinite(seconds2)) return "";
+  if (seconds2 < 60) return "just now";
+  const [value, unit] = seconds2 < 3600 ? [seconds2 / 60, "minute"] : seconds2 < 86400 ? [seconds2 / 3600, "hour"] : seconds2 < 86400 * 60 ? [seconds2 / 86400, "day"] : [seconds2 / (86400 * 30), "month"];
+  return `${plural(Math.floor(value), unit)} ago`;
+}
+function cloud(paths) {
+  const link = requireLink(paths);
+  const credential = requireCredential(link.host);
+  return { link, client: new CloudClient(link.host, credential.token) };
+}
+function canvasArg(value, usage) {
+  if (!value) throw new CliError(`Usage: ${usage}`);
+  const key = unitArg(value);
+  if (key === SYSTEM_UNIT) throw new CliError(`The design system is not a canvas. Usage: ${usage}`);
+  return key.slice("canvas/".length);
+}
+async function remoteCanvas(client, project, canvas) {
+  const unit = (await client.units(project)).get(canvasUnit(canvas));
+  if (!unit) throw new CliError(`${canvas} is not in the cloud yet: \`design push ${canvas}\` uploads it`);
+  return unit;
+}
+async function runCanvases(paths, options) {
+  const project = new DesignProject(paths, STATIC_URLS);
+  const local = project.canvasIds().map((id2) => project.canvas(id2).doc);
+  const link = readLink(paths);
+  let remote = null;
+  let cloudNote = link ? null : "not linked to foss-design Cloud \u2014 `design link`";
+  if (link) {
+    const credential = getCredential(link.host);
+    if (!credential) cloudNote = `not signed in to ${link.host} \u2014 \`design login\``;
+    else {
+      try {
+        remote = await new CloudClient(link.host, credential.token).units(link.project);
+      } catch (error) {
+        cloudNote = `cloud unavailable: ${error.message}`;
+      }
+    }
+  }
+  const scan = link ? scanLocal(paths) : null;
+  const ids = [
+    .../* @__PURE__ */ new Set([
+      ...local.map((doc) => doc.id),
+      ...[...remote?.keys() ?? []].filter((key) => key.startsWith("canvas/")).map((key) => key.slice(7))
+    ])
+  ].sort();
+  const rows = ids.map((id2) => {
+    const doc = local.find((entry) => entry.id === id2);
+    const unit = remote?.get(canvasUnit(id2));
+    const status = link && remote ? unitStatus(canvasUnit(id2), link, scan?.units.get(canvasUnit(id2))?.manifest, remote) : null;
+    const frames = doc?.pages.flatMap((page) => page.sections.flatMap((section) => section.items)).filter((item) => item.kind === "screen" || item.kind === "url");
+    return {
+      id: id2,
+      title: doc?.title ?? unit?.title ?? id2,
+      local: !!doc,
+      pages: doc?.pages.length ?? null,
+      screens: frames?.length ?? null,
+      errors: doc?.issues.filter((issue) => issue.severity === "error").length ?? 0,
+      cloud: unit ? {
+        rev: unit.headRev,
+        state: status?.state ?? null,
+        archived: unit.archived,
+        url: webUrl(link, canvasUnit(id2)),
+        publicUrl: unit.publicId ? publicUrl(link.host, unit.publicId) : null
+      } : null
+    };
+  });
+  if (options.json) return print(JSON.stringify({ canvases: rows, cloud: cloudNote }, null, 2));
+  if (!rows.length) print(dim("No canvases yet: `design new <canvas>` creates one."));
+  const width = Math.max(0, ...rows.map((row) => row.id.length));
+  for (const row of rows) {
+    const facts = row.local ? [`${plural(row.pages ?? 0, "page")} \xB7 ${plural(row.screens ?? 0, "screen")}`] : [yellow("only in the cloud \u2014 `design pull`")];
+    if (row.errors) facts.push(red(plural(row.errors, "error")));
+    if (row.cloud) {
+      const state = row.cloud.archived ? dim("archived") : row.cloud.state === "in_sync" ? green("in sync") : row.cloud.state ? yellow(row.cloud.state.replaceAll("_", " ")) : "";
+      facts.push([`r${row.cloud.rev}`, state].filter(Boolean).join(" "));
+    } else if (remote && row.local) facts.push(dim("not pushed"));
+    print(`${bold(row.id.padEnd(width))}  ${row.title}  ${dim("\xB7")} ${facts.join(dim(" \xB7 "))}`);
+    if (row.cloud && !row.cloud.archived) print(`${" ".repeat(width)}  ${dim("\u2192")} ${row.cloud.url}`);
+    if (row.cloud?.publicUrl) print(`${" ".repeat(width)}  ${dim("public")} ${cyan(row.cloud.publicUrl)}`);
+  }
+  if (cloudNote) print(dim(cloudNote));
+}
+async function runUrl(paths, value, options) {
+  const canvas = canvasArg(value, "design url <canvas>");
+  const { link, client } = cloud(paths);
+  const unit = await remoteCanvas(client, link.project, canvas);
+  const url = webUrl(link, canvasUnit(canvas));
+  const pub = unit.publicId ? publicUrl(link.host, unit.publicId) : null;
+  if (options.json) return print(JSON.stringify({ canvas, url, publicUrl: pub, archived: unit.archived }, null, 2));
+  print(url);
+  if (pub) print(`${dim("public")} ${pub}`);
+  if (unit.archived) print(dim("archived \u2014 `design unarchive` brings it back"));
+}
+async function runPublish(paths, value, publish) {
+  const verb = publish ? "publish" : "unpublish";
+  const canvas = canvasArg(value, `design ${verb} <canvas>`);
+  const { link, client } = cloud(paths);
+  await remoteCanvas(client, link.project, canvas);
+  const { publicId } = await client.canvasAction(link.project, canvas, verb);
+  if (publish) {
+    const id2 = publicId ?? (await remoteCanvas(client, link.project, canvas)).publicId;
+    print(`${green("\u2713")} Published ${bold(canvas)}: anyone with the link can view it`);
+    if (id2) print(`  ${cyan(publicUrl(link.host, id2))}`);
+  } else print(`${green("\u2713")} ${bold(canvas)} has no public link now; members still open it in the project`);
+}
+async function runArchive(paths, value, archive) {
+  const verb = archive ? "archive" : "unarchive";
+  const canvas = canvasArg(value, `design ${verb} <canvas>`);
+  const { link, client } = cloud(paths);
+  await remoteCanvas(client, link.project, canvas);
+  await client.canvasAction(link.project, canvas, verb);
+  print(
+    archive ? `${green("\u2713")} Archived ${bold(canvas)} in the cloud; its history is kept. \`design unarchive ${canvas}\` brings it back.` : `${green("\u2713")} ${bold(canvas)} is active again ${dim(webUrl(link, canvasUnit(canvas)))}`
+  );
 }
-async function stopServer(paths) {
-  const state = readState(paths);
-  if (!state) return false;
+async function runHistory(paths, value, options) {
+  if (!value) throw new CliError("Usage: design history <canvas|system>");
+  const key = unitArg(value);
+  const { link, client } = cloud(paths);
+  let revisions;
   try {
-    process.kill(state.pid, "SIGTERM");
-  } catch {
-    clearState(paths);
-    return false;
+    revisions = await client.revisions(link.project, key);
+  } catch (error) {
+    if (error instanceof CloudError && error.status === 404)
+      throw new CliError(`${key} is not in the cloud yet: \`design push\` uploads it`);
+    throw error;
   }
-  const until = Date.now() + 5e3;
-  while (Date.now() < until) {
-    try {
-      process.kill(state.pid, 0);
-    } catch {
-      break;
-    }
-    await new Promise((resolve) => setTimeout(resolve, 100));
+  if (options.json) return print(JSON.stringify({ unit: key, revisions }, null, 2));
+  print(`${bold(key)} ${dim(webUrl(link, key))}`);
+  for (const rev of revisions) {
+    const parts = [
+      rev.head ? green("current") : rev.rollbackAllowed ? "" : dim("built on an older system"),
+      ago(rev.createdAt),
+      rev.author ?? "",
+      rev.screens !== null ? plural(rev.screens, "screen") : "",
+      rev.bytes !== null ? megabytes(rev.bytes) : ""
+    ].filter(Boolean);
+    print(`  ${bold(`r${rev.rev}`.padEnd(5))} ${parts.join(dim(" \xB7 "))}`);
   }
-  clearState(paths);
-  return true;
+  const target = revisions.find((rev) => rev.rollbackAllowed);
+  if (key !== SYSTEM_UNIT && target)
+    print(dim(`\`design rollback ${key.slice(7)} ${target.rev}\` makes a revision current again`));
+  if (key === SYSTEM_UNIT) print(dim("The design system is not rolled back; change it and push."));
 }
-async function ensureServer(paths, options) {
-  const live2 = await liveServer(paths);
-  const stale = live2 && live2.version !== packageVersion();
-  if (live2 && !options.restart && !stale) return live2;
-  if (stale)
-    print(dim(`Restarting the preview server: it runs foss-design ${live2.version}, this is ${packageVersion()}.`));
-  if (live2) await stopServer(paths);
-  fs24.mkdirSync(paths.cache, { recursive: true });
-  const log = fs24.openSync(logFile(paths), "w");
-  const args = [PKG.cli, "preview", "--foreground", "--root", paths.root];
-  if (options.port) args.push("--port", String(options.port));
-  const child = spawn(process.execPath, args, { detached: true, stdio: ["ignore", log, log], cwd: paths.root });
-  child.unref();
-  const state = await waitForServer(paths, 4e4);
-  if (!state) {
-    const tail = fs24.existsSync(logFile(paths)) ? fs24.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
-    throw new CliError(`The preview server did not start.
-${tail.join("\n")}`);
-  }
-  return state;
+async function runRollback(paths, value, revArg) {
+  const canvas = canvasArg(value, "design rollback <canvas> <rev>");
+  const rev = Number((revArg ?? "").replace(/^r/i, ""));
+  if (!Number.isInteger(rev) || rev < 1)
+    throw new CliError("Usage: design rollback <canvas> <rev>  (see `design history <canvas>`)");
+  const { link, client } = cloud(paths);
+  const head = await client.rollback(link.project, canvasUnit(canvas), rev);
+  print(`${green("\u2713")} ${bold(canvas)}: r${rev} is current again as r${head} in the cloud`);
+  await runPull(paths, [canvas], { theirs: [], json: false });
 }
-async function runPreview(paths, options) {
-  const openPath = typeof options.open === "string" ? options.open : "";
-  if (options.foreground) {
-    const server = await startDevServer({ root: paths.root, port: options.port });
-    printUrls(paths, server.url);
-    if (options.open) openBrowser(`${server.url}${openPath}`);
-    const shutdown = () => {
-      void server.close().finally(() => process.exit(0));
-    };
-    process.on("SIGINT", shutdown);
-    process.on("SIGTERM", shutdown);
-    return;
+var obj = (value) => value && typeof value === "object" && !Array.isArray(value) ? value : {};
+var n = (value) => typeof value === "number" && Number.isFinite(value) ? value : 0;
+async function runMe(paths, options) {
+  const link = paths ? readLink(paths) : null;
+  const host = link?.host ?? cloudHost();
+  const credential = requireCredential(host);
+  const client = new CloudClient(host, credential.token);
+  const [me, usage, activity] = await Promise.all([
+    client.request("GET", "/me").then(obj),
+    client.request("GET", "/me/usage").then(obj),
+    client.request("GET", "/me/activity").then(obj)
+  ]);
+  const plan = obj(usage.plan);
+  const limits = obj(usage.limits);
+  const totals = obj(activity.totals);
+  let linked = null;
+  if (link) {
+    const projects = await client.projects().catch(() => null);
+    const project = projects && [...projects.owned, ...projects.shared].find((p) => p.id === link.project);
+    linked = project ? { id: project.id, name: project.name, role: project.role } : { id: link.project, name: "", role: "" };
   }
-  const state = await ensureServer(paths, options);
-  printUrls(paths, state.url);
-  if (options.open) openBrowser(`${state.url}${openPath}`);
-}
-async function runStop(paths) {
-  print(await stopServer(paths) ? "Stopped the preview server." : "No preview server is running for this project.");
+  const data = {
+    host,
+    email: me.email,
+    name: me.name,
+    memberSince: me.createdAt,
+    plan: { id: plan.id, name: plan.name, expiresAt: plan.expiresAt ?? null },
+    storage: { usedBytes: n(usage.storageBytes), limitBytes: n(limits.storage_bytes) },
+    activeProjects: { used: n(usage.activeProjects), limit: n(limits.active_projects) },
+    canvases: n(totals.canvases),
+    screens: n(totals.screens),
+    pushesLastYear: n(totals.pushesLastYear),
+    pushesPerHour: n(limits.pushes_per_hour),
+    linked
+  };
+  if (options.json) return print(JSON.stringify(data, null, 2));
+  const label = (text2) => dim(text2.padEnd(10));
+  const date = (iso) => typeof iso === "string" ? new Date(iso).toDateString().slice(4) : "";
+  const share = data.storage.limitBytes ? Math.round(data.storage.usedBytes / data.storage.limitBytes * 100) : 0;
+  print(
+    `${bold(String(data.email ?? ""))}${data.name && data.name !== data.email ? ` ${dim(`(${data.name})`)}` : ""} ${dim(host)}`
+  );
+  print(
+    `${label("Plan")}${bold(String(data.plan.name ?? "Free"))} ${dim(data.plan.expiresAt ? `until ${date(data.plan.expiresAt)}` : "no end date")}`
+  );
+  print(
+    `${label("Storage")}${megabytes(data.storage.usedBytes)} of ${megabytes(data.storage.limitBytes)} ${(share >= 90 ? red : share >= 80 ? yellow : dim)(`(${share}%)`)}`
+  );
+  print(`${label("Projects")}${data.activeProjects.used} of ${data.activeProjects.limit} active`);
+  print(
+    `${label("Canvases")}${plural(data.canvases, "canvas", "canvases")} in your projects \xB7 ${plural(data.screens, "screen")}`
+  );
+  print(
+    `${label("Pushes")}${plural(data.pushesLastYear, "push", "pushes")} in the last year ${dim(`\xB7 up to ${data.pushesPerHour} an hour`)}`
+  );
+  if (linked)
+    print(
+      `${label("Linked")}${linked.name || linked.id}${linked.role ? dim(` as ${linked.role}`) : ""} ${dim(webUrl(link))}`
+    );
+  else if (paths) print(`${label("Linked")}${dim("no \u2014 `design link`")}`);
+  print(`${label("Since")}${date(data.memberSince)} ${dim(`\xB7 plans and upgrades: ${host.replace(/\/+$/, "")}/plans`)}`);
 }
 
 // src/cli/commands/check.ts
@@ -4636,9 +5045,9 @@ function printLinkIssues(issues, project) {
 }
 
 // src/cli/commands/cloud.ts
-import fs25 from "fs";
+import fs29 from "fs";
 import os3 from "os";
-import path23 from "path";
+import path26 from "path";
 var sleep2 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 async function runLogin() {
   const host = cloudHost();
@@ -4739,12 +5148,14 @@ 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: {} });
-    fs25.rmSync(path23.join(cloudCache(paths), "incoming"), { recursive: true, force: true });
+    fs29.rmSync(path26.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}`);
   }
   if (project.archived) print(yellow("The project is archived: unarchive it in the web app before pushing or pulling."));
   const link = readLink(paths);
+  for (const line of await syncProjectMeta(paths, client, link)) print(dim(line));
+  writeLink(paths, link);
   const remote = project.archived ? null : await client.units(project.id);
   const scan = scanLocal(paths);
   const states = allUnitKeys(link, scan.units, remote).map(
@@ -4764,40 +5175,63 @@ async function runLink(paths, wanted, options) {
 }
 
 // src/cli/commands/icon.ts
-import fs26 from "fs";
-import path24 from "path";
-function runIcon(paths, file, options) {
+import fs30 from "fs";
+import path27 from "path";
+async function toCloud(paths, file) {
+  const link = readLink(paths);
+  if (!link) return;
+  const credential = getCredential(link.host);
+  if (!credential) {
+    print(yellow("Not signed in: the icon goes to the cloud on the next `design push` after `design login`."));
+    return;
+  }
+  const client = new CloudClient(link.host, credential.token);
+  try {
+    const ext = file ? path27.extname(file).slice(1) : null;
+    await client.setProjectIcon(
+      link.project,
+      file && ext ? { data: fs30.readFileSync(file), type: ICON_TYPES[ext] } : null
+    );
+    link.icon = file ? iconHash(file) : null;
+    writeLink(paths, link);
+    print(dim(`The cloud project has it too.`));
+  } catch (error) {
+    print(yellow(`Set here only: ${error.message}`));
+  }
+}
+async function runIcon(paths, file, options) {
   if (options.remove) {
     const had = iconFile(paths);
     writeIcon(paths, null);
-    print(had ? `${green("Removed")} ${path24.relative(process.cwd(), had)}` : "The project has no icon.");
+    print(had ? `${green("Removed")} ${path27.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(`${path24.relative(process.cwd(), current)} ${dim(`${Math.ceil(fs26.statSync(current).size / 1024)} KB`)}`);
+    return print(`${path27.relative(process.cwd(), current)} ${dim(`${Math.ceil(fs30.statSync(current).size / 1024)} KB`)}`);
   }
   let data;
   try {
-    data = fs26.readFileSync(file);
+    data = fs30.readFileSync(file);
   } catch {
     throw new CliError(`No file ${file}`);
   }
-  const problem = iconProblem(data, path24.extname(file).slice(1).toLowerCase() || void 0);
+  const problem = iconProblem(data, path27.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: ${path24.relative(process.cwd(), written)}`);
-  print(dim("It syncs with the design system unit: `design push` takes it to the cloud."));
+  print(`${green("Set")} the project icon: ${path27.relative(process.cwd(), written)}`);
+  await toCloud(paths, written);
 }
 
 // src/cli/commands/import.ts
-import fs28 from "fs";
-import path26 from "path";
+import fs32 from "fs";
+import path29 from "path";
 
 // src/import/claude-design.ts
-import fs27 from "fs";
-import path25 from "path";
+import fs31 from "fs";
+import path28 from "path";
 
 // src/import/markup.ts
 var VOID = /* @__PURE__ */ new Set([
@@ -5405,11 +5839,11 @@ function boardId(file, used) {
   return id2;
 }
 function importClaudeDesign(dir, options = {}) {
-  const canvasFile = path25.join(dir, "canvas.json");
-  if (!fs27.existsSync(canvasFile))
+  const canvasFile = path28.join(dir, "canvas.json");
+  if (!fs31.existsSync(canvasFile))
     throw new Error(`No canvas.json in ${dir}: point at the exported Claude Design project folder`);
-  const source = JSON.parse(fs27.readFileSync(canvasFile, "utf8"));
-  const templates = fs27.readdirSync(dir).filter((file) => file.endsWith(EXT));
+  const source = JSON.parse(fs31.readFileSync(canvasFile, "utf8"));
+  const templates = fs31.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();
@@ -5436,7 +5870,7 @@ function importClaudeDesign(dir, options = {}) {
     try {
       files.set(
         `${name}.jsx`,
-        convertFile(name, fs27.readFileSync(path25.join(dir, file), "utf8"), { known, routes, warn: warn2 })
+        convertFile(name, fs31.readFileSync(path28.join(dir, file), "utf8"), { known, routes, warn: warn2 })
       );
     } catch (error) {
       warn2(`could not be converted: ${error.message}`);
@@ -5484,7 +5918,7 @@ function importClaudeDesign(dir, options = {}) {
     screens++;
   }
   const canvas = {
-    title: options.title ?? source.title ?? path25.basename(path25.resolve(dir)),
+    title: options.title ?? source.title ?? path28.basename(path28.resolve(dir)),
     description: "Imported from Claude Design.",
     // The templates bring their own styles; the design system's reset would restyle them.
     system: false,
@@ -5496,21 +5930,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 = path26.resolve(from);
-  if (!fs28.existsSync(dir) || !fs28.statSync(dir).isDirectory()) throw new CliError(`No folder ${from}`);
+  const dir = path29.resolve(from);
+  if (!fs32.existsSync(dir) || !fs32.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(path26.basename(dir)) || "imported");
+  const id2 = options.canvas ?? (slug(String(result.canvas.title)) || slug(path29.basename(dir)) || "imported");
   if (!ID_PATTERN.test(id2)) throw new CliError(`"${id2}" is no canvas id; pass one with --canvas <id>`);
-  const out = path26.join(paths.canvases, id2);
-  if (fs28.existsSync(out)) throw new CliError(`.design/canvas/${id2} exists; pick another id with --canvas <id>`);
-  fs28.mkdirSync(path26.join(out, "screens"), { recursive: true });
-  for (const [name, content] of result.files) fs28.writeFileSync(path26.join(out, "screens", name), content);
-  fs28.writeFileSync(path26.join(out, "canvas.json"), `${JSON.stringify(result.canvas, null, 2)}
+  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)}
 `);
   print(`${green("Imported")} ${bold(String(result.canvas.title))} \u2192 .design/canvas/${id2}`);
   print(
@@ -5528,9 +5962,166 @@ function runImport(paths, from, options) {
   print(`Next: \`design check ${id2} --render\`, then \`design preview --open /c/${id2}\`.`);
 }
 
+// src/cli/commands/merge.ts
+import { spawnSync as spawnSync2 } from "child_process";
+import path30 from "path";
+import { createInterface } from "readline/promises";
+var KIND = {
+  text: "both sides changed lines, the markers show them",
+  binary: "both sides changed it; yours is in place",
+  deleted_here: "deleted here, changed in the cloud; the cloud version is in place",
+  deleted_in_cloud: "deleted in the cloud, changed here; yours is in place"
+};
+function matchTargets(paths, states, targets) {
+  const picked = [];
+  for (const target of targets) {
+    const unit = states.find((state) => state.unit === unitArg(target));
+    if (unit) {
+      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 found = states.flatMap(
+      (state) => state.conflicts.filter((item) => rel.includes(item.path)).map((conflict) => ({ state, conflict }))
+    );
+    if (!found.length) throw new CliError(`No open conflict in ${target}. \`design merge\` lists them.`);
+    picked.push(...found);
+  }
+  return picked;
+}
+function printOpen(paths, states) {
+  for (const state of states) {
+    const open2 = openConflicts(paths, state);
+    if (!open2.length) continue;
+    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 ");
+      print(`      ${dim(sides)}`);
+    }
+  }
+}
+async function runMerge(paths, targets, options) {
+  if (options.here && options.cloud) throw new CliError("Pick one side: --here or --cloud");
+  const link = requireLink(paths);
+  const states = mergingUnits(paths);
+  const close = (accept, only) => {
+    const closed = [];
+    for (const state of states) {
+      if (only && !only.includes(state.unit)) continue;
+      if (!finishMerge(paths, link, state.unit, accept).length) closed.push(state.unit);
+    }
+    writeLink(paths, link);
+    for (const unit of closed) print(`${green("\u2713")} ${unit} ${dim("merged; `design push` takes it up")}`);
+    return closed;
+  };
+  if (options.here || options.cloud) {
+    const side = options.here ? "here" : "cloud";
+    const picked = targets.length ? matchTargets(paths, states, targets) : states.flatMap((state) => openConflicts(paths, state).map((conflict) => ({ state, conflict })));
+    for (const { state, conflict } of picked) {
+      resolveConflict(paths, state, conflict.path, side);
+      print(`${green("\u2713")} ${conflict.path} ${dim(`(${side === "here" ? "yours" : "the cloud's"})`)}`);
+    }
+    close(false);
+    return;
+  }
+  if (options.done) {
+    const only = targets.length ? targets.map(unitArg) : void 0;
+    close(true, only);
+    const left2 = states.filter(
+      (state) => (!only || only.includes(state.unit)) && openConflicts(paths, state).some((c) => c.kind === "text")
+    );
+    if (left2.length) {
+      printOpen(paths, left2);
+      throw new CliError(
+        "Conflict markers are left in the files above; edit them out, or settle with --here or --cloud."
+      );
+    }
+    return;
+  }
+  const open2 = states.filter((state) => openConflicts(paths, state).length);
+  if (options.json) {
+    print(
+      JSON.stringify({ units: open2.map((state) => ({ ...state, conflicts: openConflicts(paths, state) })) }, null, 2)
+    );
+    if (open2.length) process.exitCode = 2;
+    return;
+  }
+  if (!open2.length) {
+    close(false);
+    if (!states.length) print("Nothing to merge.");
+    return;
+  }
+  if (!process.stdin.isTTY || !process.stdout.isTTY) {
+    printOpen(paths, open2);
+    print(
+      dim(
+        "Settle with `design merge <file|unit> --here` or `--cloud`, or edit the markers out; then `design merge --done`."
+      )
+    );
+    process.exitCode = 2;
+    return;
+  }
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  try {
+    for (const state of open2) {
+      for (const conflict of openConflicts(paths, state)) {
+        print(`${bold(state.unit)} ${conflict.path} ${dim(`\u2014 ${KIND[conflict.kind]}`)}`);
+        for (; ; ) {
+          const edit = conflict.kind === "text" ? ", [e]dit" : "";
+          const answer = (await rl.question(`  keep [h]ere, take [c]loud${edit}, [s]kip? `)).trim().toLowerCase();
+          if (answer === "h" || answer === "c") {
+            resolveConflict(paths, state, conflict.path, answer === "h" ? "here" : "cloud");
+            break;
+          }
+          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 });
+            if (!openConflicts(paths, state).some((item) => item.path === conflict.path)) break;
+            print(yellow("  Conflict markers are still there."));
+          }
+        }
+      }
+    }
+  } finally {
+    rl.close();
+  }
+  close(false);
+  const left = mergingUnits(paths).filter((state) => openConflicts(paths, state).length);
+  if (left.length) {
+    printOpen(paths, left);
+    process.exitCode = 2;
+  }
+}
+
+// src/cli/commands/rename.ts
+import fs33 from "fs";
+async function runRename(paths, name) {
+  const trimmed = name.trim();
+  if (!trimmed) throw new CliError("Usage: design rename <name>");
+  const link = readLink(paths);
+  if (link) {
+    const client = new CloudClient(link.host, requireCredential(link.host).token);
+    const project = await client.renameProject(link.project, trimmed);
+    link.name = project.name;
+    writeLink(paths, link);
+    print(`${green("Renamed")} the cloud project to ${project.name}`);
+    return;
+  }
+  let config = {};
+  try {
+    config = JSON.parse(fs33.readFileSync(paths.config, "utf8"));
+  } catch {
+  }
+  fs33.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 fs29 from "fs";
-import path27 from "path";
+import fs34 from "fs";
+import path31 from "path";
 
 // src/cli/templates.ts
 var TOKENS_CSS = `/*
@@ -5741,40 +6332,40 @@ function mainScreen(canvasId) {
 
 // src/cli/commands/scaffold.ts
 function write(file, content, root) {
-  if (fs29.existsSync(file)) {
-    print(`  ${dim("exists ")} ${path27.relative(root, file)}`);
+  if (fs34.existsSync(file)) {
+    print(`  ${dim("exists ")} ${path31.relative(root, file)}`);
     return false;
   }
-  fs29.mkdirSync(path27.dirname(file), { recursive: true });
-  fs29.writeFileSync(file, content);
-  print(`  ${green("created")} ${path27.relative(root, file)}`);
+  fs34.mkdirSync(path31.dirname(file), { recursive: true });
+  fs34.writeFileSync(file, content);
+  print(`  ${green("created")} ${path31.relative(root, file)}`);
   return true;
 }
 function ensureGitignored(root) {
-  const file = path27.join(root, ".gitignore");
-  const current = fs29.existsSync(file) ? fs29.readFileSync(file, "utf8") : "";
+  const file = path31.join(root, ".gitignore");
+  const current = fs34.existsSync(file) ? fs34.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" : "";
-  fs29.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
+  fs34.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
 .design/
 `);
   return "added";
 }
 function projectName(root) {
   try {
-    const manifest = JSON.parse(fs29.readFileSync(path27.join(root, "package.json"), "utf8"));
+    const manifest = JSON.parse(fs34.readFileSync(path31.join(root, "package.json"), "utf8"));
     if (typeof manifest.name === "string" && manifest.name) return manifest.name;
   } catch {
   }
-  return path27.basename(root);
+  return path31.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);
-  fs29.mkdirSync(paths.canvases, { recursive: true });
+  fs34.mkdirSync(paths.canvases, { recursive: true });
   if (options.gitignore) {
     const result = ensureGitignored(root);
     print(`  ${result === "added" ? green("ignored") : dim("ignored")} .design/ in .gitignore`);
@@ -5788,44 +6379,44 @@ function runSystemInit(root, options) {
   const paths = designPaths(root);
   let base = projectName(root);
   try {
-    base = JSON.parse(fs29.readFileSync(paths.config, "utf8")).name || base;
+    base = JSON.parse(fs34.readFileSync(paths.config, "utf8")).name || base;
   } catch {
   }
   const name = options.name ?? `${base} design system`;
-  print(`Scaffolding the design system in ${path27.relative(root, paths.system)}`);
-  write(path27.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
+  print(`Scaffolding the design system in ${path31.relative(root, paths.system)}`);
+  write(path31.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
 `, root);
-  write(path27.join(paths.system, "tokens.css"), TOKENS_CSS, root);
+  write(path31.join(paths.system, "tokens.css"), TOKENS_CSS, root);
   if (!options.empty) {
-    write(path27.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
-    write(path27.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
-    write(path27.join(paths.system, "specimens", "button.tsx"), BUTTON_SPECIMEN_TSX, root);
+    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);
   }
 }
 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 = path27.join(paths.canvases, id2);
-  if (fs29.existsSync(path27.join(dir, "canvas.json"))) throw new CliError(`Canvas "${id2}" already exists in ${dir}`);
+  const dir = path31.join(paths.canvases, id2);
+  if (fs34.existsSync(path31.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(
-      path27.join(dir, "canvas.json"),
+      path31.join(dir, "canvas.json"),
       `${JSON.stringify({ title, pages: [{ id: "main", title: "Main", sections: [] }] }, null, 2)}
 `,
       root
     );
-    fs29.mkdirSync(path27.join(dir, "screens"), { recursive: true });
+    fs34.mkdirSync(path31.join(dir, "screens"), { recursive: true });
   } else {
-    write(path27.join(dir, "canvas.json"), canvasJson(title), root);
-    write(path27.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
+    write(path31.join(dir, "canvas.json"), canvasJson(title), root);
+    write(path31.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
   }
 }
 
 // src/cli/commands/shot.ts
-import fs30 from "fs";
-import path28 from "path";
+import fs35 from "fs";
+import path32 from "path";
 var OVERVIEW_TIMEOUT = 9e4;
 async function runShot(paths, target, options) {
   const [canvasId = "", screenId] = target.split("/");
@@ -5841,15 +6432,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 = path28.resolve(options.out ?? paths.shots);
-  const outDir = path28.join(outBase, canvasId);
-  fs30.mkdirSync(outDir, { recursive: true });
+  const outBase = path32.resolve(options.out ?? paths.shots);
+  const outDir = path32.join(outBase, canvasId);
+  fs35.mkdirSync(outDir, { recursive: true });
   const base = await serverBase(paths);
   const browser = await launchChrome();
   let failed = false;
   try {
     if (options.overview) {
-      if (!fs30.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there is no canvas to shoot.");
+      if (!fs35.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 } });
@@ -5865,7 +6456,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 = path28.join(outDir, `${pageId}.overview.png`);
+        const file = path32.join(outDir, `${pageId}.overview.png`);
         await page.screenshot({ path: file });
         await page.close();
         print(file);
@@ -5894,7 +6485,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 = path28.join(outDir, `${job.id}.${job.theme}.png`);
+    const file = path32.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 });
@@ -5926,8 +6517,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 = path28.join(path28.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
-  fs30.mkdirSync(outDir, { recursive: true });
+  const outDir = path32.join(path32.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
+  fs35.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();
@@ -5939,7 +6530,7 @@ async function shootSystem(paths, project, id2, options) {
 }
 
 // src/cli/commands/cloud-status.ts
-import path29 from "path";
+import path33 from "path";
 var STATE_TEXT = {
   in_sync: green,
   local_changes: yellow,
@@ -5962,7 +6553,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 ${path29.relative(paths.root, incomingDir(paths, status.key))}`);
+  if (status.conflictRev !== void 0) parts.push(`merge ${path33.relative(paths.root, incomingDir(paths, status.key))}`);
   return parts.join(" \xB7 ");
 }
 async function printCloudStatus(paths, label) {
@@ -6078,8 +6669,10 @@ ${bold("Project")}
   system init [--name <name>] [--empty]      Scaffold .design/system: tokens, a guideline, a component
   new <canvas> [--title <title>] [--empty]   Scaffold .design/canvas/<canvas>
   icon [<file>] [--remove]                   Show, set or remove the project icon: an SVG, PNG or WebP of
-                                             at most 256 KB, kept as .design/system/icon.* and pushed
-                                             with the design system
+                                             at most 256 KB in .design/icon.*; a linked project's icon is
+                                             the cloud project's, set there at once
+  rename <name>                              Rename the project: the cloud project when linked (owner),
+                                             otherwise the name in design.json
   import <folder> [--canvas <id>]            Turn an exported Claude Design project (canvas.json and
          [--title <title>]                   *.dc.html) into a canvas of React screens, once
   canvases [--json]                          Every canvas: pages and screens; with a cloud link also its
@@ -6115,13 +6708,19 @@ ${bold("Cloud")}  ${dim("units: system (design.json + system/) and canvas/<id>;
   link [<project>] [--new <name>]            No args: list your projects. Link .design to a cloud project
                                              (linking to another project replaces the link)
   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. Stops if
-                                             the cloud is ahead; --resolved marks a merged conflict.
+       [--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.
                                              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
-       [--theirs <unit>]                     goes to .design/.cache/cloud/incoming/<unit> (exit 2);
-                                             --theirs takes the cloud version and drops local changes
+       [--theirs <unit>]                     is merged three ways (files changed on one side take it,
+                                             text changed on both merges line by line); what does not
+                                             merge waits for design merge. --theirs takes the cloud
+                                             version and drops local changes
+  merge [<unit|file>\u2026] [--here|--cloud]      Conflicts a merge left: lists them (in a terminal, walks
+        [--done] [--json]                    through them); --here / --cloud settles files or units;
+                                             --done closes a merge once no markers are left
   url <canvas> [--json]                      The canvas in the web app, and its public link if published
   history <canvas|system> [--json]           Stored revisions, newest first: when, who, screens, size
   rollback <canvas> <rev>                    Make an old revision current again in the cloud (a new
@@ -6141,7 +6740,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 ? path30.resolve(rootOption) : findProjectRoot();
+  const found = rootOption ? path34.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.");
@@ -6160,6 +6759,9 @@ async function main(argv) {
       title: { type: "string" },
       canvas: { type: "string" },
       remove: { type: "boolean" },
+      here: { type: "boolean" },
+      cloud: { type: "boolean" },
+      done: { type: "boolean" },
       "no-gitignore": { type: "boolean" },
       empty: { type: "boolean" },
       open: { type: "boolean" },
@@ -6189,7 +6791,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 ? path30.resolve(values.root) : process.cwd(), {
+      return runInit(values.root ? path34.resolve(values.root) : process.cwd(), {
         name: values.name,
         gitignore: !values["no-gitignore"]
       });
@@ -6203,6 +6805,16 @@ async function main(argv) {
     }
     case "icon":
       return runIcon(projectPaths(values.root), rest[0], { remove: !!values.remove });
+    case "rename":
+      if (!rest.length) throw new CliError("Usage: design rename <name>");
+      return runRename(projectPaths(values.root), rest.join(" "));
+    case "merge":
+      return runMerge(projectPaths(values.root), rest, {
+        here: !!values.here,
+        cloud: !!values.cloud,
+        done: !!values.done,
+        json: !!values.json
+      });
     case "import": {
       if (!rest[0]) throw new CliError("Usage: design import <folder> [--canvas <id>] [--title <title>]");
       return runImport(projectPaths(values.root), rest[0], { canvas: values.canvas, title: values.title });