nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/canvas/CanvasElementOverlay.js

@@ -1,15 +1,15 @@
 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";
 import { getSelectedElements, useHierarchy, useSelectedElement, useSelectedElements } from "../selection/selectionStore.js";
 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";
+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-element-overlay[data-linked=\"true\"] {\n  outline-color: var(--linked);\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-fill[data-kind=\"margin\"] {\n  background: rgb(239 68 68 / 14%);\n}\n\n.canvas-spacing-guide[data-kind=\"margin\"] {\n  background: #ef4444;\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-selected-outline[data-linked=\"true\"] {\n  outline-color: var(--linked);\n}\n\n.canvas-linked-outline {\n  position: fixed;\n  pointer-events: none;\n  z-index: 1;\n  outline: 1px solid var(--linked);\n  outline-offset: -1px;\n  opacity: 0.6;\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,10 +17,12 @@ 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 { getEditScope, sourceSiteSelector } from "../selection/editScope.js";
+import { useComponentProps } from "../componentSemantics/ComponentPropsSection.js";
 import { handleInlineTextEditIntent, useInlineTextSession } from "../inline-text/inlineTextEditor.js";
 import { setInspectorOpen, toggleInspector } from "../shell/openStore.js";
 import { EMPTY_TEXT_PROJECTION_ATTR } from "../projection/textProjection.js";
@@ -30,21 +32,15 @@ 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";
+/** An element that is already the only selection keeps its record; re-resolving can differ only in derived metadata. */
+function selectGestureElement(element) {
+    const current = getSelectedElements();
+    if (current.length === 1 && current[0].domElement === element)
+        return;
+    const selected = resolveSelectionFromElement(element);
+    if (selected)
+        setSelectedElement(selected);
 }
 function spacingBadgeForDrag(drag, point) {
     return {
@@ -74,40 +70,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)
+function projectGuideToCanvas(guide) {
+    const iframe = findCanvasFrameByDocument(guide?.document);
+    if (!guide || !iframe)
         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))
-        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) {
@@ -138,14 +112,7 @@ function restoreSpacingPreview(drag) {
     }
     endLayoutPreview(drag.element, drag.affordance.property);
 }
-/**
- * Commits a managed rule for the drag's final value. Returns the created change
- * records (empty for a no-op drag). The preview inline is intentionally left
- * applied at the committed value once a record exists; the caller must register
- * a PendingSpacingCommit and release it after the renderer acknowledges the
- * projected sheet. Restoring the authored declaration first would flash the old
- * value for the postMessage round trip the sheet takes.
- */
+/** On a real change the preview inline stays applied; the caller must register a PendingSpacingCommit. */
 function commitSpacingDrag(drag) {
     if (drag.currentValue === drag.startValue) {
         restoreSpacingPreview(drag);
@@ -157,9 +124,7 @@ function commitSpacingDrag(drag) {
             oldRawValue: spacingValueCss(drag.startValue),
         }]);
 }
-/** Removes a deferred preview inline as soon as the projected sheet alone
- * reproduces the committed value; keeps it otherwise and retries on the next
- * projection acknowledgement from that frame. */
+/** Removes the preview inline once the projected sheet alone reproduces the value; retries on the next acknowledgement. */
 function tryReleasePendingSpacingCommit(commit) {
     const { element, property, committedValue } = commit;
     if (!element.isConnected)
@@ -185,13 +150,11 @@ function releasePendingSpacingCommits(pending, iframe) {
     }
     pending.length = write;
 }
-/** Restores any held preview inline whose committed rule was undone, reverted,
- * or cleared before its sheet landed. Runs synchronously with the workspace
- * change, so the inline never outlives the intent behind it. */
+/** Restores a held preview inline whose committed rule was undone, reverted, or cleared. */
 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))) {
@@ -210,9 +173,7 @@ function reconcilePendingSpacingCommits(pending) {
     }
     pending.length = write;
 }
-/** Registers a held preview inline, folding an older unapplied commit for the
- * same element and property into the newest one so the held value and the
- * authored baseline both stay coherent across rapid successive drags. */
+/** Folds an older unapplied commit for the same element and property into the newest one. */
 function pushPendingSpacingCommit(pending, next) {
     const existing = pending.findIndex((commit) => commit.iframe === next.iframe
         && commit.element === next.element
@@ -227,15 +188,42 @@ 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);
+const LINKED_PEER_LIMIT = 200;
+/** Frames the follow loop keeps measuring after outlines stop moving, covering the commit that applies a pan. */
+const OUTLINE_IDLE_FRAMES = 8;
+/** Writes the outline boxes straight to the DOM, so a stale React render cannot win; returns whether any moved. */
+function syncOutlinePositions(frame, outlines) {
+    const viewport = measureFrameViewport(frame);
+    let moved = false;
+    for (const [element, node] of outlines) {
+        const rect = toViewportRect(viewport, toRect(element.getBoundingClientRect()));
+        const box = `${rect.left}|${rect.top}|${rect.width}|${rect.height}`;
+        if (node.dataset.box !== box)
+            moved = true;
+        node.dataset.box = box;
+        node.style.left = `${rect.left}px`;
+        node.style.top = `${rect.top}px`;
+        node.style.width = `${rect.width}px`;
+        node.style.height = `${rect.height}px`;
+    }
+    return moved;
+}
+function isLinkedElement(element) {
+    return element !== null && getEditScope(element) === "source-site" && findLinkedPeers(element).length > 0;
+}
+/** Other elements rendered from the selected element's source site. */
+function findLinkedPeers(element) {
+    const selector = sourceSiteSelector(element.getAttribute("data-cid") ?? "", element.getAttribute("data-src") ?? "");
+    if (!selector)
+        return [];
+    try {
+        return [...element.ownerDocument.querySelectorAll(selector)]
+            .filter((candidate) => candidate !== element)
+            .slice(0, LINKED_PEER_LIMIT);
+    }
+    catch {
+        return [];
+    }
 }
 export function CanvasElementOverlay() {
     const [hover, setHover] = useState(null);
@@ -257,10 +245,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,35 +255,38 @@ 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) }]
                 : [];
         })
         : [];
