nudge-ui 0.2.4 → 0.2.5

package/dist/inspector/canvas/AgentActivityOverlay.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { canvasFrameElement } from "./canvasFrame.js";
 const activityStyles = ".canvas-agent-activity {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 12;\n  overflow: hidden;\n  border-radius: 4px;\n}\n\n.canvas-agent-activity__label {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  max-width: 80%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 4px 10px 4px 4px;\n  border-radius: 20px;\n  background: #242424e8;\n  color: #fff;\n  font: 12px system-ui;\n  box-shadow: 0 2px 12px #0003;\n}\n\n.canvas-agent-activity__label canvas {\n  flex: 0 0 auto;\n}\n\n.canvas-agent-activity__label > span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.canvas-agent-activity__shimmer {\n  position: absolute;\n  border-radius: 5px;\n  background: linear-gradient(110deg, transparent 20%, rgb(212 212 212 / 0.18) 35%, rgb(212 212 212 / 0.35) 50%, rgb(212 212 212 / 0.18) 65%, transparent 80%);\n  background-size: 250% 100%;\n  animation: nudge-component-shimmer 2.4s ease-in-out infinite;\n}\n\n@keyframes nudge-component-shimmer {\n  from { background-position: 150% 0; }\n  to { background-position: -150% 0; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .canvas-agent-activity__shimmer {\n    animation: none;\n  }\n}\n";
 import { useEffect, useState } from "react";
 import { ThinkingOrb } from "thinking-orbs";
@@ -7,6 +8,7 @@ import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
 import { parseDataSrc } from "../selection/resolveSelection.js";
 import { targetKey } from "../drafts/model.js";
 import { contentEditTarget } from "./frameContent.js";
+import { InspectorStyle } from "../ui/InspectorStyle.js";
 /** Reuses rendered source identities. Iteration provenance cannot target application source. */
 export function attributeActivity(content, document, files) {
     const target = contentEditTarget(content);
@@ -99,13 +101,14 @@ export function AgentActivityOverlay({ cardId, content, iframe }) {
             };
         };
         attachDocument();
-        iframe.addEventListener("load", attachDocument);
-        return () => { iframe.removeEventListener("load", attachDocument); detachDocument(); };
+        const element = canvasFrameElement(iframe);
+        element?.addEventListener("load", attachDocument);
+        return () => { element?.removeEventListener("load", attachDocument); detachDocument(); };
     }, [activity, content, iframe]);
     const submitted = activity.requestId !== null && activity.targets.includes(cardId)
         && (!activity.target || targetKey(activity.target) === targetKey(contentEditTarget(content)));
     const working = activity.requestId !== null && (submitted || visual.files.length > 0);
     if (!working)
         return null;
-    return _jsxs("div", { className: "canvas-agent-activity", "data-test": `canvas-agent-activity-${cardId}`, children: [visual.highlights.map((rect, index) => _jsx("div", { className: "canvas-agent-activity__shimmer", "data-test": "canvas-agent-component-shimmer", style: { left: rect.x, top: rect.y, width: rect.width, height: rect.height } }, index)), _jsxs("span", { className: "canvas-agent-activity__label", role: "status", children: [_jsx(ThinkingOrb, { state: "solving", size: 20, theme: "dark", "aria-hidden": "true" }), _jsx("span", { children: "Agent working\u2026" })] }), _jsx("style", { children: activityStyles })] });
+    return _jsxs("div", { className: "canvas-agent-activity", "data-test": `canvas-agent-activity-${cardId}`, children: [visual.highlights.map((rect, index) => _jsx("div", { className: "canvas-agent-activity__shimmer", "data-test": "canvas-agent-component-shimmer", style: { left: rect.x, top: rect.y, width: rect.width, height: rect.height } }, index)), _jsxs("span", { className: "canvas-agent-activity__label", role: "status", children: [_jsx(ThinkingOrb, { state: "solving", size: 20, theme: "dark", "aria-hidden": "true" }), _jsx("span", { children: "Agent working\u2026" })] }), _jsx(InspectorStyle, { css: activityStyles })] });
 }

package/dist/inspector/canvas/CanvasCard.js

