truecanvas 0.6.2 → 0.6.4

package/dist/{chunk-OPKROZI2.js → chunk-56Z2KSBF.js}

@@ -28,6 +28,16 @@ html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); c
 #stage.panning { cursor: grabbing; }
 #world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
 .frame { position: absolute; }
+/* real-site frames: one click to interact with them, like an embedded prototype */
+.frame.live-frame .frame-box { cursor: pointer; }
+.frame.live-frame:not(.interacting) .frame-box::after { content: "Click to interact"; position: absolute; left: 50%; top: 16px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(28,27,25,.86); color: #fff; font-size: 12px; font-weight: 550; opacity: 0; transition: opacity .15s var(--ease-out); pointer-events: none; }
+.frame.live-frame:not(.interacting) .frame-box:hover::after { opacity: 1; }
+#stage.commenting .frame.live-frame .frame-box::after, #stage.panning .frame.live-frame .frame-box::after { opacity: 0 !important; }
+.frame.interacting .frame-box { outline: 2px solid var(--accent); outline-offset: 2px; cursor: auto; }
+.frame.interacting .frame-box iframe { pointer-events: auto; }
+.interact-tag { display: none; margin-left: 8px; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; }
+.frame.interacting .interact-tag { display: inline-flex; }
+.interact-tag button { height: 20px; padding: 0 8px; border-radius: 6px; border: 0; background: var(--accent); color: #fff; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
 .frame-label { position: absolute; left: 0; bottom: 100%; padding-bottom: 6px; white-space: nowrap; color: var(--muted);
   font-size: 12px; transform-origin: 0 100%; }
 .frame-label b { color: var(--text); font-weight: 550; margin-right: 6px; }
@@ -294,6 +304,33 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
       : '<a class="who-btn" href="/signin?next=' + encodeURIComponent(here) + '">Sign in</a>'));
   }
 
+  // a page frame of a version with a live site shows the real site, on its own origin
+  function liveSrc(path) {
+    const home = new URL(manifest.live.url);
+    const url = new URL(path || "/", home);
+    const token = home.searchParams.get("tc_access");
+    if (token) url.searchParams.set("tc_access", token);
+    return url.href;
+  }
+  const showsLive = (f) => !!(manifest.live && f.route);
+  /**
+   * A frame outside a live session: the real site for page frames of a version
+   * that has one (animations and all), the frozen copy otherwise. The frozen
+   * image stays underneath until the iframe has loaded.
+   */
+  function restFrame(f, iframe, img) {
+    iframe.closest(".frame")?.classList.toggle("live-frame", showsLive(f));
+    if (showsLive(f)) {
+      iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
+      iframe.setAttribute("referrerpolicy", "no-referrer");
+      iframe.src = liveSrc(f.route);
+    } else {
+      iframe.setAttribute("sandbox", "");
+      iframe.src = f.html;
+    }
+    iframe.addEventListener("load", () => { iframe.classList.add("ready"); if (showsLive(f) && img) img.style.visibility = "hidden"; });
+  }
+
   // layout: frames at their canvas positions
   const frames = manifest.frames;
   const minX = Math.min(...frames.map((f) => f.x)), minY = Math.min(...frames.map((f) => f.y));