-    // Camera transforms commit on the board before iframe viewport geometry is
-    // readable. Re-render once after that commit so overlays use the transformed
-    // frame rectangle rather than the previous camera position.
+    const componentProps = useComponentProps(selectedElements.length === 1 ? selected : null);
+    const linkedPeers = selectedInCanvas && selectedElements.length === 1 && selected && getEditScope(selected.domElement) === "source-site"
+        ? findLinkedPeers(selected.domElement)
+        : [];
+    const projectedLinkedPeers = selectedFrameViewport
+        ? linkedPeers.map((peer) => ({ peer, rect: toViewportRect(selectedFrameViewport, toRect(peer.getBoundingClientRect())) }))
+        : [];
+    const selectionIsLinked = componentProps !== null || linkedPeers.length > 0;
+    // Camera transforms commit before iframe viewport geometry is readable; re-render once so overlays use the new frame rect.
     useLayoutEffect(() => {
         const geometryChanged = previousProjectionGeometryKey.current !== projectionGeometryKey;
         previousProjectionGeometryKey.current = projectionGeometryKey;
@@ -306,17 +296,53 @@ export function CanvasElementOverlay() {
     const selectedBorders = selectedInCanvas && selected
         ? readBorderWidths(selected.domElement)
         : null;
+    const outlineNodes = useRef(new Map());
+    const outlineRef = (element) => (node) => {
+        if (node)
+            outlineNodes.current.set(element, node);
+        else
+            outlineNodes.current.delete(element);
+    };
+    // React renders a frame or more after a pan or scroll, so outlines follow the live geometry on their own frame loop.
+    useEffect(() => {
+        if (!selectedFrame)
+            return;
+        const frameDocument = selectedFrame.contentDocument;
+        let raf = null;
+        let idleFrames = 0;
+        const tick = () => {
+            raf = null;
+            idleFrames = syncOutlinePositions(selectedFrame, outlineNodes.current) ? 0 : idleFrames + 1;
+            if (idleFrames < OUTLINE_IDLE_FRAMES)
+                raf = window.requestAnimationFrame(tick);
+        };
+        const follow = () => {
+            idleFrames = 0;
+            if (raf === null)
+                raf = window.requestAnimationFrame(tick);
+        };
+        const options = { capture: true, passive: true };
+        window.addEventListener("wheel", follow, options);
+        frameDocument?.addEventListener("scroll", follow, options);
+        return () => {
+            window.removeEventListener("wheel", follow, options);
+            frameDocument?.removeEventListener("scroll", follow, options);
+            if (raf !== null)
+                window.cancelAnimationFrame(raf);
+        };
+    }, [selectedFrame]);
     useEffect(() => {
         if (!selectedInCanvas || !selected)
             return;
-        const stops = selectedElements.map((candidate) => observeSelectedGeometry(candidate.domElement, refreshSelectedGeometry));
+        const stops = [...selectedElements.map((candidate) => candidate.domElement), ...linkedPeers]
+            .map((element) => observeSelectedGeometry(element, refreshSelectedGeometry));
         return () => stops.forEach((stop) => stop());
-    }, [selected, selectedElements, selectedInCanvas]);
+    }, [selected, selectedElements, selectedInCanvas, linkedPeers.length]);
     useEffect(() => {
         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) => {
@@ -338,9 +364,7 @@ export function CanvasElementOverlay() {
             window.removeEventListener("blur", onBlur);
         };
     }, []);
-    // The selected element's identity is computed once per selection change
-    // (never per hover), so the measurement self-rulers exclusion can compare
-    // identities without a per-hover scan of the frame document.
+    // Computed once per selection change, never per hover, so the measurement exclusion needs no per-hover scan.
     const selectedIdentity = useMemo(() => {
         const el = selected?.domElement;
         if (!el)
@@ -348,11 +372,9 @@ export function CanvasElementOverlay() {
         const elementId = el.getAttribute(RENDERER_ELEMENT_ID_ATTR);
         return elementId ? { elementId } : null;
     }, [selected?.domElement]);
-    // A held spacing preview inline must not outlive the committed rule behind
-    // it: undo/redo/revert/clear remove the record synchronously, so restore the
-    // authored declaration before the renderer's next replace-styles lands.
+    // Undo/redo/revert/clear remove the record synchronously; restore the authored declaration before the next replace-styles lands.
     useEffect(() => {
-        return subscribeChanges(() => {
+        return subscribeActiveDraftChanges(() => {
             reconcilePendingSpacingCommits(pendingSpacingCommitsRef.current);
         });
     }, []);
@@ -389,14 +411,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 +428,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
@@ -432,44 +453,49 @@ export function CanvasElementOverlay() {
                     && spacingDescriptorMatches(handleAffordance, msg.spacing)
                     ? { point: hoverPoint, value: handleAffordance.value }
                     : null;
-                setHover({
-                    iframe: sourceIframe,
+                // Hover messages arrive every frame; the peer query runs once per element entered, not per message.
+                const hoverRect = msg.rect;
+                setHover((current) => ({
+                    iframe: frame.iframe,
                     identity: { elementId: msg.elementId },
-                    rect: msg.rect,
+                    rect: hoverRect,
                     borders: msg.borders ?? { top: 0, right: 0, bottom: 0, left: 0 },
-                    cardId: sourceCardId,
+                    cardId: frame.cardId,
                     spacing: spacingGuides.length > 0 ? spacingDescriptor : null,
                     spacingGuides,
                     spacingAreas,
                     spacingHandleBadge,
-                });
+                    linked: current?.iframe === frame.iframe && current.identity.elementId === msg.elementId
+                        ? current.linked
+                        : isLinkedElement(hoverElement ?? frame.element(msg)),
+                }));
             }
             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 +518,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,
@@ -517,34 +544,30 @@ export function CanvasElementOverlay() {
                         originalInlineValue: element.style.getPropertyValue(spacing.property),
                         originalInlinePriority: element.style.getPropertyPriority(spacing.property),
                     };
-                    const selectedElement = resolveSelectionFromElement(element);
-                    if (selectedElement)
-                        setSelectedElement(selectedElement);
+                    selectGestureElement(element);
                     applySpacingPreview(spacingDragRef.current, msg.point, msg.shiftKey === true);
                     setSpacingDragBadge(spacingBadgeForDrag(spacingDragRef.current, msg.point));
                     refreshSpacingPreviewOverlay(spacingDragRef.current);
                     return;
                 }
-                dragRef.current = { iframe: sourceIframe, element };
-                const selectedElement = resolveSelectionFromElement(element);
-                if (selectedElement)
-                    setSelectedElement(selectedElement);
-                updateDropGuide(msg.point, sourceIframe);
+                dragRef.current = { iframe: frame.iframe, element };
+                selectGestureElement(element);
+                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 +579,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),
@@ -569,20 +592,17 @@ export function CanvasElementOverlay() {
                     }
                     clearDropGuide("canvas");
                     if (!msg.cancelled) {
-                        const selectedElement = resolveSelectionFromElement(spacing.element);
-                        if (selectedElement)
-                            setSelectedElement(selectedElement);
+                        selectGestureElement(spacing.element);
                     }
                     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);
-                    if (selectedElement)
-                        setSelectedElement(selectedElement);
+                    selectGestureElement(current.element);
                 }
                 dragRef.current = null;
                 clearDropGuide("canvas");
