truecanvas 0.4.0 → 0.5.0

package/README.md

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

package/dist/catalog-worker.js

@@ -1,6 +1,6 @@
 import {
   analyzeComponents
-} from "./chunk-WU7NBTJH.js";
+} from "./chunk-2IIAMOFH.js";
 
 // src/core/catalog-worker.ts
 import { parentPort, workerData } from "worker_threads";

package/dist/{chunk-WU7NBTJH.js → chunk-2IIAMOFH.js}

@@ -86,19 +86,27 @@ async function analyzeComponents(root, globs, libraries = []) {
     if (!sf) continue;
     const moduleSymbol = checker.getSymbolAtLocation(sf);
     if (!moduleSymbol) continue;
+    const named = /* @__PURE__ */ new Set();
+    const found = [];
     for (let sym of checker.getExportsOfModule(moduleSymbol)) {
+      const exported = sym.getName();
       if (sym.flags & ts.SymbolFlags.Alias) sym = checker.getAliasedSymbol(sym);
-      const name = sym.getName();
-      if (!/^[A-Z]/.test(name) || !(sym.flags & ts.SymbolFlags.Value)) continue;
       const decl = sym.valueDeclaration ?? sym.declarations?.[0];
       if (!decl) continue;
+      const own = decl.name;
+      const name = sym.getName() === "default" && own && ts.isIdentifier(own) ? own.text : sym.getName();
+      if (!/^[A-Z]/.test(name) || !(sym.flags & ts.SymbolFlags.Value)) continue;
       const type = checker.getTypeOfSymbolAtLocation(sym, decl);
       const sig = type.getCallSignatures()[0];
       if (!sig) continue;
       const ret = checker.typeToString(sig.getReturnType());
       if (!/Element|ReactNode|ReactPortal|null|any/.test(ret) || /^Promise</.test(ret)) continue;
-      out.push(describe(ts, checker, sym, decl, sig, library ?? posix(path2.relative(root, file)), library));
+      const spec = { ...describe(ts, checker, sym, decl, sig, library ?? posix(path2.relative(root, file)), library), name };
+      if (exported === "default") spec.defaultExport = true;
+      else named.add(spec.name);
+      found.push(spec);
     }
+    out.push(...found.filter((s) => !(s.defaultExport && named.has(s.name))));
   }
   for (const spec of out) applyProfile(spec);
   if (libraries.length) await attachPresets(root, out);

package/dist/{chunk-OVYSWA2F.js → chunk-A4QIAVTG.js}

@@ -12,7 +12,7 @@ import {
   importSpecifier,
   posix,
   resolveAliasPath
-} from "./chunk-WU7NBTJH.js";
+} from "./chunk-2IIAMOFH.js";
 import {
   ICON_LIBRARIES,
   iconLibrary,
@@ -549,10 +549,14 @@ ${ind}${close}`);
     this.selectPaths.push(node.path);
   }
   added = /* @__PURE__ */ new Set();
-  ensureImport(name, from) {
+  ensureImport(name, from, isDefault = false) {
     if (this.doc.imports.some((i) => i.names.includes(name) || i.defaultName === name)) return;
     if (this.added.has(name)) return;
     this.added.add(name);
+    if (isDefault) {
+      this.addImportLine(`import ${name} from ${JSON.stringify(from)};`);
+      return;
+    }
     const same = this.doc.imports.find((i) => i.source === from && !i.typeOnly && i.lastSpecifierEnd !== null);
     if (same) {
       this.s.appendLeft(same.lastSpecifierEnd, `, ${name}`);
@@ -954,6 +958,7 @@ function componentRegistry(config, specs) {
       from = posix(path.relative(routeDir, path.join(config.root, c.file))).replace(/\.(tsx|ts|jsx|js)$/, "");
       if (!from.startsWith(".")) from = `./${from}`;
     }
+    if (c.defaultExport) return `  ${JSON.stringify(c.name)}: lazy(() => import(${JSON.stringify(from)})),`;
     return `  ${JSON.stringify(c.name)}: lazy(() => import(${JSON.stringify(from)}).then((m) => ({ default: m[${JSON.stringify(c.name)}] }))),`;
   });
   return `"use client";
@@ -2757,7 +2762,7 @@ var Workspace = class {
         const spec = this.catalog.get(cmd.component);
         if (!spec) throw new EditError(`Unknown component "${cmd.component}". Use list_components.`);
         const jsx = componentJsx(spec, cmd.props, cmd.text);
-        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file));
+        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file), spec.defaultExport);
         ed.insertChild(parent, cmd.index, jsx);
         return `Inserted ${spec.name}`;
       }
@@ -2893,7 +2898,7 @@ var Workspace = class {
         const preset = cmd.preset ? spec.presets?.find((p) => p.name.toLowerCase() === cmd.preset.toLowerCase()) : void 0;
         if (cmd.preset && !preset) throw new EditError(`${spec.name} has no preset "${cmd.preset}". Presets: ${spec.presets?.map((p) => p.name).join(", ") || "none"}`);
         const props = { className: "pointer-events-none absolute inset-0 -z-10 h-full w-full", ...preset ? presetDiff(spec, preset.props) : {} };
-        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file));
+        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file), spec.defaultExport);
         if (parent.kind === "element") {
           const cls = parent.props.className;
           if (cls === void 0 || cls.kind === "string") {
@@ -2924,7 +2929,7 @@ var Workspace = class {
         if (!prop) throw new EditError(`${spec.name} has no prop "${cmd.prop}".`);
         const values = prop.type === "enum" ? prop.options : prop.type === "boolean" ? [false, true] : [];
         if (!values.length) throw new EditError(`Prop "${cmd.prop}" is ${prop.typeText}; variants need a union of string literals or a boolean.`);
-        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file));
+        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file), spec.defaultExport);
         const label = (v) => typeof v === "string" ? v[0].toUpperCase() + v.slice(1) : `${prop.name}: ${v}`;
         const rows = indentBlock(values.map((v) => componentJsx(spec, { ...cmd.props, [prop.name]: v }, spec.acceptsChildren ? label(v) : void 0)).join("\n"));
         const right = rightEdge(doc);
@@ -2943,7 +2948,7 @@ ${rows}
           ed.selectPaths.push(existing.path);
           return `Opened ${spec.name}`;
         }
-        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file));
+        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file), spec.defaultExport);
         const right = rightEdge(doc);
         const top = doc.frames.length ? Math.min(...doc.frames.map((f) => f.y)) : 0;
         ed.insertFrame(
@@ -3083,7 +3088,7 @@ ${rows}
       if (ed.doc.imports.some((i) => i.names.includes(name) || i.defaultName === name)) continue;
       const spec = this.catalog.get(name);
       if (!spec) throw new EditError(`Unknown component <${name}>. It is not imported in the canvas and not in the component catalog. Use list_components.`);
-      ed.ensureImport(name, importSpecifier(this.config.root, rel, spec.file));
+      ed.ensureImport(name, importSpecifier(this.config.root, rel, spec.file), spec.defaultExport);
     }
   }
   cleanCache = /* @__PURE__ */ new Map();

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

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