@@ -303,12 +340,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) + (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"));
+    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>' : "") + '<span class="interact-tag">Interacting<button type="button" class="interact-done">Done</button></span>' + "</div>" +
+      '<div class="frame-box" style="width:' + f.width + "px;height:" + f.height + 'px"><img alt="" src="' + esc(f.image) + '"><iframe title="' + esc(f.name) + '" scrolling="no" loading="lazy"></iframe></div>';
+    restFrame(f, el.querySelector("iframe"), el.querySelector("img"));
     const liveBtn = el.querySelector(".live-btn");
     if (liveBtn) liveBtn.onclick = (e) => { e.stopPropagation(); openLive(f); };
+    el.querySelector(".interact-done").onclick = (e) => { e.stopPropagation(); setInteracting(null); };
     el.dataset.name = f.name;
     world.appendChild(el);
     labels.push(el.querySelector(".frame-label"));
@@ -367,7 +404,7 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
   let moved = false, downAt = null;
   stage.addEventListener("pointerdown", (e) => {
     // pins and View live are buttons: they take their own clicks
-    if (e.target.closest && e.target.closest(".pin, .live-btn")) return;
+    if (e.target.closest && e.target.closest(".pin, .live-btn, .interact-done")) return;
     stage.setPointerCapture(e.pointerId);
     moved = false;
     downAt = { x: e.clientX, y: e.clientY };
@@ -397,6 +434,16 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
   stage.addEventListener("pointerup", end);
   stage.addEventListener("pointercancel", end);
 
+  // the frame that has the mouse (its own scripts, clicks and forms), or null
+  let interacting = null;
+  function setInteracting(frameEl) {
+    if (interacting) interacting.classList.remove("interacting");
+    interacting = frameEl;
+    if (frameEl) frameEl.classList.add("interacting");
+  }
+  // the live session swaps frames: whatever had the mouse goes back to the canvas
+  addEventListener("tc:frames-swapped", () => setInteracting(null));
+
   // double click (or double tap) a frame: read it at full width; elsewhere: everything in view
   let lastTap = 0;
   const zoomToFrameAt = (cx, cy) => {
@@ -415,6 +462,12 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
     downAt = null;
     // comment mode: a tap on a frame starts a comment there
     if (commenting) return startComment(e.clientX, e.clientY);
+    // a real-site frame: one click hands it the mouse; a click elsewhere takes it back
+    // the stage captured the pointer: look under it rather than at e.target
+    const under = document.elementFromPoint(e.clientX, e.clientY);
+    const hit = under && under.closest ? under.closest(".frame.live-frame") : null;
+    if (hit && !hit.classList.contains("interacting")) { setInteracting(hit); lastTap = 0; return; }
+    if (!hit && interacting) { setInteracting(null); return; }
     const now = Date.now();
     if (now - lastTap < 320) { zoomToFrameAt(e.clientX, e.clientY); lastTap = 0; }
     else lastTap = now;
@@ -427,7 +480,7 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
   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 === "Escape") { closePop(); setCommenting(false); setInteracting(null); return; }
     if ((e.key === "c" || e.key === "C") && canComment && !e.metaKey && !e.ctrlKey) { setCommenting(!commenting); return; }
     if (e.key === "+" || e.key === "=") zoomAt(z * 1.25, ...center());
     else if (e.key === "-") zoomAt(z / 1.25, ...center());
@@ -465,7 +518,7 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
     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;
+    iframe.src = f.route ? liveSrc(f.route) : manifest.live.url;
     liveDevice.appendChild(iframe);
     document.getElementById("live-name").textContent = f.name;
     document.getElementById("live-tab").href = manifest.live.url;
@@ -516,6 +569,7 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
   function setCommenting(on) {
     if (!canComment) return;
     commenting = on;
+    if (on) setInteracting(null);
     stage.classList.toggle("commenting", on);
     const b = document.getElementById("comment");
     b.classList.toggle("on", on);
@@ -819,15 +873,17 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
           next.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
           next.setAttribute("referrerpolicy", "no-referrer");
           next.src = sessionFrame(f);
+          frameEl.classList.add("live-frame");
+          next.addEventListener("load", () => { next.classList.add("ready"); if (img) img.style.visibility = "hidden"; });
         } else {
-          next.setAttribute("sandbox", "");
           next.loading = "lazy";
-          next.src = f.html;
           if (img) img.style.visibility = "";
         }
-        next.addEventListener("load", () => { next.classList.add("ready"); if (on && img) img.style.visibility = "hidden"; });
         old.replaceWith(next);
+        // in the page now: restFrame marks the frame as a real-site one or not
+        if (!on) restFrame(f, next, img);
       }
+      dispatchEvent(new Event("tc:frames-swapped"));
       renderRoom();
       toast(on ? "Live: you're seeing the design as the studio works on it" : "The live session ended: back to the published version");
     }

package/dist/{chunk-QJ5M3G4E.js → chunk-PLJRUWCS.js}

@@ -3180,6 +3180,7 @@ function addVitePlugin(src) {
 export {
   listRoutes,
   layoutFiles,
+  routeOf,
   componentsDir,
   DEVICES,
   findDevice,

package/dist/cli.js

@@ -22,7 +22,7 @@ import {
   responseHeaders,
   safePath,
   viewerHtml
-} from "./chunk-OPKROZI2.js";
+} from "./chunk-56Z2KSBF.js";
 import {
   DEVICES,
   Workspace,
@@ -39,12 +39,13 @@ import {
   outlineDoc,
   readDesignTokens,
   readTokenData,
+  routeOf,
   shadcnAdd,
   shadcnRegistry,
   shadcnStatus,
   syncComponentRegistry,
   writeCompare
-} from "./chunk-QJ5M3G4E.js";
+} from "./chunk-PLJRUWCS.js";
 import {
   EditError,
   addArgs,
@@ -144,7 +145,8 @@ async function createSnapshot(ws, shots, canvas, opts = {}) {
     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 route = f.page && ws.config.framework === "next" ? routeOf(ws.config, f.page) : void 0;
+    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`, ...route ? { route } : {} });
   }
   const manifest = {
     format: 1,

package/dist/core/index.js

@@ -20,7 +20,7 @@ import {
   viteStylesheets,
   wrapConfigExport,
   writeCompare
-} from "../chunk-QJ5M3G4E.js";
+} from "../chunk-PLJRUWCS.js";
 import {
   CanvasEditor,
   EditError,

package/dist/share/index.d.ts

@@ -22,6 +22,8 @@ interface ShareFrame {
     /** paths inside the snapshot */
     html: string;
     image: string;
+    /** a frame linked to a page: its URL in the app (e.g. "/pricing"), so the live site can show it */
+    route?: string;
 }
 interface ShareManifest {
     format: 1;

package/dist/share/index.js

@@ -6,7 +6,7 @@ import {
   responseHeaders,
   safePath,
   viewerHtml
-} from "../chunk-OPKROZI2.js";
+} from "../chunk-56Z2KSBF.js";
 export {
   CHUNK,
   decodeFrame,

package/package.json

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