truecanvas 0.4.1 → 0.5.0

package/README.md

@@ -114,11 +114,14 @@ The **Truecanvas window** (`npx truecanvas open`) manages several projects in ta
 
 **Share** (top right in the editor), `npx truecanvas share <canvas>`, or your agent's `share_canvas` renders every frame through your app and freezes it into static HTML and CSS: no scripts, so a link can never call your API or leak a session. It's published to your own review site as a new version of that page's link. Clients open it in any browser, with an optional password, and pin comments on the frames. Their threads sync into the canvas's comments while Truecanvas runs; your replies and your agent's (`reply_comment`, `resolve_comment`) go back to the link, under your studio's name. Comments you start in Truecanvas stay internal. `--revoke` takes a link down and `--delete` removes it with its comments.
 
-The review site is `packages/review`, a small Next.js app you deploy once to your Vercel account:
+Add `--live <dir|url>` (or `live` in `share_canvas`) and clients also get **View live** on each frame: the real site at that frame's width, animations and interactions included. Pass a static build (Next `out/`, Vite `dist/`) for the review site to host, or the URL where the app already runs.
 
-1. Create a Vercel project from this repo with **Root Directory** `packages/review`, and add a private **Blob** store and **Upstash for Redis** (both have free tiers).
-2. Set `REVIEW_TOKEN` (a long random string), and optionally `BRAND_NAME` and `BRAND_LOGO` (a logo URL) for your studio's branding.
-3. Add your domain (for example `review.your-studio.com`), then connect Truecanvas: `npx truecanvas share setup https://review.your-studio.com`.
+You deploy the review site once, on your own domain:
+
+- **Cloudflare** (`packages/review-worker`, recommended): Workers, D1 and R2 on the free plan, hosts live sites. See its [README](packages/review-worker/README.md).
+- **Vercel** (`packages/review`): create a project with **Root Directory** `packages/review`, add a private **Blob** store and **Upstash for Redis**, set `REVIEW_TOKEN` (a long random string) and optionally `BRAND_NAME` and `BRAND_LOGO`, then add your domain. Frozen frames and comments only.
+
+Then connect Truecanvas: `npx truecanvas share setup https://review.your-studio.com`.
 
 Without a review site, Share still makes a local preview of what clients would see.
 

package/dist/{chunk-M7B3W7EP.js → chunk-DV76O5SZ.js}

@@ -126,7 +126,22 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
   #pop { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; max-height: 60dvh; }
   #panel { left: 8px; right: 8px; top: 56px; bottom: 68px; width: auto; }
 }
