foss-design 0.9.9 → 0.9.11

package/dist/cli.js

@@ -2,8 +2,8 @@
 
 // src/cli/index.ts
 import { spawnSync as spawnSync3 } from "child_process";
-import fs37 from "fs";
-import path36 from "path";
+import fs38 from "fs";
+import path37 from "path";
 import { parseArgs } from "util";
 
 // src/core/paths.ts
@@ -136,12 +136,12 @@ function resolveFrom(anchor, request) {
 
 // src/cli/commands/build.ts
 import { spawnSync } from "child_process";
-import fs13 from "fs";
-import path13 from "path";
+import fs14 from "fs";
+import path14 from "path";
 
 // src/build/static.ts
-import fs12 from "fs";
-import path12 from "path";
+import fs13 from "fs";
+import path13 from "path";
 import { build } from "vite";
 
 // src/core/png.ts
@@ -297,8 +297,8 @@ function ensureThumb(file) {
   const thumb = thumbPath(file);
   try {
     const source = fs2.statSync(file);
-    const existing = fs2.statSync(thumb, { throwIfNoEntry: false });
-    if (existing && existing.mtimeMs >= source.mtimeMs) return thumb;
+    const existing2 = fs2.statSync(thumb, { throwIfNoEntry: false });
+    if (existing2 && existing2.mtimeMs >= source.mtimeMs) return thumb;
     const small = thumbnail(fs2.readFileSync(file));
     if (!small) return file;
     fs2.writeFileSync(thumb, small);
@@ -348,8 +348,8 @@ function routeError(pattern) {
   }
   return null;
 }
-function split(path37) {
-  return path37.split("/").filter(Boolean);
+function split(path38) {
+  return path38.split("/").filter(Boolean);
 }
 function compileRoute(pattern) {
   return {
@@ -368,8 +368,8 @@ function decode2(part) {
     return part;
   }
 }
-function scoreRoute(route2, path37) {
-  const parts = split(path37.split(/[?#]/)[0] ?? "").map(decode2);
+function scoreRoute(route2, path38) {
+  const parts = split(path38.split(/[?#]/)[0] ?? "").map(decode2);
   const walk2 = (s, p) => {
     if (s === route2.segments.length) return p === parts.length ? 0 : null;
     const segment = route2.segments[s];
@@ -387,11 +387,11 @@ function scoreRoute(route2, path37) {
   };
   return walk2(0, 0);
 }
-function matchRoute(entries, path37) {
+function matchRoute(entries, path38) {
   let best = null;
   for (const entry of entries) {
     for (const route2 of entry.routes) {
-      const score = scoreRoute(route2, path37);
+      const score = scoreRoute(route2, path38);
       if (score !== null && (!best || score > best.score)) best = { score, value: entry.value };
     }
   }
@@ -518,9 +518,9 @@ var CanvasSchema = z.strictObject({
   pages: z.array(z.unknown()).min(1, "add at least one page")
 });
 var ID_PATTERN = /^[a-z0-9][a-z0-9_-]*$/i;
-function formatPath(base, path37) {
+function formatPath(base, path38) {
   let out = base;
-  for (const part of path37) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
+  for (const part of path38) out += typeof part === "number" ? `[${part}]` : out ? `.${String(part)}` : String(part);
   return out;
 }
 function describeZodError(error, base = "") {
@@ -1269,6 +1269,16 @@ var SPECIMEN_EXT = /* @__PURE__ */ new Set([".tsx", ".jsx", ".html"]);
 var COMPONENT_EXT = [".tsx", ".jsx", ".ts", ".js", ".vue", ".svelte", ".html"];
 var IMAGE_EXT = /* @__PURE__ */ new Set([".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif", ".svg", ".ico"]);
 var FONT_EXT = /* @__PURE__ */ new Set([".woff", ".woff2", ".ttf", ".otf"]);
+function isShowableSource(paths, file) {
+  if (!isInside(paths.root, file)) return false;
+  const parts = path7.relative(paths.root, file).split(path7.sep);
+  if (parts.some((part, index) => part.startsWith(".") && !(index === 0 && part === DESIGN_DIR))) return false;
+  try {
+    return fs7.statSync(file).isFile() && isInside(fs7.realpathSync(paths.root), fs7.realpathSync(file));
+  } catch {
+    return false;
+  }
+}
 function listFiles(dir, deep = false) {
   if (!fs7.existsSync(dir)) return [];
   const out = [];
@@ -1343,8 +1353,14 @@ function loadSystem(paths, urls) {
     const sources = (tags.source ?? []).flatMap((value) => value.split(/[\s,]+/)).filter(Boolean).map((value) => path7.resolve(path7.dirname(file), value));
     for (const source of sources) {
       if (!fs7.existsSync(source)) report("warning", file, `@source not found: ${path7.relative(paths.system, source)}`);
+      else if (!isShowableSource(paths, source))
+        report(
+          "warning",
+          file,
+          `@source not shown (outside the project, or a dot-file): ${path7.relative(paths.system, source)}`
+        );
     }
-    const found = sources.filter((source) => fs7.existsSync(source));
+    const found = sources.filter((source) => isShowableSource(paths, source));
     const title = tags.title?.[0] || titleize(stem);
     const format = ext === ".html" ? "html" : "module";
     components.push({
@@ -1354,7 +1370,7 @@ function loadSystem(paths, urls) {
       description: tags.description?.[0] || void 0,
       status: tags.status?.[0] || void 0,
       specimen: relToRoot(paths, file),
-      sources: (found.length ? found : guessSources(componentsDir, stem)).map((source) => relToRoot(paths, source)),
+      sources: (found.length ? found : guessSources(componentsDir, stem)).filter((source) => isShowableSource(paths, source)).map((source) => relToRoot(paths, source)),
       url: format === "module" ? urls.screen(SYSTEM_CANVAS, id2) : urls.html(relToDesign(paths, file), SYSTEM_CANVAS, id2)
     });
     specimens.push({
@@ -1957,10 +1973,156 @@ function linkShippedPackages(paths, appDir = null) {
 
 // src/server/vite.ts
 import { createHash as createHash3 } from "crypto";
-import fs11 from "fs";
-import path11 from "path";
+import fs12 from "fs";
+import path12 from "path";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
+
+// src/server/css-guard.ts
+import fs11 from "fs";
+import { createRequire as createRequire2 } from "module";
+import path11 from "path";
+import { createIdResolver } from "vite";
+var LOADS_CODE = /@(plugin|config)\b([^;{}]*)|\buse\(\s*(["'])(.*?)\3/gi;
+var IMPORTS = /@(import|reference|require)\b([^;{}]*)/gi;
+var STYLESHEET = /\.(css|less|styl|stylus)$/i;
+var UNTOUCHED = /[?&](?:worker|sharedworker|raw|url)\b/;
+var JS_EXT = ["", ".js", ".mjs", ".cjs", ".ts", ".mts", ".cts", "/index.js", "/index.mjs", "/index.cjs", "/index.ts"];
+var STYLE_EXT = ["", ".css", ".less", ".styl", "/index.css", "/index.styl"];
+var idFile = (id2) => id2.replace(/[?#].*$/, "");
+function isStylesheetId(id2) {
+  if (UNTOUCHED.test(id2) || id2.startsWith("\0") || id2.includes("/.vite/")) return false;
+  return STYLESHEET.test(idFile(id2)) || /&lang\.(css|less|styl)/.test(id2) || /[?&]index=\d+\.css$/.test(id2);
+}
+var stripComments = (text2) => text2.replace(/\/\*[\s\S]*?(\*\/|$)/g, "");
+function targets(params) {
+  const out = /* @__PURE__ */ new Set();
+  for (const text2 of [params.trim(), stripComments(params).trim()]) {
+    if (!text2) continue;
+    out.add(text2.slice(1, -1));
+    out.add(text2.slice(1, -1).trim());
+    const quoted = /(["'])(.*?)\1/.exec(text2)?.[2];
+    if (quoted) out.add(quoted);
+    const url = /^url\(\s*(["']?)(.*?)\1\s*\)/.exec(text2)?.[2];
+    if (url) out.add(url);
+    const bare = /^[^\s"'()]+/.exec(text2)?.[0];
+    if (bare) out.add(bare);
+  }
+  out.delete("");
+  return [...out];
+}
+var isPathLike = (spec) => spec.startsWith(".") || path11.isAbsolute(spec);
+function existing(base, exts) {
+  for (const ext of exts) {
+    const file = base + ext;
+    try {
+      if (fs11.statSync(file).isFile()) return fs11.realpathSync(file);
+    } catch {
+    }
+  }
+  return null;
+}
+function designCodeGuard(design) {
+  let config = null;
+  const pulled = (file) => isInside(design, file) && !toPosix(file).split("/").includes("node_modules");
+  const shown = (file) => toPosix(path11.relative(path11.dirname(design), file));
+  const resolvers = (environment) => {
+    const resolveWith = (options, accept) => {
+      const resolveId = config ? createIdResolver(config, options) : null;
+      return async (spec, importer) => {
+        if (!resolveId) return null;
+        const from = path11.join(path11.dirname(importer), "__placeholder__.ts");
+        for (const aliasOnly of [true, false]) {
+          try {
+            let found = await resolveId(environment, spec, from, aliasOnly);
+            if (found && found !== spec) {
+              if (found.startsWith(".")) found = path11.resolve(path11.dirname(importer), found);
+              found = idFile(found);
+              if (path11.isAbsolute(found) && accept(found)) return found;
+            }
+          } catch {
+          }
+        }
+        return null;
+      };
+    };
+    const style = resolveWith(
+      {
+        ...config?.resolve,
+        extensions: [".css"],
+        mainFields: ["style"],
+        conditions: ["style", "development|production"],
+        tryIndex: false,
+        preferRelative: true
+      },
+      (file) => file.endsWith(".css")
+    );
+    const script = resolveWith({ ...config?.resolve }, (file) => !file.endsWith(".css"));
+    return { style, script };
+  };
+  const candidates = async (spec, importer, resolve, exts) => {
+    const found = /* @__PURE__ */ new Set();
+    const local = path11.resolve(path11.dirname(importer), spec);
+    if (isPathLike(spec)) found.add(local);
+    const file = existing(local, exts);
+    if (file) found.add(file);
+    const viaVite = await resolve(spec, importer);
+    if (viaVite) found.add(viaVite);
+    if (!isPathLike(spec)) {
+      try {
+        found.add(createRequire2(importer).resolve(spec));
+      } catch {
+      }
+    }
+    return [...found];
+  };
+  const check = async (environment, file, code, seen) => {
+    const { style, script } = 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)) {
+          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.`
+          );
+        }
+      }
+    }
+    for (const match of code.matchAll(IMPORTS)) {
+      for (const spec of targets(match[2] ?? "")) {
+        if (/^(data:|https?:|\/\/)/i.test(spec)) continue;
+        for (const target of await candidates(spec, file, style, STYLE_EXT)) {
+          if (seen.has(target) || !STYLESHEET.test(target) || toPosix(target).includes("/node_modules/")) continue;
+          seen.add(target);
+          let text2;
+          try {
+            text2 = fs11.readFileSync(target, "utf8");
+          } catch {
+            continue;
+          }
+          await check(environment, target, text2, seen);
+        }
+      }
+    }
+  };
+  return {
+    name: "design:code-guard",
+    enforce: "pre",
+    configResolved(resolved) {
+      config = resolved;
+    },
+    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]));
+      return null;
+    }
+  };
+}
+
+// src/server/vite.ts
 var escapeRegExp = (text2) => text2.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 function aliases(project) {
   const { paths } = project;
@@ -1971,7 +2133,7 @@ function aliases(project) {
     { find: /^@system\//, replacement: `${toPosix(paths.system)}/` }
   ];
   for (const [key, target] of Object.entries(project.config().config.alias ?? {})) {
-    const replacement = toPosix(path11.resolve(paths.root, target));
+    const replacement = toPosix(path12.resolve(paths.root, target));
     list.push(
       key.endsWith("/") ? { find: new RegExp(`^${escapeRegExp(key)}`), replacement: `${replacement.replace(/\/$/, "")}/` } : { find: new RegExp(`^${escapeRegExp(key)}(?=/|$)`), replacement }
     );
@@ -1979,23 +2141,23 @@ function aliases(project) {
   return list;
 }
 function dropStaleDepCache(paths, appDir = null) {
-  const dir = path11.join(paths.cache, "vite");
-  const stamp = path11.join(paths.cache, "vite-runtime");
+  const dir = path12.join(paths.cache, "vite");
+  const stamp = path12.join(paths.cache, "vite-runtime");
   let runtime = "";
   try {
-    runtime = createHash3("sha256").update(fs11.readFileSync(PKG.runtime)).digest("hex");
+    runtime = createHash3("sha256").update(fs12.readFileSync(PKG.runtime)).digest("hex");
   } catch {
   }
   if (appDir) runtime += ` ${appDir}`;
   let seen = "";
   try {
-    seen = fs11.readFileSync(stamp, "utf8");
+    seen = fs12.readFileSync(stamp, "utf8");
   } catch {
   }
   if (seen === runtime) return;
-  fs11.rmSync(dir, { recursive: true, force: true });
-  fs11.mkdirSync(paths.cache, { recursive: true });
-  fs11.writeFileSync(stamp, runtime);
+  fs12.rmSync(dir, { recursive: true, force: true });
+  fs12.mkdirSync(paths.cache, { recursive: true });
+  fs12.writeFileSync(stamp, runtime);
 }
 function baseConfig(project) {
   const { paths } = project;
@@ -2003,7 +2165,7 @@ function baseConfig(project) {
     configFile: false,
     envDir: false,
     root: paths.design,
-    cacheDir: path11.join(paths.cache, "vite"),
+    cacheDir: path12.join(paths.cache, "vite"),
     // design.json `public`: served under the frames' base, so HTML and CSS paths such as `/logo.png` resolve.
     publicDir: project.publicDir() ?? false,
     logLevel: "warn",
@@ -2013,7 +2175,12 @@ function baseConfig(project) {
       // One React for screens, the runtime and project components: resolved from `.design`.
       dedupe: ["react", "react-dom"]
     },
-    plugins: [react(), tailwindcss()]
+    // No PostCSS config is looked up (Vite would search from `.design` upward and load it in Node):
+    // screens get Tailwind from the plugin, and the app's own config is for the app's build.
+    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()]
   };
 }
 
@@ -2023,7 +2190,7 @@ var SOURCE_EXT = /* @__PURE__ */ new Set([".ts", ".tsx", ".jsx", ".mts", ".cts",
 var BUNDLED_REF = /<(script|link|img|source|video|audio|image|use|input)\b[^>]*>/gi;
 var encodePath2 = (rel) => rel.split("/").map(encodeURIComponent).join("/");
 function relUrl(fromDir, file) {
-  const rel = toPosix(path12.relative(fromDir, file));
+  const rel = toPosix(path13.relative(fromDir, file));
   return rel.startsWith(".") ? rel : `./${rel}`;
 }
 function staticSnapshots(paths) {
@@ -2033,7 +2200,7 @@ function staticSnapshots(paths) {
     let data = metaCache.get(canvas);
     if (!data) {
       try {
-        data = JSON.parse(fs12.readFileSync(path12.join(paths.snapshots, canvas, "meta.json"), "utf8"));
+        data = JSON.parse(fs13.readFileSync(path13.join(paths.snapshots, canvas, "meta.json"), "utf8"));
       } catch {
       }
       data ??= {};
@@ -2047,8 +2214,8 @@ function staticSnapshots(paths) {
     const urls = {};
     const thumbs = {};
     for (const theme2 of THEMES) {
-      const file = path12.join(paths.snapshots, canvas, `${id2}.${theme2}.png`);
-      if (!entry[theme2] || !fs12.existsSync(file)) continue;
+      const file = path13.join(paths.snapshots, canvas, `${id2}.${theme2}.png`);
+      if (!entry[theme2] || !fs13.existsSync(file)) continue;
       const rel = `_snap/${canvas}/${id2}.${theme2}.png`;
       copies.set(file, rel);
       urls[theme2] = `${encodePath2(rel)}?v=${entry[theme2]}`;
@@ -2072,29 +2239,29 @@ function rewriteRefs(html, originalDir, stagedDir) {
       (whole, attr2, quote, value) => {
         if (!value || /^(?:[a-z][a-z0-9+.-]*:|\/|#|\{)/i.test(value)) return whole;
         const [pathname = "", suffix = ""] = /^([^?#]*)(.*)$/.exec(value).slice(1);
-        const target = path12.resolve(originalDir, decodeURIComponent(pathname));
-        if (!fs12.existsSync(target)) return whole;
+        const target = path13.resolve(originalDir, decodeURIComponent(pathname));
+        if (!fs13.existsSync(target)) return whole;
         return `${attr2}${quote}${relUrl(stagedDir, target)}${suffix}${quote}`;
       }
     );
   });
 }
 function copyTree(from, to, filter) {
-  if (!fs12.existsSync(from)) return;
-  for (const entry of fs12.readdirSync(from, { withFileTypes: true })) {
+  if (!fs13.existsSync(from)) return;
+  for (const entry of fs13.readdirSync(from, { withFileTypes: true })) {
     if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
-    const source = path12.join(from, entry.name);
-    const target = path12.join(to, entry.name);
+    const source = path13.join(from, entry.name);
+    const target = path13.join(to, entry.name);
     if (entry.isDirectory()) copyTree(source, target, filter);
-    else if (filter(source) && !fs12.existsSync(target)) {
-      fs12.mkdirSync(path12.dirname(target), { recursive: true });
-      fs12.copyFileSync(source, target);
+    else if (filter(source) && !fs13.existsSync(target)) {
+      fs13.mkdirSync(path13.dirname(target), { recursive: true });
+      fs13.copyFileSync(source, target);
     }
   }
 }
 function writeJson(file, value) {
-  fs12.mkdirSync(path12.dirname(file), { recursive: true });
-  fs12.writeFileSync(file, JSON.stringify(value));
+  fs13.mkdirSync(path13.dirname(file), { recursive: true });
+  fs13.writeFileSync(file, JSON.stringify(value));
 }
 async function buildSite(paths, out, options = {}) {
   const snapshots = staticSnapshots(paths);
@@ -2112,18 +2279,18 @@ async function buildSite(paths, out, options = {}) {
   linkShippedPackages(paths, project.appDir());
   const publicDir = project.publicDir();
   const publicFiles2 = project.publicFiles();
-  const staging = path12.join(paths.cache, "build", "src");
-  fs12.rmSync(staging, { recursive: true, force: true });
+  const staging = path13.join(paths.cache, "build", "src");
+  fs13.rmSync(staging, { recursive: true, force: true });
   const fonts = loadedSystem?.doc.fonts ?? [];
   const sources = [...system?.specimens ?? [], ...canvases.flatMap((canvas) => canvas.screens)];
   const inputs = [];
   const htmlScreens = [];
   for (const source of sources) {
-    if (!source.builtin && !fs12.existsSync(source.file)) continue;
-    const siteDir = path12.join("_s", source.canvas, source.id);
-    const dir = path12.join(staging, siteDir);
-    const file = path12.join(dir, "index.html");
-    fs12.mkdirSync(dir, { recursive: true });
+    if (!source.builtin && !fs13.existsSync(source.file)) continue;
+    const siteDir = path13.join("_s", source.canvas, source.id);
+    const dir = path13.join(staging, siteDir);
+    const file = path13.join(dir, "index.html");
+    fs13.mkdirSync(dir, { recursive: true });
     const canvasTheme = source.canvas === SYSTEM_CANVAS ? void 0 : project.canvas(source.canvas)?.doc.theme;
     const head = {
       source,
@@ -2132,24 +2299,24 @@ async function buildSite(paths, out, options = {}) {
       snapshots: false,
       autoHeight: source.autoHeight ?? false,
       // The public folder lands at the site root, which frames reach through `../`.
-      public: publicFiles2.length ? { base: `${toPosix(path12.relative(dir, staging))}/`, files: publicFiles2 } : void 0
+      public: publicFiles2.length ? { base: `${toPosix(path13.relative(dir, staging))}/`, files: publicFiles2 } : void 0
     };
     if (source.format === "module") {
-      fs12.writeFileSync(file, moduleShell(head, relUrl(dir, entries.entryFile(source))));
+      fs13.writeFileSync(file, moduleShell(head, relUrl(dir, entries.entryFile(source))));
     } else {
-      const raw = rewriteRefs(fs12.readFileSync(source.file, "utf8"), path12.dirname(source.file), dir);
+      const raw = rewriteRefs(fs13.readFileSync(source.file, "utf8"), path13.dirname(source.file), dir);
       const withSystem = source.system && !optsOutOfSystem(raw);
       const html = injectIntoHtml(raw, {
         ...head,
         systemCss: withSystem ? relUrl(dir, entries.systemCssFile()) : void 0,
-        boot: relUrl(dir, path12.join(entries.dir, HTML_BOOT))
+        boot: relUrl(dir, path13.join(entries.dir, HTML_BOOT))
       });
-      fs12.writeFileSync(file, html);
+      fs13.writeFileSync(file, html);
       htmlScreens.push({ source, dir: siteDir });
     }
     inputs.push(file);
   }
-  fs12.mkdirSync(out, { recursive: true });
+  fs13.mkdirSync(out, { recursive: true });
   const moduleMap = {};
   if (inputs.length) {
     const base = baseConfig(project);
@@ -2162,7 +2329,7 @@ async function buildSite(paths, out, options = {}) {
           generateBundle(_, bundle) {
             for (const [file, chunk2] of Object.entries(bundle)) {
               if (chunk2.type !== "chunk") continue;
-              moduleMap[file] = (chunk2.moduleIds ?? []).map((id2) => id2.split("?")[0]).filter((id2) => path12.isAbsolute(id2) && !id2.includes(`${path12.sep}node_modules${path12.sep}`)).map((id2) => toPosix(path12.relative(paths.root, id2))).filter((rel) => !rel.startsWith(".."));
+              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
@@ -2183,15 +2350,15 @@ async function buildSite(paths, out, options = {}) {
       }
     });
   } else {
-    fs12.rmSync(out, { recursive: true, force: true });
-    fs12.mkdirSync(out, { recursive: true });
+    fs13.rmSync(out, { recursive: true, force: true });
+    fs13.mkdirSync(out, { recursive: true });
   }
-  if (options.moduleMap) fs12.writeFileSync(path12.join(out, "modules.json"), JSON.stringify(moduleMap));
+  if (options.moduleMap) fs13.writeFileSync(path13.join(out, "modules.json"), JSON.stringify(moduleMap));
   for (const { source, dir } of htmlScreens) {
     copyTree(
-      path12.dirname(source.file),
-      path12.join(out, dir),
-      (file) => !SOURCE_EXT.has(path12.extname(file).toLowerCase())
+      path13.dirname(source.file),
+      path13.join(out, dir),
+      (file) => !SOURCE_EXT.has(path13.extname(file).toLowerCase())
     );
   }
   const files = /* @__PURE__ */ new Set();
@@ -2207,36 +2374,36 @@ async function buildSite(paths, out, options = {}) {
   if (icon) files.add(icon.split("?")[0]);
   for (const url of files) {
     const rel = url.slice("_f/".length).split("/").map(decodeURIComponent).join("/");
-    const from = path12.join(paths.design, rel);
-    if (!fs12.existsSync(from)) continue;
-    const to = path12.join(out, "_f", rel);
-    fs12.mkdirSync(path12.dirname(to), { recursive: true });
-    fs12.copyFileSync(from, to);
+    const from = path13.join(paths.design, rel);
+    if (!fs13.existsSync(from)) continue;
+    const to = path13.join(out, "_f", rel);
+    fs13.mkdirSync(path13.dirname(to), { recursive: true });
+    fs13.copyFileSync(from, to);
   }
   const info = project.info(true);
   const snapshotDirs = canvasIds.map((id2) => `_snap/${id2}/`);
   for (const [from, rel] of snapshots.copies) {
     if (!snapshotDirs.some((dir) => rel.startsWith(dir))) continue;
-    const to = path12.join(out, rel);
-    fs12.mkdirSync(path12.dirname(to), { recursive: true });
-    fs12.copyFileSync(from, to);
+    const to = path13.join(out, rel);
+    fs13.mkdirSync(path13.dirname(to), { recursive: true });
+    fs13.copyFileSync(from, to);
   }
   if (!system) info.system = null;
   info.canvases = info.canvases.filter((canvas) => canvasIds.includes(canvas.id));
-  writeJson(path12.join(out, "api", "project.json"), info);
-  for (const canvas of canvases) writeJson(path12.join(out, "api", "canvas", `${canvas.doc.id}.json`), canvas.doc);
+  writeJson(path13.join(out, "api", "project.json"), info);
+  for (const canvas of canvases) writeJson(path13.join(out, "api", "canvas", `${canvas.doc.id}.json`), canvas.doc);
   if (system) {
-    writeJson(path12.join(out, "api", "system.json"), system.doc);
+    writeJson(path13.join(out, "api", "system.json"), system.doc);
     const texts = {};
     for (const component of system.doc.components) {
       for (const rel of [component.specimen, ...component.sources]) {
-        const file = path12.join(paths.root, rel);
-        if (!(rel in texts) && fs12.existsSync(file)) texts[rel] = fs12.readFileSync(file, "utf8");
+        const file = path13.join(paths.root, rel);
+        if (!(rel in texts) && fs13.existsSync(file)) texts[rel] = fs13.readFileSync(file, "utf8");
       }
     }
-    writeJson(path12.join(out, "api", "sources.json"), texts);
+    writeJson(path13.join(out, "api", "sources.json"), texts);
   }
-  fs12.rmSync(staging, { recursive: true, force: true });
+  fs13.rmSync(staging, { recursive: true, force: true });
   const errors = [
     ...only ? [] : project.config().issues,
     ...system?.doc.issues ?? [],
@@ -2245,21 +2412,21 @@ async function buildSite(paths, out, options = {}) {
   const { absoluteAssets } = options.includeViewer === false ? { absoluteAssets: false } : copyViewer(PKG.viewer, out);
   if (publicDir) {
     for (const rel of publicFiles2) {
-      const to = path12.join(out, rel);
-      if (fs12.existsSync(to)) continue;
-      fs12.mkdirSync(path12.dirname(to), { recursive: true });
-      fs12.copyFileSync(path12.join(publicDir, rel), to);
+      const to = path13.join(out, rel);
+      if (fs13.existsSync(to)) continue;
+      fs13.mkdirSync(path13.dirname(to), { recursive: true });
+      fs13.copyFileSync(path13.join(publicDir, rel), to);
     }
   }
   return { out, canvases: canvasIds, frames: inputs.length, errors, absoluteAssets };
 }
 function copyViewer(viewerDir, out) {
   copyTree(viewerDir, out, () => true);
-  const index = path12.join(out, "index.html");
-  const html = fs12.readFileSync(index, "utf8");
+  const index = path13.join(out, "index.html");
+  const html = fs13.readFileSync(index, "utf8");
   const flag2 = "<script>window.__DESIGN_STATIC__=true</script>";
   const head = /<head(\s[^>]*)?>/i.exec(html);
-  fs12.writeFileSync(
+  fs13.writeFileSync(
     index,
     head ? html.slice(0, head.index + head[0].length) + flag2 + html.slice(head.index + head[0].length) : flag2 + html
   );
@@ -2341,8 +2508,8 @@ function progress() {
 // src/cli/commands/build.ts
 function pack(out) {
   const archive = `${out.replace(/[\\/]+$/, "")}.tar.gz`;
-  fs13.rmSync(archive, { force: true });
-  const entries = fs13.readdirSync(out);
+  fs14.rmSync(archive, { force: true });
+  const entries = fs14.readdirSync(out);
   const result = spawnSync("tar", ["-czf", archive, "-C", out, ...entries], {
     stdio: ["ignore", "ignore", "pipe"],
     env: { ...process.env, COPYFILE_DISABLE: "1" }
@@ -2352,10 +2519,10 @@ function pack(out) {
   return archive;
 }
 async function runBuild(paths, canvases, options) {
-  if (!fs13.existsSync(path13.join(PKG.viewer, "index.html"))) {
+  if (!fs14.existsSync(path14.join(PKG.viewer, "index.html"))) {
     throw new CliError("The viewer is missing from this foss-design install (dist/viewer). Rebuild or reinstall it.");
   }
-  const out = path13.resolve(options.out ?? path13.join(paths.cache, "site"));
+  const out = path14.resolve(options.out ?? path14.join(paths.cache, "site"));
   if (out === paths.root || out === paths.design) throw new CliError(`Refusing to build into ${out}`);
   print(dim(`Building ${canvases.length ? canvases.join(", ") : "every canvas"} and the design system\u2026`));
   let result;
@@ -2380,8 +2547,8 @@ import os from "os";
 
 // src/cloud/units.ts
 import { createHash as createHash4 } from "crypto";
-import fs14 from "fs";
-import path14 from "path";
+import fs15 from "fs";
+import path15 from "path";
 var SYSTEM_UNIT = "system";
 var CANVAS_PREFIX = "canvas/";
 var LOCAL_ONLY = /* @__PURE__ */ new Set(["cloud.json", "node_modules", "icon.svg", "icon.png", "icon.webp"]);
@@ -2409,7 +2576,7 @@ function caseClashes(keys) {
 }
 function unitRoot(paths, key) {
   const id2 = unitCanvasId(key);
-  return id2 === null ? paths.design : path14.join(paths.canvases, id2);
+  return id2 === null ? paths.design : path15.join(paths.canvases, id2);
 }
 function isUnitPath(key, rel) {
   if (!rel || rel.includes("\\") || rel.includes("\0") || rel.startsWith("/")) return false;
@@ -2423,7 +2590,7 @@ function hashBuffer(data) {
   return createHash4("sha256").update(data).digest("hex");
 }
 function hashFile(file) {
-  const data = fs14.readFileSync(file);
+  const data = fs15.readFileSync(file);
   return { hash: hashBuffer(data), size: data.length };
 }
 var warnedLinks = /* @__PURE__ */ new Set();
@@ -2436,34 +2603,34 @@ function warnLink(rel) {
 function walk(dir, base, out) {
   let entries;
   try {
-    entries = fs14.readdirSync(dir, { withFileTypes: true });
+    entries = fs15.readdirSync(dir, { withFileTypes: true });
   } catch {
     return;
   }
   for (const entry of entries) {
     if (entry.name.startsWith(".") || entry.name === "node_modules") continue;
-    const full = path14.join(dir, entry.name);
+    const full = path15.join(dir, entry.name);
     let isFile = entry.isFile();
     let isDir = entry.isDirectory();
     if (entry.isSymbolicLink()) {
       isDir = false;
       isFile = false;
       try {
-        const target = fs14.realpathSync(full);
-        const root = fs14.realpathSync(base);
-        if (target.startsWith(root + path14.sep)) isFile = fs14.statSync(target).isFile();
-        else warnLink(toPosix(path14.relative(base, full)));
+        const target = fs15.realpathSync(full);
+        const root = fs15.realpathSync(base);
+        if (target.startsWith(root + path15.sep)) isFile = fs15.statSync(target).isFile();
+        else warnLink(toPosix(path15.relative(base, full)));
       } catch {
       }
     }
     if (isDir) walk(full, base, out);
-    else if (isFile) out[toPosix(path14.relative(base, full))] = hashFile(full);
+    else if (isFile) out[toPosix(path15.relative(base, full))] = hashFile(full);
   }
 }
 function unitManifest(paths, key) {
   const manifest = {};
   if (key === SYSTEM_UNIT) {
-    if (fs14.existsSync(paths.config) && fs14.statSync(paths.config).isFile())
+    if (fs15.existsSync(paths.config) && fs15.statSync(paths.config).isFile())
       manifest["design.json"] = hashFile(paths.config);
     walk(paths.system, paths.design, manifest);
   } else walk(unitRoot(paths, key), paths.design, manifest);
@@ -2472,13 +2639,13 @@ function unitManifest(paths, key) {
 function buildManifest(dir) {
   const manifest = {};
   const visit = (current) => {
-    for (const entry of fs14.readdirSync(current, { withFileTypes: true })) {
-      const full = path14.join(current, entry.name);
+    for (const entry of fs15.readdirSync(current, { withFileTypes: true })) {
+      const full = path15.join(current, entry.name);
       if (entry.isDirectory()) visit(full);
-      else if (entry.isFile()) manifest[toPosix(path14.relative(dir, full))] = hashFile(full);
+      else if (entry.isFile()) manifest[toPosix(path15.relative(dir, full))] = hashFile(full);
     }
   };
-  if (fs14.existsSync(dir)) visit(dir);
+  if (fs15.existsSync(dir)) visit(dir);
   return sortManifest(manifest);
 }
 function sortManifest(manifest) {
@@ -2487,18 +2654,18 @@ function sortManifest(manifest) {
 function scanLocal(paths) {
   const units = /* @__PURE__ */ new Map();
   const notSynced = [];
-  if (!fs14.existsSync(paths.design)) return { units, notSynced };
+  if (!fs15.existsSync(paths.design)) return { units, notSynced };
   const system = unitManifest(paths, SYSTEM_UNIT);
   if (Object.keys(system).length) units.set(SYSTEM_UNIT, { key: SYSTEM_UNIT, kind: "system", manifest: system });
-  for (const entry of fs14.readdirSync(paths.design, { withFileTypes: true })) {
+  for (const entry of fs15.readdirSync(paths.design, { withFileTypes: true })) {
     const { name } = entry;
     if (name.startsWith(".") || LOCAL_ONLY.has(name)) continue;
     if (name === "design.json" && entry.isFile()) continue;
     if ((name === "system" || name === "canvas") && entry.isDirectory()) continue;
     notSynced.push(entry.isDirectory() ? `${name}/` : name);
   }
-  if (fs14.existsSync(paths.canvases) && fs14.statSync(paths.canvases).isDirectory()) {
-    for (const entry of fs14.readdirSync(paths.canvases, { withFileTypes: true })) {
+  if (fs15.existsSync(paths.canvases) && fs15.statSync(paths.canvases).isDirectory()) {
+    for (const entry of fs15.readdirSync(paths.canvases, { withFileTypes: true })) {
       if (entry.name.startsWith(".")) continue;
       if (!entry.isDirectory() || !ID_PATTERN.test(entry.name)) {
         notSynced.push(`canvas/${entry.name}${entry.isDirectory() ? "/" : ""}`);
@@ -2512,11 +2679,11 @@ function scanLocal(paths) {
   return { units, notSynced: notSynced.sort() };
 }
 function unitBuildDir(paths, key) {
-  return path14.join(paths.cache, "cloud", "build", ...key.split("/"));
+  return path15.join(paths.cache, "cloud", "build", ...key.split("/"));
 }
 async function buildUnit(paths, key, out = unitBuildDir(paths, key)) {
   const id2 = unitCanvasId(key);
-  fs14.rmSync(out, { recursive: true, force: true });
+  fs15.rmSync(out, { recursive: true, force: true });
   return buildSite(paths, out, {
     canvases: id2 === null ? [] : [id2],
     includeSystem: id2 === null,
@@ -2609,7 +2776,13 @@ function parseUnit(value) {
     banned: flag(data.banned, data.bannedAt, data.banned_at),
     manifest: parseManifest(data.sourceManifest ?? data.source_manifest ?? data.source),
     systemRev: num(data.systemRev) ?? num(data.system_rev) ?? null,
-    publicId: str(data.publicId) ?? null
+    publicId: str(data.publicId) ?? null,
+    screens: (Array.isArray(data.screens) ? data.screens : []).flatMap((value2) => {
+      const screen = record(value2);
+      const item = str(screen.item);
+      const publicId = str(screen.publicId);
+      return item && publicId ? [{ item, publicId }] : [];
+    })
   };
 }
 function parseRevision(value) {
@@ -2648,7 +2821,7 @@ var CloudClient = class {
   }
   host;
   token;
-  async send(method, path37, init) {
+  async send(method, path38, init) {
     const headers = {
       "User-Agent": `foss-design/${packageVersion()} (${os.platform()})`,
       Accept: "application/json"
@@ -2656,7 +2829,7 @@ var CloudClient = class {
     if (this.token) headers.Authorization = `Bearer ${this.token}`;
     if (init.type) headers["Content-Type"] = init.type;
     try {
-      return await fetch(`${this.host}/api${path37}`, {
+      return await fetch(`${this.host}/api${path38}`, {
         method,
         headers,
         body: init.body,
@@ -2677,8 +2850,8 @@ var CloudClient = class {
     throw errorFor(this.host, response.status, body, response.headers.get("retry-after"));
   }
   /** JSON in, JSON out; any non-2xx answer throws a CloudError. */
-  async request(method, path37, body) {
-    const response = await this.send(method, path37, {
+  async request(method, path38, body) {
+    const response = await this.send(method, path38, {
       body: body === void 0 ? void 0 : JSON.stringify(body),
       type: body === void 0 ? void 0 : "application/json",
       timeout: JSON_TIMEOUT
@@ -2690,7 +2863,7 @@ var CloudClient = class {
     try {
       return JSON.parse(text2);
     } catch {
-      throw new CloudError(`${this.host} answered ${method} ${path37} with something other than JSON`, 0, "bad_response");
+      throw new CloudError(`${this.host} answered ${method} ${path38} with something other than JSON`, 0, "bad_response");
     }
   }
   /** POST /device/code. */
@@ -2798,6 +2971,16 @@ var CloudClient = class {
     );
     return { publicId: str(body.publicId) ?? null };
   }
+  /** Publish one screen of a canvas on its own, or turn its link off (owner only). */
+  async screenAction(projectId, canvas, screen, action) {
+    const body = record(
+      await this.request(
+        "POST",
+        `/projects/${encodeURIComponent(projectId)}/canvases/${encodeURIComponent(canvas)}/screens/${encodeURIComponent(screen)}/${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 = [];
@@ -2852,9 +3035,9 @@ var CloudClient = class {
 };
 
 // src/cloud/credentials.ts
-import fs15 from "fs";
+import fs16 from "fs";
 import os2 from "os";
-import path15 from "path";
+import path16 from "path";
 var DEFAULT_CLOUD = "https://app.fossdesign.dev";
 function normalizeHost(value) {
   let url;
@@ -2871,14 +3054,14 @@ 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 || path15.join(os2.homedir(), ".config");
-  return path15.join(base, "foss-design", "credentials.json");
+  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");
 }
 function readAll() {
   const file = credentialsFile();
-  if (!fs15.existsSync(file)) return {};
+  if (!fs16.existsSync(file)) return {};
   try {
-    const data = JSON.parse(fs15.readFileSync(file, "utf8"));
+    const data = JSON.parse(fs16.readFileSync(file, "utf8"));
     return data && typeof data === "object" && !Array.isArray(data) ? data : {};
   } catch (error) {
     throw new CliError(`${file} is not valid JSON (${error.message}); fix or delete it`);
@@ -2886,12 +3069,12 @@ function readAll() {
 }
 function writeAll(data) {
   const file = credentialsFile();
-  fs15.mkdirSync(path15.dirname(file), { recursive: true, mode: 448 });
+  fs16.mkdirSync(path16.dirname(file), { recursive: true, mode: 448 });
   const temp = `${file}.${process.pid}.tmp`;
-  fs15.writeFileSync(temp, `${JSON.stringify(data, null, 2)}
+  fs16.writeFileSync(temp, `${JSON.stringify(data, null, 2)}
 `, { mode: 384 });
-  fs15.chmodSync(temp, 384);
-  fs15.renameSync(temp, file);
+  fs16.chmodSync(temp, 384);
+  fs16.renameSync(temp, file);
 }
 function getCredential(host) {
   const entry = readAll()[host];
@@ -2914,17 +3097,17 @@ function requireCredential(host) {
 }
 
 // src/cloud/state.ts
-import fs16 from "fs";
-import path16 from "path";
-var linkFile = (paths) => path16.join(paths.design, "cloud.json");
-var cloudCache = (paths) => path16.join(paths.cache, "cloud");
-var incomingDir = (paths, key) => path16.join(cloudCache(paths), "incoming", ...key.split("/"));
+import fs17 from "fs";
+import path17 from "path";
+var linkFile = (paths) => path17.join(paths.design, "cloud.json");
+var cloudCache = (paths) => path17.join(paths.cache, "cloud");
+var incomingDir = (paths, key) => path17.join(cloudCache(paths), "incoming", ...key.split("/"));
 function readLink(paths) {
   const file = linkFile(paths);
-  if (!fs16.existsSync(file)) return null;
+  if (!fs17.existsSync(file)) return null;
   let data;
   try {
-    data = JSON.parse(fs16.readFileSync(file, "utf8"));
+    data = JSON.parse(fs17.readFileSync(file, "utf8"));
   } catch (error) {
     throw new CliError(`${file} is not valid JSON (${error.message}); run \`design link <project>\` again`);
   }
@@ -2963,9 +3146,9 @@ function writeLink(paths, link) {
     units: sorted(link.units),
     conflicts: sorted(link.conflicts)
   };
-  fs16.writeFileSync(temp, `${JSON.stringify(data, null, 2)}
+  fs17.writeFileSync(temp, `${JSON.stringify(data, null, 2)}
 `);
-  fs16.renameSync(temp, file);
+  fs17.renameSync(temp, file);
 }
 var hashes = (manifest) => Object.fromEntries(Object.entries(manifest).map(([file, entry]) => [file, entry.hash]));
 function diffFiles(a, b) {
@@ -3043,20 +3226,20 @@ var byUnit = (a, b) => a === SYSTEM_UNIT ? -1 : b === SYSTEM_UNIT ? 1 : a < b ?
 var plural = (count, word, many = `${word}s`) => `${count} ${count === 1 ? word : many}`;
 
 // src/capture/cover.ts
-import fs20 from "fs";
+import fs21 from "fs";
 import os3 from "os";
-import path19 from "path";
+import path20 from "path";
 
 // src/server/snapshots.ts
 import { createHash as createHash5 } from "crypto";
-import fs17 from "fs";
-import path17 from "path";
+import fs18 from "fs";
+import path18 from "path";
 function depsHash(root, rels, cache = /* @__PURE__ */ new Map()) {
   const hash = createHash5("sha1");
   for (const rel of [...rels].sort()) {
     let one = cache.get(rel);
     if (one === void 0) {
-      one = sourceHash(path17.join(root, rel)) ?? "missing";
+      one = sourceHash(path18.join(root, rel)) ?? "missing";
       cache.set(rel, one);
     }
     hash.update(`${rel}\0${one}
@@ -3066,7 +3249,7 @@ function depsHash(root, rels, cache = /* @__PURE__ */ new Map()) {
 }
 function sourceHash(file) {
   try {
-    return createHash5("sha1").update(fs17.readFileSync(file)).digest("hex").slice(0, 16);
+    return createHash5("sha1").update(fs18.readFileSync(file)).digest("hex").slice(0, 16);
   } catch {
     return null;
   }
@@ -3084,20 +3267,20 @@ var SnapshotStore = class {
   urlBase;
   meta = /* @__PURE__ */ new Map();
   metaFile(canvas) {
-    return path17.join(this.dir, canvas, "meta.json");
+    return path18.join(this.dir, canvas, "meta.json");
   }
   /** Written aside and renamed: a run stopped mid-write leaves the old file, not half of one. */
   writeMeta(canvas, data) {
     const temp = `${this.metaFile(canvas)}.${process.pid}.tmp`;
-    fs17.writeFileSync(temp, JSON.stringify(data));
-    fs17.renameSync(temp, this.metaFile(canvas));
+    fs18.writeFileSync(temp, JSON.stringify(data));
+    fs18.renameSync(temp, this.metaFile(canvas));
   }
   load(canvas) {
     const cached = this.meta.get(canvas);
     if (cached) return cached;
     let data = {};
     try {
-      data = JSON.parse(fs17.readFileSync(this.metaFile(canvas), "utf8"));
+      data = JSON.parse(fs18.readFileSync(this.metaFile(canvas), "utf8"));
     } catch {
     }
     this.meta.set(canvas, data);
@@ -3147,11 +3330,11 @@ var SnapshotStore = class {
   }
   save(canvas, id2, theme2, png, height, source, deps) {
     if (!isSafeSegment(canvas) || !isSafeSegment(id2)) throw new Error("bad snapshot key");
-    const dir = path17.join(this.dir, canvas);
-    fs17.mkdirSync(dir, { recursive: true });
-    const file = path17.join(dir, `${id2}.${theme2}.png`);
-    fs17.writeFileSync(`${file}.${process.pid}.tmp`, png);
-    fs17.renameSync(`${file}.${process.pid}.tmp`, file);
+    const dir = path18.join(this.dir, canvas);
+    fs18.mkdirSync(dir, { recursive: true });
+    const file = path18.join(dir, `${id2}.${theme2}.png`);
+    fs18.writeFileSync(`${file}.${process.pid}.tmp`, png);
+    fs18.renameSync(`${file}.${process.pid}.tmp`, file);
     const data = this.load(canvas);
     const version = Date.now();
     const previous = data[id2];
@@ -3166,20 +3349,20 @@ var SnapshotStore = class {
   file(canvas, name) {
     const match = /^(@?[a-z0-9][a-z0-9_-]*)\.(light|dark)(\.thumb)?\.png$/i.exec(name);
     if (!isSafeSegment(canvas) || !match) return null;
-    const file = path17.join(this.dir, canvas, `${match[1]}.${match[2]}.png`);
-    if (!fs17.existsSync(file)) return null;
+    const file = path18.join(this.dir, canvas, `${match[1]}.${match[2]}.png`);
+    if (!fs18.existsSync(file)) return null;
     return match[3] ? ensureThumb(file) : file;
   }
 };
 
 // src/capture/build-server.ts
-import fs18 from "fs";
+import fs19 from "fs";
 import http from "http";
-import path18 from "path";
+import path19 from "path";
 import sirv from "sirv";
 async function serveBuild(paths, name, options) {
-  const out = path18.join(paths.cache, name);
-  fs18.rmSync(out, { recursive: true, force: true });
+  const out = path19.join(paths.cache, name);
+  fs19.rmSync(out, { recursive: true, force: true });
   await buildSite(paths, out, {
     canvases: options.canvases,
     includeSystem: options.includeSystem,
@@ -3207,7 +3390,7 @@ async function serveBuild(paths, name, options) {
     base: `http://127.0.0.1:${server.address().port}`,
     read(rel) {
       try {
-        return JSON.parse(fs18.readFileSync(path18.join(out, rel), "utf8"));
+        return JSON.parse(fs19.readFileSync(path19.join(out, rel), "utf8"));
       } catch {
         return null;
       }
@@ -3220,7 +3403,7 @@ async function serveBuild(paths, name, options) {
 }
 
 // src/capture/chrome.ts
-import fs19 from "fs";
+import fs20 from "fs";
 var CANDIDATES = {
   darwin: [
     "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
@@ -3244,8 +3427,8 @@ var CANDIDATES = {
 };
 function findChrome() {
   const configured = process.env.DESIGN_CHROME;
-  if (configured && fs19.existsSync(configured)) return configured;
-  for (const candidate of CANDIDATES[process.platform] ?? []) if (fs19.existsSync(candidate)) return candidate;
+  if (configured && fs20.existsSync(configured)) return configured;
+  for (const candidate of CANDIDATES[process.platform] ?? []) if (fs20.existsSync(candidate)) return candidate;
   return null;
 }
 async function launchChrome() {
@@ -3417,7 +3600,7 @@ function staleSnapshots(paths, canvasIds, filter = {}) {
     for (const job of inLight) {
       if (filter.screens && !filter.screens.has(job.id)) continue;
       const file = files.get(job.id);
-      if (!file || !fs20.existsSync(file)) continue;
+      if (!file || !fs21.existsSync(file)) continue;
       const deps = store.deps(id2, job.id);
       const hash = deps ? depsHash(paths.root, deps, hashes2) : sourceHash(file);
       const pinned = inDark.get(job.id) === job.theme;
@@ -3436,12 +3619,12 @@ function staleSnapshots(paths, canvasIds, filter = {}) {
   }
   return stale;
 }
-async function takeSnapshots(paths, targets, preview, progress2) {
-  if (!targets.length) return [];
+async function takeSnapshots(paths, targets2, preview, progress2) {
+  if (!targets2.length) return [];
   if (!findChrome()) return ["No Chrome here, so screens keep the snapshots they have."];
   const store = new SnapshotStore(paths.snapshots);
   const project = new DesignProject(paths, DEV_URLS, store.lookup);
-  const canvases = [...new Set(targets.map((target) => target.canvas))];
+  const canvases = [...new Set(targets2.map((target) => target.canvas))];
   progress2.update(`Building ${canvases.join(", ")} to take snapshots from\u2026`);
   let url;
   let docOf = (id2) => project.canvas(id2).doc;
@@ -3462,10 +3645,10 @@ async function takeSnapshots(paths, targets, preview, progress2) {
   const failed = [];
   const started = Date.now();
   let done = 0;
-  const line = () => `Snapshots ${done}/${targets.length} (both themes, as the viewer and the cloud show them)`;
+  const line = () => `Snapshots ${done}/${targets2.length} (both themes, as the viewer and the cloud show them)`;
   progress2.update(line());
   try {
-    await mapLimit([...targets], TABS, async ({ canvas, screen, theme: theme2, source }) => {
+    await mapLimit([...targets2], TABS, async ({ canvas, screen, theme: theme2, source }) => {
       const job = canvasFrames(docOf(canvas), url, theme2, { id: screen })[0];
       if (job) {
         const page = await browser.newPage({
@@ -3487,7 +3670,7 @@ async function takeSnapshots(paths, targets, preview, progress2) {
             const deps = modules ? [
               .../* @__PURE__ */ new Set([
                 ...[...loaded].flatMap((rel) => modules[rel] ?? []),
-                ...file ? [toPosix(path19.relative(paths.root, file))] : []
+                ...file ? [toPosix(path20.relative(paths.root, file))] : []
               ])
             ].sort() : [];
             const hash = deps.length ? depsHash(paths.root, deps, hashes2) : source;
@@ -3508,7 +3691,7 @@ async function takeSnapshots(paths, targets, preview, progress2) {
     await stop();
   }
   const seconds2 = Math.round((Date.now() - started) / 1e3);
-  progress2.done(`Took ${targets.length - failed.length} snapshot${targets.length === 1 ? "" : "s"} in ${seconds2}s`);
+  progress2.done(`Took ${targets2.length - failed.length} snapshot${targets2.length === 1 ? "" : "s"} in ${seconds2}s`);
   if (!failed.length) return [];
   const shown = failed.slice(0, 5).join(", ");
   return [
@@ -3517,73 +3700,73 @@ async function takeSnapshots(paths, targets, preview, progress2) {
 }
 
 // src/cloud/pull.ts
-import fs24 from "fs";
-import path23 from "path";
+import fs25 from "fs";
+import path24 from "path";
 
 // src/cloud/merge.ts
-import fs22 from "fs";
-import path21 from "path";
+import fs23 from "fs";
+import path22 from "path";
 import { merge as diff3 } from "node-diff3";
 
 // src/cloud/write.ts
-import fs21 from "fs";
-import path20 from "path";
+import fs22 from "fs";
+import path21 from "path";
 function writeInside(root, rel, data) {
-  const file = path20.join(root, rel);
+  const file = path21.join(root, rel);
   if (!isInside(root, file)) throw new CliError(`Refusing to write outside ${root}: ${rel}`);
-  fs21.mkdirSync(path20.dirname(file), { recursive: true });
-  if (!isInside(fs21.realpathSync(root), fs21.realpathSync(path20.dirname(file))))
+  fs22.mkdirSync(path21.dirname(file), { recursive: true });
+  if (!isInside(fs22.realpathSync(root), fs22.realpathSync(path21.dirname(file))))
     throw new CliError(`Refusing to write through a link out of ${root}: ${rel}`);
-  if (fs21.existsSync(file) && fs21.lstatSync(file).isSymbolicLink()) fs21.unlinkSync(file);
-  fs21.writeFileSync(file, data);
+  if (fs22.existsSync(file) && fs22.lstatSync(file).isSymbolicLink()) fs22.unlinkSync(file);
+  fs22.writeFileSync(file, data);
 }
 function pruneEmpty(dir, stop) {
   let current = dir;
   while (isInside(stop, current) && current !== stop) {
     try {
-      if (fs21.readdirSync(current).length) return;
-      fs21.rmdirSync(current);
+      if (fs22.readdirSync(current).length) return;
+      fs22.rmdirSync(current);
     } catch {
       return;
     }
-    current = path20.dirname(current);
+    current = path21.dirname(current);
   }
 }
 
 // src/cloud/merge.ts
 var TEXT = /\.(?:[cm]?[jt]sx?|json|css|scss|html?|mdx?|svg|txt|ya?ml|csv|xml|toml)$/i;
 var isText = (rel, ...data) => TEXT.test(rel) && data.every((buffer) => !buffer || !buffer.subarray(0, 8192).includes(0));
-var mergeDir = (paths, key) => path21.join(cloudCache(paths), "merge", ...key.split("/"));
-var stateFile = (paths, key) => path21.join(mergeDir(paths, key), "state.json");
-var sideFile = (paths, key, rel, side) => path21.join(mergeDir(paths, key), side, rel);
+var mergeDir = (paths, key) => path22.join(cloudCache(paths), "merge", ...key.split("/"));
+var stateFile = (paths, key) => path22.join(mergeDir(paths, key), "state.json");
+var sideFile = (paths, key, rel, side) => path22.join(mergeDir(paths, key), side, rel);
 function readMergeState(paths, key) {
   try {
-    return JSON.parse(fs22.readFileSync(stateFile(paths, key), "utf8"));
+    return JSON.parse(fs23.readFileSync(stateFile(paths, key), "utf8"));
   } catch {
     return null;
   }
 }
 function saveState(paths, state) {
-  fs22.mkdirSync(mergeDir(paths, state.unit), { recursive: true });
-  fs22.writeFileSync(stateFile(paths, state.unit), `${JSON.stringify(state, null, 2)}
+  fs23.mkdirSync(mergeDir(paths, state.unit), { recursive: true });
+  fs23.writeFileSync(stateFile(paths, state.unit), `${JSON.stringify(state, null, 2)}
 `);
 }
 function mergingUnits(paths) {
-  const root = path21.join(cloudCache(paths), "merge");
+  const root = path22.join(cloudCache(paths), "merge");
   const found = [];
   const visit = (dir, prefix) => {
-    if (fs22.existsSync(path21.join(dir, "state.json"))) {
+    if (fs23.existsSync(path22.join(dir, "state.json"))) {
       const state = readMergeState(paths, prefix);
       if (state) found.push(state);
       return;
     }
     let entries = [];
     try {
-      entries = fs22.readdirSync(dir, { withFileTypes: true });
+      entries = fs23.readdirSync(dir, { withFileTypes: true });
     } catch {
     }
     for (const entry of entries)
-      if (entry.isDirectory()) visit(path21.join(dir, entry.name), prefix ? `${prefix}/${entry.name}` : entry.name);
+      if (entry.isDirectory()) visit(path22.join(dir, entry.name), prefix ? `${prefix}/${entry.name}` : entry.name);
   };
   visit(root, "");
   return found;
@@ -3593,7 +3776,7 @@ function openConflicts(paths, state) {
   return state.conflicts.filter((conflict) => {
     if (conflict.kind !== "text") return true;
     try {
-      return MARKER.test(fs22.readFileSync(path21.join(paths.design, conflict.path), "utf8"));
+      return MARKER.test(fs23.readFileSync(path22.join(paths.design, conflict.path), "utf8"));
     } catch {
       return false;
     }
@@ -3602,19 +3785,19 @@ function openConflicts(paths, state) {
 function keep(paths, key, rel, side, data) {
   if (!data) return;
   const file = sideFile(paths, key, rel, side);
-  fs22.mkdirSync(path21.dirname(file), { recursive: true });
-  fs22.writeFileSync(file, data);
+  fs23.mkdirSync(path22.dirname(file), { recursive: true });
+  fs23.writeFileSync(file, data);
 }
 function mergeUnit(paths, key, headRev, base, here, cloud2, blob) {
   const files = { added: 0, changed: 0, removed: 0, merged: 0 };
   const conflicts = [];
-  const stop = key === SYSTEM_UNIT ? paths.design : path21.dirname(unitRoot(paths, key));
-  fs22.rmSync(mergeDir(paths, key), { recursive: true, force: true });
-  const read = (rel) => fs22.readFileSync(path21.join(paths.design, rel));
+  const stop = key === SYSTEM_UNIT ? paths.design : path22.dirname(unitRoot(paths, key));
+  fs23.rmSync(mergeDir(paths, key), { recursive: true, force: true });
+  const read = (rel) => fs23.readFileSync(path22.join(paths.design, rel));
   const remove = (rel) => {
-    const file = path21.join(paths.design, rel);
-    fs22.rmSync(file, { force: true });
-    pruneEmpty(path21.dirname(file), stop);
+    const file = path22.join(paths.design, rel);
+    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];
@@ -3670,11 +3853,11 @@ function resolveConflict(paths, state, rel, side) {
   const conflict = state.conflicts.find((item) => item.path === rel);
   if (!conflict) return;
   const kept = sideFile(paths, state.unit, rel, side);
-  const stop = state.unit === SYSTEM_UNIT ? paths.design : path21.dirname(unitRoot(paths, state.unit));
-  if (fs22.existsSync(kept)) writeInside(paths.design, rel, fs22.readFileSync(kept));
+  const stop = state.unit === SYSTEM_UNIT ? paths.design : path22.dirname(unitRoot(paths, state.unit));
+  if (fs23.existsSync(kept)) writeInside(paths.design, rel, fs23.readFileSync(kept));
   else {
-    fs22.rmSync(path21.join(paths.design, rel), { force: true });
-    pruneEmpty(path21.dirname(path21.join(paths.design, rel)), stop);
+    fs23.rmSync(path22.join(paths.design, rel), { force: true });
+    pruneEmpty(path22.dirname(path22.join(paths.design, rel)), stop);
   }
   state.conflicts = state.conflicts.filter((item) => item.path !== rel);
   saveState(paths, state);
@@ -3684,15 +3867,15 @@ function finishMerge(paths, link, key, accept = false) {
   if (state) {
     const open2 = openConflicts(paths, state).filter((conflict) => !(accept && conflict.kind !== "text"));
     if (open2.length) return open2;
-    fs22.rmSync(mergeDir(paths, key), { recursive: true, force: true });
+    fs23.rmSync(mergeDir(paths, key), { recursive: true, force: true });
   }
   delete link.conflicts[key];
   return [];
 }
 
 // src/cloud/meta.ts
-import fs23 from "fs";
-import path22 from "path";
+import fs24 from "fs";
+import path23 from "path";
 async function syncProjectMeta(paths, client, link) {
   const remote = await client.project(link.project);
   if (!remote) return [];
@@ -3711,8 +3894,8 @@ async function syncProjectMeta(paths, client, link) {
   if (localChanged && !cloudChanged) {
     try {
       if (file) {
-        const ext = path22.extname(file).slice(1);
-        await client.setProjectIcon(link.project, { data: fs23.readFileSync(file), type: ICON_TYPES[ext] });
+        const ext = path23.extname(file).slice(1);
+        await client.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);
@@ -3747,12 +3930,12 @@ function checkManifest(key, manifest) {
 }
 function applyUnit(paths, key, local, target, blobs) {
   const counts = { added: 0, changed: 0, removed: 0 };
-  const stop = key === SYSTEM_UNIT ? paths.design : path23.dirname(unitRoot(paths, key));
+  const stop = key === SYSTEM_UNIT ? paths.design : path24.dirname(unitRoot(paths, key));
   for (const rel of Object.keys(local)) {
     if (rel in target) continue;
-    const file = path23.join(paths.design, rel);
-    fs24.rmSync(file, { force: true });
-    pruneEmpty(path23.dirname(file), stop);
+    const file = path24.join(paths.design, rel);
+    fs25.rmSync(file, { force: true });
+    pruneEmpty(path24.dirname(file), stop);
     counts.removed++;
   }
   for (const [rel, entry] of Object.entries(target)) {
@@ -3822,7 +4005,7 @@ async function pull(ctx, options) {
       }
       if (s.conflictRev !== void 0) {
         finishMerge(paths, link, key, true);
-        fs24.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+        fs25.rmSync(incomingDir(paths, key), { recursive: true, force: true });
       }
       report.units.push({ ...reportFor("up_to_date"), rev: s.baseRev });
     } else if (!s.changed.length) {
@@ -3851,7 +4034,7 @@ async function pull(ctx, options) {
   }
   const byHash = /* @__PURE__ */ new Map();
   for (const unit of scan.units.values())
-    for (const [rel, entry] of Object.entries(unit.manifest)) byHash.set(entry.hash, path23.join(paths.design, rel));
+    for (const [rel, entry] of Object.entries(unit.manifest)) byHash.set(entry.hash, path24.join(paths.design, rel));
   const needed = /* @__PURE__ */ new Set();
   const bases = /* @__PURE__ */ new Set();
   for (const plan of plans) {
@@ -3872,7 +4055,7 @@ async function pull(ctx, options) {
   const download = [];
   for (const hash of needed) {
     const file = byHash.get(hash);
-    if (file) blobs.set(hash, fs24.readFileSync(file));
+    if (file) blobs.set(hash, fs25.readFileSync(file));
     else download.push(hash);
   }
   if (download.length) {
@@ -3908,7 +4091,7 @@ async function pull(ctx, options) {
       if (plan.remote) link.units[key] = { rev: plan.remote.headRev, files: hashes(plan.remote.manifest) };
       else delete link.units[key];
       delete link.conflicts[key];
-      fs24.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+      fs25.rmSync(incomingDir(paths, key), { recursive: true, force: true });
     } else {
       const result = mergeUnit(
         paths,
@@ -3919,7 +4102,7 @@ async function pull(ctx, options) {
         plan.remote.manifest,
         (hash) => blobs.get(hash)
       );
-      fs24.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+      fs25.rmSync(incomingDir(paths, key), { recursive: true, force: true });
       link.units[key] = { rev: plan.remote.headRev, files: hashes(plan.remote.manifest) };
       entry.rev = plan.remote.headRev;
       entry.files = result.files;
@@ -3949,8 +4132,8 @@ async function pull(ctx, options) {
 }
 
 // src/cloud/push.ts
-import fs25 from "fs";
-import path24 from "path";
+import fs26 from "fs";
+import path25 from "path";
 function blockedReport(status, message) {
   return {
     unit: status.key,
@@ -4066,7 +4249,7 @@ async function push(ctx, options) {
   for (const key of toPush) {
     const s = status(key);
     if (s.conflictRev !== void 0) {
-      const dir = path24.relative(paths.root, incomingDir(paths, key));
+      const dir = path25.relative(paths.root, incomingDir(paths, key));
       blocked.push(
         blockedReport(
           s,
@@ -4115,7 +4298,7 @@ async function push(ctx, options) {
   const files = /* @__PURE__ */ new Map();
   const addFiles = (manifest, dir) => {
     for (const [rel, entry] of Object.entries(manifest))
-      if (!files.has(entry.hash)) files.set(entry.hash, path24.join(dir, rel));
+      if (!files.has(entry.hash)) files.set(entry.hash, path25.join(dir, rel));
   };
   for (const key of pushing) {
     const id2 = unitCanvasId(key);
@@ -4147,7 +4330,7 @@ async function push(ctx, options) {
   if (missing.length) {
     const unknown = missing.find((hash) => !files.has(hash));
     if (unknown) throw new CliError(`The cloud asked for ${unknown.slice(0, 12)}, which is not part of this push`);
-    const bytes = missing.reduce((sum, hash) => sum + fs25.statSync(files.get(hash)).size, 0);
+    const bytes = missing.reduce((sum, hash) => sum + fs26.statSync(files.get(hash)).size, 0);
     const bar = ctx.progress();
     const started = Date.now();
     let sentFiles = 0;
@@ -4156,12 +4339,12 @@ async function push(ctx, options) {
     bar.update(line());
     await mapLimit(missing, TRANSFERS, async (hash) => {
       const file = files.get(hash);
-      const data = fs25.readFileSync(file);
+      const data = fs26.readFileSync(file);
       try {
         await client.putBlob(link.project, hash, data);
       } catch (error) {
         if (error instanceof CloudError && error.status === 413)
-          throw new CliError(`${path24.relative(process.cwd(), file)} (${megabytes(data.length)}): ${error.message}`);
+          throw new CliError(`${path25.relative(process.cwd(), file)} (${megabytes(data.length)}): ${error.message}`);
         throw error;
       }
       sentFiles++;
@@ -4194,7 +4377,7 @@ async function push(ctx, options) {
       url: webUrl(link, unit.key)
     });
   }
-  for (const key of resolved) fs25.rmSync(incomingDir(paths, key), { recursive: true, force: true });
+  for (const key of resolved) fs26.rmSync(incomingDir(paths, key), { recursive: true, force: true });
   writeLink(paths, link);
   report.units.sort((a, b) => byUnit(a.unit, b.unit));
   return report;
@@ -4205,7 +4388,7 @@ function refuseLegacyGo(paths, keys) {
   for (const key of keys) {
     if (!key.startsWith("canvas/")) continue;
     const id2 = key.slice("canvas/".length);
-    for (const file of canvasCodeFiles(path24.join(paths.canvases, id2), project.canvas(id2)?.screens ?? [])) {
+    for (const file of canvasCodeFiles(path25.join(paths.canvases, id2), project.canvas(id2)?.screens ?? [])) {
       for (const line of legacyGoLines(file)) hits.add(`${relToRoot(paths, file)}:${line}`);
     }
   }
@@ -4221,18 +4404,18 @@ Still using go():
 
 // src/cli/commands/preview.ts
 import { spawn } from "child_process";
-import fs29 from "fs";
+import fs30 from "fs";
 
 // src/server/index.ts
-import fs28 from "fs";
+import fs29 from "fs";
 import http2 from "http";
-import path27 from "path";
+import path28 from "path";
 import sirv2 from "sirv";
 import { createServer, searchForWorkspaceRoot } from "vite";
 
 // src/server/api.ts
-import fs26 from "fs";
-import path25 from "path";
+import fs27 from "fs";
+import path26 from "path";
 function sendJson(res, status, body) {
   res.writeHead(status, { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" });
   res.end(JSON.stringify(body));
@@ -4283,17 +4466,18 @@ async function handleApi(ctx, req, res, url) {
   }
   if (route2 === "/source") {
     const rel = url.searchParams.get("path") ?? "";
-    const file = path25.resolve(project.paths.root, rel);
-    if (!rel || !isInside(project.paths.root, file) || !fs26.existsSync(file) || fs26.statSync(file).isDirectory()) {
+    const file = path26.resolve(project.paths.root, rel);
+    const listed = project.system()?.doc.components.some((component) => component.specimen === rel || component.sources.includes(rel));
+    if (!rel || !listed || !isShowableSource(project.paths, file)) {
       sendJson(res, 404, { error: "not found" });
       return true;
     }
-    if (fs26.statSync(file).size > 2 * 1024 * 1024) {
+    if (fs27.statSync(file).size > 2 * 1024 * 1024) {
       sendJson(res, 413, { error: "file too large to show" });
       return true;
     }
     res.writeHead(200, { "content-type": "text/plain; charset=utf-8", "cache-control": "no-store" });
-    res.end(fs26.readFileSync(file, "utf8"));
+    res.end(fs27.readFileSync(file, "utf8"));
     return true;
   }
   if (route2 === "/icon" && (method === "PUT" || method === "DELETE")) {
@@ -4343,7 +4527,7 @@ async function handleApi(ctx, req, res, url) {
       return true;
     }
     res.writeHead(200, { "content-type": "image/png", "cache-control": "public, max-age=31536000, immutable" });
-    fs26.createReadStream(file).pipe(res);
+    fs27.createReadStream(file).pipe(res);
     return true;
   }
   return false;
@@ -4382,63 +4566,82 @@ var EventHub = class {
   }
 };
 
+// src/server/hosts.ts
+var LOOPBACK = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "[::1]"]);
+var FRAME_HOST = "127.0.0.1";
+var VIEWER_HOST = "localhost";
+function parseHost(header) {
+  const match = /^(\[[0-9a-f:.]+\]|[a-z0-9.-]+)(?::(\d{1,5}))?$/i.exec(header ?? "");
+  if (!match) return null;
+  return { name: match[1].toLowerCase(), port: match[2] ? Number(match[2]) : 80 };
+}
+function isAllowedHost(header, port, extra) {
+  const host = parseHost(header);
+  if (!host || host.port !== port) return false;
+  return LOOPBACK.has(host.name) || host.name.endsWith(".localhost") || !!extra && host.name === extra.toLowerCase();
+}
+function isFrameApi(pathname, method) {
+  if (pathname === "/api/health") return method === "GET";
+  return /^\/api\/snapshots\/[^/]+\/[^/]+$/.test(pathname) && (method === "GET" || method === "POST");
+}
+
 // src/server/state.ts
-import fs27 from "fs";
+import fs28 from "fs";
 import os4 from "os";
-import path26 from "path";
-var stateFile2 = (paths) => path26.join(paths.cache, "server.json");
-var logFile = (paths) => path26.join(paths.cache, "server.log");
+import path27 from "path";
+var stateFile2 = (paths) => path27.join(paths.cache, "server.json");
+var logFile = (paths) => path27.join(paths.cache, "server.log");
 function readState(paths) {
   try {
-    return JSON.parse(fs27.readFileSync(stateFile2(paths), "utf8"));
+    return JSON.parse(fs28.readFileSync(stateFile2(paths), "utf8"));
   } catch {
     return null;
   }
 }
 function registryDir() {
-  const base = process.platform === "win32" ? process.env.LOCALAPPDATA || process.env.APPDATA || path26.join(os4.homedir(), "AppData", "Local") : process.env.XDG_CACHE_HOME || path26.join(os4.homedir(), ".cache");
-  return path26.join(base, "foss-design", "previews");
+  const base = process.platform === "win32" ? process.env.LOCALAPPDATA || process.env.APPDATA || path27.join(os4.homedir(), "AppData", "Local") : process.env.XDG_CACHE_HOME || path27.join(os4.homedir(), ".cache");
+  return path27.join(base, "foss-design", "previews");
 }
-var entryFile = (pid) => path26.join(registryDir(), `${pid}.json`);
+var entryFile = (pid) => path27.join(registryDir(), `${pid}.json`);
 function writeState(paths, state) {
-  fs27.mkdirSync(paths.cache, { recursive: true });
-  fs27.writeFileSync(stateFile2(paths), `${JSON.stringify(state, null, 2)}
+  fs28.mkdirSync(paths.cache, { recursive: true });
+  fs28.writeFileSync(stateFile2(paths), `${JSON.stringify(state, null, 2)}
 `);
   try {
-    fs27.mkdirSync(registryDir(), { recursive: true });
-    fs27.writeFileSync(entryFile(state.pid), `${JSON.stringify(state, null, 2)}
+    fs28.mkdirSync(registryDir(), { recursive: true });
+    fs28.writeFileSync(entryFile(state.pid), `${JSON.stringify(state, null, 2)}
 `);
   } catch {
   }
 }
 function clearState(paths, pid) {
   const state = readState(paths);
-  fs27.rmSync(entryFile(pid ?? state?.pid ?? -1), { force: true });
+  fs28.rmSync(entryFile(pid ?? state?.pid ?? -1), { force: true });
   if (pid !== void 0 && state && state.pid !== pid) return;
-  fs27.rmSync(stateFile2(paths), { force: true });
+  fs28.rmSync(stateFile2(paths), { force: true });
 }
 function listPreviews() {
   let files = [];
   try {
-    files = fs27.readdirSync(registryDir()).filter((name) => name.endsWith(".json"));
+    files = fs28.readdirSync(registryDir()).filter((name) => name.endsWith(".json"));
   } catch {
     return [];
   }
   const found = [];
   for (const name of files) {
-    const file = path26.join(registryDir(), name);
+    const file = path27.join(registryDir(), name);
     let state = null;
     try {
-      state = JSON.parse(fs27.readFileSync(file, "utf8"));
+      state = JSON.parse(fs28.readFileSync(file, "utf8"));
     } catch {
     }
     if (!state?.pid || !pidAlive(state.pid)) {
-      fs27.rmSync(file, { force: true });
+      fs28.rmSync(file, { force: true });
       continue;
     }
     let recorded = null;
     try {
-      recorded = JSON.parse(fs27.readFileSync(path26.join(state.root, ".design", ".cache", "server.json"), "utf8"));
+      recorded = JSON.parse(fs28.readFileSync(path27.join(state.root, ".design", ".cache", "server.json"), "utf8"));
     } catch {
     }
     found.push({ ...state, tracked: recorded?.pid === state.pid });
@@ -4452,11 +4655,11 @@ async function stopPreview(entry) {
   }
   const until = Date.now() + 5e3;
   while (Date.now() < until && pidAlive(entry.pid)) await new Promise((resolve) => setTimeout(resolve, 100));
-  fs27.rmSync(entryFile(entry.pid), { force: true });
-  const stateAt = path26.join(entry.root, ".design", ".cache", "server.json");
+  fs28.rmSync(entryFile(entry.pid), { force: true });
+  const stateAt = path27.join(entry.root, ".design", ".cache", "server.json");
   try {
-    if (JSON.parse(fs27.readFileSync(stateAt, "utf8")).pid === entry.pid)
-      fs27.rmSync(stateAt, { force: true });
+    if (JSON.parse(fs28.readFileSync(stateAt, "utf8")).pid === entry.pid)
+      fs28.rmSync(stateAt, { force: true });
   } catch {
   }
 }
@@ -4515,8 +4718,8 @@ function notFoundPage(res, title, text2) {
 }
 async function startDevServer(options) {
   const paths = designPaths(options.root);
-  if (!fs28.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
-  fs28.mkdirSync(paths.cache, { recursive: true });
+  if (!fs29.existsSync(paths.design)) throw new Error(`No .design folder in ${options.root}; run \`design init\``);
+  fs29.mkdirSync(paths.cache, { recursive: true });
   const snapshots = new SnapshotStore(paths.snapshots);
   const project = new DesignProject(paths, DEV_URLS, snapshots.lookup);
   const entries = new Entries(project);
@@ -4524,6 +4727,7 @@ async function startDevServer(options) {
   const links = linkShippedPackages(paths, project.appDir());
   const events = new EventHub();
   const httpServer = http2.createServer();
+  const listening = () => httpServer.address()?.port ?? 0;
   dropStaleDepCache(paths, project.appDir());
   const base = baseConfig(project);
   const vite = await createServer({
@@ -4542,8 +4746,8 @@ async function startDevServer(options) {
         // `.cache` is ours (server.log, snapshots, builds): a change there must not reload frames. The
         // generated entries are modules the frames load, so those stay watched.
         ignored: (file) => {
-          const rel = toPosix(path27.relative(paths.cache, file));
-          const inCache = rel !== "" && !rel.startsWith("..") && !path27.isAbsolute(rel);
+          const rel = toPosix(path28.relative(paths.cache, file));
+          const inCache = rel !== "" && !rel.startsWith("..") && !path28.isAbsolute(rel);
           return inCache && rel !== "entries" && !rel.startsWith("entries/");
         }
       },
@@ -4552,7 +4756,7 @@ async function startDevServer(options) {
       forwardConsole: false
     },
     optimizeDeps: {
-      entries: entries.files().map((file) => toPosix(path27.relative(paths.design, file)))
+      entries: entries.files().map((file) => toPosix(path28.relative(paths.design, file)))
     }
   });
   const publicDir = project.publicDir();
@@ -4564,16 +4768,21 @@ async function startDevServer(options) {
       return null;
     }
   };
-  const viewer = fs28.existsSync(PKG.viewer) ? sirv2(PKG.viewer, { dev: true, etag: true }) : null;
-  const viewerIndex = path27.join(PKG.viewer, "index.html");
-  const serveViewerIndex = (res) => {
-    const html = fs28.readFileSync(viewerIndex, "utf8").replace(/<head>/i, '<head>\n<base href="/">');
+  const viewer = fs29.existsSync(PKG.viewer) ? sirv2(PKG.viewer, { dev: true, etag: true }) : null;
+  const viewerIndex = path28.join(PKG.viewer, "index.html");
+  const serveViewerIndex = (req, res, url2) => {
+    if (parseHost(req.headers.host)?.name === FRAME_HOST) {
+      res.writeHead(302, { location: `http://${VIEWER_HOST}:${listening()}${url2.pathname}${url2.search}` });
+      res.end();
+      return;
+    }
+    const html = fs29.readFileSync(viewerIndex, "utf8").replace(/<head>/i, '<head>\n<base href="/">');
     res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
     res.end(html);
   };
   const ctx = { project, events, snapshots };
   const systemCssUrl = `/${relToDesign(paths, entries.systemCssFile())}`;
-  const bootUrl = `/${relToDesign(paths, path27.join(entries.dir, HTML_BOOT))}`;
+  const bootUrl = `/${relToDesign(paths, path28.join(entries.dir, HTML_BOOT))}`;
   const frameHead = (source, extra = {}) => {
     const canvasTheme = source.canvas === SYSTEM_CANVAS ? void 0 : project.canvas(source.canvas)?.doc.theme;
     return {
@@ -4594,7 +4803,7 @@ async function startDevServer(options) {
       notFoundPage(res, "Screen not found", `No screen "${id2}" in "${canvas}". Check canvas.json.`);
       return;
     }
-    if (!fs28.existsSync(entries.entryFile(source))) entries.sync();
+    if (!fs29.existsSync(entries.entryFile(source))) entries.sync();
     const entryUrl = `/${relToDesign(paths, entries.entryFile(source))}`;
     const html = await vite.transformIndexHtml(url2.pathname + url2.search, moduleShell(frameHead(source), entryUrl));
     res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
@@ -4603,8 +4812,8 @@ async function startDevServer(options) {
   };
   const serveHtmlScreen = async (res, url2) => {
     const rel = decodeURIComponent(url2.pathname.slice("/_fs/".length));
-    const file = path27.resolve(paths.design, rel);
-    if (!isInside(paths.design, file) || !fs28.existsSync(file)) {
+    const file = path28.resolve(paths.design, rel);
+    if (!isInside(paths.design, file) || !fs29.existsSync(file)) {
       notFoundPage(res, "Screen not found", `No file .design/${rel}`);
       return;
     }
@@ -4614,13 +4823,13 @@ async function startDevServer(options) {
       key: `${canvas}/${id2}`,
       canvas,
       id: id2,
-      title: path27.basename(file),
+      title: path28.basename(file),
       file,
       format: "html",
       props: {},
       system: true
     };
-    const raw = fs28.readFileSync(file, "utf8");
+    const raw = fs29.readFileSync(file, "utf8");
     const withSystem = source.system && !optsOutOfSystem(raw);
     const html = injectIntoHtml(
       raw,
@@ -4636,8 +4845,16 @@ async function startDevServer(options) {
       if (res.headersSent) return res.end();
       sendJson(res, 500, { error: error?.stack ?? String(error) });
     };
+    if (!isAllowedHost(req.headers.host, listening(), options.host)) {
+      sendJson(res, 403, { error: `This preview server answers on localhost:${listening()} only.` });
+      return;
+    }
     try {
       if (url2.pathname.startsWith("/api/")) {
+        if (parseHost(req.headers.host)?.name === FRAME_HOST && !isFrameApi(url2.pathname, req.method ?? "GET")) {
+          sendJson(res, 403, { error: `Frames' host: open the viewer on http://${VIEWER_HOST}:${listening()}.` });
+          return;
+        }
         handleApi(ctx, req, res, url2).then((handled) => {
           if (!handled) sendJson(res, 404, { error: "unknown endpoint" });
         }).catch(fail);
@@ -4653,7 +4870,7 @@ async function startDevServer(options) {
       }
       if (url2.pathname.startsWith("/_fs/")) {
         const rel = publicRel(url2.pathname.slice("/_fs/".length));
-        if (publicDir && rel !== null && !project.isPublicFile(rel) && fs28.existsSync(path27.join(publicDir, rel))) {
+        if (publicDir && rel !== null && !project.isPublicFile(rel) && fs29.existsSync(path28.join(publicDir, rel))) {
           notFoundPage(res, "Not found", url2.pathname);
           return;
         }
@@ -4665,10 +4882,10 @@ async function startDevServer(options) {
           const rel = publicRel(url2.pathname.slice(1));
           if (servePublic && rel !== null && project.isPublicFile(rel))
             servePublic(req, res, () => notFoundPage(res, "Not found", url2.pathname));
-          else if (path27.extname(url2.pathname)) notFoundPage(res, "Not found", url2.pathname);
-          else serveViewerIndex(res);
+          else if (path28.extname(url2.pathname)) notFoundPage(res, "Not found", url2.pathname);
+          else serveViewerIndex(req, res, url2);
         };
-        if (url2.pathname === "/" || url2.pathname === "/index.html") serveViewerIndex(res);
+        if (url2.pathname === "/" || url2.pathname === "/index.html") serveViewerIndex(req, res, url2);
         else viewer(req, res, notViewer);
       } else notFoundPage(res, "Viewer is not built", "Run `pnpm build` in the foss-design package.");
     } catch (error) {
@@ -4693,7 +4910,7 @@ async function startDevServer(options) {
   };
   vite.watcher.on("all", (event, file) => {
     if (publicDir && isInside(publicDir, file)) project.invalidatePublic();
-    const rel = toPosix(path27.relative(paths.design, file));
+    const rel = toPosix(path28.relative(paths.design, file));
     if (rel.startsWith("..") || rel.startsWith(".cache/") || rel.startsWith("node_modules/")) return;
     if (rel === "design.json") {
       queue("config", () => {
@@ -4804,8 +5021,8 @@ async function ensureServer(paths, options) {
   const recorded = readState(paths);
   if (recorded && pidAlive(recorded.pid)) await stopPreview(recorded);
   for (const other of listPreviews()) if (other.root === paths.root) await stopPreview(other);
-  fs29.mkdirSync(paths.cache, { recursive: true });
-  const log = fs29.openSync(logFile(paths), "w");
+  fs30.mkdirSync(paths.cache, { recursive: true });
+  const log = fs30.openSync(logFile(paths), "w");
   const args = [PKG.cli, "preview", "--foreground", "--root", paths.root];
   if (options.port) args.push("--port", String(options.port));
   const child = spawn(process.execPath, args, {
@@ -4817,7 +5034,7 @@ async function ensureServer(paths, options) {
   child.unref();
   const state = await waitForServer(paths, 4e4);
   if (!state) {
-    const tail = fs29.existsSync(logFile(paths)) ? fs29.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
+    const tail = fs30.existsSync(logFile(paths)) ? fs30.readFileSync(logFile(paths), "utf8").split("\n").slice(-25) : [];
     throw new CliError(`The preview server did not start.
 ${tail.join("\n")}`);
   }
@@ -4979,6 +5196,7 @@ function runPull(paths, units, options) {
 
 // src/cli/commands/canvases.ts
 var publicUrl = (host, publicId) => `${host.replace(/\/+$/, "")}/s/${publicId}`;
+var screenUrl = (host, publicId) => `${host.replace(/\/+$/, "")}/a/${publicId}`;
 function ago(iso) {
   const seconds2 = Math.max(0, (Date.now() - Date.parse(iso)) / 1e3);
   if (!Number.isFinite(seconds2)) return "";
@@ -5069,16 +5287,35 @@ async function runUrl(paths, value, options) {
   const unit = await remoteCanvas(client, link.project, canvas);
   const url = webUrl(link, canvasUnit(canvas));
   const pub = unit.publicId ? publicUrl(link.host, unit.publicId) : null;
-  if (options.json) return print(JSON.stringify({ canvas, url, publicUrl: pub, archived: unit.archived }, null, 2));
+  const screens = unit.screens.map((s) => ({ screen: s.item, publicUrl: screenUrl(link.host, s.publicId) }));
+  if (options.json)
+    return print(JSON.stringify({ canvas, url, publicUrl: pub, screens, archived: unit.archived }, null, 2));
   print(url);
   if (pub) print(`${dim("public")} ${pub}`);
+  for (const screen of screens) print(`${dim(`public ${screen.screen}`)} ${screen.publicUrl}`);
   if (unit.archived) print(dim("archived \u2014 `design unarchive` brings it back"));
 }
 async function runPublish(paths, value, publish) {
   const verb = publish ? "publish" : "unpublish";
-  const canvas = canvasArg(value, `design ${verb} <canvas>`);
+  const usage = `design ${verb} <canvas>[/<screen>]`;
+  const slash = value?.indexOf("/") ?? -1;
+  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);
-  await remoteCanvas(client, link.project, canvas);
+  const unit = await remoteCanvas(client, 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);
+    if (publish) {
+      print(
+        `${green("\u2713")} Published ${bold(`${canvas}/${screen}`)} on its own: anyone with the link sees this screen alone`
+      );
+      if (publicId2) print(`  ${cyan(screenUrl(link.host, publicId2))}`);
+    } else print(`${green("\u2713")} ${bold(`${canvas}/${screen}`)} has no public link now`);
+    return;
+  }
   const { publicId } = await client.canvasAction(link.project, canvas, verb);
   if (publish) {
     const id2 = publicId ?? (await remoteCanvas(client, link.project, canvas)).publicId;
@@ -5247,11 +5484,11 @@ async function renderFrames(jobs) {
     await browser.close();
   }
 }
-async function runCheck(paths, targets, options) {
+async function runCheck(paths, targets2, options) {
   const project = new DesignProject(paths, DEV_URLS);
   const known = project.canvasIds();
   const picked = /* @__PURE__ */ new Map();
-  for (const target of targets) {
+  for (const target of targets2) {
     const [canvasId = "", screenId] = target.split("/");
     if (!known.includes(canvasId))
       throw new CliError(`No canvas "${canvasId}". Canvases: ${known.join(", ") || "none yet"}`);
@@ -5416,9 +5653,9 @@ function printLinkIssues(issues, project) {
 }
 
 // src/cli/commands/cloud.ts
-import fs30 from "fs";
+import fs31 from "fs";
 import os5 from "os";
-import path28 from "path";
+import path29 from "path";
 var sleep2 = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 async function runLogin() {
   const host = cloudHost();
@@ -5519,7 +5756,7 @@ async function runLink(paths, wanted, options) {
     print(`${dim("Already linked to")} ${project.name} ${dim(`(${project.id}, ${project.role})`)}`);
   } else {
     writeLink(paths, { host, project: project.id, units: {}, conflicts: {} });
-    fs30.rmSync(path28.join(cloudCache(paths), "incoming"), { recursive: true, force: true });
+    fs31.rmSync(path29.join(cloudCache(paths), "incoming"), { recursive: true, force: true });
     const replaced = current ? dim(` (replacing the link to ${current.project})`) : "";
     print(`${green("linked")} .design \u2192 ${bold(project.name)} ${dim(`(${project.id}, ${project.role})`)}${replaced}`);
   }
@@ -5546,8 +5783,8 @@ async function runLink(paths, wanted, options) {
 }
 
 // src/cli/commands/icon.ts
-import fs31 from "fs";
-import path29 from "path";
+import fs32 from "fs";
+import path30 from "path";
 async function toCloud(paths, file) {
   const link = readLink(paths);
   if (!link) return;
@@ -5558,10 +5795,10 @@ async function toCloud(paths, file) {
   }
   const client = new CloudClient(link.host, credential.token);
   try {
-    const ext = file ? path29.extname(file).slice(1) : null;
+    const ext = file ? path30.extname(file).slice(1) : null;
     await client.setProjectIcon(
       link.project,
-      file && ext ? { data: fs31.readFileSync(file), type: ICON_TYPES[ext] } : null
+      file && ext ? { data: fs32.readFileSync(file), type: ICON_TYPES[ext] } : null
     );
     link.icon = file ? iconHash(file) : null;
     writeLink(paths, link);
@@ -5574,35 +5811,35 @@ async function runIcon(paths, file, options) {
   if (options.remove) {
     const had = iconFile(paths);
     writeIcon(paths, null);
-    print(had ? `${green("Removed")} ${path29.relative(process.cwd(), had)}` : "The project has no icon.");
+    print(had ? `${green("Removed")} ${path30.relative(process.cwd(), had)}` : "The project has no icon.");
     await toCloud(paths, null);
     return;
   }
   if (!file) {
     const current = iconFile(paths);
     if (!current) return print("The project has no icon. Set one with `design icon <file.svg|png|webp>`.");
-    return print(`${path29.relative(process.cwd(), current)} ${dim(`${Math.ceil(fs31.statSync(current).size / 1024)} KB`)}`);
+    return print(`${path30.relative(process.cwd(), current)} ${dim(`${Math.ceil(fs32.statSync(current).size / 1024)} KB`)}`);
   }
   let data;
   try {
-    data = fs31.readFileSync(file);
+    data = fs32.readFileSync(file);
   } catch {
     throw new CliError(`No file ${file}`);
   }
-  const problem = iconProblem(data, path29.extname(file).slice(1).toLowerCase() || void 0);
+  const problem = iconProblem(data, path30.extname(file).slice(1).toLowerCase() || void 0);
   if (problem) throw new CliError(`${file}: ${problem}`);
   const written = writeIcon(paths, data);
-  print(`${green("Set")} the project icon: ${path29.relative(process.cwd(), written)}`);
+  print(`${green("Set")} the project icon: ${path30.relative(process.cwd(), written)}`);
   await toCloud(paths, written);
 }
 
 // src/cli/commands/import.ts
-import fs33 from "fs";
-import path31 from "path";
+import fs34 from "fs";
+import path32 from "path";
 
 // src/import/claude-design.ts
-import fs32 from "fs";
-import path30 from "path";
+import fs33 from "fs";
+import path31 from "path";
 
 // src/import/markup.ts
 var VOID = /* @__PURE__ */ new Set([
@@ -6210,11 +6447,11 @@ function boardId(file, used) {
   return id2;
 }
 function importClaudeDesign(dir, options = {}) {
-  const canvasFile = path30.join(dir, "canvas.json");
-  if (!fs32.existsSync(canvasFile))
+  const canvasFile = path31.join(dir, "canvas.json");
+  if (!fs33.existsSync(canvasFile))
     throw new Error(`No canvas.json in ${dir}: point at the exported Claude Design project folder`);
-  const source = JSON.parse(fs32.readFileSync(canvasFile, "utf8"));
-  const templates = fs32.readdirSync(dir).filter((file) => file.endsWith(EXT));
+  const source = JSON.parse(fs33.readFileSync(canvasFile, "utf8"));
+  const templates = fs33.readdirSync(dir).filter((file) => file.endsWith(EXT));
   if (!templates.length) throw new Error(`No ${EXT} files in ${dir}`);
   const known = new Set(templates.map((file) => file.slice(0, -EXT.length)));
   const warnings = /* @__PURE__ */ new Map();
@@ -6241,7 +6478,7 @@ function importClaudeDesign(dir, options = {}) {
     try {
       files.set(
         `${name}.jsx`,
-        convertFile(name, fs32.readFileSync(path30.join(dir, file), "utf8"), { known, routes, warn: warn2 })
+        convertFile(name, fs33.readFileSync(path31.join(dir, file), "utf8"), { known, routes, warn: warn2 })
       );
     } catch (error) {
       warn2(`could not be converted: ${error.message}`);
@@ -6289,7 +6526,7 @@ function importClaudeDesign(dir, options = {}) {
     screens++;
   }
   const canvas = {
-    title: options.title ?? source.title ?? path30.basename(path30.resolve(dir)),
+    title: options.title ?? source.title ?? path31.basename(path31.resolve(dir)),
     description: "Imported from Claude Design.",
     // The templates bring their own styles; the design system's reset would restyle them.
     system: false,
@@ -6301,21 +6538,21 @@ function importClaudeDesign(dir, options = {}) {
 // src/cli/commands/import.ts
 var slug = (text2) => text2.normalize("NFKD").replace(/[^\w\s-]/g, "").trim().replace(/[\s_]+/g, "-").toLowerCase();
 function runImport(paths, from, options) {
-  const dir = path31.resolve(from);
-  if (!fs33.existsSync(dir) || !fs33.statSync(dir).isDirectory()) throw new CliError(`No folder ${from}`);
+  const dir = path32.resolve(from);
+  if (!fs34.existsSync(dir) || !fs34.statSync(dir).isDirectory()) throw new CliError(`No folder ${from}`);
   let result;
   try {
     result = importClaudeDesign(dir, { title: options.title });
   } catch (error) {
     throw new CliError(error.message);
   }
-  const id2 = options.canvas ?? (slug(String(result.canvas.title)) || slug(path31.basename(dir)) || "imported");
+  const id2 = options.canvas ?? (slug(String(result.canvas.title)) || slug(path32.basename(dir)) || "imported");
   if (!ID_PATTERN.test(id2)) throw new CliError(`"${id2}" is no canvas id; pass one with --canvas <id>`);
-  const out = path31.join(paths.canvases, id2);
-  if (fs33.existsSync(out)) throw new CliError(`.design/canvas/${id2} exists; pick another id with --canvas <id>`);
-  fs33.mkdirSync(path31.join(out, "screens"), { recursive: true });
-  for (const [name, content] of result.files) fs33.writeFileSync(path31.join(out, "screens", name), content);
-  fs33.writeFileSync(path31.join(out, "canvas.json"), `${JSON.stringify(result.canvas, null, 2)}
+  const out = path32.join(paths.canvases, id2);
+  if (fs34.existsSync(out)) throw new CliError(`.design/canvas/${id2} exists; pick another id with --canvas <id>`);
+  fs34.mkdirSync(path32.join(out, "screens"), { recursive: true });
+  for (const [name, content] of result.files) fs34.writeFileSync(path32.join(out, "screens", name), content);
+  fs34.writeFileSync(path32.join(out, "canvas.json"), `${JSON.stringify(result.canvas, null, 2)}
 `);
   print(`${green("Imported")} ${bold(String(result.canvas.title))} \u2192 .design/canvas/${id2}`);
   print(
@@ -6335,7 +6572,7 @@ function runImport(paths, from, options) {
 
 // src/cli/commands/merge.ts
 import { spawnSync as spawnSync2 } from "child_process";
-import path32 from "path";
+import path33 from "path";
 import { createInterface } from "readline/promises";
 var KIND = {
   text: "both sides changed lines, the markers show them",
@@ -6343,15 +6580,15 @@ var KIND = {
   deleted_here: "deleted here, changed in the cloud; the cloud version is in place",
   deleted_in_cloud: "deleted in the cloud, changed here; yours is in place"
 };
-function matchTargets(paths, states, targets) {
+function matchTargets(paths, states, targets2) {
   const picked = [];
-  for (const target of targets) {
+  for (const target of targets2) {
     const unit = states.find((state) => state.unit === unitArg(target));
     if (unit) {
       for (const conflict of openConflicts(paths, unit)) picked.push({ state: unit, conflict });
       continue;
     }
-    const rel = [path32.relative(paths.design, path32.resolve(target)), target.replace(/^\.design\//, "")];
+    const rel = [path33.relative(paths.design, path33.resolve(target)), target.replace(/^\.design\//, "")];
     const found = states.flatMap(
       (state) => state.conflicts.filter((item) => rel.includes(item.path)).map((conflict) => ({ state, conflict }))
     );
@@ -6367,12 +6604,12 @@ function printOpen(paths, states) {
     print(`${bold(state.unit)} ${dim(`merged with cloud r${state.headRev}`)}`);
     for (const conflict of open2) {
       print(`  ${red("\u2717")} ${conflict.path}  ${dim(KIND[conflict.kind])}`);
-      const sides = ["here", "cloud", "base"].map((side) => `${side}: ${path32.relative(process.cwd(), sideFile(paths, state.unit, conflict.path, side))}`).join(" \xB7 ");
+      const sides = ["here", "cloud", "base"].map((side) => `${side}: ${path33.relative(process.cwd(), sideFile(paths, state.unit, conflict.path, side))}`).join(" \xB7 ");
       print(`      ${dim(sides)}`);
     }
   }
 }
-async function runMerge(paths, targets, options) {
+async function runMerge(paths, targets2, options) {
   if (options.here && options.cloud) throw new CliError("Pick one side: --here or --cloud");
   const link = requireLink(paths);
   const states = mergingUnits(paths);
@@ -6388,7 +6625,7 @@ async function runMerge(paths, targets, options) {
   };
   if (options.here || options.cloud) {
     const side = options.here ? "here" : "cloud";
-    const picked = targets.length ? matchTargets(paths, states, targets) : states.flatMap((state) => openConflicts(paths, state).map((conflict) => ({ state, conflict })));
+    const picked = targets2.length ? matchTargets(paths, states, targets2) : states.flatMap((state) => openConflicts(paths, state).map((conflict) => ({ state, conflict })));
     for (const { state, conflict } of picked) {
       resolveConflict(paths, state, conflict.path, side);
       print(`${green("\u2713")} ${conflict.path} ${dim(`(${side === "here" ? "yours" : "the cloud's"})`)}`);
@@ -6397,7 +6634,7 @@ async function runMerge(paths, targets, options) {
     return;
   }
   if (options.done) {
-    const only = targets.length ? targets.map(unitArg) : void 0;
+    const only = targets2.length ? targets2.map(unitArg) : void 0;
     close(true, only);
     const left2 = states.filter(
       (state) => (!only || only.includes(state.unit)) && openConflicts(paths, state).some((c) => c.kind === "text")
@@ -6448,7 +6685,7 @@ async function runMerge(paths, targets, options) {
           if (answer === "s") break;
           if (answer === "e" && edit) {
             const editor = process.env.VISUAL || process.env.EDITOR || "vi";
-            spawnSync2(editor, [path32.join(paths.design, conflict.path)], { stdio: "inherit", shell: true });
+            spawnSync2(editor, [path33.join(paths.design, conflict.path)], { stdio: "inherit", shell: true });
             if (!openConflicts(paths, state).some((item) => item.path === conflict.path)) break;
             print(yellow("  Conflict markers are still there."));
           }
@@ -6467,7 +6704,7 @@ async function runMerge(paths, targets, options) {
 }
 
 // src/cli/commands/rename.ts
-import fs34 from "fs";
+import fs35 from "fs";
 async function runRename(paths, name) {
   const trimmed = name.trim();
   if (!trimmed) throw new CliError("Usage: design rename <name>");
@@ -6482,17 +6719,17 @@ async function runRename(paths, name) {
   }
   let config = {};
   try {
-    config = JSON.parse(fs34.readFileSync(paths.config, "utf8"));
+    config = JSON.parse(fs35.readFileSync(paths.config, "utf8"));
   } catch {
   }
-  fs34.writeFileSync(paths.config, `${JSON.stringify({ ...config, name: trimmed }, null, 2)}
+  fs35.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 fs35 from "fs";
-import path33 from "path";
+import fs36 from "fs";
+import path34 from "path";
 
 // src/cli/templates.ts
 var TOKENS_CSS = `/*
@@ -6703,40 +6940,40 @@ function mainScreen(canvasId) {
 
 // src/cli/commands/scaffold.ts
 function write(file, content, root) {
-  if (fs35.existsSync(file)) {
-    print(`  ${dim("exists ")} ${path33.relative(root, file)}`);
+  if (fs36.existsSync(file)) {
+    print(`  ${dim("exists ")} ${path34.relative(root, file)}`);
     return false;
   }
-  fs35.mkdirSync(path33.dirname(file), { recursive: true });
-  fs35.writeFileSync(file, content);
-  print(`  ${green("created")} ${path33.relative(root, file)}`);
+  fs36.mkdirSync(path34.dirname(file), { recursive: true });
+  fs36.writeFileSync(file, content);
+  print(`  ${green("created")} ${path34.relative(root, file)}`);
   return true;
 }
 function ensureGitignored(root) {
-  const file = path33.join(root, ".gitignore");
-  const current = fs35.existsSync(file) ? fs35.readFileSync(file, "utf8") : "";
+  const file = path34.join(root, ".gitignore");
+  const current = fs36.existsSync(file) ? fs36.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" : "";
-  fs35.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
+  fs36.writeFileSync(file, `${current}${prefix}${current ? "\n" : ""}# Design canvases (foss-design)
 .design/
 `);
   return "added";
 }
 function projectName(root) {
   try {
-    const manifest = JSON.parse(fs35.readFileSync(path33.join(root, "package.json"), "utf8"));
+    const manifest = JSON.parse(fs36.readFileSync(path34.join(root, "package.json"), "utf8"));
     if (typeof manifest.name === "string" && manifest.name) return manifest.name;
   } catch {
   }
-  return path33.basename(root);
+  return path34.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);
-  fs35.mkdirSync(paths.canvases, { recursive: true });
+  fs36.mkdirSync(paths.canvases, { recursive: true });
   if (options.gitignore) {
     const result = ensureGitignored(root);
     print(`  ${result === "added" ? green("ignored") : dim("ignored")} .design/ in .gitignore`);
@@ -6750,44 +6987,44 @@ function runSystemInit(root, options) {
   const paths = designPaths(root);
   let base = projectName(root);
   try {
-    base = JSON.parse(fs35.readFileSync(paths.config, "utf8")).name || base;
+    base = JSON.parse(fs36.readFileSync(paths.config, "utf8")).name || base;
   } catch {
   }
   const name = options.name ?? `${base} design system`;
-  print(`Scaffolding the design system in ${path33.relative(root, paths.system)}`);
-  write(path33.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
+  print(`Scaffolding the design system in ${path34.relative(root, paths.system)}`);
+  write(path34.join(paths.system, "system.json"), `${JSON.stringify({ name }, null, 2)}
 `, root);
-  write(path33.join(paths.system, "tokens.css"), TOKENS_CSS, root);
+  write(path34.join(paths.system, "tokens.css"), TOKENS_CSS, root);
   if (!options.empty) {
-    write(path33.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
-    write(path33.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
-    write(path33.join(paths.system, "specimens", "button.tsx"), BUTTON_SPECIMEN_TSX, root);
+    write(path34.join(paths.system, "guidelines", "01-overview.md"), OVERVIEW_MD, root);
+    write(path34.join(paths.system, "components", "button.tsx"), BUTTON_TSX, root);
+    write(path34.join(paths.system, "specimens", "button.tsx"), BUTTON_SPECIMEN_TSX, root);
   }
 }
 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 = path33.join(paths.canvases, id2);
-  if (fs35.existsSync(path33.join(dir, "canvas.json"))) throw new CliError(`Canvas "${id2}" already exists in ${dir}`);
+  const dir = path34.join(paths.canvases, id2);
+  if (fs36.existsSync(path34.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(
-      path33.join(dir, "canvas.json"),
+      path34.join(dir, "canvas.json"),
       `${JSON.stringify({ title, pages: [{ id: "main", title: "Main", sections: [] }] }, null, 2)}
 `,
       root
     );
-    fs35.mkdirSync(path33.join(dir, "screens"), { recursive: true });
+    fs36.mkdirSync(path34.join(dir, "screens"), { recursive: true });
   } else {
-    write(path33.join(dir, "canvas.json"), canvasJson(title), root);
-    write(path33.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
+    write(path34.join(dir, "canvas.json"), canvasJson(title), root);
+    write(path34.join(dir, "screens", "Main.tsx"), mainScreen(id2), root);
   }
 }
 
 // src/cli/commands/shot.ts
-import fs36 from "fs";
-import path34 from "path";
+import fs37 from "fs";
+import path35 from "path";
 var OVERVIEW_TIMEOUT = 9e4;
 async function runShot(paths, target, options) {
   const [canvasId = "", screenId] = target.split("/");
@@ -6803,15 +7040,15 @@ async function runShot(paths, target, options) {
     throw new CliError(`No page "${options.page}" in "${canvasId}". Pages: ${doc.pages.map((p) => p.id).join(", ")}`);
   }
   const theme2 = options.theme ?? doc.theme ?? "light";
-  const outBase = path34.resolve(options.out ?? paths.shots);
-  const outDir = path34.join(outBase, canvasId);
-  fs36.mkdirSync(outDir, { recursive: true });
+  const outBase = path35.resolve(options.out ?? paths.shots);
+  const outDir = path35.join(outBase, canvasId);
+  fs37.mkdirSync(outDir, { recursive: true });
   const base = await serverBase(paths);
   const browser = await launchChrome();
   let failed = false;
   try {
     if (options.overview) {
-      if (!fs36.existsSync(PKG.viewer)) throw new CliError("The viewer is not built, so there is no canvas to shoot.");
+      if (!fs37.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 } });
@@ -6827,7 +7064,7 @@ async function runShot(paths, target, options) {
           warn(`page "${pageId}": not every frame reported ready within ${OVERVIEW_TIMEOUT / 1e3}s; shooting anyway`);
         }
         await page.waitForTimeout(400);
-        const file = path34.join(outDir, `${pageId}.overview.png`);
+        const file = path35.join(outDir, `${pageId}.overview.png`);
         await page.screenshot({ path: file });
         await page.close();
         print(file);
@@ -6856,7 +7093,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 = path34.join(outDir, `${job.id}.${job.theme}.png`);
+    const file = path35.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 });
@@ -6888,8 +7125,8 @@ async function shootSystem(paths, project, id2, options) {
   if (id2 && !all.some((job) => job.id === id2)) {
     throw new CliError(`No specimen "${id2}" in the design system. Specimens: ${all.map((job) => job.id).join(", ")}`);
   }
-  const outDir = path34.join(path34.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
-  fs36.mkdirSync(outDir, { recursive: true });
+  const outDir = path35.join(path35.resolve(options.out ?? paths.shots), SYSTEM_CANVAS);
+  fs37.mkdirSync(outDir, { recursive: true });
   const base = await serverBase(paths);
   const jobs = systemFrames(system.doc, base, theme2).filter((job) => !id2 || job.id === id2);
   const browser = await launchChrome();
@@ -6901,10 +7138,10 @@ async function shootSystem(paths, project, id2, options) {
 }
 
 // src/cli/commands/snapshots.ts
-async function runSnapshots(paths, targets, options) {
+async function runSnapshots(paths, targets2, options) {
   const known = new DesignProject(paths, DEV_URLS).canvasIds();
   const picked = /* @__PURE__ */ new Map();
-  for (const target of targets) {
+  for (const target of targets2) {
     const [canvas = "", screen] = target.split("/");
     if (!known.includes(canvas))
       throw new CliError(`No canvas "${canvas}". Canvases: ${known.join(", ") || "none yet"}`);
@@ -6939,7 +7176,7 @@ async function runSnapshots(paths, targets, options) {
 }
 
 // src/cli/commands/cloud-status.ts
-import path35 from "path";
+import path36 from "path";
 var STATE_TEXT = {
   in_sync: green,
   local_changes: yellow,
@@ -6962,7 +7199,7 @@ function detail(paths, status) {
   if (status.state === "remote_ahead" && !status.local && !status.baseRev) parts.push("not pulled yet");
   if (status.state === "remote_ahead" && status.changed.length && !status.deletedRemotely)
     parts.push(`${plural(status.changed.length, "file")} changed here; the cloud only rebuilt it`);
-  if (status.conflictRev !== void 0) parts.push(`merge ${path35.relative(paths.root, incomingDir(paths, status.key))}`);
+  if (status.conflictRev !== void 0) parts.push(`merge ${path36.relative(paths.root, incomingDir(paths, status.key))}`);
   return parts.join(" \xB7 ");
 }
 async function printCloudStatus(paths, label) {
@@ -7138,12 +7375,15 @@ ${bold("Cloud")}  ${dim("units: system (design.json + system/) and canvas/<id>;
   merge [<unit|file>\u2026] [--here|--cloud]      Conflicts a merge left: lists them (in a terminal, walks
         [--done] [--json]                    through them); --here / --cloud settles files or units;
                                              --done closes a merge once no markers are left
-  url <canvas> [--json]                      The canvas in the web app, and its public link if published
+  url <canvas> [--json]                      The canvas in the web app, and its public links: the canvas's
+                                             and its screens' published on their own
   history <canvas|system> [--json]           Stored revisions, newest first: when, who, screens, size
   rollback <canvas> <rev>                    Make an old revision current again in the cloud (a new
                                              revision), then pull it here
-  publish <canvas>                           Give the canvas a public link anyone can open (owner only)
-  unpublish <canvas>                         Turn the public link off
+  publish <canvas>[/<screen>]                Give the canvas a public link anyone can open (owner only);
+                                             with a screen, a link to that screen alone, which names
+                                             nothing of the project and opens no other screen
+  unpublish <canvas>[/<screen>]              Turn the public link off
   archive <canvas>                           Archive the canvas in the cloud: out of the list and pushes,
                                              history kept
   unarchive <canvas>                         Bring an archived canvas back
@@ -7157,7 +7397,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 ? path36.resolve(rootOption) : findProjectRoot();
+  const found = rootOption ? path37.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.");
@@ -7210,7 +7450,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 ? path36.resolve(values.root) : process.cwd(), {
+      return runInit(values.root ? path37.resolve(values.root) : process.cwd(), {
         name: values.name,
         gitignore: !values["no-gitignore"]
       });
@@ -7317,12 +7557,12 @@ function relaunchFromRealPath() {
   let realScript;
   let realCwd;
   try {
-    realScript = fs37.realpathSync.native(script);
-    realCwd = fs37.realpathSync.native(process.cwd());
+    realScript = fs38.realpathSync.native(script);
+    realCwd = fs38.realpathSync.native(process.cwd());
   } catch {
     return false;
   }
-  const same = (a, b) => path36.resolve(a).toLowerCase() === path36.resolve(b).toLowerCase();
+  const same = (a, b) => path37.resolve(a).toLowerCase() === path37.resolve(b).toLowerCase();
   if (same(realScript, script) && same(realCwd, process.cwd())) return false;
   const result = spawnSync3(process.execPath, [...process.execArgv, realScript, ...process.argv.slice(2)], {
     stdio: "inherit",