nudge-ui 0.2.3 → 0.2.5

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())
-        : null;
-    const selectedRect = selectedInCanvas && selectedLocalRect
-        ? projectRect(selectedFrame, selectedLocalRect, projectionZoom)
+    const selectedFrameViewport = selectedInCanvas ? measureFrameViewport(selectedFrame) : null;
+    const selectedRect = selectedFrameViewport && selectedLocalRect
+        ? toViewportRect(selectedFrameViewport, selectedLocalRect)
         : 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);
         });
     }, []);
@@ -383,17 +332,20 @@ export function CanvasElementOverlay() {
                     borders,
                     spacingGuides: affordance?.affectedGuides ?? [],
                     spacingAreas: affordance?.affectedAreas ?? [],
+                    spacingHandleBadge: current.spacingHandleBadge && affordance
+                        ? { ...current.spacingHandleBadge, value: affordance.value }
+                        : current.spacingHandleBadge,
                 };
             });
         };
-        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())
@@ -403,61 +355,69 @@ 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
                     : null;
                 const spacingGuides = matchingAffordance?.affectedGuides ?? [];
                 const spacingAreas = matchingAffordance?.affectedAreas ?? [];
+                const handleAffordance = msg.spacing && hoverElement
+                    ? getSpacingAffordanceForDescriptor(hoverElement, msg.spacing)
+                    : null;
+                const spacingHandleBadge = hoverPoint
+                    && handleAffordance
+                    && spacingDescriptorMatches(handleAffordance, msg.spacing)
+                    ? { 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,
+                    spacingHandleBadge,
                 });
             }
             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"
@@ -480,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,
@@ -513,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) {
@@ -544,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),
@@ -564,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);
@@ -578,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);
@@ -587,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)
@@ -611,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 () => {
@@ -635,18 +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 projectedSpacingBadge = spacingDragBadge
-        ? projectPoint(spacingDragBadge.iframe, spacingDragBadge.point.x, spacingDragBadge.point.y, 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
+        ? 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
@@ -659,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 && spacingDragBadge ? (_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(spacingDragBadge.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" })] }));
 }

package/dist/inspector/canvas/CanvasToolbar.js

@@ -3,6 +3,7 @@ import { IconMessageCircle, IconMessageCircleFilled, IconPointer2, IconSketching
 import { IconButton } from "../ui/IconButton.js";
 import { Tooltip } from "../ui/Tooltip.js";
 import { DesignPointerFilledIcon, SelectPlayFilledIcon, SelectPlayOutlineIcon, SketchThickIcon, } from "./CanvasToolIcons.js";
+import { SketchToolOptions } from "./SketchToolOptions.js";
 export const CANVAS_ZOOM_LEVELS = [0.25, 0.5, 0.9, 1];
 export function closestCanvasZoomLevel(zoom) {
     let closest = CANVAS_ZOOM_LEVELS[0];
@@ -24,5 +25,5 @@ function ToolButton({ tool, activeTool, disabled, label, shortcut, icon, activeI
     return (_jsx(Tooltip, { content: label, shortcut: shortcut, stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", size: "large", className: "canvas-toolbar__tool", label: label, "aria-pressed": active, "data-test": `canvas-tool-${tool}`, "data-active": active ? "true" : "false", disabled: disabled, onClick: () => onToolChange(tool), children: active ? activeIcon : icon }) }));
 }
 export function CanvasToolbar({ tool, sketchEnabled, onToolChange, }) {
-    return (_jsxs("div", { className: "canvas-toolbar", "data-test": "canvas-toolbar", role: "toolbar", "aria-label": "Canvas tools", children: [_jsxs("div", { className: "canvas-toolbar__tools", role: "group", "aria-label": "Interaction tools", children: [_jsx(ToolButton, { tool: "design", activeTool: tool, label: "Select", shortcut: "V", icon: _jsx(IconPointer2, { size: ICON_SIZE, stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), activeIcon: _jsx(DesignPointerFilledIcon, { size: ICON_SIZE, "aria-hidden": "true" }), onToolChange: onToolChange }), _jsx(ToolButton, { tool: "comment", activeTool: tool, label: "Comment", shortcut: "C", icon: _jsx(IconMessageCircle, { size: ICON_SIZE, stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), activeIcon: _jsx(IconMessageCircleFilled, { size: ICON_SIZE, "aria-hidden": "true" }), onToolChange: onToolChange }), _jsx(ToolButton, { tool: "sketch", activeTool: tool, label: "Pencil", shortcut: "P", disabled: !sketchEnabled, icon: _jsx(IconSketching, { size: ICON_SIZE, stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), activeIcon: _jsx(SketchThickIcon, { size: ICON_SIZE, "aria-hidden": "true" }), onToolChange: onToolChange })] }), _jsx("div", { className: "canvas-toolbar__divider", "aria-hidden": "true" }), _jsx("div", { className: "canvas-toolbar__tools", role: "group", "aria-label": "Preview tools", children: _jsx(ToolButton, { tool: "select", activeTool: tool, label: "Use app normally", shortcut: "Hold A", icon: _jsx(SelectPlayOutlineIcon, { size: ICON_SIZE, "aria-hidden": "true" }), activeIcon: _jsx(SelectPlayFilledIcon, { size: ICON_SIZE, "aria-hidden": "true" }), onToolChange: onToolChange }) })] }));
+    return (_jsxs("div", { className: "canvas-toolbar", "data-test": "canvas-toolbar", role: "toolbar", "aria-label": "Canvas tools", children: [_jsxs("div", { className: "canvas-toolbar__tools", role: "group", "aria-label": "Interaction tools", children: [_jsx(ToolButton, { tool: "design", activeTool: tool, label: "Select", shortcut: "V", icon: _jsx(IconPointer2, { size: ICON_SIZE, stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), activeIcon: _jsx(DesignPointerFilledIcon, { size: ICON_SIZE, "aria-hidden": "true" }), onToolChange: onToolChange }), _jsx(ToolButton, { tool: "comment", activeTool: tool, label: "Comment", shortcut: "C", icon: _jsx(IconMessageCircle, { size: ICON_SIZE, stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), activeIcon: _jsx(IconMessageCircleFilled, { size: ICON_SIZE, "aria-hidden": "true" }), onToolChange: onToolChange }), _jsx(ToolButton, { tool: "sketch", activeTool: tool, label: "Pencil", shortcut: "P", disabled: !sketchEnabled, icon: _jsx(IconSketching, { size: ICON_SIZE, stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), activeIcon: _jsx(SketchThickIcon, { size: ICON_SIZE, "aria-hidden": "true" }), onToolChange: onToolChange }), _jsx(SketchToolOptions, { open: tool === "sketch" && sketchEnabled })] }), _jsx("div", { className: "canvas-toolbar__divider", "aria-hidden": "true" }), _jsx("div", { className: "canvas-toolbar__tools", role: "group", "aria-label": "Preview tools", children: _jsx(ToolButton, { tool: "select", activeTool: tool, label: "Use app normally", shortcut: "Hold A", icon: _jsx(SelectPlayOutlineIcon, { size: ICON_SIZE, "aria-hidden": "true" }), activeIcon: _jsx(SelectPlayFilledIcon, { size: ICON_SIZE, "aria-hidden": "true" }), onToolChange: onToolChange }) })] }));
 }