truecanvas 0.2.0 → 0.4.0

package/dist/cli.js

@@ -1,4 +1,7 @@
 #!/usr/bin/env node
+import {
+  viewerHtml
+} from "./chunk-M7B3W7EP.js";
 import {
   DEVICES,
   EditError,
@@ -7,6 +10,7 @@ import {
   assertCanvasName,
   clearCompare,
   componentsDir,
+  configStatus,
   describeComponent,
   detectPm,
   findByPath,
@@ -16,8 +20,6 @@ import {
   initProject,
   layoutFiles,
   listRoutes,
-  loadConfig,
-  nextConfigStatus,
   outlineDoc,
   parseCanvas,
   readDesignTokens,
@@ -26,11 +28,15 @@ import {
   shadcnAdd,
   shadcnRegistry,
   shadcnStatus,
+  shellSafe,
   syncComponentRegistry,
   toolEnv,
   writeCompare
-} from "./chunk-ZPARY6OD.js";
-import "./chunk-T2TCBSTG.js";
+} from "./chunk-OVYSWA2F.js";
+import {
+  loadConfig
+} from "./chunk-PBKX3SBC.js";
+import "./chunk-WU7NBTJH.js";
 import {
   ICON_LIBRARIES,
   iconLibraries,
@@ -41,14 +47,14 @@ import {
 
 // src/cli/index.ts
 import { spawn as spawn3 } from "child_process";
-import fs11 from "fs";
-import path11 from "path";
+import fs13 from "fs";
+import path14 from "path";
 import { parseArgs } from "util";
 
 // src/server/http.ts
 import http from "http";
-import fs4 from "fs";
-import path4 from "path";
+import fs6 from "fs";
+import path7 from "path";
 import { randomUUID } from "crypto";
 import { fileURLToPath } from "url";
 import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
@@ -84,6 +90,276 @@ function addShadcnComponents(root, names) {
   return exclusive(() => shadcnAdd(root, names));
 }
 
+// src/share/snapshot.ts
+import crypto from "crypto";
+import fs from "fs";
+import path from "path";
+var MAX_ASSETS_BYTES = 80 * 1024 * 1024;
+function sharesDir(root) {
+  return path.join(root, "node_modules", ".cache", "truecanvas", "shares");
+}
+async function createSnapshot(ws, shots, canvas, opts = {}) {
+  const doc = ws.doc(canvas);
+  const frames = doc.frames.filter((f) => !opts.frames || opts.frames.includes(f.frameName));
+  if (!frames.length) throw new Error(`Canvas "${canvas}" has no frames to share.`);
+  const id = (/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/[-:T]/g, "").replace(/^(\d{8})/, "$1-");
+  const dir = path.join(sharesDir(ws.config.root), canvas, id);
+  fs.mkdirSync(path.join(dir, "frames"), { recursive: true });
+  fs.mkdirSync(path.join(dir, "assets"), { recursive: true });
+  const assets = new Assets(path.join(dir, "assets"));
+  const appOrigin = new URL(ws.config.appUrl).origin;
+  const out = [];
+  const external = /* @__PURE__ */ new Set();
+  const used = /* @__PURE__ */ new Set();
+  for (const f of frames) {
+    const device = findDevice(f.device);
+    const raw = await shots.snapshot({ canvas, frame: f.frameName, width: f.width, height: f.height, theme: f.theme ?? "light", mobile: device ? device.kind !== "desktop" : false });
+    for (const u of raw.requests) if (new URL(u).origin !== appOrigin) external.add(new URL(u).origin);
+    let slug = f.frameName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "frame";
+    while (used.has(slug)) slug += "-2";
+    used.add(slug);
+    fs.writeFileSync(path.join(dir, "frames", `${slug}.html`), await freeze(raw, assets));
+    fs.writeFileSync(path.join(dir, "frames", `${slug}.png`), raw.png);
+    out.push({ name: f.frameName, x: f.x, y: f.y, width: raw.width, height: f.height ?? raw.height, theme: f.theme, device: f.device, html: `frames/${slug}.html`, image: `frames/${slug}.png` });
+  }
+  const manifest = {
+    format: 1,
+    project: path.basename(ws.config.root),
+    canvas,
+    id,
+    createdAt: Date.now(),
+    frames: out,
+    missing: [...assets.missing],
+    external: [...external].filter((o) => !/fonts\.(googleapis|gstatic)\.com$/.test(new URL(o).host))
+  };
+  fs.writeFileSync(path.join(dir, "manifest.json"), JSON.stringify(manifest, null, 2));
+  fs.writeFileSync(path.join(dir, "index.html"), viewerHtml());
+  return { dir, manifest };
+}
+async function freeze(raw, assets) {
+  let css = "";
+  for (const sheet of raw.css) {
+    let text = sheet.text;
+    if (sheet.href && !text) text = await fetchText(sheet.href) ?? "";
+    text = await replaceAsync(text, /url\(\s*(['"]?)([^'")]+)\1\s*\)/g, async (m, _q, u) => {
+      const local = await assets.local(u, sheet.base, "../assets/");
+      return local ? `url("${local}")` : m;
+    });
+    css += sheet.media && sheet.media !== "all" ? `@media ${sheet.media} {
+${text}
+}
+` : `${text}
+`;
+  }
+  let html = raw.html;
+  html = await replaceAsync(html, /\s(src|poster|href|xlink:href)="([^"]+)"/g, async (m, attr, u) => {
+    if (u.startsWith("tc-canvas:")) return m;
+    const local = await assets.local(decodeEntities(u), raw.url, "../assets/");
+    return local ? ` ${attr}="${local}"` : m;
+  });
+  html = await replaceAsync(html, /url\(("|['"]?)([^'")&]+)\1\)/g, async (m, q, u) => {
+    const local = await assets.local(decodeEntities(u), raw.url, "../assets/");
+    return local ? `url(${q}${local}${q})` : m;
+  });
+  for (const c2 of raw.canvases) {
+    const local = assets.store(c2.png, "png");
+    html = html.split(`src="tc-canvas:${c2.index}"`).join(`src="../assets/${local}"`);
+  }
+  html = html.replace(/\ssrc="tc-canvas:\d+"/g, "");
+  const head = `<meta name="robots" content="noindex"><style>${css.replace(/<\/style/gi, "<\\/style")}</style>`;
+  return html.includes("</head>") ? html.replace("</head>", `${head}</head>`) : head + html;
+}
+var Assets = class {
+  constructor(dir) {
+    this.dir = dir;
+  }
+  dir;
+  byUrl = /* @__PURE__ */ new Map();
+  bytes = 0;
+  missing = /* @__PURE__ */ new Set();
+  /** The local path (with `prefix`) for an asset URL, or null to leave it as is (data:, #fragment). */
+  local(spec, base, prefix) {
+    if (/^(data:|#|about:|blob:)/i.test(spec.trim())) return Promise.resolve(null);
+    let url;
+    try {
+      url = new URL(spec.trim(), base).href;
+    } catch {
+      return Promise.resolve(null);
+    }
+    if (!/^https?:/.test(url)) return Promise.resolve(null);
+    if (!this.byUrl.has(url)) this.byUrl.set(url, this.download(url));
+    return this.byUrl.get(url).then((name) => name ? prefix + name : null);
+  }
+  async download(url) {
+    if (this.bytes > MAX_ASSETS_BYTES) {
+      this.missing.add(url);
+      return null;
+    }
+    try {
+      const res = await fetch(url, { signal: AbortSignal.timeout(2e4) });
+      if (!res.ok) throw new Error(String(res.status));
+      const buf = Buffer.from(await res.arrayBuffer());
+      this.bytes += buf.length;
+      return this.store(buf, extension(url, res.headers.get("content-type")));
+    } catch {
+      this.missing.add(url);
+      return null;
+    }
+  }
+  store(buf, ext) {
+    const name = `${crypto.createHash("sha256").update(buf).digest("hex").slice(0, 20)}.${ext}`;
+    const file = path.join(this.dir, name);
+    if (!fs.existsSync(file)) fs.writeFileSync(file, buf);
+    return name;
+  }
+};
+var TYPES = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/webp": "webp",
+  "image/avif": "avif",
+  "image/gif": "gif",
+  "image/svg+xml": "svg",
+  "image/x-icon": "ico",
+  "image/vnd.microsoft.icon": "ico",
+  "font/woff2": "woff2",
+  "font/woff": "woff",
+  "font/ttf": "ttf",
+  "font/otf": "otf",
+  "application/font-woff2": "woff2",
+  "video/mp4": "mp4",
+  "video/webm": "webm"
+};
+function extension(url, type) {
+  const fromType = TYPES[(type ?? "").split(";")[0].trim()];
+  if (fromType) return fromType;
+  const ext = path.extname(new URL(url).pathname).slice(1).toLowerCase();
+  return /^[a-z0-9]{1,5}$/.test(ext) ? ext : "bin";
+}
+async function fetchText(url) {
+  try {
+    const res = await fetch(url, { signal: AbortSignal.timeout(15e3), headers: { "user-agent": "Mozilla/5.0 Chrome/130 Safari/537.36" } });
+    return res.ok ? await res.text() : null;
+  } catch {
+    return null;
+  }
+}
+var decodeEntities = (s) => s.replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#39;/g, "'");
+async function replaceAsync(input, re, fn) {
+  const matches = [...input.matchAll(re)];
+  const replaced = await Promise.all(matches.map((m) => fn(...m)));
+  let out = "";
+  let last = 0;
+  matches.forEach((m, i) => {
+    out += input.slice(last, m.index) + replaced[i];
+    last = m.index + m[0].length;
+  });
+  return out + input.slice(last);
+}
+
+// src/share/publish.ts
+import fs2 from "fs";
+import os from "os";
+import path2 from "path";
+var configFile = () => path2.join(process.env.XDG_CONFIG_HOME ?? path2.join(os.homedir(), ".config"), "truecanvas", "share.json");
+function reviewSite() {
+  const { TRUECANVAS_REVIEW_URL: url, TRUECANVAS_REVIEW_TOKEN: token } = process.env;
+  if (url && token) return { url: url.replace(/\/+$/, ""), token };
+  try {
+    const saved = JSON.parse(fs2.readFileSync(configFile(), "utf8"));
+    return saved.url && saved.token ? saved : null;
+  } catch {
+    return null;
+  }
+}
+async function connectReviewSite(url, token) {
+  const site = { url: url.trim().replace(/\/+$/, ""), token: token.trim() };
+  if (!/^https?:\/\//.test(site.url)) throw new Error("The review site URL starts with https://");
+  const res = await request(site, "GET", "/api/shares");
+  const file = configFile();
+  fs2.mkdirSync(path2.dirname(file), { recursive: true });
+  fs2.writeFileSync(file, JSON.stringify(site, null, 2), { mode: 384 });
+  return res;
+}
+var MAX_FILE = 4.4 * 1024 * 1024;
+async function publishSnapshot(site, dir, manifest, opts = {}) {
+  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);
+  const files = [];
+  for (const name of fs2.readdirSync(path2.join(dir, "assets"))) if (!known.has(name)) files.push({ local: path2.join(dir, "assets", name), remote: `assets/${name}` });
+  for (const f of manifest.frames) for (const p of [f.html, f.image]) files.push({ local: path2.join(dir, p), remote: `${manifest.id}/${p}` });
+  const skipped = [];
+  let uploaded = 0;
+  const queue2 = [...files];
+  const worker = async () => {
+    for (let f = queue2.shift(); f; f = queue2.shift()) {
+      const body = fs2.readFileSync(f.local);
+      if (body.length > MAX_FILE) {
+        skipped.push(f.remote);
+        continue;
+      }
+      await request(site, "PUT", `${base}/files`, body, { "x-path": f.remote, "content-type": contentType(f.local) });
+      uploaded++;
+    }
+  };
+  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(", ")}`);
+  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 };
+}
+async function deleteShare(site, project, canvas) {
+  const found = await request(site, "GET", `/api/shares?project=${encodeURIComponent(project)}&canvas=${encodeURIComponent(canvas)}`);
+  if (!found.slug) return false;
+  await request(site, "DELETE", `/api/shares/${found.slug}`);
+  return true;
+}
+async function updateShare(site, project, canvas, change) {
+  const share = await request(site, "POST", "/api/shares", { project, canvas });
+  await request(site, "PATCH", `/api/shares/${share.slug}`, change);
+  return share.url;
+}
+async function request(site, method, route, body, headers = {}) {
+  const raw = Buffer.isBuffer(body);
+  let res;
+  try {
+    res = await fetch(site.url + route, {
+      method,
+      headers: { authorization: `Bearer ${site.token}`, ...body !== void 0 && !raw ? { "content-type": "application/json" } : {}, ...headers },
+      body: body === void 0 ? void 0 : raw ? new Uint8Array(body) : JSON.stringify(body),
+      signal: AbortSignal.timeout(6e4)
+    });
+  } catch (err) {
+    throw new Error(`Couldn't reach the review site at ${site.url}: ${err.message}`);
+  }
+  if (res.status === 401) throw new Error("The review site refused the token. Run `truecanvas share setup` again with the REVIEW_TOKEN from the site's environment variables.");
+  const data2 = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(`Review site: ${data2.error ?? `${res.status} ${res.statusText}`}`);
+  return data2;
+}
+function contentType(file) {
+  const ext = path2.extname(file).slice(1).toLowerCase();
+  const types = {
+    html: "text/html; charset=utf-8",
+    png: "image/png",
+    jpg: "image/jpeg",
+    webp: "image/webp",
+    avif: "image/avif",
+    gif: "image/gif",
+    svg: "image/svg+xml",
+    ico: "image/x-icon",
+    woff2: "font/woff2",
+    woff: "font/woff",
+    ttf: "font/ttf",
+    otf: "font/otf",
+    mp4: "video/mp4",
+    webm: "video/webm"
+  };
+  return types[ext] ?? "application/octet-stream";
+}
+
 // src/server/mcp.ts
 var INSTRUCTIONS = `Truecanvas is a design canvas whose layers are the project's real React components.
 A canvas is a .tsx file (canvas/<name>.canvas.tsx) with <Frame> artboards; every edit you make is written to that file as clean TSX and appears live in the user's editor window.
@@ -577,7 +853,7 @@ ${source.slice(hit.node.start, hit.node.end)}
     async ({ name }) => {
       try {
         ws.createCanvas(name, actor());
-        return text(`\u2713 Created canvas ${name} (${ws.relFile(name)}). Next.js picks the new route up in a second.`);
+        return text(`\u2713 Created canvas ${name} (${ws.relFile(name)}). The app picks it up in a second.`);
       } catch (e) {
         return fail(e);
       }
@@ -611,8 +887,9 @@ ${source.slice(node.start, node.end)}
             else where = `
 on a ${t.node.name} (it may have moved)`;
           }
-          const msgs = t.messages.map((m) => `  ${m.author.name}${m.author.kind === "agent" ? " (agent)" : ""}: ${m.text}`).join("\n");
-          return `thread ${t.id}${t.resolved ? " [resolved]" : ""} in frame "${t.frame}" at ${t.x},${t.y}${where}
+          const msgs = t.messages.map((m) => `  ${m.author.name}${m.author.kind === "agent" ? " (agent)" : m.author.kind === "client" ? " (client)" : ""}: ${m.text}`).join("\n");
+          const shared = t.share ? " [from a client on the share link: replies and resolving are sent to the client]" : "";
+          return `thread ${t.id}${t.resolved ? " [resolved]" : ""}${shared} in frame "${t.frame}" at ${t.x},${t.y}${where}
 ${msgs}`;
         });
         return text(parts.join("\n\n"));
@@ -652,9 +929,9 @@ ${msgs}`;
       try {
         const c2 = resolveCanvas(canvas);
         const a = actor();
-        const author = { name: a.kind === "agent" ? a.name : "agent", kind: "agent" };
-        if (note?.trim()) ws.comments.reply(c2, thread, note, author);
-        const t = ws.comments.resolve(c2, thread, true, author);
+        const author2 = { name: a.kind === "agent" ? a.name : "agent", kind: "agent" };
+        if (note?.trim()) ws.comments.reply(c2, thread, note, author2);
+        const t = ws.comments.resolve(c2, thread, true, author2);
         ws.commentsChanged(c2);
         presence(c2, "editing", "Resolved a comment", [], t.frame);
         return text(`\u2713 Resolved thread ${t.id}.`);
@@ -700,6 +977,36 @@ ${msgs}`;
       }
     }
   );