-@media (prefers-reduced-motion: reduce) { .frame-box iframe { transition: none; } }
+/* live site */
+.live-btn { height: 22px; min-width: 0; margin-left: 8px; padding: 0 8px 0 6px; gap: 4px; border-radius: 6px; vertical-align: middle;
+  background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 600; }
+.live-btn:hover { background: var(--accent); color: #fff; }
+#live { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px;
+  background: rgba(12,12,11,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade-in .16s var(--ease-out); }
+@keyframes fade-in { from { opacity: 0; } }
+.live-bar { display: flex; align-items: center; gap: 10px; max-width: 100%; height: 40px; padding: 0 6px 0 14px; border-radius: 12px;
+  background: var(--panel-solid); border: 1px solid var(--line); box-shadow: 0 8px 28px -10px rgba(0,0,0,.35); }
+.live-bar b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.live-bar a { color: var(--text); white-space: nowrap; text-decoration: none; padding: 0 8px; height: 30px; display: inline-flex; align-items: center; border-radius: 8px; }
+.live-bar a:hover { background: var(--line); }
+.live-device { position: relative; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); animation: pop-in .2s var(--ease-out); }
+.live-device iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; }
+@media (max-width: 640px) { .live-bar .meta { display: none; } }
+@media (prefers-reduced-motion: reduce) { .frame-box iframe { transition: none; } #live, .live-device { animation: none; } }
 </style>
 </head>
 <body>
@@ -137,6 +152,10 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
 </header>
 <aside id="panel" hidden aria-label="Comments"><div class="panel-head"><span>Comments</span><button id="panel-close" aria-label="Close">\u2715</button></div><div class="panel-list" id="panel-list"></div></aside>
 <div id="pop" hidden role="dialog" aria-label="Comment"></div>
+<div id="live" hidden role="dialog" aria-modal="true" aria-label="Live site">
+  <div class="live-bar"><b id="live-name"></b><span class="meta" id="live-size"></span><a id="live-tab" target="_blank" rel="noopener">Open in a new tab</a><button id="live-close" aria-label="Close live site" title="Close (Esc)">\u2715</button></div>
+  <div class="live-device" id="live-device"></div>
+</div>
 <footer><div class="pill">
   <button id="out" aria-label="Zoom out" title="Zoom out (-)">\u2212</button>
   <button id="zoom" aria-label="Zoom to fit" title="Zoom to fit (1)">100%</button>
@@ -258,10 +277,12 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
     const el = document.createElement("div");
     el.className = "frame";
     el.style.cssText = "left:" + (f.x - minX) + "px;top:" + (f.y - minY) + "px;width:" + f.width + "px;height:" + f.height + "px";
-    el.innerHTML = '<div class="frame-label"><b>' + esc(f.name) + "</b>" + f.width + " \xD7 " + Math.round(f.height) + "</div>" +
+    el.innerHTML = '<div class="frame-label"><b>' + esc(f.name) + "</b>" + f.width + " \xD7 " + Math.round(f.height) + (manifest.live ? '<button class="live-btn" title="Open the live site at this width"><svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l13-7.5z"/></svg>View live</button>' : "") + "</div>" +
       '<div class="frame-box" style="width:' + f.width + "px;height:" + f.height + 'px"><img alt="" src="' + esc(f.image) + '"><iframe sandbox title="' + esc(f.name) + '" scrolling="no" loading="lazy" src="' + esc(f.html) + '"></iframe></div>';
     const iframe = el.querySelector("iframe");
     iframe.addEventListener("load", () => iframe.classList.add("ready"));
+    const liveBtn = el.querySelector(".live-btn");
+    if (liveBtn) liveBtn.onclick = (e) => { e.stopPropagation(); openLive(f); };
     el.dataset.name = f.name;
     world.appendChild(el);
     labels.push(el.querySelector(".frame-label"));
@@ -319,8 +340,8 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
   let pinch = null;
   let moved = false, downAt = null;
   stage.addEventListener("pointerdown", (e) => {
-    // pins are buttons: they take their own clicks
-    if (e.target.closest && e.target.closest(".pin")) return;
+    // pins and View live are buttons: they take their own clicks
+    if (e.target.closest && e.target.closest(".pin, .live-btn")) return;
     stage.setPointerCapture(e.pointerId);
     moved = false;
     downAt = { x: e.clientX, y: e.clientY };
@@ -378,6 +399,7 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
   document.getElementById("out").onclick = () => zoomAt(z / 1.25, ...center());
   zoomLabel.onclick = () => (tall() ? fitWidth() : fit());
   addEventListener("keydown", (e) => {
+    if (liveOpen()) { if (e.key === "Escape") closeLive(); return; }
     if (e.target.closest && e.target.closest("input, textarea, select")) return;
     if (e.key === "Escape") { closePop(); setCommenting(false); return; }
     if ((e.key === "c" || e.key === "C") && canComment && !e.metaKey && !e.ctrlKey) { setCommenting(!commenting); return; }
@@ -389,6 +411,53 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
   });
   addEventListener("resize", apply);
 
+  // ---------- live site: the real thing, at the frame's width ----------
+  const liveBox = document.getElementById("live");
+  const liveDevice = document.getElementById("live-device");
+  let liveFrame = null, liveReturn = null;
+  const liveOpen = () => !liveBox.hidden;
+  // a realistic screen for the width: desktop, tablet or phone
+  const viewportHeight = (w) => (w >= 1024 ? 900 : w > 500 ? 1024 : 844);
+  function sizeLive() {
+    if (!liveFrame) return;
+    const w = liveFrame.width, h = viewportHeight(w);
+    const s = Math.min(1, (innerWidth - 32) / w, (innerHeight - 32 - 50) / h);
+    liveDevice.style.width = Math.round(w * s) + "px";
+    liveDevice.style.height = Math.round(h * s) + "px";
+    const iframe = liveDevice.querySelector("iframe");
+    iframe.style.width = w + "px";
+    iframe.style.height = h + "px";
+    iframe.style.transform = s < 1 ? "scale(" + s + ")" : "";
+    document.getElementById("live-size").textContent = w + " \xD7 " + h + (s < 1 ? " \xB7 " + Math.round(s * 100) + "%" : "");
+  }
+  function openLive(f) {
+    liveFrame = f;
+    liveReturn = document.activeElement;
+    liveDevice.textContent = "";
+    // its own origin: scripts run there, never on the review site
+    const iframe = document.createElement("iframe");
+    iframe.title = "Live site: " + f.name;
+    iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox");
+    iframe.setAttribute("referrerpolicy", "no-referrer");
+    iframe.src = manifest.live.url;
+    liveDevice.appendChild(iframe);
+    document.getElementById("live-name").textContent = f.name;
+    document.getElementById("live-tab").href = manifest.live.url;
+    liveBox.hidden = false;
+    sizeLive();
+    document.getElementById("live-close").focus();
+  }
+  function closeLive() {
+    liveBox.hidden = true;
+    liveDevice.textContent = "";
+    liveFrame = null;
+    if (liveReturn && liveReturn.focus) liveReturn.focus();
+  }
+  document.getElementById("live-close").onclick = closeLive;
+  // a click on the backdrop closes it too
+  liveBox.addEventListener("click", (e) => { if (e.target === liveBox) closeLive(); });
+  addEventListener("resize", sizeLive);
+
   // ---------- comments (on a review site: the manifest says so) ----------
   var canComment = !!manifest.comments;
   var commenting = false;

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   viewerHtml
-} from "./chunk-M7B3W7EP.js";
+} from "./chunk-DV76O5SZ.js";
 import {
   DEVICES,
   EditError,
@@ -48,13 +48,13 @@ import {
 // src/cli/index.ts
 import { spawn as spawn3 } from "child_process";
 import fs13 from "fs";
-import path14 from "path";
+import path15 from "path";
 import { parseArgs } from "util";
 
 // src/server/http.ts
 import http from "http";
 import fs6 from "fs";
-import path7 from "path";
+import path8 from "path";
 import { randomUUID } from "crypto";
 import { fileURLToPath } from "url";
 import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
@@ -62,6 +62,7 @@ import { isInitializeRequest } from "@modelcontextprotocol/sdk/types.js";
 import launchEditor from "launch-editor";
 
 // src/server/mcp.ts
+import path3 from "path";
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { z } from "zod";
 
@@ -283,6 +284,15 @@ async function connectReviewSite(url, token) {
 }
 var MAX_FILE = 4.4 * 1024 * 1024;
 async function publishSnapshot(site, dir, manifest, opts = {}) {
+  if (opts.live) {
+    const { features = [] } = await request(site, "GET", "/api/shares");
+    const needed = "url" in opts.live ? "live-url" : "live-files";
+    if (!features.includes(needed))
+      throw new Error(
+        "url" in opts.live ? "This review site doesn't support live sites yet. Update it (packages/review-worker) to share a live URL." : "This review site doesn't host live sites. Deploy packages/review-worker with LIVE_HOST_SUFFIX set, or pass the URL where the site runs instead."
+      );
+    if ("dir" in opts.live && !fs2.statSync(opts.live.dir, { throwIfNoEntry: false })?.isDirectory()) throw new Error(`No build folder at ${opts.live.dir}`);
+  }
   const share = await request(site, "POST", "/api/shares", { project: manifest.project, canvas: manifest.canvas, title: opts.title ?? manifest.canvas });
   const base = `/api/shares/${share.slug}`;
   const known = new Set((await request(site, "GET", `${base}/assets`)).assets);
@@ -305,10 +315,28 @@ async function publishSnapshot(site, dir, manifest, opts = {}) {
   };
   await Promise.all(Array.from({ length: 4 }, worker));
   if (skipped.some((s) => s.endsWith(".html"))) throw new Error(`A frame is too large to upload (over 4.4 MB): ${skipped.filter((s) => s.endsWith(".html")).join(", ")}`);
+  if (opts.live && "dir" in opts.live) {
+    const liveDir = opts.live.dir;
+    const liveFiles = walk(liveDir);
+    const pending = [...liveFiles];
+    const liveWorker = async () => {
+      for (let rel = pending.shift(); rel; rel = pending.shift()) {
+        const body = fs2.readFileSync(path2.join(liveDir, rel));
+        if (body.length > MAX_FILE) {
+          skipped.push(`live/${rel}`);
+          continue;
+        }
+        await request(site, "PUT", `${base}/live/files?version=${manifest.id}`, body, { "x-path": rel, "content-type": contentType(rel) });
+        uploaded++;
+      }
+    };
+    await Promise.all(Array.from({ length: 6 }, liveWorker));
+  }
   const change = { ...opts.password !== void 0 ? { password: opts.password } : {}, ...opts.title ? { title: opts.title } : {} };
   if (Object.keys(change).length) await request(site, "PATCH", base, change);
-  const done = await request(site, "POST", `${base}/versions`, { id: manifest.id, createdAt: manifest.createdAt, frames: manifest.frames });
-  return { url: done.url, version: manifest.id, versions: done.versions, uploaded, skipped, password: opts.password === void 0 ? share.password : !!opts.password };
+  const live = opts.live ? "url" in opts.live ? { url: opts.live.url } : { files: true } : void 0;
+  const done = await request(site, "POST", `${base}/versions`, { id: manifest.id, createdAt: manifest.createdAt, frames: manifest.frames, live });
+  return { url: done.url, version: manifest.id, versions: done.versions, uploaded, skipped, password: opts.password === void 0 ? share.password : !!opts.password, live: done.live ?? null };
 }
 async function deleteShare(site, project, canvas) {
   const found = await request(site, "GET", `/api/shares?project=${encodeURIComponent(project)}&canvas=${encodeURIComponent(canvas)}`);
@@ -339,12 +367,33 @@ async function request(site, method, route, body, headers = {}) {
   if (!res.ok) throw new Error(`Review site: ${data2.error ?? `${res.status} ${res.statusText}`}`);
   return data2;
 }
+function walk(root, rel = "") {
+  const out = [];
+  for (const entry of fs2.readdirSync(path2.join(root, rel), { withFileTypes: true })) {
+    if (entry.name.startsWith(".")) continue;
+    const child = rel ? `${rel}/${entry.name}` : entry.name;
+    if (entry.isDirectory()) out.push(...walk(root, child));
+    else if (entry.isFile()) out.push(child);
+  }
+  return out;
+}
 function contentType(file) {
   const ext = path2.extname(file).slice(1).toLowerCase();
   const types = {
     html: "text/html; charset=utf-8",
+    css: "text/css; charset=utf-8",
+    js: "text/javascript; charset=utf-8",
+    mjs: "text/javascript; charset=utf-8",
+    json: "application/json",
+    map: "application/json",
+    txt: "text/plain; charset=utf-8",
+    xml: "application/xml",
+    webmanifest: "application/manifest+json",
+    wasm: "application/wasm",
+    pdf: "application/pdf",
     png: "image/png",
     jpg: "image/jpeg",
+    jpeg: "image/jpeg",
     webp: "image/webp",
     avif: "image/avif",
     gif: "image/gif",
@@ -985,10 +1034,11 @@ ${msgs}`;
       inputSchema: {
         ...canvasArg,
         frames: z.array(z.string()).optional().describe("Frame names to share; omit for all."),
-        title: z.string().optional().describe('Title the client sees, e.g. "Homepage, round 2".')
+        title: z.string().optional().describe('Title the client sees, e.g. "Homepage, round 2".'),
+        live: z.string().optional().describe('A live version clients open with "View live": the https URL where the app runs, or a static build folder (Next `out/`, Vite `dist/`, relative to the project) that the review site hosts.')
       }
     },
-    async ({ canvas, frames, title }) => {
+    async ({ canvas, frames, title, live }) => {
       try {
         const c2 = resolveCanvas(canvas);
         presence(c2, "looking", "Preparing a share link");
@@ -1000,8 +1050,16 @@ ${msgs}`;
         ].filter(Boolean);
         const site = reviewSite();
         if (!site) return text([`\u2713 Snapshot ready (${manifest.frames.length} frames). No review site is set up, so this is a local preview: ${preview}`, "To get client links, the user runs `npx truecanvas share setup`.", ...notes].join("\n"));
-        const published = await publishSnapshot(site, dir, manifest, { title });
-        return text([`\u2713 Shared ${manifest.frames.length} frame(s): ${published.url}`, `Version ${published.versions} of this link${published.password ? ", password protected" : ""}.`, ...notes].join("\n"));
+        const liveSite = live ? /^https?:\/\//.test(live) ? { url: live } : { dir: path3.resolve(ws.config.root, live) } : void 0;
+        const published = await publishSnapshot(site, dir, manifest, { title, live: liveSite });
+        return text(
+          [
+            `\u2713 Shared ${manifest.frames.length} frame(s): ${published.url}`,
+            `Version ${published.versions} of this link${published.password ? ", password protected" : ""}.`,
+            published.live ? `Live version: ${published.live}` : "",
+            ...notes
+          ].filter(Boolean).join("\n")
+        );
       } catch (e) {
         return fail(e);
       }
@@ -1179,12 +1237,12 @@ ${out.out.slice(-1500)}`));
 // src/server/thumbnails.ts
 import crypto2 from "crypto";
 import fs3 from "fs";
-import path3 from "path";
+import path4 from "path";
 var Thumbnails = class _Thumbnails {
   constructor(ws, shots) {
     this.ws = ws;
     this.shots = shots;
-    this.dir = path3.join(ws.config.root, "node_modules", ".cache", "truecanvas", "thumbs");
+    this.dir = path4.join(ws.config.root, "node_modules", ".cache", "truecanvas", "thumbs");
   }
   ws;
   shots;
@@ -1210,7 +1268,7 @@ var Thumbnails = class _Thumbnails {
   key(spec, props) {
     let stamp = "";
     try {
-      const file = spec.library ? path3.join(this.ws.config.root, "node_modules", spec.library, "package.json") : path3.join(this.ws.config.root, spec.file);
+      const file = spec.library ? path4.join(this.ws.config.root, "node_modules", spec.library, "package.json") : path4.join(this.ws.config.root, spec.file);
       stamp = String(fs3.statSync(file).mtimeMs);
     } catch {
       stamp = "0";
@@ -1222,7 +1280,7 @@ var Thumbnails = class _Thumbnails {
     const spec = this.ws.catalog.get(name);
     if (!spec) throw new Error(`Unknown component ${name}`);
     const props = _Thumbnails.previewProps(spec, preset);
-    const file = path3.join(this.dir, `${name}-${this.key(spec, props)}.png`);
+    const file = path4.join(this.dir, `${name}-${this.key(spec, props)}.png`);
     if (fs3.existsSync(file)) return fs3.readFileSync(file);
     const job = this.queue.then(async () => {
       if (fs3.existsSync(file)) return fs3.readFileSync(file);
@@ -1240,10 +1298,10 @@ var Thumbnails = class _Thumbnails {
 // src/server/screenshot.ts
 import fs4 from "fs";
 import os2 from "os";
-import path4 from "path";
+import path5 from "path";
 function findChromium() {
   if (process.env.TRUECANVAS_CHROME) return process.env.TRUECANVAS_CHROME;
-  const cache2 = process.env.PLAYWRIGHT_BROWSERS_PATH || (process.platform === "win32" ? path4.join(process.env.LOCALAPPDATA ?? path4.join(os2.homedir(), "AppData", "Local"), "ms-playwright") : process.platform === "darwin" ? path4.join(os2.homedir(), "Library", "Caches", "ms-playwright") : path4.join(os2.homedir(), ".cache", "ms-playwright"));
+  const cache2 = process.env.PLAYWRIGHT_BROWSERS_PATH || (process.platform === "win32" ? path5.join(process.env.LOCALAPPDATA ?? path5.join(os2.homedir(), "AppData", "Local"), "ms-playwright") : process.platform === "darwin" ? path5.join(os2.homedir(), "Library", "Caches", "ms-playwright") : path5.join(os2.homedir(), ".cache", "ms-playwright"));
   if (fs4.existsSync(cache2)) {
     const shells = fs4.readdirSync(cache2).filter((d) => d.startsWith("chromium_headless_shell-")).sort().reverse();
     for (const d of shells) {
@@ -1255,14 +1313,14 @@ function findChromium() {
         "chrome-headless-shell-win64/chrome-headless-shell.exe",
         "chrome-win/headless_shell.exe"
       ]) {
-        const p = path4.join(cache2, d, sub);
+        const p = path5.join(cache2, d, sub);
         if (fs4.existsSync(p)) return p;
       }
     }
   }
   const programFiles = [process.env.PROGRAMFILES, process.env["PROGRAMFILES(X86)"], process.env.LOCALAPPDATA].filter(Boolean);
   for (const p of [
-    ...programFiles.flatMap((dir) => [path4.join(dir, "Google", "Chrome", "Application", "chrome.exe"), path4.join(dir, "Microsoft", "Edge", "Application", "msedge.exe")]),
+    ...programFiles.flatMap((dir) => [path5.join(dir, "Google", "Chrome", "Application", "chrome.exe"), path5.join(dir, "Microsoft", "Edge", "Application", "msedge.exe")]),
     "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
     "/usr/bin/chromium-browser",
     "/usr/bin/chromium",
@@ -1487,7 +1545,7 @@ ${root.outerHTML}`, css, canvases, height };
 
 // src/server/review.ts
 import fs5 from "fs";
-import path5 from "path";
+import path6 from "path";
 import { createHash } from "crypto";
 var actorName = (e) => e.actor.kind === "agent" ? e.actor.name : e.actor.kind === "file" ? "code editor" : "you";
 async function versionAt(ws, canvas, ref) {
@@ -1504,7 +1562,7 @@ async function versionAt(ws, canvas, ref) {
 }
 var readNow = (ws, file) => {
   try {
-    return fs5.readFileSync(path5.join(ws.config.root, file), "utf8");
+    return fs5.readFileSync(path6.join(ws.config.root, file), "utf8");
   } catch {
     return null;
   }
@@ -1650,7 +1708,7 @@ async function readJson(req, limit = 8 * 1024 * 1024) {
 }
 
 // src/share/sync.ts
-import path6 from "path";
+import path7 from "path";
 var EVERY = 2e4;
 var LOOKUP_EVERY = 5 * 6e4;
 var CommentSync = class {
@@ -1700,7 +1758,7 @@ var CommentSync = class {
   async slugOf(site, canvas) {
     const known = this.links.get(canvas);
     if (known && (known.slug || Date.now() - known.at < LOOKUP_EVERY)) return known.slug;
-    const project = path6.basename(this.ws.config.root);
+    const project = path7.basename(this.ws.config.root);
     const res = await call(site, "GET", `/api/shares?project=${encodeURIComponent(project)}&canvas=${encodeURIComponent(canvas)}`);
     this.links.set(canvas, { slug: res.slug, at: Date.now() });
     return res.slug;
@@ -1885,7 +1943,7 @@ async function startServer(ws) {
           appUrl: config.appUrl,
           framework: config.framework,
           root: config.root,
-          projectName: path7.basename(config.root),
+          projectName: path8.basename(config.root),
           canvases: ws.canvases(),
           darkMode: config.darkMode,
           agents: [...ws.agents.values()],
@@ -2035,7 +2093,7 @@ async function startServer(ws) {
           for (const file of [f.page, ...layoutFiles(config, f.page)]) {
             const old = await ws.git.show(ref, file);
             if (old === null) continue;
-            const now = fs6.existsSync(path7.join(config.root, file)) ? fs6.readFileSync(path7.join(config.root, file), "utf8") : null;
+            const now = fs6.existsSync(path8.join(config.root, file)) ? fs6.readFileSync(path8.join(config.root, file), "utf8") : null;
             if (old !== now) {
               files[file] = old;
               touched.add(f.frameName);
@@ -2165,9 +2223,9 @@ async function startServer(ws) {
       }
       case "POST /api/open-file": {
         const { file } = await readJson(req);
-        const abs = path7.resolve(config.root, file);
-        const rel = path7.relative(config.root, abs);
-        if (rel.startsWith("..") || path7.isAbsolute(rel)) return json(res, 400, { error: "Outside project." });
+        const abs = path8.resolve(config.root, file);
+        const rel = path8.relative(config.root, abs);
+        if (rel.startsWith("..") || path8.isAbsolute(rel)) return json(res, 400, { error: "Outside project." });
         launchEditor(abs, config.editor);
         return json(res, 200, { ok: true });
       }
@@ -2176,12 +2234,12 @@ async function startServer(ws) {
         return json(res, 200, { site: site ? site.url : null });
       }
       case "POST /api/share/snapshot": {
-        const { canvas, frames, local, title, password } = await readJson(req);
+        const { canvas, frames, local, title, password, live } = await readJson(req);
         assertCanvasName(canvas);
         const { dir, manifest } = await createSnapshot(ws, shots, canvas, { frames });
         const preview = `${origin}/share/${encodeURIComponent(canvas)}/${manifest.id}/`;
         const site = local ? null : reviewSite();
-        const published = site ? await publishSnapshot(site, dir, manifest, { title, password }) : null;
+        const published = site ? await publishSnapshot(site, dir, manifest, { title, password, live }) : null;
         if (published) commentSync.forget(canvas);
         return json(res, 200, { manifest, preview, published });
       }
@@ -2195,23 +2253,23 @@ async function startServer(ws) {
     return json(res, 404, { error: `No route ${route}` });
   }
   function serveStatic(res, pathname) {
-    let file = path7.join(editorDir, pathname === "/" ? "index.html" : pathname);
-    if (!inside(editorDir, file) || !fs6.existsSync(file) || fs6.statSync(file).isDirectory()) file = path7.join(editorDir, "index.html");
+    let file = path8.join(editorDir, pathname === "/" ? "index.html" : pathname);
+    if (!inside(editorDir, file) || !fs6.existsSync(file) || fs6.statSync(file).isDirectory()) file = path8.join(editorDir, "index.html");
     if (!fs6.existsSync(file)) {
       res.writeHead(500, { "content-type": "text/plain" });
       return res.end("Editor bundle missing. Run `pnpm build` in packages/truecanvas.");
     }
-    const ext = path7.extname(file);
+    const ext = path8.extname(file);
     const immutable = pathname.startsWith("/assets/");
     res.writeHead(200, { "content-type": MIME[ext] ?? "application/octet-stream", "cache-control": immutable ? "public, max-age=31536000, immutable" : "no-cache" });
     fs6.createReadStream(file).on("error", () => res.destroy()).pipe(res);
   }
   function serveShare(res, rest) {
     const root = sharesDir(config.root);
-    let file = path7.join(root, decodeURIComponent(rest));
-    if (rest.endsWith("/")) file = path7.join(file, "index.html");
+    let file = path8.join(root, decodeURIComponent(rest));
+    if (rest.endsWith("/")) file = path8.join(file, "index.html");
     if (!inside(root, file) || !fs6.existsSync(file) || fs6.statSync(file).isDirectory()) return json(res, 404, { error: "Not found" });
-    res.writeHead(200, { "content-type": MIME[path7.extname(file)] ?? "application/octet-stream", "cache-control": "no-cache", "x-content-type-options": "nosniff", "access-control-allow-origin": "*" });
+    res.writeHead(200, { "content-type": MIME[path8.extname(file)] ?? "application/octet-stream", "cache-control": "no-cache", "x-content-type-options": "nosniff", "access-control-allow-origin": "*" });
     fs6.createReadStream(file).on("error", () => res.destroy()).pipe(res);
   }
   const server = http.createServer(async (req, res) => {
@@ -2232,7 +2290,7 @@ async function startServer(ws) {
       else res.end();
     }
   });
-  const canvasDir = path7.join(config.root, config.canvasDir);
+  const canvasDir = path8.join(config.root, config.canvasDir);
   fs6.mkdirSync(canvasDir, { recursive: true });
   const pending = /* @__PURE__ */ new Map();
   const onCanvasFile = (filename) => {
@@ -2276,12 +2334,12 @@ async function startServer(ws) {
   };
   watchCanvasDir();
   setInterval(watchCanvasDir, 2e3).unref();
-  const appDirAbs = path7.join(config.root, config.appDir);
+  const appDirAbs = path8.join(config.root, config.appDir);
   if (config.framework === "next" && fs6.existsSync(appDirAbs)) {
     const appPending = /* @__PURE__ */ new Map();
     const appWatcher = fs6.watch(appDirAbs, { recursive: true }, (_event, filename) => {
       if (!filename || !/(^|[\\/])(page|layout)\.[jt]sx$/.test(filename) || /^truecanvas[\\/]/.test(filename)) return;
-      const rel = path7.join(config.appDir, filename).split(path7.sep).join("/");
+      const rel = path8.join(config.appDir, filename).split(path8.sep).join("/");
       clearTimeout(appPending.get(rel));
       appPending.set(
         rel,
@@ -2298,7 +2356,7 @@ async function startServer(ws) {
   }
   let catalogTimer;
   for (const dir of componentRoots(config.components)) {
-    const abs = path7.join(config.root, dir);
+    const abs = path8.join(config.root, dir);
     if (!fs6.existsSync(abs)) continue;
     const componentWatcher = fs6.watch(abs, { recursive: true }, () => {
       clearTimeout(catalogTimer);
@@ -2335,8 +2393,8 @@ function dedent(code, col) {
   return code.split("\n").map((l, i) => i > 0 && l.startsWith(pad) ? l.slice(col) : l).join("\n");
 }
 function inside(dir, file) {
-  const rel = path7.relative(dir, file);
-  return !!rel && !rel.startsWith("..") && !path7.isAbsolute(rel);
+  const rel = path8.relative(dir, file);
+  return !!rel && !rel.startsWith("..") && !path8.isAbsolute(rel);
 }
 
 // src/server/stdio.ts
@@ -2381,7 +2439,7 @@ import { createRequire } from "module";
 import http2 from "http";
 import fs10 from "fs";
 import os6 from "os";
-import path11 from "path";
+import path12 from "path";
 import { randomUUID as randomUUID2 } from "crypto";
 import { fileURLToPath as fileURLToPath2 } from "url";
 import { Server as Server2 } from "@modelcontextprotocol/sdk/server/index.js";
@@ -2393,9 +2451,9 @@ import { CallToolRequestSchema as CallToolRequestSchema2, ListToolsRequestSchema
 // src/hub/projects.ts
 import fs7 from "fs";
 import os3 from "os";
-import path8 from "path";
-var CONFIG_DIR = path8.join(process.env.XDG_CONFIG_HOME ?? path8.join(os3.homedir(), ".config"), "truecanvas");
-var FILE = path8.join(CONFIG_DIR, "projects.json");
+import path9 from "path";
+var CONFIG_DIR = path9.join(process.env.XDG_CONFIG_HOME ?? path9.join(os3.homedir(), ".config"), "truecanvas");
+var FILE = path9.join(CONFIG_DIR, "projects.json");
 var ProjectStore = class {
   list = [];
   constructor() {
@@ -2413,20 +2471,20 @@ var ProjectStore = class {
     return [...this.list].sort((a, b) => b.lastOpened - a.lastOpened).map((p) => ({ ...p, ...inspect(p.path) }));
   }
   touch(dir) {
-    const abs = path8.resolve(dir);
+    const abs = path9.resolve(dir);
     const existing = this.list.find((p) => p.path === abs);
     if (existing) existing.lastOpened = Date.now();
     else this.list.push({ path: abs, name: projectName(abs), lastOpened: Date.now() });
     this.save();
   }
   forget(dir) {
-    this.list = this.list.filter((p) => p.path !== path8.resolve(dir));
+    this.list = this.list.filter((p) => p.path !== path9.resolve(dir));
     this.save();
   }
 };
 function readPkg(dir) {
   try {
-    return JSON.parse(fs7.readFileSync(path8.join(dir, "package.json"), "utf8"));
+    return JSON.parse(fs7.readFileSync(path9.join(dir, "package.json"), "utf8"));
   } catch {
     return null;
   }
@@ -2434,7 +2492,7 @@ function readPkg(dir) {
 function projectName(dir) {
   const pkg = readPkg(dir);
   const name = typeof pkg?.name === "string" ? pkg.name : "";
-  return name && !name.startsWith("@") ? name : path8.basename(dir);
+  return name && !name.startsWith("@") ? name : path9.basename(dir);
 }
 function inspect(dir) {
   const pkg = readPkg(dir);
@@ -2443,7 +2501,7 @@ function inspect(dir) {
   let canvases = 0;
   for (const d of ["canvas", "src/canvas"]) {
     try {
-      canvases += fs7.readdirSync(path8.join(dir, d)).filter((f) => f.endsWith(".canvas.tsx")).length;
+      canvases += fs7.readdirSync(path9.join(dir, d)).filter((f) => f.endsWith(".canvas.tsx")).length;
     } catch {
     }
   }
@@ -2451,10 +2509,10 @@ function inspect(dir) {
 }
 function discover() {
   const home = os3.homedir();
-  const roots = ["Github", "GitHub", "github", "Projects", "projects", "code", "Code", "dev", "src", "Developer", "Documents", "work"].map((d) => path8.join(home, d)).filter((d) => fs7.existsSync(d));
+  const roots = ["Github", "GitHub", "github", "Projects", "projects", "code", "Code", "dev", "src", "Developer", "Documents", "work"].map((d) => path9.join(home, d)).filter((d) => fs7.existsSync(d));
   const found = [];
   let visited = 0;
-  const walk = (dir, depth) => {
+  const walk2 = (dir, depth) => {
     if (depth > 3 || visited > 3e3 || found.length > 60) return;
     visited++;
     let entries;
@@ -2469,15 +2527,15 @@ function discover() {
     }
     for (const e of entries) {
       if (!e.isDirectory() || e.name.startsWith(".") || e.name === "node_modules" || e.name === "dist" || e.name === "build") continue;
-      walk(path8.join(dir, e.name), depth + 1);
+      walk2(path9.join(dir, e.name), depth + 1);
     }
   };
-  for (const r of roots) walk(r, 0);
+  for (const r of roots) walk2(r, 0);
   return found;
 }
 function listDirs(dir) {
-  const abs = path8.resolve(dir.replace(/^~(?=$|[\\/])/, os3.homedir()));
-  const dirs = fs7.readdirSync(abs, { withFileTypes: true }).filter((e) => e.isDirectory() && !e.name.startsWith(".") && e.name !== "node_modules").map((e) => ({ name: e.name, next: inspect(path8.join(abs, e.name)).next })).sort((a, b) => Number(b.next) - Number(a.next) || a.name.localeCompare(b.name));
+  const abs = path9.resolve(dir.replace(/^~(?=$|[\\/])/, os3.homedir()));
+  const dirs = fs7.readdirSync(abs, { withFileTypes: true }).filter((e) => e.isDirectory() && !e.name.startsWith(".") && e.name !== "node_modules").map((e) => ({ name: e.name, next: inspect(path9.join(abs, e.name)).next })).sort((a, b) => Number(b.next) - Number(a.next) || a.name.localeCompare(b.name));
   return { path: abs, dirs };
 }
 
@@ -2486,14 +2544,14 @@ import { execFile, spawn as spawn2 } from "child_process";
 import fs9 from "fs";
 import net from "net";
 import os5 from "os";
-import path10 from "path";
+import path11 from "path";
 
 // src/cli/setup.ts
 import { spawn } from "child_process";
 import { createHash as createHash2 } from "crypto";
 import fs8 from "fs";
 import os4 from "os";
-import path9 from "path";
+import path10 from "path";
 function addDevArgs(pm, spec) {
   return addArgs(pm, [spec], true);
 }
@@ -2507,52 +2565,52 @@ var execInherit = (cmd, args, cwd) => new Promise((resolve, reject) => {
   p.on("exit", (code) => code === 0 ? resolve() : reject(new Error(`${cmd} ${args.join(" ")} exited with ${code}`)));
 });
 function packageDir(cliFile) {
-  return path9.resolve(path9.dirname(cliFile), "..");
+  return path10.resolve(path10.dirname(cliFile), "..");
 }
 function packageVersion(pkgDir) {
   try {
-    return JSON.parse(fs8.readFileSync(path9.join(pkgDir, "package.json"), "utf8")).version;
+    return JSON.parse(fs8.readFileSync(path10.join(pkgDir, "package.json"), "utf8")).version;
   } catch {
     return "0.0.0";
   }
 }
 function isSourceCheckout(pkgDir) {
-  return !pkgDir.split(path9.sep).includes("node_modules") && fs8.existsSync(path9.join(pkgDir, "src", "cli"));
+  return !pkgDir.split(path10.sep).includes("node_modules") && fs8.existsSync(path10.join(pkgDir, "src", "cli"));
 }
 async function packageSpec(pkgDir, exec) {
   if (process.env.TRUECANVAS_PACKAGE) return process.env.TRUECANVAS_PACKAGE;
   const version = packageVersion(pkgDir);
   if (!isSourceCheckout(pkgDir)) return `truecanvas@${version}`;
-  const cacheDir = path9.join(os4.homedir(), ".cache", "truecanvas");
+  const cacheDir = path10.join(os4.homedir(), ".cache", "truecanvas");
   fs8.mkdirSync(cacheDir, { recursive: true });
-  const file = path9.join(cacheDir, `truecanvas-${version}.tgz`);
+  const file = path10.join(cacheDir, `truecanvas-${version}.tgz`);
   await exec("npm", ["pack", "--silent", "--pack-destination", cacheDir], pkgDir);
   const hash = createHash2("sha256").update(fs8.readFileSync(file)).digest("hex").slice(0, 10);
-  const named = path9.join(cacheDir, `truecanvas-${version}-${hash}.tgz`);
+  const named = path10.join(cacheDir, `truecanvas-${version}-${hash}.tgz`);
   fs8.renameSync(file, named);
   return named;
 }
 function installedIn(root) {
   let declared = false;
   try {
-    const pkg = JSON.parse(fs8.readFileSync(path9.join(root, "package.json"), "utf8"));
+    const pkg = JSON.parse(fs8.readFileSync(path10.join(root, "package.json"), "utf8"));
     declared = "truecanvas" in { ...pkg.dependencies, ...pkg.devDependencies };
   } catch {
   }
-  const file = path9.join(root, "node_modules", "truecanvas", "package.json");
+  const file = path10.join(root, "node_modules", "truecanvas", "package.json");
   const installed = fs8.existsSync(file);
-  return { declared, installed, version: installed ? packageVersion(path9.dirname(file)) : null };
+  return { declared, installed, version: installed ? packageVersion(path10.dirname(file)) : null };
 }
 function readPackage(root) {
   try {
-    return JSON.parse(fs8.readFileSync(path9.join(root, "package.json"), "utf8"));
+    return JSON.parse(fs8.readFileSync(path10.join(root, "package.json"), "utf8"));
   } catch {
     return null;
   }
 }
 function depVersion(root, name) {
-  const file = path9.join(root, "node_modules", name, "package.json");
-  if (fs8.existsSync(file)) return packageVersion(path9.dirname(file));
+  const file = path10.join(root, "node_modules", name, "package.json");
+  if (fs8.existsSync(file)) return packageVersion(path10.dirname(file));
   const pkg = readPackage(root);
   return pkg ? { ...pkg.dependencies, ...pkg.devDependencies }[name] ?? null : null;
 }
@@ -2568,7 +2626,7 @@ function mergeJson(file, update) {
   const before = JSON.stringify(data2);
   update(data2);
   if (JSON.stringify(data2) === before) return "unchanged";
-  fs8.mkdirSync(path9.dirname(file), { recursive: true });
+  fs8.mkdirSync(path10.dirname(file), { recursive: true });
   fs8.writeFileSync(file, `${JSON.stringify(data2, null, 2)}
 `);
   return "written";
@@ -2576,16 +2634,16 @@ function mergeJson(file, update) {
 function connectAgents(root, port, opts = {}) {
   const url = `http://localhost:${port}/mcp`;
   const out = { written: [], unchanged: [] };
-  const add = (rel, update) => out[mergeJson(path9.join(root, rel), update)].push(rel);
+  const add = (rel, update) => out[mergeJson(path10.join(root, rel), update)].push(rel);
   const servers = (d, key) => d[key] ??= {};
   add(".mcp.json", (d) => void (servers(d, "mcpServers").truecanvas = { type: "http", url }));
-  if (opts.cursor || fs8.existsSync(path9.join(root, ".cursor"))) add(".cursor/mcp.json", (d) => void (servers(d, "mcpServers").truecanvas = { url }));
-  if (opts.vscode || fs8.existsSync(path9.join(root, ".vscode"))) add(".vscode/mcp.json", (d) => void (servers(d, "servers").truecanvas = { type: "http", url }));
+  if (opts.cursor || fs8.existsSync(path10.join(root, ".cursor"))) add(".cursor/mcp.json", (d) => void (servers(d, "mcpServers").truecanvas = { url }));
+  if (opts.vscode || fs8.existsSync(path10.join(root, ".vscode"))) add(".vscode/mcp.json", (d) => void (servers(d, "servers").truecanvas = { type: "http", url }));
   return out;
 }
 function hasAgentConfig(root, port) {
   try {
-    const d = JSON.parse(fs8.readFileSync(path9.join(root, ".mcp.json"), "utf8"));
+    const d = JSON.parse(fs8.readFileSync(path10.join(root, ".mcp.json"), "utf8"));
     const url = d?.mcpServers?.truecanvas?.url;
     return typeof url === "string" && (port === void 0 || url.includes(`:${port}/`));
   } catch {
@@ -2638,7 +2696,7 @@ var Runner = class {
     return next;
   }
   async start(dir) {
-    if (!fs9.existsSync(path10.join(dir, "package.json"))) throw new Error(`${dir} isn't there anymore (or has no package.json).`);
+    if (!fs9.existsSync(path11.join(dir, "package.json"))) throw new Error(`${dir} isn't there anymore (or has no package.json).`);
     const [editorPort, appPort] = await this.allocatePorts();
     const proc = spawn2(process.execPath, [this.cli, "dev", "--no-open", "--port", String(editorPort), "--app", `http://localhost:${appPort}`], {
       cwd: dir,
@@ -2750,7 +2808,7 @@ async function install(job, cmd, args, cwd) {
     await run2(job, cmd, args, cwd);
   } catch (err) {
     const ignoredBuilds = job.log.some((l) => l.includes("ERR_PNPM_IGNORED_BUILDS"));
-    const installed = fs9.existsSync(path10.join(cwd, "node_modules", "truecanvas", "package.json"));
+    const installed = fs9.existsSync(path11.join(cwd, "node_modules", "truecanvas", "package.json"));
     if (!(ignoredBuilds && installed)) throw err;
     job.log.push("(pnpm only complained about other packages' build scripts; Truecanvas is installed, continuing)");
   }
@@ -2791,7 +2849,7 @@ async function preferredPm() {
   return ok ? "pnpm" : "npm";
 }
 function setupJob(dir, pkgDir, cli) {
-  return startJob(`Set up ${path10.basename(dir)}`, async (job) => {
+  return startJob(`Set up ${path11.basename(dir)}`, async (job) => {
     const pm = packageManager(dir);
     const source = await packageSpec(pkgDir, (cmd, args, cwd) => run2(job, cmd, args, cwd));
     await install(job, pm.cmd, [...pm.add, source], dir);
@@ -2801,8 +2859,8 @@ function setupJob(dir, pkgDir, cli) {
 }
 function createJob(name, parent, pkgDir, cli) {
   const safe = name.trim().toLowerCase().replace(/[^a-z0-9-_]+/g, "-").replace(/^-+|-+$/g, "");
-  const parentDir = path10.resolve(parent.replace(/^~(?=$|[\\/])/, os5.homedir()));
-  const dir = path10.join(parentDir, safe);
+  const parentDir = path11.resolve(parent.replace(/^~(?=$|[\\/])/, os5.homedir()));
+  const dir = path11.join(parentDir, safe);
   return startJob(`Create ${safe}`, async (job) => {
     if (!safe) throw new Error("Pick a project name.");
     if (fs9.existsSync(dir)) throw new Error(`${dir} already exists.`);
@@ -2827,9 +2885,9 @@ function capture(cmd, args, cwd) {
   });
 }
 function cloneJob(repo, parent, pkgDir, cli) {
-  const parentDir = path10.resolve(parent.replace(/^~(?=$|[\\/])/, os5.homedir()));
+  const parentDir = path11.resolve(parent.replace(/^~(?=$|[\\/])/, os5.homedir()));
   const name = repo.replace(/\.git$/, "").split(/[/:]/).pop() ?? "";
-  const dir = path10.join(parentDir, name);
+  const dir = path11.join(parentDir, name);
   return startJob(`Clone ${name}`, async (job) => {
     if (!name || !/^[\w.-]+$/.test(name)) throw new Error("Pick a repository (owner/name or a git URL).");
     if (fs9.existsSync(dir)) throw new Error(`${dir} already exists. Open it with Open folder instead.`);
@@ -2837,12 +2895,12 @@ function cloneJob(repo, parent, pkgDir, cli) {
     const url = /^(https?:|git@|ssh:|file:)/.test(repo);
     if (url) await run2(job, "git", ["clone", repo, dir], parentDir);
     else await run2(job, "gh", ["repo", "clone", repo, dir], parentDir);
-    if (!fs9.existsSync(path10.join(dir, "package.json"))) throw new Error("Cloned, but there's no package.json at the root: Truecanvas needs a Next.js or Vite app.");
+    if (!fs9.existsSync(path11.join(dir, "package.json"))) throw new Error("Cloned, but there's no package.json at the root: Truecanvas needs a Next.js or Vite app.");
     const pm = packageManager(dir);
     await install(job, pm.cmd, ["install"], dir).catch(async (err) => {
-      if (!fs9.existsSync(path10.join(dir, "node_modules"))) throw err;
+      if (!fs9.existsSync(path11.join(dir, "node_modules"))) throw err;
     });
-    const pkg = JSON.parse(fs9.readFileSync(path10.join(dir, "package.json"), "utf8"));
+    const pkg = JSON.parse(fs9.readFileSync(path11.join(dir, "package.json"), "utf8"));
     if (!("truecanvas" in { ...pkg.dependencies, ...pkg.devDependencies })) {
       const source = await packageSpec(pkgDir, (cmd, args, cwd) => run2(job, cmd, args, cwd));
       await install(job, pm.cmd, [...pm.add, source], dir);
@@ -2867,7 +2925,7 @@ Use list_projects to see them. All other tools are the regular Truecanvas canvas
 async function startHub(opts) {
   const store = new ProjectStore();
   const editorDir = fileURLToPath2(new URL("./editor/", import.meta.url));
-  const pkgDir = path11.resolve(path11.dirname(opts.cli), "..");
+  const pkgDir = path12.resolve(path12.dirname(opts.cli), "..");
   const origin = `http://localhost:${opts.port}`;
   const allowedHosts = /* @__PURE__ */ new Set([`localhost:${opts.port}`, `127.0.0.1:${opts.port}`]);
   const clients = /* @__PURE__ */ new Set();
@@ -2972,7 +3030,7 @@ async function startHub(opts) {
       }
       if (req.params.name === "open_project") {
         const q = String(req.params.arguments?.project ?? "").toLowerCase();
-        const p = store.all().find((x) => x.name.toLowerCase() === q || x.path.toLowerCase() === q || path11.basename(x.path).toLowerCase() === q);
+        const p = store.all().find((x) => x.name.toLowerCase() === q || x.path.toLowerCase() === q || path12.basename(x.path).toLowerCase() === q);
         if (!p) return text(`No project "${q}". Use list_projects.`, true);
         if (!p.ready) return text(`${p.name} isn't set up for Truecanvas yet. Ask the user to click "Set up" on the Dashboard.`, true);
         store.touch(p.path);
@@ -3027,7 +3085,7 @@ async function startHub(opts) {
       case "GET /api/hub/icon": {
         const icon = findIcon(url.searchParams.get("path") ?? "");
         if (!icon) return json2(res, 404, { error: "No icon" });
-        res.writeHead(200, { "content-type": ICON_MIME[path11.extname(icon)] ?? "application/octet-stream", "cache-control": "private, max-age=300" });
+        res.writeHead(200, { "content-type": ICON_MIME[path12.extname(icon)] ?? "application/octet-stream", "cache-control": "private, max-age=300" });
         return fs10.createReadStream(icon).on("error", () => res.destroy()).pipe(res);
       }
       case "GET /api/hub/ls":
@@ -3039,8 +3097,8 @@ async function startHub(opts) {
         req.on("close", () => clients.delete(res));
         return;
       case "POST /api/hub/add": {
-        const dir = path11.resolve(body.path.replace(/^~(?=$|[\\/])/, os6.homedir()));
-        if (!fs10.existsSync(path11.join(dir, "package.json"))) return json2(res, 400, { error: "No package.json in that folder. Pick the root of a Next.js or Vite app." });
+        const dir = path12.resolve(body.path.replace(/^~(?=$|[\\/])/, os6.homedir()));
+        if (!fs10.existsSync(path12.join(dir, "package.json"))) return json2(res, 400, { error: "No package.json in that folder. Pick the root of a Next.js or Vite app." });
         store.touch(dir);
         broadcast();
         return json2(res, 200, { path: dir, ready: store.all().find((p) => p.path === dir)?.ready ?? false });
@@ -3124,13 +3182,13 @@ async function startHub(opts) {
     return json2(res, 404, { error: `No route ${route}` });
   }
   function serveStatic(res, pathname) {
-    let file = path11.join(editorDir, pathname === "/" ? "hub.html" : pathname);
-    if (!inside2(editorDir, file) || !fs10.existsSync(file) || fs10.statSync(file).isDirectory()) file = path11.join(editorDir, "hub.html");
+    let file = path12.join(editorDir, pathname === "/" ? "hub.html" : pathname);
+    if (!inside2(editorDir, file) || !fs10.existsSync(file) || fs10.statSync(file).isDirectory()) file = path12.join(editorDir, "hub.html");
     if (!fs10.existsSync(file)) {
       res.writeHead(500, { "content-type": "text/plain" });
       return res.end("Hub bundle missing. Run `pnpm build`.");
     }
-    res.writeHead(200, { "content-type": MIME2[path11.extname(file)] ?? "application/octet-stream", "cache-control": pathname.startsWith("/assets/") ? "public, max-age=31536000, immutable" : "no-cache" });
+    res.writeHead(200, { "content-type": MIME2[path12.extname(file)] ?? "application/octet-stream", "cache-control": pathname.startsWith("/assets/") ? "public, max-age=31536000, immutable" : "no-cache" });
     fs10.createReadStream(file).on("error", () => res.destroy()).pipe(res);
   }
   const server = http2.createServer(async (req, res) => {
@@ -3163,26 +3221,26 @@ async function startHub(opts) {
 }
 var ICON_MIME = { ".ico": "image/x-icon", ".svg": "image/svg+xml", ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".webp": "image/webp" };
 function findIcon(dir) {
-  if (!dir || !fs10.existsSync(path11.join(dir, "package.json"))) return null;
+  if (!dir || !fs10.existsSync(path12.join(dir, "package.json"))) return null;
   const names = ["icon.svg", "icon.png", "favicon.svg", "favicon.ico", "icon.ico", "apple-icon.png", "favicon.png", "logo.svg", "icon.jpg"];
   const roots = ["app", "src/app", "public", "static", "assets"];
   for (const root of roots) {
     for (const name of names) {
-      const file = path11.join(dir, root, name);
+      const file = path12.join(dir, root, name);
       if (fs10.existsSync(file) && fs10.statSync(file).size < 2e6) return file;
     }
   }
   for (const root of ["app", "src/app"]) {
     let entries = [];
     try {
-      entries = fs10.readdirSync(path11.join(dir, root), { withFileTypes: true });
+      entries = fs10.readdirSync(path12.join(dir, root), { withFileTypes: true });
     } catch {
       continue;
     }
     for (const e of entries) {
       if (!e.isDirectory()) continue;
       for (const name of names.slice(0, 4)) {
-        const file = path11.join(dir, root, e.name, name);
+        const file = path12.join(dir, root, e.name, name);
         if (fs10.existsSync(file)) return file;
       }
     }
@@ -3194,14 +3252,14 @@ function json2(res, status, body) {
   res.end(JSON.stringify(body));
 }
 function inside2(dir, file) {
-  const rel = path11.relative(dir, file);
-  return !!rel && !rel.startsWith("..") && !path11.isAbsolute(rel);
+  const rel = path12.relative(dir, file);
+  return !!rel && !rel.startsWith("..") && !path12.isAbsolute(rel);
 }
 
 // src/hub/desktop.ts
 import fs11 from "fs";
 import os7 from "os";
-import path12 from "path";
+import path13 from "path";
 var ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
   <defs>
     <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ff9466"/><stop offset="1" stop-color="#ea6a3c"/></linearGradient>
@@ -3215,13 +3273,13 @@ var ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
   <path fill="#f6f5f1" fill-rule="evenodd" d="M236 236h552v168H236z M428 316h168v472H428z"/>
 </svg>
 `;
-var data = () => process.env.XDG_DATA_HOME ?? path12.join(os7.homedir(), ".local", "share");
+var data = () => process.env.XDG_DATA_HOME ?? path13.join(os7.homedir(), ".local", "share");
 function installDesktop(cli, port) {
-  const dir = path12.join(data(), "truecanvas");
+  const dir = path13.join(data(), "truecanvas");
   fs11.mkdirSync(dir, { recursive: true });
-  const icon = path12.join(dir, "icon.svg");
+  const icon = path13.join(dir, "icon.svg");
   fs11.writeFileSync(icon, ICON);
-  const launcher = path12.join(dir, "launch.sh");
+  const launcher = path13.join(dir, "launch.sh");
   const url = `http://localhost:${port}`;
   fs11.writeFileSync(
     launcher,
@@ -3232,7 +3290,7 @@ CLI=${JSON.stringify(cli)}
 URL=${JSON.stringify(url)}
 LOG="\${XDG_STATE_HOME:-$HOME/.local/state}/truecanvas-hub.log"
 # apps started from the desktop don't get your shell's PATH: next, pnpm and npx need it
-export PATH=${JSON.stringify([path12.dirname(process.execPath), ...(process.env.PATH ?? "").split(path12.delimiter)].filter((p, i, a) => p && a.indexOf(p) === i).join(path12.delimiter))}
+export PATH=${JSON.stringify([path13.dirname(process.execPath), ...(process.env.PATH ?? "").split(path13.delimiter)].filter((p, i, a) => p && a.indexOf(p) === i).join(path13.delimiter))}
 mkdir -p "$(dirname "$LOG")"
 
 if ! curl -sf "$URL/api/hub/state" >/dev/null 2>&1; then
@@ -3241,7 +3299,7 @@ if ! curl -sf "$URL/api/hub/state" >/dev/null 2>&1; then
   while [ $i -lt 60 ] && ! curl -sf "$URL/api/hub/state" >/dev/null 2>&1; do sleep 0.25; i=$((i+1)); done
 fi
 
-PROFILE=${JSON.stringify(path12.join(dir, "window"))}
+PROFILE=${JSON.stringify(path13.join(dir, "window"))}
 for b in google-chrome google-chrome-stable chromium-browser chromium brave-browser microsoft-edge; do
   if command -v "$b" >/dev/null 2>&1; then
     exec "$b" --app="$URL" --class=Truecanvas --user-data-dir="$PROFILE" --no-first-run --no-default-browser-check
@@ -3251,9 +3309,9 @@ exec xdg-open "$URL"
 `,
     { mode: 493 }
   );
-  const apps = path12.join(data(), "applications");
+  const apps = path13.join(data(), "applications");
   fs11.mkdirSync(apps, { recursive: true });
-  const desktop = path12.join(apps, "truecanvas.desktop");
+  const desktop = path13.join(apps, "truecanvas.desktop");
   fs11.writeFileSync(
     desktop,
     `[Desktop Entry]
@@ -3270,10 +3328,10 @@ StartupWMClass=Truecanvas
 StartupNotify=true
 `
   );
-  let command = path12.join(os7.homedir(), ".local", "bin", "truecanvas");
+  let command = path13.join(os7.homedir(), ".local", "bin", "truecanvas");
   const ours = !fs11.existsSync(command) || fs11.readFileSync(command, "utf8").includes("# truecanvas wrapper");
   if (ours) {
-    fs11.mkdirSync(path12.dirname(command), { recursive: true });
+    fs11.mkdirSync(path13.dirname(command), { recursive: true });
     fs11.writeFileSync(command, `#!/bin/sh
 # truecanvas wrapper (installed by \`truecanvas desktop\`)
 exec ${JSON.stringify(process.execPath)} ${JSON.stringify(cli)} "$@"
@@ -3282,17 +3340,17 @@ exec ${JSON.stringify(process.execPath)} ${JSON.stringify(cli)} "$@"
   return { desktop, launcher, icon, command };
 }
 function launcherPath() {
-  const p = path12.join(data(), "truecanvas", "launch.sh");
+  const p = path13.join(data(), "truecanvas", "launch.sh");
   return fs11.existsSync(p) ? p : null;
 }
 function uninstallDesktop() {
   const removed = [];
-  const cmd = path12.join(os7.homedir(), ".local", "bin", "truecanvas");
+  const cmd = path13.join(os7.homedir(), ".local", "bin", "truecanvas");
   if (fs11.existsSync(cmd) && fs11.readFileSync(cmd, "utf8").includes("# truecanvas wrapper")) {
     fs11.rmSync(cmd);
     removed.push(cmd);
   }
-  for (const f of [path12.join(data(), "applications", "truecanvas.desktop"), path12.join(data(), "truecanvas")]) {
+  for (const f of [path13.join(data(), "applications", "truecanvas.desktop"), path13.join(data(), "truecanvas")]) {
     if (fs11.existsSync(f)) {
       fs11.rmSync(f, { recursive: true, force: true });
       removed.push(f);
@@ -3308,7 +3366,7 @@ import { createInterface } from "readline/promises";
 // src/cli/doctor.ts
 import { execFile as execFile2 } from "child_process";
 import fs12 from "fs";
-import path13 from "path";
+import path14 from "path";
 var major = (v) => v ? Number(/(\d+)(?:\.(\d+))?/.exec(v)?.[1] ?? 0) : 0;
 function has(cmd, args, cwd) {
   return new Promise((resolve) => execFile2(cmd, args, { cwd, timeout: 8e3 }, (err, stdout, stderr) => resolve(err ? null : `${stdout}${stderr}`)));
@@ -3335,7 +3393,7 @@ async function doctor(root, cliVersion) {
   const tw = depVersion(root, "tailwindcss");
   add(tw ? { label: "Tailwind CSS", status: "ok", detail: tw } : { label: "Tailwind CSS", status: "warn", detail: "not installed", fix: "Optional, but the layout and style controls write Tailwind classes" });
   const config = loadConfig(root);
-  if (config.framework === "next") add(fs12.existsSync(path13.join(root, config.appDir)) ? { label: "App Router", status: "ok", detail: config.appDir } : { label: "App Router", status: "fail", detail: `no ${config.appDir}/`, fix: "Truecanvas renders through the App Router (app/ or src/app/)" });
+  if (config.framework === "next") add(fs12.existsSync(path14.join(root, config.appDir)) ? { label: "App Router", status: "ok", detail: config.appDir } : { label: "App Router", status: "fail", detail: `no ${config.appDir}/`, fix: "Truecanvas renders through the App Router (app/ or src/app/)" });
   const tc = installedIn(root);
   if (!tc.declared) add({ label: "Truecanvas in the project", status: "fail", detail: "not a dependency", fix: "npx truecanvas  (sets it up)" });
   else if (!tc.installed) add({ label: "Truecanvas in the project", status: "fail", detail: "declared but not installed", fix: `${pm} install` });
@@ -3344,15 +3402,15 @@ async function doctor(root, cliVersion) {
   const wrapped = configStatus(root, config.framework);
   const configLabel = config.framework === "vite" ? "vite.config" : "next.config";
   const uses = config.framework === "vite" ? "has the truecanvas() plugin" : "uses withTruecanvas()";
-  add(wrapped.wrapped ? { label: configLabel, status: "ok", detail: `${path13.basename(wrapped.file)} ${uses}` } : { label: configLabel, status: "fail", detail: wrapped.file ? "Truecanvas not enabled" : "missing", fix: "npx truecanvas init" });
+  add(wrapped.wrapped ? { label: configLabel, status: "ok", detail: `${path14.basename(wrapped.file)} ${uses}` } : { label: configLabel, status: "fail", detail: wrapped.file ? "Truecanvas not enabled" : "missing", fix: "npx truecanvas init" });
   const scripts = pkg.scripts ?? {};
   const script = Object.entries(scripts).find(([, v]) => v.includes("truecanvas"));
   add(script ? { label: "Start script", status: "ok", detail: runScript(pm, script[0]) } : { label: "Start script", status: "warn", detail: "none", fix: 'npx truecanvas init  (adds "canvas": "truecanvas dev")' });
-  const ignore = fs12.existsSync(path13.join(root, ".gitignore")) ? fs12.readFileSync(path13.join(root, ".gitignore"), "utf8") : "";
+  const ignore = fs12.existsSync(path14.join(root, ".gitignore")) ? fs12.readFileSync(path14.join(root, ".gitignore"), "utf8") : "";
   add(ignore.includes(config.routeDir) ? { label: "Generated route ignored", status: "ok" } : { label: "Generated route ignored", status: "warn", detail: `${config.routeDir}/ isn't in .gitignore`, fix: "npx truecanvas init" });
   add(hasAgentConfig(root) ? { label: "Agents", status: "ok", detail: ".mcp.json lists Truecanvas" } : { label: "Agents", status: "warn", detail: "not connected for this project", fix: "npx truecanvas connect  (then commit .mcp.json)" });
   const chrome = findChromium();
-  add(chrome ? { label: "Screenshots", status: "ok", detail: path13.basename(chrome) } : { label: "Screenshots", status: "warn", detail: "no Chromium found", fix: "npx playwright install chromium-headless-shell  (or install Chrome)" });
+  add(chrome ? { label: "Screenshots", status: "ok", detail: path14.basename(chrome) } : { label: "Screenshots", status: "warn", detail: "no Chromium found", fix: "npx playwright install chromium-headless-shell  (or install Chrome)" });
   const git = await has("git", ["rev-parse", "--is-inside-work-tree"], root);
   add(git ? { label: "Git", status: "ok" } : { label: "Git", status: "warn", detail: "not a repository", fix: "git init  (branches, history, comments and compare use git)" });
   const gh = await has("gh", ["auth", "status"], root);
@@ -3378,7 +3436,8 @@ Usage
   truecanvas quit      Quit the window and every app it started
   truecanvas desktop   Add Truecanvas to your app launcher (Linux); "desktop remove" undoes it
   truecanvas share [canvas]  Share a canvas as a link for clients (needs truecanvas running).
-                       --password <p>, --no-password, --revoke, --restore, --delete, --title <t>, --local (preview only)
+                       --password <p>, --no-password, --revoke, --restore, --delete, --title <t>, --local (preview only),
+                       --live <url|dir>: a live version clients open with "View live" (where the app runs, or a static build)
   truecanvas share setup     Connect your studio's review site (URL + REVIEW_TOKEN)
   truecanvas mcp       stdio MCP server for agents without HTTP support
 
@@ -3423,7 +3482,8 @@ async function main() {
       revoke: { type: "boolean" },
       restore: { type: "boolean" },
       delete: { type: "boolean" },
-      token: { type: "string" }
+      token: { type: "string" },
+      live: { type: "string" }
     }
   });
   const cli = fileURLToPath3(import.meta.url);
@@ -3444,7 +3504,7 @@ async function main() {
     }
     if (!await ensureSetup(root2, pkgDir, version, yes)) return;
     if (await openInWindow(root2, Number(values.port ?? 4800))) return;
-    const local = path14.join(root2, "node_modules", "truecanvas", "dist", "cli.js");
+    const local = path15.join(root2, "node_modules", "truecanvas", "dist", "cli.js");
     if (fs13.existsSync(local) && fs13.realpathSync(local) !== fs13.realpathSync(cli)) {
       const child = spawn3(process.execPath, [local, "dev", ...process.argv.slice(2).filter((a) => a !== "start" && a !== "-y" && a !== "--yes")], { stdio: "inherit" });
       for (const sig of ["SIGINT", "SIGTERM"]) process.on(sig, () => child.kill(sig));
@@ -3527,7 +3587,7 @@ async function main() {
     return;
   }
   const root = process.cwd();
-  if (!fs13.existsSync(path14.join(root, "package.json"))) {
+  if (!fs13.existsSync(path15.join(root, "package.json"))) {
     console.error("Run truecanvas from your app's root (no package.json here).");
     process.exit(1);
   }
@@ -3537,7 +3597,7 @@ async function main() {
     const report = initProject(config);
     ws.ensureRoute();
     console.log(`
-  ${c.accent("\u25C6")} ${c.bold("Truecanvas")} is set up in ${c.bold(path14.basename(root))}
+  ${c.accent("\u25C6")} ${c.bold("Truecanvas")} is set up in ${c.bold(path15.basename(root))}
 `);
     for (const line of report.done) console.log(`  ${c.green("\u2713")} ${line}`);
     console.log(`  ${c.green("\u2713")} Canvas folder ${c.bold(config.canvasDir)} and dev route ${c.bold(config.routeDir)}`);
@@ -3569,7 +3629,7 @@ async function main() {
         console.error(site ? "Name the canvas: truecanvas share <canvas> --delete" : `No review site yet: ${c.accent("npx truecanvas share setup")}`);
         process.exit(1);
       }
-      const done = await deleteShare(site, path14.basename(root), canvas);
+      const done = await deleteShare(site, path15.basename(root), canvas);
       console.log(done ? `  ${c.green("\u2713")} Deleted the link of ${canvas}, with its versions and comments.` : `  ${canvas} has no link.`);
       return;
     }
@@ -3580,7 +3640,7 @@ async function main() {
         process.exit(1);
       }
       const change = { ...values.revoke ? { revoked: true } : values.restore ? { revoked: false } : {}, ...values["no-password"] ? { password: null } : {} };
-      const url = await updateShare(site, path14.basename(root), canvas, change);
+      const url = await updateShare(site, path15.basename(root), canvas, change);
       console.log(`  ${c.green("\u2713")} ${values.revoke ? "Link revoked" : values.restore ? "Link restored" : "Password removed"}: ${url}`);
       return;
     }
@@ -3596,7 +3656,16 @@ async function main() {
     const publish = !values.local && !!reviewSite();
     console.log(`  ${c.dim(`Rendering ${canvas} through your app${publish ? " and publishing it" : ""}\u2026`)}`);
     const password = values.password;
-    const res = await fetch(`${base}/api/share/snapshot`, { method: "POST", headers: { "content-type": "application/json", origin: base }, body: JSON.stringify({ canvas, local: !publish, title: values.title, password }) });
+    const live = values.live ? /^https?:\/\//.test(values.live) ? { url: values.live } : { dir: path15.resolve(values.live) } : void 0;
+    if (live && "dir" in live && !fs13.existsSync(path15.join(live.dir, "index.html"))) {
+      console.error(`  ${c.red("\u2717")} No index.html in ${live.dir}. Pass a static build folder (Next \`out/\`, Vite \`dist/\`) or the URL where the app runs.`);
+      process.exit(1);
+    }
+    if (live && !publish) {
+      console.error(`  ${c.red("\u2717")} --live needs a review site: ${c.accent("npx truecanvas share setup")}`);
+      process.exit(1);
+    }
+    const res = await fetch(`${base}/api/share/snapshot`, { method: "POST", headers: { "content-type": "application/json", origin: base }, body: JSON.stringify({ canvas, local: !publish, title: values.title, password, live }) });
     const body = await res.json();
     if (!res.ok) {
       console.error(`  ${c.red("\u2717")} ${body.error}`);
@@ -3608,8 +3677,9 @@ async function main() {
     if (manifest.missing.length) console.log(`  ${c.yellow("!")} ${manifest.missing.length} asset${manifest.missing.length === 1 ? "" : "s"} couldn't be fetched.`);
     if (published?.skipped.length) console.log(`  ${c.yellow("!")} Left out (over 4.4 MB): ${published.skipped.join(", ")}`);
     if (published) {
-      console.log(`  ${c.green("\u2713")} Shared: ${c.bold(published.url)} ${c.dim(`(version ${published.versions}${published.password ? ", password protected" : ""})`)}
-`);
+      console.log(`  ${c.green("\u2713")} Shared: ${c.bold(published.url)} ${c.dim(`(version ${published.versions}${published.password ? ", password protected" : ""})`)}`);
+      if (published.live) console.log(`  ${c.green("\u2713")} Live: ${published.live} ${c.dim(published.password ? "(opens from the link's View live button)" : "")}`);
+      console.log("");
       if (values.open && !values["no-open"]) openBrowser(published.url);
     } else {
       console.log(`  ${c.dim("Preview")} ${c.bold(body.preview)}`);
@@ -3721,7 +3791,7 @@ async function openInWindow(root, port) {
   const post = (route, body) => fetch(`${hub}${route}`, { method: "POST", headers: { "content-type": "application/json", origin: hub }, body: JSON.stringify(body) }).catch(() => null);
   await post("/api/hub/add", { path: root });
   await post("/api/hub/open", { path: root, focus: "1" });
-  console.log(`${c.accent("\u25C6")} Opened ${c.bold(path14.basename(root))} in the Truecanvas window ${c.dim(`(${hub})`)}.`);
+  console.log(`${c.accent("\u25C6")} Opened ${c.bold(path15.basename(root))} in the Truecanvas window ${c.dim(`(${hub})`)}.`);
   return true;
 }
 async function prompt(question) {
@@ -3745,7 +3815,7 @@ async function ensureSetup(root, pkgDir, version, yes, force = false) {
   const tc = installedIn(root);
   const wrapped = configStatus(root).wrapped;
   if (tc.declared && tc.installed && wrapped && !force) return true;
-  const name = readPackage(root)?.name ?? path14.basename(root);
+  const name = readPackage(root)?.name ?? path15.basename(root);
   if (!yes) {
     if (!process.stdin.isTTY) {
       console.error(`Truecanvas isn't set up in ${name} yet. Run again with --yes to set it up.`);
@@ -3836,11 +3906,11 @@ function startApp(root, appUrl, framework) {
 }
 function binScript(root, pkg) {
   try {
-    const req = createRequire(path14.join(root, "package.json"));
+    const req = createRequire(path15.join(root, "package.json"));
     const manifest = req.resolve(`${pkg}/package.json`);
     const { bin } = JSON.parse(fs13.readFileSync(manifest, "utf8"));
     const rel = typeof bin === "string" ? bin : bin?.[pkg];
-    return rel ? path14.join(path14.dirname(manifest), rel) : null;
+    return rel ? path15.join(path15.dirname(manifest), rel) : null;
   } catch {
     return null;
   }

package/dist/share/index.d.ts

@@ -2,7 +2,10 @@
  * The share viewer: one static page that reads ./manifest.json and lays the
  * frozen frames out at their canvas positions, with pan and zoom (drag,
  * wheel, pinch, keys). Frames are sandboxed iframes without scripts, under a
- * transparent layer that takes every pointer event. Self-contained: no
+ * transparent layer that takes every pointer event. When the version has a
+ * live site, each frame gets a "View live" button: the real site in a
+ * device-sized window, scripts and animations included, on its own origin.
+ * Self-contained: no
  * build step, no dependencies, so the same file works locally and on a
  * review site.
  */

package/dist/share/index.js

@@ -1,6 +1,6 @@
 import {
   viewerHtml
-} from "../chunk-M7B3W7EP.js";
+} from "../chunk-DV76O5SZ.js";
 export {
   viewerHtml
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "truecanvas",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Design with your real React components: a Figma-like canvas for Next.js and Vite where layers are your .tsx and agents edit through MCP.",
   "license": "MIT",
   "type": "module",