foss-design 0.9.14 → 0.9.16

package/dist/cli.js

@@ -2,8 +2,8 @@
 
 // src/cli/index.ts
 import { spawnSync as spawnSync3 } from "child_process";
-import fs39 from "fs";
-import path38 from "path";
+import fs40 from "fs";
+import path39 from "path";
 import { parseArgs } from "util";
 
 // src/core/paths.ts
@@ -23,9 +23,9 @@ 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";
 }
 function fileStem(file) {
-  const base = path.basename(file, path.extname(file));
-  if (base === "index") return path.basename(path.dirname(file));
-  return base;
+  const base2 = path.basename(file, path.extname(file));
+  if (base2 === "index") return path.basename(path.dirname(file));
+  return base2;
 }
 function toPosix(p) {
   return p.split(path.sep).join("/");
@@ -115,6 +115,7 @@ var PKG = {
   root: PKG_ROOT,
   manifest: path2.join(PKG_ROOT, "package.json"),
   runtime: path2.join(PKG_ROOT, "dist", "runtime", "index.js"),
+  pageRuntime: path2.join(PKG_ROOT, "dist", "runtime", "page.js"),
   baseCss: path2.join(PKG_ROOT, "dist", "runtime", "base.css"),
   viewer: path2.join(PKG_ROOT, "dist", "viewer"),
   cli: path2.join(PKG_ROOT, "dist", "cli.js")
@@ -348,8 +349,8 @@ function routeError(pattern) {
   }
   return null;
 }
-function split(path39) {
-  return path39.split("/").filter(Boolean);
+function split(path40) {
+  return path40.split("/").filter(Boolean);
 }
 function compileRoute(pattern) {
   return {
@@ -368,41 +369,41 @@ function decode2(part) {
     return part;
   }
 }
-function scoreRoute(route2, path39) {
-  const parts = split(path39.split(/[?#]/)[0] ?? "").map(decode2);
-  const walk2 = (s, p) => {
+function scoreRoute(route2, path40) {
+  const parts = split(path40.split(/[?#]/)[0] ?? "").map(decode2);
+  const walk3 = (s, p) => {
     if (s === route2.segments.length) return p === parts.length ? 0 : null;
     const segment = route2.segments[s];
     if (segment.kind === "splat") return 0;
     if (segment.kind === "static") {
       if (parts[p] !== segment.value) return null;
-      const rest = walk2(s + 1, p + 1);
+      const rest = walk3(s + 1, p + 1);
       return rest === null ? null : rest + 4;
     }
     if (p < parts.length) {
-      const rest = walk2(s + 1, p + 1);
+      const rest = walk3(s + 1, p + 1);
       if (rest !== null) return rest + 2;
     }
-    return segment.optional ? walk2(s + 1, p) : null;
+    return segment.optional ? walk3(s + 1, p) : null;
   };
-  return walk2(0, 0);
+  return walk3(0, 0);
 }
-function matchRoute(entries, path39) {
+function matchRoute(entries, path40) {
   let best = null;
   for (const entry of entries) {
     for (const route2 of entry.routes) {
-      const score = scoreRoute(route2, path39);
+      const score = scoreRoute(route2, path40);
       if (score !== null && (!best || score > best.score)) best = { score, value: entry.value };
     }
   }
   return best?.value ?? null;
 }
-function linkPath(href, base = "/") {
+function linkPath(href, base2 = "/") {
   const raw = href.trim();
   if (!raw || raw.startsWith("#")) return null;
   if (/^[a-z][a-z0-9+.-]*:/i.test(raw) || raw.startsWith("//")) return null;
   const origin = "http://app.invalid";
-  const url = new URL(raw, `${origin}${base.replace(/\/:[^/]+\??|\/\*$/g, "/x")}`);
+  const url = new URL(raw, `${origin}${base2.replace(/\/:[^/]+\??|\/\*$/g, "/x")}`);
   return url.pathname + url.search + url.hash;
 }
 
@@ -432,6 +433,11 @@ var DesignConfigSchema = z.strictObject({
   app: z.string().min(1).optional(),
   /** A folder served at the root of every screen, like Vite's `public`, relative to the project root. */
   public: z.string().min(1).optional(),
+  /**
+   * Plugins screens get from the app's own Vite config, by name (`vite-plugin-svgr`): the config is
+   * the app's code, which this only picks from.
+   */
+  vitePlugins: z.array(z.string().min(1)).optional(),
   port: z.number().int().min(1).max(65535).optional()
 });
 var SystemConfigSchema = z.strictObject({
@@ -518,13 +524,13 @@ 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, path39) {
-  let out = base;
-  for (const part of path39) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
+function formatPath(base2, path40) {
+  let out = base2;
+  for (const part of path40) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
   return out;
 }
-function describeZodError(error, base = "") {
-  return error.issues.map((issue) => ({ at: formatPath(base, issue.path), message: issue.message }));
+function describeZodError(error, base2 = "") {
+  return error.issues.map((issue) => ({ at: formatPath(base2, issue.path), message: issue.message }));
 }
 
 // src/core/canvas.ts
@@ -538,8 +544,8 @@ var routesOf = (route2) => route2 === void 0 ? void 0 : Array.isArray(route2) ?
 function frameOf(input) {
   const custom = input.width !== void 0 || input.height !== void 0;
   const device = input.device ?? (custom ? void 0 : DEFAULT_DEVICE);
-  const base = DEVICES[input.device ?? DEFAULT_DEVICE];
-  return { width: input.width ?? base.width, height: input.height ?? base.height, device };
+  const base2 = DEVICES[input.device ?? DEFAULT_DEVICE];
+  return { width: input.width ?? base2.width, height: input.height ?? base2.height, device };
 }
 function loadCanvas(paths, canvasId, urls, snapshots) {
   const dir = path3.join(paths.canvases, canvasId);
@@ -778,11 +784,11 @@ function resolveCover(cover, dir, screens, paths, urls, report) {
     report("error", `cover "${cover}" does not exist`, "cover");
     return void 0;
   }
-  const { size: size2, mtimeMs } = fs3.statSync(file);
-  if (size2 > MAX_COVER_BYTES) {
+  const { size: size3, mtimeMs } = fs3.statSync(file);
+  if (size3 > MAX_COVER_BYTES) {
     report(
       "error",
-      `cover "${cover}" is ${Math.ceil(size2 / 1024)} KB; the limit is ${MAX_COVER_BYTES / 1024} KB`,
+      `cover "${cover}" is ${Math.ceil(size3 / 1024)} KB; the limit is ${MAX_COVER_BYTES / 1024} KB`,
       "cover"
     );
     return void 0;
@@ -1128,17 +1134,17 @@ function collect(css2, from) {
 function readStylesheets(entry) {
   const seen = /* @__PURE__ */ new Set();
   const files = [];
-  const walk2 = (file) => {
+  const walk3 = (file) => {
     if (seen.has(file) || !fs6.existsSync(file)) return;
     seen.add(file);
     const css2 = fs6.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("../")) walk2(path6.resolve(path6.dirname(file), spec));
+      if (spec.startsWith("./") || spec.startsWith("../")) walk3(path6.resolve(path6.dirname(file), spec));
     }
     files.push({ file, css: css2 });
   };
-  walk2(entry);
+  walk3(entry);
   return files;
 }
 function closingParen(text2, start) {
@@ -1684,6 +1690,30 @@ var Entries = class {
   entryFile(source) {
     return path9.join(this.dir, source.canvas, `${source.id}.js`);
   }
+  /**
+   * The app's own folder for a stylesheet of the app (system.json `stylesheet` outside `.design`):
+   * design.json `app`, else the package the stylesheet belongs to. In the app's build Tailwind finds
+   * the app's classes from the app's root; here the root is `.design`, so it is named as a source.
+   */
+  appSourceDir() {
+    const { paths } = this.project;
+    const stylesheet = this.project.system()?.stylesheet;
+    if (!stylesheet || isInside(paths.design, stylesheet)) return null;
+    const app = this.project.appDir();
+    if (app) return app;
+    for (let dir = path9.dirname(stylesheet); isInside(paths.root, dir); dir = path9.dirname(dir)) {
+      if (fs9.existsSync(path9.join(dir, "package.json"))) return dir;
+      if (dir === paths.root) break;
+    }
+    return paths.root;
+  }
+  /** Every folder the system stylesheet has Tailwind scan: `.design`, the app's, design.json `sources`. */
+  scannedDirs() {
+    const { paths } = this.project;
+    const extra = (this.project.config().config.sources ?? []).map((dir) => path9.resolve(paths.root, dir));
+    const app = this.appSourceDir();
+    return [paths.design, ...app ? [app] : [], ...extra];
+  }
   /** Tailwind with the design tokens, or the stylesheet system.json names; scans every file in `.design`. */
   systemCss() {
     const { paths } = this.project;
@@ -1692,6 +1722,8 @@ var Entries = class {
     const lines = ["/* Generated by foss-design. Edit .design/system/tokens.css instead. */"];
     if (system?.stylesheet) {
       lines.push(`@import ${css(system.stylesheet)};`);
+      const app = this.appSourceDir();
+      if (app) lines.push(`@source ${css(app)};`);
     } else {
       const tailwind = resolveFrom(PKG.manifest, "tailwindcss/index.css");
       if (!tailwind) throw new Error("tailwindcss is missing from foss-design; reinstall the package");
@@ -1790,7 +1822,7 @@ function headTags(head) {
     public: head.public
   };
   const fallback = source.theme ?? head.theme;
-  const theme2 = `(function(){var q=new URLSearchParams(location.search).get('theme');var t=${JSON.stringify(source.theme ?? null)}||(q==='dark'||q==='light'?q:${JSON.stringify(fallback)});var r=document.documentElement;r.dataset.theme=t;r.classList.toggle('dark',t==='dark');r.style.colorScheme=t})()`;
+  const theme2 = `(function(){var q=new URLSearchParams(location.search).get('theme');var t=${JSON.stringify(source.theme ?? null)}||(q==='dark'||q==='light'?q:${JSON.stringify(fallback)});var r=document.documentElement;r.dataset.theme=r.dataset.mode=r.dataset.colorScheme=t;r.classList.toggle('dark',t==='dark');r.classList.toggle('theme-dark',t==='dark');r.style.colorScheme=t})()`;
   const tags = [`<script>window.__DESIGN__=${scriptJson(config)};${theme2}</script>`, '<link rel="icon" href="data:,">'];
   for (const href of head.fonts) tags.push(`<link rel="stylesheet" href="${escapeHtml(href)}">`);
   if (head.systemCss) tags.push(`<link rel="stylesheet" href="${escapeHtml(head.systemCss)}">`);
@@ -1977,6 +2009,7 @@ import fs12 from "fs";
 import path12 from "path";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
+import { loadConfigFromFile } from "vite";
 
 // src/server/css-guard.ts
 import fs11 from "fs";
@@ -2012,9 +2045,9 @@ function targets(params) {
   return [...out];
 }
 var isPathLike = (spec) => spec.startsWith(".") || path11.isAbsolute(spec);
-function existing(base, exts) {
+function existing(base2, exts) {
   for (const ext of exts) {
-    const file = base + ext;
+    const file = base2 + ext;
     try {
       if (fs11.statSync(file).isFile()) return fs11.realpathSync(file);
     } catch {
@@ -2057,8 +2090,8 @@ function designCodeGuard(design) {
       },
       (file) => file.endsWith(".css")
     );
-    const script = resolveWith({ ...config?.resolve }, (file) => !file.endsWith(".css"));
-    return { style, script };
+    const script2 = resolveWith({ ...config?.resolve }, (file) => !file.endsWith(".css"));
+    return { style, script: script2 };
   };
   const candidates = async (spec, importer, resolve, exts) => {
     const found = /* @__PURE__ */ new Set();
@@ -2076,13 +2109,13 @@ function designCodeGuard(design) {
     }
     return [...found];
   };
-  const check = async (environment, file, code, seen) => {
-    const { style, script } = resolvers(environment);
+  const check2 = async (environment, file, code, seen) => {
+    const { style, script: script2 } = resolvers(environment);
     for (const match of code.matchAll(LOADS_CODE)) {
       const directive = match[1] ? `@${match[1]}` : "use()";
       const specs = match[1] ? targets(match[2] ?? "") : [match[4] ?? ""];
       for (const spec of specs) {
-        for (const target of await candidates(spec, file, script, JS_EXT)) {
+        for (const target of await candidates(spec, file, script2, JS_EXT)) {
           if (!pulled(target)) continue;
           throw new Error(
             `${shown(file)}: \`${match[0].trim()}\` loads ${shown(target)}, which is refused. ${directive} runs its code in Node on this machine, and code under .design can come from a teammate through \`design pull\`. Put the plugin in the app\u2019s own source (outside .design) or name an installed package.`
@@ -2102,7 +2135,7 @@ function designCodeGuard(design) {
           } catch {
             continue;
           }
-          await check(environment, target, text2, seen);
+          await check2(environment, target, text2, seen);
         }
       }
     }
@@ -2116,7 +2149,7 @@ function designCodeGuard(design) {
     async transform(code, id2) {
       if (!isStylesheetId(id2)) return null;
       const file = path11.resolve(idFile(id2));
-      await check(this.environment, file, code, /* @__PURE__ */ new Set([file]));
+      await check2(this.environment, file, code, /* @__PURE__ */ new Set([file]));
       return null;
     }
   };
@@ -2140,6 +2173,41 @@ function aliases(project) {
   }
   return list;
 }
+var INSTALL_FILES = [
+  "package.json",
+  "pnpm-lock.yaml",
+  "package-lock.json",
+  "npm-shrinkwrap.json",
+  "yarn.lock",
+  "bun.lock",
+  "bun.lockb",
+  ".pnp.cjs",
+  "node_modules/.pnpm/lock.yaml",
+  "node_modules/.modules.yaml",
+  "node_modules/.package-lock.json",
+  "node_modules/.yarn-state.yml",
+  "node_modules/.yarn-integrity"
+];
+function installStamp(paths, appDir) {
+  const seen = /* @__PURE__ */ new Set();
+  const parts = [];
+  for (const start of appDir ? [paths.root, appDir] : [paths.root]) {
+    for (let dir = path12.resolve(start); ; dir = path12.dirname(dir)) {
+      for (const name of INSTALL_FILES) {
+        const file = path12.join(dir, name);
+        if (seen.has(file)) continue;
+        seen.add(file);
+        try {
+          const stat = fs12.statSync(file);
+          parts.push(`${file}:${stat.size}:${stat.mtimeMs}`);
+        } catch {
+        }
+      }
+      if (path12.dirname(dir) === dir) break;
+    }
+  }
+  return createHash3("sha256").update(parts.join("\n")).digest("hex").slice(0, 16);
+}
 function dropStaleDepCache(paths, appDir = null) {
   const dir = path12.join(paths.cache, "vite");
   const stamp = path12.join(paths.cache, "vite-runtime");
@@ -2149,6 +2217,7 @@ function dropStaleDepCache(paths, appDir = null) {
   } catch {
   }
   if (appDir) runtime += ` ${appDir}`;
+  runtime += ` ${installStamp(paths, appDir)}`;
   let seen = "";
   try {
     seen = fs12.readFileSync(stamp, "utf8");
@@ -2159,11 +2228,82 @@ function dropStaleDepCache(paths, appDir = null) {
   fs12.mkdirSync(paths.cache, { recursive: true });
   fs12.writeFileSync(stamp, runtime);
 }
-function baseConfig(project) {
+var VITE_CONFIGS = [
+  "vite.config.ts",
+  "vite.config.mts",
+  "vite.config.js",
+  "vite.config.mjs",
+  "vite.config.cts",
+  "vite.config.cjs"
+];
+var OWN_PLUGIN = /^(?:vite:react|@tailwindcss\/vite)/;
+function appViteConfig(project) {
+  for (const dir of [project.appDir(), project.paths.root]) {
+    if (!dir) continue;
+    for (const name of VITE_CONFIGS) if (fs12.existsSync(path12.join(dir, name))) return path12.join(dir, name);
+  }
+  return null;
+}
+async function flatten(list, out = []) {
+  for (const option of list ?? []) {
+    const value = await option;
+    if (Array.isArray(value)) await flatten(value, out);
+    else if (value && typeof value === "object" && "name" in value) out.push(value);
+  }
+  return out;
+}
+async function appPlugins(project, command) {
+  const wanted = project.config().config.vitePlugins ?? [];
+  if (!wanted.length) return { plugins: [], problems: [] };
+  const file = appViteConfig(project);
+  if (!file)
+    return {
+      plugins: [],
+      problems: [
+        `design.json vitePlugins: no vite.config.* in ${project.appDir() ? "the app package or " : ""}the project root to take them from`
+      ]
+    };
+  let all;
+  try {
+    const loaded = await loadConfigFromFile(
+      { command, mode: command === "serve" ? "development" : "production", isSsrBuild: false, isPreview: false },
+      file,
+      path12.dirname(file),
+      "silent"
+    );
+    all = await flatten(loaded?.config.plugins);
+  } catch (error) {
+    return {
+      plugins: [],
+      problems: [
+        `design.json vitePlugins: ${path12.relative(project.paths.root, file)} did not load: ${error.message}`
+      ]
+    };
+  }
+  const plugins = [];
+  const problems = [];
+  for (const name of wanted) {
+    if (OWN_PLUGIN.test(name)) {
+      problems.push(`design.json vitePlugins: "${name}" is foss-design's own (React and Tailwind are always on)`);
+      continue;
+    }
+    const found = all.filter((plugin) => plugin.name === name || plugin.name.startsWith(`${name}:`));
+    if (found.length) plugins.push(...found);
+    else
+      problems.push(
+        `design.json vitePlugins: no "${name}" in ${path12.relative(project.paths.root, file)}; it has ${all.map((plugin) => plugin.name).join(", ") || "no plugins"}`
+      );
+  }
+  return { plugins, problems };
+}
+function baseConfig(project, extra = []) {
   const { paths } = project;
   return {
     configFile: false,
-    envDir: false,
+    // The app's `.env`, `.env.local` and `.env.<mode>` files, as its own dev server and build read
+    // them: screens get the same `import.meta.env.VITE_*` (a CDN host, a public API key). Only the
+    // `VITE_` ones reach the browser, as in the app's build; a push bakes them into the cloud's copy.
+    envDir: project.appDir() ?? paths.root,
     root: paths.design,
     cacheDir: path12.join(paths.cache, "vite"),
     // design.json `public`: served under the frames' base, so HTML and CSS paths such as `/logo.png` resolve.
@@ -2180,7 +2320,7 @@ function baseConfig(project) {
     css: { postcss: {} },
     // Pulled code runs in the browser only: the guard refuses stylesheets that would load code from
     // `.design` in Node (Tailwind's `@plugin` and `@config`), before Tailwind reads them.
-    plugins: [react(), designCodeGuard(paths.design), tailwindcss()]
+    plugins: [react(), designCodeGuard(paths.design), ...extra, tailwindcss()]
   };
 }
 
@@ -2319,12 +2459,15 @@ async function buildSite(paths, out, options = {}) {
   fs13.mkdirSync(out, { recursive: true });
   const moduleMap = {};
   if (inputs.length) {
-    const base = baseConfig(project);
+    const fromApp = await appPlugins(project, "build");
+    for (const problem of fromApp.problems) process.stderr.write(`warning: ${problem}
+`);
+    const base2 = baseConfig(project, fromApp.plugins);
     await build({
-      ...base,
+      ...base2,
       plugins: [
-        ...base.plugins ?? [],
-        options.moduleMap ? {
+        ...base2.plugins ?? [],
+        {
           name: "design-module-map",
           generateBundle(_, bundle) {
             for (const [file, chunk2] of Object.entries(bundle)) {
@@ -2332,7 +2475,7 @@ async function buildSite(paths, out, options = {}) {
               moduleMap[file] = (chunk2.moduleIds ?? []).map((id2) => id2.split("?")[0]).filter((id2) => path13.isAbsolute(id2) && !id2.includes(`${path13.sep}node_modules${path13.sep}`)).map((id2) => toPosix(path13.relative(paths.root, id2))).filter((rel) => !rel.startsWith(".."));
             }
           }
-        } : null
+        }
       ],
       root: staging,
       base: "./",
@@ -2418,7 +2561,8 @@ async function buildSite(paths, out, options = {}) {
       fs13.copyFileSync(path13.join(publicDir, rel), to);
     }
   }
-  return { out, canvases: canvasIds, frames: inputs.length, errors, absoluteAssets };
+  const modules = [...new Set(Object.values(moduleMap).flat())].sort();
+  return { out, canvases: canvasIds, frames: inputs.length, errors, absoluteAssets, modules };
 }
 function copyViewer(viewerDir, out) {
   copyTree(viewerDir, out, () => true);
@@ -2600,7 +2744,7 @@ function warnLink(rel) {
   process.stderr.write(`warning: .design/${rel} links outside .design; it is not synced
 `);
 }
-function walk(dir, base, out) {
+function walk(dir, base2, out) {
   let entries;
   try {
     entries = fs15.readdirSync(dir, { withFileTypes: true });
@@ -2617,14 +2761,14 @@ function walk(dir, base, out) {
       isFile = false;
       try {
         const target = fs15.realpathSync(full);
-        const root = fs15.realpathSync(base);
+        const root = fs15.realpathSync(base2);
         if (target.startsWith(root + path15.sep)) isFile = fs15.statSync(target).isFile();
-        else warnLink(toPosix(path15.relative(base, full)));
+        else warnLink(toPosix(path15.relative(base2, full)));
       } catch {
       }
     }
-    if (isDir) walk(full, base, out);
-    else if (isFile) out[toPosix(path15.relative(base, full))] = hashFile(full);
+    if (isDir) walk(full, base2, out);
+    else if (isFile) out[toPosix(path15.relative(base2, full))] = hashFile(full);
   }
 }
 function unitManifest(paths, key) {
@@ -2759,6 +2903,7 @@ function parseProject(value, fallbackRole) {
     id: id2,
     name: text(data.name) ?? id2,
     role: text(data.role) ?? fallbackRole,
+    kind: data.kind === "pages" ? "pages" : "design",
     archived: flag(data.archived, data.archivedAt, data.archived_at),
     banned: flag(data.banned, data.bannedAt, data.banned_at),
     icon: /[?&]v=([0-9a-f]{64})/.exec(text(data.icon) ?? "")?.[1] ?? null
@@ -2785,6 +2930,21 @@ function parseUnit(value) {
     })
   };
 }
+function parsePage(value) {
+  const data = record(value);
+  const slug2 = str(data.slug);
+  if (!slug2) return null;
+  return {
+    slug: slug2,
+    title: text(data.title) ?? slug2,
+    headRev: num(data.headRev) ?? 0,
+    bytes: num(data.bytes) ?? 0,
+    updatedAt: str(data.updatedAt) ?? "",
+    archived: flag(data.archivedAt),
+    banned: flag(data.bannedAt),
+    publicId: str(data.publicId) ?? null
+  };
+}
 function parseRevision(value) {
   const data = record(value);
   const rev = num(data.rev);
@@ -2802,6 +2962,21 @@ function parseRevision(value) {
     rollbackAllowed: data.rollbackAllowed === true
   };
 }
+var NOT_CONNECTED = /* @__PURE__ */ new Set([
+  "ETIMEDOUT",
+  "ECONNREFUSED",
+  "ENOTFOUND",
+  "EAI_AGAIN",
+  "ENETUNREACH",
+  "EHOSTUNREACH",
+  "ENETDOWN",
+  "UND_ERR_CONNECT_TIMEOUT"
+]);
+var CONNECT_RETRIES = 3;
+function networkCode(error) {
+  const cause = error.cause;
+  return cause?.code ?? cause?.errors?.find((inner) => inner.code)?.code;
+}
 async function withRetries(fn, retries = 3) {
   for (let attempt = 0; ; attempt++) {
     try {
@@ -2821,24 +2996,34 @@ var CloudClient = class {
   }
   host;
   token;
-  async send(method, path39, init) {
+  async send(method, path40, 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${path39}`, {
-        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");
+    for (let attempt = 0; ; attempt++) {
+      try {
+        return await fetch(`${this.host}/api${path40}`, {
+          method,
+          headers,
+          body: init.body,
+          signal: AbortSignal.timeout(init.timeout)
+        });
+      } catch (error) {
+        const timedOut = error.name === "TimeoutError";
+        const code = networkCode(error);
+        const again = !timedOut && (NOT_CONNECTED.has(code ?? "") || method === "GET" || method === "HEAD");
+        if (again && attempt < CONNECT_RETRIES) {
+          await sleep(1e3 * 2 ** attempt);
+          continue;
+        }
+        const cause = error.cause;
+        const reason = timedOut ? "timed out" : code ?? cause?.message ?? error.message;
+        const tries = attempt ? ` (tried ${attempt + 1} times)` : "";
+        throw new CloudError(`Could not reach ${this.host}: ${reason}${tries}`, 0, "network");
+      }
     }
   }
   async fail(response) {
@@ -2850,8 +3035,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, path39, body) {
-    const response = await this.send(method, path39, {
+  async request(method, path40, body) {
+    const response = await this.send(method, path40, {
       body: body === void 0 ? void 0 : JSON.stringify(body),
       type: body === void 0 ? void 0 : "application/json",
       timeout: JSON_TIMEOUT
@@ -2863,7 +3048,7 @@ var CloudClient = class {
     try {
       return JSON.parse(text2);
     } catch {
-      throw new CloudError(`${this.host} answered ${method} ${path39} with something other than JSON`, 0, "bad_response");
+      throw new CloudError(`${this.host} answered ${method} ${path40} with something other than JSON`, 0, "bad_response");
     }
   }
   /** POST /device/code. */
@@ -2898,8 +3083,8 @@ var CloudClient = class {
     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 }));
+  async createProject(name, kind = "design") {
+    const body = record(await this.request("POST", "/projects", kind === "design" ? { name } : { name, kind }));
     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;
@@ -2981,6 +3166,21 @@ var CloudClient = class {
     );
     return { publicId: str(body.publicId) ?? null };
   }
+  /** The pages of a pages project, last changed first. */
+  async pages(projectId) {
+    const body = record(await this.request("GET", `/projects/${encodeURIComponent(projectId)}/pages`));
+    return (Array.isArray(body.pages) ? body.pages : []).map(parsePage).filter((page) => !!page);
+  }
+  /** Publish a page (its link stays across versions) or turn its link off (owner only). */
+  async pageAction(projectId, slug2, action) {
+    const body = record(
+      await this.request(
+        "POST",
+        `/projects/${encodeURIComponent(projectId)}/pages/${encodeURIComponent(slug2)}/${action}`
+      )
+    );
+    return { publicId: str(body.publicId) ?? null };
+  }
   /** POST /blobs/missing, in batches: the hashes the cloud does not have yet. */
   async missing(projectId, hashes2) {
     const missing = [];
@@ -3054,8 +3254,8 @@ 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 || path16.join(os2.homedir(), ".config");
-  return path16.join(base, "foss-design", "credentials.json");
+  const base2 = process.platform === "win32" && process.env.APPDATA ? process.env.APPDATA : process.env.XDG_CONFIG_HOME || path16.join(os2.homedir(), ".config");
+  return path16.join(base2, "foss-design", "credentials.json");
 }
 function readAll() {
   const file = credentialsFile();
@@ -3114,9 +3314,10 @@ function readLink(paths) {
   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 : {} };
+  for (const [key, base2] of Object.entries(data.units ?? {})) {
+    if (!isUnitKey(key) || typeof base2?.rev !== "number") continue;
+    units[key] = { rev: base2.rev, files: base2.files && typeof base2.files === "object" ? base2.files : {} };
+    if (base2.deps && typeof base2.deps === "object") units[key].deps = base2.deps;
   }
   const conflicts = {};
   for (const [key, rev] of Object.entries(data.conflicts ?? {})) if (typeof rev === "number") conflicts[key] = rev;
@@ -3156,23 +3357,24 @@ function diffFiles(a, b) {
   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;
+function unitStatus(key, link, local, remote, design) {
+  const base2 = link.units[key];
+  const baseRev = base2?.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 ?? {});
+  let changed = diffFiles(localFiles, base2?.files ?? {});
   if (ahead) changed = changed.filter((file) => localFiles[file] !== remoteFiles[file]);
-  const remoteChanged = ahead ? diffFiles(remoteFiles, base?.files ?? {}) : [];
+  const remoteChanged = ahead ? diffFiles(remoteFiles, base2?.files ?? {}) : [];
+  const usesChanged = design ? changedDeps(design, base2?.deps) : [];
   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 if (changed.length || usesChanged.length) state = "local_changes";
   else state = "in_sync";
   return {
     key,
@@ -3181,12 +3383,25 @@ function unitStatus(key, link, local, remote) {
     headRev: remoteUnit ? remoteUnit.headRev : null,
     local: Object.keys(localFiles).length > 0,
     changed,
+    usesChanged,
     ahead,
     remoteChanged,
     deletedRemotely,
     conflictRev
   };
 }
+function changedDeps(design, deps) {
+  const out = [];
+  for (const [rel, hash] of Object.entries(deps ?? {})) {
+    let now = null;
+    try {
+      now = hashBuffer(fs17.readFileSync(path17.join(design, rel)));
+    } catch {
+    }
+    if (now !== hash) out.push(rel);
+  }
+  return out.sort();
+}
 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);
@@ -3207,10 +3422,10 @@ function rate(bytes, started) {
 }
 var seconds = (started) => `${((Date.now() - started) / 1e3).toFixed(1)}s`;
 function webUrl(link, unit) {
-  const base = `${link.host.replace(/\/+$/, "")}/p/${encodeURIComponent(link.project)}`;
-  if (!unit) return base;
-  if (unit === SYSTEM_UNIT) return `${base}/system`;
-  return `${base}/c/${encodeURIComponent(unit.slice("canvas/".length))}`;
+  const base2 = `${link.host.replace(/\/+$/, "")}/p/${encodeURIComponent(link.project)}`;
+  if (!unit) return base2;
+  if (unit === SYSTEM_UNIT) return `${base2}/system`;
+  return `${base2}/c/${encodeURIComponent(unit.slice("canvas/".length))}`;
 }
 function newReport(command, link) {
   return { ok: true, command, host: link.host, project: link.project, url: webUrl(link), units: [], hints: [] };
@@ -3513,10 +3728,10 @@ var AUTO_VIEWPORT_HEIGHT = 900;
 function withTheme(url, theme2) {
   return `${url}${url.includes("?") ? "&" : "?"}theme=${theme2}`;
 }
-function absolute(base, url) {
-  return /^https?:\/\//.test(url) ? url : `${base.replace(/\/$/, "")}${url.startsWith("/") ? "" : "/"}${url}`;
+function absolute(base2, url) {
+  return /^https?:\/\//.test(url) ? url : `${base2.replace(/\/$/, "")}${url.startsWith("/") ? "" : "/"}${url}`;
 }
-function frameJob(base, canvas, page, item, theme2) {
+function frameJob(base2, canvas, page, item, theme2) {
   const auto = item.frame.height === "auto";
   const pinned = item.kind === "screen" ? item.theme : void 0;
   const effective = pinned ?? theme2;
@@ -3525,7 +3740,7 @@ function frameJob(base, canvas, page, item, theme2) {
     canvas,
     id: item.id,
     page,
-    url: item.kind === "url" ? item.url : withTheme(absolute(base, item.url), effective),
+    url: item.kind === "url" ? item.url : withTheme(absolute(base2, item.url), effective),
     width: item.frame.width,
     height: auto ? AUTO_VIEWPORT_HEIGHT : item.frame.height,
     fullPage: auto,
@@ -3536,7 +3751,7 @@ function frameJob(base, canvas, page, item, theme2) {
 function isFrameItem(item) {
   return item.kind === "screen" || item.kind === "url";
 }
-function canvasFrames(doc, base, theme2, filter = {}) {
+function canvasFrames(doc, base2, theme2, filter = {}) {
   const jobs = [];
   for (const page of doc.pages) {
     if (filter.page && page.id !== filter.page) continue;
@@ -3546,20 +3761,20 @@ function canvasFrames(doc, base, theme2, filter = {}) {
         if (filter.id && item.id !== filter.id) continue;
         if (item.kind === "url" && filter.includeUrls === false) continue;
         if (item.kind === "screen" && item.missing && filter.skipMissing !== false) continue;
-        jobs.push(frameJob(base, doc.id, page.id, item, theme2));
+        jobs.push(frameJob(base2, doc.id, page.id, item, theme2));
       }
     }
   }
   return jobs;
 }
-function systemFrames(doc, base, theme2) {
+function systemFrames(doc, base2, theme2) {
   const specimens = doc.components.map((component) => ({ id: component.id, url: component.url }));
   if (doc.typographyUrl) specimens.push({ id: "@typography", url: doc.typographyUrl });
   return specimens.map(({ id: id2, url }) => ({
     key: `@system/${id2}`,
     canvas: "@system",
     id: id2,
-    url: withTheme(absolute(base, url), theme2),
+    url: withTheme(absolute(base2, url), theme2),
     width: 1200,
     height: 800,
     fullPage: true,
@@ -3788,7 +4003,7 @@ function keep(paths, key, rel, side, data) {
   fs23.mkdirSync(path22.dirname(file), { recursive: true });
   fs23.writeFileSync(file, data);
 }
-function mergeUnit(paths, key, headRev, base, here, cloud2, blob) {
+function mergeUnit(paths, key, headRev, base2, here, cloud2, blob) {
   const files = { added: 0, changed: 0, removed: 0, merged: 0 };
   const conflicts = [];
   const stop = key === SYSTEM_UNIT ? paths.design : path22.dirname(unitRoot(paths, key));
@@ -3799,8 +4014,8 @@ function mergeUnit(paths, key, headRev, base, here, cloud2, blob) {
     fs23.rmSync(file, { force: true });
     pruneEmpty(path22.dirname(file), stop);
   };
-  for (const rel of [.../* @__PURE__ */ new Set([...Object.keys(base), ...Object.keys(here), ...Object.keys(cloud2)])].sort()) {
-    const b = base[rel];
+  for (const rel of [.../* @__PURE__ */ new Set([...Object.keys(base2), ...Object.keys(here), ...Object.keys(cloud2)])].sort()) {
+    const b = base2[rel];
     const h = here[rel]?.hash;
     const c = cloud2[rel]?.hash;
     if (h === c || c === b) continue;
@@ -3876,8 +4091,8 @@ function finishMerge(paths, link, key, accept = false) {
 // src/cloud/meta.ts
 import fs24 from "fs";
 import path23 from "path";
-async function syncProjectMeta(paths, client, link) {
-  const remote = await client.project(link.project);
+async function syncProjectMeta(paths, client2, link) {
+  const remote = await client2.project(link.project);
   if (!remote) return [];
   const lines = [];
   link.name = remote.name;
@@ -3888,17 +4103,17 @@ async function syncProjectMeta(paths, client, link) {
     link.icon = cloud2;
     return lines;
   }
-  const base = link.icon;
-  const localChanged = base === void 0 ? cloud2 === null : local !== base;
-  const cloudChanged = base === void 0 ? local === null : cloud2 !== base;
+  const base2 = link.icon;
+  const localChanged = base2 === void 0 ? cloud2 === null : local !== base2;
+  const cloudChanged = base2 === void 0 ? local === null : cloud2 !== base2;
   if (localChanged && !cloudChanged) {
     try {
       if (file) {
         const ext = path23.extname(file).slice(1);
-        await client.setProjectIcon(link.project, { data: fs24.readFileSync(file), type: ICON_TYPES[ext] });
+        await client2.setProjectIcon(link.project, { data: fs24.readFileSync(file), type: ICON_TYPES[ext] });
         lines.push("The project icon went up to the cloud.");
       } else {
-        await client.setProjectIcon(link.project, null);
+        await client2.setProjectIcon(link.project, null);
         lines.push("The project icon was removed in the cloud too.");
       }
       link.icon = local;
@@ -3908,7 +4123,7 @@ async function syncProjectMeta(paths, client, link) {
     }
     return lines;
   }
-  const icon = cloud2 ? await client.projectIcon(link.project) : null;
+  const icon = cloud2 ? await client2.projectIcon(link.project) : null;
   if (icon && !sniffIcon(icon.data))
     return [...lines, "The cloud sent a project icon that is no image; it was left out."];
   writeIcon(paths, icon?.data ?? null);
@@ -3947,14 +4162,14 @@ function applyUnit(paths, key, local, target, blobs) {
   return counts;
 }
 async function pull(ctx, options) {
-  const { paths, client } = ctx;
+  const { paths, client: client2 } = ctx;
   const link = structuredClone(ctx.link);
   const report = newReport("pull", link);
   for (const line of await syncProjectMeta(ctx.paths, ctx.client, link)) report.hints.push(line);
   const selected = unique(options.units.map(unitArg));
   const theirs = unique(options.theirs.map(unitArg));
   const scan = scanLocal(paths);
-  const remote = await client.units(link.project);
+  const remote = await client2.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)]);
@@ -4042,9 +4257,9 @@ async function pull(ctx, options) {
     checkManifest(plan.key, plan.remote.manifest);
     for (const entry of Object.values(plan.remote.manifest)) needed.add(entry.hash);
     if (plan.kind !== "merge") continue;
-    const base = link.units[plan.key]?.files ?? {};
+    const base2 = link.units[plan.key]?.files ?? {};
     const here = local(plan.key);
-    for (const [rel, hash] of Object.entries(base)) {
+    for (const [rel, hash] of Object.entries(base2)) {
       const h = here[rel]?.hash;
       const c = plan.remote.manifest[rel]?.hash;
       if (h && c && h !== hash && c !== hash && h !== c) bases.add(hash);
@@ -4066,7 +4281,7 @@ async function pull(ctx, options) {
     const line = () => `Downloading ${gotFiles}/${download.length} files \xB7 ${megabytes(gotBytes)}${rate(gotBytes, started)}`;
     bar.update(line());
     await mapLimit(download, TRANSFERS, async (hash) => {
-      const data = await client.getBlob(link.project, hash);
+      const data = await client2.getBlob(link.project, hash);
       blobs.set(hash, data);
       gotFiles++;
       gotBytes += data.length;
@@ -4079,7 +4294,7 @@ async function pull(ctx, options) {
     TRANSFERS,
     async (hash) => {
       try {
-        blobs.set(hash, await client.getBlob(link.project, hash));
+        blobs.set(hash, await client2.getBlob(link.project, hash));
       } catch {
       }
     }
@@ -4144,14 +4359,14 @@ function blockedReport(status, message) {
   };
 }
 async function push(ctx, options) {
-  const { paths, client, log } = ctx;
+  const { paths, client: client2, log } = ctx;
   const link = structuredClone(ctx.link);
   const report = newReport("push", link);
   for (const line of await syncProjectMeta(ctx.paths, ctx.client, link)) report.hints.push(line);
   const selected = unique(options.units.map(unitArg));
   const resolved = unique(options.resolved.map(unitArg));
   const scan = scanLocal(paths);
-  const remote = await client.units(link.project);
+  const remote = await client2.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}`);
@@ -4175,7 +4390,7 @@ async function push(ctx, options) {
     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);
+  const status = (key) => unitStatus(key, link, scan.units.get(key)?.manifest, remote, paths.design);
   for (const key of selected) {
     if (!scan.units.has(key) && !remote.has(key) && !link.units[key]) {
       const known = [...scan.units.keys()].join(", ") || "none";
@@ -4194,7 +4409,7 @@ async function push(ctx, options) {
     candidates = [...resolved];
     for (const key of scan.units.keys()) {
       const s = status(key);
-      if (s.changed.length || s.conflictRev !== void 0) candidates.push(key);
+      if (s.changed.length || s.usesChanged.length || s.conflictRev !== void 0) candidates.push(key);
     }
     candidates = unique(candidates);
   }
@@ -4285,7 +4500,8 @@ async function push(ctx, options) {
   }
   const pushing = toPush.filter((key) => {
     const s = status(key);
-    if (systemPush || resolved.includes(key) || s.changed.length || !remote.has(key)) return true;
+    if (systemPush || resolved.includes(key) || s.changed.length || s.usesChanged.length || !remote.has(key))
+      return true;
     report.units.push({ unit: key, action: "unchanged", rev: s.baseRev, url: webUrl(link, key) });
     return false;
   });
@@ -4295,6 +4511,7 @@ async function push(ctx, options) {
   const project = new DesignProject(paths, STATIC_URLS);
   const systemRev = remote.get(SYSTEM_UNIT)?.headRev ?? 0;
   const units = [];
+  const deps = /* @__PURE__ */ new Map();
   const files = /* @__PURE__ */ new Map();
   const addFiles = (manifest, dir) => {
     for (const [rel, entry] of Object.entries(manifest))
@@ -4315,6 +4532,12 @@ async function push(ctx, options) {
       );
     const source = scan.units.get(key).manifest;
     const build2 = buildManifest(unitBuildDir(paths, key));
+    deps.set(key, borrowedFiles(paths, key, result.modules));
+    const uses = status(key).usesChanged;
+    if (uses.length && !status(key).changed.length)
+      report.hints.push(
+        `${key} is pushed for files it uses from outside its folder: ${uses.slice(0, 3).join(", ")}${uses.length > 3 ? ` and ${uses.length - 3} more` : ""}`
+      );
     addFiles(source, paths.design);
     addFiles(build2, unitBuildDir(paths, key));
     units.push({
@@ -4326,7 +4549,7 @@ async function push(ctx, options) {
       systemRev: id2 === null ? null : systemRev
     });
   }
-  const missing = await client.missing(link.project, [...files.keys()]);
+  const missing = await client2.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`);
@@ -4341,7 +4564,7 @@ async function push(ctx, options) {
       const file = files.get(hash);
       const data = fs26.readFileSync(file);
       try {
-        await client.putBlob(link.project, hash, data);
+        await client2.putBlob(link.project, hash, data);
       } catch (error) {
         if (error instanceof CloudError && error.status === 413)
           throw new CliError(`${path25.relative(process.cwd(), file)} (${megabytes(data.length)}): ${error.message}`);
@@ -4356,7 +4579,7 @@ async function push(ctx, options) {
   log(`Pushing ${plural(units.length, "unit")}\u2026`);
   let revs2;
   try {
-    revs2 = await client.push(link.project, units);
+    revs2 = await client2.push(link.project, units);
   } catch (error) {
     if (!(error instanceof CloudError) || error.status !== 409 || error.error !== "conflict") throw error;
     report.ok = false;
@@ -4368,7 +4591,12 @@ async function push(ctx, options) {
   }
   for (const unit of units) {
     const rev = revs2.get(unit.key) ?? unit.baseRev + 1;
-    link.units[unit.key] = { rev, files: hashes(unit.source) };
+    const used = deps.get(unit.key);
+    link.units[unit.key] = {
+      rev,
+      files: hashes(unit.source),
+      ...used && Object.keys(used).length ? { deps: used } : {}
+    };
     report.units.push({
       unit: unit.key,
       action: unit.baseRev ? "pushed" : "created",
@@ -4382,6 +4610,19 @@ async function push(ctx, options) {
   report.units.sort((a, b) => byUnit(a.unit, b.unit));
   return report;
 }
+function borrowedFiles(paths, key, modules) {
+  const own = [unitRoot(paths, key), paths.system, paths.config];
+  const out = {};
+  for (const rel of modules) {
+    const file = path25.join(paths.root, rel);
+    if (own.some((dir) => file === dir || isInside(dir, file)) || isInside(paths.cache, file)) continue;
+    try {
+      out[toPosix(path25.relative(paths.design, file))] = hashFile(file).hash;
+    } catch {
+    }
+  }
+  return out;
+}
 function refuseLegacyGo(paths, keys) {
   const project = new DesignProject(paths, STATIC_URLS);
   const hits = /* @__PURE__ */ new Set();
@@ -4435,16 +4676,16 @@ var record2 = (value) => value && typeof value === "object" && !Array.isArray(va
 function parseStroke(value) {
   const data = record2(value);
   if (!data) return null;
-  const { id: id2, kind, ink, size: size2, points, text: text2 } = data;
+  const { id: id2, kind, ink, size: size3, 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 (typeof size3 !== "number" || !(size3 >= 0.5 && size3 <= 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 };
+  const stroke = { id: id2, kind, ink, size: size3, points };
   if (kind === "text") stroke.text = text2;
   return stroke;
 }
@@ -4579,15 +4820,15 @@ function drawingGroups(strokes) {
 function parseLive(value) {
   const data = record2(value);
   if (!data) return null;
-  const { id: id2, kind, ink, size: size2, text: text2, at, points } = data;
+  const { id: id2, kind, ink, size: size3, 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 size3 !== "number" || !(size3 >= 0.5 && size3 <= 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 };
+  const stroke = { id: id2, kind, ink, size: size3, at, points };
   if (typeof text2 === "string") stroke.text = text2;
   return stroke;
 }
@@ -4657,10 +4898,10 @@ function sendJson(res, status, body) {
 function readBody(req, limit = 25 * 1024 * 1024) {
   return new Promise((resolve, reject) => {
     const chunks = [];
-    let size2 = 0;
+    let size3 = 0;
     req.on("data", (chunk2) => {
-      size2 += chunk2.length;
-      if (size2 > limit) {
+      size3 += chunk2.length;
+      if (size3 > limit) {
         reject(new Error("body too large"));
         req.destroy();
       } else chunks.push(chunk2);
@@ -4845,6 +5086,8 @@ var Room = class {
   cloud = null;
   written = null;
   saveTimer;
+  /** A change not on disk yet: only such a change is written, so looking at a canvas writes nothing. */
+  dirty = false;
   idleTimer;
   get file() {
     return drawingsFile(this.hub.paths, this.canvas);
@@ -4885,39 +5128,39 @@ var Room = class {
     this.idleTimer.unref();
   }
   join(socket) {
-    const client = { peer: this.hub.nextPeer(), live: /* @__PURE__ */ new Map() };
-    this.clients.set(socket, client);
+    const client2 = { peer: this.hub.nextPeer(), live: /* @__PURE__ */ new Map() };
+    this.clients.set(socket, client2);
     this.connectCloud();
-    send(socket, { type: "hello", peer: client.peer, canDraw: this.canDraw(), drawings: this.drawings });
+    send(socket, { type: "hello", peer: client2.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);
+      if (message) this.fromClient(socket, client2, 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 });
+      for (const [id2, key] of client2.live) this.cloud?.send({ type: "live-end", key, id: id2 });
+      this.broadcast({ type: "gone", peer: client2.peer });
       this.release();
     });
     socket.on("error", () => socket.terminate());
   }
-  fromClient(socket, client, message) {
+  fromClient(socket, client2, 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);
+      this.change(message.key, { add: message.add, erase: message.erase }, client2.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);
+      client2.live.set(message.stroke.id, message.key);
+      this.broadcast({ ...message, peer: client2.peer }, socket);
       this.cloud?.send(message);
     } else {
-      client.live.delete(message.id);
-      this.broadcast({ ...message, peer: client.peer }, socket);
+      client2.live.delete(message.id);
+      this.broadcast({ ...message, peer: client2.peer }, socket);
       this.cloud?.send(message);
     }
   }
@@ -4951,8 +5194,8 @@ var Room = class {
   }
   /** 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 });
+    for (const [socket, client2] of this.clients)
+      send(socket, { type: "hello", peer: client2.peer, canDraw: this.canDraw(), drawings: this.drawings });
   }
   broadcast(message, except) {
     const data = JSON.stringify(message);
@@ -4960,11 +5203,14 @@ var Room = class {
       if (socket !== except && socket.readyState === WebSocket.OPEN) socket.send(data);
   }
   save() {
+    this.dirty = true;
     clearTimeout(this.saveTimer);
     this.saveTimer = setTimeout(() => this.flush(), 150);
   }
   flush() {
     clearTimeout(this.saveTimer);
+    if (!this.dirty) return;
+    this.dirty = false;
     const dir = path27.dirname(this.file);
     if (!fs28.existsSync(dir)) return;
     const drawings = Object.fromEntries(
@@ -5035,10 +5281,10 @@ var CloudRelay = class {
   /** 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;
+    const base2 = new URL(this.host);
+    base2.protocol = base2.protocol === "https:" ? "wss:" : "ws:";
+    base2.pathname = `/api/projects/${encodeURIComponent(this.project)}/canvases/${encodeURIComponent(this.room.canvas)}/drawings`;
+    return base2.href;
   }
   connect() {
     if (this.closed) return;
@@ -5219,7 +5465,7 @@ var EventHub = class {
   timer;
   constructor() {
     this.timer = setInterval(() => {
-      for (const client of this.clients) client.write(": ping\n\n");
+      for (const client2 of this.clients) client2.write(": ping\n\n");
     }, 2e4);
     this.timer.unref();
   }
@@ -5237,11 +5483,11 @@ var EventHub = class {
     const data = `data: ${JSON.stringify(event)}
 
 `;
-    for (const client of this.clients) client.write(data);
+    for (const client2 of this.clients) client2.write(data);
   }
   close() {
     clearInterval(this.timer);
-    for (const client of this.clients) client.end();
+    for (const client2 of this.clients) client2.end();
     this.clients.clear();
   }
 };
@@ -5260,8 +5506,8 @@ function readState(paths) {
   }
 }
 function registryDir() {
-  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");
+  const base2 = 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(base2, "foss-design", "previews");
 }
 var entryFile = (pid) => path28.join(registryDir(), `${pid}.json`);
 function writeState(paths, state) {
@@ -5391,9 +5637,12 @@ async function startDevServer(options) {
   const httpServer = http2.createServer();
   const listening = () => httpServer.address()?.port ?? 0;
   dropStaleDepCache(paths, project.appDir());
-  const base = baseConfig(project);
+  const deps = installStamp(paths, project.appDir());
+  const fromApp = await appPlugins(project, "serve");
+  for (const problem of fromApp.problems) console.warn(`warning: ${problem}`);
+  const base2 = baseConfig(project, fromApp.plugins);
   const vite = await createServer({
-    ...base,
+    ...base2,
     base: "/_fs/",
     appType: "custom",
     server: {
@@ -5575,6 +5824,19 @@ async function startDevServer(options) {
       }
     }, 60);
   };
+  const scanned = entries.scannedDirs();
+  vite.watcher.add(scanned.filter((dir) => !isInside(paths.design, dir)));
+  let cssTimer;
+  const rebuildCss = () => {
+    clearTimeout(cssTimer);
+    cssTimer = setTimeout(() => {
+      for (const mod of vite.moduleGraph.getModulesByFile(entries.systemCssFile()) ?? []) void vite.reloadModule(mod);
+    }, 80);
+  };
+  vite.watcher.on("add", (file) => {
+    if (file.split(path29.sep).includes("node_modules") || isInside(paths.cache, file)) return;
+    if (scanned.some((dir) => isInside(dir, file))) rebuildCss();
+  });
   vite.watcher.on("all", (event, file) => {
     if (publicDir && isInside(publicDir, file)) project.invalidatePublic();
     const rel = toPosix(path29.relative(paths.design, file));
@@ -5616,7 +5878,8 @@ async function startDevServer(options) {
       url,
       root: paths.root,
       version: packageVersion(),
-      startedAt: (/* @__PURE__ */ new Date()).toISOString()
+      startedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      deps
     });
   }
   let closed = false;
@@ -5686,9 +5949,11 @@ async function stopServer(paths) {
 async function ensureServer(paths, options) {
   const live2 = await liveServer(paths);
   const stale = live2 && live2.version !== packageVersion();
-  if (live2 && !options.restart && !stale) return live2;
+  const installed = live2?.deps !== void 0 && live2.deps !== installStamp(paths, new DesignProject(paths, DEV_URLS).appDir());
+  if (live2 && !options.restart && !stale && !installed) return live2;
   if (stale)
     print(dim(`Restarting the preview server: it runs foss-design ${live2.version}, this is ${packageVersion()}.`));
+  else if (installed) print(dim("Restarting the preview server: the app's packages changed since it started."));
   if (live2) await stopServer(paths);
   const recorded = readState(paths);
   if (recorded && pidAlive(recorded.pid)) await stopPreview(recorded);
@@ -5887,8 +6152,8 @@ function canvasArg(value, usage) {
   if (key === SYSTEM_UNIT) throw new CliError(`The design system is not a canvas. Usage: ${usage}`);
   return key.slice("canvas/".length);
 }
-async function remoteCanvas(client, project, canvas) {
-  const unit = (await client.units(project)).get(canvasUnit(canvas));
+async function remoteCanvas(client2, project, canvas) {
+  const unit = (await client2.units(project)).get(canvasUnit(canvas));
   if (!unit) throw new CliError(`${canvas} is not in the cloud yet: \`design push ${canvas}\` uploads it`);
   return unit;
 }
@@ -5919,7 +6184,7 @@ async function runCanvases(paths, options) {
   const rows = ids.map((id2) => {
     const doc = local.find((entry) => entry.id === id2);
     const unit = remote?.get(canvasUnit(id2));
-    const status = link && remote ? unitStatus(canvasUnit(id2), link, scan?.units.get(canvasUnit(id2))?.manifest, remote) : null;
+    const status = link && remote ? unitStatus(canvasUnit(id2), link, scan?.units.get(canvasUnit(id2))?.manifest, remote, paths.design) : null;
     const frames = doc?.pages.flatMap((page) => page.sections.flatMap((section) => section.items)).filter((item) => item.kind === "screen" || item.kind === "url");
     return {
       id: id2,
@@ -5955,8 +6220,8 @@ async function runCanvases(paths, options) {
 }
 async function runUrl(paths, value, options) {
   const canvas = canvasArg(value, "design url <canvas>");
-  const { link, client } = cloud(paths);
-  const unit = await remoteCanvas(client, link.project, canvas);
+  const { link, client: client2 } = cloud(paths);
+  const unit = await remoteCanvas(client2, link.project, canvas);
   const url = webUrl(link, canvasUnit(canvas));
   const pub = unit.publicId ? publicUrl(link.host, unit.publicId) : null;
   const screens = unit.screens.map((s) => ({ screen: s.item, publicUrl: screenUrl(link.host, s.publicId) }));
@@ -5974,12 +6239,12 @@ async function runPublish(paths, value, publish) {
   const screen = value && slash > 0 ? value.slice(slash + 1) : null;
   const canvas = canvasArg(value && slash > 0 ? value.slice(0, slash) : value, usage);
   if (screen === "") throw new CliError(`Usage: ${usage}`);
-  const { link, client } = cloud(paths);
-  const unit = await remoteCanvas(client, link.project, canvas);
+  const { link, client: client2 } = cloud(paths);
+  const unit = await remoteCanvas(client2, link.project, canvas);
   if (screen) {
     if (!publish && !unit.screens.some((s) => s.item === screen))
       return print(dim(`${canvas}/${screen} has no public link`));
-    const { publicId: publicId2 } = await client.screenAction(link.project, canvas, screen, verb);
+    const { publicId: publicId2 } = await client2.screenAction(link.project, canvas, screen, verb);
     if (publish) {
       print(
         `${green("\u2713")} Published ${bold(`${canvas}/${screen}`)} on its own: anyone with the link sees this screen alone`
@@ -5988,9 +6253,9 @@ async function runPublish(paths, value, publish) {
     } else print(`${green("\u2713")} ${bold(`${canvas}/${screen}`)} has no public link now`);
     return;
   }
-  const { publicId } = await client.canvasAction(link.project, canvas, verb);
+  const { publicId } = await client2.canvasAction(link.project, canvas, verb);
   if (publish) {
-    const id2 = publicId ?? (await remoteCanvas(client, link.project, canvas)).publicId;
+    const id2 = publicId ?? (await remoteCanvas(client2, link.project, canvas)).publicId;
     print(`${green("\u2713")} Published ${bold(canvas)}: anyone with the link can view it`);
     if (id2) print(`  ${cyan(publicUrl(link.host, id2))}`);
   } else print(`${green("\u2713")} ${bold(canvas)} has no public link now; members still open it in the project`);
@@ -5998,9 +6263,9 @@ async function runPublish(paths, value, publish) {
 async function runArchive(paths, value, archive) {
   const verb = archive ? "archive" : "unarchive";
   const canvas = canvasArg(value, `design ${verb} <canvas>`);
-  const { link, client } = cloud(paths);
-  await remoteCanvas(client, link.project, canvas);
-  await client.canvasAction(link.project, canvas, verb);
+  const { link, client: client2 } = cloud(paths);
+  await remoteCanvas(client2, link.project, canvas);
+  await client2.canvasAction(link.project, canvas, verb);
   print(
     archive ? `${green("\u2713")} Archived ${bold(canvas)} in the cloud; its history is kept. \`design unarchive ${canvas}\` brings it back.` : `${green("\u2713")} ${bold(canvas)} is active again ${dim(webUrl(link, canvasUnit(canvas)))}`
   );
@@ -6008,10 +6273,10 @@ async function runArchive(paths, value, archive) {
 async function runHistory(paths, value, options) {
   if (!value) throw new CliError("Usage: design history <canvas|system>");
   const key = unitArg(value);
-  const { link, client } = cloud(paths);
+  const { link, client: client2 } = cloud(paths);
   let revisions;
   try {
-    revisions = await client.revisions(link.project, key);
+    revisions = await client2.revisions(link.project, key);
   } catch (error) {
     if (error instanceof CloudError && error.status === 404)
       throw new CliError(`${key} is not in the cloud yet: \`design push\` uploads it`);
@@ -6039,8 +6304,8 @@ async function runRollback(paths, value, revArg) {
   const rev = Number((revArg ?? "").replace(/^r/i, ""));
   if (!Number.isInteger(rev) || rev < 1)
     throw new CliError("Usage: design rollback <canvas> <rev>  (see `design history <canvas>`)");
-  const { link, client } = cloud(paths);
-  const head = await client.rollback(link.project, canvasUnit(canvas), rev);
+  const { link, client: client2 } = cloud(paths);
+  const head = await client2.rollback(link.project, canvasUnit(canvas), rev);
   print(`${green("\u2713")} ${bold(canvas)}: r${rev} is current again as r${head} in the cloud`);
   await runPull(paths, [canvas], { theirs: [], json: false });
 }
@@ -6050,18 +6315,18 @@ async function runMe(paths, options) {
   const link = paths ? readLink(paths) : null;
   const host = link?.host ?? cloudHost();
   const credential = requireCredential(host);
-  const client = new CloudClient(host, credential.token);
+  const client2 = new CloudClient(host, credential.token);
   const [me, usage, activity] = await Promise.all([
-    client.request("GET", "/me").then(obj),
-    client.request("GET", "/me/usage").then(obj),
-    client.request("GET", "/me/activity").then(obj)
+    client2.request("GET", "/me").then(obj),
+    client2.request("GET", "/me/usage").then(obj),
+    client2.request("GET", "/me/activity").then(obj)
   ]);
   const plan = obj(usage.plan);
   const limits = obj(usage.limits);
   const totals = obj(activity.totals);
   let linked = null;
   if (link) {
-    const projects = await client.projects().catch(() => null);
+    const projects = await client2.projects().catch(() => null);
     const project = projects && [...projects.owned, ...projects.shared].find((p) => p.id === link.project);
     linked = project ? { id: project.id, name: project.name, role: project.role } : { id: link.project, name: "", role: "" };
   }
@@ -6187,9 +6452,11 @@ async function runCheck(paths, targets2, options) {
       );
   }
   const issues = canvases.length ? canvases.flatMap((id2) => project.canvas(id2)?.doc.issues ?? []) : project.issues();
+  for (const message of (await appPlugins(project, "serve")).problems)
+    issues.push({ severity: "warning", file: relToRoot(paths, paths.config), message });
   let frames = [];
   if (options.render) {
-    let base;
+    let base2;
     let docOf = (id2) => project.canvas(id2).doc;
     let systemDoc = project.system()?.doc ?? null;
     let close = async () => {
@@ -6202,24 +6469,24 @@ async function runCheck(paths, targets2, options) {
       });
       docOf = (id2) => build2.read(`api/canvas/${id2}.json`) ?? project.canvas(id2).doc;
       systemDoc = canvases.length ? null : build2.read("api/system.json");
-      base = build2.base;
+      base2 = build2.base;
       close = build2.close;
-      if (!options.json) print(dim(`Serving the build at ${base}`));
+      if (!options.json) print(dim(`Serving the build at ${base2}`));
     } else {
       const wasRunning = await liveServer(paths);
       const server = await ensureServer(paths, {});
       if (!wasRunning && !options.json)
         print(dim(`Started the preview server at ${server.url} (\`design stop\` stops it).`));
-      base = `http://127.0.0.1:${server.port}`;
+      base2 = `http://127.0.0.1:${server.port}`;
     }
     const jobs = (canvases.length ? canvases : known).flatMap((id2) => {
       const doc = docOf(id2);
       const theme2 = doc.theme ?? "light";
       const screens = picked.get(id2);
       const filter = { includeUrls: false, page: options.page };
-      return screens ? [...screens].flatMap((screen) => canvasFrames(doc, base, theme2, { ...filter, id: screen })) : canvasFrames(doc, base, theme2, filter);
+      return screens ? [...screens].flatMap((screen) => canvasFrames(doc, base2, theme2, { ...filter, id: screen })) : canvasFrames(doc, base2, theme2, filter);
     });
-    if (!canvases.length && systemDoc) jobs.unshift(...systemFrames(systemDoc, base, "light"));
+    if (!canvases.length && systemDoc) jobs.unshift(...systemFrames(systemDoc, base2, "light"));
     if (!options.json) print(dim(`Loading ${plural2(jobs.length, "frame")} in Chrome\u2026`));
     try {
       frames = await renderFrames(jobs);
@@ -6331,8 +6598,8 @@ import path30 from "path";
 var sleep2 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 async function runLogin() {
   const host = cloudHost();
-  const client = new CloudClient(host, null);
-  const code = await client.deviceCode(os5.hostname());
+  const client2 = new CloudClient(host, null);
+  const code = await client2.deviceCode(os5.hostname());
   const url = new URL(code.verification_uri_complete || code.verification_uri, host).toString();
   const expiresIn = code.expires_in ?? 600;
   print(`${bold("Sign in to foss-design Cloud")} ${dim(host)}`);
@@ -6351,7 +6618,7 @@ async function runLogin() {
     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);
+      result = await client2.deviceToken(code.device_code);
     } catch (error) {
       if (error instanceof CloudError && error.status === 0) continue;
       throw error;
@@ -6384,7 +6651,11 @@ function printProjects(title, projects, linked) {
   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);
+    const flags = [
+      project.kind === "pages" && dim("pages"),
+      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")}` : "")
     );
@@ -6394,16 +6665,16 @@ 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 client2 = 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);
+    project = await client2.createProject(name);
     print(`${green("created")} ${project.name} ${dim(`(${project.id})`)}`);
   } else {
-    const { owned, shared } = await client.projects();
+    const { owned, shared } = await client2.projects();
     if (!wanted) {
       const linked = current?.host === host ? current.project : void 0;
       print(`${bold("Projects on")} ${host}`);
@@ -6424,6 +6695,10 @@ async function runLink(paths, wanted, options) {
     project = found;
   }
   if (project.banned) throw new CliError(`${project.name} is blocked by moderation and cannot be linked.`);
+  if (project.kind === "pages")
+    throw new CliError(
+      `${project.name} is a pages project: \`design page\` publishes into it, and .design links to a project of canvases.`
+    );
   if (current?.host === host && current.project === project.id) {
     print(`${dim("Already linked to")} ${project.name} ${dim(`(${project.id}, ${project.role})`)}`);
   } else {
@@ -6434,12 +6709,12 @@ async function runLink(paths, wanted, options) {
   }
   if (project.archived) print(yellow("The project is archived: unarchive it in the web app before pushing or pulling."));
   const link = readLink(paths);
-  for (const line of await syncProjectMeta(paths, client, link)) print(dim(line));
+  for (const line of await syncProjectMeta(paths, client2, link)) print(dim(line));
   writeLink(paths, link);
-  const remote = project.archived ? null : await client.units(project.id);
+  const remote = project.archived ? null : await client2.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
+    (key) => unitStatus(key, link, scan.units.get(key)?.manifest, remote, paths.design).state
   );
   const count = (state) => states.filter((item) => item === state).length;
   const ahead = count("remote_ahead");
@@ -6456,10 +6731,10 @@ async function runLink(paths, wanted, options) {
 
 // src/cli/commands/drawings.ts
 import http3 from "http";
-function call(port, method, path39) {
+function call(port, method, path40) {
   return new Promise((resolve, reject) => {
     const req = http3.request(
-      { host: "127.0.0.1", port, method, path: path39, headers: { host: `localhost:${port}` }, timeout: 3e4 },
+      { host: "127.0.0.1", port, method, path: path40, headers: { host: `localhost:${port}` }, timeout: 3e4 },
       (res) => {
         const chunks = [];
         res.on("data", (chunk2) => chunks.push(chunk2));
@@ -6576,10 +6851,10 @@ async function toCloud(paths, file) {
     print(yellow("Not signed in: the icon goes to the cloud on the next `design push` after `design login`."));
     return;
   }
-  const client = new CloudClient(link.host, credential.token);
+  const client2 = new CloudClient(link.host, credential.token);
   try {
     const ext = file ? path31.extname(file).slice(1) : null;
-    await client.setProjectIcon(
+    await client2.setProjectIcon(
       link.project,
       file && ext ? { data: fs33.readFileSync(file), type: ICON_TYPES[ext] } : null
     );
@@ -7076,7 +7351,7 @@ function elementJsx(element, ctx) {
 function convertFile(name, source, ctx) {
   const document2 = parseMarkup(source);
   const root = findElement(document2, (el) => el.tag.toLowerCase() === "x-dc");
-  const script = findElement(
+  const script2 = findElement(
     document2,
     (el) => el.tag.toLowerCase() === "script" && attr(el, "data-dc-script") !== void 0
   );
@@ -7085,7 +7360,7 @@ function convertFile(name, source, ctx) {
   const helmet = /<helmet>([\s\S]*?)<\/helmet>/i.exec(source)?.[1]?.trim() ?? "";
   const body = childrenJsx(root.children, file, "x-dc");
   let spec = {};
-  const rawSpec = script ? attr(script, "data-props") : null;
+  const rawSpec = script2 ? attr(script2, "data-props") : null;
   if (rawSpec) {
     try {
       spec = JSON.parse(decodeEntities(rawSpec));
@@ -7093,7 +7368,7 @@ function convertFile(name, source, ctx) {
       file.warn("has data-props that are not JSON; the props keep no defaults");
     }
   }
-  const code = script?.children.map((child) => child.type === "text" ? child.text : "").join("") ?? "";
+  const code = script2?.children.map((child) => child.type === "text" ? child.text : "").join("") ?? "";
   const className = /class\s+([A-Za-z_$][\w$]*)\s+extends\s+DCLogic/.exec(code)?.[1];
   const logic = className ? `const __Logic = (() => {
 ${code.trim()}
@@ -7222,10 +7497,10 @@ export const flag = (v) => v === true || v === 'true' || (!!v && v !== 'false')
 export const list = (v) => (Array.isArray(v) ? v : v == null ? [] : Array.from(v))
 `;
 function boardId(file, used) {
-  let base = kebab(file.slice(0, -EXT.length)) || "screen";
-  if (!ID_PATTERN.test(base)) base = `s-${base}`;
-  let id2 = base;
-  for (let n2 = 2; used.has(id2); n2++) id2 = `${base}-${n2}`;
+  let base2 = kebab(file.slice(0, -EXT.length)) || "screen";
+  if (!ID_PATTERN.test(base2)) base2 = `s-${base2}`;
+  let id2 = base2;
+  for (let n2 = 2; used.has(id2); n2++) id2 = `${base2}-${n2}`;
   used.add(id2);
   return id2;
 }
@@ -7486,15 +7761,297 @@ async function runMerge(paths, targets2, options) {
   }
 }
 
-// src/cli/commands/rename.ts
+// src/cloud/page.ts
 import fs36 from "fs";
+import path35 from "path";
+var PAGE_SLUG = /^[a-z0-9][a-z0-9_-]{0,99}$/;
+var PAGE_ENTRY = "index.html";
+var HTML = /\.html?$/i;
+var MAX_TITLE = 200;
+function slugFor(target) {
+  const base2 = path35.basename(path35.resolve(target)).replace(HTML, "");
+  const slug2 = base2.toLowerCase().normalize("NFKD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9_-]+/g, "-").replace(/^[-_]+|[-_]+$/g, "").slice(0, 100).replace(/[-_]+$/, "");
+  return slug2 || "page";
+}
+var script = null;
+function pageScript() {
+  if (script === null) {
+    let code;
+    try {
+      code = fs36.readFileSync(PKG.pageRuntime, "utf8").trim();
+    } catch {
+      throw new CliError(`${PKG.pageRuntime} is missing; this foss-design install is incomplete.`);
+    }
+    script = `<script data-foss-design>${code.replace(/<\/script/gi, "<\\/script")}</script>`;
+  }
+  return script;
+}
+function withPageScript(html) {
+  const tag = pageScript();
+  const at = (pattern) => {
+    const match = pattern.exec(html);
+    return match ? match.index + match[0].length : -1;
+  };
+  let index = at(/<head(?:\s[^>]*)?>/i);
+  if (index < 0) index = at(/<html(?:\s[^>]*)?>/i);
+  if (index < 0) index = at(/<!doctype[^>]*>/i);
+  if (index < 0) index = 0;
+  return html.slice(0, index) + tag + html.slice(index);
+}
+var ENTITIES = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: " " };
+function htmlTitle(html) {
+  const raw = /<title(?:\s[^>]*)?>([\s\S]*?)<\/title>/i.exec(html)?.[1];
+  if (raw === void 0) return null;
+  const text2 = raw.replace(/<[^>]*>/g, "").replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (whole, body) => {
+    if (body[0] !== "#") return ENTITIES[body.toLowerCase()] ?? whole;
+    const code = body[1] === "x" || body[1] === "X" ? Number.parseInt(body.slice(2), 16) : Number(body.slice(1));
+    return Number.isFinite(code) && code > 0 && code < 1114112 ? String.fromCodePoint(code) : " ";
+  }).replace(/\s+/g, " ").trim().slice(0, MAX_TITLE);
+  return text2 || null;
+}
+function siblingsLoaded(file, html) {
+  const dir = path35.dirname(file);
+  const found = /* @__PURE__ */ new Set();
+  for (const match of html.matchAll(/\b(?:src|href|poster)\s*=\s*["']([^"'#?]+)/gi)) {
+    const ref = match[1].trim();
+    if (!ref || /^[a-z][a-z0-9+.-]*:/i.test(ref) || ref.startsWith("/") || ref.startsWith("//")) continue;
+    let rel;
+    try {
+      rel = decodeURIComponent(ref);
+    } catch {
+      continue;
+    }
+    const full = path35.resolve(dir, rel);
+    if (full !== file && fs36.existsSync(full) && fs36.statSync(full).isFile()) found.add(rel);
+  }
+  return [...found];
+}
+function walk2(dir, root, out, skipped) {
+  for (const entry of fs36.readdirSync(dir, { withFileTypes: true })) {
+    if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
+    const full = path35.join(dir, entry.name);
+    const rel = path35.relative(root, full).split(path35.sep).join("/");
+    if (entry.isSymbolicLink()) {
+      try {
+        const target = fs36.realpathSync(full);
+        if (target.startsWith(fs36.realpathSync(root) + path35.sep) && fs36.statSync(target).isFile()) out.push(rel);
+        else skipped.push(rel);
+      } catch {
+        skipped.push(rel);
+      }
+    } else if (entry.isDirectory()) walk2(full, root, out, skipped);
+    else if (entry.isFile()) out.push(rel);
+  }
+}
+function readPage(target) {
+  const full = path35.resolve(target);
+  let stat;
+  try {
+    stat = fs36.statSync(full);
+  } catch {
+    throw new CliError(`${target} does not exist`);
+  }
+  const files = /* @__PURE__ */ new Map();
+  const warnings = [];
+  const add = (rel, file) => {
+    const data = fs36.readFileSync(file);
+    files.set(rel, HTML.test(rel) ? Buffer.from(withPageScript(data.toString("utf8"))) : data);
+  };
+  let entryHtml;
+  if (stat.isDirectory()) {
+    const list = [];
+    const skipped = [];
+    walk2(full, full, list, skipped);
+    if (!list.includes(PAGE_ENTRY)) {
+      const pages = list.filter((rel) => HTML.test(rel) && !rel.includes("/"));
+      throw new CliError(
+        `${target} has no ${PAGE_ENTRY}, which a page opens with.` + (pages.length === 1 ? ` Rename ${pages[0]} to ${PAGE_ENTRY}, or pass that file alone.` : "")
+      );
+    }
+    for (const rel of list) add(rel, path35.join(full, rel));
+    if (skipped.length) warnings.push(`Not uploaded, they link outside ${target}: ${skipped.slice(0, 5).join(", ")}`);
+    entryHtml = fs36.readFileSync(path35.join(full, PAGE_ENTRY), "utf8");
+  } else {
+    if (!HTML.test(full))
+      throw new CliError(`${target} is not an HTML file; pass an .html file or a folder with ${PAGE_ENTRY}`);
+    entryHtml = fs36.readFileSync(full, "utf8");
+    add(PAGE_ENTRY, full);
+    const loaded = siblingsLoaded(full, entryHtml);
+    if (loaded.length)
+      warnings.push(
+        `${path35.basename(full)} loads ${loaded.slice(0, 3).join(", ")}${loaded.length > 3 ? ` and ${loaded.length - 3} more` : ""} next to it, which a single file does not take along: pass the folder (with the page as ${PAGE_ENTRY}) instead.`
+      );
+  }
+  const manifest = {};
+  let bytes = 0;
+  for (const [rel, data] of files) {
+    manifest[rel] = { hash: hashBuffer(data), size: data.length };
+    bytes += data.length;
+  }
+  return { files, manifest, title: htmlTitle(entryHtml), bytes, warnings };
+}
+
+// src/cli/commands/pages.ts
+var DEFAULT_NAME = "Pages";
+var base = (host) => host.replace(/\/+$/, "");
+var size2 = (bytes) => bytes < 1024 * 1024 ? `${Math.max(1, Math.round(bytes / 1024))} KB` : megabytes(bytes);
+var pageUrl = (host, project, slug2) => `${base(host)}/p/${project}/pages/${encodeURIComponent(slug2)}`;
+var publicUrl2 = (host, publicId) => `${base(host)}/a/${publicId}`;
+function client() {
+  const host = cloudHost();
+  return { host, client: new CloudClient(host, requireCredential(host).token) };
+}
+async function pagesProject(client2, wanted, options) {
+  const { owned, shared } = await client2.projects();
+  if (wanted) {
+    const all = [...owned, ...shared];
+    const byName = all.filter((project) => project.name === wanted);
+    const found = all.find((project) => project.id === wanted) ?? (byName.length === 1 ? byName[0] : void 0);
+    if (!found)
+      throw new CliError(
+        byName.length > 1 ? `Several projects are called "${wanted}"; pass its id (\`design pages\` names them).` : `No project "${wanted}" among yours on ${client2.host}.`
+      );
+    if (found.kind !== "pages")
+      throw new CliError(`${found.name} holds canvases, not pages; pages go to a pages project.`);
+    return found;
+  }
+  const mine = owned.filter((project) => project.kind === "pages" && !project.archived);
+  if (mine.length === 1) return mine[0];
+  if (mine.length > 1)
+    throw new CliError(
+      `You have several pages projects; pass one with --project:
+${mine.map((p) => `  ${p.id}  ${p.name}`).join("\n")}`
+    );
+  if (!options.create) return null;
+  const made = await client2.createProject(DEFAULT_NAME, "pages");
+  if (made.kind !== "pages") throw new CliError(`${client2.host} does not host pages yet.`);
+  options.log(`${green("created")} the pages project ${bold(made.name)} ${dim(`(${made.id})`)}`);
+  return made;
+}
+function check(project) {
+  if (project.banned) throw new CliError(`${project.name} is blocked by moderation.`);
+  if (project.archived) throw new CliError(`${project.name} is archived; unarchive it in the web app first.`);
+  if (project.role === "viewer") throw new CliError(`You can view ${project.name} but not publish to it.`);
+}
+async function runPage(target, options) {
+  if (!target) throw new CliError("Usage: design page <file.html|folder> [--name <slug>] [--public]");
+  const slug2 = options.name ?? slugFor(target);
+  if (!PAGE_SLUG.test(slug2))
+    throw new CliError(`--name takes lowercase letters, digits, - and _ (up to 100, starting with a letter or digit)`);
+  const bundle = readPage(target);
+  const log = options.json ? () => {
+  } : (line) => print(line);
+  for (const warning of bundle.warnings) log(yellow(warning));
+  const { host, client: cloud2 } = client();
+  const project = await pagesProject(cloud2, options.project, { create: true, log });
+  check(project);
+  if (options.public && project.role !== "owner")
+    throw new CliError(`Only the owner of ${project.name} gives pages a public link; publish without --public.`);
+  const title = options.title?.trim() || bundle.title || slug2;
+  const byHash = new Map([...bundle.files].map(([rel, data2]) => [bundle.manifest[rel].hash, data2]));
+  const missing = await cloud2.missing(project.id, [...byHash.keys()]);
+  if (missing.length) {
+    const bar = options.json ? null : progress();
+    let sent = 0;
+    await mapLimit(missing, TRANSFERS, async (hash) => {
+      const data2 = byHash.get(hash);
+      if (!data2) throw new CliError(`The cloud asked for ${hash.slice(0, 12)}, which is not part of this page`);
+      await cloud2.putBlob(project.id, hash, data2);
+      bar?.update(`Uploading ${++sent}/${missing.length} files`);
+    });
+    bar?.done(`Uploaded ${plural(missing.length, "file")}`);
+  }
+  let rev = 0;
+  let page;
+  for (let attempt = 0; ; attempt++) {
+    page = (await cloud2.pages(project.id)).find((item) => item.slug === slug2);
+    if (page?.banned) throw new CliError(`The page ${slug2} is blocked by moderation.`);
+    if (page?.archived) throw new CliError(`The page ${slug2} is archived; unarchive it in the web app first.`);
+    try {
+      const revs2 = await cloud2.push(project.id, [
+        {
+          key: `page/${slug2}`,
+          baseRev: page?.headRev ?? 0,
+          title,
+          source: {},
+          build: bundle.manifest,
+          systemRev: null
+        }
+      ]);
+      rev = revs2.get(`page/${slug2}`) ?? (page?.headRev ?? 0) + 1;
+      break;
+    } catch (error) {
+      if (attempt < 2 && error instanceof CloudError && error.status === 409 && error.error === "conflict") continue;
+      throw error;
+    }
+  }
+  const publicId = options.public ? (await cloud2.pageAction(project.id, slug2, "publish")).publicId : page?.publicId;
+  const data = {
+    ok: true,
+    project: { id: project.id, name: project.name },
+    page: { slug: slug2, title, rev, bytes: bundle.bytes, files: bundle.files.size },
+    url: pageUrl(host, project.id, slug2),
+    publicUrl: publicId ? publicUrl2(host, publicId) : null,
+    warnings: bundle.warnings
+  };
+  if (options.json) return print(JSON.stringify(data, null, 2));
+  print(
+    `${green("\u2713")} ${rev > 1 ? "Updated" : "Published"} ${bold(title)} ${dim(`(${slug2}, r${rev}, ${plural(bundle.files.size, "file")}, ${size2(bundle.bytes)})`)} in ${project.name}`
+  );
+  print(`  ${dim("Page  ")}  ${data.url}`);
+  if (data.publicUrl) print(`  ${dim("Public")}  ${data.publicUrl}`);
+  else
+    print(
+      dim(
+        project.role === "owner" ? "  Only the project\u2019s members see it; --public gives it a link anyone can open." : "  Only the project\u2019s members see it; its owner can give it a public link."
+      )
+    );
+}
+async function runPages(options) {
+  const { host, client: cloud2 } = client();
+  const project = await pagesProject(cloud2, options.project, { create: false, log: () => {
+  } });
+  if (!project) {
+    if (options.json) return print(JSON.stringify({ project: null, pages: [] }, null, 2));
+    return print(dim("No pages project yet: `design page <file.html>` makes one and publishes the page."));
+  }
+  const pages = await cloud2.pages(project.id);
+  if (options.json)
+    return print(
+      JSON.stringify(
+        {
+          project: { id: project.id, name: project.name, role: project.role },
+          pages: pages.map((page) => ({
+            ...page,
+            url: pageUrl(host, project.id, page.slug),
+            publicUrl: page.publicId ? publicUrl2(host, page.publicId) : null
+          }))
+        },
+        null,
+        2
+      )
+    );
+  print(`${bold(project.name)} ${dim(`${plural(pages.length, "page")} \xB7 ${base(host)}/p/${project.id}`)}`);
+  if (!pages.length) return print(dim("  none yet: `design page <file.html>` publishes one"));
+  const width = Math.max(...pages.map((page) => page.slug.length));
+  for (const page of pages) {
+    const state = page.banned ? yellow("blocked") : page.archived ? yellow("archived") : "";
+    print(
+      `  ${page.slug.padEnd(width)}  ${page.title}  ${dim(`r${page.headRev} \xB7 ${size2(page.bytes)} \xB7 ${ago(page.updatedAt)}`)}${state ? `  ${state}` : ""}`
+    );
+    if (page.publicId) print(`  ${" ".repeat(width)}  ${dim("public")} ${publicUrl2(host, page.publicId)}`);
+  }
+}
+
+// src/cli/commands/rename.ts
+import fs37 from "fs";
 async function runRename(paths, name) {
   const trimmed = name.trim();
   if (!trimmed) throw new CliError("Usage: design rename <name>");
   const link = readLink(paths);
   if (link) {
-    const client = new CloudClient(link.host, requireCredential(link.host).token);
-    const project = await client.renameProject(link.project, trimmed);
+    const client2 = new CloudClient(link.host, requireCredential(link.host).token);
+    const project = await client2.renameProject(link.project, trimmed);
     link.name = project.name;
     writeLink(paths, link);
     print(`${green("Renamed")} the cloud project to ${project.name}`);
@@ -7502,17 +8059,17 @@ async function runRename(paths, name) {
   }
   let config = {};
   try {
-    config = JSON.parse(fs36.readFileSync(paths.config, "utf8"));
+    config = JSON.parse(fs37.readFileSync(paths.config, "utf8"));
   } catch {
   }
-  fs36.writeFileSync(paths.config, `${JSON.stringify({ ...config, name: trimmed }, null, 2)}
+  fs37.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 fs37 from "fs";
-import path35 from "path";
+import fs38 from "fs";
+import path36 from "path";
 
 // src/cli/templates.ts
 var TOKENS_CSS = `/*
@@ -7723,40 +8280,40 @@ function mainScreen(canvasId) {
 
 // src/cli/commands/scaffold.ts
 function write(file, content, root) {
-  if (fs37.existsSync(file)) {
-    print(`  ${dim("exists ")} ${path35.relative(root, file)}`);
+  if (fs38.existsSync(file)) {
+    print(`  ${dim("exists ")} ${path36.relative(root, file)}`);
     return false;
   }
-  fs37.mkdirSync(path35.dirname(file), { recursive: true });
-  fs37.writeFileSync(file, content);
-  print(`  ${green("created")} ${path35.relative(root, file)}`);
+  fs38.mkdirSync(path36.dirname(file), { recursive: true });
+  fs38.writeFileSync(file, content);
+  print(`  ${green("created")} ${path36.relative(root, file)}`);
   return true;
 }
 function ensureGitignored(root) {
-  const file = path35.join(root, ".gitignore");
-  const current = fs37.existsSync(file) ? fs37.readFileSync(file, "utf8") : "";
+  const file = path36.join(root, ".gitignore");
+  const current = fs38.existsSync(file) ? fs38.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" : "";
-  fs37.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
+  fs38.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
 .design/
 `);
   return "added";
 }
 function projectName(root) {
   try {
-    const manifest = JSON.parse(fs37.readFileSync(path35.join(root, "package.json"), "utf8"));
+    const manifest = JSON.parse(fs38.readFileSync(path36.join(root, "package.json"), "utf8"));
     if (typeof manifest.name === "string" && manifest.name) return manifest.name;
   } catch {
   }
-  return path35.basename(root);
+  return path36.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);
-  fs37.mkdirSync(paths.canvases, { recursive: true });
+  fs38.mkdirSync(paths.canvases, { recursive: true });
   if (options.gitignore) {
     const result = ensureGitignored(root);
     print(`  ${result === "added" ? green("ignored") : dim("ignored")} .design/ in .gitignore`);
@@ -7768,46 +8325,46 @@ function runInit(root, options) {
 }
 function runSystemInit(root, options) {
   const paths = designPaths(root);
-  let base = projectName(root);
+  let base2 = projectName(root);
   try {
-    base = JSON.parse(fs37.readFileSync(paths.config, "utf8")).name || base;
+    base2 = JSON.parse(fs38.readFileSync(paths.config, "utf8")).name || base2;
   } catch {
   }
-  const name = options.name ?? `${base} design system`;
-  print(`Scaffolding the design system in ${path35.relative(root, paths.system)}`);
-  write(path35.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
+  const name = options.name ?? `${base2} design system`;
+  print(`Scaffolding the design system in ${path36.relative(root, paths.system)}`);
+  write(path36.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
 `, root);
-  write(path35.join(paths.system, "tokens.css"), TOKENS_CSS, root);
+  write(path36.join(paths.system, "tokens.css"), TOKENS_CSS, root);
   if (!options.empty) {
-    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);
+    write(path36.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
+    write(path36.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
+    write(path36.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 = path35.join(paths.canvases, id2);
-  if (fs37.existsSync(path35.join(dir, "canvas.json"))) throw new CliError(`Canvas "${id2}" already exists in ${dir}`);
+  const dir = path36.join(paths.canvases, id2);
+  if (fs38.existsSync(path36.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(
-      path35.join(dir, "canvas.json"),
+      path36.join(dir, "canvas.json"),
       `${JSON.stringify({ title, pages: [{ id: "main", title: "Main", sections: [] }] }, null, 2)}
 `,
       root
     );
-    fs37.mkdirSync(path35.join(dir, "screens"), { recursive: true });
+    fs38.mkdirSync(path36.join(dir, "screens"), { recursive: true });
   } else {
-    write(path35.join(dir, "canvas.json"), canvasJson(title), root);
-    write(path35.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
+    write(path36.join(dir, "canvas.json"), canvasJson(title), root);
+    write(path36.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
   }
 }
 
 // src/cli/commands/shot.ts
-import fs38 from "fs";
-import path36 from "path";
+import fs39 from "fs";
+import path37 from "path";
 var OVERVIEW_TIMEOUT = 9e4;
 var DRAWING_TIMEOUT = 45e3;
 var DRAWING_MAX_SIDE = 1280;
@@ -7833,16 +8390,16 @@ 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 = path36.resolve(options.out ?? paths.shots);
-  const outDir = path36.join(outBase, canvasId);
-  fs38.mkdirSync(outDir, { recursive: true });
-  const base = await serverBase(paths);
+  const outBase = path37.resolve(options.out ?? paths.shots);
+  const outDir = path37.join(outBase, canvasId);
+  fs39.mkdirSync(outDir, { recursive: true });
+  const base2 = 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, {
+      if (!fs39.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there are no drawings to shoot.");
+      const drawingsFailed = await shootDrawings(browser, base2, canvasId, outDir, theme2, {
         board: !!options.board,
         page: options.page,
         screen: screenId,
@@ -7852,11 +8409,11 @@ async function runShot(paths, target, options) {
       return;
     }
     if (options.overview) {
-      if (!fs38.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there is no canvas to shoot.");
+      if (!fs39.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 } });
-        const url = `${base}/c/${encodeURIComponent(canvasId)}?page=${encodeURIComponent(pageId)}&capture=1&theme=${theme2}`;
+        const url = `${base2}/c/${encodeURIComponent(canvasId)}?page=${encodeURIComponent(pageId)}&capture=1&theme=${theme2}`;
         await page.goto(url, { waitUntil: "load" });
         try {
           await page.waitForFunction(
@@ -7868,14 +8425,14 @@ 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 = path36.join(outDir, `${pageId}.overview.png`);
+        const file = path37.join(outDir, `${pageId}.overview.png`);
         await page.screenshot({ path: file });
         await page.close();
         print(file);
       }
       return;
     }
-    const jobs = canvasFrames(doc, base, theme2, { page: options.page, id: screenId });
+    const jobs = canvasFrames(doc, base2, theme2, { page: options.page, id: screenId });
     if (!jobs.length) {
       throw new CliError(
         screenId ? `No screen "${screenId}" in "${canvasId}"${options.page ? ` on page "${options.page}"` : ""}.` : `Nothing to shoot in "${canvasId}"${options.page ? ` on page "${options.page}"` : ""}.`
@@ -7887,8 +8444,8 @@ 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);
+async function shootDrawings(browser, base2, canvasId, outDir, theme2, want) {
+  const port = Number(new URL(base2).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");
@@ -7906,21 +8463,21 @@ async function shootDrawings(browser, base, canvasId, outDir, theme2, want) {
     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}`;
+      const url = `${base2}/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(
+      const size3 = 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) });
+      if (size3?.width && size3.height)
+        await page.setViewportSize({ width: Math.round(size3.width), height: Math.min(Math.round(size3.height), 16e3) });
       await page.waitForTimeout(200);
       if (!want.board) {
-        const file = path36.join(outDir, `${id2}.markup.${theme2}.png`);
+        const file = path37.join(outDir, `${id2}.markup.${theme2}.png`);
         await page.screenshot({ path: file });
         print(file);
         continue;
@@ -7929,7 +8486,7 @@ async function shootDrawings(browser, base, canvasId, outDir, theme2, want) {
         () => 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`);
+        const file = path37.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);
       }
@@ -7953,7 +8510,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 = path36.join(outDir, `${job.id}.${job.theme}.png`);
+    const file = path37.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 });
@@ -7985,10 +8542,10 @@ 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 = 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 outDir = path37.join(path37.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
+  fs39.mkdirSync(outDir, { recursive: true });
+  const base2 = await serverBase(paths);
+  const jobs = systemFrames(system.doc, base2, theme2).filter((job) => !id2 || job.id === id2);
   const browser = await launchChrome();
   try {
     if (await shootFrames(browser, jobs, outDir)) process.exitCode = 1;
@@ -8036,7 +8593,7 @@ async function runSnapshots(paths, targets2, options) {
 }
 
 // src/cli/commands/cloud-status.ts
-import path37 from "path";
+import path38 from "path";
 var STATE_TEXT = {
   in_sync: green,
   local_changes: yellow,
@@ -8055,11 +8612,15 @@ function detail(paths, status) {
     if (!status.baseRev && status.headRev === null) parts.push("new");
     else if (!status.local) parts.push("deleted here");
     else if (status.changed.length) parts.push(plural(status.changed.length, "file"));
+    if (status.usesChanged.length)
+      parts.push(
+        `uses ${plural(status.usesChanged.length, "changed file")} from outside: ${status.usesChanged.slice(0, 2).join(", ")}${status.usesChanged.length > 2 ? ", \u2026" : ""}`
+      );
   }
   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 ${path37.relative(paths.root, incomingDir(paths, status.key))}`);
+  if (status.conflictRev !== void 0) parts.push(`merge ${path38.relative(paths.root, incomingDir(paths, status.key))}`);
   return parts.join(" \xB7 ");
 }
 async function printCloudStatus(paths, label) {
@@ -8072,17 +8633,17 @@ async function printCloudStatus(paths, label) {
   }
   const host = link?.host ?? cloudHost();
   const credential = getCredential(host);
-  const client = credential ? new CloudClient(host, credential.token) : null;
+  const client2 = credential ? new CloudClient(host, credential.token) : null;
   let remote = null;
   let problem = null;
-  if (!client || !credential) {
+  if (!client2 || !credential) {
     problem = "not signed in";
     print(`${label("Cloud")}${dim(`not signed in to ${host} \u2014 \`design login\``)}`);
   } else {
     try {
-      const me = await client.me();
+      const me = await client2.me();
       print(`${label("Cloud")}${me.email || credential.email} ${dim(host)}`);
-      if (link) remote = await client.units(link.project);
+      if (link) remote = await client2.units(link.project);
     } catch (error) {
       problem = error.message;
       if (error instanceof CloudError && error.status === 401)
@@ -8095,9 +8656,9 @@ async function printCloudStatus(paths, label) {
     return;
   }
   let name = link.project;
-  if (client && !problem) {
+  if (client2 && !problem) {
     try {
-      const { owned, shared } = await client.projects();
+      const { owned, shared } = await client2.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 {
@@ -8107,7 +8668,7 @@ async function printCloudStatus(paths, label) {
   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)
+    (key) => unitStatus(key, link, scan.units.get(key)?.manifest, remote, paths.design)
   );
   if (!statuses.length) print(`${label("Units")}${dim("none yet")}`);
   else {
@@ -8257,6 +8818,14 @@ ${bold("Cloud")}  ${dim("units: system (design.json + system/) and canvas/<id>;
                                              history kept
   unarchive <canvas>                         Bring an archived canvas back
 
+${bold("Pages")}  ${dim("HTML pages published to the cloud, each at its own link; no .design needed")}
+  page <file.html|folder> [--name <slug>]    Publish an HTML file, or a folder with an index.html and
+       [--title <title>] [--project <id>]    what it loads, as a page of your pages project (made on
+       [--public] [--json]                   first use). The same name again is a new version at the
+                                             same links. --public gives it a link anyone can open
+                                             (owner only); links to other sites open in a new tab
+  pages [--project <id>] [--json]            The pages: name, title, version, size, public link
+
 ${bold("Options")}
   --root <dir>   Project folder (default: the nearest folder with .design, or the current one)
   -h, --help     This help
@@ -8266,7 +8835,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 ? path38.resolve(rootOption) : findProjectRoot();
+  const found = rootOption ? path39.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.");
@@ -8318,6 +8887,8 @@ async function main(argv) {
       full: { type: "boolean" },
       tar: { type: "boolean" },
       new: { type: "string" },
+      project: { type: "string" },
+      public: { type: "boolean" },
       resolved: { type: "string", multiple: true },
       theirs: { type: "string", multiple: true },
       help: { type: "boolean", short: "h" },
@@ -8333,7 +8904,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 ? path38.resolve(values.root) : process.cwd(), {
+      return runInit(values.root ? path39.resolve(values.root) : process.cwd(), {
         name: values.name,
         gitignore: !values["no-gitignore"]
       });
@@ -8430,6 +9001,17 @@ async function main(argv) {
     case "archive":
     case "unarchive":
       return runArchive(projectPaths(values.root), rest[0], command === "archive");
+    case "page":
+      if (rest.length > 1) throw new CliError("Usage: design page <file.html|folder> [--name <slug>] [--public]");
+      return runPage(rest[0], {
+        name: values.name,
+        title: values.title,
+        project: values.project,
+        public: !!values.public,
+        json: !!values.json
+      });
+    case "pages":
+      return runPages({ project: values.project, json: !!values.json });
     case "push":
       return runPush(projectPaths(values.root), rest, { resolved: values.resolved ?? [], json: !!values.json });
     case "pull":
@@ -8440,18 +9022,18 @@ async function main(argv) {
 }
 function relaunchFromRealPath() {
   if (process.platform !== "win32" || process.env.FOSS_DESIGN_RELAUNCHED) return false;
-  const script = process.argv[1];
-  if (!script) return false;
+  const script2 = process.argv[1];
+  if (!script2) return false;
   let realScript;
   let realCwd;
   try {
-    realScript = fs39.realpathSync.native(script);
-    realCwd = fs39.realpathSync.native(process.cwd());
+    realScript = fs40.realpathSync.native(script2);
+    realCwd = fs40.realpathSync.native(process.cwd());
   } catch {
     return false;
   }
-  const same = (a, b) => path38.resolve(a).toLowerCase() === path38.resolve(b).toLowerCase();
-  if (same(realScript, script) && same(realCwd, process.cwd())) return false;
+  const same = (a, b) => path39.resolve(a).toLowerCase() === path39.resolve(b).toLowerCase();
+  if (same(realScript, script2) && same(realCwd, process.cwd())) return false;
   const result = spawnSync3(process.execPath, [...process.execArgv, realScript, ...process.argv.slice(2)], {
     stdio: "inherit",
     cwd: realCwd,