truecanvas 0.6.2 → 0.6.3

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

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

package/dist/{chunk-OPKROZI2.js → chunk-S5P2CHHZ.js}

@@ -294,6 +294,32 @@ 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) {
+    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));
@@ -304,9 +330,8 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
     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"));
+      '<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.dataset.name = f.name;
@@ -465,7 +490,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;
@@ -819,13 +844,12 @@ 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);
+          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 = "";
+          restFrame(f, next, img);
         }
-        next.addEventListener("load", () => { next.classList.add("ready"); if (on && img) img.style.visibility = "hidden"; });
         old.replaceWith(next);
       }
       renderRoom();

package/dist/cli.js

@@ -22,7 +22,7 @@ import {
   responseHeaders,
   safePath,
   viewerHtml
-} from "./chunk-OPKROZI2.js";
+} from "./chunk-S5P2CHHZ.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-S5P2CHHZ.js";
 export {
   CHUNK,
   decodeFrame,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "truecanvas",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "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",