truecanvas 0.6.3 → 0.6.5

package/dist/{chunk-S5P2CHHZ.js → chunk-7KJVGN4O.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; }
@@ -309,6 +319,7 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
    * 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");
@@ -329,11 +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>" +
+    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="The real site in a screen-sized window: it scrolls like on a real screen, so scroll animations and pinned sections behave as they will for visitors"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>Full screen</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"));
@@ -386,13 +398,31 @@ button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
     else { x -= e.deltaX; y -= e.deltaY; apply(); }
   }, { passive: false });
 
+  // a real-site frame that has the mouse forwards its wheel and Esc (the review
+  // site adds a small bridge to those pages): the canvas keeps scrolling
+  addEventListener("message", (e) => {
+    const m = e.data;
+    if (!m || m.__tc !== 1) return;
+    const iframe = [...world.querySelectorAll(".frame-box iframe")].find((f) => f.contentWindow === e.source);
+    if (!iframe) return;
+    if (m.t === "escape") { setInteracting(null); return; }
+    if (m.t !== "wheel") return;
+    const unit = m.dm === 1 ? 16 : m.dm === 2 ? innerHeight : 1;
+    const dx = (+m.dx || 0) * unit, dy = (+m.dy || 0) * unit;
+    if (m.zoom) {
+      // the frame is drawn at the canvas zoom: its coordinates scale with it
+      const r = iframe.getBoundingClientRect();
+      zoomAt(z * Math.exp(-dy * 0.01), r.left + (+m.x || 0) * z, r.top + (+m.y || 0) * z);
+    } else { x -= dx; y -= dy; apply(); }
+  });
+
   // drag to pan, two fingers to pinch
   const pointers = new Map();
   let pinch = null;
   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;
+    // pins, Full screen and Done are buttons: they take their own clicks
+    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 };
@@ -422,6 +452,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) => {
@@ -440,6 +480,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;
@@ -452,7 +498,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());
@@ -541,6 +587,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);
@@ -844,14 +891,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.loading = "lazy";
           if (img) img.style.visibility = "";
-          restFrame(f, next, img);
         }
         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/cli.js

@@ -22,7 +22,7 @@ import {
   responseHeaders,
   safePath,
   viewerHtml
-} from "./chunk-S5P2CHHZ.js";
+} from "./chunk-7KJVGN4O.js";
 import {
   DEVICES,
   Workspace,

package/dist/share/index.d.ts

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

package/dist/share/index.js

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

package/package.json

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