@@ -4,11 +4,11 @@ import { contentDocumentUrl, contentNavigationUrl, contentSourceUrl, iterationId
 import { refreshHtmlIteration } from "../iterations/coordinator.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { CANVAS_RENDERER_ATTR } from "./roleDetection.js";
-import { useCanvasCards, getCanvasCardLabel, updateCardUrl, resizeCard, setCardPosition, selectCard, getSelectedCardId, useSelectedCardId, useFocusedCardId, } from "./canvasStore.js";
+import { useCanvasCards, getCanvasCardLabel, updateCardUrl, resizeCard, setCardPosition, beginCardGeometryChange, selectCard, getSelectedCardId, useSelectedCardId, useFocusedCardId, } from "./canvasStore.js";
 import { useBoardCamera } from "./viewStore.js";
 import { IconArrowsDiagonal, IconCopy, IconCornerLeftDown, IconBoltFilled, IconArtboard, IconTrash } from "@tabler/icons-react";
-import { PROTOCOL_VERSION, } from "./frameProtocol.js";
-import { registerCardFrame, registerCardFrameSource, unregisterCardFrame, sendProjectionToCard, invalidateCanvasPreviewDocument, PROJECT_ID, WORKSPACE_ID } from "./projection.js";
+import { connectFrame } from "./frameConnection.js";
+import { registerCardFrame, registerCardFrameSource, unregisterCardFrame, sendProjectionToCard, invalidateCanvasPreviewDocument } from "./projection.js";
 import { Button } from "../ui/Button.js";
 import { IconButton } from "../ui/IconButton.js";
 import { Tooltip } from "../ui/Tooltip.js";
@@ -20,6 +20,7 @@ import { getCanvasToolbarScale } from "./toolbarScale.js";
 import { getCanvasResizeHandleScale } from "./resizeHandleScale.js";
 import { disposeBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
 import { releaseDocumentProjection } from "../projection/structuralProjection.js";
+import { disposeRuntimeIdentityClaims } from "../runtime/runtimeIdentityClaims.js";
 import { startClipboardHandoffController } from "../prompt/clipboardHandoff.js";
 import { disposeInlineTextEdit, isInlineTextEditingActive } from "../inline-text/inlineTextEditor.js";
 import { configureNudgeUiRuntime, getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
@@ -93,12 +94,17 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         const frameDocument = iframeRef.current?.contentDocument;
         if (!documentOwner || !frameDocument)
             return;
+        // The initial blank document is discarded by navigation. A blocked frame
+        // can make its Window inaccessible before cleanup runs.
+        if (frameDocument.URL === "about:blank")
+            return;
         if (documentSessionRef.current?.document === frameDocument)
             return;
         disposeDocumentSession();
         const session = documentOwner.createDocumentSession(frameDocument);
         session.registerCleanup(() => disposeBrowserCssInspection(frameDocument));
         session.registerCleanup(() => releaseDocumentProjection(frameDocument));
+        session.registerCleanup(() => disposeRuntimeIdentityClaims(frameDocument));
         session.registerCleanup(() => disposeInlineTextEdit("frame-disposed", frameDocument));
         session.registerCleanup(startClipboardHandoffController(frameDocument));
         session.registerCleanup(installFrameScrollbarStyles(frameDocument));
@@ -170,13 +176,8 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
     }
     /** The controller half of the handshake: announce workspace identity. */
     function sendParentReady() {
-        iframeRef.current?.contentWindow?.postMessage({
-            type: "parent-ready",
-            protocolVersion: PROTOCOL_VERSION,
-            projectId: PROJECT_ID,
-            workspaceId: WORKSPACE_ID,
-            cardId: card.id,
-        }, window.location.origin);
+        if (iframeRef.current)
+            connectFrame(card.id, iframeRef.current).post({ type: "parent-ready" });
     }
     function adoptFrameRuntime(runtime) {
         frameRuntimeRef.current = runtime;
@@ -202,8 +203,8 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         adoptFrameRuntime(frameRuntimeRef.current);
     }, [isSelected]);
     useEffect(() => {
-        return subscribeCanvasRendererMessages(({ cardId, message: data }) => {
-            if (cardId !== card.id)
+        return subscribeCanvasRendererMessages(({ frame, message: data }) => {
+            if (frame.cardId !== card.id)
                 return;
             // A renderer whose runtime finished booting after the iframe load event
             // asks for the identity announcement it may have missed.
@@ -294,6 +295,8 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         e.stopPropagation();
         e.preventDefault();
         const iterationDrag = e.altKey && !!onCreateIteration && loadState === "ready" && !creatingIteration;
+        // Iteration creation history already records where the new frame was dropped.
+        const commitMove = iterationDrag ? null : beginCardGeometryChange(card.id);
         let moved = false;
         let iterationId;
         let creationStarted = false;
@@ -344,6 +347,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
             cleanup();
             setIsDragging(false);
             cancelled = true;
+            commitMove?.();
             if (iterationId) {
                 removeFrame(iterationId, { undoable: false });
                 selectCard(card.id);
@@ -352,6 +356,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         function onUp() {
             cleanup();
             setIsDragging(false);
+            commitMove?.();
             if (iterationId)
                 setCardPosition(iterationId, position.x, position.y);
         }
@@ -380,6 +385,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
             width: card.width,
             height: card.height,
         };
+        const commitResize = beginCardGeometryChange(card.id);
         function onMove(ev) {
             if (ev.pointerId !== pointerId)
                 return;
@@ -399,6 +405,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
                 target.releasePointerCapture(pointerId);
             if (resizeCleanupRef.current === cleanup)
                 resizeCleanupRef.current = null;
+            commitResize();
         }
         function onUp(ev) {
             if (ev.pointerId !== pointerId)
@@ -441,7 +448,9 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         if ((delta.x !== 0 && edges.horizontal === null) || (delta.y !== 0 && edges.vertical === null))
             return;
         const next = resizeCanvasRect(card, direction, delta);
+        const commitResize = beginCardGeometryChange(card.id);
         resizeCard(card.id, next.width, next.height, { x: next.x, y: next.y });
+        commitResize();
     }
     return (_jsxs("div", { className: `canvas-card${linkedToActive ? " is-linked" : ""}${isDragging ? " is-dragging" : ""}${isSelected ? " is-selected" : ""}${isFocused ? " is-focused" : ""}${isFocusPresentationCard ? " is-focus-presentation" : ""}${presentationCard ? " is-presentation-card" : ""}`, "data-card-id": card.id, tabIndex: presentation === "canvas" ? 0 : undefined, role: "group", "aria-label": `Frame: ${frameLabel}`, style: {
             "--canvas-toolbar-scale": toolbarScale,

package/dist/inspector/canvas/CanvasElementOverlay.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
-import { PROTOCOL_VERSION, isElementClickMessage, isInlineTextIntentMessage, } from "./frameProtocol.js";
+import { isElementClickMessage, isInlineTextIntentMessage } from "./frameProtocol.js";
 import { useCanvasCards } from "./canvasStore.js";
 import { useBoardCamera, useCanvasPresentation, useCanvasPresentationTransitioning, useCanvasLayoutTransitioning, getCanvasLayoutTransitioning, useTemporaryAppInteraction, } from "./viewStore.js";
 import { handleElementClick } from "./rendererSelectionProxy.js";
@@ -9,7 +9,7 @@ import { readBorderWidths, toRect, } from "../overlay/overlayGeometry.js";
 const overlayStyles = ".canvas-element-overlay {\n  position: fixed;\n  pointer-events: none;\n  z-index: 1;\n  background: transparent;\n  outline: 1px solid var(--accent);\n  outline-offset: -1px;\n}\n\n.canvas-spacing-guide {\n  position: fixed;\n  z-index: 1;\n  border-radius: 999px;\n  background: var(--accent);\n  outline: none;\n  box-shadow: none;\n  pointer-events: none;\n}\n\n.canvas-spacing-fill {\n  position: fixed;\n  z-index: 1;\n  pointer-events: none;\n  background: rgb(59 130 246 / 14%);\n}\n\n.canvas-spacing-fill[data-kind=\"gap\"] {\n  background: rgb(236 72 153 / 14%);\n}\n\n.canvas-spacing-guide[data-kind=\"gap\"] {\n  background: #ec4899;\n}\n\n.canvas-spacing-value-badge {\n  position: fixed;\n  z-index: 2;\n  transform: translate(-50%, calc(-100% - var(--space-8)));\n  padding: var(--space-4) var(--space-8);\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  font-weight: 400;\n  line-height: 1.4;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.canvas-selected-outline {\n  position: fixed;\n  pointer-events: none;\n  z-index: 1;\n  outline: 1px solid var(--accent);\n  outline-offset: -1px;\n}\n\n.canvas-dom-drop-line {\n  z-index: 2147483647;\n  border-radius: 999px;\n  background: #3b82f6;\n  box-shadow: 0 0 0 1px rgb(255 255 255 / 95%), 0 1px 5px rgb(37 99 235 / 72%);\n}\n\n.canvas-dom-drop-line::before,\n.canvas-dom-drop-line::after {\n  position: absolute;\n  top: 50%;\n  width: 8px;\n  height: 8px;\n  border: 2px solid #ffffff;\n  border-radius: 50%;\n  background: #2563eb;\n  content: \"\";\n  transform: translateY(-50%);\n}\n\n.canvas-dom-drop-line::before { left: -3px; }\n.canvas-dom-drop-line::after { right: -3px; }\n\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::before,\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::after {\n  left: 50%;\n  right: auto;\n  transform: translateX(-50%);\n}\n\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::before { top: -3px; }\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::after { top: auto; bottom: -3px; }\n\n.canvas-dom-drop-target {\n  z-index: 2147483646;\n  box-sizing: border-box;\n  border: 1px solid rgb(59 130 246 / 72%);\n  border-radius: 4px;\n  background: rgb(59 130 246 / 5%);\n}\n";
 import { deleteElement, getDropLocationAtPoint, moveElement, nudgeElement } from "../overlay/structuralGestures.js";
 import { changeKey } from "../changes/model.js";
-import { getChanges, redo, subscribeChanges, undo } from "../changes/changesLog.js";
+import { getActiveDraftChanges, redo, subscribeActiveDraftChanges, undo } from "../drafts/store.js";
 import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
 import { setSelectedElement } from "../selection/selectionStore.js";
 import { clearDropGuide, showDropGuide, useDropGuide } from "../overlay/dropGuide.js";
@@ -17,8 +17,8 @@ import { DropGuideOverlay } from "../overlay/DropGuideOverlay.js";
 import { getMeasurementGeometry } from "../overlay/measurementGeometry.js";
 import { getElementComputedStyle } from "../runtime/domRealm.js";
 import { MeasurementGuideOverlay } from "../overlay/MeasurementGuideOverlay.js";
-import { projectMeasurementSegments } from "./measurementProjection.js";
-import { getRegisteredFrames, PROJECT_ID, WORKSPACE_ID } from "./projection.js";
+import { findCanvasFrameByDocument, getRegisteredFrames } from "./projection.js";
+import { connectFrame, measureFrameViewport, toViewportPoint, toViewportRect } from "./frameConnection.js";
 import { RENDERER_ELEMENT_ID_ATTR } from "./rendererCidIndex.js";
 import { observeSelectedGeometry } from "../overlay/selectedGeometry.js";
 import { handleInlineTextEditIntent, useInlineTextSession } from "../inline-text/inlineTextEditor.js";
@@ -30,22 +30,7 @@ import { getSpacingAffordanceAtPoint, getSpacingAffordanceForDescriptor, getSpac
 import { beginLayoutPreview, endLayoutPreview } from "../styleEditors/layoutPreviewState.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { DomNavigator } from "../overlay/DomNavigator.js";
-function projectRect(iframe, rect, zoom) {
-    const frameRect = iframe.getBoundingClientRect();
-    return {
-        left: frameRect.left + rect.left * zoom,
-        top: frameRect.top + rect.top * zoom,
-        width: rect.width * zoom,
-        height: rect.height * zoom,
-    };
-}
-function projectPoint(iframe, x, y, zoom) {
-    const frameRect = iframe.getBoundingClientRect();
-    return {
-        x: frameRect.left + x * zoom,
-        y: frameRect.top + y * zoom,
-    };
-}
+import { InspectorStyle } from "../ui/InspectorStyle.js";
 function spacingBadgeForDrag(drag, point) {
     return {
         iframe: drag.iframe,
@@ -74,40 +59,18 @@ function spacingGuideStyle(rect) {
         height,
     });
 }
-function findFrameElement(iframe, elementId, cid, src) {
-    const doc = iframe.contentDocument;
-    if (!doc)
-        return null;
-    if (!/^r\d+$/.test(elementId))
-        return null;
-    const candidates = doc.querySelectorAll(`[${RENDERER_ELEMENT_ID_ATTR}="${elementId}"]`);
-    if (candidates.length !== 1)
-        return null;
-    const candidate = candidates[0] ?? null;
-    if (!candidate
-        || candidate.getAttribute("data-cid") !== cid
-        || (candidate.getAttribute("data-src") ?? "") !== src)
-        return null;
-    const frameWindow = doc.defaultView;
-    return frameWindow && candidate instanceof frameWindow.HTMLElement ? candidate : null;
-}
-function projectGuideToCanvas(guide, zoom) {
-    if (!guide)
-        return null;
-    const iframe = guide.document.defaultView?.frameElement;
-    if (!(iframe instanceof HTMLIFrameElement))
+function projectGuideToCanvas(guide) {
+    const iframe = findCanvasFrameByDocument(guide?.document);
+    if (!guide || !iframe)
         return null;
-    const iframeRect = iframe.getBoundingClientRect();
-    const project = (rect, scaleWidth, scaleHeight) => ({
-        left: iframeRect.left + rect.left * zoom,
-        top: iframeRect.top + rect.top * zoom,
-        width: scaleWidth ? rect.width * zoom : rect.width,
-        height: scaleHeight ? rect.height * zoom : rect.height,
-    });
+    const viewport = measureFrameViewport(iframe);
     return {
         orientation: guide.orientation,
-        line: project(guide.line, guide.orientation === "horizontal", guide.orientation === "vertical"),
-        target: project(guide.target, true, true),
+        line: toViewportRect(viewport, guide.line, {
+            width: guide.orientation === "horizontal",
+            height: guide.orientation === "vertical",
+        }),
+        target: toViewportRect(viewport, guide.target),
     };
 }
 function spacingDescriptorMatches(affordance, descriptor) {
@@ -191,7 +154,7 @@ function releasePendingSpacingCommits(pending, iframe) {
 function reconcilePendingSpacingCommits(pending) {
     if (pending.length === 0)
         return;
-    const survivingKeys = new Set(getChanges().map(changeKey));
+    const survivingKeys = new Set(getActiveDraftChanges().changes.map(changeKey));
     let write = 0;
     for (const commit of pending) {
         if (commit.keys.some((key) => survivingKeys.has(key))) {
@@ -227,16 +190,6 @@ function pushPendingSpacingCommit(pending, next) {
         originalInlinePriority: pending[existing].originalInlinePriority,
     };
 }
-function sendMeasureModifier(iframe, cardId, altKey) {
-    iframe.contentWindow?.postMessage({
-        type: "measure-modifier",
-        protocolVersion: PROTOCOL_VERSION,
-        projectId: PROJECT_ID,
-        workspaceId: WORKSPACE_ID,
-        cardId,
-        altKey,
-    }, window.location.origin);
-}
 export function CanvasElementOverlay() {
     const [hover, setHover] = useState(null);
     const [measureState, setMeasureState] = useState(null);
@@ -257,10 +210,9 @@ export function CanvasElementOverlay() {
         setHover(null);
         setMeasureState(null);
     }, [layoutTransitioning]);
-    const projectionZoom = presentation === "focus" ? 1 : camera.zoom;
     const cards = useCanvasCards(); // Projected geometry must follow card drag and resize updates.
     const cardGeometryKey = cards.map((card) => `${card.id}:${card.x}:${card.y}:${card.width}:${card.height}`).join("|");
-    const projectionGeometryKey = `${presentation}:${camera.x}:${camera.y}:${projectionZoom}:${cardGeometryKey}`;
+    const projectionGeometryKey = `${presentation}:${camera.x}:${camera.y}:${camera.zoom}:${cardGeometryKey}`;
     const previousProjectionGeometryKey = useRef(projectionGeometryKey);
     const dragRef = useRef(null);
     const spacingDragRef = useRef(null);
@@ -268,29 +220,26 @@ export function CanvasElementOverlay() {
     const [spacingDragBadge, setSpacingDragBadge] = useState(null);
     const measureAltKeyRef = useRef(false);
     const dropGuide = useDropGuide("canvas");
-    const projectedDropGuide = projectGuideToCanvas(dropGuide, projectionZoom);
-    const selectedFrame = selected?.domElement.ownerDocument.defaultView?.frameElement;
-    const selectedInCanvas = selectedFrame instanceof HTMLIFrameElement
-        && selectedFrame.hasAttribute("data-nudge-ui-canvas-renderer");
+    const projectedDropGuide = projectGuideToCanvas(dropGuide);
+    const selectedFrame = findCanvasFrameByDocument(selected?.domElement.ownerDocument);
+    const selectedInCanvas = selectedFrame !== null;
     const selectedRects = selectedInCanvas
         ? selectedElements.map((candidate) => {
-            const frame = candidate.domElement.ownerDocument.defaultView?.frameElement;
+            const frame = findCanvasFrameByDocument(candidate.domElement.ownerDocument);
             return frame === selectedFrame ? toRect(candidate.domElement.getBoundingClientRect()) : null;
         })
         : [];
     const selectedPrimaryIndex = selectedElements.findIndex((candidate) => candidate.domElement === selected?.domElement);
     const selectedLocalRect = selectedRects[selectedPrimaryIndex >= 0 ? selectedPrimaryIndex : 0] ?? null;
-    const selectedFrameRect = selectedInCanvas
-        ? toRect(selectedFrame.getBoundingClientRect())
+    const selectedFrameViewport = selectedInCanvas ? measureFrameViewport(selectedFrame) : null;
+    const selectedRect = selectedFrameViewport && selectedLocalRect
+        ? toViewportRect(selectedFrameViewport, selectedLocalRect)
         : null;
-    const selectedRect = selectedInCanvas && selectedLocalRect
-        ? projectRect(selectedFrame, selectedLocalRect, projectionZoom)
-        : null;
-    const projectedSelectedGeometry = selectedInCanvas
+    const projectedSelectedGeometry = selectedFrameViewport
         ? selectedRects.flatMap((rect, index) => {
             const element = selectedElements[index];
             return rect && element
-                ? [{ element, rect: projectRect(selectedFrame, rect, projectionZoom) }]
+                ? [{ element, rect: toViewportRect(selectedFrameViewport, rect) }]
                 : [];
         })
         : [];
@@ -316,7 +265,7 @@ export function CanvasElementOverlay() {
         const broadcastMeasureModifier = (altKey) => {
             measureAltKeyRef.current = altKey;
             for (const [cardId, iframe] of getRegisteredFrames()) {
-                sendMeasureModifier(iframe, cardId, altKey);
+                connectFrame(cardId, iframe).post({ type: "measure-modifier", altKey });
             }
         };
         const onKeyDown = (event) => {
@@ -352,7 +301,7 @@ export function CanvasElementOverlay() {
     // it: undo/redo/revert/clear remove the record synchronously, so restore the
     // authored declaration before the renderer's next replace-styles lands.
     useEffect(() => {
-        return subscribeChanges(() => {
+        return subscribeActiveDraftChanges(() => {
             reconcilePendingSpacingCommits(pendingSpacingCommitsRef.current);
         });
     }, []);
@@ -389,14 +338,14 @@ export function CanvasElementOverlay() {
                 };
             });
         };
-        const unsubscribe = subscribeCanvasRendererMessages(({ cardId: sourceCardId, iframe: sourceIframe, identity: frameIdentity, message: data, }) => {
+        const unsubscribe = subscribeCanvasRendererMessages(({ frame, message: data }) => {
             if (data.type === "renderer-hello" || data.type === "frame-ready") {
-                sendMeasureModifier(sourceIframe, sourceCardId, measureAltKeyRef.current);
+                frame.post({ type: "measure-modifier", altKey: measureAltKeyRef.current });
             }
             if (data.type === "renderer-hello")
                 return;
             if (data.type === "projection-applied") {
-                releasePendingSpacingCommits(pendingSpacingCommitsRef.current, sourceIframe);
+                releasePendingSpacingCommits(pendingSpacingCommitsRef.current, frame.iframe);
                 return;
             }
             if (getCanvasLayoutTransitioning())
@@ -406,18 +355,17 @@ export function CanvasElementOverlay() {
                 if (!msg.cid)
                     return;
                 if (msg.rect === null) {
-                    setHover((current) => current?.cardId === sourceCardId ? null : current);
+                    setHover((current) => current?.cardId === frame.cardId ? null : current);
                     return;
                 }
                 const spacingDescriptor = msg.hoverSpacing ?? msg.spacing ?? null;
                 const hoverPoint = msg.point ?? null;
-                const hoverElement = spacingDescriptor
-                    ? findFrameElement(sourceIframe, msg.elementId, msg.cid, msg.src)
-                    : null;
+                const hoverElement = spacingDescriptor ? frame.element(msg) : null;
+                const frameDocument = frame.document();
                 const hoverAffordance = spacingDescriptor && hoverElement
                     ? getSpacingAffordanceForDescriptor(hoverElement, spacingDescriptor)
-                    : spacingDescriptor && hoverPoint && sourceIframe.contentDocument
-                        ? getSpacingHoverAtPoint(sourceIframe.contentDocument, hoverPoint.x, hoverPoint.y)
+                    : spacingDescriptor && hoverPoint && frameDocument
+                        ? getSpacingHoverAtPoint(frameDocument, hoverPoint.x, hoverPoint.y)
                         : null;
                 const matchingAffordance = spacingDescriptorMatches(hoverAffordance, spacingDescriptor)
                     ? hoverAffordance
@@ -433,11 +381,11 @@ export function CanvasElementOverlay() {
                     ? { point: hoverPoint, value: handleAffordance.value }
                     : null;
                 setHover({
-                    iframe: sourceIframe,
+                    iframe: frame.iframe,
                     identity: { elementId: msg.elementId },
                     rect: msg.rect,
                     borders: msg.borders ?? { top: 0, right: 0, bottom: 0, left: 0 },
-                    cardId: sourceCardId,
+                    cardId: frame.cardId,
                     spacing: spacingGuides.length > 0 ? spacingDescriptor : null,
                     spacingGuides,
                     spacingAreas,
@@ -447,29 +395,29 @@ export function CanvasElementOverlay() {
             else if (data.type === "element-measure-state") {
                 const msg = data;
                 setMeasureState({
-                    iframe: sourceIframe,
+                    iframe: frame.iframe,
                     altKey: msg.altKey,
                     pointerOverPage: msg.pointerOverPage,
                 });
             }
             else if (data.type === "element-click") {
-                if (!isElementClickMessage(data, frameIdentity))
+                if (!isElementClickMessage(data, frame.identity))
                     return;
                 const msg = data;
                 if (!msg.cid)
                     return;
-                handleElementClick(msg, sourceIframe, sourceCardId);
+                handleElementClick(msg, frame);
             }
             else if (data.type === "inline-text-intent") {
-                if (!isInlineTextIntentMessage(data, frameIdentity))
+                if (!isInlineTextIntentMessage(data, frame.identity))
                     return;
                 if (getSelectedElements().length > 1)
                     return;
                 const emptyProjection = data.emptyProjectionId
-                    ? Array.from(sourceIframe.contentDocument?.querySelectorAll(`[${EMPTY_TEXT_PROJECTION_ATTR}]`) ?? [])
+                    ? Array.from(frame.document()?.querySelectorAll(`[${EMPTY_TEXT_PROJECTION_ATTR}]`) ?? [])
                         .find((candidate) => candidate.getAttribute(EMPTY_TEXT_PROJECTION_ATTR) === data.emptyProjectionId)
                     : null;
-                const element = emptyProjection ?? findFrameElement(sourceIframe, data.elementId, data.cid, data.src);
+                const element = emptyProjection ?? frame.element(data);
                 if (!element)
                     return;
                 handleInlineTextEditIntent(data.intent === "double-click"
@@ -492,23 +440,24 @@ export function CanvasElementOverlay() {
                 if (getSelectedElements().length > 1)
                     return;
                 const msg = data;
-                const element = findFrameElement(sourceIframe, msg.elementId, msg.cid, msg.src);
+                const element = frame.element(msg);
                 if (!element)
                     return;
                 clearSpacingDrag(spacingDragRef);
                 dragRef.current = null;
                 const startPoint = msg.startPoint ?? msg.point;
+                const frameDocument = frame.document();
                 const spacing = msg.spacing
                     ? getSpacingAffordanceForDescriptor(element, msg.spacing)
-                    : sourceIframe.contentDocument
-                        ? getSpacingAffordanceAtPoint(sourceIframe.contentDocument, startPoint.x, startPoint.y)
+                    : frameDocument
+                        ? getSpacingAffordanceAtPoint(frameDocument, startPoint.x, startPoint.y)
                         : null;
                 const isSpacingDrag = spacing
                     && spacing.element === element
                     && (!msg.spacing || spacingDescriptorMatches(spacing, msg.spacing));
                 if (isSpacingDrag) {
                     spacingDragRef.current = {
-                        iframe: sourceIframe,
+                        iframe: frame.iframe,
                         element,
                         affordance: spacing,
                         start: startPoint,
@@ -525,26 +474,26 @@ export function CanvasElementOverlay() {
                     refreshSpacingPreviewOverlay(spacingDragRef.current);
                     return;
                 }
-                dragRef.current = { iframe: sourceIframe, element };
+                dragRef.current = { iframe: frame.iframe, element };
                 const selectedElement = resolveSelectionFromElement(element);
                 if (selectedElement)
                     setSelectedElement(selectedElement);
-                updateDropGuide(msg.point, sourceIframe);
+                updateDropGuide(msg.point);
             }
             else if (data.type === "element-drag-move") {
                 const spacing = spacingDragRef.current;
-                if (spacing && spacing.iframe === sourceIframe) {
+                if (spacing && spacing.iframe === frame.iframe) {
                     applySpacingPreview(spacing, data.point, data.shiftKey === true);
                     setSpacingDragBadge(spacingBadgeForDrag(spacing, data.point));
                     refreshSpacingPreviewOverlay(spacing);
                     return;
                 }
-                updateDropGuide(data.point, sourceIframe);
+                updateDropGuide(data.point);
             }
             else if (data.type === "element-drag-end") {
                 const msg = data;
                 const spacing = spacingDragRef.current;
-                if (spacing && spacing.iframe === sourceIframe) {
+                if (spacing && spacing.iframe === frame.iframe) {
                     spacingDragRef.current = null;
                     setSpacingDragBadge(null);
                     if (msg.cancelled) {
@@ -556,7 +505,7 @@ export function CanvasElementOverlay() {
                         const records = commitSpacingDrag(spacing);
                         if (records.length > 0) {
                             pushPendingSpacingCommit(pendingSpacingCommitsRef.current, {
-                                iframe: sourceIframe,
+                                iframe: frame.iframe,
                                 element: spacing.element,
                                 property: spacing.affordance.property,
                                 committedValue: spacingValueCss(spacing.currentValue),
@@ -576,8 +525,9 @@ export function CanvasElementOverlay() {
                     return;
                 }
                 const current = dragRef.current;
-                if (!msg.cancelled && current && current.iframe === sourceIframe && sourceIframe.contentDocument) {
-                    const drop = getDropLocationAtPoint(sourceIframe.contentDocument, current.element, msg.point.x, msg.point.y);
+                const frameDocument = frame.document();
+                if (!msg.cancelled && current && current.iframe === frame.iframe && frameDocument) {
+                    const drop = getDropLocationAtPoint(frameDocument, current.element, msg.point.x, msg.point.y);
                     if (drop)
                         moveElement(current.element, drop);
                     const selectedElement = resolveSelectionFromElement(current.element);
@@ -590,8 +540,7 @@ export function CanvasElementOverlay() {
             else if (data.type === "element-delete") {
                 if (getSelectedElements().length !== 1)
                     return;
-                const msg = data;
-                const element = findFrameElement(sourceIframe, msg.elementId, msg.cid, msg.src);
+                const element = frame.element(data);
                 const selectedElement = element ? resolveSelectionFromElement(element) : null;
                 if (selectedElement && deleteElement(selectedElement))
                     setSelectedElement(null);
@@ -599,9 +548,8 @@ export function CanvasElementOverlay() {
             else if (data.type === "element-nudge") {
                 if (getSelectedElements().length !== 1)
                     return;
-                const msg = data;
-                const element = findFrameElement(sourceIframe, msg.elementId, msg.cid, msg.src);
-                const record = element ? nudgeElement(element, msg.key) : null;
+                const element = frame.element(data);
+                const record = element ? nudgeElement(element, data.key) : null;
                 if (element && record) {
                     const selectedElement = resolveSelectionFromElement(element);
                     if (selectedElement)
@@ -623,16 +571,17 @@ export function CanvasElementOverlay() {
             else if (data.type === "inspector-open-request") {
                 setInspectorOpen(true);
             }
-            function updateDropGuide(point, iframe) {
+            function updateDropGuide(point) {
                 const current = dragRef.current;
-                if (!current || current.iframe !== iframe || !iframe.contentDocument)
+                const frameDocument = frame.document();
+                if (!current || current.iframe !== frame.iframe || !frameDocument)
                     return;
-                const drop = getDropLocationAtPoint(iframe.contentDocument, current.element, point.x, point.y);
+                const drop = getDropLocationAtPoint(frameDocument, current.element, point.x, point.y);
                 if (!drop) {
                     clearDropGuide("canvas");
                     return;
                 }
-                showDropGuide("canvas", iframe.contentDocument, drop);
+                showDropGuide("canvas", frameDocument, drop);
             }
         });
         return () => {
@@ -647,20 +596,21 @@ export function CanvasElementOverlay() {
         return null;
     if (!hover && projectedSelectedGeometry.length === 0 && !projectedDropGuide)
         return null;
-    const projectedHoverRect = hover ? projectRect(hover.iframe, hover.rect, projectionZoom) : null;
-    const projectedSpacingGuides = hover?.spacingGuides.map((guide) => projectRect(hover.iframe, guide, projectionZoom)) ?? [];
-    const projectedSpacingAreas = hover?.spacingAreas.map((area) => projectRect(hover.iframe, area, projectionZoom)) ?? [];
+    const hoverViewport = hover ? measureFrameViewport(hover.iframe) : null;
+    const projectedHoverRect = hover && hoverViewport ? toViewportRect(hoverViewport, hover.rect) : null;
+    const projectedSpacingGuides = hover && hoverViewport ? hover.spacingGuides.map((guide) => toViewportRect(hoverViewport, guide)) : [];
+    const projectedSpacingAreas = hover && hoverViewport ? hover.spacingAreas.map((area) => toViewportRect(hoverViewport, area)) : [];
     const spacingBadge = spacingDragBadge
         ?? (hover?.spacingHandleBadge ? { iframe: hover.iframe, ...hover.spacingHandleBadge } : null);
     const projectedSpacingBadge = spacingBadge
-        ? projectPoint(spacingBadge.iframe, spacingBadge.point.x, spacingBadge.point.y, projectionZoom)
+        ? toViewportPoint(measureFrameViewport(spacingBadge.iframe), spacingBadge.point)
         : null;
     const hoverSpacing = hover?.spacing ?? null;
     const measureStateForSelectedFrame = measureState?.iframe === selectedFrame ? measureState : null;
     const hoverInSelectedFrame = hover?.iframe === selectedFrame ? hover : null;
     const showGuideOverlay = Boolean(selectedElements.length === 1
         && selectedRect
-        && selectedFrameRect
+        && selectedFrameViewport
         && measureStateForSelectedFrame?.altKey
         && measureStateForSelectedFrame.pointerOverPage);
     const isSelfHover = Boolean(hoverInSelectedFrame
@@ -673,15 +623,20 @@ export function CanvasElementOverlay() {
         && selectedLocalRect
         && hoverInSelectedFrame
         && !isSelfHover);
-    const measurementSegments = showMeasurement && selectedFrameRect && selectedLocalRect && hoverInSelectedFrame
-        ? projectMeasurementSegments(selectedFrameRect, getMeasurementGeometry(selectedLocalRect, hoverInSelectedFrame.rect, {
+    // Segment distances stay in frame CSS pixels so labels read the same at any board zoom.
+    const measurementSegments = showMeasurement && selectedFrameViewport && selectedLocalRect && hoverInSelectedFrame
+        ? getMeasurementGeometry(selectedLocalRect, hoverInSelectedFrame.rect, {
             selectedBorders: selectedBorders ?? undefined,
             hoveredBorders: hoverInSelectedFrame.borders,
-        }).segments, projectionZoom)
+        }).segments.map((segment) => ({
+            ...segment,
+            from: toViewportPoint(selectedFrameViewport, segment.from),
+            to: toViewportPoint(selectedFrameViewport, segment.to),
+        }))
         : [];
     if (presentationTransitioning || layoutTransitioning || temporaryAppInteraction)
-        return _jsx("style", { "data-test": "canvas-element-overlay-styles", children: overlayStyles });
-    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "canvas-element-overlay-styles", children: overlayStyles }), showGuideOverlay && selectedRect && selectedFrameRect ? (_jsx(MeasurementGuideOverlay, { testId: "canvas-measurement-overlay", selectedRect: selectedRect, guideViewport: selectedFrameRect, segments: measurementSegments })) : null, projectedHoverRect ? (_jsxs(_Fragment, { children: [hoverSpacing ? projectedSpacingAreas.map((area, index) => (_jsx("div", { className: "canvas-spacing-fill", "data-test": "canvas-spacing-fill", "data-kind": hoverSpacing.kind, "data-property": hoverSpacing.property, "data-side": hoverSpacing.side ?? undefined, "data-area-index": index, style: overlayStyle(area), "aria-hidden": "true" }, `${hoverSpacing.property}-area-${index}`))) : null, showHoverOutline ? (_jsx("div", { className: "canvas-element-overlay", "data-test": "canvas-hover-outline", style: overlayStyle(projectedHoverRect), "aria-hidden": "true" })) : null, hoverSpacing ? projectedSpacingGuides.map((guide, index) => (_jsx("div", { className: "canvas-spacing-guide", "data-test": "canvas-spacing-guide", "data-kind": hoverSpacing.kind, "data-property": hoverSpacing.property, "data-side": hoverSpacing.side ?? undefined, "data-guide-index": index, style: spacingGuideStyle(guide), "aria-hidden": "true" }, `${hoverSpacing.property}-${index}`))) : null] })) : null, projectedSelectedGeometry.map(({ element, rect }, index) => (_jsx("div", { className: "canvas-selected-outline", "data-test": "canvas-selected-outline", "data-selected-cid": element.cid, "data-selected-index": index, "data-selected-src": element.src, style: overlayStyle(rect), "aria-hidden": "true" }, `${element.cid}-${index}`))), projectedSpacingBadge && spacingBadge ? (_jsx("div", { className: "canvas-spacing-value-badge", "data-test": "canvas-spacing-value-badge", style: { left: projectedSpacingBadge.x, top: projectedSpacingBadge.y }, "aria-hidden": "true", children: spacingValueCss(spacingBadge.value) })) : null, domNavigationEnabled && !inlineTextSession && selectedElements.length === 1 && selected && selectedRect && selectedFrame instanceof HTMLIFrameElement ? (_jsx(DomNavigator, { selected: selected, hierarchy: hierarchy, anchor: selectedRect, project: (element) => element.ownerDocument === selected.domElement.ownerDocument
-                    ? projectRect(selectedFrame, toRect(element.getBoundingClientRect()), projectionZoom)
+        return _jsx(InspectorStyle, { testId: "canvas-element-overlay-styles", css: overlayStyles });
+    return (_jsxs(_Fragment, { children: [_jsx(InspectorStyle, { testId: "canvas-element-overlay-styles", css: overlayStyles }), showGuideOverlay && selectedRect && selectedFrameViewport ? (_jsx(MeasurementGuideOverlay, { testId: "canvas-measurement-overlay", selectedRect: selectedRect, guideViewport: selectedFrameViewport, segments: measurementSegments })) : null, projectedHoverRect ? (_jsxs(_Fragment, { children: [hoverSpacing ? projectedSpacingAreas.map((area, index) => (_jsx("div", { className: "canvas-spacing-fill", "data-test": "canvas-spacing-fill", "data-kind": hoverSpacing.kind, "data-property": hoverSpacing.property, "data-side": hoverSpacing.side ?? undefined, "data-area-index": index, style: overlayStyle(area), "aria-hidden": "true" }, `${hoverSpacing.property}-area-${index}`))) : null, showHoverOutline ? (_jsx("div", { className: "canvas-element-overlay", "data-test": "canvas-hover-outline", style: overlayStyle(projectedHoverRect), "aria-hidden": "true" })) : null, hoverSpacing ? projectedSpacingGuides.map((guide, index) => (_jsx("div", { className: "canvas-spacing-guide", "data-test": "canvas-spacing-guide", "data-kind": hoverSpacing.kind, "data-property": hoverSpacing.property, "data-side": hoverSpacing.side ?? undefined, "data-guide-index": index, style: spacingGuideStyle(guide), "aria-hidden": "true" }, `${hoverSpacing.property}-${index}`))) : null] })) : null, projectedSelectedGeometry.map(({ element, rect }, index) => (_jsx("div", { className: "canvas-selected-outline", "data-test": "canvas-selected-outline", "data-selected-cid": element.cid, "data-selected-index": index, "data-selected-src": element.src, style: overlayStyle(rect), "aria-hidden": "true" }, `${element.cid}-${index}`))), projectedSpacingBadge && spacingBadge ? (_jsx("div", { className: "canvas-spacing-value-badge", "data-test": "canvas-spacing-value-badge", style: { left: projectedSpacingBadge.x, top: projectedSpacingBadge.y }, "aria-hidden": "true", children: spacingValueCss(spacingBadge.value) })) : null, domNavigationEnabled && !inlineTextSession && selectedElements.length === 1 && selected && selectedRect && selectedFrameViewport ? (_jsx(DomNavigator, { selected: selected, hierarchy: hierarchy, anchor: selectedRect, project: (element) => element.ownerDocument === selected.domElement.ownerDocument
+                    ? toViewportRect(selectedFrameViewport, toRect(element.getBoundingClientRect()))
                     : null })) : null, _jsx(DropGuideOverlay, { guide: projectedDropGuide, lineClassName: "canvas-dom-drop-line", lineTestId: "canvas-dom-drop-line", targetClassName: "canvas-dom-drop-target", targetTestId: "canvas-dom-drop-target" })] }));
 }