foss-design 0.1.0 → 0.3.0

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 // src/cli/index.ts
-import path18 from "path";
+import path25 from "path";
 import { parseArgs } from "util";
 
 // src/core/paths.ts
@@ -14,8 +14,8 @@ import { fileURLToPath } from "url";
 import path from "path";
 function titleize(stem) {
   const words = stem.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[-_.]+/g, " ").trim().split(/\s+/);
-  const text = words.join(" ").toLowerCase();
-  return text.charAt(0).toUpperCase() + text.slice(1);
+  const text2 = words.join(" ").toLowerCase();
+  return text2.charAt(0).toUpperCase() + text2.slice(1);
 }
 function slugify(stem) {
   return stem.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "").toLowerCase() || "item";
@@ -64,8 +64,8 @@ function firstHeading(markdown) {
   const match = /^#\s+(.+)$/m.exec(markdown);
   return match ? match[1].trim() : null;
 }
-function escapeHtml(text) {
-  return text.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
+function escapeHtml(text2) {
+  return text2.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
 }
 function scriptJson(value) {
   return JSON.stringify(value).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
@@ -134,21 +134,185 @@ function resolveFrom(anchor, request) {
 
 // src/cli/commands/build.ts
 import { spawnSync } from "child_process";
-import fs9 from "fs";
+import fs10 from "fs";
 import path11 from "path";
 
 // src/build/static.ts
-import fs8 from "fs";
+import fs9 from "fs";
 import path10 from "path";
 import { build } from "vite";
 
+// src/core/png.ts
+import fs2 from "fs";
+import zlib from "zlib";
+var SIGNATURE = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+var THUMB_WIDTH = 320;
+function decode(png) {
+  if (!png.subarray(0, 8).equals(SIGNATURE)) return null;
+  let width = 0;
+  let height = 0;
+  let channels = 0;
+  const idat = [];
+  for (let pos = 8; pos + 8 <= png.length; ) {
+    const length = png.readUInt32BE(pos);
+    const type = png.toString("ascii", pos + 4, pos + 8);
+    const body = png.subarray(pos + 8, pos + 8 + length);
+    pos += 12 + length;
+    if (type === "IHDR") {
+      width = body.readUInt32BE(0);
+      height = body.readUInt32BE(4);
+      const [depth, color2, , , interlace] = [body[8], body[9], body[10], body[11], body[12]];
+      if (depth !== 8 || interlace !== 0 || color2 !== 2 && color2 !== 6) return null;
+      channels = color2 === 6 ? 4 : 3;
+    } else if (type === "IDAT") idat.push(body);
+    else if (type === "IEND") break;
+  }
+  if (!width || !height || !channels) return null;
+  const raw = zlib.inflateSync(Buffer.concat(idat));
+  const stride = width * channels;
+  const data = new Uint8Array(width * height * 4);
+  let prev = new Uint8Array(stride);
+  let line = new Uint8Array(stride);
+  for (let y = 0, at = 0; y < height; y++) {
+    const filter = raw[at++];
+    for (let x = 0; x < stride; x++, at++) {
+      const left = x >= channels ? line[x - channels] : 0;
+      const up = prev[x];
+      const corner = x >= channels ? prev[x - channels] : 0;
+      let value = raw[at];
+      if (filter === 1) value += left;
+      else if (filter === 2) value += up;
+      else if (filter === 3) value += left + up >> 1;
+      else if (filter === 4) {
+        const p = left + up - corner;
+        const pa = Math.abs(p - left);
+        const pb = Math.abs(p - up);
+        const pc = Math.abs(p - corner);
+        value += pa <= pb && pa <= pc ? left : pb <= pc ? up : corner;
+      }
+      line[x] = value & 255;
+    }
+    for (let x = 0; x < width; x++) {
+      const to = (y * width + x) * 4;
+      const from = x * channels;
+      data[to] = line[from];
+      data[to + 1] = line[from + 1];
+      data[to + 2] = line[from + 2];
+      data[to + 3] = channels === 4 ? line[from + 3] : 255;
+    }
+    ;
+    [prev, line] = [line, prev];
+  }
+  return { width, height, data };
+}
+function shrink(image, width) {
+  const height = Math.max(1, Math.round(image.height * width / image.width));
+  const data = new Uint8Array(width * height * 4);
+  const sx = image.width / width;
+  const sy = image.height / height;
+  for (let y = 0; y < height; y++) {
+    const y0 = Math.floor(y * sy);
+    const y1 = Math.max(y0 + 1, Math.floor((y + 1) * sy));
+    for (let x = 0; x < width; x++) {
+      const x0 = Math.floor(x * sx);
+      const x1 = Math.max(x0 + 1, Math.floor((x + 1) * sx));
+      let r = 0;
+      let g = 0;
+      let b = 0;
+      let a = 0;
+      for (let yy = y0; yy < y1; yy++) {
+        for (let xx = x0; xx < x1; xx++) {
+          const at = (yy * image.width + xx) * 4;
+          r += image.data[at];
+          g += image.data[at + 1];
+          b += image.data[at + 2];
+          a += image.data[at + 3];
+        }
+      }
+      const n = (y1 - y0) * (x1 - x0);
+      const to = (y * width + x) * 4;
+      data[to] = Math.round(r / n);
+      data[to + 1] = Math.round(g / n);
+      data[to + 2] = Math.round(b / n);
+      data[to + 3] = Math.round(a / n);
+    }
+  }
+  return { width, height, data };
+}
+var CRC_TABLE = (() => {
+  const table = new Uint32Array(256);
+  for (let n = 0; n < 256; n++) {
+    let c = n;
+    for (let k = 0; k < 8; k++) c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
+    table[n] = c >>> 0;
+  }
+  return table;
+})();
+function crc32(buffer) {
+  let crc = 4294967295;
+  for (const byte of buffer) crc = CRC_TABLE[(crc ^ byte) & 255] ^ crc >>> 8;
+  return (crc ^ 4294967295) >>> 0;
+}
+function chunk(type, body) {
+  const head = Buffer.alloc(8);
+  head.writeUInt32BE(body.length, 0);
+  head.write(type, 4, "ascii");
+  const crc = Buffer.alloc(4);
+  crc.writeUInt32BE(crc32(Buffer.concat([head.subarray(4), body])), 0);
+  return Buffer.concat([head, body, crc]);
+}
+function encode(image) {
+  const ihdr = Buffer.alloc(13);
+  ihdr.writeUInt32BE(image.width, 0);
+  ihdr.writeUInt32BE(image.height, 4);
+  ihdr[8] = 8;
+  ihdr[9] = 6;
+  const stride = image.width * 4;
+  const raw = Buffer.alloc((stride + 1) * image.height);
+  for (let y = 0; y < image.height; y++) {
+    const row = y * (stride + 1);
+    raw[row] = 1;
+    for (let x = 0; x < stride; x++) {
+      const value = image.data[y * stride + x];
+      const left = x >= 4 ? image.data[y * stride + x - 4] : 0;
+      raw[row + 1 + x] = value - left & 255;
+    }
+  }
+  return Buffer.concat([
+    SIGNATURE,
+    chunk("IHDR", ihdr),
+    chunk("IDAT", zlib.deflateSync(raw, { level: 9 })),
+    chunk("IEND", Buffer.alloc(0))
+  ]);
+}
+function thumbnail(png, width = THUMB_WIDTH) {
+  const image = decode(png);
+  if (!image || image.width <= width) return null;
+  return encode(shrink(image, width));
+}
+var thumbPath = (file) => file.replace(/\.png$/, ".thumb.png");
+function ensureThumb(file) {
+  const thumb = thumbPath(file);
+  try {
+    const source = fs2.statSync(file);
+    const existing = fs2.statSync(thumb, { throwIfNoEntry: false });
+    if (existing && existing.mtimeMs >= source.mtimeMs) return thumb;
+    const small = thumbnail(fs2.readFileSync(file));
+    if (!small) return file;
+    fs2.writeFileSync(thumb, small);
+    return thumb;
+  } catch {
+    return file;
+  }
+}
+
 // src/core/project.ts
-import fs5 from "fs";
+import fs6 from "fs";
 import path6 from "path";
 
 // src/core/canvas.ts
 import { createHash } from "crypto";
-import fs2 from "fs";
+import fs3 from "fs";
 import path3 from "path";
 
 // src/shared/devices.ts
@@ -264,9 +428,9 @@ var CanvasSchema = z.strictObject({
   pages: z.array(z.unknown()).min(1, "add at least one page")
 });
 var ID_PATTERN = /^[a-z0-9][a-z0-9_-]*$/i;
-function formatPath(base, path19) {
+function formatPath(base, path26) {
   let out = base;
-  for (const part of path19) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
+  for (const part of path26) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
   return out;
 }
 function describeZodError(error, base = "") {
@@ -277,8 +441,8 @@ function describeZodError(error, base = "") {
 var MODULE_EXT = /* @__PURE__ */ new Set([".tsx", ".jsx", ".ts", ".js", ".mjs"]);
 var HTML_EXT = /* @__PURE__ */ new Set([".html", ".htm"]);
 function listCanvasIds(paths) {
-  if (!fs2.existsSync(paths.canvases)) return [];
-  return fs2.readdirSync(paths.canvases, { withFileTypes: true }).filter((entry) => entry.isDirectory() && !entry.name.startsWith(".")).map((entry) => entry.name).sort();
+  if (!fs3.existsSync(paths.canvases)) return [];
+  return fs3.readdirSync(paths.canvases, { withFileTypes: true }).filter((entry) => entry.isDirectory() && !entry.name.startsWith(".")).map((entry) => entry.name).sort();
 }
 function frameOf(input) {
   const custom = input.width !== void 0 || input.height !== void 0;
@@ -300,8 +464,8 @@ function loadCanvas(paths, canvasId, urls, snapshots) {
   }
   let source;
   try {
-    source = fs2.readFileSync(file, "utf8");
-    doc.updatedAt = fs2.statSync(file).mtimeMs;
+    source = fs3.readFileSync(file, "utf8");
+    doc.updatedAt = fs3.statSync(file).mtimeMs;
   } catch {
     report("error", "canvas.json is missing");
     return { doc, screens };
@@ -356,7 +520,7 @@ function loadCanvas(paths, canvasId, urls, snapshots) {
         return null;
       }
       if (!isInside(paths.design, abs2)) report("warning", `"${item.src}" is outside .design`, `${at}.src`);
-      const missing2 = !fs2.existsSync(abs2);
+      const missing2 = !fs3.existsSync(abs2);
       if (missing2) report("error", `file not found: ${item.src}`, `${at}.src`);
       const id3 = claimId(item.id ?? slugify(fileStem(item.src)), item.id !== void 0, at);
       const title = item.title ?? titleize(fileStem(item.src));
@@ -393,6 +557,7 @@ function loadCanvas(paths, canvasId, urls, snapshots) {
         missing: missing2 || void 0,
         rev,
         snapshots: snap?.urls,
+        thumbs: snap?.thumbs,
         measuredHeight: snap?.height
       };
     }
@@ -424,7 +589,7 @@ function loadCanvas(paths, canvasId, urls, snapshots) {
     }
     const remote = /^https?:\/\//.test(item.src);
     const abs = remote ? "" : path3.resolve(dir, item.src);
-    const missing = !remote && !fs2.existsSync(abs);
+    const missing = !remote && !fs3.existsSync(abs);
     if (missing) report("error", `image not found: ${item.src}`, `${at}.src`);
     const id2 = claimId(item.id ?? slugify(fileStem(item.src)), item.id !== void 0, at);
     return {
@@ -518,11 +683,11 @@ function summarize(canvas) {
 }
 
 // src/core/system.ts
-import fs4 from "fs";
+import fs5 from "fs";
 import path5 from "path";
 
 // src/core/tokens.ts
-import fs3 from "fs";
+import fs4 from "fs";
 import path4 from "path";
 import postcss from "postcss";
 var NAMESPACES = [
@@ -643,9 +808,9 @@ function collect(css2, from) {
       const nodes = container.nodes ?? [];
       for (let i = 0; i < nodes.length; i++) {
         const node = nodes[i];
-        const text = commentText(node);
-        if (text !== null) {
-          const marker = /^@group\s+(.+)$/.exec(text);
+        const text2 = commentText(node);
+        if (text2 !== null) {
+          const marker = /^@group\s+(.+)$/.exec(text2);
           if (marker) {
             group = marker[1].trim();
             pending = void 0;
@@ -654,10 +819,10 @@ function collect(css2, from) {
           const prev = nodes[i - 1];
           if (prev?.type === "decl" && !/\n/.test(node.raws.before ?? "")) {
             const last = out[out.length - 1];
-            if (last && last.name === prev.prop && !last.description) last.description = text;
+            if (last && last.name === prev.prop && !last.description) last.description = text2;
             continue;
           }
-          pending = text;
+          pending = text2;
           continue;
         }
         if (node.type === "decl") {
@@ -681,24 +846,24 @@ function collect(css2, from) {
 function readStylesheets(entry) {
   const seen = /* @__PURE__ */ new Set();
   const files = [];
-  const walk = (file) => {
-    if (seen.has(file) || !fs3.existsSync(file)) return;
+  const walk2 = (file) => {
+    if (seen.has(file) || !fs4.existsSync(file)) return;
     seen.add(file);
-    const css2 = fs3.readFileSync(file, "utf8");
+    const css2 = fs4.readFileSync(file, "utf8");
     const imports = [...css2.matchAll(/@import\s+(?:url\()?\s*["']([^"']+)["']/g)].map((m) => m[1]);
     for (const spec of imports) {
-      if (spec.startsWith("./") || spec.startsWith("../")) walk(path4.resolve(path4.dirname(file), spec));
+      if (spec.startsWith("./") || spec.startsWith("../")) walk2(path4.resolve(path4.dirname(file), spec));
     }
     files.push({ file, css: css2 });
   };
-  walk(entry);
+  walk2(entry);
   return files;
 }
-function closingParen(text, start) {
+function closingParen(text2, start) {
   let depth = 1;
-  for (let i = start; i < text.length; i++) {
-    if (text[i] === "(") depth++;
-    else if (text[i] === ")" && --depth === 0) return i;
+  for (let i = start; i < text2.length; i++) {
+    if (text2[i] === "(") depth++;
+    else if (text2[i] === ")" && --depth === 0) return i;
   }
   return -1;
 }
@@ -823,9 +988,9 @@ var COMPONENT_EXT = [".tsx", ".jsx", ".ts", ".js", ".vue", ".svelte", ".html"];
 var IMAGE_EXT = /* @__PURE__ */ new Set([".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif", ".svg", ".ico"]);
 var FONT_EXT = /* @__PURE__ */ new Set([".woff", ".woff2", ".ttf", ".otf"]);
 function listFiles(dir, deep = false) {
-  if (!fs4.existsSync(dir)) return [];
+  if (!fs5.existsSync(dir)) return [];
   const out = [];
-  for (const entry of fs4.readdirSync(dir, { withFileTypes: true })) {
+  for (const entry of fs5.readdirSync(dir, { withFileTypes: true })) {
     if (entry.name.startsWith(".")) continue;
     const full = path5.join(dir, entry.name);
     if (entry.isDirectory()) {
@@ -835,13 +1000,13 @@ function listFiles(dir, deep = false) {
   return out.sort();
 }
 function guessSources(componentsDir, stem) {
-  if (!fs4.existsSync(componentsDir)) return [];
+  if (!fs5.existsSync(componentsDir)) return [];
   const wanted = slugify(stem);
   for (const file of listFiles(componentsDir)) {
     const ext = path5.extname(file);
     if (COMPONENT_EXT.includes(ext) && slugify(path5.basename(file, ext)) === wanted) return [file];
   }
-  for (const entry of fs4.readdirSync(componentsDir, { withFileTypes: true })) {
+  for (const entry of fs5.readdirSync(componentsDir, { withFileTypes: true })) {
     if (entry.isDirectory() && slugify(entry.name) === wanted) {
       const files = listFiles(path5.join(componentsDir, entry.name)).filter(
         (f) => COMPONENT_EXT.includes(path5.extname(f))
@@ -852,14 +1017,14 @@ function guessSources(componentsDir, stem) {
   return [];
 }
 function loadSystem(paths, urls) {
-  if (!fs4.existsSync(paths.system)) return null;
+  if (!fs5.existsSync(paths.system)) return null;
   const issues = [];
   const configFile = path5.join(paths.system, "system.json");
   const report = (severity, file, message, at) => issues.push({ severity, file: relToRoot(paths, file), message, at });
   let config = null;
-  if (fs4.existsSync(configFile)) {
+  if (fs5.existsSync(configFile)) {
     try {
-      const parsed = SystemConfigSchema.safeParse(JSON.parse(fs4.readFileSync(configFile, "utf8")));
+      const parsed = SystemConfigSchema.safeParse(JSON.parse(fs5.readFileSync(configFile, "utf8")));
       if (parsed.success) config = parsed.data;
       else for (const issue of describeZodError(parsed.error)) report("error", configFile, issue.message, issue.at);
     } catch (error) {
@@ -872,12 +1037,12 @@ function loadSystem(paths, urls) {
   let stylesheet = null;
   if (config?.stylesheet) {
     stylesheet = path5.resolve(paths.system, config.stylesheet);
-    if (!fs4.existsSync(stylesheet)) {
+    if (!fs5.existsSync(stylesheet)) {
       report("error", configFile, `stylesheet not found: ${config.stylesheet}`, "stylesheet");
       stylesheet = null;
     }
   }
-  const tokenEntry = stylesheet ?? (fs4.existsSync(tokensFile) ? tokensFile : null);
+  const tokenEntry = stylesheet ?? (fs5.existsSync(tokensFile) ? tokensFile : null);
   const tokens = tokenEntry ? parseTokens(readStylesheets(tokenEntry)) : [];
   if (!tokenEntry) report("warning", tokensFile, "no tokens.css: screens get the default Tailwind theme");
   const specimensDir = path5.join(paths.system, "specimens");
@@ -892,12 +1057,12 @@ function loadSystem(paths, urls) {
     let id2 = slugify(stem);
     if (usedIds.has(id2)) id2 = `${id2}-${usedIds.size + 1}`;
     usedIds.add(id2);
-    const tags = parseDocTags(fs4.readFileSync(file, "utf8"));
+    const tags = parseDocTags(fs5.readFileSync(file, "utf8"));
     const sources = (tags.source ?? []).flatMap((value) => value.split(/[\s,]+/)).filter(Boolean).map((value) => path5.resolve(path5.dirname(file), value));
     for (const source of sources) {
-      if (!fs4.existsSync(source)) report("warning", file, `@source not found: ${path5.relative(paths.system, source)}`);
+      if (!fs5.existsSync(source)) report("warning", file, `@source not found: ${path5.relative(paths.system, source)}`);
     }
-    const found = sources.filter((source) => fs4.existsSync(source));
+    const found = sources.filter((source) => fs5.existsSync(source));
     const title = tags.title?.[0] || titleize(stem);
     const format = ext === ".html" ? "html" : "module";
     components.push({
@@ -926,7 +1091,7 @@ function loadSystem(paths, urls) {
   for (const file of listFiles(path5.join(paths.system, "guidelines"))) {
     if (path5.extname(file).toLowerCase() !== ".md") continue;
     const stem = path5.basename(file, ".md");
-    const { data, body } = parseFrontmatter(fs4.readFileSync(file, "utf8"));
+    const { data, body } = parseFrontmatter(fs5.readFileSync(file, "utf8"));
     const prefix = /^(\d+)[-_. ]+(.*)$/.exec(stem);
     const order = data.order !== void 0 ? Number(data.order) : prefix ? Number(prefix[1]) : 1e3;
     guidelines.push({
@@ -945,7 +1110,7 @@ function loadSystem(paths, urls) {
       name: path5.basename(file),
       path: path5.relative(paths.system, file).split(path5.sep).join("/"),
       url: urls.file(relToDesign(paths, file)),
-      size: fs4.statSync(file).size,
+      size: fs5.statSync(file).size,
       kind: IMAGE_EXT.has(ext) ? "image" : FONT_EXT.has(ext) ? "font" : "other"
     });
   }
@@ -981,7 +1146,7 @@ function loadSystem(paths, urls) {
     },
     config,
     stylesheet,
-    tokensFile: fs4.existsSync(tokensFile) ? tokensFile : null,
+    tokensFile: fs5.existsSync(tokensFile) ? tokensFile : null,
     specimens
   };
 }
@@ -1014,9 +1179,9 @@ var DesignProject = class {
     const issues = [];
     let config = {};
     const file = this.paths.config;
-    if (fs5.existsSync(file)) {
+    if (fs6.existsSync(file)) {
       try {
-        const parsed = DesignConfigSchema.safeParse(JSON.parse(fs5.readFileSync(file, "utf8")));
+        const parsed = DesignConfigSchema.safeParse(JSON.parse(fs6.readFileSync(file, "utf8")));
         if (parsed.success) config = parsed.data;
         else
           for (const issue of describeZodError(parsed.error))
@@ -1036,7 +1201,7 @@ var DesignProject = class {
     const configured = this.config().config.name;
     if (configured) return configured;
     try {
-      const manifest = JSON.parse(fs5.readFileSync(path6.join(this.paths.root, "package.json"), "utf8"));
+      const manifest = JSON.parse(fs6.readFileSync(path6.join(this.paths.root, "package.json"), "utf8"));
       if (typeof manifest.name === "string" && manifest.name) return manifest.name;
     } catch {
     }
@@ -1052,7 +1217,7 @@ var DesignProject = class {
   canvas(id2) {
     const cached = this.canvasCache.get(id2);
     if (cached) return cached;
-    if (!fs5.existsSync(path6.join(this.paths.canvases, id2))) return null;
+    if (!fs6.existsSync(path6.join(this.paths.canvases, id2))) return null;
     const canvas = loadCanvas(this.paths, id2, this.urls, this.snapshots);
     this.canvasCache.set(id2, canvas);
     return canvas;
@@ -1119,17 +1284,17 @@ var STATIC_URLS = {
 };
 
 // src/server/entries.ts
-import fs6 from "fs";
+import fs7 from "fs";
 import path7 from "path";
 var SYSTEM_CSS = "system.css";
 var HTML_BOOT = "html-boot.js";
 function writeIfChanged(file, content) {
   try {
-    if (fs6.readFileSync(file, "utf8") === content) return false;
+    if (fs7.readFileSync(file, "utf8") === content) return false;
   } catch {
   }
-  fs6.mkdirSync(path7.dirname(file), { recursive: true });
-  fs6.writeFileSync(file, content);
+  fs7.mkdirSync(path7.dirname(file), { recursive: true });
+  fs7.writeFileSync(file, content);
   return true;
 }
 function importPath(fromDir, file) {
@@ -1222,13 +1387,13 @@ hmr(import.meta.hot)
     return this.project.sources().filter((source) => source.format === "module").map((source) => this.entryFile(source));
   }
   prune(dir, wanted) {
-    if (!fs6.existsSync(dir)) return;
-    for (const entry of fs6.readdirSync(dir, { withFileTypes: true })) {
+    if (!fs7.existsSync(dir)) return;
+    for (const entry of fs7.readdirSync(dir, { withFileTypes: true })) {
       const full = path7.join(dir, entry.name);
       if (entry.isDirectory()) {
         this.prune(full, wanted);
-        if (fs6.readdirSync(full).length === 0) fs6.rmdirSync(full);
-      } else if (!wanted.has(full)) fs6.rmSync(full);
+        if (fs7.readdirSync(full).length === 0) fs7.rmdirSync(full);
+      } else if (!wanted.has(full)) fs7.rmSync(full);
     }
   }
 };
@@ -1295,7 +1460,7 @@ ${html}
 }
 
 // src/server/links.ts
-import fs7 from "fs";
+import fs8 from "fs";
 import path8 from "path";
 var SHIPPED_PACKAGES = ["react", "react-dom", "motion", "lucide-react", "clsx", "tailwind-merge"];
 function findPackageDir(fromDir, name, skip) {
@@ -1303,7 +1468,7 @@ function findPackageDir(fromDir, name, skip) {
   for (; ; ) {
     const modules = path8.join(dir, "node_modules");
     const candidate = path8.join(modules, name);
-    if (modules !== skip && fs7.existsSync(path8.join(candidate, "package.json"))) return candidate;
+    if (modules !== skip && fs8.existsSync(path8.join(candidate, "package.json"))) return candidate;
     const parent = path8.dirname(dir);
     if (parent === dir) return null;
     dir = parent;
@@ -1311,7 +1476,7 @@ function findPackageDir(fromDir, name, skip) {
 }
 function isLink(file) {
   try {
-    return fs7.lstatSync(file).isSymbolicLink();
+    return fs8.lstatSync(file).isSymbolicLink();
   } catch {
     return false;
   }
@@ -1322,41 +1487,41 @@ function linkShippedPackages(paths) {
   const allow = /* @__PURE__ */ new Set();
   for (const name of SHIPPED_PACKAGES) {
     const link = path8.join(modules, name);
-    const placedByUser = fs7.existsSync(link) && !isLink(link);
+    const placedByUser = fs8.existsSync(link) && !isLink(link);
     const own = placedByUser ? link : findPackageDir(paths.design, name, modules);
     if (own) {
-      allow.add(path8.dirname(fs7.realpathSync(own)));
-      if (isLink(link)) fs7.unlinkSync(link);
+      allow.add(path8.dirname(fs8.realpathSync(own)));
+      if (isLink(link)) fs8.unlinkSync(link);
       continue;
     }
     const shipped = findPackageDir(PKG_ROOT, name);
     if (!shipped) continue;
-    const target2 = fs7.realpathSync(shipped);
+    const target2 = fs8.realpathSync(shipped);
     allow.add(path8.dirname(target2));
     let current2 = null;
     try {
-      current2 = fs7.realpathSync(link);
+      current2 = fs8.realpathSync(link);
     } catch {
     }
     if (current2 !== target2) {
-      if (isLink(link)) fs7.unlinkSync(link);
-      fs7.mkdirSync(path8.dirname(link), { recursive: true });
-      fs7.symlinkSync(target2, link, process.platform === "win32" ? "junction" : "dir");
+      if (isLink(link)) fs8.unlinkSync(link);
+      fs8.mkdirSync(path8.dirname(link), { recursive: true });
+      fs8.symlinkSync(target2, link, process.platform === "win32" ? "junction" : "dir");
     }
     linked.push(name);
   }
   const self = path8.join(modules, "foss-design");
-  const target = fs7.realpathSync(PKG_ROOT);
+  const target = fs8.realpathSync(PKG_ROOT);
   let current = null;
   try {
-    current = fs7.realpathSync(self);
+    current = fs8.realpathSync(self);
   } catch {
   }
   if (current !== target) {
-    if (isLink(self)) fs7.unlinkSync(self);
-    if (!fs7.existsSync(self)) {
-      fs7.mkdirSync(modules, { recursive: true });
-      fs7.symlinkSync(target, self, process.platform === "win32" ? "junction" : "dir");
+    if (isLink(self)) fs8.unlinkSync(self);
+    if (!fs8.existsSync(self)) {
+      fs8.mkdirSync(modules, { recursive: true });
+      fs8.symlinkSync(target, self, process.platform === "win32" ? "junction" : "dir");
     }
   }
   allow.add(target);
@@ -1367,7 +1532,7 @@ function linkShippedPackages(paths) {
 import path9 from "path";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-var escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+var escapeRegExp = (text2) => text2.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 function aliases(project) {
   const { paths } = project;
   const list = [
@@ -1418,7 +1583,7 @@ function staticSnapshots(paths) {
     let data = metaCache.get(canvas);
     if (!data) {
       try {
-        data = JSON.parse(fs8.readFileSync(path10.join(paths.snapshots, canvas, "meta.json"), "utf8"));
+        data = JSON.parse(fs9.readFileSync(path10.join(paths.snapshots, canvas, "meta.json"), "utf8"));
       } catch {
       }
       data ??= {};
@@ -1430,14 +1595,19 @@ function staticSnapshots(paths) {
     const entry = meta(canvas)[id2];
     if (!entry) return null;
     const urls = {};
+    const thumbs = {};
     for (const theme2 of THEMES) {
       const file = path10.join(paths.snapshots, canvas, `${id2}.${theme2}.png`);
-      if (!entry[theme2] || !fs8.existsSync(file)) continue;
+      if (!entry[theme2] || !fs9.existsSync(file)) continue;
       const rel = `_snap/${canvas}/${id2}.${theme2}.png`;
       copies.set(file, rel);
       urls[theme2] = `${encodePath2(rel)}?v=${entry[theme2]}`;
+      const thumb = ensureThumb(file);
+      const thumbRel = thumb === file ? rel : `_snap/${canvas}/${id2}.${theme2}.thumb.png`;
+      copies.set(thumb, thumbRel);
+      thumbs[theme2] = `${encodePath2(thumbRel)}?v=${entry[theme2]}`;
     }
-    return { urls, height: entry.height };
+    return { urls, thumbs, height: entry.height };
   };
   return { lookup, copies };
 }
@@ -1453,53 +1623,55 @@ function rewriteRefs(html, originalDir, stagedDir) {
         if (!value || /^(?:[a-z][a-z0-9+.-]*:|\/|#|\{)/i.test(value)) return whole;
         const [pathname = "", suffix = ""] = /^([^?#]*)(.*)$/.exec(value).slice(1);
         const target = path10.resolve(originalDir, decodeURIComponent(pathname));
-        if (!fs8.existsSync(target)) return whole;
+        if (!fs9.existsSync(target)) return whole;
         return `${attr}${quote}${relUrl(stagedDir, target)}${suffix}${quote}`;
       }
     );
   });
 }
 function copyTree(from, to, filter) {
-  if (!fs8.existsSync(from)) return;
-  for (const entry of fs8.readdirSync(from, { withFileTypes: true })) {
+  if (!fs9.existsSync(from)) return;
+  for (const entry of fs9.readdirSync(from, { withFileTypes: true })) {
     if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
     const source = path10.join(from, entry.name);
     const target = path10.join(to, entry.name);
     if (entry.isDirectory()) copyTree(source, target, filter);
-    else if (filter(source) && !fs8.existsSync(target)) {
-      fs8.mkdirSync(path10.dirname(target), { recursive: true });
-      fs8.copyFileSync(source, target);
+    else if (filter(source) && !fs9.existsSync(target)) {
+      fs9.mkdirSync(path10.dirname(target), { recursive: true });
+      fs9.copyFileSync(source, target);
     }
   }
 }
 function writeJson(file, value) {
-  fs8.mkdirSync(path10.dirname(file), { recursive: true });
-  fs8.writeFileSync(file, JSON.stringify(value));
+  fs9.mkdirSync(path10.dirname(file), { recursive: true });
+  fs9.writeFileSync(file, JSON.stringify(value));
 }
-async function buildSite(paths, only, out) {
+async function buildSite(paths, out, options = {}) {
   const snapshots = staticSnapshots(paths);
   const project = new DesignProject(paths, STATIC_URLS, snapshots.lookup);
   const known = project.canvasIds();
-  const unknown = only.filter((id2) => !known.includes(id2));
+  const only = options.canvases;
+  const unknown = (only ?? []).filter((id2) => !known.includes(id2));
   if (unknown.length) throw new Error(`No canvas ${unknown.map((id2) => `"${id2}"`).join(", ")}`);
-  const canvasIds = only.length ? only : known;
+  const canvasIds = only ?? known;
   const canvases = canvasIds.map((id2) => project.canvas(id2)).filter((c) => c !== null);
-  const system = project.system();
+  const loadedSystem = project.system();
+  const system = options.includeSystem === false ? null : loadedSystem;
   const entries = new Entries(project);
   entries.sync();
   linkShippedPackages(paths);
   const staging = path10.join(paths.cache, "build", "src");
-  fs8.rmSync(staging, { recursive: true, force: true });
-  const fonts = system?.doc.fonts ?? [];
+  fs9.rmSync(staging, { recursive: true, force: true });
+  const fonts = loadedSystem?.doc.fonts ?? [];
   const sources = [...system?.specimens ?? [], ...canvases.flatMap((canvas) => canvas.screens)];
   const inputs = [];
   const htmlScreens = [];
   for (const source of sources) {
-    if (!source.builtin && !fs8.existsSync(source.file)) continue;
+    if (!source.builtin && !fs9.existsSync(source.file)) continue;
     const siteDir = path10.join("_s", source.canvas, source.id);
     const dir = path10.join(staging, siteDir);
     const file = path10.join(dir, "index.html");
-    fs8.mkdirSync(dir, { recursive: true });
+    fs9.mkdirSync(dir, { recursive: true });
     const canvasTheme = source.canvas === SYSTEM_CANVAS ? void 0 : project.canvas(source.canvas)?.doc.theme;
     const head = {
       source,
@@ -1509,21 +1681,21 @@ async function buildSite(paths, only, out) {
       autoHeight: source.autoHeight ?? false
     };
     if (source.format === "module") {
-      fs8.writeFileSync(file, moduleShell(head, relUrl(dir, entries.entryFile(source))));
+      fs9.writeFileSync(file, moduleShell(head, relUrl(dir, entries.entryFile(source))));
     } else {
-      const raw = rewriteRefs(fs8.readFileSync(source.file, "utf8"), path10.dirname(source.file), dir);
+      const raw = rewriteRefs(fs9.readFileSync(source.file, "utf8"), path10.dirname(source.file), dir);
       const withSystem = source.system && !optsOutOfSystem(raw);
       const html = injectIntoHtml(raw, {
         ...head,
         systemCss: withSystem ? relUrl(dir, entries.systemCssFile()) : void 0,
         boot: relUrl(dir, path10.join(entries.dir, HTML_BOOT))
       });
-      fs8.writeFileSync(file, html);
+      fs9.writeFileSync(file, html);
       htmlScreens.push({ source, dir: siteDir });
     }
     inputs.push(file);
   }
-  fs8.mkdirSync(out, { recursive: true });
+  fs9.mkdirSync(out, { recursive: true });
   if (inputs.length) {
     const base = baseConfig(project);
     await build({
@@ -1542,8 +1714,8 @@ async function buildSite(paths, only, out) {
       }
     });
   } else {
-    fs8.rmSync(out, { recursive: true, force: true });
-    fs8.mkdirSync(out, { recursive: true });
+    fs9.rmSync(out, { recursive: true, force: true });
+    fs9.mkdirSync(out, { recursive: true });
   }
   for (const { source, dir } of htmlScreens) {
     copyTree(
@@ -1562,17 +1734,20 @@ async function buildSite(paths, only, out) {
   for (const url of files) {
     const rel = url.slice("_f/".length).split("/").map(decodeURIComponent).join("/");
     const from = path10.join(paths.design, rel);
-    if (!fs8.existsSync(from)) continue;
+    if (!fs9.existsSync(from)) continue;
     const to = path10.join(out, "_f", rel);
-    fs8.mkdirSync(path10.dirname(to), { recursive: true });
-    fs8.copyFileSync(from, to);
+    fs9.mkdirSync(path10.dirname(to), { recursive: true });
+    fs9.copyFileSync(from, to);
   }
+  const info = project.info(true);
+  const snapshotDirs = canvasIds.map((id2) => `_snap/${id2}/`);
   for (const [from, rel] of snapshots.copies) {
+    if (!snapshotDirs.some((dir) => rel.startsWith(dir))) continue;
     const to = path10.join(out, rel);
-    fs8.mkdirSync(path10.dirname(to), { recursive: true });
-    fs8.copyFileSync(from, to);
+    fs9.mkdirSync(path10.dirname(to), { recursive: true });
+    fs9.copyFileSync(from, to);
   }
-  const info = project.info(true);
+  if (!system) info.system = null;
   info.canvases = info.canvases.filter((canvas) => canvasIds.includes(canvas.id));
   writeJson(path10.join(out, "api", "project.json"), info);
   for (const canvas of canvases) writeJson(path10.join(out, "api", "canvas", `${canvas.doc.id}.json`), canvas.doc);
@@ -1582,35 +1757,36 @@ async function buildSite(paths, only, out) {
     for (const component of system.doc.components) {
       for (const rel of [component.specimen, ...component.sources]) {
         const file = path10.join(paths.root, rel);
-        if (!(rel in texts) && fs8.existsSync(file)) texts[rel] = fs8.readFileSync(file, "utf8");
+        if (!(rel in texts) && fs9.existsSync(file)) texts[rel] = fs9.readFileSync(file, "utf8");
       }
     }
     writeJson(path10.join(out, "api", "sources.json"), texts);
   }
-  fs8.rmSync(staging, { recursive: true, force: true });
+  fs9.rmSync(staging, { recursive: true, force: true });
   const errors = [
-    ...only.length ? [] : project.config().issues,
+    ...only ? [] : project.config().issues,
     ...system?.doc.issues ?? [],
     ...canvases.flatMap((canvas) => canvas.doc.issues)
   ].filter((issue) => issue.severity === "error").length;
-  return { out, canvases: canvasIds, frames: inputs.length, errors };
+  const { absoluteAssets } = options.includeViewer === false ? { absoluteAssets: false } : copyViewer(PKG.viewer, out);
+  return { out, canvases: canvasIds, frames: inputs.length, errors, absoluteAssets };
 }
 function copyViewer(viewerDir, out) {
   copyTree(viewerDir, out, () => true);
   const index = path10.join(out, "index.html");
-  const html = fs8.readFileSync(index, "utf8");
-  const flag = "<script>window.__DESIGN_STATIC__=true</script>";
+  const html = fs9.readFileSync(index, "utf8");
+  const flag2 = "<script>window.__DESIGN_STATIC__=true</script>";
   const head = /<head(\s[^>]*)?>/i.exec(html);
-  fs8.writeFileSync(
+  fs9.writeFileSync(
     index,
-    head ? html.slice(0, head.index + head[0].length) + flag + html.slice(head.index + head[0].length) : flag + html
+    head ? html.slice(0, head.index + head[0].length) + flag2 + html.slice(head.index + head[0].length) : flag2 + html
   );
   return { absoluteAssets: /(?:src|href)=["']\/(?!\/)/.test(html) };
 }
 
 // src/cli/log.ts
 var color = process.stdout.isTTY && !process.env.NO_COLOR;
-var wrap = (code) => (text) => color ? `\x1B[${code}m${text}\x1B[0m` : text;
+var wrap = (code) => (text2) => color ? `\x1B[${code}m${text2}\x1B[0m` : text2;
 var bold = wrap("1");
 var dim = wrap("2");
 var red = wrap("31");
@@ -1642,8 +1818,8 @@ function warn(line) {
 // src/cli/commands/build.ts
 function pack(out) {
   const archive = `${out.replace(/[\\/]+$/, "")}.tar.gz`;
-  fs9.rmSync(archive, { force: true });
-  const entries = fs9.readdirSync(out);
+  fs10.rmSync(archive, { force: true });
+  const entries = fs10.readdirSync(out);
   const result = spawnSync("tar", ["-czf", archive, "-C", out, ...entries], {
     stdio: ["ignore", "ignore", "pipe"],
     env: { ...process.env, COPYFILE_DISABLE: "1" }
@@ -1653,7 +1829,7 @@ function pack(out) {
   return archive;
 }
 async function runBuild(paths, canvases, options) {
-  if (!fs9.existsSync(path11.join(PKG.viewer, "index.html"))) {
+  if (!fs10.existsSync(path11.join(PKG.viewer, "index.html"))) {
     throw new CliError("The viewer is missing from this foss-design install (dist/viewer). Rebuild or reinstall it.");
   }
   const out = path11.resolve(options.out ?? path11.join(paths.cache, "site"));
@@ -1661,12 +1837,12 @@ async function runBuild(paths, canvases, options) {
   print(dim(`Building ${canvases.length ? canvases.join(", ") : "every canvas"} and the design system\u2026`));
   let result;
   try {
-    result = await buildSite(paths, canvases, out);
+    result = await buildSite(paths, out, { canvases: canvases.length ? canvases : void 0 });
   } catch (error) {
     throw new CliError(error.message);
   }
-  const { absoluteAssets } = copyViewer(PKG.viewer, out);
-  if (absoluteAssets) warn("the viewer references assets by absolute path; the site only works at the root of a host");
+  if (result.absoluteAssets)
+    warn("the viewer references assets by absolute path; the site only works at the root of a host");
   print(`${bold("Site")}    ${out}`);
   print(
     `${bold("Frames")}  ${result.frames} ${dim(`(${result.canvases.length} canvas${result.canvases.length === 1 ? "" : "es"})`)}`
@@ -1677,7 +1853,7 @@ async function runBuild(paths, canvases, options) {
 }
 
 // src/capture/chrome.ts
-import fs10 from "fs";
+import fs11 from "fs";
 var CANDIDATES = {
   darwin: [
     "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
@@ -1701,8 +1877,8 @@ var CANDIDATES = {
 };
 function findChrome() {
   const configured = process.env.DESIGN_CHROME;
-  if (configured && fs10.existsSync(configured)) return configured;
-  for (const candidate of CANDIDATES[process.platform] ?? []) if (fs10.existsSync(candidate)) return candidate;
+  if (configured && fs11.existsSync(configured)) return configured;
+  for (const candidate of CANDIDATES[process.platform] ?? []) if (fs11.existsSync(candidate)) return candidate;
   return null;
 }
 async function launchChrome() {
@@ -1740,10 +1916,10 @@ async function openFrame(page, url, options = {}) {
     return el?.shadowRoot?.querySelector(".message")?.textContent ?? null;
   }).catch(() => null);
   if (overlay) errors.unshift(overlay.trim());
-  const unique = errors.filter(
+  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(unique)], ready };
+  return { errors: [...new Set(unique2)], ready };
 }
 
 // src/capture/frames.ts
@@ -1819,26 +1995,26 @@ async function mapLimit(items, limit, fn) {
 }
 
 // src/server/state.ts
-import fs11 from "fs";
+import fs12 from "fs";
 import path12 from "path";
 var stateFile = (paths) => path12.join(paths.cache, "server.json");
 var logFile = (paths) => path12.join(paths.cache, "server.log");
 function readState(paths) {
   try {
-    return JSON.parse(fs11.readFileSync(stateFile(paths), "utf8"));
+    return JSON.parse(fs12.readFileSync(stateFile(paths), "utf8"));
   } catch {
     return null;
   }
 }
 function writeState(paths, state) {
-  fs11.mkdirSync(paths.cache, { recursive: true });
-  fs11.writeFileSync(stateFile(paths), `${JSON.stringify(state, null, 2)}
+  fs12.mkdirSync(paths.cache, { recursive: true });
+  fs12.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;
-  fs11.rmSync(stateFile(paths), { force: true });
+  fs12.rmSync(stateFile(paths), { force: true });
 }
 function pidAlive(pid) {
   try {
@@ -1863,17 +2039,17 @@ async function liveServer(paths) {
 
 // src/cli/commands/preview.ts
 import { spawn } from "child_process";
-import fs15 from "fs";
+import fs16 from "fs";
 
 // src/server/index.ts
-import fs14 from "fs";
+import fs15 from "fs";
 import http from "http";
 import path15 from "path";
 import sirv from "sirv";
 import { createServer, searchForWorkspaceRoot } from "vite";
 
 // src/server/api.ts
-import fs12 from "fs";
+import fs13 from "fs";
 import path13 from "path";
 function sendJson(res, status, body) {
   res.writeHead(status, { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" });
@@ -1883,12 +2059,12 @@ function readBody(req, limit = 25 * 1024 * 1024) {
   return new Promise((resolve, reject) => {
     const chunks = [];
     let size2 = 0;
-    req.on("data", (chunk) => {
-      size2 += chunk.length;
+    req.on("data", (chunk2) => {
+      size2 += chunk2.length;
       if (size2 > limit) {
         reject(new Error("body too large"));
         req.destroy();
-      } else chunks.push(chunk);
+      } else chunks.push(chunk2);
     });
     req.on("end", () => resolve(Buffer.concat(chunks)));
     req.on("error", reject);
@@ -1926,16 +2102,16 @@ async function handleApi(ctx, req, res, url) {
   if (route === "/source") {
     const rel = url.searchParams.get("path") ?? "";
     const file = path13.resolve(project.paths.root, rel);
-    if (!rel || !isInside(project.paths.root, file) || !fs12.existsSync(file) || fs12.statSync(file).isDirectory()) {
+    if (!rel || !isInside(project.paths.root, file) || !fs13.existsSync(file) || fs13.statSync(file).isDirectory()) {
       sendJson(res, 404, { error: "not found" });
       return true;
     }
-    if (fs12.statSync(file).size > 2 * 1024 * 1024) {
+    if (fs13.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(fs12.readFileSync(file, "utf8"));
+    res.end(fs13.readFileSync(file, "utf8"));
     return true;
   }
   const snapshotPost = /^\/snapshots\/([^/]+)\/([^/]+)$/.exec(route);
@@ -1965,7 +2141,7 @@ async function handleApi(ctx, req, res, url) {
       return true;
     }
     res.writeHead(200, { "content-type": "image/png", "cache-control": "public, max-age=31536000, immutable" });
-    fs12.createReadStream(file).pipe(res);
+    fs13.createReadStream(file).pipe(res);
     return true;
   }
   return false;
@@ -2005,7 +2181,7 @@ var EventHub = class {
 };
 
 // src/server/snapshots.ts
-import fs13 from "fs";
+import fs14 from "fs";
 import path14 from "path";
 var SAFE = /^@?[a-z0-9][a-z0-9_-]*$/i;
 function isSafeSegment(value) {
@@ -2027,41 +2203,48 @@ var SnapshotStore = class {
     if (cached) return cached;
     let data = {};
     try {
-      data = JSON.parse(fs13.readFileSync(this.metaFile(canvas), "utf8"));
+      data = JSON.parse(fs14.readFileSync(this.metaFile(canvas), "utf8"));
     } catch {
     }
     this.meta.set(canvas, data);
     return data;
   }
-  url(canvas, id2, theme2, version) {
-    return `${this.urlBase}/${encodeURIComponent(canvas)}/${encodeURIComponent(id2)}.${theme2}.png?v=${version}`;
+  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 = {};
-    if (entry.light) urls.light = this.url(canvas, id2, "light", entry.light);
-    if (entry.dark) urls.dark = this.url(canvas, id2, "dark", entry.dark);
-    return { urls, height: entry.height };
+    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 = path14.join(this.dir, canvas);
-    fs13.mkdirSync(dir, { recursive: true });
-    fs13.writeFileSync(path14.join(dir, `${id2}.${theme2}.png`), png);
+    fs14.mkdirSync(dir, { recursive: true });
+    fs14.writeFileSync(path14.join(dir, `${id2}.${theme2}.png`), png);
     const data = this.load(canvas);
     const version = Date.now();
     data[id2] = { ...data[id2], [theme2]: version, ...height ? { height } : {} };
-    fs13.writeFileSync(this.metaFile(canvas), JSON.stringify(data));
+    fs14.writeFileSync(this.metaFile(canvas), JSON.stringify(data));
     return { url: this.url(canvas, id2, theme2, version) };
   }
-  /** Absolute path of `<id>.<theme>.png`, or null. */
+  /** 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)\.png$/i.exec(name);
+    const match = /^(@?[a-z0-9][a-z0-9_-]*)\.(light|dark)(\.thumb)?\.png$/i.exec(name);
     if (!isSafeSegment(canvas) || !match) return null;
-    const file = path14.join(this.dir, canvas, name);
-    return fs13.existsSync(file) ? file : null;
+    const file = path14.join(this.dir, canvas, `${match[1]}.${match[2]}.png`);
+    if (!fs14.existsSync(file)) return null;
+    return match[3] ? ensureThumb(file) : file;
   }
 };
 
@@ -2091,16 +2274,16 @@ async function listen(server, port, host) {
   }
   throw new Error(`No free port between ${port} and ${port + 40}`);
 }
-function notFoundPage(res, title, text) {
+function notFoundPage(res, title, text2) {
   res.writeHead(404, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
   res.end(
-    `<!doctype html><meta charset="utf-8"><body style="margin:0;display:grid;place-items:center;min-height:100vh;font:14px/1.5 ui-monospace,Menlo,monospace;background:#f5f6f8;color:#3a414a"><div style="max-width:520px;padding:24px"><div style="font-weight:600;margin-bottom:6px">${escapeHtml(title)}</div>${escapeHtml(text)}</div></body>`
+    `<!doctype html><meta charset="utf-8"><body style="margin:0;display:grid;place-items:center;min-height:100vh;font:14px/1.5 ui-monospace,Menlo,monospace;background:#f5f6f8;color:#3a414a"><div style="max-width:520px;padding:24px"><div style="font-weight:600;margin-bottom:6px">${escapeHtml(title)}</div>${escapeHtml(text2)}</div></body>`
   );
 }
 async function startDevServer(options) {
   const paths = designPaths(options.root);
-  if (!fs14.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
-  fs14.mkdirSync(paths.cache, { recursive: true });
+  if (!fs15.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
+  fs15.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);
@@ -2129,10 +2312,10 @@ async function startDevServer(options) {
       entries: entries.files().map((file) => toPosix(path15.relative(paths.design, file)))
     }
   });
-  const viewer = fs14.existsSync(PKG.viewer) ? sirv(PKG.viewer, { dev: true, etag: true }) : null;
+  const viewer = fs15.existsSync(PKG.viewer) ? sirv(PKG.viewer, { dev: true, etag: true }) : null;
   const viewerIndex = path15.join(PKG.viewer, "index.html");
   const serveViewerIndex = (res) => {
-    const html = fs14.readFileSync(viewerIndex, "utf8").replace(/<head>/i, '<head>\n<base href="/">');
+    const html = fs15.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);
   };
@@ -2157,7 +2340,7 @@ async function startDevServer(options) {
       notFoundPage(res, "Screen not found", `No screen "${id2}" in "${canvas}". Check canvas.json.`);
       return;
     }
-    if (!fs14.existsSync(entries.entryFile(source))) entries.sync();
+    if (!fs15.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" });
@@ -2167,7 +2350,7 @@ async function startDevServer(options) {
   const serveHtmlScreen = async (res, url2) => {
     const rel = decodeURIComponent(url2.pathname.slice("/_fs/".length));
     const file = path15.resolve(paths.design, rel);
-    if (!isInside(paths.design, file) || !fs14.existsSync(file)) {
+    if (!isInside(paths.design, file) || !fs15.existsSync(file)) {
       notFoundPage(res, "Screen not found", `No file .design/${rel}`);
       return;
     }
@@ -2183,7 +2366,7 @@ async function startDevServer(options) {
       props: {},
       system: true
     };
-    const raw = fs14.readFileSync(file, "utf8");
+    const raw = fs15.readFileSync(file, "utf8");
     const withSystem = source.system && !optsOutOfSystem(raw);
     const html = injectIntoHtml(
       raw,
@@ -2351,17 +2534,20 @@ async function stopServer(paths) {
 }
 async function ensureServer(paths, options) {
   const live = await liveServer(paths);
-  if (live && !options.restart) return live;
+  const stale = live && live.version !== packageVersion();
+  if (live && !options.restart && !stale) return live;
+  if (stale)
+    print(dim(`Restarting the preview server: it runs foss-design ${live.version}, this is ${packageVersion()}.`));
   if (live) await stopServer(paths);
-  fs15.mkdirSync(paths.cache, { recursive: true });
-  const log = fs15.openSync(logFile(paths), "w");
+  fs16.mkdirSync(paths.cache, { recursive: true });
+  const log = fs16.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 = fs15.existsSync(logFile(paths)) ? fs15.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
+    const tail = fs16.existsSync(logFile(paths)) ? fs16.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
     throw new CliError(`The preview server did not start.
 ${tail.join("\n")}`);
   }
@@ -2477,9 +2663,711 @@ async function runCheck(paths, canvases, options) {
   if (errors || broken.length) process.exitCode = 1;
 }
 
-// src/cli/commands/scaffold.ts
-import fs16 from "fs";
+// src/cli/commands/cloud.ts
+import fs20 from "fs";
+import os3 from "os";
+import path19 from "path";
+
+// src/cloud/client.ts
+import os from "os";
+
+// src/cloud/units.ts
+import { createHash as createHash2 } from "crypto";
+import fs17 from "fs";
 import path16 from "path";
+var SYSTEM_UNIT = "system";
+var CANVAS_PREFIX = "canvas/";
+var LOCAL_ONLY = /* @__PURE__ */ new Set(["cloud.json", "node_modules"]);
+var canvasUnit = (id2) => `${CANVAS_PREFIX}${id2}`;
+function unitCanvasId(key) {
+  return key.startsWith(CANVAS_PREFIX) ? key.slice(CANVAS_PREFIX.length) : null;
+}
+function isUnitKey(key) {
+  if (key === SYSTEM_UNIT) return true;
+  const id2 = unitCanvasId(key);
+  return id2 !== null && ID_PATTERN.test(id2);
+}
+function caseClashes(keys) {
+  const byLower = /* @__PURE__ */ new Map();
+  const clashes = /* @__PURE__ */ new Map();
+  for (const key of new Set(keys)) {
+    const other = byLower.get(key.toLowerCase());
+    if (other === void 0) byLower.set(key.toLowerCase(), key);
+    else {
+      clashes.set(key, other);
+      clashes.set(other, key);
+    }
+  }
+  return clashes;
+}
+function unitRoot(paths, key) {
+  const id2 = unitCanvasId(key);
+  return id2 === null ? paths.design : path16.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("/");
+  if (segments.some((part) => !part || part === ".." || part.startsWith(".") || part === "node_modules")) return false;
+  if (key === SYSTEM_UNIT) return rel === "design.json" || segments[0] === "system" && segments.length > 1;
+  const id2 = unitCanvasId(key);
+  return id2 !== null && segments[0] === "canvas" && segments[1] === id2 && segments.length > 2;
+}
+function hashBuffer(data) {
+  return createHash2("sha256").update(data).digest("hex");
+}
+function hashFile(file) {
+  const data = fs17.readFileSync(file);
+  return { hash: hashBuffer(data), size: data.length };
+}
+var warnedLinks = /* @__PURE__ */ new Set();
+function warnLink(rel) {
+  if (warnedLinks.has(rel)) return;
+  warnedLinks.add(rel);
+  process.stderr.write(`warning: .design/${rel} links outside .design; it is not synced
+`);
+}
+function walk(dir, base, out) {
+  let entries;
+  try {
+    entries = fs17.readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return;
+  }
+  for (const entry of entries) {
+    if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
+    const full = path16.join(dir, entry.name);
+    let isFile = entry.isFile();
+    let isDir = entry.isDirectory();
+    if (entry.isSymbolicLink()) {
+      isDir = false;
+      isFile = false;
+      try {
+        const target = fs17.realpathSync(full);
+        const root = fs17.realpathSync(base);
+        if (target.startsWith(root + path16.sep)) isFile = fs17.statSync(target).isFile();
+        else warnLink(toPosix(path16.relative(base, full)));
+      } catch {
+      }
+    }
+    if (isDir) walk(full, base, out);
+    else if (isFile) out[toPosix(path16.relative(base, full))] = hashFile(full);
+  }
+}
+function unitManifest(paths, key) {
+  const manifest = {};
+  if (key === SYSTEM_UNIT) {
+    if (fs17.existsSync(paths.config) && fs17.statSync(paths.config).isFile())
+      manifest["design.json"] = hashFile(paths.config);
+    walk(paths.system, paths.design, manifest);
+  } else walk(unitRoot(paths, key), paths.design, manifest);
+  return sortManifest(manifest);
+}
+function buildManifest(dir) {
+  const manifest = {};
+  const visit = (current) => {
+    for (const entry of fs17.readdirSync(current, { withFileTypes: true })) {
+      const full = path16.join(current, entry.name);
+      if (entry.isDirectory()) visit(full);
+      else if (entry.isFile()) manifest[toPosix(path16.relative(dir, full))] = hashFile(full);
+    }
+  };
+  if (fs17.existsSync(dir)) visit(dir);
+  return sortManifest(manifest);
+}
+function sortManifest(manifest) {
+  return Object.fromEntries(Object.entries(manifest).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0));
+}
+function scanLocal(paths) {
+  const units = /* @__PURE__ */ new Map();
+  const notSynced = [];
+  if (!fs17.existsSync(paths.design)) return { units, notSynced };
+  const system = unitManifest(paths, SYSTEM_UNIT);
+  if (Object.keys(system).length) units.set(SYSTEM_UNIT, { key: SYSTEM_UNIT, kind: "system", manifest: system });
+  for (const entry of fs17.readdirSync(paths.design, { withFileTypes: true })) {
+    const { name } = entry;
+    if (name.startsWith(".") || LOCAL_ONLY.has(name)) continue;
+    if (name === "design.json" && entry.isFile()) continue;
+    if ((name === "system" || name === "canvas") && entry.isDirectory()) continue;
+    notSynced.push(entry.isDirectory() ? `${name}/` : name);
+  }
+  if (fs17.existsSync(paths.canvases) && fs17.statSync(paths.canvases).isDirectory()) {
+    for (const entry of fs17.readdirSync(paths.canvases, { withFileTypes: true })) {
+      if (entry.name.startsWith(".")) continue;
+      if (!entry.isDirectory() || !ID_PATTERN.test(entry.name)) {
+        notSynced.push(`canvas/${entry.name}${entry.isDirectory() ? "/" : ""}`);
+        continue;
+      }
+      const key = canvasUnit(entry.name);
+      const manifest = unitManifest(paths, key);
+      if (Object.keys(manifest).length) units.set(key, { key, kind: "canvas", manifest });
+    }
+  }
+  return { units, notSynced: notSynced.sort() };
+}
+function unitBuildDir(paths, key) {
+  return path16.join(paths.cache, "cloud", "build", ...key.split("/"));
+}
+async function buildUnit(paths, key, out = unitBuildDir(paths, key)) {
+  const id2 = unitCanvasId(key);
+  fs17.rmSync(out, { recursive: true, force: true });
+  return buildSite(paths, out, {
+    canvases: id2 === null ? [] : [id2],
+    includeSystem: id2 === null,
+    includeViewer: false
+  });
+}
+
+// src/cloud/client.ts
+var CloudError = class extends CliError {
+  constructor(message, status, error, limit, exitCode = 1) {
+    super(message, exitCode);
+    this.status = status;
+    this.error = error;
+    this.limit = limit;
+  }
+  status;
+  error;
+  limit;
+};
+var DEFAULT_MESSAGE = {
+  400: "The cloud refused the request",
+  403: "Not allowed",
+  404: "Not found, or you are not a member of this project",
+  409: "Changed in the cloud since your last pull",
+  410: "No longer available",
+  413: "Too large for your limits",
+  423: "Archived; unarchive it in the web app first",
+  429: "Limit reached; try again later",
+  451: "Blocked by moderation",
+  507: "The cloud is out of storage"
+};
+var JSON_TIMEOUT = 6e4;
+var BLOB_TIMEOUT = 6e5;
+var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+var record = (value) => value && typeof value === "object" && !Array.isArray(value) ? value : {};
+var str = (value) => typeof value === "string" ? value : void 0;
+var CONTROL = /[\u0000-\u001f\u007f-\u009f]/g;
+var plainText = (value) => value.replace(CONTROL, "");
+var text = (value) => {
+  const found = str(value);
+  return found === void 0 ? void 0 : plainText(found);
+};
+var num = (value) => typeof value === "number" && Number.isFinite(value) ? value : void 0;
+var flag = (...values) => values.some((value) => value === true || typeof value === "string" && !!value);
+var clientName = () => `foss-design ${packageVersion()}`;
+function errorFor(host, status, body, retryAfter) {
+  const data = record(body);
+  const code = str(data.error) ?? `http_${status}`;
+  const limit = str(data.limit) ?? (num(data.limit) !== void 0 ? String(data.limit) : void 0);
+  if (status === 401)
+    return new CloudError(`Not signed in to ${host}, or the token was revoked. Run \`design login\`.`, status, code);
+  let message = text(data.message) ?? DEFAULT_MESSAGE[status] ?? `${host} answered ${status}`;
+  if (code === "account_banned") message = `Your account is banned: ${message}`;
+  if (limit) message += ` (limit: ${limit})`;
+  if (status === 429 && retryAfter) message += `; retry in ${retryAfter}s`;
+  if (status >= 500 && status !== 507) message = `${host} failed (${status}): ${message}`;
+  return new CloudError(message, status, code, limit, status === 409 ? 2 : 1);
+}
+function parseManifest(value) {
+  const manifest = {};
+  for (const [file, entry] of Object.entries(record(value))) {
+    const item = typeof entry === "string" ? { hash: entry, size: -1 } : str(record(entry).hash) ? { hash: str(record(entry).hash), size: num(record(entry).size) ?? -1 } : null;
+    if (item) manifest[file] = item;
+  }
+  return manifest;
+}
+function parseProject(value, fallbackRole) {
+  const data = record(value);
+  const id2 = text(data.id) ?? (num(data.id) !== void 0 ? String(data.id) : void 0);
+  if (!id2) return null;
+  return {
+    id: id2,
+    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)
+  };
+}
+function parseUnit(value) {
+  const data = record(value);
+  const key = str(data.key);
+  if (!key || !isUnitKey(key)) return null;
+  return {
+    key,
+    title: text(data.title) ?? key,
+    headRev: num(data.headRev) ?? num(data.head_rev) ?? num(data.head) ?? 0,
+    archived: flag(data.archived, data.archivedAt, data.archived_at),
+    banned: flag(data.banned, data.bannedAt, data.banned_at),
+    manifest: parseManifest(data.sourceManifest ?? data.source_manifest ?? data.source),
+    systemRev: num(data.systemRev) ?? num(data.system_rev) ?? null
+  };
+}
+async function withRetries(fn, retries = 3) {
+  for (let attempt = 0; ; attempt++) {
+    try {
+      return await fn();
+    } catch (error) {
+      const status = error instanceof CloudError ? error.status : 0;
+      const retriable = status === 0 || status >= 500 && status !== 507;
+      if (!retriable || attempt >= retries) throw error;
+      await sleep(500 * 2 ** attempt);
+    }
+  }
+}
+var CloudClient = class {
+  constructor(host, token) {
+    this.host = host;
+    this.token = token;
+  }
+  host;
+  token;
+  async send(method, path26, init) {
+    const headers = {
+      "User-Agent": `foss-design/${packageVersion()} (${os.platform()})`,
+      Accept: "application/json"
+    };
+    if (this.token) headers.Authorization = `Bearer ${this.token}`;
+    if (init.type) headers["Content-Type"] = init.type;
+    try {
+      return await fetch(`${this.host}/api${path26}`, {
+        method,
+        headers,
+        body: init.body,
+        signal: AbortSignal.timeout(init.timeout)
+      });
+    } catch (error) {
+      const cause = error.cause;
+      const reason = error.name === "TimeoutError" ? "timed out" : cause?.code ?? cause?.message ?? error.message;
+      throw new CloudError(`Could not reach ${this.host}: ${reason}`, 0, "network");
+    }
+  }
+  async fail(response) {
+    let body = null;
+    try {
+      body = await response.json();
+    } catch {
+    }
+    throw errorFor(this.host, response.status, body, response.headers.get("retry-after"));
+  }
+  /** JSON in, JSON out; any non-2xx answer throws a CloudError. */
+  async request(method, path26, body) {
+    const response = await this.send(method, path26, {
+      body: body === void 0 ? void 0 : JSON.stringify(body),
+      type: body === void 0 ? void 0 : "application/json",
+      timeout: JSON_TIMEOUT
+    });
+    if (!response.ok) await this.fail(response);
+    if (response.status === 204) return null;
+    const text2 = await response.text();
+    if (!text2) return null;
+    try {
+      return JSON.parse(text2);
+    } catch {
+      throw new CloudError(`${this.host} answered ${method} ${path26} with something other than JSON`, 0, "bad_response");
+    }
+  }
+  /** POST /device/code. */
+  deviceCode(hostname) {
+    return this.request("POST", "/device/code", { client_name: clientName(), hostname });
+  }
+  /** POST /device/token: the token, or the RFC 8628 error code while it is not there yet. */
+  async deviceToken(deviceCode) {
+    const response = await this.send("POST", "/device/token", {
+      body: JSON.stringify({ device_code: deviceCode }),
+      type: "application/json",
+      timeout: JSON_TIMEOUT
+    });
+    let body = {};
+    try {
+      body = record(await response.json());
+    } catch {
+    }
+    const token = str(body.access_token);
+    if (response.ok && token) return { token };
+    const error = str(body.error);
+    if (error) return { error, message: text(body.message) ?? text(body.error_description) };
+    return this.fail(response);
+  }
+  async me() {
+    const body = record(await this.request("GET", "/me"));
+    const user = record(body.user ?? body);
+    return { email: text(user.email) ?? "", name: text(user.name) };
+  }
+  async projects() {
+    const body = record(await this.request("GET", "/projects"));
+    const list = (value, role) => (Array.isArray(value) ? value : []).map((item) => parseProject(item, role)).filter((item) => item !== null);
+    return { owned: list(body.owned, "owner"), shared: list(body.shared, "member") };
+  }
+  async createProject(name) {
+    const body = record(await this.request("POST", "/projects", { name }));
+    const project = parseProject(body.project ?? body, "owner");
+    if (!project) throw new CloudError(`${this.host} did not return the new project`, 0, "bad_response");
+    return project;
+  }
+  async units(projectId) {
+    const body = await this.request("GET", `/projects/${encodeURIComponent(projectId)}/units`);
+    const list = Array.isArray(body) ? body : record(body).units;
+    const units = /* @__PURE__ */ new Map();
+    for (const item of Array.isArray(list) ? list : []) {
+      const unit = parseUnit(item);
+      if (unit) units.set(unit.key, unit);
+    }
+    return units;
+  }
+  /** POST /blobs/missing, in batches: the hashes the cloud does not have yet. */
+  async missing(projectId, hashes2) {
+    const missing = [];
+    for (let start = 0; start < hashes2.length; start += 1e3) {
+      const body = record(
+        await this.request("POST", `/projects/${encodeURIComponent(projectId)}/blobs/missing`, {
+          hashes: hashes2.slice(start, start + 1e3)
+        })
+      );
+      if (Array.isArray(body.missing)) missing.push(...body.missing.filter((hash) => typeof hash === "string"));
+    }
+    return missing;
+  }
+  putBlob(projectId, hash, data) {
+    return withRetries(async () => {
+      const response = await this.send("PUT", `/projects/${encodeURIComponent(projectId)}/blobs/${hash}`, {
+        body: new Uint8Array(data),
+        type: "application/octet-stream",
+        timeout: BLOB_TIMEOUT
+      });
+      if (!response.ok) await this.fail(response);
+      await response.arrayBuffer().catch(() => {
+      });
+    });
+  }
+  getBlob(projectId, hash) {
+    return withRetries(async () => {
+      const response = await this.send("GET", `/projects/${encodeURIComponent(projectId)}/blobs/${hash}`, {
+        timeout: BLOB_TIMEOUT
+      });
+      if (!response.ok) await this.fail(response);
+      const data = Buffer.from(await response.arrayBuffer());
+      if (hashBuffer(data) !== hash)
+        throw new CloudError(`Blob ${hash.slice(0, 12)} arrived damaged (hash mismatch)`, 0, "bad_blob");
+      return data;
+    });
+  }
+  /** POST /push: the new head of every pushed unit. */
+  async push(projectId, units) {
+    const body = await this.request("POST", `/projects/${encodeURIComponent(projectId)}/push`, { units });
+    const data = record(body);
+    const list = Array.isArray(body) ? body : data.units ?? data.results;
+    const revs2 = /* @__PURE__ */ new Map();
+    for (const item of Array.isArray(list) ? list : []) {
+      const entry = record(item);
+      const key = str(entry.key);
+      const rev = num(entry.rev) ?? num(entry.headRev);
+      if (key && rev !== void 0) revs2.set(key, rev);
+    }
+    return revs2;
+  }
+};
+
+// src/cloud/credentials.ts
+import fs18 from "fs";
+import os2 from "os";
+import path17 from "path";
+var DEFAULT_CLOUD = "https://app.fossdesign.dev";
+function normalizeHost(value) {
+  let url;
+  try {
+    url = new URL(value);
+  } catch {
+    throw new CliError(`"${value}" is not a URL (FOSS_DESIGN_CLOUD takes one like https://app.fossdesign.dev)`);
+  }
+  if (url.protocol !== "https:" && url.protocol !== "http:")
+    throw new CliError(`"${value}" is not an http(s) URL (FOSS_DESIGN_CLOUD takes one like https://app.fossdesign.dev)`);
+  return url.origin;
+}
+function cloudHost() {
+  return normalizeHost(process.env.FOSS_DESIGN_CLOUD || DEFAULT_CLOUD);
+}
+function credentialsFile() {
+  const base = process.platform === "win32" && process.env.APPDATA ? process.env.APPDATA : process.env.XDG_CONFIG_HOME || path17.join(os2.homedir(), ".config");
+  return path17.join(base, "foss-design", "credentials.json");
+}
+function readAll() {
+  const file = credentialsFile();
+  if (!fs18.existsSync(file)) return {};
+  try {
+    const data = JSON.parse(fs18.readFileSync(file, "utf8"));
+    return data && typeof data === "object" && !Array.isArray(data) ? data : {};
+  } catch (error) {
+    throw new CliError(`${file} is not valid JSON (${error.message}); fix or delete it`);
+  }
+}
+function writeAll(data) {
+  const file = credentialsFile();
+  fs18.mkdirSync(path17.dirname(file), { recursive: true, mode: 448 });
+  const temp = `${file}.${process.pid}.tmp`;
+  fs18.writeFileSync(temp, `${JSON.stringify(data, null, 2)}
+`, { mode: 384 });
+  fs18.chmodSync(temp, 384);
+  fs18.renameSync(temp, file);
+}
+function getCredential(host) {
+  const entry = readAll()[host];
+  return entry && typeof entry.token === "string" && entry.token ? entry : null;
+}
+function saveCredential(host, credential) {
+  writeAll({ ...readAll(), [host]: credential });
+}
+function removeCredential(host) {
+  const all = readAll();
+  if (!(host in all)) return false;
+  delete all[host];
+  writeAll(all);
+  return true;
+}
+function requireCredential(host) {
+  const credential = getCredential(host);
+  if (!credential) throw new CliError(`Not signed in to ${host}. Run \`design login\`.`);
+  return credential;
+}
+
+// src/cloud/state.ts
+import fs19 from "fs";
+import path18 from "path";
+var linkFile = (paths) => path18.join(paths.design, "cloud.json");
+var cloudCache = (paths) => path18.join(paths.cache, "cloud");
+var incomingDir = (paths, key) => path18.join(cloudCache(paths), "incoming", ...key.split("/"));
+function readLink(paths) {
+  const file = linkFile(paths);
+  if (!fs19.existsSync(file)) return null;
+  let data;
+  try {
+    data = JSON.parse(fs19.readFileSync(file, "utf8"));
+  } catch (error) {
+    throw new CliError(`${file} is not valid JSON (${error.message}); run \`design link <project>\` again`);
+  }
+  if (typeof data?.host !== "string" || typeof data.project !== "string")
+    throw new CliError(`${file} has no host or project; run \`design link <project>\` again`);
+  const units = {};
+  for (const [key, base] of Object.entries(data.units ?? {})) {
+    if (!isUnitKey(key) || typeof base?.rev !== "number") continue;
+    units[key] = { rev: base.rev, files: base.files && typeof base.files === "object" ? base.files : {} };
+  }
+  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 };
+}
+function requireLink(paths) {
+  const link = readLink(paths);
+  if (!link) throw new CliError("This .design is not linked to a cloud project. Run `design link` to pick one.");
+  return link;
+}
+function writeLink(paths, link) {
+  const sorted = (record2) => Object.fromEntries(Object.entries(record2).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0));
+  const file = linkFile(paths);
+  const temp = `${file}.${process.pid}.tmp`;
+  const data = {
+    host: link.host,
+    project: link.project,
+    units: sorted(link.units),
+    conflicts: sorted(link.conflicts)
+  };
+  fs19.writeFileSync(temp, `${JSON.stringify(data, null, 2)}
+`);
+  fs19.renameSync(temp, file);
+}
+var hashes = (manifest) => Object.fromEntries(Object.entries(manifest).map(([file, entry]) => [file, entry.hash]));
+function diffFiles(a, b) {
+  const out = [];
+  for (const file of /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)])) if (a[file] !== b[file]) out.push(file);
+  return out.sort();
+}
+function unitStatus(key, link, local, remote) {
+  const base = link.units[key];
+  const baseRev = base?.rev ?? 0;
+  const localFiles = hashes(local ?? {});
+  const remoteUnit = remote?.get(key);
+  const remoteFiles = remoteUnit ? hashes(remoteUnit.manifest) : {};
+  const deletedRemotely = !!remote && !remoteUnit && baseRev > 0;
+  const ahead = remote ? remoteUnit ? remoteUnit.headRev > baseRev : baseRev > 0 : false;
+  let changed = diffFiles(localFiles, base?.files ?? {});
+  if (ahead) changed = changed.filter((file) => localFiles[file] !== remoteFiles[file]);
+  const remoteChanged = ahead ? diffFiles(remoteFiles, base?.files ?? {}) : [];
+  const conflictRev = link.conflicts[key];
+  let state;
+  if (remoteUnit?.archived) state = "archived";
+  else if (conflictRev !== void 0 || changed.length && remoteChanged.length && !deletedRemotely) state = "conflict";
+  else if (ahead) state = "remote_ahead";
+  else if (changed.length) state = "local_changes";
+  else state = "in_sync";
+  return {
+    key,
+    state,
+    baseRev,
+    headRev: remoteUnit ? remoteUnit.headRev : null,
+    local: Object.keys(localFiles).length > 0,
+    changed,
+    ahead,
+    remoteChanged,
+    deletedRemotely,
+    conflictRev
+  };
+}
+function allUnitKeys(link, local, remote) {
+  const keys = /* @__PURE__ */ new Set([...local.keys(), ...Object.keys(link.units), ...Object.keys(link.conflicts)]);
+  for (const key of remote?.keys() ?? []) keys.add(key);
+  return [...keys].sort((a, b) => a === "system" ? -1 : b === "system" ? 1 : a < b ? -1 : a > b ? 1 : 0);
+}
+
+// src/cloud/sync.ts
+function openSync(paths, log) {
+  const link = requireLink(paths);
+  const credential = requireCredential(link.host);
+  return { paths, link, client: new CloudClient(link.host, credential.token), log };
+}
+function newReport(command, link) {
+  return { ok: true, command, host: link.host, project: link.project, units: [], hints: [] };
+}
+function unitArg(value) {
+  if (value === SYSTEM_UNIT || value === "@system") return SYSTEM_UNIT;
+  const key = value.startsWith("canvas/") ? value : canvasUnit(value);
+  if (!isUnitKey(key)) throw new CliError(`"${value}" is not a unit: use system, a canvas id or canvas/<id>`);
+  return key;
+}
+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 plural2 = (count, word, many = `${word}s`) => `${count} ${count === 1 ? word : many}`;
+
+// src/cli/commands/cloud.ts
+var sleep2 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+async function runLogin() {
+  const host = cloudHost();
+  const client = new CloudClient(host, null);
+  const code = await client.deviceCode(os3.hostname());
+  const url = new URL(code.verification_uri_complete || code.verification_uri, host).toString();
+  const expiresIn = code.expires_in ?? 600;
+  print(`${bold("Sign in to foss-design Cloud")} ${dim(host)}`);
+  print();
+  print(`  Open this link  ${cyan(url)}`);
+  print(`  Code            ${bold(code.user_code)} ${dim("(the page must show the same code)")}`);
+  if (!code.verification_uri_complete) print(dim("  Enter the code on that page."));
+  print();
+  if (process.stdout.isTTY) openBrowser(url);
+  print(dim(`Waiting for approval in the browser\u2026 (the code expires in ${Math.round(expiresIn / 60)} minutes)`));
+  let interval = Math.max(1, code.interval ?? 5) * 1e3;
+  const deadline = Date.now() + expiresIn * 1e3;
+  let token = null;
+  while (!token) {
+    await sleep2(interval);
+    if (Date.now() > deadline) throw new CliError("The sign-in code expired. Run `design login` again.");
+    let result;
+    try {
+      result = await client.deviceToken(code.device_code);
+    } catch (error) {
+      if (error instanceof CloudError && error.status === 0) continue;
+      throw error;
+    }
+    if ("token" in result) {
+      token = result.token;
+      break;
+    }
+    if (result.error === "authorization_pending") continue;
+    if (result.error === "slow_down") interval += 5e3;
+    else if (result.error === "expired_token") throw new CliError("The sign-in code expired. Run `design login` again.");
+    else if (result.error === "access_denied") throw new CliError("Sign-in was declined in the browser.");
+    else throw new CliError(`Sign-in failed: ${result.message ?? result.error}`);
+  }
+  const me = await new CloudClient(host, token).me();
+  saveCredential(host, { token, email: me.email });
+  print(
+    `${green("\u2713")} Signed in as ${bold(me.email || "unknown")} on ${host} ${dim(`(token in ${credentialsFile()})`)}`
+  );
+}
+function runLogout() {
+  const host = cloudHost();
+  if (!removeCredential(host)) return print(dim(`Not signed in to ${host}.`));
+  print(`${green("\u2713")} Signed out of ${host} on this machine.`);
+  print(dim(`The token still exists in the cloud until you revoke it: ${host}/profile`));
+}
+function printProjects(title, projects, linked) {
+  print(bold(title));
+  if (!projects.length) return print(dim("  none"));
+  const width = Math.max(...projects.map((project) => project.id.length));
+  const nameWidth = Math.max(...projects.map((project) => project.name.length));
+  for (const project of projects) {
+    const flags = [project.archived && yellow("archived"), project.banned && yellow("banned")].filter(Boolean);
+    print(
+      `  ${project.id.padEnd(width)}  ${project.name.padEnd(nameWidth)}  ${dim(project.role.padEnd(6))}` + (flags.length ? `  ${flags.join(" ")}` : "") + (project.id === linked ? `  ${green("linked")}` : "")
+    );
+  }
+}
+async function runLink(paths, wanted, options) {
+  if (wanted && options.newName !== void 0)
+    throw new CliError("Pass a project or --new <name>, not both. `design link` lists your projects.");
+  const host = cloudHost();
+  const client = new CloudClient(host, requireCredential(host).token);
+  const current = readLink(paths);
+  let project;
+  if (options.newName !== void 0) {
+    const name = options.newName.trim();
+    if (!name) throw new CliError("--new takes a project name");
+    project = await client.createProject(name);
+    print(`${green("created")} ${project.name} ${dim(`(${project.id})`)}`);
+  } else {
+    const { owned, shared } = await client.projects();
+    if (!wanted) {
+      const linked = current?.host === host ? current.project : void 0;
+      print(`${bold("Projects on")} ${host}`);
+      print();
+      printProjects("Yours", owned, linked);
+      printProjects("Shared with you", shared, linked);
+      print();
+      print(dim("Link one with `design link <id>`, or make a new one with `design link --new <name>`."));
+      return;
+    }
+    const all = [...owned, ...shared];
+    const byName = all.filter((item) => item.name === wanted);
+    const found = all.find((item) => item.id === wanted) ?? (byName.length === 1 ? byName[0] : void 0);
+    if (!found)
+      throw new CliError(
+        byName.length > 1 ? `Several projects are called "${wanted}"; link by id (\`design link\` lists them).` : `No project "${wanted}" among yours on ${host}. \`design link\` lists them.`
+      );
+    project = found;
+  }
+  if (project.banned) throw new CliError(`${project.name} is blocked by moderation and cannot be linked.`);
+  if (current?.host === host && current.project === project.id) {
+    print(`${dim("Already linked to")} ${project.name} ${dim(`(${project.id}, ${project.role})`)}`);
+  } else {
+    writeLink(paths, { host, project: project.id, units: {}, conflicts: {} });
+    fs20.rmSync(path19.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);
+  const remote = project.archived ? null : await client.units(project.id);
+  const scan = scanLocal(paths);
+  const states = allUnitKeys(link, scan.units, remote).map(
+    (key) => unitStatus(key, link, scan.units.get(key)?.manifest, remote).state
+  );
+  const count = (state) => states.filter((item) => item === state).length;
+  const ahead = count("remote_ahead");
+  const conflicts = count("conflict");
+  const local = count("local_changes");
+  if (ahead || conflicts)
+    print(
+      `${plural2(ahead + conflicts, "unit")} in the cloud ${ahead + conflicts === 1 ? "is" : "are"} ahead of this .design` + (conflicts ? dim(` (${conflicts} also changed here)`) : "") + ". Next: `design pull`."
+    );
+  else if (local)
+    print(`${plural2(local, "unit")} here ${local === 1 ? "is" : "are"} not in the cloud yet. Next: \`design push\`.`);
+  else if (remote) print(dim("Everything is in sync."));
+}
+
+// src/cli/commands/scaffold.ts
+import fs21 from "fs";
+import path20 from "path";
 
 // src/cli/templates.ts
 var TOKENS_CSS = `/*
@@ -2690,40 +3578,40 @@ function mainScreen(canvasId) {
 
 // src/cli/commands/scaffold.ts
 function write(file, content, root) {
-  if (fs16.existsSync(file)) {
-    print(`  ${dim("exists ")} ${path16.relative(root, file)}`);
+  if (fs21.existsSync(file)) {
+    print(`  ${dim("exists ")} ${path20.relative(root, file)}`);
     return false;
   }
-  fs16.mkdirSync(path16.dirname(file), { recursive: true });
-  fs16.writeFileSync(file, content);
-  print(`  ${green("created")} ${path16.relative(root, file)}`);
+  fs21.mkdirSync(path20.dirname(file), { recursive: true });
+  fs21.writeFileSync(file, content);
+  print(`  ${green("created")} ${path20.relative(root, file)}`);
   return true;
 }
 function ensureGitignored(root) {
-  const file = path16.join(root, ".gitignore");
-  const current = fs16.existsSync(file) ? fs16.readFileSync(file, "utf8") : "";
+  const file = path20.join(root, ".gitignore");
+  const current = fs21.existsSync(file) ? fs21.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" : "";
-  fs16.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
+  fs21.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
 .design/
 `);
   return "added";
 }
 function projectName(root) {
   try {
-    const manifest = JSON.parse(fs16.readFileSync(path16.join(root, "package.json"), "utf8"));
+    const manifest = JSON.parse(fs21.readFileSync(path20.join(root, "package.json"), "utf8"));
     if (typeof manifest.name === "string" && manifest.name) return manifest.name;
   } catch {
   }
-  return path16.basename(root);
+  return path20.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);
-  fs16.mkdirSync(paths.canvases, { recursive: true });
+  fs21.mkdirSync(paths.canvases, { recursive: true });
   if (options.gitignore) {
     const result = ensureGitignored(root);
     print(`  ${result === "added" ? green("ignored") : dim("ignored")} .design/ in .gitignore`);
@@ -2735,44 +3623,44 @@ function runSystemInit(root, options) {
   const paths = designPaths(root);
   let base = projectName(root);
   try {
-    base = JSON.parse(fs16.readFileSync(paths.config, "utf8")).name || base;
+    base = JSON.parse(fs21.readFileSync(paths.config, "utf8")).name || base;
   } catch {
   }
   const name = options.name ?? `${base} design system`;
-  print(`Scaffolding the design system in ${path16.relative(root, paths.system)}`);
-  write(path16.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
+  print(`Scaffolding the design system in ${path20.relative(root, paths.system)}`);
+  write(path20.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
 `, root);
-  write(path16.join(paths.system, "tokens.css"), TOKENS_CSS, root);
+  write(path20.join(paths.system, "tokens.css"), TOKENS_CSS, root);
   if (!options.empty) {
-    write(path16.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
-    write(path16.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
-    write(path16.join(paths.system, "specimens", "button.tsx"), BUTTON_SPECIMEN_TSX, root);
+    write(path20.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
+    write(path20.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
+    write(path20.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 = path16.join(paths.canvases, id2);
-  if (fs16.existsSync(path16.join(dir, "canvas.json"))) throw new CliError(`Canvas "${id2}" already exists in ${dir}`);
+  const dir = path20.join(paths.canvases, id2);
+  if (fs21.existsSync(path20.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(
-      path16.join(dir, "canvas.json"),
+      path20.join(dir, "canvas.json"),
       `${JSON.stringify({ title, pages: [{ id: "main", title: "Main", sections: [] }] }, null, 2)}
 `,
       root
     );
-    fs16.mkdirSync(path16.join(dir, "screens"), { recursive: true });
+    fs21.mkdirSync(path20.join(dir, "screens"), { recursive: true });
   } else {
-    write(path16.join(dir, "canvas.json"), canvasJson(title), root);
-    write(path16.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
+    write(path20.join(dir, "canvas.json"), canvasJson(title), root);
+    write(path20.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
   }
 }
 
 // src/cli/commands/shot.ts
-import fs17 from "fs";
-import path17 from "path";
+import fs22 from "fs";
+import path21 from "path";
 var OVERVIEW_TIMEOUT = 9e4;
 async function runShot(paths, target, options) {
   const [canvasId = "", screenId] = target.split("/");
@@ -2788,15 +3676,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 = path17.resolve(options.out ?? paths.shots);
-  const outDir = path17.join(outBase, canvasId);
-  fs17.mkdirSync(outDir, { recursive: true });
+  const outBase = path21.resolve(options.out ?? paths.shots);
+  const outDir = path21.join(outBase, canvasId);
+  fs22.mkdirSync(outDir, { recursive: true });
   const base = await serverBase(paths);
   const browser = await launchChrome();
   let failed = false;
   try {
     if (options.overview) {
-      if (!fs17.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there is no canvas to shoot.");
+      if (!fs22.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 } });
@@ -2812,7 +3700,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 = path17.join(outDir, `${pageId}.overview.png`);
+        const file = path21.join(outDir, `${pageId}.overview.png`);
         await page.screenshot({ path: file });
         await page.close();
         print(file);
@@ -2841,7 +3729,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 = path17.join(outDir, `${job.id}.${job.theme}.png`);
+    const file = path21.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 });
@@ -2873,8 +3761,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 = path17.join(path17.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
-  fs17.mkdirSync(outDir, { recursive: true });
+  const outDir = path21.join(path21.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
+  fs22.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();
@@ -2885,14 +3773,100 @@ async function shootSystem(paths, project, id2, options) {
   }
 }
 
+// src/cli/commands/cloud-status.ts
+import path22 from "path";
+var STATE_TEXT = {
+  in_sync: green,
+  local_changes: yellow,
+  remote_ahead: yellow,
+  conflict: red,
+  archived: dim
+};
+function detail(paths, status) {
+  const parts = [];
+  if (status.state === "remote_ahead" || status.state === "conflict")
+    parts.push(
+      status.deletedRemotely ? "deleted in the cloud" : `r${status.baseRev} \u2192 r${status.conflictRev ?? status.headRev}`
+    );
+  else if (status.baseRev) parts.push(`r${status.baseRev}`);
+  if (status.state === "local_changes" || status.state === "conflict") {
+    if (!status.baseRev && status.headRev === null) parts.push("new");
+    else if (!status.local) parts.push("deleted here");
+    else if (status.changed.length) parts.push(plural2(status.changed.length, "file"));
+  }
+  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(`${plural2(status.changed.length, "file")} changed here; the cloud only rebuilt it`);
+  if (status.conflictRev !== void 0) parts.push(`merge ${path22.relative(paths.root, incomingDir(paths, status.key))}`);
+  return parts.join(" \xB7 ");
+}
+async function printCloudStatus(paths, label) {
+  let link;
+  try {
+    link = readLink(paths);
+  } catch (error) {
+    print(`${label("Cloud")}${red(error.message)}`);
+    return;
+  }
+  const host = link?.host ?? cloudHost();
+  const credential = getCredential(host);
+  const client = credential ? new CloudClient(host, credential.token) : null;
+  let remote = null;
+  let problem = null;
+  if (!client || !credential) {
+    problem = "not signed in";
+    print(`${label("Cloud")}${dim(`not signed in to ${host} \u2014 \`design login\``)}`);
+  } else {
+    try {
+      const me = await client.me();
+      print(`${label("Cloud")}${me.email || credential.email} ${dim(host)}`);
+      if (link) remote = await client.units(link.project);
+    } catch (error) {
+      problem = error.message;
+      if (error instanceof CloudError && error.status === 401)
+        print(`${label("Cloud")}${red(`the token for ${host} was rejected \u2014 \`design login\``)}`);
+      else print(`${label("Cloud")}${credential.email} ${dim(host)}`);
+    }
+  }
+  if (!link) {
+    print(`${label("Linked")}${dim("no \u2014 `design link` lists your cloud projects")}`);
+    return;
+  }
+  let name = link.project;
+  if (client && !problem) {
+    try {
+      const { owned, shared } = await client.projects();
+      const found = [...owned, ...shared].find((project) => project.id === link.project);
+      if (found) name = `${found.name} ${dim(`(${found.id}, ${found.role}${found.archived ? ", archived" : ""})`)}`;
+    } catch {
+    }
+  }
+  print(`${label("Linked")}${name}`);
+  if (problem) print(`${" ".repeat(9)}${yellow(`cloud state unknown (${problem}); local changes only`)}`);
+  const scan = scanLocal(paths);
+  const statuses = allUnitKeys(link, scan.units, remote).map(
+    (key) => unitStatus(key, link, scan.units.get(key)?.manifest, remote)
+  );
+  if (!statuses.length) print(`${label("Units")}${dim("none yet")}`);
+  else {
+    print(label("Units"));
+    const width = Math.max(...statuses.map((status) => status.key.length));
+    for (const status of statuses) {
+      const state = STATE_TEXT[status.state](status.state.replaceAll("_", " ").padEnd(13));
+      print(`  ${status.key.padEnd(width)}  ${state} ${dim(detail(paths, status))}`);
+    }
+  }
+  if (scan.notSynced.length) print(`${label("Unsynced")}${dim(`${scan.notSynced.join(", ")} (not part of any unit)`)}`);
+}
+
 // src/cli/commands/status.ts
-var plural2 = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
+var plural3 = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
 async function runStatus(paths) {
   const project = new DesignProject(paths, DEV_URLS);
   const server = await liveServer(paths);
-  const label = (text) => bold(text.padEnd(9));
+  const label = (text2) => bold(text2.padEnd(9));
   print(
-    server ? `${label("Preview")}${green("running")} ${server.url} ${dim(`(pid ${server.pid}, since ${new Date(server.startedAt).toLocaleString()})`)}` : `${label("Preview")}${dim("not running \u2014 `design preview` starts it")}`
+    server ? `${label("Preview")}${green("running")} ${server.url} ${dim(`(foss-design ${server.version}, pid ${server.pid}, since ${new Date(server.startedAt).toLocaleString()})`)}` : `${label("Preview")}${dim("not running \u2014 `design preview` starts it")}`
   );
   print(`${label("Project")}${project.name()} ${dim(paths.root)}`);
   const system = project.system();
@@ -2900,7 +3874,7 @@ async function runStatus(paths) {
     const { doc } = system;
     print(
       `${label("System")}${doc.name} ${dim(
-        `\u2014 ${plural2(doc.tokens.length, "token")}, ${plural2(doc.components.length, "component")}, ${plural2(doc.guidelines.length, "guideline")}`
+        `\u2014 ${plural3(doc.tokens.length, "token")}, ${plural3(doc.components.length, "component")}, ${plural3(doc.guidelines.length, "guideline")}`
       )}`
     );
   } else print(`${label("System")}${dim("none \u2014 `design system init` scaffolds one")}`);
@@ -2915,17 +3889,493 @@ async function runStatus(paths) {
       const errors2 = doc.issues.filter((issue) => issue.severity === "error").length;
       const url = server ? dim(` ${server.url}/c/${doc.id}`) : "";
       print(
-        `  ${doc.id.padEnd(width)}  ${doc.title} ${dim(`${plural2(doc.pages.length, "page")} \xB7 ${plural2(frames, "screen")}`)}` + (errors2 ? ` ${red(plural2(errors2, "error"))}` : "") + url
+        `  ${doc.id.padEnd(width)}  ${doc.title} ${dim(`${plural3(doc.pages.length, "page")} \xB7 ${plural3(frames, "screen")}`)}` + (errors2 ? ` ${red(plural3(errors2, "error"))}` : "") + url
       );
     }
   }
   const issues = project.issues();
   const errors = issues.filter((issue) => issue.severity === "error").length;
   const warnings = issues.length - errors;
-  const summary = `${plural2(errors, "error")}, ${plural2(warnings, "warning")}`;
+  const summary = `${plural3(errors, "error")}, ${plural3(warnings, "warning")}`;
   print(
     `${label("Issues")}${errors ? red(summary) : warnings ? yellow(summary) : green(summary)}` + (issues.length ? dim(" \u2014 `design check` lists them") : "")
   );
+  await printCloudStatus(paths, label);
+}
+
+// src/cloud/pull.ts
+import fs23 from "fs";
+import path23 from "path";
+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}`);
+  }
+}
+function writeInside(root, rel, data) {
+  const file = path23.join(root, rel);
+  if (!isInside(root, file)) throw new CliError(`Refusing to write outside ${root}: ${rel}`);
+  fs23.mkdirSync(path23.dirname(file), { recursive: true });
+  if (!isInside(fs23.realpathSync(root), fs23.realpathSync(path23.dirname(file))))
+    throw new CliError(`Refusing to write through a link out of ${root}: ${rel}`);
+  if (fs23.existsSync(file) && fs23.lstatSync(file).isSymbolicLink()) fs23.unlinkSync(file);
+  fs23.writeFileSync(file, data);
+}
+function pruneEmpty(dir, stop) {
+  let current = dir;
+  while (isInside(stop, current) && current !== stop) {
+    try {
+      if (fs23.readdirSync(current).length) return;
+      fs23.rmdirSync(current);
+    } catch {
+      return;
+    }
+    current = path23.dirname(current);
+  }
+}
+function applyUnit(paths, key, local, target, blobs) {
+  const counts = { added: 0, changed: 0, removed: 0 };
+  const stop = key === SYSTEM_UNIT ? paths.design : path23.dirname(unitRoot(paths, key));
+  for (const rel of Object.keys(local)) {
+    if (rel in target) continue;
+    const file = path23.join(paths.design, rel);
+    fs23.rmSync(file, { force: true });
+    pruneEmpty(path23.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, log } = 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`
+      });
+      continue;
+    }
+    const unit = remote.get(key) ?? null;
+    const s = unitStatus(key, link, scan.units.get(key)?.manifest, remote);
+    if (!unit && !link.units[key] && link.conflicts[key] === void 0) {
+      if (selected.includes(key) || theirs.includes(key))
+        report.units.push({ unit: key, action: "local_only", message: "not in the cloud; `design push` creates it" });
+      continue;
+    }
+    if (unit?.archived || unit?.banned) {
+      report.units.push({
+        unit: key,
+        action: unit.archived ? "archived" : "banned",
+        baseRev: s.baseRev,
+        headRev: unit.headRev,
+        message: unit.archived ? "archived in the cloud; left as it is" : "blocked by moderation; left as it is"
+      });
+      continue;
+    }
+    const reportFor = (action) => ({
+      unit: key,
+      action,
+      rev: unit?.headRev,
+      baseRev: s.baseRev
+    });
+    if (theirs.includes(key)) {
+      const entry = reportFor(unit ? s.local ? "updated" : "created" : "deleted");
+      entry.message = "local changes discarded";
+      plans.push({ key, kind: "apply", remote: unit, report: entry });
+    } else if (!s.ahead) {
+      if (s.conflictRev !== void 0) {
+        delete link.conflicts[key];
+        fs23.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+      }
+      report.units.push({ ...reportFor("up_to_date"), rev: s.baseRev });
+    } else if (!s.changed.length) {
+      plans.push({
+        key,
+        kind: "apply",
+        remote: unit,
+        report: reportFor(!unit ? "deleted" : !s.local && !s.baseRev ? "created" : "updated")
+      });
+    } else if (unit && !s.remoteChanged.length) {
+      link.units[key] = { rev: unit.headRev, files: hashes(unit.manifest) };
+      report.units.push({
+        ...reportFor("updated"),
+        files: { added: 0, changed: 0, removed: 0 },
+        message: "rebuilt in the cloud with the same files; your local changes are kept"
+      });
+    } else if (!unit) {
+      delete link.units[key];
+      report.units.push({
+        ...reportFor("kept"),
+        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 ${path23.relative(paths.root, entry.incoming)}`;
+      if (s.conflictRev === unit.headRev && fs23.existsSync(entry.incoming)) report.units.push(entry);
+      else plans.push({ key, kind: "incoming", remote: unit, report: entry });
+    }
+  }
+  const byHash = /* @__PURE__ */ new Map();
+  for (const unit of scan.units.values())
+    for (const [rel, entry] of Object.entries(unit.manifest)) byHash.set(entry.hash, path23.join(paths.design, rel));
+  const needed = /* @__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);
+  }
+  const blobs = /* @__PURE__ */ new Map();
+  const download = [];
+  for (const hash of needed) {
+    const file = byHash.get(hash);
+    if (file) blobs.set(hash, fs23.readFileSync(file));
+    else download.push(hash);
+  }
+  if (download.length) {
+    log(`Downloading ${plural2(download.length, "file")}\u2026`);
+    await mapLimit(download, 4, async (hash) => {
+      blobs.set(hash, await client.getBlob(link.project, hash));
+    });
+  }
+  for (const plan of plans) {
+    const { key, report: entry } = plan;
+    if (plan.kind === "apply") {
+      entry.files = applyUnit(paths, key, local(key), plan.remote?.manifest ?? {}, blobs);
+      if (plan.remote) link.units[key] = { rev: plan.remote.headRev, files: hashes(plan.remote.manifest) };
+      else delete link.units[key];
+      delete link.conflicts[key];
+      fs23.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+    } else {
+      const dir = incomingDir(paths, key);
+      fs23.rmSync(dir, { recursive: true, force: true });
+      fs23.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;
+    }
+    report.units.push(entry);
+  }
+  writeLink(paths, link);
+  report.units.sort((a, b) => byUnit(a.unit, b.unit));
+  const conflicts = report.units.filter((entry) => entry.action === "conflict");
+  if (conflicts.length) {
+    report.ok = false;
+    report.error = {
+      code: "conflict",
+      message: `${plural2(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.`
+    };
+  }
+  return report;
+}
+
+// src/cloud/push.ts
+import fs24 from "fs";
+import path24 from "path";
+var megabytes = (bytes) => `${(bytes / 1024 / 1024).toFixed(bytes < 10 * 1024 * 1024 ? 1 : 0)} MB`;
+function blockedReport(status, message) {
+  return {
+    unit: status.key,
+    action: status.conflictRev !== void 0 ? "conflict" : "remote_ahead",
+    baseRev: status.baseRev,
+    headRev: status.conflictRev ?? status.headRev ?? void 0,
+    message
+  };
+}
+async function push(ctx, options) {
+  const { paths, client, log } = ctx;
+  const link = structuredClone(ctx.link);
+  const report = newReport("push", link);
+  const selected = unique(options.units.map(unitArg));
+  const resolved = unique(options.resolved.map(unitArg));
+  const scan = scanLocal(paths);
+  const remote = await client.units(link.project);
+  const clashes = caseClashes([...scan.units.keys(), ...remote.keys()]);
+  if (clashes.size) {
+    const pairs = [...clashes].filter(([a, b]) => a < b).map(([a, b]) => `${a} / ${b}`);
+    throw new CliError(
+      `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 resolved) {
+    const head = link.conflicts[key];
+    if (head === void 0)
+      throw new CliError(`${key} has no pending conflict; --resolved is for units \`design pull\` reported in conflict`);
+    link.units[key] = { rev: head, files: link.units[key]?.files ?? {} };
+    delete link.conflicts[key];
+  }
+  const status = (key) => unitStatus(key, link, scan.units.get(key)?.manifest, remote);
+  for (const key of selected) {
+    if (!scan.units.has(key) && !remote.has(key) && !link.units[key]) {
+      const known = [...scan.units.keys()].join(", ") || "none";
+      throw new CliError(`No ${key} here or in the cloud. Units here: ${known}`);
+    }
+  }
+  let candidates;
+  if (selected.length) {
+    const system = status(SYSTEM_UNIT);
+    if (!selected.includes(SYSTEM_UNIT) && scan.units.has(SYSTEM_UNIT) && system.changed.length)
+      throw new CliError(
+        "The design system has changes that are not in the cloud, and canvases are built against it. Push it too: `design push system <canvas\u2026>`, or `design push` for everything."
+      );
+    candidates = unique([...selected, ...resolved]);
+  } else {
+    candidates = [...resolved];
+    for (const key of scan.units.keys()) {
+      const s = status(key);
+      if (s.changed.length || s.conflictRev !== void 0) candidates.push(key);
+    }
+    candidates = unique(candidates);
+  }
+  const toPush = [];
+  for (const key of candidates.sort(byUnit)) {
+    const s = status(key);
+    if (!scan.units.has(key)) {
+      report.units.push({ unit: key, action: "missing_locally", message: "not here; push never deletes in the cloud" });
+      continue;
+    }
+    const unit = remote.get(key);
+    if (unit?.archived || unit?.banned) {
+      report.units.push({
+        unit: key,
+        action: unit.archived ? "archived" : "banned",
+        baseRev: s.baseRev,
+        message: unit.archived ? "archived in the cloud; unarchive it in the web app to push" : "blocked by moderation"
+      });
+      continue;
+    }
+    toPush.push(key);
+  }
+  const blocked = [];
+  const systemPush = toPush.includes(SYSTEM_UNIT);
+  const activeRemoteCanvases = [...remote.values()].filter(
+    (unit) => unit.key !== SYSTEM_UNIT && !unit.archived && !unit.banned
+  );
+  if (systemPush) {
+    for (const unit of activeRemoteCanvases) {
+      if (scan.units.has(unit.key)) continue;
+      const s = status(unit.key);
+      blocked.push(
+        blockedReport(
+          s,
+          s.baseRev ? `deleted here but active in the cloud, and a system push rebuilds every active canvas; restore it with \`design pull --theirs ${unit.key}\` or archive it in the web app` : "in the cloud but not pulled here, and a system push rebuilds every active canvas; run `design pull`"
+        )
+      );
+    }
+    for (const key of scan.units.keys()) {
+      const unit = remote.get(key);
+      if (key !== SYSTEM_UNIT && !unit?.archived && !unit?.banned && !toPush.includes(key)) toPush.push(key);
+    }
+    toPush.sort(byUnit);
+  } else if (toPush.length) {
+    const system = status(SYSTEM_UNIT);
+    if (system.ahead)
+      blocked.push(
+        blockedReport(system, "the design system changed in the cloud, and canvases are built against it; pull first")
+      );
+  }
+  for (const key of toPush) {
+    const s = status(key);
+    if (s.conflictRev !== void 0) {
+      const dir = path24.relative(paths.root, incomingDir(paths, key));
+      blocked.push(
+        blockedReport(s, `pull left the cloud version in ${dir}; merge it, then \`design push --resolved ${key}\``)
+      );
+    } else if (s.ahead) {
+      blocked.push(
+        blockedReport(
+          s,
+          s.deletedRemotely ? "deleted in the cloud; `design pull` keeps your changes as a new canvas" : `changed in the cloud since your last pull (r${s.baseRev} \u2192 r${s.headRev}); run \`design pull\``
+        )
+      );
+    }
+  }
+  for (const unit of activeRemoteCanvases)
+    if (!scan.units.has(unit.key) && !blocked.some((entry) => entry.unit === unit.key))
+      report.hints.push(
+        `${unit.key} is in the cloud but not here: \`design pull\` fetches it. Push never deletes cloud canvases; archive or delete them in the web app.`
+      );
+  if (blocked.length) {
+    report.ok = false;
+    report.units.push(...blocked.sort((a, b) => byUnit(a.unit, b.unit)));
+    const conflicts = blocked.some((entry) => entry.action === "conflict");
+    report.error = conflicts ? {
+      code: "unresolved_conflict",
+      message: "Nothing was pushed: merge the pending conflicts, then `design push --resolved <unit>`."
+    } : {
+      code: "pull_first",
+      message: "Nothing was pushed: the cloud has newer revisions. Run `design pull`, then push again."
+    };
+    return report;
+  }
+  const pushing = toPush.filter((key) => {
+    const s = status(key);
+    if (systemPush || resolved.includes(key) || s.changed.length || !remote.has(key)) return true;
+    report.units.push({ unit: key, action: "unchanged", rev: s.baseRev });
+    return false;
+  });
+  if (!pushing.length) return report;
+  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, path24.join(dir, rel));
+  };
+  for (const key of pushing) {
+    const id2 = unitCanvasId(key);
+    log(`Building ${key}\u2026`);
+    let result;
+    try {
+      result = await buildUnit(paths, key);
+    } catch (error) {
+      throw new CliError(`Building ${key} failed: ${error.message}`);
+    }
+    if (result.errors)
+      report.hints.push(
+        `${key} has ${plural2(result.errors, "error")}; \`design check\` lists them. It was pushed as it is.`
+      );
+    const source = scan.units.get(key).manifest;
+    const build2 = buildManifest(unitBuildDir(paths, key));
+    addFiles(source, paths.design);
+    addFiles(build2, unitBuildDir(paths, key));
+    units.push({
+      key,
+      baseRev: status(key).baseRev,
+      title: id2 === null ? project.system()?.doc.name ?? "Design system" : project.canvas(id2)?.doc.title ?? id2,
+      source,
+      build: build2,
+      systemRev: id2 === null ? null : systemRev
+    });
+  }
+  const missing = await client.missing(link.project, [...files.keys()]);
+  if (missing.length) {
+    const unknown = missing.find((hash) => !files.has(hash));
+    if (unknown) throw new CliError(`The cloud asked for ${unknown.slice(0, 12)}, which is not part of this push`);
+    const bytes = missing.reduce((sum, hash) => sum + fs24.statSync(files.get(hash)).size, 0);
+    log(`Uploading ${plural2(missing.length, "file")} (${megabytes(bytes)})\u2026`);
+    await mapLimit(missing, 4, async (hash) => {
+      await client.putBlob(link.project, hash, fs24.readFileSync(files.get(hash)));
+    });
+  }
+  log(`Pushing ${plural2(units.length, "unit")}\u2026`);
+  const revs2 = await client.push(link.project, units);
+  for (const unit of units) {
+    const rev = revs2.get(unit.key) ?? unit.baseRev + 1;
+    link.units[unit.key] = { rev, files: hashes(unit.source) };
+    report.units.push({ unit: unit.key, action: unit.baseRev ? "pushed" : "created", rev, baseRev: unit.baseRev });
+  }
+  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;
+}
+
+// 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.project} \xB7 ${report.host}`)}`);
+  else if (report.ok) print(`${bold(verb)} ${report.project} ${dim(report.host)}`);
+  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.message) print(`      ${dim(entry.message)}`);
+  }
+  if (quiet) print(dim(`  ${plural2(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(openSync(paths, json ? () => {
+    } : (line) => print(dim(line))));
+  } catch (error) {
+    if (!json) throw error;
+    let link = null;
+    try {
+      link = readLink(paths);
+    } catch {
+    }
+    const cloud = error instanceof CloudError ? error : null;
+    const failure = {
+      ok: false,
+      command,
+      host: link?.host ?? "",
+      project: link?.project ?? "",
+      units: [],
+      hints: [],
+      error: {
+        code: cloud?.error ?? (error instanceof CliError ? "error" : "internal"),
+        message: error.message,
+        status: cloud?.status || void 0,
+        limit: cloud?.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) {
+  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/index.ts
@@ -2940,10 +4390,13 @@ ${bold("Project")}
 
 ${bold("Preview")}
   preview [--open [path]] [--port <n>]       Start the viewer in the background on a free port (or reuse
-                                             it) and print its URL; --open also opens a browser
+                                             it; one from another version restarts) and print its URL;
+                                             --open also opens a browser
           [--restart] [--foreground]
   stop                                       Stop the viewer
-  status                                     Viewer state and a project summary
+  status                                     Viewer state, a project summary and, with a cloud link, the
+                                             account, the linked project and each unit: in sync, local
+                                             changes, remote ahead, conflict or archived
 
 ${bold("Verify")}
   check [canvas\u2026] [--render] [--json]        Validate canvas.json and the system; --render loads every
@@ -2955,13 +4408,29 @@ ${bold("Verify")}
 ${bold("Share")}
   build [canvas\u2026] [--out <dir>] [--tar]      Static site of the canvases and the design system
 
+${bold("Cloud")}  ${dim("units: system (design.json + system/) and canvas/<id>; exit 2 = conflict")}
+  login                                      Sign in to foss-design Cloud; prints a link to open (the
+                                             code is in the link) and waits for approval
+  logout                                     Forget this machine's token for the cloud
+  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
+  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
+
 ${bold("Options")}
   --root <dir>   Project folder (default: the nearest folder with .design, or the current one)
   -h, --help     This help
   -v, --version  Version
+
+${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 ? path18.resolve(rootOption) : findProjectRoot();
+  const found = rootOption ? path25.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.");
@@ -2991,6 +4460,9 @@ async function main(argv) {
       out: { type: "string" },
       overview: { type: "boolean" },
       tar: { type: "boolean" },
+      new: { type: "string" },
+      resolved: { type: "string", multiple: true },
+      theirs: { type: "string", multiple: true },
       help: { type: "boolean", short: "h" },
       version: { type: "boolean", short: "v" }
     }
@@ -3004,7 +4476,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 ? path18.resolve(values.root) : process.cwd(), {
+      return runInit(values.root ? path25.resolve(values.root) : process.cwd(), {
         name: values.name,
         gitignore: !values["no-gitignore"]
       });
@@ -3042,6 +4514,17 @@ async function main(argv) {
     }
     case "build":
       return runBuild(projectPaths(values.root), rest, { out: values.out, tar: !!values.tar });
+    case "login":
+      return runLogin();
+    case "logout":
+      return runLogout();
+    case "link":
+      if (rest.length > 1) throw new CliError("Usage: design link [<project>] [--new <name>]");
+      return runLink(projectPaths(values.root), rest[0], { newName: values.new });
+    case "push":
+      return runPush(projectPaths(values.root), rest, { resolved: values.resolved ?? [], json: !!values.json });
+    case "pull":
+      return runPull(projectPaths(values.root), rest, { theirs: values.theirs ?? [], json: !!values.json });
     default:
       throw new CliError(`Unknown command "${command}". Run \`design --help\`.`);
   }