@@ -590,8 +610,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,13 +618,10 @@ 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)
-                        setSelectedElement(selectedElement);
+                    selectGestureElement(element);
                 }
             }
             else if (data.type === "history-request") {
@@ -623,16 +639,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,41 +664,46 @@ 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
         && selectedIdentity
         && hoverInSelectedFrame.identity.elementId === selectedIdentity.elementId);
-    // Selected elements already have a live geometry outline. The hover outline
-    // is based on a cached renderer message and can lag during spacing previews.
+    // Selected elements already have a live outline; the hover outline is cached and can lag during spacing previews.
     const showHoverOutline = Boolean(projectedHoverRect && !isSelfHover);
     const showMeasurement = Boolean(showGuideOverlay
         && 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-linked": hover?.linked ? "true" : undefined, "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, projectedLinkedPeers.map(({ peer, rect }, index) => (_jsx("div", { ref: outlineRef(peer), className: "canvas-linked-outline", "data-test": "canvas-linked-outline", style: overlayStyle(rect), "aria-hidden": "true" }, `${peer.getAttribute("data-cid")}-${index}`))), projectedSelectedGeometry.map(({ element, rect }, index) => (_jsx("div", { ref: outlineRef(element.domElement), className: "canvas-selected-outline", "data-linked": selectionIsLinked ? "true" : undefined, "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 && !measureStateForSelectedFrame?.altKey && selectedElements.length === 1 && selected && selectedRect && selectedFrameViewport ? (_jsx(DomNavigator, { selected: selected, hierarchy: hierarchy, anchor: selectedRect, linked: selectionIsLinked, 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" })] }));
 }