+  server.registerTool(
+    "share_canvas",
+    {
+      title: "Share canvas",
+      description: "Share a canvas with a client as a link: every frame is rendered by the app and frozen into static HTML (no scripts, no API calls), then published to the studio's review site as a new version of the canvas's link. Without a review site set up, returns a local preview instead. Data the app showed while rendering is in the snapshot: use sample data, never real client data.",
+      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".')
+      }
+    },
+    async ({ canvas, frames, title }) => {
+      try {
+        const c2 = resolveCanvas(canvas);
+        presence(c2, "looking", "Preparing a share link");
+        const { dir, manifest } = await createSnapshot(ws, shots, c2, { frames });
+        const preview = `http://localhost:${ws.config.port}/share/${encodeURIComponent(c2)}/${manifest.id}/`;
+        const notes = [
+          manifest.external.length ? `While rendering, the app called ${manifest.external.join(", ")}: whatever it showed is in the snapshot.` : "",
+          manifest.missing.length ? `${manifest.missing.length} asset(s) couldn't be fetched.` : ""
+        ].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"));
+      } catch (e) {
+        return fail(e);
+      }
+    }
+  );
   server.registerTool(
     "screenshot_frame",
     {
@@ -870,14 +1177,14 @@ ${out.out.slice(-1500)}`));
 }
 
 // src/server/thumbnails.ts
-import crypto from "crypto";
-import fs from "fs";
-import path from "path";
+import crypto2 from "crypto";
+import fs3 from "fs";
+import path3 from "path";
 var Thumbnails = class _Thumbnails {
   constructor(ws, shots) {
     this.ws = ws;
     this.shots = shots;
-    this.dir = path.join(ws.config.root, "node_modules", ".cache", "truecanvas", "thumbs");
+    this.dir = path3.join(ws.config.root, "node_modules", ".cache", "truecanvas", "thumbs");
   }
   ws;
   shots;
@@ -903,26 +1210,26 @@ var Thumbnails = class _Thumbnails {
   key(spec, props) {
     let stamp = "";
     try {
-      const file = spec.library ? path.join(this.ws.config.root, "node_modules", spec.library, "package.json") : path.join(this.ws.config.root, spec.file);
-      stamp = String(fs.statSync(file).mtimeMs);
+      const file = spec.library ? path3.join(this.ws.config.root, "node_modules", spec.library, "package.json") : path3.join(this.ws.config.root, spec.file);
+      stamp = String(fs3.statSync(file).mtimeMs);
     } catch {
       stamp = "0";
     }
-    return crypto.createHash("sha1").update(JSON.stringify({ v: 1, name: spec.name, props, stamp })).digest("hex").slice(0, 16);
+    return crypto2.createHash("sha1").update(JSON.stringify({ v: 1, name: spec.name, props, stamp })).digest("hex").slice(0, 16);
   }
   async get(name, preset) {
     await this.ws.catalog.load();
     const spec = this.ws.catalog.get(name);
     if (!spec) throw new Error(`Unknown component ${name}`);
     const props = _Thumbnails.previewProps(spec, preset);
-    const file = path.join(this.dir, `${name}-${this.key(spec, props)}.png`);
-    if (fs.existsSync(file)) return fs.readFileSync(file);
+    const file = path3.join(this.dir, `${name}-${this.key(spec, props)}.png`);
+    if (fs3.existsSync(file)) return fs3.readFileSync(file);
     const job = this.queue.then(async () => {
-      if (fs.existsSync(file)) return fs.readFileSync(file);
+      if (fs3.existsSync(file)) return fs3.readFileSync(file);
       const url = `${this.ws.config.appUrl}/truecanvas/__preview?component=${encodeURIComponent(name)}&props=${encodeURIComponent(JSON.stringify(props))}`;
       const png = await this.shots.element(url, { width: 640, height: 480 });
-      fs.mkdirSync(this.dir, { recursive: true });
-      fs.writeFileSync(file, png);
+      fs3.mkdirSync(this.dir, { recursive: true });
+      fs3.writeFileSync(file, png);
       return png;
     });
     this.queue = job.catch(() => void 0);
@@ -931,22 +1238,32 @@ var Thumbnails = class _Thumbnails {
 };
 
 // src/server/screenshot.ts
-import fs2 from "fs";
-import os from "os";
-import path2 from "path";
+import fs4 from "fs";
+import os2 from "os";
+import path4 from "path";
 function findChromium() {
   if (process.env.TRUECANVAS_CHROME) return process.env.TRUECANVAS_CHROME;
-  const cache2 = path2.join(os.homedir(), ".cache", "ms-playwright");
-  if (fs2.existsSync(cache2)) {
-    const shells = fs2.readdirSync(cache2).filter((d) => d.startsWith("chromium_headless_shell-")).sort().reverse();
+  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"));
+  if (fs4.existsSync(cache2)) {
+    const shells = fs4.readdirSync(cache2).filter((d) => d.startsWith("chromium_headless_shell-")).sort().reverse();
     for (const d of shells) {
-      for (const sub of ["chrome-headless-shell-linux64/chrome-headless-shell", "chrome-linux/headless_shell", "chrome-headless-shell-mac-arm64/chrome-headless-shell", "chrome-headless-shell-mac-x64/chrome-headless-shell"]) {
-        const p = path2.join(cache2, d, sub);
-        if (fs2.existsSync(p)) return p;
+      for (const sub of [
+        "chrome-headless-shell-linux64/chrome-headless-shell",
+        "chrome-linux/headless_shell",
+        "chrome-headless-shell-mac-arm64/chrome-headless-shell",
+        "chrome-headless-shell-mac-x64/chrome-headless-shell",
+        "chrome-headless-shell-win64/chrome-headless-shell.exe",
+        "chrome-win/headless_shell.exe"
+      ]) {
+        const p = path4.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")]),
+    "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
     "/usr/bin/chromium-browser",
     "/usr/bin/chromium",
     "/usr/bin/google-chrome-stable",
@@ -954,7 +1271,7 @@ function findChromium() {
     "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
     "/Applications/Chromium.app/Contents/MacOS/Chromium"
   ]) {
-    if (fs2.existsSync(p)) return p;
+    if (fs4.existsSync(p)) return p;
   }
   return void 0;
 }
@@ -1027,7 +1344,14 @@ var Screenshotter = class {
     });
   }
   async frame(opts) {
-    const options = {
+    return this.withContext(this.frameOptions(opts), async (ctx) => {
+      const page = await this.openFrame(ctx, opts);
+      const format = opts.jpeg ? { type: "jpeg", quality: 78 } : { type: "png" };
+      return await page.screenshot(format);
+    });
+  }
+  frameOptions(opts) {
+    return {
       viewport: { width: opts.width, height: opts.height ?? 800 },
       deviceScaleFactor: opts.scale ?? 1,
       colorScheme: opts.theme === "dark" ? "dark" : "light",
@@ -1035,28 +1359,135 @@ var Screenshotter = class {
       isMobile: !!opts.mobile,
       hasTouch: !!opts.mobile
     };
-    return this.withContext(options, async (ctx) => {
-      const page = await ctx.newPage();
-      const url = `${this.appUrl}/truecanvas/${encodeURIComponent(opts.canvas)}?frame=${encodeURIComponent(opts.frame)}&theme=${opts.theme}&still=1`;
-      await page.goto(url, { waitUntil: "load", timeout: 3e4 });
-      await page.waitForSelector("[data-tc-frame]", { timeout: 2e4 });
-      if (!opts.height) {
-        const h = await page.evaluate(() => Math.ceil(document.querySelector("[data-tc-frame]").getBoundingClientRect().height));
-        await page.setViewportSize({ width: opts.width, height: Math.min(Math.max(h, 100), opts.maxHeight ?? 16e3) });
-      }
-      await page.waitForFunction(() => window.__tcStill === true, void 0, { timeout: 6e3 }).catch(() => {
+  }
+  /** Loads a frame, sizes hug frames to their content and waits until it has settled on its final state. */
+  async openFrame(ctx, opts) {
+    const page = await ctx.newPage();
+    const url = `${this.appUrl}/truecanvas/${encodeURIComponent(opts.canvas)}?frame=${encodeURIComponent(opts.frame)}&theme=${opts.theme}&still=1`;
+    await page.goto(url, { waitUntil: "load", timeout: 3e4 });
+    await page.waitForSelector("[data-tc-frame]", { timeout: 2e4 });
+    if (!opts.height) {
+      const h = await page.evaluate(() => Math.ceil(document.querySelector("[data-tc-frame]").getBoundingClientRect().height));
+      await page.setViewportSize({ width: opts.width, height: Math.min(Math.max(h, 100), opts.maxHeight ?? 16e3) });
+    }
+    await page.waitForFunction(() => window.__tcStill === true, void 0, { timeout: 6e3 }).catch(() => {
+    });
+    await page.evaluate(() => document.fonts.ready.then(() => new Promise((r) => setTimeout(r, 50))));
+    await page.waitForTimeout(150);
+    return page;
+  }
+  /**
+   * A frame frozen into static HTML (share links): the rendered DOM without
+   * scripts, every stylesheet's text, and pixels of the <canvas> elements
+   * (shaders, charts), which only exist at runtime. Assets are left as URLs
+   * for the caller to fetch.
+   */
+  async snapshot(opts) {
+    return this.withContext(this.frameOptions(opts), async (ctx) => {
+      const requests = /* @__PURE__ */ new Set();
+      ctx.on("request", (r) => {
+        if (/^https?:/.test(r.url())) requests.add(r.url());
       });
-      await page.evaluate(() => document.fonts.ready.then(() => new Promise((r) => setTimeout(r, 50))));
-      await page.waitForTimeout(150);
-      const format = opts.jpeg ? { type: "jpeg", quality: 78 } : { type: "png" };
-      return await page.screenshot(format);
+      const page = await this.openFrame(ctx, opts);
+      await page.evaluate(() => Promise.all([...document.images].map((img) => img.complete ? null : new Promise((r) => (img.onload = r, img.onerror = r, setTimeout(r, 4e3))))));
+      const raw = await page.evaluate(serializePage);
+      const canvases = [];
+      for (const c2 of raw.canvases) {
+        if (c2.w < 1 || c2.h < 1) continue;
+        const png2 = await page.screenshot({ type: "png", clip: { x: c2.x, y: c2.y, width: c2.w, height: c2.h }, omitBackground: true }).catch(() => null);
+        if (png2) canvases.push({ index: c2.index, png: png2 });
+      }
+      const png = await page.screenshot({ type: "png", fullPage: true });
+      const viewport = page.viewportSize();
+      return { url: raw.url, html: raw.html, css: raw.css, canvases, png, width: viewport.width, height: raw.height, requests: [...requests] };
     });
   }
 };
+function serializePage() {
+  const abs = (u) => {
+    try {
+      return new URL(u, location.href).href;
+    } catch {
+      return u;
+    }
+  };
+  for (const img of Array.from(document.images)) {
+    if (img.currentSrc) img.setAttribute("src", img.currentSrc);
+    for (const a of ["srcset", "sizes", "loading", "decoding"]) img.removeAttribute(a);
+  }
+  for (const input of Array.from(document.querySelectorAll("input"))) {
+    if (input.type === "checkbox" || input.type === "radio") input.toggleAttribute("checked", input.checked);
+    else if (input.type !== "password" && input.type !== "file") input.setAttribute("value", input.value);
+  }
+  for (const t of Array.from(document.querySelectorAll("textarea"))) t.textContent = t.value;
+  for (const o of Array.from(document.querySelectorAll("option"))) o.toggleAttribute("selected", o.selected);
+  const canvases = Array.from(document.querySelectorAll("canvas")).map((c2, index) => {
+    c2.setAttribute("data-tc-canvas", String(index));
+    const r = c2.getBoundingClientRect();
+    return { index, x: r.left + scrollX, y: r.top + scrollY, w: r.width, h: r.height };
+  });
+  const css = [];
+  const collect = (sheet, media = "") => {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      if (sheet.href) css.push({ base: sheet.href, text: "", media: sheet.media?.mediaText || media, href: sheet.href });
+      return;
+    }
+    let text = "";
+    for (const rule of Array.from(rules)) {
+      if (rule instanceof CSSImportRule) {
+        if (rule.styleSheet) collect(rule.styleSheet, rule.media?.mediaText || "");
+        continue;
+      }
+      text += `${rule.cssText}
+`;
+    }
+    css.push({ base: sheet.href || location.href, text, media: sheet.media?.mediaText || media });
+  };
+  for (const sheet of Array.from(document.styleSheets)) if (!sheet.disabled) collect(sheet);
+  for (const sheet of document.adoptedStyleSheets ?? []) collect(sheet);
+  const root = document.documentElement.cloneNode(true);
+  for (const el of Array.from(root.querySelectorAll("script, noscript, style, link, template, iframe, object, embed, nextjs-portal, [data-nextjs-toast]"))) {
+    el.remove();
+  }
+  for (const c2 of Array.from(root.querySelectorAll("canvas[data-tc-canvas]"))) {
+    const i = Number(c2.getAttribute("data-tc-canvas"));
+    const img = document.createElement("img");
+    for (const a of Array.from(c2.attributes)) if (a.name !== "width" && a.name !== "height") img.setAttribute(a.name, a.value);
+    img.setAttribute("src", `tc-canvas:${i}`);
+    img.setAttribute("alt", "");
+    const r = canvases[i];
+    img.style.width = `${r.w}px`;
+    img.style.height = `${r.h}px`;
+    c2.replaceWith(img);
+  }
+  for (const el of [root, ...Array.from(root.querySelectorAll("*"))]) {
+    for (const a of Array.from(el.attributes)) {
+      const n = a.name;
+      if (n.startsWith("on") || n === "data-tc" || n === "data-tc-canvas" || n === "data-tc-hidden") el.removeAttribute(n);
+    }
+    for (const n of ["src", "poster", "xlink:href"]) {
+      const v = el.getAttribute(n);
+      if (v && !/^(data:|#|tc-canvas:)/.test(v)) el.setAttribute(n, abs(v));
+    }
+    const href = el.getAttribute("href");
+    if (href !== null && el.tagName.toLowerCase() === "a") {
+      el.setAttribute("data-href", href);
+      el.removeAttribute("href");
+      el.style.cursor = "pointer";
+    } else if (href && !href.startsWith("#") && !href.startsWith("data:")) el.setAttribute("href", abs(href));
+  }
+  for (const f of Array.from(root.querySelectorAll("form"))) f.removeAttribute("action");
+  const height = Math.ceil(document.querySelector("[data-tc-frame]")?.getBoundingClientRect().height ?? document.documentElement.scrollHeight);
+  return { url: location.href, html: `<!doctype html>
+${root.outerHTML}`, css, canvases, height };
+}
 
 // src/server/review.ts
-import fs3 from "fs";
-import path3 from "path";
+import fs5 from "fs";
+import path5 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) {
@@ -1073,14 +1504,14 @@ async function versionAt(ws, canvas, ref) {
 }
 var readNow = (ws, file) => {
   try {
-    return fs3.readFileSync(path3.join(ws.config.root, file), "utf8");
+    return fs5.readFileSync(path5.join(ws.config.root, file), "utf8");
   } catch {
     return null;
   }
 };
 async function reviewPage(ws, canvas, ref, since) {
   const rel = ws.relFile(canvas);
-  const exists = fs3.existsSync(ws.file(canvas));
+  const exists = fs5.existsSync(ws.file(canvas));
   const old = await versionAt(ws, canvas, ref);
   if (!exists && old.source === null) return null;
   const now = exists ? ws.read(canvas) : null;
@@ -1104,7 +1535,7 @@ async function reviewPage(ws, canvas, ref, since) {
       }
     }
   }
-  const comments = path3.join(ws.config.canvasDir, `${canvas}.comments.json`);
+  const comments = `${ws.config.canvasDir}/${canvas}.comments.json`;
   if (await ws.git.show(ref, comments) !== readNow(ws, comments)) files.push(comments);
   if (!files.length) return null;
   const history = exists ? ws.changesSince(canvas, since) : [];
@@ -1132,7 +1563,7 @@ async function reviewAll(ws) {
   const linked = new Set(ws.linkedFiles());
   const out = [];
   for (const canvas of names) {
-    const own = [ws.relFile(canvas), path3.join(ws.config.canvasDir, `${canvas}.comments.json`)];
+    const own = [ws.relFile(canvas), `${ws.config.canvasDir}/${canvas}.comments.json`];
     const touchesLinked = [...linked].some((f) => changed.has(f));
     if (!own.some((f) => changed.has(f)) && !touchesLinked) continue;
     const page = await reviewPage(ws, canvas, ref, since).catch(() => null);
@@ -1150,7 +1581,7 @@ function renderFrame(ws, shots, canvas, frame, side, ref) {
 async function render(ws, shots, canvas, frame, side, ref) {
   let source;
   let files = {};
-  if (side === "after") source = fs3.existsSync(ws.file(canvas)) ? ws.read(canvas) : null;
+  if (side === "after") source = fs5.existsSync(ws.file(canvas)) ? ws.read(canvas) : null;
   else {
     const old = await versionAt(ws, canvas, ref);
     source = old.source;
@@ -1166,7 +1597,7 @@ async function render(ws, shots, canvas, frame, side, ref) {
   if (hit) return hit;
   let name = canvas;
   const snapshot = `${canvas}.${side === "before" ? "base" : "now"}`;
-  if (side === "before" || !fs3.existsSync(ws.file(canvas))) name = writeCompare(ws.config, canvas, source, files, snapshot);
+  if (side === "before" || !fs5.existsSync(ws.file(canvas))) name = writeCompare(ws.config, canvas, source, files, snapshot);
   try {
     const device = findDevice(f.device);
     const png = await shots.frame({ canvas: name, frame, width: f.width, height: f.height, theme: f.theme ?? "light", scale: Math.min(2, Math.max(0.4, 1e3 / f.width)), mobile: device ? device.kind !== "desktop" : false, jpeg: true, maxHeight: 6e3 });
@@ -1218,6 +1649,150 @@ async function readJson(req, limit = 8 * 1024 * 1024) {
   }
 }
 
+// src/share/sync.ts
+import path6 from "path";
+var EVERY = 2e4;
+var LOOKUP_EVERY = 5 * 6e4;
+var CommentSync = class {
+  constructor(ws) {
+    this.ws = ws;
+  }
+  ws;
+  links = /* @__PURE__ */ new Map();
+  remote = /* @__PURE__ */ new Map();
+  timer = null;
+  kickTimer = null;
+  running = null;
+  off = null;
+  start() {
+    this.timer = setInterval(() => void this.syncAll(), EVERY);
+    this.timer.unref();
+    setTimeout(() => void this.syncAll(), 3e3).unref();
+    this.off = this.ws.on((e) => {
+      if (e.type !== "comments") return;
+      if (this.kickTimer) clearTimeout(this.kickTimer);
+      this.kickTimer = setTimeout(() => void this.syncAll(), 1500);
+    });
+  }
+  stop() {
+    if (this.timer) clearInterval(this.timer);
+    if (this.kickTimer) clearTimeout(this.kickTimer);
+    this.off?.();
+  }
+  /** A canvas was just shared: look its link up again on the next sync. */
+  forget(canvas) {
+    this.links.delete(canvas);
+  }
+  syncAll() {
+    this.running ??= this.pass().finally(() => this.running = null);
+    return this.running;
+  }
+  async pass() {
+    const site = reviewSite();
+    if (!site) return;
+    for (const canvas of this.ws.canvases()) {
+      try {
+        await this.syncCanvas(site, canvas);
+      } catch {
+      }
+    }
+  }
+  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 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;
+  }
+  async syncCanvas(site, canvas) {
+    const slug = await this.slugOf(site, canvas);
+    if (!slug) return;
+    const cached = this.remote.get(slug);
+    const res = await call(site, "GET", `/api/shares/${slug}/comments?since=${cached?.updated ?? 0}`);
+    const remote = res.threads ?? cached?.threads ?? [];
+    this.remote.set(slug, { updated: res.updated, threads: remote });
+    const byId = new Map(remote.map((t) => [t.id, t]));
+    const dismissed = this.ws.comments.dismissed(canvas);
+    this.ws.comments.merge(canvas, (local) => {
+      let changed = false;
+      for (const r of remote) {
+        if (dismissed.has(r.id)) continue;
+        const l = local.find((t) => t.id === r.id);
+        if (!l) {
+          local.push(fromRemote(r, slug));
+          changed = true;
+          continue;
+        }
+        if (!l.share) continue;
+        const have = new Set(l.messages.map((m) => m.id));
+        for (const m of r.messages) {
+          if (have.has(m.id)) continue;
+          l.messages.push(message(m));
+          changed = true;
+        }
+        if (changed) l.messages.sort((a, b) => a.at - b.at);
+        if (r.resolved !== l.resolved && (r.resolvedAt ?? 0) > (l.resolvedAt ?? 0)) {
+          l.resolved = r.resolved;
+          l.resolvedBy = r.resolved && r.resolvedBy ? author(r.resolvedBy) : void 0;
+          l.resolvedAt = r.resolvedAt;
+          changed = true;
+        }
+      }
+      return changed;
+    });
+    let pushed = false;
+    for (const l of this.ws.comments.list(canvas)) {
+      if (l.share?.link !== slug) continue;
+      const r = byId.get(l.id);
+      if (!r) continue;
+      const there = new Set(r.messages.map((m) => m.id));
+      for (const m of l.messages) {
+        if (there.has(m.id) || m.author.kind === "client") continue;
+        await call(site, "POST", `/api/shares/${slug}/comments`, { thread: l.id, message: { id: m.id, name: displayName(m.author), text: m.text, at: m.at } });
+        pushed = true;
+      }
+      if (l.resolved !== r.resolved && (l.resolvedAt ?? 0) > (r.resolvedAt ?? 0)) {
+        await call(site, "POST", `/api/shares/${slug}/comments`, { thread: l.id, resolved: l.resolved, name: l.resolvedBy ? displayName(l.resolvedBy) : "Studio" });
+        pushed = true;
+      }
+    }
+    if (pushed) this.remote.delete(slug);
+  }
+};
+function fromRemote(r, slug) {
+  return {
+    id: r.id,
+    frame: r.frame,
+    x: r.x,
+    y: r.y,
+    node: null,
+    resolved: r.resolved,
+    ...r.resolved && r.resolvedBy ? { resolvedBy: author(r.resolvedBy) } : {},
+    ...r.resolvedAt ? { resolvedAt: r.resolvedAt } : {},
+    messages: r.messages.map(message),
+    createdAt: r.createdAt,
+    share: { link: slug, version: r.version }
+  };
+}
+var author = (a) => ({ name: a.name, kind: a.kind === "client" ? "client" : "user" });
+var message = (m) => ({ id: m.id, author: author(m.author), text: m.text, at: m.at });
+function displayName(a) {
+  if (a.kind !== "agent") return a.name;
+  const base = a.name.replace(/[-_ ]?(code|cli|agent)$/i, "") || a.name;
+  return base.charAt(0).toUpperCase() + base.slice(1);
+}
+async function call(site, method, route, body) {
+  const res = await fetch(site.url + route, {
+    method,
+    headers: { authorization: `Bearer ${site.token}`, ...body ? { "content-type": "application/json" } : {} },
+    body: body ? JSON.stringify(body) : void 0,
+    signal: AbortSignal.timeout(2e4)
+  });
+  if (!res.ok) throw new Error(`Review site ${res.status}`);
+  return res.json();
+}
+
 // src/server/http.ts
 var MIME = {
   ".html": "text/html; charset=utf-8",
@@ -1226,7 +1801,14 @@ var MIME = {
   ".svg": "image/svg+xml",
   ".woff2": "font/woff2",
   ".png": "image/png",
-  ".json": "application/json"
+  ".json": "application/json",
+  ".jpg": "image/jpeg",
+  ".webp": "image/webp",
+  ".avif": "image/avif",
+  ".gif": "image/gif",
+  ".woff": "font/woff",
+  ".ttf": "font/ttf",
+  ".ico": "image/x-icon"
 };
 async function startServer(ws) {
   const { config } = ws;
@@ -1234,6 +1816,8 @@ async function startServer(ws) {
   const shots = new Screenshotter(config.appUrl);
   let prCache = null;
   const thumbs = new Thumbnails(ws, shots);
+  const commentSync = new CommentSync(ws);
+  commentSync.start();
   const syncRegistry = () => ws.catalog.load().then((list) => syncComponentRegistry(config, list)).catch(() => {
   });
   void syncRegistry();
@@ -1299,8 +1883,9 @@ async function startServer(ws) {
       case "GET /api/state":
         return json(res, 200, {
           appUrl: config.appUrl,
+          framework: config.framework,
           root: config.root,
-          projectName: path4.basename(config.root),
+          projectName: path7.basename(config.root),
           canvases: ws.canvases(),
           darkMode: config.darkMode,
           agents: [...ws.agents.values()],
@@ -1332,11 +1917,11 @@ async function startServer(ws) {
         await ws.git.fetch();
         return json(res, 200, { ...await ws.git.status(), linked: ws.designFiles() });
       case "POST /api/git/commit": {
-        const { message, scope } = await readJson(req);
+        const { message: message2, scope } = await readJson(req);
         const status = await ws.git.status();
         const linked = new Set(ws.designFiles());
         const files = status.files.map((f) => f.path).filter((f) => scope === "all" || f.startsWith(`${config.canvasDir}/`) || linked.has(f));
-        const hash = await ws.git.commit(message, files);
+        const hash = await ws.git.commit(message2, files);
         ws.emit({ type: "git" });
         return json(res, 200, { hash });
       }
@@ -1450,7 +2035,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 = fs4.existsSync(path4.join(config.root, file)) ? fs4.readFileSync(path4.join(config.root, file), "utf8") : null;
+            const now = fs6.existsSync(path7.join(config.root, file)) ? fs6.readFileSync(path7.join(config.root, file), "utf8") : null;
             if (old !== now) {
               files[file] = old;
               touched.add(f.frameName);
@@ -1580,12 +2165,26 @@ async function startServer(ws) {
       }
       case "POST /api/open-file": {
         const { file } = await readJson(req);
-        const abs = path4.resolve(config.root, file);
-        const rel = path4.relative(config.root, abs);
-        if (rel.startsWith("..") || path4.isAbsolute(rel)) return json(res, 400, { error: "Outside project." });
+        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." });
         launchEditor(abs, config.editor);
         return json(res, 200, { ok: true });
       }
+      case "GET /api/share/status": {
+        const site = reviewSite();
+        return json(res, 200, { site: site ? site.url : null });
+      }
+      case "POST /api/share/snapshot": {
+        const { canvas, frames, local, title, password } = 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;
+        if (published) commentSync.forget(canvas);
+        return json(res, 200, { manifest, preview, published });
+      }
       case "POST /api/source": {
         const { canvas, id } = await readJson(req);
         const hit = ws.nodeSource(canvas, id);
@@ -1596,23 +2195,32 @@ async function startServer(ws) {
     return json(res, 404, { error: `No route ${route}` });
   }
   function serveStatic(res, pathname) {
-    let file = path4.join(editorDir, pathname === "/" ? "index.html" : pathname);
-    if (!inside(editorDir, file) || !fs4.existsSync(file) || fs4.statSync(file).isDirectory()) file = path4.join(editorDir, "index.html");
-    if (!fs4.existsSync(file)) {
+    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");
+    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 = path4.extname(file);
+    const ext = path7.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" });
-    fs4.createReadStream(file).on("error", () => res.destroy()).pipe(res);
+    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");
+    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": "*" });
+    fs6.createReadStream(file).on("error", () => res.destroy()).pipe(res);
   }
   const server = http.createServer(async (req, res) => {
     try {
       if (!allowedHosts.has(req.headers.host ?? "")) return json(res, 403, { error: "Forbidden host" });
+      const url = new URL(req.url ?? "/", origin);
+      if (req.method === "GET" && url.pathname.startsWith("/share/")) return serveShare(res, url.pathname.slice("/share/".length));
       const reqOrigin = req.headers.origin;
       if (reqOrigin && !allowedOrigins.has(reqOrigin)) return json(res, 403, { error: "Forbidden origin" });
-      const url = new URL(req.url ?? "/", origin);
       if (url.pathname === "/mcp") return await handleMcp(req, res);
       if (url.pathname.startsWith("/api/")) return await handleApi(req, res, url);
       if (req.method === "GET") return serveStatic(res, url.pathname);
@@ -1624,8 +2232,8 @@ async function startServer(ws) {
       else res.end();
     }
   });
-  const canvasDir = path4.join(config.root, config.canvasDir);
-  fs4.mkdirSync(canvasDir, { recursive: true });
+  const canvasDir = path7.join(config.root, config.canvasDir);
+  fs6.mkdirSync(canvasDir, { recursive: true });
   const pending = /* @__PURE__ */ new Map();
   const onCanvasFile = (filename) => {
     if (!filename) return;
@@ -1650,7 +2258,7 @@ async function startServer(ws) {
   const watchCanvasDir = () => {
     let ino = null;
     try {
-      ino = fs4.statSync(canvasDir).ino;
+      ino = fs6.statSync(canvasDir).ino;
     } catch {
       ino = null;
     }
@@ -1659,21 +2267,21 @@ async function startServer(ws) {
     canvasWatcher = null;
     watchedIno = ino;
     if (ino === null) return;
-    canvasWatcher = fs4.watch(canvasDir, (_event, filename) => onCanvasFile(filename));
+    canvasWatcher = fs6.watch(canvasDir, (_event, filename) => onCanvasFile(filename));
     canvasWatcher.on("error", () => {
       canvasWatcher?.close();
       canvasWatcher = null;
     });
-    for (const f of fs4.readdirSync(canvasDir)) onCanvasFile(f);
+    for (const f of fs6.readdirSync(canvasDir)) onCanvasFile(f);
   };
   watchCanvasDir();
   setInterval(watchCanvasDir, 2e3).unref();
-  const appDirAbs = path4.join(config.root, config.appDir);
-  if (fs4.existsSync(appDirAbs)) {
+  const appDirAbs = path7.join(config.root, config.appDir);
+  if (config.framework === "next" && fs6.existsSync(appDirAbs)) {
     const appPending = /* @__PURE__ */ new Map();
-    const appWatcher = fs4.watch(appDirAbs, { recursive: true }, (_event, filename) => {
+    const appWatcher = fs6.watch(appDirAbs, { recursive: true }, (_event, filename) => {
       if (!filename || !/(^|[\\/])(page|layout)\.[jt]sx$/.test(filename) || /^truecanvas[\\/]/.test(filename)) return;
-      const rel = path4.join(config.appDir, filename).split(path4.sep).join("/");
+      const rel = path7.join(config.appDir, filename).split(path7.sep).join("/");
       clearTimeout(appPending.get(rel));
       appPending.set(
         rel,
@@ -1690,9 +2298,9 @@ async function startServer(ws) {
   }
   let catalogTimer;
   for (const dir of componentRoots(config.components)) {
-    const abs = path4.join(config.root, dir);
-    if (!fs4.existsSync(abs)) continue;
-    const componentWatcher = fs4.watch(abs, { recursive: true }, () => {
+    const abs = path7.join(config.root, dir);
+    if (!fs6.existsSync(abs)) continue;
+    const componentWatcher = fs6.watch(abs, { recursive: true }, () => {
       clearTimeout(catalogTimer);
       catalogTimer = setTimeout(() => {
         ws.catalog.invalidate();
@@ -1707,6 +2315,7 @@ async function startServer(ws) {
     server.listen(config.port, "127.0.0.1", resolve);
   });
   const shutdown = async () => {
+    commentSync.stop();
     await shots.close();
     for (const t of transports.values()) await t.close().catch(() => {
     });
@@ -1726,8 +2335,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 = path4.relative(dir, file);
-  return !!rel && !rel.startsWith("..") && !path4.isAbsolute(rel);
+  const rel = path7.relative(dir, file);
+  return !!rel && !rel.startsWith("..") && !path7.isAbsolute(rel);
 }
 
 // src/server/stdio.ts
@@ -1765,11 +2374,14 @@ async function runStdioBridge(mcpUrl) {
   await server.connect(new StdioServerTransport());
 }
 
+// src/cli/index.ts
+import { createRequire } from "module";
+
 // src/hub/server.ts
 import http2 from "http";
-import fs8 from "fs";
-import os5 from "os";
-import path8 from "path";
+import fs10 from "fs";
+import os6 from "os";
+import path11 from "path";
 import { randomUUID as randomUUID2 } from "crypto";
 import { fileURLToPath as fileURLToPath2 } from "url";
 import { Server as Server2 } from "@modelcontextprotocol/sdk/server/index.js";
@@ -1779,42 +2391,42 @@ import { StreamableHTTPClientTransport as StreamableHTTPClientTransport2 } from
 import { CallToolRequestSchema as CallToolRequestSchema2, ListToolsRequestSchema as ListToolsRequestSchema2, isInitializeRequest as isInitializeRequest2 } from "@modelcontextprotocol/sdk/types.js";
 
 // src/hub/projects.ts
-import fs5 from "fs";
-import os2 from "os";
-import path5 from "path";
-var CONFIG_DIR = path5.join(process.env.XDG_CONFIG_HOME ?? path5.join(os2.homedir(), ".config"), "truecanvas");
-var FILE = path5.join(CONFIG_DIR, "projects.json");
+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");
 var ProjectStore = class {
   list = [];
   constructor() {
     try {
-      this.list = JSON.parse(fs5.readFileSync(FILE, "utf8"));
+      this.list = JSON.parse(fs7.readFileSync(FILE, "utf8"));
     } catch {
       this.list = [];
     }
   }
   save() {
-    fs5.mkdirSync(CONFIG_DIR, { recursive: true });
-    fs5.writeFileSync(FILE, JSON.stringify(this.list, null, 2));
+    fs7.mkdirSync(CONFIG_DIR, { recursive: true });
+    fs7.writeFileSync(FILE, JSON.stringify(this.list, null, 2));
   }
   all() {
     return [...this.list].sort((a, b) => b.lastOpened - a.lastOpened).map((p) => ({ ...p, ...inspect(p.path) }));
   }
   touch(dir) {
-    const abs = path5.resolve(dir);
+    const abs = path8.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 !== path5.resolve(dir));
+    this.list = this.list.filter((p) => p.path !== path8.resolve(dir));
     this.save();
   }
 };
 function readPkg(dir) {
   try {
-    return JSON.parse(fs5.readFileSync(path5.join(dir, "package.json"), "utf8"));
+    return JSON.parse(fs7.readFileSync(path8.join(dir, "package.json"), "utf8"));
   } catch {
     return null;
   }
@@ -1822,24 +2434,24 @@ function readPkg(dir) {
 function projectName(dir) {
   const pkg = readPkg(dir);
   const name = typeof pkg?.name === "string" ? pkg.name : "";
-  return name && !name.startsWith("@") ? name : path5.basename(dir);
+  return name && !name.startsWith("@") ? name : path8.basename(dir);
 }
 function inspect(dir) {
   const pkg = readPkg(dir);
-  if (!pkg) return { next: false, ready: false, canvases: 0, exists: fs5.existsSync(dir) };
+  if (!pkg) return { next: false, ready: false, canvases: 0, exists: fs7.existsSync(dir) };
   const deps = { ...pkg.dependencies, ...pkg.devDependencies };
   let canvases = 0;
   for (const d of ["canvas", "src/canvas"]) {
     try {
-      canvases += fs5.readdirSync(path5.join(dir, d)).filter((f) => f.endsWith(".canvas.tsx")).length;
+      canvases += fs7.readdirSync(path8.join(dir, d)).filter((f) => f.endsWith(".canvas.tsx")).length;
     } catch {
     }
   }
-  return { next: "next" in deps, ready: "truecanvas" in deps, canvases, exists: true };
+  return { next: "next" in deps || "vite" in deps && "react" in deps, ready: "truecanvas" in deps, canvases, exists: true };
 }
 function discover() {
-  const home = os2.homedir();
-  const roots = ["Github", "GitHub", "github", "Projects", "projects", "code", "Code", "dev", "src", "Developer", "Documents", "work"].map((d) => path5.join(home, d)).filter((d) => fs5.existsSync(d));
+  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 found = [];
   let visited = 0;
   const walk = (dir, depth) => {
@@ -1847,7 +2459,7 @@ function discover() {
     visited++;
     let entries;
     try {
-      entries = fs5.readdirSync(dir, { withFileTypes: true });
+      entries = fs7.readdirSync(dir, { withFileTypes: true });
     } catch {
       return;
     }
@@ -1857,31 +2469,31 @@ 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(path5.join(dir, e.name), depth + 1);
+      walk(path8.join(dir, e.name), depth + 1);
     }
   };
   for (const r of roots) walk(r, 0);
   return found;
 }
 function listDirs(dir) {
-  const abs = path5.resolve(dir.replace(/^~(?=$|\/)/, os2.homedir()));
-  const dirs = fs5.readdirSync(abs, { withFileTypes: true }).filter((e) => e.isDirectory() && !e.name.startsWith(".") && e.name !== "node_modules").map((e) => ({ name: e.name, next: inspect(path5.join(abs, e.name)).next })).sort((a, b) => Number(b.next) - Number(a.next) || a.name.localeCompare(b.name));
+  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));
   return { path: abs, dirs };
 }
 
 // src/hub/runner.ts
 import { execFile, spawn as spawn2 } from "child_process";
-import fs7 from "fs";
+import fs9 from "fs";
 import net from "net";
-import os4 from "os";
-import path7 from "path";
+import os5 from "os";
+import path10 from "path";
 
 // src/cli/setup.ts
 import { spawn } from "child_process";
 import { createHash as createHash2 } from "crypto";
-import fs6 from "fs";
-import os3 from "os";
-import path6 from "path";
+import fs8 from "fs";
+import os4 from "os";
+import path9 from "path";
 function addDevArgs(pm, spec) {
   return addArgs(pm, [spec], true);
 }
@@ -1889,65 +2501,66 @@ function runScript(pm, script) {
   return pm === "npm" ? `npm run ${script}` : `${pm} ${script}`;
 }
 var execInherit = (cmd, args, cwd) => new Promise((resolve, reject) => {
-  const p = spawn(cmd, args, { cwd, stdio: "inherit", env: toolEnv() });
+  const safe = shellSafe(cmd, args);
+  const p = spawn(safe.cmd, safe.args, { cwd, stdio: "inherit", env: toolEnv(), shell: safe.shell });
   p.on("error", reject);
   p.on("exit", (code) => code === 0 ? resolve() : reject(new Error(`${cmd} ${args.join(" ")} exited with ${code}`)));
 });
 function packageDir(cliFile) {
-  return path6.resolve(path6.dirname(cliFile), "..");
+  return path9.resolve(path9.dirname(cliFile), "..");
 }
 function packageVersion(pkgDir) {
   try {
-    return JSON.parse(fs6.readFileSync(path6.join(pkgDir, "package.json"), "utf8")).version;
+    return JSON.parse(fs8.readFileSync(path9.join(pkgDir, "package.json"), "utf8")).version;
   } catch {
     return "0.0.0";
   }
 }
 function isSourceCheckout(pkgDir) {
-  return !pkgDir.split(path6.sep).includes("node_modules") && fs6.existsSync(path6.join(pkgDir, "src", "cli"));
+  return !pkgDir.split(path9.sep).includes("node_modules") && fs8.existsSync(path9.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 = path6.join(os3.homedir(), ".cache", "truecanvas");
-  fs6.mkdirSync(cacheDir, { recursive: true });
-  const file = path6.join(cacheDir, `truecanvas-${version}.tgz`);
+  const cacheDir = path9.join(os4.homedir(), ".cache", "truecanvas");
+  fs8.mkdirSync(cacheDir, { recursive: true });
+  const file = path9.join(cacheDir, `truecanvas-${version}.tgz`);
   await exec("npm", ["pack", "--silent", "--pack-destination", cacheDir], pkgDir);
-  const hash = createHash2("sha256").update(fs6.readFileSync(file)).digest("hex").slice(0, 10);
-  const named = path6.join(cacheDir, `truecanvas-${version}-${hash}.tgz`);
-  fs6.renameSync(file, named);
+  const hash = createHash2("sha256").update(fs8.readFileSync(file)).digest("hex").slice(0, 10);
+  const named = path9.join(cacheDir, `truecanvas-${version}-${hash}.tgz`);
+  fs8.renameSync(file, named);
   return named;
 }
 function installedIn(root) {
   let declared = false;
   try {
-    const pkg = JSON.parse(fs6.readFileSync(path6.join(root, "package.json"), "utf8"));
+    const pkg = JSON.parse(fs8.readFileSync(path9.join(root, "package.json"), "utf8"));
     declared = "truecanvas" in { ...pkg.dependencies, ...pkg.devDependencies };
   } catch {
   }
-  const file = path6.join(root, "node_modules", "truecanvas", "package.json");
-  const installed = fs6.existsSync(file);
-  return { declared, installed, version: installed ? packageVersion(path6.dirname(file)) : null };
+  const file = path9.join(root, "node_modules", "truecanvas", "package.json");
+  const installed = fs8.existsSync(file);
+  return { declared, installed, version: installed ? packageVersion(path9.dirname(file)) : null };
 }
 function readPackage(root) {
   try {
-    return JSON.parse(fs6.readFileSync(path6.join(root, "package.json"), "utf8"));
+    return JSON.parse(fs8.readFileSync(path9.join(root, "package.json"), "utf8"));
   } catch {
     return null;
   }
 }
 function depVersion(root, name) {
-  const file = path6.join(root, "node_modules", name, "package.json");
-  if (fs6.existsSync(file)) return packageVersion(path6.dirname(file));
+  const file = path9.join(root, "node_modules", name, "package.json");
+  if (fs8.existsSync(file)) return packageVersion(path9.dirname(file));
   const pkg = readPackage(root);
   return pkg ? { ...pkg.dependencies, ...pkg.devDependencies }[name] ?? null : null;
 }
 function mergeJson(file, update) {
   let data2 = {};
-  if (fs6.existsSync(file)) {
+  if (fs8.existsSync(file)) {
     try {
-      data2 = JSON.parse(fs6.readFileSync(file, "utf8"));
+      data2 = JSON.parse(fs8.readFileSync(file, "utf8"));
     } catch {
       throw new Error(`${file} isn't valid JSON; fix it or remove it, then run connect again.`);
     }
@@ -1955,24 +2568,24 @@ function mergeJson(file, update) {
   const before = JSON.stringify(data2);
   update(data2);
   if (JSON.stringify(data2) === before) return "unchanged";
-  fs6.mkdirSync(path6.dirname(file), { recursive: true });
-  fs6.writeFileSync(file, `${JSON.stringify(data2, null, 2)}
+  fs8.mkdirSync(path9.dirname(file), { recursive: true });
+  fs8.writeFileSync(file, `${JSON.stringify(data2, null, 2)}
 `);
   return "written";
 }
 function connectAgents(root, port, opts = {}) {
   const url = `http://localhost:${port}/mcp`;
   const out = { written: [], unchanged: [] };
-  const add = (rel, update) => out[mergeJson(path6.join(root, rel), update)].push(rel);
+  const add = (rel, update) => out[mergeJson(path9.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 || fs6.existsSync(path6.join(root, ".cursor"))) add(".cursor/mcp.json", (d) => void (servers(d, "mcpServers").truecanvas = { url }));
-  if (opts.vscode || fs6.existsSync(path6.join(root, ".vscode"))) add(".vscode/mcp.json", (d) => void (servers(d, "servers").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 }));
   return out;
 }
 function hasAgentConfig(root, port) {
   try {
-    const d = JSON.parse(fs6.readFileSync(path6.join(root, ".mcp.json"), "utf8"));
+    const d = JSON.parse(fs8.readFileSync(path9.join(root, ".mcp.json"), "utf8"));
     const url = d?.mcpServers?.truecanvas?.url;
     return typeof url === "string" && (port === void 0 || url.includes(`:${port}/`));
   } catch {
@@ -2025,7 +2638,7 @@ var Runner = class {
     return next;
   }
   async start(dir) {
-    if (!fs7.existsSync(path7.join(dir, "package.json"))) throw new Error(`${dir} isn't there anymore (or has no package.json).`);
+    if (!fs9.existsSync(path10.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,
@@ -2120,7 +2733,8 @@ var Runner = class {
 };
 function killTree(proc, signal) {
   try {
-    if (process.platform !== "win32" && proc.pid) process.kill(-proc.pid, signal);
+    if (process.platform === "win32" && proc.pid) spawn2("taskkill", ["/pid", String(proc.pid), "/T", "/F"], { stdio: "ignore" }).on("error", () => proc.kill());
+    else if (proc.pid) process.kill(-proc.pid, signal);
     else proc.kill(signal);
   } catch {
     proc.kill(signal);
@@ -2136,7 +2750,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 = fs7.existsSync(path7.join(cwd, "node_modules", "truecanvas", "package.json"));
+    const installed = fs9.existsSync(path10.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)");
   }
@@ -2144,9 +2758,10 @@ async function install(job, cmd, args, cwd) {
 function run2(job, cmd, args, cwd) {
   job.log.push(`$ ${cmd} ${args.join(" ")}`);
   return new Promise((resolve, reject) => {
-    const p = spawn2(cmd, args, { cwd, env: toolEnv({ CI: "1", FORCE_COLOR: "0" }), stdio: ["ignore", "pipe", "pipe"], shell: process.platform === "win32" });
+    const safe = shellSafe(cmd, args);
+    const p = spawn2(safe.cmd, safe.args, { cwd, env: toolEnv({ CI: "1", FORCE_COLOR: "0" }), stdio: ["ignore", "pipe", "pipe"], shell: safe.shell });
     const capture2 = (c2) => {
-      for (const line of c2.toString().split("\n")) if (line.trim()) job.log.push(line.replace(/\x1b\[[0-9;?]*[a-zA-Z]/g, ""));
+      for (const line of c2.toString().split(/\r?\n/)) if (line.trim()) job.log.push(line.replace(/\x1b\[[0-9;?]*[a-zA-Z]/g, ""));
       if (job.log.length > 300) job.log.splice(0, job.log.length - 300);
     };
     p.stdout.on("data", capture2);
@@ -2172,11 +2787,11 @@ function packageManager(dir) {
   return { cmd: pm, add: addArgs(pm, [], true) };
 }
 async function preferredPm() {
-  const { ok } = await capture("pnpm", ["--version"], os4.homedir());
+  const { ok } = await capture("pnpm", ["--version"], os5.homedir());
   return ok ? "pnpm" : "npm";
 }
 function setupJob(dir, pkgDir, cli) {
-  return startJob(`Set up ${path7.basename(dir)}`, async (job) => {
+  return startJob(`Set up ${path10.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);
@@ -2186,12 +2801,12 @@ 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 = path7.resolve(parent.replace(/^~(?=$|\/)/, os4.homedir()));
-  const dir = path7.join(parentDir, safe);
+  const parentDir = path10.resolve(parent.replace(/^~(?=$|[\\/])/, os5.homedir()));
+  const dir = path10.join(parentDir, safe);
   return startJob(`Create ${safe}`, async (job) => {
     if (!safe) throw new Error("Pick a project name.");
-    if (fs7.existsSync(dir)) throw new Error(`${dir} already exists.`);
-    fs7.mkdirSync(parentDir, { recursive: true });
+    if (fs9.existsSync(dir)) throw new Error(`${dir} already exists.`);
+    fs9.mkdirSync(parentDir, { recursive: true });
     const pm = await preferredPm();
     await run2(job, "npx", ["--yes", "create-next-app@latest", safe, "--ts", "--tailwind", "--app", "--eslint", "--no-src-dir", "--import-alias", "@/*", `--use-${pm}`, "--turbopack", "--yes"], parentDir);
     const source = await packageSpec(pkgDir, (cmd, args, cwd) => run2(job, cmd, args, cwd));
@@ -2202,31 +2817,32 @@ function createJob(name, parent, pkgDir, cli) {
 }
 function capture(cmd, args, cwd) {
   return new Promise((resolve) => {
+    const safe = shellSafe(cmd, args);
     execFile(
-      cmd,
-      args,
-      { cwd, timeout: 6e4, maxBuffer: 8 * 1024 * 1024, env: { ...process.env, GH_PROMPT_DISABLED: "1", GIT_TERMINAL_PROMPT: "0" } },
+      safe.cmd,
+      safe.args,
+      { shell: safe.shell, cwd, timeout: 6e4, maxBuffer: 8 * 1024 * 1024, env: { ...process.env, GH_PROMPT_DISABLED: "1", GIT_TERMINAL_PROMPT: "0" } },
       (err, stdout, stderr) => resolve({ ok: !err, out: err ? (stderr || err.message).trim() : stdout })
     );
   });
 }
 function cloneJob(repo, parent, pkgDir, cli) {
-  const parentDir = path7.resolve(parent.replace(/^~(?=$|\/)/, os4.homedir()));
+  const parentDir = path10.resolve(parent.replace(/^~(?=$|[\\/])/, os5.homedir()));
   const name = repo.replace(/\.git$/, "").split(/[/:]/).pop() ?? "";
-  const dir = path7.join(parentDir, name);
+  const dir = path10.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 (fs7.existsSync(dir)) throw new Error(`${dir} already exists. Open it with Open folder instead.`);
-    fs7.mkdirSync(parentDir, { recursive: true });
+    if (fs9.existsSync(dir)) throw new Error(`${dir} already exists. Open it with Open folder instead.`);
+    fs9.mkdirSync(parentDir, { recursive: true });
     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 (!fs7.existsSync(path7.join(dir, "package.json"))) throw new Error("Cloned, but there's no package.json at the root: Truecanvas needs a Next.js app.");
+    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.");
     const pm = packageManager(dir);
     await install(job, pm.cmd, ["install"], dir).catch(async (err) => {
-      if (!fs7.existsSync(path7.join(dir, "node_modules"))) throw err;
+      if (!fs9.existsSync(path10.join(dir, "node_modules"))) throw err;
     });
-    const pkg = JSON.parse(fs7.readFileSync(path7.join(dir, "package.json"), "utf8"));
+    const pkg = JSON.parse(fs9.readFileSync(path10.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);
@@ -2245,13 +2861,13 @@ var MIME2 = {
   ".woff2": "font/woff2",
   ".png": "image/png"
 };
-var HUB_INSTRUCTIONS = `Truecanvas hub: several projects, each a Next.js app with canvases of real React components.
+var HUB_INSTRUCTIONS = `Truecanvas hub: several projects, each a Next.js or Vite + React app with canvases of real React components.
 Your tools act on the current project (the active tab in the Truecanvas window, unless you pick one with open_project).
 Use list_projects to see them. All other tools are the regular Truecanvas canvas tools for that project.`;
 async function startHub(opts) {
   const store = new ProjectStore();
   const editorDir = fileURLToPath2(new URL("./editor/", import.meta.url));
-  const pkgDir = path8.resolve(path8.dirname(opts.cli), "..");
+  const pkgDir = path11.resolve(path11.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();
@@ -2356,7 +2972,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 || path8.basename(x.path).toLowerCase() === q);
+        const p = store.all().find((x) => x.name.toLowerCase() === q || x.path.toLowerCase() === q || path11.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);
@@ -2411,8 +3027,8 @@ 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[path8.extname(icon)] ?? "application/octet-stream", "cache-control": "private, max-age=300" });
-        return fs8.createReadStream(icon).on("error", () => res.destroy()).pipe(res);
+        res.writeHead(200, { "content-type": ICON_MIME[path11.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":
         return json2(res, 200, listDirs(url.searchParams.get("path") || "~"));
@@ -2423,8 +3039,8 @@ async function startHub(opts) {
         req.on("close", () => clients.delete(res));
         return;
       case "POST /api/hub/add": {
-        const dir = path8.resolve(body.path.replace(/^~(?=$|\/)/, process.env.HOME ?? "~"));
-        if (!fs8.existsSync(path8.join(dir, "package.json"))) return json2(res, 400, { error: "No package.json in that folder. Pick the root of a Next.js app." });
+        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." });
         store.touch(dir);
         broadcast();
         return json2(res, 200, { path: dir, ready: store.all().find((p) => p.path === dir)?.ready ?? false });
@@ -2463,7 +3079,7 @@ async function startHub(opts) {
         return json2(res, 200, createJob(body.name, body.parent, pkgDir, opts.cli));
       // ---------- GitHub ----------
       case "GET /api/hub/github/repos": {
-        const r = await capture("gh", ["repo", "list", "--limit", "100", "--json", "nameWithOwner,description,updatedAt,isPrivate"], os5.homedir());
+        const r = await capture("gh", ["repo", "list", "--limit", "100", "--json", "nameWithOwner,description,updatedAt,isPrivate"], os6.homedir());
         if (!r.ok) return json2(res, 200, { gh: false, error: r.out.split("\n")[0], repos: [] });
         const repos = JSON.parse(r.out).sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
         return json2(res, 200, { gh: true, repos });
@@ -2508,14 +3124,14 @@ async function startHub(opts) {
     return json2(res, 404, { error: `No route ${route}` });
   }
   function serveStatic(res, pathname) {
-    let file = path8.join(editorDir, pathname === "/" ? "hub.html" : pathname);
-    if (!inside2(editorDir, file) || !fs8.existsSync(file) || fs8.statSync(file).isDirectory()) file = path8.join(editorDir, "hub.html");
-    if (!fs8.existsSync(file)) {
+    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");
+    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[path8.extname(file)] ?? "application/octet-stream", "cache-control": pathname.startsWith("/assets/") ? "public, max-age=31536000, immutable" : "no-cache" });
-    fs8.createReadStream(file).on("error", () => res.destroy()).pipe(res);
+    res.writeHead(200, { "content-type": MIME2[path11.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) => {
     try {
@@ -2547,27 +3163,27 @@ 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 || !fs8.existsSync(path8.join(dir, "package.json"))) return null;
+  if (!dir || !fs10.existsSync(path11.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 = path8.join(dir, root, name);
-      if (fs8.existsSync(file) && fs8.statSync(file).size < 2e6) return file;
+      const file = path11.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 = fs8.readdirSync(path8.join(dir, root), { withFileTypes: true });
+      entries = fs10.readdirSync(path11.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 = path8.join(dir, root, e.name, name);
-        if (fs8.existsSync(file)) return file;
+        const file = path11.join(dir, root, e.name, name);
+        if (fs10.existsSync(file)) return file;
       }
     }
   }
@@ -2578,14 +3194,14 @@ function json2(res, status, body) {
   res.end(JSON.stringify(body));
 }
 function inside2(dir, file) {
-  const rel = path8.relative(dir, file);
-  return !!rel && !rel.startsWith("..") && !path8.isAbsolute(rel);
+  const rel = path11.relative(dir, file);
+  return !!rel && !rel.startsWith("..") && !path11.isAbsolute(rel);
 }
 
 // src/hub/desktop.ts
-import fs9 from "fs";
-import os6 from "os";
-import path9 from "path";
+import fs11 from "fs";
+import os7 from "os";
+import path12 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>
@@ -2599,15 +3215,15 @@ 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 ?? path9.join(os6.homedir(), ".local", "share");
+var data = () => process.env.XDG_DATA_HOME ?? path12.join(os7.homedir(), ".local", "share");
 function installDesktop(cli, port) {
-  const dir = path9.join(data(), "truecanvas");
-  fs9.mkdirSync(dir, { recursive: true });
-  const icon = path9.join(dir, "icon.svg");
-  fs9.writeFileSync(icon, ICON);
-  const launcher = path9.join(dir, "launch.sh");
+  const dir = path12.join(data(), "truecanvas");
+  fs11.mkdirSync(dir, { recursive: true });
+  const icon = path12.join(dir, "icon.svg");
+  fs11.writeFileSync(icon, ICON);
+  const launcher = path12.join(dir, "launch.sh");
   const url = `http://localhost:${port}`;
-  fs9.writeFileSync(
+  fs11.writeFileSync(
     launcher,
     `#!/bin/sh
 # Truecanvas launcher: start the hub if needed, then open its window.
@@ -2616,7 +3232,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([path9.dirname(process.execPath), ...(process.env.PATH ?? "").split(path9.delimiter)].filter((p, i, a) => p && a.indexOf(p) === i).join(path9.delimiter))}
+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))}
 mkdir -p "$(dirname "$LOG")"
 
 if ! curl -sf "$URL/api/hub/state" >/dev/null 2>&1; then
@@ -2625,7 +3241,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(path9.join(dir, "window"))}
+PROFILE=${JSON.stringify(path12.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
@@ -2635,10 +3251,10 @@ exec xdg-open "$URL"
 `,
     { mode: 493 }
   );
-  const apps = path9.join(data(), "applications");
-  fs9.mkdirSync(apps, { recursive: true });
-  const desktop = path9.join(apps, "truecanvas.desktop");
-  fs9.writeFileSync(
+  const apps = path12.join(data(), "applications");
+  fs11.mkdirSync(apps, { recursive: true });
+  const desktop = path12.join(apps, "truecanvas.desktop");
+  fs11.writeFileSync(
     desktop,
     `[Desktop Entry]
 Type=Application
@@ -2654,11 +3270,11 @@ StartupWMClass=Truecanvas
 StartupNotify=true
 `
   );
-  let command = path9.join(os6.homedir(), ".local", "bin", "truecanvas");
-  const ours = !fs9.existsSync(command) || fs9.readFileSync(command, "utf8").includes("# truecanvas wrapper");
+  let command = path12.join(os7.homedir(), ".local", "bin", "truecanvas");
+  const ours = !fs11.existsSync(command) || fs11.readFileSync(command, "utf8").includes("# truecanvas wrapper");
   if (ours) {
-    fs9.mkdirSync(path9.dirname(command), { recursive: true });
-    fs9.writeFileSync(command, `#!/bin/sh
+    fs11.mkdirSync(path12.dirname(command), { recursive: true });
+    fs11.writeFileSync(command, `#!/bin/sh
 # truecanvas wrapper (installed by \`truecanvas desktop\`)
 exec ${JSON.stringify(process.execPath)} ${JSON.stringify(cli)} "$@"
 `, { mode: 493 });
@@ -2666,19 +3282,19 @@ exec ${JSON.stringify(process.execPath)} ${JSON.stringify(cli)} "$@"
   return { desktop, launcher, icon, command };
 }
 function launcherPath() {
-  const p = path9.join(data(), "truecanvas", "launch.sh");
-  return fs9.existsSync(p) ? p : null;
+  const p = path12.join(data(), "truecanvas", "launch.sh");
+  return fs11.existsSync(p) ? p : null;
 }
 function uninstallDesktop() {
   const removed = [];
-  const cmd = path9.join(os6.homedir(), ".local", "bin", "truecanvas");
-  if (fs9.existsSync(cmd) && fs9.readFileSync(cmd, "utf8").includes("# truecanvas wrapper")) {
-    fs9.rmSync(cmd);
+  const cmd = path12.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 [path9.join(data(), "applications", "truecanvas.desktop"), path9.join(data(), "truecanvas")]) {
-    if (fs9.existsSync(f)) {
-      fs9.rmSync(f, { recursive: true, force: true });
+  for (const f of [path12.join(data(), "applications", "truecanvas.desktop"), path12.join(data(), "truecanvas")]) {
+    if (fs11.existsSync(f)) {
+      fs11.rmSync(f, { recursive: true, force: true });
       removed.push(f);
     }
   }
@@ -2691,8 +3307,8 @@ import { createInterface } from "readline/promises";
 
 // src/cli/doctor.ts
 import { execFile as execFile2 } from "child_process";
-import fs10 from "fs";
-import path10 from "path";
+import fs12 from "fs";
+import path13 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}`)));
@@ -2701,38 +3317,42 @@ async function doctor(root, cliVersion) {
   const checks = [];
   const add = (c2) => checks.push(c2);
   const node = process.versions.node;
-  add(major(node) >= 20 ? { label: "Node.js", status: "ok", detail: node } : { label: "Node.js", status: "fail", detail: node, fix: "Install Node.js 20 or newer (https://nodejs.org)" });
+  add(major(node) >= 22 ? { label: "Node.js", status: "ok", detail: node } : { label: "Node.js", status: "fail", detail: node, fix: "Install Node.js 22 or newer (24 LTS recommended: https://nodejs.org)" });
   const pkg = readPackage(root);
   if (!pkg) {
-    add({ label: "Project", status: "fail", detail: "no package.json here", fix: "Run truecanvas from the root of your Next.js app, or create one: npm create truecanvas" });
+    add({ label: "Project", status: "fail", detail: "no package.json here", fix: "Run truecanvas from the root of your Next.js or Vite app, or create one: npm create truecanvas" });
     return checks;
   }
   const pm = detectPm(root);
   const next = depVersion(root, "next");
-  if (!next) add({ label: "Next.js", status: "fail", detail: "not a dependency", fix: "Truecanvas works with Next.js (App Router) apps for now. Create one: npm create truecanvas" });
+  const vite = !next ? depVersion(root, "vite") : null;
+  if (vite) add(major(vite) >= 5 ? { label: "Vite", status: "ok", detail: vite } : { label: "Vite", status: "fail", detail: vite, fix: `Upgrade to Vite 5 or newer: ${pm} ${pm === "npm" ? "install -D" : "add -D"} vite@latest` });
+  else if (!next) add({ label: "Next.js or Vite", status: "fail", detail: "neither is a dependency", fix: "Truecanvas works with Next.js (App Router) and Vite + React apps. Create one: npm create truecanvas" });
   else if (major(next) < 15) add({ label: "Next.js", status: "fail", detail: next, fix: `Upgrade to Next.js 15 or newer: ${pm} ${pm === "npm" ? "install" : "add"} next@latest` });
   else add({ label: "Next.js", status: "ok", detail: next });
   const react = depVersion(root, "react");
-  add(react && major(react) >= 19 ? { label: "React", status: "ok", detail: react } : { label: "React", status: "fail", detail: react ?? "missing", fix: "Truecanvas needs React 19 (comes with Next.js 15+)" });
+  add(react && major(react) >= 19 ? { label: "React", status: "ok", detail: react } : { label: "React", status: "fail", detail: react ?? "missing", fix: `Truecanvas needs React 19: ${pm} ${pm === "npm" ? "install" : "add"} react@latest react-dom@latest` });
   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);
-  add(fs10.existsSync(path10.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(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/)" });
   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` });
   else if (tc.version !== cliVersion) add({ label: "Truecanvas in the project", status: "warn", detail: `${tc.version} (this CLI is ${cliVersion})`, fix: `Use the project's version: ${runScript(pm, "canvas")}, or update: ${pm} ${pm === "npm" ? "install -D" : "add -D"} truecanvas@latest` });
   else add({ label: "Truecanvas in the project", status: "ok", detail: tc.version ?? "" });
-  const wrapped = nextConfigStatus(root);
-  add(wrapped.wrapped ? { label: "next.config", status: "ok", detail: `${path10.basename(wrapped.file)} uses withTruecanvas()` } : { label: "next.config", status: "fail", detail: wrapped.file ? "not wrapped" : "missing", fix: "npx truecanvas init" });
+  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" });
   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 = fs10.existsSync(path10.join(root, ".gitignore")) ? fs10.readFileSync(path10.join(root, ".gitignore"), "utf8") : "";
-  add(ignore.includes(`${config.appDir}/truecanvas`) ? { label: "Generated route ignored", status: "ok" } : { label: "Generated route ignored", status: "warn", detail: `${config.appDir}/truecanvas/ isn't in .gitignore`, fix: "npx truecanvas init" });
+  const ignore = fs12.existsSync(path13.join(root, ".gitignore")) ? fs12.readFileSync(path13.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: path10.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: path13.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);
@@ -2746,24 +3366,27 @@ async function doctor(root, cliVersion) {
 var HELP = `truecanvas: design with your real React components
 
 Usage
-  truecanvas           In a Next.js app: set it up (asks once) and start the editor.
+  truecanvas           In a Next.js or Vite app: set it up (asks once) and start the editor.
                        Elsewhere: open the Truecanvas window.
   truecanvas connect   Add Truecanvas to this project's .mcp.json (Claude Code, Cursor,
                        VS Code): commit it and every teammate's agent connects
   truecanvas doctor    Check this project and machine, with a fix for each problem
   truecanvas dev       Start the editor + MCP server for this project (no window)
   truecanvas setup     Install and set up Truecanvas in this project, without starting
-  truecanvas init      Only write the config (next.config, script, canvas folder)
+  truecanvas init      Only write the config (next/vite config, script, canvas folder)
   truecanvas open      Open the Truecanvas window (projects dashboard + tabs)
   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)
+  truecanvas share setup     Connect your studio's review site (URL + REVIEW_TOKEN)
   truecanvas mcp       stdio MCP server for agents without HTTP support
 
 Options
   -y, --yes            Don't ask: set up and connect agents
   --port <n>           Editor/MCP port (default 4800)
-  --app <url>          Your Next.js dev URL (default http://localhost:3000)
-  --no-next            Don't start \`next dev\` (by default it starts when the app isn't running)
+  --app <url>          Your app's dev URL (default http://localhost:3000, Vite :5173)
+  --no-next            Don't start the app's dev server (by default it starts when the app isn't running)
   --no-open            Don't open the editor in your browser
   --cursor, --vscode   connect: also write .cursor/mcp.json / .vscode/mcp.json
   -v, --version        Print the version
@@ -2792,7 +3415,15 @@ async function main() {
       yes: { type: "boolean", short: "y" },
       cursor: { type: "boolean" },
       vscode: { type: "boolean" },
-      version: { type: "boolean", short: "v" }
+      version: { type: "boolean", short: "v" },
+      local: { type: "boolean" },
+      title: { type: "string" },
+      password: { type: "string" },
+      "no-password": { type: "boolean" },
+      revoke: { type: "boolean" },
+      restore: { type: "boolean" },
+      delete: { type: "boolean" },
+      token: { type: "string" }
     }
   });
   const cli = fileURLToPath3(import.meta.url);
@@ -2807,13 +3438,14 @@ async function main() {
   const yes = !!values.yes;
   if (command === "start") {
     const root2 = process.cwd();
-    if (!readPackage(root2) || !("next" in { ...readPackage(root2).dependencies, ...readPackage(root2).devDependencies })) {
+    const deps = { ...readPackage(root2)?.dependencies, ...readPackage(root2)?.devDependencies };
+    if (!("next" in deps) && !("vite" in deps && "react" in deps)) {
       return openWindow(cli, values.port ? Number(values.port) : 4800);
     }
     if (!await ensureSetup(root2, pkgDir, version, yes)) return;
     if (await openInWindow(root2, Number(values.port ?? 4800))) return;
-    const local = path11.join(root2, "node_modules", "truecanvas", "dist", "cli.js");
-    if (fs11.existsSync(local) && fs11.realpathSync(local) !== fs11.realpathSync(cli)) {
+    const local = path14.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));
       child.on("exit", (code) => process.exit(code ?? 0));
@@ -2881,6 +3513,7 @@ async function main() {
     return console.log(`${c.green("\u2713")} Truecanvas quit. Project apps it started are stopped too.`);
   }
   if (command === "desktop") {
+    if (process.platform !== "linux") return console.log(`The app launcher entry is Linux-only for now. Run ${c.accent("truecanvas open")} to open the window.`);
     if (positionals[1] === "remove") {
       const removed = uninstallDesktop();
       console.log(removed.length ? `${c.green("\u2713")} Removed the launcher.` : "Nothing to remove.");
@@ -2894,8 +3527,8 @@ async function main() {
     return;
   }
   const root = process.cwd();
-  if (!fs11.existsSync(path11.join(root, "package.json"))) {
-    console.error("Run truecanvas from your Next.js project root (no package.json here).");
+  if (!fs13.existsSync(path14.join(root, "package.json"))) {
+    console.error("Run truecanvas from your app's root (no package.json here).");
     process.exit(1);
   }
   const config = loadConfig(root, { port: values.port ? Number(values.port) : void 0, appUrl: values.app });
@@ -2904,16 +3537,88 @@ async function main() {
     const report = initProject(config);
     ws.ensureRoute();
     console.log(`
-  ${c.accent("\u25C6")} ${c.bold("Truecanvas")} is set up in ${c.bold(path11.basename(root))}
+  ${c.accent("\u25C6")} ${c.bold("Truecanvas")} is set up in ${c.bold(path14.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.appDir}/truecanvas`)}`);
+    console.log(`  ${c.green("\u2713")} Canvas folder ${c.bold(config.canvasDir)} and dev route ${c.bold(config.routeDir)}`);
     for (const line of report.todo) console.log(`  ${c.dim("!")} ${line}`);
     console.log(`
   Next: ${c.accent("npm run canvas")} ${c.dim("(starts your app and the editor)")}
 `);
     return;
   }
+  if (command === "share") {
+    if (positionals[1] === "setup") {
+      const url = positionals[2] ?? await prompt("Review site URL (e.g. https://review.your-studio.com):");
+      const token = values.token ?? process.env.TRUECANVAS_REVIEW_TOKEN ?? await prompt("Its REVIEW_TOKEN:");
+      try {
+        const { brand } = await connectReviewSite(url, token);
+        console.log(`  ${c.green("\u2713")} Connected to ${c.bold(brand.name)} (${url}). Share with ${c.accent("npx truecanvas share <canvas>")}.`);
+      } catch (err) {
+        console.error(`  ${c.red("\u2717")} ${err.message}`);
+        process.exit(1);
+      }
+      return;
+    }
+    const base = `http://localhost:${config.port}`;
+    const state = await fetch(`${base}/api/state`).then((r) => r.ok ? r.json() : null).catch(() => null);
+    const canvas = positionals[1] ?? (state?.canvases.length === 1 ? state.canvases[0] : null);
+    if (values.delete) {
+      const site = reviewSite();
+      if (!site || !canvas) {
+        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);
+      console.log(done ? `  ${c.green("\u2713")} Deleted the link of ${canvas}, with its versions and comments.` : `  ${canvas} has no link.`);
+      return;
+    }
+    if (values.revoke || values.restore || values["no-password"]) {
+      const site = reviewSite();
+      if (!site || !canvas) {
+        console.error(site ? "Name the canvas: truecanvas share <canvas> --revoke" : `No review site yet: ${c.accent("npx truecanvas share setup")}`);
+        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);
+      console.log(`  ${c.green("\u2713")} ${values.revoke ? "Link revoked" : values.restore ? "Link restored" : "Password removed"}: ${url}`);
+      return;
+    }
+    if (!state) {
+      console.error(`Truecanvas isn't running for this project. Start it first: ${c.accent("npx truecanvas")}`);
+      process.exit(1);
+    }
+    if (!canvas || !state.canvases.includes(canvas)) {
+      console.error(`Which canvas? ${state.canvases.join(", ") || "(none)"}
+  truecanvas share <canvas>`);
+      process.exit(1);
+    }
+    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 body = await res.json();
+    if (!res.ok) {
+      console.error(`  ${c.red("\u2717")} ${body.error}`);
+      process.exit(1);
+    }
+    const { manifest, published } = body;
+    console.log(`  ${c.green("\u2713")} ${manifest.frames.length} frame${manifest.frames.length === 1 ? "" : "s"} frozen: no scripts, no API calls.`);
+    if (manifest.external.length) console.log(`  ${c.yellow("!")} While rendering, the app called ${manifest.external.join(", ")}. Whatever it showed is in the snapshot: use sample data for client links.`);
+    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" : ""})`)}
+`);
+      if (values.open && !values["no-open"]) openBrowser(published.url);
+    } else {
+      console.log(`  ${c.dim("Preview")} ${c.bold(body.preview)}`);
+      if (!values.local) console.log(`  ${c.dim("To send links to clients, connect your review site:")} ${c.accent("npx truecanvas share setup")}`);
+      console.log("");
+      if (values.open && !values["no-open"]) openBrowser(body.preview);
+    }
+    return;
+  }
   if (command === "mcp") {
     console.log = console.error;
     const mcpUrl = `http://localhost:${config.port}/mcp`;
@@ -2934,7 +3639,7 @@ async function main() {
     process.exit(1);
   }
   if (command === "dev" && await openInWindow(root, config.port)) return;
-  const status = nextConfigStatus(root);
+  const status = configStatus(root, config.framework);
   if (!status.wrapped) {
     const report = initProject(config);
     for (const line of report.done) console.log(`  ${c.green("\u2713")} ${line}`);
@@ -2955,13 +3660,14 @@ async function main() {
   const mcp = `${origin}/mcp`;
   let next = null;
   const appUp = await reachable(config.appUrl);
-  if (!appUp && values.next && !values["no-next"]) next = startNext(root, config.appUrl);
+  const devCommand = config.framework === "vite" ? "vite" : "next dev";
+  if (!appUp && values.next && !values["no-next"]) next = startApp(root, config.appUrl, config.framework);
   console.log(`
   ${c.accent("\u25C6")} ${c.bold("Truecanvas")} ${c.dim(`v${version}`)}
 
   ${c.dim("Editor")}   ${c.bold(origin)}
   ${c.dim("MCP")}      ${mcp}
-  ${c.dim("App")}      ${config.appUrl} ${c.dim(appUp ? "(already running)" : next ? "(starting next dev\u2026)" : "(not running)")}
+  ${c.dim("App")}      ${config.appUrl} ${c.dim(appUp ? "(already running)" : next ? `(starting ${devCommand}\u2026)` : "(not running)")}
   ${c.dim("Canvases")} ${ws.canvases().join(", ") || "none"}
 
 ${hasAgentConfig(root, config.port) ? `  ${c.dim("Agents")}   connected through .mcp.json` : `  ${c.dim("Connect your agent:")} ${c.accent("npx truecanvas connect")} ${c.dim("(writes .mcp.json; commit it for your team)")}`}
@@ -2971,9 +3677,9 @@ ${hasAgentConfig(root, config.port) ? `  ${c.dim("Agents")}   connected through
     const result = await Promise.race([waitFor(config.appUrl, 9e4), exited]);
     if (result === true) console.log(`  ${c.green("\u2713")} App ready at ${config.appUrl}
 `);
-    else if (result === "exited") console.log(`  ${c.dim("next dev stopped (see above). Start your app, the editor connects as soon as it's up.")}
+    else if (result === "exited") console.log(`  ${c.dim(`${devCommand} stopped (see above). Start your app, the editor connects as soon as it's up.`)}
 `);
-    else console.log(`  ${c.dim("next dev is taking a while. The editor will connect when it's up.")}
+    else console.log(`  ${c.dim(`${devCommand} is taking a while. The editor will connect when it's up.`)}
 `);
   }
   if (values.open && !values["no-open"]) openBrowser(origin);
@@ -2982,15 +3688,15 @@ ${hasAgentConfig(root, config.port) ? `  ${c.dim("Agents")}   connected through
     if (stopping) return;
     stopping = true;
     const nextGone = next && next.exitCode === null ? new Promise((r) => next.once("exit", r)) : Promise.resolve();
-    next?.kill("SIGINT");
+    if (next) stopTree(next, "SIGINT");
     await Promise.all([shutdown(), Promise.race([nextGone, new Promise((r) => setTimeout(r, 4e3))])]);
-    if (next && next.exitCode === null) next.kill("SIGKILL");
+    if (next && next.exitCode === null) stopTree(next, "SIGKILL");
     process.exit(0);
   };
   process.on("SIGINT", stop);
   process.on("SIGTERM", stop);
   next?.on("exit", (code) => {
-    if (!stopping) console.log(`  ${c.dim(`next dev exited (${code ?? "signal"}).`)}`);
+    if (!stopping) console.log(`  ${c.dim(`${devCommand} exited (${code ?? "signal"}).`)}`);
   });
 }
 async function openWindow(cli, port) {
@@ -3015,9 +3721,17 @@ 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(path11.basename(root))} in the Truecanvas window ${c.dim(`(${hub})`)}.`);
+  console.log(`${c.accent("\u25C6")} Opened ${c.bold(path14.basename(root))} in the Truecanvas window ${c.dim(`(${hub})`)}.`);
   return true;
 }
+async function prompt(question) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  try {
+    return (await rl.question(`  ${question} `)).trim();
+  } finally {
+    rl.close();
+  }
+}
 async function ask(question) {
   const rl = createInterface({ input: process.stdin, output: process.stdout });
   try {
@@ -3029,9 +3743,9 @@ async function ask(question) {
 }
 async function ensureSetup(root, pkgDir, version, yes, force = false) {
   const tc = installedIn(root);
-  const wrapped = nextConfigStatus(root).wrapped;
+  const wrapped = configStatus(root).wrapped;
   if (tc.declared && tc.installed && wrapped && !force) return true;
-  const name = readPackage(root)?.name ?? path11.basename(root);
+  const name = readPackage(root)?.name ?? path14.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.`);
@@ -3040,7 +3754,7 @@ async function ensureSetup(root, pkgDir, version, yes, force = false) {
     console.log(`
   ${c.accent("\u25C6")} ${c.bold("Truecanvas")} ${c.dim(`v${version}`)}
 `);
-    console.log(`  This adds Truecanvas to ${c.bold(name)}: a dev dependency, a wrapper in next.config,`);
+    console.log(`  This adds Truecanvas to ${c.bold(name)}: a dev dependency, a plugin in ${configStatus(root).framework === "vite" ? "vite.config" : "next.config"},`);
     console.log(`  a ${c.bold("canvas")} script and a canvas with your homepage. Nothing changes in production builds.
 `);
     if (!await ask("Set it up?")) return false;
@@ -3098,19 +3812,21 @@ async function waitFor(url, ms) {
   }
   return false;
 }
-function startNext(root, appUrl) {
-  const port = new URL(appUrl).port || "3000";
-  const bin = path11.join(root, "node_modules", ".bin", "next");
-  const devArgs = ["dev", "-p", port, "-H", "127.0.0.1"];
-  const [cmd, args] = fs11.existsSync(bin) ? [bin, devArgs] : ["npx", ["next", ...devArgs]];
-  const child = spawn3(cmd, args, { cwd: root, env: toolEnv(process.env.NO_COLOR ? {} : { FORCE_COLOR: "1" }), stdio: ["ignore", "pipe", "pipe"], shell: process.platform === "win32" });
-  child.on("error", (err) => console.error(`  ${c.dim("next \u2502")} couldn't start next dev: ${err.message}`));
-  const prefix = c.dim("next \u2502 ");
+function startApp(root, appUrl, framework) {
+  const port = new URL(appUrl).port || (framework === "vite" ? "5173" : "3000");
+  const devArgs = framework === "vite" ? ["--port", port, "--strictPort", "--host", "127.0.0.1"] : ["dev", "-p", port, "-H", "127.0.0.1"];
+  const pkg = framework === "vite" ? "vite" : "next";
+  const bin = binScript(root, pkg);
+  const [cmd, args] = bin ? [process.execPath, [bin, ...devArgs]] : [process.platform === "win32" ? "npx.cmd" : "npx", [pkg, ...devArgs]];
+  const label = framework === "vite" ? "vite" : "next";
+  const child = spawn3(cmd, args, { cwd: root, env: toolEnv(process.env.NO_COLOR ? {} : { FORCE_COLOR: "1" }), stdio: ["ignore", "pipe", "pipe"], shell: !bin && process.platform === "win32" });
+  child.on("error", (err) => console.error(`  ${c.dim(`${label} \u2502`)} couldn't start ${pkg}: ${err.message}`));
+  const prefix = c.dim(`${label} \u2502 `);
   for (const stream of [child.stdout, child.stderr]) {
     let buf = "";
     stream.on("data", (chunk) => {
       buf += chunk.toString();
-      const lines = buf.split("\n");
+      const lines = buf.split(/\r?\n/);
       buf = lines.pop();
       for (const line of lines) if (line.trim()) process.stdout.write(`  ${prefix}${line}
 `);
@@ -3118,6 +3834,22 @@ function startNext(root, appUrl) {
   }
   return child;
 }
+function binScript(root, pkg) {
+  try {
+    const req = createRequire(path14.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;
+  } catch {
+    return null;
+  }
+}
+function stopTree(child, signal) {
+  if (process.platform === "win32" && child.pid) spawn3("taskkill", ["/pid", String(child.pid), "/T", "/F"], { stdio: "ignore" }).on("error", () => {
+  });
+  else child.kill(signal);
+}
 function openBrowser(url) {
   const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
   try {