foss-design 0.9.12 → 0.9.13

package/dist/cli.js

@@ -2,8 +2,8 @@
 
 // src/cli/index.ts
 import { spawnSync as spawnSync3 } from "child_process";
-import fs38 from "fs";
-import path37 from "path";
+import fs39 from "fs";
+import path38 from "path";
 import { parseArgs } from "util";
 
 // src/core/paths.ts
@@ -348,8 +348,8 @@ function routeError(pattern) {
   }
   return null;
 }
-function split(path38) {
-  return path38.split("/").filter(Boolean);
+function split(path39) {
+  return path39.split("/").filter(Boolean);
 }
 function compileRoute(pattern) {
   return {
@@ -368,8 +368,8 @@ function decode2(part) {
     return part;
   }
 }
-function scoreRoute(route2, path38) {
-  const parts = split(path38.split(/[?#]/)[0] ?? "").map(decode2);
+function scoreRoute(route2, path39) {
+  const parts = split(path39.split(/[?#]/)[0] ?? "").map(decode2);
   const walk2 = (s, p) => {
     if (s === route2.segments.length) return p === parts.length ? 0 : null;
     const segment = route2.segments[s];
@@ -387,11 +387,11 @@ function scoreRoute(route2, path38) {
   };
   return walk2(0, 0);
 }
-function matchRoute(entries, path38) {
+function matchRoute(entries, path39) {
   let best = null;
   for (const entry of entries) {
     for (const route2 of entry.routes) {
-      const score = scoreRoute(route2, path38);
+      const score = scoreRoute(route2, path39);
       if (score !== null && (!best || score > best.score)) best = { score, value: entry.value };
     }
   }
@@ -518,9 +518,9 @@ var CanvasSchema = z.strictObject({
   pages: z.array(z.unknown()).min(1, "add at least one page")
 });
 var ID_PATTERN = /^[a-z0-9][a-z0-9_-]*$/i;
-function formatPath(base, path38) {
+function formatPath(base, path39) {
   let out = base;
-  for (const part of path38) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
+  for (const part of path39) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
   return out;
 }
 function describeZodError(error, base = "") {
@@ -1943,10 +1943,10 @@ function linkShippedPackages(paths, appDir = null) {
     allow.add(path10.dirname(target2));
     fromApp.push(name);
   }
-  const record2 = path10.join(modules, APP_LINKS);
+  const record3 = path10.join(modules, APP_LINKS);
   let before = [];
   try {
-    before = JSON.parse(fs10.readFileSync(record2, "utf8"));
+    before = JSON.parse(fs10.readFileSync(record3, "utf8"));
   } catch {
   }
   for (const name of before) {
@@ -1962,7 +1962,7 @@ function linkShippedPackages(paths, appDir = null) {
   }
   if (fromApp.length || before.length) {
     fs10.mkdirSync(modules, { recursive: true });
-    fs10.writeFileSync(record2, JSON.stringify(fromApp.sort()));
+    fs10.writeFileSync(record3, JSON.stringify(fromApp.sort()));
   }
   const target = fs10.realpathSync(PKG_ROOT);
   linkTo(path10.join(modules, "foss-design-cli"), target);
@@ -2394,14 +2394,14 @@ async function buildSite(paths, out, options = {}) {
   for (const canvas of canvases) writeJson(path13.join(out, "api", "canvas", `${canvas.doc.id}.json`), canvas.doc);
   if (system) {
     writeJson(path13.join(out, "api", "system.json"), system.doc);
-    const texts = {};
+    const texts2 = {};
     for (const component of system.doc.components) {
       for (const rel of [component.specimen, ...component.sources]) {
         const file = path13.join(paths.root, rel);
-        if (!(rel in texts) && fs13.existsSync(file)) texts[rel] = fs13.readFileSync(file, "utf8");
+        if (!(rel in texts2) && fs13.existsSync(file)) texts2[rel] = fs13.readFileSync(file, "utf8");
       }
     }
-    writeJson(path13.join(out, "api", "sources.json"), texts);
+    writeJson(path13.join(out, "api", "sources.json"), texts2);
   }
   fs13.rmSync(staging, { recursive: true, force: true });
   const errors = [
@@ -2821,7 +2821,7 @@ var CloudClient = class {
   }
   host;
   token;
-  async send(method, path38, init) {
+  async send(method, path39, init) {
     const headers = {
       "User-Agent": `foss-design/${packageVersion()} (${os.platform()})`,
       Accept: "application/json"
@@ -2829,7 +2829,7 @@ var CloudClient = class {
     if (this.token) headers.Authorization = `Bearer ${this.token}`;
     if (init.type) headers["Content-Type"] = init.type;
     try {
-      return await fetch(`${this.host}/api${path38}`, {
+      return await fetch(`${this.host}/api${path39}`, {
         method,
         headers,
         body: init.body,
@@ -2850,8 +2850,8 @@ var CloudClient = class {
     throw errorFor(this.host, response.status, body, response.headers.get("retry-after"));
   }
   /** JSON in, JSON out; any non-2xx answer throws a CloudError. */
-  async request(method, path38, body) {
-    const response = await this.send(method, path38, {
+  async request(method, path39, body) {
+    const response = await this.send(method, path39, {
       body: body === void 0 ? void 0 : JSON.stringify(body),
       type: body === void 0 ? void 0 : "application/json",
       timeout: JSON_TIMEOUT
@@ -2863,7 +2863,7 @@ var CloudClient = class {
     try {
       return JSON.parse(text2);
     } catch {
-      throw new CloudError(`${this.host} answered ${method} ${path38} with something other than JSON`, 0, "bad_response");
+      throw new CloudError(`${this.host} answered ${method} ${path39} with something other than JSON`, 0, "bad_response");
     }
   }
   /** POST /device/code. */
@@ -3135,7 +3135,7 @@ function requireLink(paths) {
   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 sorted = (record3) => Object.fromEntries(Object.entries(record3).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0));
   const file = linkFile(paths);
   const temp = `${file}.${process.pid}.tmp`;
   const data = {
@@ -3446,17 +3446,17 @@ async function openFrame(page, url, options = {}) {
   let errors = [];
   let outdated = () => {
   };
-  const record2 = (text2) => {
+  const record3 = (text2) => {
     errors.push(text2);
     if (OUTDATED_DEP.test(text2)) outdated();
   };
-  page.on("pageerror", (error) => record2(error.message));
+  page.on("pageerror", (error) => record3(error.message));
   page.on("console", (message) => {
     if (message.type() !== "error") return;
     let text2 = message.text().replace(/^(?:\s*%[osdifcO])+\s*/, "");
     const where = message.location().url;
     if (/^Failed to load resource/.test(text2) && where && !text2.includes(where)) text2 += ` (${where})`;
-    record2(text2);
+    record3(text2);
   });
   let ready = false;
   let loadedAt = 0;
@@ -4404,18 +4404,252 @@ Still using go():
 
 // src/cli/commands/preview.ts
 import { spawn } from "child_process";
-import fs30 from "fs";
+import fs31 from "fs";
 
 // src/server/index.ts
-import fs29 from "fs";
+import fs30 from "fs";
 import http2 from "http";
-import path28 from "path";
+import path29 from "path";
 import sirv2 from "sirv";
 import { createServer, searchForWorkspaceRoot } from "vite";
 
 // src/server/api.ts
 import fs27 from "fs";
 import path26 from "path";
+
+// src/shared/drawings.ts
+var INKS = ["ink", "red", "blue", "green"];
+var STROKE_KINDS = ["pen", "arrow", "rect", "text"];
+var MAX_STROKES = 4e3;
+var MAX_ERASED = 2e4;
+var MAX_NUMBERS = 12e3;
+var MAX_TEXT = 2e3;
+var MAX_COORD = 1e5;
+var MAX_MESSAGE = 256 * 1024;
+var KEY = /^(board|markup):[a-z0-9][a-z0-9_-]{0,127}$/i;
+var STROKE_ID = /^[a-z0-9_-]{1,40}$/i;
+var markupKey = (item) => `markup:${item}`;
+var isDrawingKey = (value) => typeof value === "string" && KEY.test(value);
+var emptyDrawing = () => ({ strokes: [], erased: [] });
+var record2 = (value) => value && typeof value === "object" && !Array.isArray(value) ? value : null;
+function parseStroke(value) {
+  const data = record2(value);
+  if (!data) return null;
+  const { id: id2, kind, ink, size: size2, points, text: text2 } = data;
+  if (typeof id2 !== "string" || !STROKE_ID.test(id2)) return null;
+  if (!STROKE_KINDS.includes(kind) || !INKS.includes(ink)) return null;
+  if (typeof size2 !== "number" || !(size2 >= 0.5 && size2 <= 400)) return null;
+  if (!Array.isArray(points) || points.length > MAX_NUMBERS) return null;
+  if (!points.every((n2) => typeof n2 === "number" && Number.isFinite(n2) && Math.abs(n2) <= MAX_COORD)) return null;
+  const need = kind === "pen" ? points.length >= 3 && points.length % 3 === 0 : points.length === (kind === "text" ? 2 : 4);
+  if (!need) return null;
+  if (kind === "text" && (typeof text2 !== "string" || !text2.trim() || text2.length > MAX_TEXT)) return null;
+  const stroke = { id: id2, kind, ink, size: size2, points };
+  if (kind === "text") stroke.text = text2;
+  return stroke;
+}
+function parseIds(value, max) {
+  if (!Array.isArray(value) || value.length > max) return null;
+  return value.every((id2) => typeof id2 === "string" && STROKE_ID.test(id2)) ? value : null;
+}
+function parseOps(value) {
+  const data = record2(value);
+  if (!data) return null;
+  const ops = {};
+  if (data.add !== void 0) {
+    if (!Array.isArray(data.add) || data.add.length > MAX_STROKES) return null;
+    const add = data.add.map(parseStroke);
+    if (add.some((stroke) => !stroke)) return null;
+    ops.add = add;
+  }
+  if (data.erase !== void 0) {
+    const erase = parseIds(data.erase, MAX_ERASED);
+    if (!erase) return null;
+    ops.erase = erase;
+  }
+  return ops;
+}
+function parseDrawing(value) {
+  const data = record2(value);
+  if (!data) return null;
+  const erased = parseIds(data.erased ?? [], MAX_ERASED);
+  if (!erased || !Array.isArray(data.strokes) || data.strokes.length > MAX_STROKES) return null;
+  const strokes = data.strokes.map(parseStroke);
+  if (strokes.some((stroke) => !stroke)) return null;
+  return { strokes, erased };
+}
+function parseDrawings(value) {
+  const out = {};
+  for (const [key, drawing] of Object.entries(record2(value) ?? {})) {
+    const parsed = isDrawingKey(key) ? parseDrawing(drawing) : null;
+    if (parsed) out[key] = parsed;
+  }
+  return out;
+}
+function applyOps(drawing, ops) {
+  const erased = new Set(drawing.erased);
+  let changed = false;
+  const newlyErased = [];
+  for (const id2 of ops.erase ?? []) {
+    if (erased.has(id2)) continue;
+    erased.add(id2);
+    newlyErased.push(id2);
+    changed = true;
+  }
+  const strokes = newlyErased.length ? drawing.strokes.filter((stroke) => !erased.has(stroke.id)) : [...drawing.strokes];
+  const ids = new Set(strokes.map((stroke) => stroke.id));
+  for (const stroke of ops.add ?? []) {
+    if (erased.has(stroke.id) || ids.has(stroke.id) || strokes.length >= MAX_STROKES) continue;
+    strokes.push(stroke);
+    ids.add(stroke.id);
+    changed = true;
+  }
+  if (!changed) return null;
+  const erasedList = [...drawing.erased, ...newlyErased];
+  return { strokes, erased: erasedList.length > MAX_ERASED ? erasedList.slice(-MAX_ERASED) : erasedList };
+}
+function diffDrawings(from, to) {
+  const toErased = new Set(to.erased);
+  const toIds = new Set(to.strokes.map((stroke) => stroke.id));
+  const add = from.strokes.filter((stroke) => !toIds.has(stroke.id) && !toErased.has(stroke.id));
+  const erase = from.erased.filter((id2) => !toErased.has(id2));
+  if (!add.length && !erase.length) return null;
+  return { ...add.length ? { add } : {}, ...erase.length ? { erase } : {} };
+}
+var TEXT_LINE_HEIGHT = 1.25;
+function textBox(stroke) {
+  const lines = (stroke.text ?? "").split("\n");
+  const longest = Math.max(...lines.map((line) => line.length), 1);
+  return {
+    x: stroke.points[0],
+    y: stroke.points[1],
+    w: longest * stroke.size * 0.56,
+    h: lines.length * stroke.size * TEXT_LINE_HEIGHT
+  };
+}
+function strokeBounds(stroke) {
+  if (stroke.kind === "text") return textBox(stroke);
+  const step = stroke.kind === "pen" ? 3 : 2;
+  const pad = stroke.kind === "arrow" ? Math.max(10, stroke.size * 4.5) : stroke.size;
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (let i = 0; i + 1 < stroke.points.length; i += step) {
+    minX = Math.min(minX, stroke.points[i]);
+    minY = Math.min(minY, stroke.points[i + 1]);
+    maxX = Math.max(maxX, stroke.points[i]);
+    maxY = Math.max(maxY, stroke.points[i + 1]);
+  }
+  return { x: minX - pad, y: minY - pad, w: maxX - minX + pad * 2, h: maxY - minY + pad * 2 };
+}
+var union = (a, b) => {
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  return { x, y, w: Math.max(a.x + a.w, b.x + b.w) - x, h: Math.max(a.y + a.h, b.y + b.h) - y };
+};
+var GROUP_GAP = 240;
+function drawingGroups(strokes) {
+  let groups = strokes.map((stroke) => ({ box: strokeBounds(stroke), strokes: [stroke] }));
+  const near = (a, b) => a.x - GROUP_GAP < b.x + b.w && b.x - GROUP_GAP < a.x + a.w && a.y - GROUP_GAP < b.y + b.h && b.y - GROUP_GAP < a.y + a.h;
+  for (let merged = true; merged; ) {
+    merged = false;
+    const next = [];
+    for (const group of groups) {
+      const into = next.find((other) => near(other.box, group.box));
+      if (into) {
+        into.box = union(into.box, group.box);
+        into.strokes.push(...group.strokes);
+        merged = true;
+      } else next.push({ box: group.box, strokes: [...group.strokes] });
+    }
+    groups = next;
+  }
+  const order = new Map(strokes.map((stroke, i) => [stroke.id, i]));
+  for (const group of groups) group.strokes.sort((a, b) => order.get(a.id) - order.get(b.id));
+  groups.sort((a, b) => a.box.y - b.box.y);
+  const rows = [];
+  for (const group of groups) {
+    const row = rows.at(-1);
+    if (row && group.box.y < row[0].box.y + row[0].box.h / 2) row.push(group);
+    else rows.push([group]);
+  }
+  return rows.flatMap((row) => row.sort((a, b) => a.box.x - b.box.x));
+}
+function parseLive(value) {
+  const data = record2(value);
+  if (!data) return null;
+  const { id: id2, kind, ink, size: size2, text: text2, at, points } = data;
+  if (typeof id2 !== "string" || !STROKE_ID.test(id2)) return null;
+  if (!STROKE_KINDS.includes(kind) || !INKS.includes(ink)) return null;
+  if (typeof size2 !== "number" || !(size2 >= 0.5 && size2 <= 400)) return null;
+  if (typeof at !== "number" || !Number.isInteger(at) || at < 0 || at > MAX_NUMBERS) return null;
+  if (!Array.isArray(points) || points.length > MAX_NUMBERS) return null;
+  if (!points.every((n2) => typeof n2 === "number" && Number.isFinite(n2) && Math.abs(n2) <= MAX_COORD)) return null;
+  if (text2 !== void 0 && (typeof text2 !== "string" || text2.length > MAX_TEXT)) return null;
+  const stroke = { id: id2, kind, ink, size: size2, at, points };
+  if (typeof text2 === "string") stroke.text = text2;
+  return stroke;
+}
+function parseJson(raw) {
+  if (raw.length > MAX_MESSAGE) return null;
+  try {
+    return record2(JSON.parse(raw));
+  } catch {
+    return null;
+  }
+}
+function parseClientMessage(raw) {
+  const data = parseJson(raw);
+  if (!data || !isDrawingKey(data.key)) return null;
+  const key = data.key;
+  if (data.type === "ops") {
+    if (typeof data.id !== "number" || !Number.isInteger(data.id)) return null;
+    const ops = parseOps(data);
+    return ops ? { type: "ops", id: data.id, key, ...ops } : null;
+  }
+  if (data.type === "live") {
+    const stroke = parseLive(data.stroke);
+    return stroke ? { type: "live", key, stroke } : null;
+  }
+  if (data.type === "live-end")
+    return typeof data.id === "string" && STROKE_ID.test(data.id) ? { type: "live-end", key, id: data.id } : null;
+  return null;
+}
+function parseServerMessage(raw) {
+  const data = parseJson(raw);
+  if (!data) return null;
+  const peer = typeof data.peer === "string" ? data.peer : "";
+  switch (data.type) {
+    case "hello":
+      return { type: "hello", peer, canDraw: data.canDraw === true, drawings: parseDrawings(data.drawings) };
+    case "ops": {
+      const ops = isDrawingKey(data.key) ? parseOps(data) : null;
+      return ops ? { type: "ops", key: data.key, ...ops, peer } : null;
+    }
+    case "ack":
+      return typeof data.id === "number" ? { type: "ack", id: data.id } : null;
+    case "doc": {
+      const drawing = isDrawingKey(data.key) ? parseDrawing(data.drawing) : null;
+      return drawing ? { type: "doc", key: data.key, drawing } : null;
+    }
+    case "live": {
+      const stroke = isDrawingKey(data.key) ? parseLive(data.stroke) : null;
+      if (!stroke) return null;
+      const name = typeof data.name === "string" ? data.name.slice(0, 80) : void 0;
+      return { type: "live", key: data.key, stroke, peer, ...name ? { name } : {} };
+    }
+    case "live-end":
+      return isDrawingKey(data.key) && typeof data.id === "string" ? { type: "live-end", key: data.key, id: data.id, peer } : null;
+    case "gone":
+      return { type: "gone", peer };
+    case "error":
+      return { type: "error", message: typeof data.message === "string" ? data.message.slice(0, 500) : "error" };
+  }
+  return null;
+}
+
+// src/server/api.ts
 function sendJson(res, status, body) {
   res.writeHead(status, { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" });
   res.end(JSON.stringify(body));
@@ -4436,7 +4670,7 @@ function readBody(req, limit = 25 * 1024 * 1024) {
   });
 }
 async function handleApi(ctx, req, res, url) {
-  const { project, events, snapshots } = ctx;
+  const { project, events, snapshots, drawings } = ctx;
   const route2 = url.pathname.slice("/api".length);
   const method = req.method ?? "GET";
   if (route2 === "/health") {
@@ -4497,6 +4731,25 @@ async function handleApi(ctx, req, res, url) {
     }
     return true;
   }
+  const drawingsMatch = /^\/drawings\/([^/]+)(?:\/([^/]+))?$/.exec(route2);
+  if (drawingsMatch) {
+    const canvas = decodeURIComponent(drawingsMatch[1]);
+    const key = drawingsMatch[2] ? decodeURIComponent(drawingsMatch[2]) : null;
+    if (method === "GET" && !key) {
+      const found = await drawings.read(canvas);
+      if (found) sendJson(res, 200, found);
+      else sendJson(res, 404, { error: `No canvas "${canvas}"` });
+      return true;
+    }
+    if (method === "DELETE" && key && isDrawingKey(key)) {
+      const erased = await drawings.clear(canvas, key);
+      if (erased === null) sendJson(res, 404, { error: `No canvas "${canvas}"` });
+      else sendJson(res, 200, { erased });
+      return true;
+    }
+    sendJson(res, 405, { error: "GET /api/drawings/<canvas> or DELETE /api/drawings/<canvas>/<key>" });
+    return true;
+  }
   const snapshotPost = /^\/snapshots\/([^/]+)\/([^/]+)$/.exec(route2);
   if (snapshotPost && method === "POST") {
     const canvas = decodeURIComponent(snapshotPost[1]);
@@ -4533,6 +4786,433 @@ async function handleApi(ctx, req, res, url) {
   return false;
 }
 
+// src/server/drawings.ts
+import fs28 from "fs";
+import path27 from "path";
+import WebSocket, { WebSocketServer } from "ws";
+
+// src/server/hosts.ts
+var LOOPBACK = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "[::1]"]);
+var FRAME_HOST = "127.0.0.1";
+var VIEWER_HOST = "localhost";
+function parseHost(header) {
+  const match = /^(\[[0-9a-f:.]+\]|[a-z0-9.-]+)(?::(\d{1,5}))?$/i.exec(header ?? "");
+  if (!match) return null;
+  return { name: match[1].toLowerCase(), port: match[2] ? Number(match[2]) : 80 };
+}
+function isAllowedHost(header, port, extra) {
+  const host = parseHost(header);
+  if (!host || host.port !== port) return false;
+  return LOOPBACK.has(host.name) || host.name.endsWith(".localhost") || !!extra && host.name === extra.toLowerCase();
+}
+function isFrameApi(pathname, method) {
+  if (pathname === "/api/health") return method === "GET";
+  return /^\/api\/snapshots\/[^/]+\/[^/]+$/.test(pathname) && (method === "GET" || method === "POST");
+}
+
+// src/server/drawings.ts
+var FILE = ".drawings.json";
+var IDLE_MS = 3e4;
+var SYNC_WAIT_MS = 6e3;
+var drawingsFile = (paths, canvas) => path27.join(paths.canvases, canvas, FILE);
+var send = (socket, message) => {
+  if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify(message));
+};
+function readFile(file) {
+  let raw;
+  try {
+    raw = fs28.readFileSync(file, "utf8");
+  } catch {
+    return {};
+  }
+  try {
+    return parseDrawings(JSON.parse(raw).drawings);
+  } catch {
+    console.warn(`[design] ${file} is not valid JSON; its drawings are not shown`);
+    return {};
+  }
+}
+var Room = class {
+  constructor(hub, canvas) {
+    this.hub = hub;
+    this.canvas = canvas;
+    this.drawings = readFile(this.file);
+  }
+  hub;
+  canvas;
+  drawings;
+  clients = /* @__PURE__ */ new Map();
+  cloud = null;
+  written = null;
+  saveTimer;
+  idleTimer;
+  get file() {
+    return drawingsFile(this.hub.paths, this.canvas);
+  }
+  canDraw() {
+    return this.cloud?.canDraw ?? true;
+  }
+  cloudState() {
+    return this.cloud ? this.cloud.state : "unlinked";
+  }
+  /** The cloud's answer, or what is here once `timeout` passes. */
+  async synced(timeout) {
+    this.touch();
+    if (this.cloud) await Promise.race([this.cloud.ready, new Promise((resolve) => setTimeout(resolve, timeout))]);
+  }
+  /** Keep (or open) the cloud socket for a while even with nobody here: the CLI reads through it. */
+  touch() {
+    this.connectCloud();
+    this.release();
+  }
+  connectCloud() {
+    clearTimeout(this.idleTimer);
+    if (this.cloud) return;
+    const link = readLink(this.hub.paths);
+    const credential = link ? getCredential(link.host) : null;
+    if (!link || !credential) return;
+    this.cloud = new CloudRelay(this, link.host, link.project, credential.token);
+  }
+  /** With nobody left, let the cloud socket go after a while. */
+  release() {
+    clearTimeout(this.idleTimer);
+    if (this.clients.size) return;
+    this.idleTimer = setTimeout(() => {
+      if (this.clients.size) return;
+      this.cloud?.close();
+      this.cloud = null;
+    }, IDLE_MS);
+    this.idleTimer.unref();
+  }
+  join(socket) {
+    const client = { peer: this.hub.nextPeer(), live: /* @__PURE__ */ new Map() };
+    this.clients.set(socket, client);
+    this.connectCloud();
+    send(socket, { type: "hello", peer: client.peer, canDraw: this.canDraw(), drawings: this.drawings });
+    socket.on("message", (data, isBinary) => {
+      if (isBinary) return;
+      const message = parseClientMessage(data.toString());
+      if (message) this.fromClient(socket, client, message);
+      else send(socket, { type: "error", message: "Not a drawings message." });
+    });
+    socket.on("close", () => {
+      this.clients.delete(socket);
+      for (const [id2, key] of client.live) this.cloud?.send({ type: "live-end", key, id: id2 });
+      this.broadcast({ type: "gone", peer: client.peer });
+      this.release();
+    });
+    socket.on("error", () => socket.terminate());
+  }
+  fromClient(socket, client, message) {
+    if (!this.canDraw()) {
+      send(socket, { type: "error", message: "You can look at these drawings but not draw on them." });
+      return;
+    }
+    if (message.type === "ops") {
+      this.change(message.key, { add: message.add, erase: message.erase }, client.peer);
+      send(socket, { type: "ack", id: message.id });
+    } else if (message.type === "live") {
+      client.live.set(message.stroke.id, message.key);
+      this.broadcast({ ...message, peer: client.peer }, socket);
+      this.cloud?.send(message);
+    } else {
+      client.live.delete(message.id);
+      this.broadcast({ ...message, peer: client.peer }, socket);
+      this.cloud?.send(message);
+    }
+  }
+  /** A change made here (a viewer, the CLI): applied, and passed on to the cloud. */
+  change(key, ops, peer) {
+    this.apply(key, ops, peer);
+    this.cloud?.forward(key, ops);
+  }
+  /** Apply ops from anywhere; tell everyone here and save when they changed something. */
+  apply(key, ops, peer) {
+    const next = applyOps(this.drawings[key] ?? emptyDrawing(), ops);
+    if (!next) return false;
+    this.drawings = { ...this.drawings, [key]: next };
+    this.broadcast({ type: "ops", key, ...ops, peer });
+    this.save();
+    return true;
+  }
+  /** A whole drawing from elsewhere, merged with this one; returns what this side has that it lacked. */
+  merge(key, drawing) {
+    const here = this.drawings[key] ?? emptyDrawing();
+    const missing = diffDrawings(drawing, here);
+    if (missing) {
+      const next = applyOps(here, missing);
+      if (next) {
+        this.drawings = { ...this.drawings, [key]: next };
+        this.broadcast({ type: "doc", key, drawing: next });
+        this.save();
+      }
+    }
+    return diffDrawings(this.drawings[key] ?? emptyDrawing(), drawing);
+  }
+  /** The cloud's answer came in, or its verdict on drawing changed: everyone here starts over from it. */
+  rehello() {
+    for (const [socket, client] of this.clients)
+      send(socket, { type: "hello", peer: client.peer, canDraw: this.canDraw(), drawings: this.drawings });
+  }
+  broadcast(message, except) {
+    const data = JSON.stringify(message);
+    for (const socket of this.clients.keys())
+      if (socket !== except && socket.readyState === WebSocket.OPEN) socket.send(data);
+  }
+  save() {
+    clearTimeout(this.saveTimer);
+    this.saveTimer = setTimeout(() => this.flush(), 150);
+  }
+  flush() {
+    clearTimeout(this.saveTimer);
+    const dir = path27.dirname(this.file);
+    if (!fs28.existsSync(dir)) return;
+    const drawings = Object.fromEntries(
+      Object.entries(this.drawings).filter(([, d]) => d.strokes.length || d.erased.length)
+    );
+    const text2 = `${JSON.stringify({ drawings })}
+`;
+    if (text2 === this.written) return;
+    const temp = `${this.file}.${process.pid}.tmp`;
+    fs28.writeFileSync(temp, text2);
+    fs28.renameSync(temp, this.file);
+    this.written = text2;
+  }
+  /** The file changed on disk: unless it was this server's own write, it is the drawings now. */
+  reload() {
+    let raw = null;
+    try {
+      raw = fs28.readFileSync(this.file, "utf8");
+    } catch {
+    }
+    if (raw !== null && raw === this.written) return;
+    const next = readFile(this.file);
+    for (const key of /* @__PURE__ */ new Set([...Object.keys(this.drawings), ...Object.keys(next)])) {
+      const drawing = next[key] ?? emptyDrawing();
+      if (JSON.stringify(drawing) === JSON.stringify(this.drawings[key] ?? emptyDrawing())) continue;
+      this.broadcast({ type: "doc", key, drawing });
+      const ops = diffDrawings(drawing, this.drawings[key] ?? emptyDrawing());
+      if (ops) this.cloud?.forward(key, ops);
+    }
+    this.drawings = next;
+    this.written = raw;
+  }
+  close() {
+    this.flush();
+    this.cloud?.close();
+    this.cloud = null;
+    clearTimeout(this.idleTimer);
+    for (const socket of this.clients.keys()) socket.close(1001);
+  }
+};
+var CloudRelay = class {
+  constructor(room, host, project, token) {
+    this.room = room;
+    this.host = host;
+    this.project = project;
+    this.token = token;
+    this.ready = new Promise((resolve) => {
+      this.settle = resolve;
+    });
+    this.connect();
+  }
+  room;
+  host;
+  project;
+  token;
+  canDraw = true;
+  state = "connecting";
+  /** Settles on the cloud's first answer, or once it is clear there will be none soon. */
+  ready;
+  settle = () => {
+  };
+  socket = null;
+  peer = "";
+  nextId = 1;
+  delay = 1e3;
+  timer;
+  closed = false;
+  /** Cloud peers with strokes on the way here, cleared when the socket drops. */
+  peers = /* @__PURE__ */ new Set();
+  url() {
+    const base = new URL(this.host);
+    base.protocol = base.protocol === "https:" ? "wss:" : "ws:";
+    base.pathname = `/api/projects/${encodeURIComponent(this.project)}/canvases/${encodeURIComponent(this.room.canvas)}/drawings`;
+    return base.href;
+  }
+  connect() {
+    if (this.closed) return;
+    const socket = new WebSocket(this.url(), {
+      headers: { Authorization: `Bearer ${this.token}` },
+      maxPayload: MAX_MESSAGE * 4,
+      handshakeTimeout: 1e4
+    });
+    this.socket = socket;
+    let refusal = 0;
+    socket.on("unexpected-response", (_req, res) => {
+      refusal = res.statusCode ?? 0;
+      res.resume();
+      socket.terminate();
+    });
+    socket.on("message", (data, isBinary) => {
+      if (isBinary) return;
+      const message = parseServerMessage(data.toString());
+      if (message) this.receive(message);
+    });
+    socket.on("error", () => {
+    });
+    socket.on("close", () => {
+      if (this.socket !== socket) return;
+      this.socket = null;
+      for (const peer of this.peers) this.room.broadcast({ type: "gone", peer });
+      this.peers.clear();
+      if (this.closed) return;
+      const wasSynced = this.state === "synced";
+      this.state = "offline";
+      this.settle();
+      const wait = refusal === 401 ? 30 * 6e4 : refusal >= 400 ? 5 * 6e4 : wasSynced ? 1e3 : this.delay;
+      this.delay = Math.min(this.delay * 2, 3e4);
+      if (!this.canDraw) {
+        this.canDraw = true;
+        this.room.rehello();
+      }
+      this.timer = setTimeout(() => this.connect(), wait);
+      this.timer.unref();
+    });
+  }
+  receive(message) {
+    const cloudPeer = (peer) => `cloud:${peer}`;
+    switch (message.type) {
+      case "hello": {
+        this.peer = message.peer;
+        this.canDraw = message.canDraw;
+        this.state = "synced";
+        this.delay = 1e3;
+        const keys = /* @__PURE__ */ new Set([...Object.keys(message.drawings), ...Object.keys(this.room.drawings)]);
+        for (const key of keys) {
+          const up = this.room.merge(key, message.drawings[key] ?? emptyDrawing());
+          if (up && this.canDraw) this.forward(key, up);
+        }
+        this.room.rehello();
+        this.settle();
+        break;
+      }
+      case "ops":
+        if (message.peer !== this.peer)
+          this.room.apply(message.key, { add: message.add, erase: message.erase }, cloudPeer(message.peer));
+        break;
+      case "doc": {
+        const up = this.room.merge(message.key, message.drawing);
+        if (up && this.canDraw) this.forward(message.key, up);
+        break;
+      }
+      case "live":
+      case "live-end":
+        this.peers.add(cloudPeer(message.peer));
+        this.room.broadcast({ ...message, peer: cloudPeer(message.peer) });
+        break;
+      case "gone":
+        this.peers.delete(cloudPeer(message.peer));
+        this.room.broadcast({ type: "gone", peer: cloudPeer(message.peer) });
+        break;
+      case "error":
+        console.warn(`[design] cloud drawings (${this.room.canvas}): ${message.message}`);
+        break;
+    }
+  }
+  forward(key, ops) {
+    this.send({ type: "ops", id: this.nextId++, key, ...ops });
+  }
+  send(message) {
+    if (this.state !== "synced" || !this.canDraw || !this.socket) return;
+    send(this.socket, message);
+  }
+  close() {
+    this.closed = true;
+    clearTimeout(this.timer);
+    this.socket?.close(1e3);
+    this.socket = null;
+    this.settle();
+  }
+};
+var DrawingHub = class {
+  constructor(paths, hasCanvas) {
+    this.paths = paths;
+    this.hasCanvas = hasCanvas;
+  }
+  paths;
+  hasCanvas;
+  rooms = /* @__PURE__ */ new Map();
+  server = new WebSocketServer({ noServer: true, maxPayload: MAX_MESSAGE });
+  peers = 0;
+  nextPeer() {
+    this.peers += 1;
+    return `p${this.peers}`;
+  }
+  room(canvas) {
+    if (!ID_PATTERN.test(canvas) || !this.hasCanvas(canvas)) return null;
+    let room = this.rooms.get(canvas);
+    if (!room) {
+      room = new Room(this, canvas);
+      this.rooms.set(canvas, room);
+    }
+    return room;
+  }
+  /**
+   * `GET /api/drawings/<canvas>` as a socket. Only the viewer's own pages may open one: the Origin
+   * is this server on the viewer's host (a site elsewhere, or a frame on 127.0.0.1, is refused).
+   */
+  upgrade(req, socket, head, port, extraHost) {
+    const refuse = (status, text2) => {
+      socket.end(`HTTP/1.1 ${status} ${text2}\r
+Connection: close\r
+Content-Length: 0\r
+\r
+`);
+    };
+    const host = req.headers.host;
+    const origin = req.headers.origin;
+    if (!isAllowedHost(host, port, extraHost) || parseHost(host)?.name === FRAME_HOST || origin !== `http://${host}`)
+      return refuse(403, "Forbidden");
+    const url = new URL(req.url ?? "/", "http://localhost");
+    let canvas = "";
+    try {
+      canvas = decodeURIComponent(url.pathname.slice("/api/drawings/".length));
+    } catch {
+    }
+    const room = this.room(canvas);
+    if (!room) return refuse(404, "Not Found");
+    this.server.handleUpgrade(req, socket, head, (ws) => room.join(ws));
+  }
+  /** Every drawing of a canvas, after the cloud had a moment to answer when `.design` is linked. */
+  async read(canvas) {
+    const room = this.room(canvas);
+    if (!room) return null;
+    await room.synced(SYNC_WAIT_MS);
+    return { drawings: room.drawings, cloud: room.cloudState() };
+  }
+  /** Erase everything in one drawing; the number of strokes erased, or null without such a canvas. */
+  async clear(canvas, key) {
+    const room = this.room(canvas);
+    if (!room) return null;
+    await room.synced(SYNC_WAIT_MS);
+    const erase = (room.drawings[key]?.strokes ?? []).map((stroke) => stroke.id);
+    if (!erase.length) return 0;
+    room.change(key, { erase }, "cli");
+    room.flush();
+    return erase.length;
+  }
+  /** A `.drawings.json` changed on disk. */
+  fileChanged(canvas) {
+    this.rooms.get(canvas)?.reload();
+  }
+  close() {
+    for (const room of this.rooms.values()) room.close();
+    this.rooms.clear();
+    this.server.close();
+  }
+};
+
 // src/server/events.ts
 var EventHub = class {
   clients = /* @__PURE__ */ new Set();
@@ -4566,82 +5246,63 @@ var EventHub = class {
   }
 };
 
-// src/server/hosts.ts
-var LOOPBACK = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "[::1]"]);
-var FRAME_HOST = "127.0.0.1";
-var VIEWER_HOST = "localhost";
-function parseHost(header) {
-  const match = /^(\[[0-9a-f:.]+\]|[a-z0-9.-]+)(?::(\d{1,5}))?$/i.exec(header ?? "");
-  if (!match) return null;
-  return { name: match[1].toLowerCase(), port: match[2] ? Number(match[2]) : 80 };
-}
-function isAllowedHost(header, port, extra) {
-  const host = parseHost(header);
-  if (!host || host.port !== port) return false;
-  return LOOPBACK.has(host.name) || host.name.endsWith(".localhost") || !!extra && host.name === extra.toLowerCase();
-}
-function isFrameApi(pathname, method) {
-  if (pathname === "/api/health") return method === "GET";
-  return /^\/api\/snapshots\/[^/]+\/[^/]+$/.test(pathname) && (method === "GET" || method === "POST");
-}
-
 // src/server/state.ts
-import fs28 from "fs";
+import fs29 from "fs";
 import os4 from "os";
-import path27 from "path";
-var stateFile2 = (paths) => path27.join(paths.cache, "server.json");
-var logFile = (paths) => path27.join(paths.cache, "server.log");
+import path28 from "path";
+var stateFile2 = (paths) => path28.join(paths.cache, "server.json");
+var logFile = (paths) => path28.join(paths.cache, "server.log");
 function readState(paths) {
   try {
-    return JSON.parse(fs28.readFileSync(stateFile2(paths), "utf8"));
+    return JSON.parse(fs29.readFileSync(stateFile2(paths), "utf8"));
   } catch {
     return null;
   }
 }
 function registryDir() {
-  const base = process.platform === "win32" ? process.env.LOCALAPPDATA || process.env.APPDATA || path27.join(os4.homedir(), "AppData", "Local") : process.env.XDG_CACHE_HOME || path27.join(os4.homedir(), ".cache");
-  return path27.join(base, "foss-design", "previews");
+  const base = process.platform === "win32" ? process.env.LOCALAPPDATA || process.env.APPDATA || path28.join(os4.homedir(), "AppData", "Local") : process.env.XDG_CACHE_HOME || path28.join(os4.homedir(), ".cache");
+  return path28.join(base, "foss-design", "previews");
 }
-var entryFile = (pid) => path27.join(registryDir(), `${pid}.json`);
+var entryFile = (pid) => path28.join(registryDir(), `${pid}.json`);
 function writeState(paths, state) {
-  fs28.mkdirSync(paths.cache, { recursive: true });
-  fs28.writeFileSync(stateFile2(paths), `${JSON.stringify(state, null, 2)}
+  fs29.mkdirSync(paths.cache, { recursive: true });
+  fs29.writeFileSync(stateFile2(paths), `${JSON.stringify(state, null, 2)}
 `);
   try {
-    fs28.mkdirSync(registryDir(), { recursive: true });
-    fs28.writeFileSync(entryFile(state.pid), `${JSON.stringify(state, null, 2)}
+    fs29.mkdirSync(registryDir(), { recursive: true });
+    fs29.writeFileSync(entryFile(state.pid), `${JSON.stringify(state, null, 2)}
 `);
   } catch {
   }
 }
 function clearState(paths, pid) {
   const state = readState(paths);
-  fs28.rmSync(entryFile(pid ?? state?.pid ?? -1), { force: true });
+  fs29.rmSync(entryFile(pid ?? state?.pid ?? -1), { force: true });
   if (pid !== void 0 && state && state.pid !== pid) return;
-  fs28.rmSync(stateFile2(paths), { force: true });
+  fs29.rmSync(stateFile2(paths), { force: true });
 }
 function listPreviews() {
   let files = [];
   try {
-    files = fs28.readdirSync(registryDir()).filter((name) => name.endsWith(".json"));
+    files = fs29.readdirSync(registryDir()).filter((name) => name.endsWith(".json"));
   } catch {
     return [];
   }
   const found = [];
   for (const name of files) {
-    const file = path27.join(registryDir(), name);
+    const file = path28.join(registryDir(), name);
     let state = null;
     try {
-      state = JSON.parse(fs28.readFileSync(file, "utf8"));
+      state = JSON.parse(fs29.readFileSync(file, "utf8"));
     } catch {
     }
     if (!state?.pid || !pidAlive(state.pid)) {
-      fs28.rmSync(file, { force: true });
+      fs29.rmSync(file, { force: true });
       continue;
     }
     let recorded = null;
     try {
-      recorded = JSON.parse(fs28.readFileSync(path27.join(state.root, ".design", ".cache", "server.json"), "utf8"));
+      recorded = JSON.parse(fs29.readFileSync(path28.join(state.root, ".design", ".cache", "server.json"), "utf8"));
     } catch {
     }
     found.push({ ...state, tracked: recorded?.pid === state.pid });
@@ -4655,11 +5316,11 @@ async function stopPreview(entry) {
   }
   const until = Date.now() + 5e3;
   while (Date.now() < until && pidAlive(entry.pid)) await new Promise((resolve) => setTimeout(resolve, 100));
-  fs28.rmSync(entryFile(entry.pid), { force: true });
-  const stateAt = path27.join(entry.root, ".design", ".cache", "server.json");
+  fs29.rmSync(entryFile(entry.pid), { force: true });
+  const stateAt = path28.join(entry.root, ".design", ".cache", "server.json");
   try {
-    if (JSON.parse(fs28.readFileSync(stateAt, "utf8")).pid === entry.pid)
-      fs28.rmSync(stateAt, { force: true });
+    if (JSON.parse(fs29.readFileSync(stateAt, "utf8")).pid === entry.pid)
+      fs29.rmSync(stateAt, { force: true });
   } catch {
   }
 }
@@ -4718,14 +5379,15 @@ function notFoundPage(res, title, text2) {
 }
 async function startDevServer(options) {
   const paths = designPaths(options.root);
-  if (!fs29.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
-  fs29.mkdirSync(paths.cache, { recursive: true });
+  if (!fs30.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
+  fs30.mkdirSync(paths.cache, { recursive: true });
   const snapshots = new SnapshotStore(paths.snapshots);
   const project = new DesignProject(paths, DEV_URLS, snapshots.lookup);
   const entries = new Entries(project);
   entries.sync();
   const links = linkShippedPackages(paths, project.appDir());
   const events = new EventHub();
+  const drawings = new DrawingHub(paths, (id2) => project.canvasIds().includes(id2));
   const httpServer = http2.createServer();
   const listening = () => httpServer.address()?.port ?? 0;
   dropStaleDepCache(paths, project.appDir());
@@ -4746,8 +5408,8 @@ async function startDevServer(options) {
         // `.cache` is ours (server.log, snapshots, builds): a change there must not reload frames. The
         // generated entries are modules the frames load, so those stay watched.
         ignored: (file) => {
-          const rel = toPosix(path28.relative(paths.cache, file));
-          const inCache = rel !== "" && !rel.startsWith("..") && !path28.isAbsolute(rel);
+          const rel = toPosix(path29.relative(paths.cache, file));
+          const inCache = rel !== "" && !rel.startsWith("..") && !path29.isAbsolute(rel);
           return inCache && rel !== "entries" && !rel.startsWith("entries/");
         }
       },
@@ -4756,7 +5418,7 @@ async function startDevServer(options) {
       forwardConsole: false
     },
     optimizeDeps: {
-      entries: entries.files().map((file) => toPosix(path28.relative(paths.design, file)))
+      entries: entries.files().map((file) => toPosix(path29.relative(paths.design, file)))
     }
   });
   const publicDir = project.publicDir();
@@ -4768,21 +5430,21 @@ async function startDevServer(options) {
       return null;
     }
   };
-  const viewer = fs29.existsSync(PKG.viewer) ? sirv2(PKG.viewer, { dev: true, etag: true }) : null;
-  const viewerIndex = path28.join(PKG.viewer, "index.html");
+  const viewer = fs30.existsSync(PKG.viewer) ? sirv2(PKG.viewer, { dev: true, etag: true }) : null;
+  const viewerIndex = path29.join(PKG.viewer, "index.html");
   const serveViewerIndex = (req, res, url2) => {
     if (parseHost(req.headers.host)?.name === FRAME_HOST) {
       res.writeHead(302, { location: `http://${VIEWER_HOST}:${listening()}${url2.pathname}${url2.search}` });
       res.end();
       return;
     }
-    const html = fs29.readFileSync(viewerIndex, "utf8").replace(/<head>/i, '<head>\n<base href="/">');
+    const html = fs30.readFileSync(viewerIndex, "utf8").replace(/<head>/i, '<head>\n<base href="/">');
     res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
     res.end(html);
   };
-  const ctx = { project, events, snapshots };
+  const ctx = { project, events, snapshots, drawings };
   const systemCssUrl = `/${relToDesign(paths, entries.systemCssFile())}`;
-  const bootUrl = `/${relToDesign(paths, path28.join(entries.dir, HTML_BOOT))}`;
+  const bootUrl = `/${relToDesign(paths, path29.join(entries.dir, HTML_BOOT))}`;
   const frameHead = (source, extra = {}) => {
     const canvasTheme = source.canvas === SYSTEM_CANVAS ? void 0 : project.canvas(source.canvas)?.doc.theme;
     return {
@@ -4803,7 +5465,7 @@ async function startDevServer(options) {
       notFoundPage(res, "Screen not found", `No screen "${id2}" in "${canvas}". Check canvas.json.`);
       return;
     }
-    if (!fs29.existsSync(entries.entryFile(source))) entries.sync();
+    if (!fs30.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" });
@@ -4812,8 +5474,8 @@ async function startDevServer(options) {
   };
   const serveHtmlScreen = async (res, url2) => {
     const rel = decodeURIComponent(url2.pathname.slice("/_fs/".length));
-    const file = path28.resolve(paths.design, rel);
-    if (!isInside(paths.design, file) || !fs29.existsSync(file)) {
+    const file = path29.resolve(paths.design, rel);
+    if (!isInside(paths.design, file) || !fs30.existsSync(file)) {
       notFoundPage(res, "Screen not found", `No file .design/${rel}`);
       return;
     }
@@ -4823,13 +5485,13 @@ async function startDevServer(options) {
       key: `${canvas}/${id2}`,
       canvas,
       id: id2,
-      title: path28.basename(file),
+      title: path29.basename(file),
       file,
       format: "html",
       props: {},
       system: true
     };
-    const raw = fs29.readFileSync(file, "utf8");
+    const raw = fs30.readFileSync(file, "utf8");
     const withSystem = source.system && !optsOutOfSystem(raw);
     const html = injectIntoHtml(
       raw,
@@ -4870,7 +5532,7 @@ async function startDevServer(options) {
       }
       if (url2.pathname.startsWith("/_fs/")) {
         const rel = publicRel(url2.pathname.slice("/_fs/".length));
-        if (publicDir && rel !== null && !project.isPublicFile(rel) && fs29.existsSync(path28.join(publicDir, rel))) {
+        if (publicDir && rel !== null && !project.isPublicFile(rel) && fs30.existsSync(path29.join(publicDir, rel))) {
           notFoundPage(res, "Not found", url2.pathname);
           return;
         }
@@ -4882,7 +5544,7 @@ async function startDevServer(options) {
           const rel = publicRel(url2.pathname.slice(1));
           if (servePublic && rel !== null && project.isPublicFile(rel))
             servePublic(req, res, () => notFoundPage(res, "Not found", url2.pathname));
-          else if (path28.extname(url2.pathname)) notFoundPage(res, "Not found", url2.pathname);
+          else if (path29.extname(url2.pathname)) notFoundPage(res, "Not found", url2.pathname);
           else serveViewerIndex(req, res, url2);
         };
         if (url2.pathname === "/" || url2.pathname === "/index.html") serveViewerIndex(req, res, url2);
@@ -4892,6 +5554,11 @@ async function startDevServer(options) {
       fail(error);
     }
   });
+  httpServer.on("upgrade", (req, socket, head) => {
+    const pathname = new URL(req.url ?? "/", "http://localhost").pathname;
+    if (pathname.startsWith("/api/drawings/")) drawings.upgrade(req, socket, head, listening(), options.host);
+    else if (pathname.startsWith("/api/")) socket.destroy();
+  });
   const pending = /* @__PURE__ */ new Map();
   let flushTimer;
   const queue = (key, run) => {
@@ -4910,7 +5577,7 @@ async function startDevServer(options) {
   };
   vite.watcher.on("all", (event, file) => {
     if (publicDir && isInside(publicDir, file)) project.invalidatePublic();
-    const rel = toPosix(path28.relative(paths.design, file));
+    const rel = toPosix(path29.relative(paths.design, file));
     if (rel.startsWith("..") || rel.startsWith(".cache/") || rel.startsWith("node_modules/")) return;
     if (rel === "design.json") {
       queue("config", () => {
@@ -4926,6 +5593,10 @@ async function startDevServer(options) {
     } else if (rel.startsWith("canvas/")) {
       const [, id2, ...rest] = rel.split("/");
       if (!id2) return;
+      if (rest.join("/") === ".drawings.json") {
+        drawings.fileChanged(id2);
+        return;
+      }
       const structural = event !== "change" || rest.join("/") === "canvas.json";
       if (!structural) return;
       queue(`canvas:${id2}`, () => {
@@ -4957,6 +5628,7 @@ async function startDevServer(options) {
       if (closed) return;
       closed = true;
       events.close();
+      drawings.close();
       await vite.close();
       await new Promise((resolve) => {
         httpServer.close(() => resolve());
@@ -5021,8 +5693,8 @@ async function ensureServer(paths, options) {
   const recorded = readState(paths);
   if (recorded && pidAlive(recorded.pid)) await stopPreview(recorded);
   for (const other of listPreviews()) if (other.root === paths.root) await stopPreview(other);
-  fs30.mkdirSync(paths.cache, { recursive: true });
-  const log = fs30.openSync(logFile(paths), "w");
+  fs31.mkdirSync(paths.cache, { recursive: true });
+  const log = fs31.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, {
@@ -5034,7 +5706,7 @@ async function ensureServer(paths, options) {
   child.unref();
   const state = await waitForServer(paths, 4e4);
   if (!state) {
-    const tail = fs30.existsSync(logFile(paths)) ? fs30.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
+    const tail = fs31.existsSync(logFile(paths)) ? fs31.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
     throw new CliError(`The preview server did not start.
 ${tail.join("\n")}`);
   }
@@ -5653,9 +6325,9 @@ function printLinkIssues(issues, project) {
 }
 
 // src/cli/commands/cloud.ts
-import fs31 from "fs";
+import fs32 from "fs";
 import os5 from "os";
-import path29 from "path";
+import path30 from "path";
 var sleep2 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 async function runLogin() {
   const host = cloudHost();
@@ -5756,7 +6428,7 @@ async function runLink(paths, wanted, options) {
     print(`${dim("Already linked to")} ${project.name} ${dim(`(${project.id}, ${project.role})`)}`);
   } else {
     writeLink(paths, { host, project: project.id, units: {}, conflicts: {} });
-    fs31.rmSync(path29.join(cloudCache(paths), "incoming"), { recursive: true, force: true });
+    fs32.rmSync(path30.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}`);
   }
@@ -5782,9 +6454,120 @@ async function runLink(paths, wanted, options) {
   else if (remote) print(dim("Everything is in sync."));
 }
 
+// src/cli/commands/drawings.ts
+import http3 from "http";
+function call(port, method, path39) {
+  return new Promise((resolve, reject) => {
+    const req = http3.request(
+      { host: "127.0.0.1", port, method, path: path39, headers: { host: `localhost:${port}` }, timeout: 3e4 },
+      (res) => {
+        const chunks = [];
+        res.on("data", (chunk2) => chunks.push(chunk2));
+        res.on("end", () => {
+          let body = null;
+          try {
+            body = JSON.parse(Buffer.concat(chunks).toString("utf8"));
+          } catch {
+          }
+          resolve({ status: res.statusCode ?? 0, body });
+        });
+      }
+    );
+    req.on("timeout", () => req.destroy(new Error("the preview server did not answer")));
+    req.on("error", reject);
+    req.end();
+  });
+}
+async function previewPort(paths, quiet = false) {
+  const wasRunning = await liveServer(paths);
+  const server = await ensureServer(paths, {});
+  if (!wasRunning && !quiet) print(dim(`Started the preview server at ${server.url} (\`design stop\` stops it).`));
+  return server.port;
+}
+async function readDrawings(port, canvas) {
+  const { status, body } = await call(port, "GET", `/api/drawings/${encodeURIComponent(canvas)}`);
+  if (status !== 200) throw new CliError(body?.error ?? `No canvas "${canvas}"`);
+  const data = body;
+  return { drawings: parseDrawings(data.drawings), cloud: data.cloud ?? "unlinked" };
+}
+function drawn(drawings, prefix) {
+  const found = /* @__PURE__ */ new Map();
+  for (const [key, drawing] of Object.entries(drawings))
+    if (key.startsWith(`${prefix}:`) && drawing.strokes.length) found.set(key.slice(prefix.length + 1), drawing);
+  return found;
+}
+var texts = (drawing) => drawing.strokes.flatMap((stroke) => stroke.kind === "text" && stroke.text ? [stroke.text] : []);
+async function runDrawings(paths, target, options) {
+  const project = new DesignProject(paths, DEV_URLS);
+  const [canvasId, screenId] = (target ?? "").split("/");
+  const known = project.canvasIds();
+  if (canvasId && !known.includes(canvasId))
+    throw new CliError(`No canvas "${canvasId}". Canvases: ${known.join(", ") || "none yet"}`);
+  if (options.clear && !screenId) throw new CliError("Usage: design drawings <canvas>/<screen> --clear");
+  const port = await previewPort(paths, options.json);
+  if (options.clear) {
+    const { status, body } = await call(
+      port,
+      "DELETE",
+      `/api/drawings/${encodeURIComponent(canvasId)}/${encodeURIComponent(markupKey(screenId))}`
+    );
+    if (status !== 200) throw new CliError(body?.error ?? `Could not erase (${status})`);
+    const erased = body.erased ?? 0;
+    if (options.json) print(JSON.stringify({ canvas: canvasId, screen: screenId, erased }));
+    else
+      print(
+        erased ? `Erased the markup on ${canvasId}/${screenId} (${erased} strokes).` : `No markup on ${canvasId}/${screenId}.`
+      );
+    return;
+  }
+  const report = [];
+  for (const id2 of canvasId ? [canvasId] : known) {
+    const { drawings, cloud: cloud2 } = await readDrawings(port, id2);
+    const doc = project.canvas(id2)?.doc;
+    const pageTitle = (page) => doc?.pages.find((p) => p.id === page)?.title;
+    const itemTitle = (item) => doc?.pages.flatMap((p) => p.sections.flatMap((s) => s.items)).find((i) => i.id === item)?.title;
+    const boards = [...drawn(drawings, "board")].map(([page, drawing]) => ({
+      page,
+      title: pageTitle(page),
+      strokes: drawing.strokes.length,
+      groups: drawingGroups(drawing.strokes).length,
+      texts: texts(drawing)
+    }));
+    const markup = [...drawn(drawings, "markup")].filter(([screen]) => !screenId || screen === screenId).map(([screen, drawing]) => ({
+      screen,
+      title: itemTitle(screen),
+      strokes: drawing.strokes.length,
+      texts: texts(drawing)
+    }));
+    report.push({ canvas: id2, cloud: cloud2, boards: screenId ? [] : boards, markup });
+  }
+  if (options.json) {
+    print(JSON.stringify({ canvases: report }, null, 2));
+    return;
+  }
+  const quote = (text2) => `\u201C${text2.replace(/\s*\n\s*/g, " / ").slice(0, 120)}\u201D`;
+  let any = false;
+  for (const entry of report) {
+    if (!entry.boards.length && !entry.markup.length) continue;
+    any = true;
+    const cloud2 = entry.cloud === "synced" ? dim(" \xB7 in step with the cloud") : entry.cloud === "unlinked" ? "" : dim(" \xB7 the cloud did not answer: drawings on this machine only");
+    print(`${bold(entry.canvas)}${cloud2}`);
+    for (const board of entry.boards)
+      print(
+        `  board   ${board.page}${board.title ? dim(` (${board.title})`) : ""} \xB7 ${board.strokes} strokes${board.groups > 1 ? ` in ${board.groups} groups` : ""}${board.texts.length ? ` \xB7 ${board.texts.map(quote).join(", ")}` : ""}`
+      );
+    for (const mark of entry.markup)
+      print(
+        `  markup  ${mark.screen}${mark.title ? dim(` (${mark.title})`) : ""} \xB7 ${mark.strokes} strokes${mark.texts.length ? ` \xB7 ${mark.texts.map(quote).join(", ")}` : ""}`
+      );
+  }
+  if (!any) print(canvasId ? `No drawings on ${target}.` : "No drawings yet.");
+  else print(dim("Pictures: design shot <canvas> --board | design shot <canvas>[/<screen>] --markup"));
+}
+
 // src/cli/commands/icon.ts
-import fs32 from "fs";
-import path30 from "path";
+import fs33 from "fs";
+import path31 from "path";
 async function toCloud(paths, file) {
   const link = readLink(paths);
   if (!link) return;
@@ -5795,10 +6578,10 @@ async function toCloud(paths, file) {
   }
   const client = new CloudClient(link.host, credential.token);
   try {
-    const ext = file ? path30.extname(file).slice(1) : null;
+    const ext = file ? path31.extname(file).slice(1) : null;
     await client.setProjectIcon(
       link.project,
-      file && ext ? { data: fs32.readFileSync(file), type: ICON_TYPES[ext] } : null
+      file && ext ? { data: fs33.readFileSync(file), type: ICON_TYPES[ext] } : null
     );
     link.icon = file ? iconHash(file) : null;
     writeLink(paths, link);
@@ -5811,35 +6594,35 @@ async function runIcon(paths, file, options) {
   if (options.remove) {
     const had = iconFile(paths);
     writeIcon(paths, null);
-    print(had ? `${green("Removed")} ${path30.relative(process.cwd(), had)}` : "The project has no icon.");
+    print(had ? `${green("Removed")} ${path31.relative(process.cwd(), had)}` : "The project has no icon.");
     await toCloud(paths, null);
     return;
   }
   if (!file) {
     const current = iconFile(paths);
     if (!current) return print("The project has no icon. Set one with `design icon <file.svg|png|webp>`.");
-    return print(`${path30.relative(process.cwd(), current)} ${dim(`${Math.ceil(fs32.statSync(current).size / 1024)} KB`)}`);
+    return print(`${path31.relative(process.cwd(), current)} ${dim(`${Math.ceil(fs33.statSync(current).size / 1024)} KB`)}`);
   }
   let data;
   try {
-    data = fs32.readFileSync(file);
+    data = fs33.readFileSync(file);
   } catch {
     throw new CliError(`No file ${file}`);
   }
-  const problem = iconProblem(data, path30.extname(file).slice(1).toLowerCase() || void 0);
+  const problem = iconProblem(data, path31.extname(file).slice(1).toLowerCase() || void 0);
   if (problem) throw new CliError(`${file}: ${problem}`);
   const written = writeIcon(paths, data);
-  print(`${green("Set")} the project icon: ${path30.relative(process.cwd(), written)}`);
+  print(`${green("Set")} the project icon: ${path31.relative(process.cwd(), written)}`);
   await toCloud(paths, written);
 }
 
 // src/cli/commands/import.ts
-import fs34 from "fs";
-import path32 from "path";
+import fs35 from "fs";
+import path33 from "path";
 
 // src/import/claude-design.ts
-import fs33 from "fs";
-import path31 from "path";
+import fs34 from "fs";
+import path32 from "path";
 
 // src/import/markup.ts
 var VOID = /* @__PURE__ */ new Set([
@@ -6447,11 +7230,11 @@ function boardId(file, used) {
   return id2;
 }
 function importClaudeDesign(dir, options = {}) {
-  const canvasFile = path31.join(dir, "canvas.json");
-  if (!fs33.existsSync(canvasFile))
+  const canvasFile = path32.join(dir, "canvas.json");
+  if (!fs34.existsSync(canvasFile))
     throw new Error(`No canvas.json in ${dir}: point at the exported Claude Design project folder`);
-  const source = JSON.parse(fs33.readFileSync(canvasFile, "utf8"));
-  const templates = fs33.readdirSync(dir).filter((file) => file.endsWith(EXT));
+  const source = JSON.parse(fs34.readFileSync(canvasFile, "utf8"));
+  const templates = fs34.readdirSync(dir).filter((file) => file.endsWith(EXT));
   if (!templates.length) throw new Error(`No ${EXT} files in ${dir}`);
   const known = new Set(templates.map((file) => file.slice(0, -EXT.length)));
   const warnings = /* @__PURE__ */ new Map();
@@ -6478,7 +7261,7 @@ function importClaudeDesign(dir, options = {}) {
     try {
       files.set(
         `${name}.jsx`,
-        convertFile(name, fs33.readFileSync(path31.join(dir, file), "utf8"), { known, routes, warn: warn2 })
+        convertFile(name, fs34.readFileSync(path32.join(dir, file), "utf8"), { known, routes, warn: warn2 })
       );
     } catch (error) {
       warn2(`could not be converted: ${error.message}`);
@@ -6526,7 +7309,7 @@ function importClaudeDesign(dir, options = {}) {
     screens++;
   }
   const canvas = {
-    title: options.title ?? source.title ?? path31.basename(path31.resolve(dir)),
+    title: options.title ?? source.title ?? path32.basename(path32.resolve(dir)),
     description: "Imported from Claude Design.",
     // The templates bring their own styles; the design system's reset would restyle them.
     system: false,
@@ -6538,21 +7321,21 @@ function importClaudeDesign(dir, options = {}) {
 // src/cli/commands/import.ts
 var slug = (text2) => text2.normalize("NFKD").replace(/[^\w\s-]/g, "").trim().replace(/[\s_]+/g, "-").toLowerCase();
 function runImport(paths, from, options) {
-  const dir = path32.resolve(from);
-  if (!fs34.existsSync(dir) || !fs34.statSync(dir).isDirectory()) throw new CliError(`No folder ${from}`);
+  const dir = path33.resolve(from);
+  if (!fs35.existsSync(dir) || !fs35.statSync(dir).isDirectory()) throw new CliError(`No folder ${from}`);
   let result;
   try {
     result = importClaudeDesign(dir, { title: options.title });
   } catch (error) {
     throw new CliError(error.message);
   }
-  const id2 = options.canvas ?? (slug(String(result.canvas.title)) || slug(path32.basename(dir)) || "imported");
+  const id2 = options.canvas ?? (slug(String(result.canvas.title)) || slug(path33.basename(dir)) || "imported");
   if (!ID_PATTERN.test(id2)) throw new CliError(`"${id2}" is no canvas id; pass one with --canvas <id>`);
-  const out = path32.join(paths.canvases, id2);
-  if (fs34.existsSync(out)) throw new CliError(`.design/canvas/${id2} exists; pick another id with --canvas <id>`);
-  fs34.mkdirSync(path32.join(out, "screens"), { recursive: true });
-  for (const [name, content] of result.files) fs34.writeFileSync(path32.join(out, "screens", name), content);
-  fs34.writeFileSync(path32.join(out, "canvas.json"), `${JSON.stringify(result.canvas, null, 2)}
+  const out = path33.join(paths.canvases, id2);
+  if (fs35.existsSync(out)) throw new CliError(`.design/canvas/${id2} exists; pick another id with --canvas <id>`);
+  fs35.mkdirSync(path33.join(out, "screens"), { recursive: true });
+  for (const [name, content] of result.files) fs35.writeFileSync(path33.join(out, "screens", name), content);
+  fs35.writeFileSync(path33.join(out, "canvas.json"), `${JSON.stringify(result.canvas, null, 2)}
 `);
   print(`${green("Imported")} ${bold(String(result.canvas.title))} \u2192 .design/canvas/${id2}`);
   print(
@@ -6572,7 +7355,7 @@ function runImport(paths, from, options) {
 
 // src/cli/commands/merge.ts
 import { spawnSync as spawnSync2 } from "child_process";
-import path33 from "path";
+import path34 from "path";
 import { createInterface } from "readline/promises";
 var KIND = {
   text: "both sides changed lines, the markers show them",
@@ -6588,7 +7371,7 @@ function matchTargets(paths, states, targets2) {
       for (const conflict of openConflicts(paths, unit)) picked.push({ state: unit, conflict });
       continue;
     }
-    const rel = [path33.relative(paths.design, path33.resolve(target)), target.replace(/^\.design\//, "")];
+    const rel = [path34.relative(paths.design, path34.resolve(target)), target.replace(/^\.design\//, "")];
     const found = states.flatMap(
       (state) => state.conflicts.filter((item) => rel.includes(item.path)).map((conflict) => ({ state, conflict }))
     );
@@ -6604,7 +7387,7 @@ function printOpen(paths, states) {
     print(`${bold(state.unit)} ${dim(`merged with cloud r${state.headRev}`)}`);
     for (const conflict of open2) {
       print(`  ${red("\u2717")} ${conflict.path}  ${dim(KIND[conflict.kind])}`);
-      const sides = ["here", "cloud", "base"].map((side) => `${side}: ${path33.relative(process.cwd(), sideFile(paths, state.unit, conflict.path, side))}`).join(" \xB7 ");
+      const sides = ["here", "cloud", "base"].map((side) => `${side}: ${path34.relative(process.cwd(), sideFile(paths, state.unit, conflict.path, side))}`).join(" \xB7 ");
       print(`      ${dim(sides)}`);
     }
   }
@@ -6685,7 +7468,7 @@ async function runMerge(paths, targets2, options) {
           if (answer === "s") break;
           if (answer === "e" && edit) {
             const editor = process.env.VISUAL || process.env.EDITOR || "vi";
-            spawnSync2(editor, [path33.join(paths.design, conflict.path)], { stdio: "inherit", shell: true });
+            spawnSync2(editor, [path34.join(paths.design, conflict.path)], { stdio: "inherit", shell: true });
             if (!openConflicts(paths, state).some((item) => item.path === conflict.path)) break;
             print(yellow("  Conflict markers are still there."));
           }
@@ -6704,7 +7487,7 @@ async function runMerge(paths, targets2, options) {
 }
 
 // src/cli/commands/rename.ts
-import fs35 from "fs";
+import fs36 from "fs";
 async function runRename(paths, name) {
   const trimmed = name.trim();
   if (!trimmed) throw new CliError("Usage: design rename <name>");
@@ -6719,17 +7502,17 @@ async function runRename(paths, name) {
   }
   let config = {};
   try {
-    config = JSON.parse(fs35.readFileSync(paths.config, "utf8"));
+    config = JSON.parse(fs36.readFileSync(paths.config, "utf8"));
   } catch {
   }
-  fs35.writeFileSync(paths.config, `${JSON.stringify({ ...config, name: trimmed }, null, 2)}
+  fs36.writeFileSync(paths.config, `${JSON.stringify({ ...config, name: trimmed }, null, 2)}
 `);
   print(`${green("Renamed")} the project to ${trimmed} (.design/design.json)`);
 }
 
 // src/cli/commands/scaffold.ts
-import fs36 from "fs";
-import path34 from "path";
+import fs37 from "fs";
+import path35 from "path";
 
 // src/cli/templates.ts
 var TOKENS_CSS = `/*
@@ -6940,40 +7723,40 @@ function mainScreen(canvasId) {
 
 // src/cli/commands/scaffold.ts
 function write(file, content, root) {
-  if (fs36.existsSync(file)) {
-    print(`  ${dim("exists ")} ${path34.relative(root, file)}`);
+  if (fs37.existsSync(file)) {
+    print(`  ${dim("exists ")} ${path35.relative(root, file)}`);
     return false;
   }
-  fs36.mkdirSync(path34.dirname(file), { recursive: true });
-  fs36.writeFileSync(file, content);
-  print(`  ${green("created")} ${path34.relative(root, file)}`);
+  fs37.mkdirSync(path35.dirname(file), { recursive: true });
+  fs37.writeFileSync(file, content);
+  print(`  ${green("created")} ${path35.relative(root, file)}`);
   return true;
 }
 function ensureGitignored(root) {
-  const file = path34.join(root, ".gitignore");
-  const current = fs36.existsSync(file) ? fs36.readFileSync(file, "utf8") : "";
+  const file = path35.join(root, ".gitignore");
+  const current = fs37.existsSync(file) ? fs37.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" : "";
-  fs36.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
+  fs37.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
 .design/
 `);
   return "added";
 }
 function projectName(root) {
   try {
-    const manifest = JSON.parse(fs36.readFileSync(path34.join(root, "package.json"), "utf8"));
+    const manifest = JSON.parse(fs37.readFileSync(path35.join(root, "package.json"), "utf8"));
     if (typeof manifest.name === "string" && manifest.name) return manifest.name;
   } catch {
   }
-  return path34.basename(root);
+  return path35.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);
-  fs36.mkdirSync(paths.canvases, { recursive: true });
+  fs37.mkdirSync(paths.canvases, { recursive: true });
   if (options.gitignore) {
     const result = ensureGitignored(root);
     print(`  ${result === "added" ? green("ignored") : dim("ignored")} .design/ in .gitignore`);
@@ -6987,49 +7770,59 @@ function runSystemInit(root, options) {
   const paths = designPaths(root);
   let base = projectName(root);
   try {
-    base = JSON.parse(fs36.readFileSync(paths.config, "utf8")).name || base;
+    base = JSON.parse(fs37.readFileSync(paths.config, "utf8")).name || base;
   } catch {
   }
   const name = options.name ?? `${base} design system`;
-  print(`Scaffolding the design system in ${path34.relative(root, paths.system)}`);
-  write(path34.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
+  print(`Scaffolding the design system in ${path35.relative(root, paths.system)}`);
+  write(path35.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
 `, root);
-  write(path34.join(paths.system, "tokens.css"), TOKENS_CSS, root);
+  write(path35.join(paths.system, "tokens.css"), TOKENS_CSS, root);
   if (!options.empty) {
-    write(path34.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
-    write(path34.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
-    write(path34.join(paths.system, "specimens", "button.tsx"), BUTTON_SPECIMEN_TSX, root);
+    write(path35.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
+    write(path35.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
+    write(path35.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 = path34.join(paths.canvases, id2);
-  if (fs36.existsSync(path34.join(dir, "canvas.json"))) throw new CliError(`Canvas "${id2}" already exists in ${dir}`);
+  const dir = path35.join(paths.canvases, id2);
+  if (fs37.existsSync(path35.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(
-      path34.join(dir, "canvas.json"),
+      path35.join(dir, "canvas.json"),
       `${JSON.stringify({ title, pages: [{ id: "main", title: "Main", sections: [] }] }, null, 2)}
 `,
       root
     );
-    fs36.mkdirSync(path34.join(dir, "screens"), { recursive: true });
+    fs37.mkdirSync(path35.join(dir, "screens"), { recursive: true });
   } else {
-    write(path34.join(dir, "canvas.json"), canvasJson(title), root);
-    write(path34.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
+    write(path35.join(dir, "canvas.json"), canvasJson(title), root);
+    write(path35.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
   }
 }
 
 // src/cli/commands/shot.ts
-import fs37 from "fs";
-import path35 from "path";
+import fs38 from "fs";
+import path36 from "path";
 var OVERVIEW_TIMEOUT = 9e4;
+var DRAWING_TIMEOUT = 45e3;
+var DRAWING_MAX_SIDE = 1280;
 async function runShot(paths, target, options) {
   const [canvasId = "", screenId] = target.split("/");
   const project = new DesignProject(paths, DEV_URLS);
-  if (canvasId === SYSTEM_CANVAS) return shootSystem(paths, project, screenId, options);
+  if (canvasId === SYSTEM_CANVAS) {
+    if (options.board || options.markup) throw new CliError("--board and --markup apply to canvases, not @system");
+    return shootSystem(paths, project, screenId, options);
+  }
+  if (options.board && options.markup) throw new CliError("Take --board and --markup one at a time");
+  if (options.max !== void 0 && !options.board && !options.markup)
+    throw new CliError("--max and --full size the pictures of --board and --markup");
+  if (options.board && screenId)
+    throw new CliError("Boards belong to pages: design shot <canvas> --board [--page <id>]");
   const canvas = project.canvas(canvasId);
   if (!canvas) {
     const known = project.canvasIds();
@@ -7040,15 +7833,26 @@ 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 = path35.resolve(options.out ?? paths.shots);
-  const outDir = path35.join(outBase, canvasId);
-  fs37.mkdirSync(outDir, { recursive: true });
+  const outBase = path36.resolve(options.out ?? paths.shots);
+  const outDir = path36.join(outBase, canvasId);
+  fs38.mkdirSync(outDir, { recursive: true });
   const base = await serverBase(paths);
   const browser = await launchChrome();
   let failed = false;
   try {
+    if (options.board || options.markup) {
+      if (!fs38.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there are no drawings to shoot.");
+      const drawingsFailed = await shootDrawings(browser, base, canvasId, outDir, theme2, {
+        board: !!options.board,
+        page: options.page,
+        screen: screenId,
+        max: options.max ?? DRAWING_MAX_SIDE
+      });
+      if (drawingsFailed) process.exitCode = 1;
+      return;
+    }
     if (options.overview) {
-      if (!fs37.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there is no canvas to shoot.");
+      if (!fs38.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 } });
@@ -7064,7 +7868,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 = path35.join(outDir, `${pageId}.overview.png`);
+        const file = path36.join(outDir, `${pageId}.overview.png`);
         await page.screenshot({ path: file });
         await page.close();
         print(file);
@@ -7083,6 +7887,62 @@ async function runShot(paths, target, options) {
   }
   if (failed) process.exitCode = 1;
 }
+async function shootDrawings(browser, base, canvasId, outDir, theme2, want) {
+  const port = Number(new URL(base).port);
+  const { drawings, cloud: cloud2 } = await readDrawings(port, canvasId);
+  if (cloud2 === "offline" || cloud2 === "connecting")
+    warn("the cloud did not answer in time: these are the drawings on this machine");
+  const found = drawn(drawings, want.board ? "board" : "markup");
+  const named = want.board ? want.page : want.screen;
+  const ids = named ? [named] : [...found.keys()];
+  if (!ids.length) {
+    print(want.board ? `No idea board drawn on in "${canvasId}".` : `No screen marked up in "${canvasId}".`);
+    return false;
+  }
+  if (named && !found.has(named))
+    print(dim(want.board ? `Nothing on the board of "${named}" yet.` : `No markup on "${named}" yet.`));
+  let failed = false;
+  for (const id2 of ids) {
+    const kind = want.board ? "board" : "markup";
+    const page = await browser.newPage({ viewport: { width: 1280, height: 900 }, colorScheme: theme2 });
+    try {
+      const url = `${base}/c/${encodeURIComponent(canvasId)}/${kind}/${encodeURIComponent(id2)}?capture=1&theme=${theme2}&max=${want.max}`;
+      await page.goto(url, { waitUntil: "load" });
+      await page.waitForFunction(
+        () => window.__DESIGN_DRAWING_READY__ === true,
+        null,
+        { timeout: DRAWING_TIMEOUT }
+      );
+      const size2 = await page.evaluate(
+        () => window.__DESIGN_DRAWING_SIZE__
+      );
+      if (size2?.width && size2.height)
+        await page.setViewportSize({ width: Math.round(size2.width), height: Math.min(Math.round(size2.height), 16e3) });
+      await page.waitForTimeout(200);
+      if (!want.board) {
+        const file = path36.join(outDir, `${id2}.markup.${theme2}.png`);
+        await page.screenshot({ path: file });
+        print(file);
+        continue;
+      }
+      const parts = await page.evaluate(
+        () => window.__DESIGN_DRAWING_PARTS__ ?? 0
+      );
+      for (let part = 0; part < parts; part++) {
+        const file = path36.join(outDir, parts > 1 ? `${id2}.board.${part + 1}.${theme2}.png` : `${id2}.board.${theme2}.png`);
+        await page.locator(`[data-part="${part}"]`).screenshot({ path: file });
+        print(file);
+      }
+    } catch (error) {
+      failed = true;
+      print(`${red("\u2717")} ${canvasId}/${id2}: ${error.message.split("\n")[0]}`);
+    } finally {
+      await page.close().catch(() => {
+      });
+    }
+  }
+  return failed;
+}
 async function serverBase(paths) {
   const wasRunning = await liveServer(paths);
   const server = await ensureServer(paths, {});
@@ -7093,7 +7953,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 = path35.join(outDir, `${job.id}.${job.theme}.png`);
+    const file = path36.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 });
@@ -7125,8 +7985,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 = path35.join(path35.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
-  fs37.mkdirSync(outDir, { recursive: true });
+  const outDir = path36.join(path36.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
+  fs38.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();
@@ -7176,7 +8036,7 @@ async function runSnapshots(paths, targets2, options) {
 }
 
 // src/cli/commands/cloud-status.ts
-import path36 from "path";
+import path37 from "path";
 var STATE_TEXT = {
   in_sync: green,
   local_changes: yellow,
@@ -7199,7 +8059,7 @@ function detail(paths, status) {
   if (status.state === "remote_ahead" && !status.local && !status.baseRev) parts.push("not pulled yet");
   if (status.state === "remote_ahead" && status.changed.length && !status.deletedRemotely)
     parts.push(`${plural(status.changed.length, "file")} changed here; the cloud only rebuilt it`);
-  if (status.conflictRev !== void 0) parts.push(`merge ${path36.relative(paths.root, incomingDir(paths, status.key))}`);
+  if (status.conflictRev !== void 0) parts.push(`merge ${path37.relative(paths.root, incomingDir(paths, status.key))}`);
   return parts.join(" \xB7 ");
 }
 async function printCloudStatus(paths, label) {
@@ -7347,8 +8207,17 @@ ${bold("Verify")}
             [--page <id>]                    viewer to show while frames do not run (push does this
                                              for the canvases it pushes)
   shot <canvas>[/<screen>] [--page <id>]     Screenshot screens with Chrome (PNG paths are printed);
-       [--theme light|dark] [--out <dir>]    @system or @system/<id> shoots the design system specimens
-       [--overview]
+       [--theme light|dark] [--out <dir>]    @system or @system/<id> shoots the design system specimens;
+       [--overview] [--board | --markup]     --board shoots the idea boards drawn on (or --page's),
+       [--max <px> | --full]                 one PNG per group of sketches; --markup the screens with
+                                             markup, drawn over them. Those pictures are at most 1280 px
+                                             on the long side; --max sets another limit, --full none
+
+${bold("Drawings")}  ${dim("idea boards of pages and markup over screens, drawn in the viewer; shared live in the cloud")}
+  drawings [<canvas>[/<screen>]] [--json]    Boards and markup with something on them: strokes and the
+                                             text written on them (read through the preview server,
+                                             which syncs them with the cloud when linked)
+  drawings <canvas>/<screen> --clear         Erase a screen's markup once it is dealt with
 
 ${bold("Share")}
   build [canvas\u2026] [--out <dir>] [--tar]      Static site of the canvases and the design system
@@ -7397,7 +8266,7 @@ ${bold("Environment")}
   FOSS_DESIGN_CLOUD  Cloud to sign in and link to (default https://app.fossdesign.dev)
 `;
 function projectPaths(rootOption, requireDesign = true) {
-  const found = rootOption ? path37.resolve(rootOption) : findProjectRoot();
+  const found = rootOption ? path38.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.");
@@ -7405,6 +8274,15 @@ function projectPaths(rootOption, requireDesign = true) {
   const paths = designPaths(found);
   return paths;
 }
+function drawingMax(max, full) {
+  if (full && max !== void 0) throw new CliError("Pass --max or --full, not both");
+  if (full) return 0;
+  if (max === void 0) return void 0;
+  const value = Number(max);
+  if (!Number.isInteger(value) || value < 200 || value > 8e3)
+    throw new CliError("--max takes a number of pixels, 200 to 8000");
+  return value;
+}
 async function main(argv) {
   const { values, positionals } = parseArgs({
     args: argv,
@@ -7433,6 +8311,11 @@ async function main(argv) {
       theme: { type: "string" },
       out: { type: "string" },
       overview: { type: "boolean" },
+      board: { type: "boolean" },
+      markup: { type: "boolean" },
+      clear: { type: "boolean" },
+      max: { type: "string" },
+      full: { type: "boolean" },
       tar: { type: "boolean" },
       new: { type: "string" },
       resolved: { type: "string", multiple: true },
@@ -7450,7 +8333,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 ? path37.resolve(values.root) : process.cwd(), {
+      return runInit(values.root ? path38.resolve(values.root) : process.cwd(), {
         name: values.name,
         gitignore: !values["no-gitignore"]
       });
@@ -7508,9 +8391,14 @@ async function main(argv) {
         page: values.page,
         theme: theme2,
         out: values.out,
-        overview: !!values.overview
+        overview: !!values.overview,
+        board: !!values.board,
+        markup: !!values.markup,
+        max: drawingMax(values.max, !!values.full)
       });
     }
+    case "drawings":
+      return runDrawings(projectPaths(values.root), rest[0], { json: !!values.json, clear: !!values.clear });
     case "build":
       return runBuild(projectPaths(values.root), rest, { out: values.out, tar: !!values.tar });
     case "login":
@@ -7557,12 +8445,12 @@ function relaunchFromRealPath() {
   let realScript;
   let realCwd;
   try {
-    realScript = fs38.realpathSync.native(script);
-    realCwd = fs38.realpathSync.native(process.cwd());
+    realScript = fs39.realpathSync.native(script);
+    realCwd = fs39.realpathSync.native(process.cwd());
   } catch {
     return false;
   }
-  const same = (a, b) => path37.resolve(a).toLowerCase() === path37.resolve(b).toLowerCase();
+  const same = (a, b) => path38.resolve(a).toLowerCase() === path38.resolve(b).toLowerCase();
   if (same(realScript, script) && same(realCwd, process.cwd())) return false;
   const result = spawnSync3(process.execPath, [...process.execArgv, realScript, ...process.argv.slice(2)], {
     stdio: "inherit",