nudge-ui 0.2.0 → 0.2.2

package/dist/inspector/canvas/CanvasElementOverlay.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useReducer, useRef, useState } from "react";
-import { isElementClickMessage, isRendererMessageFor, } from "./frameProtocol.js";
-import { findCanvasFrameBySource, PROJECT_ID, WORKSPACE_ID } from "./projection.js";
-import { useBoardCamera, useCanvasCards } from "./canvasStore.js";
+import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { PROTOCOL_VERSION, isElementClickMessage, isInlineTextIntentMessage, } from "./frameProtocol.js";
+import { useBoardCamera, useCanvasCards, useCanvasPresentation, useCanvasPresentationTransitioning } from "./canvasStore.js";
 import { handleElementClick } from "./rendererSelectionProxy.js";
-import { getSelectedElements, useSelectedElement, useSelectedElements } from "../selection/selectionStore.js";
-import { getMarginFills, getMarginGuides, readBorderWidths, toRect, } from "../overlay/overlayGeometry.js";
-const overlayStyles = ".canvas-element-overlay {\n  position: fixed;\n  pointer-events: none;\n  z-index: 3;\n  background: rgb(59 130 246 / 10%);\n  outline: 1.5px solid var(--accent);\n  outline-offset: -1px;\n}\n\n.canvas-selected-outline {\n  position: fixed;\n  pointer-events: none;\n  z-index: 3;\n  outline: 2px solid var(--accent);\n  outline-offset: -2px;\n}\n\n.canvas-hover-margin-fill {\n  position: fixed;\n  pointer-events: none;\n  z-index: 2;\n  background: rgb(59 130 246 / 14%);\n}\n\n.canvas-hover-margin {\n  position: fixed;\n  pointer-events: none;\n  z-index: 2;\n  border-color: rgb(59 130 246 / 52%);\n  border-style: dotted;\n  border-width: 0;\n  opacity: 0.72;\n}\n\n.canvas-hover-margin[data-axis=\"horizontal\"] {\n  border-top-width: 1px;\n}\n\n.canvas-hover-margin[data-axis=\"vertical\"] {\n  border-left-width: 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 { 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-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 { redo, undo } from "../changes/changesLog.js";
 import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
@@ -16,8 +15,18 @@ import { DropGuideOverlay } from "../overlay/DropGuideOverlay.js";
 import { getMeasurementGeometry } from "../overlay/measurementGeometry.js";
 import { MeasurementGuideOverlay } from "../overlay/MeasurementGuideOverlay.js";
 import { projectMeasurementSegments } from "./measurementProjection.js";
+import { getRegisteredFrames, PROJECT_ID, WORKSPACE_ID } from "./projection.js";
 import { RENDERER_ELEMENT_ID_ATTR } from "./rendererCidIndex.js";
 import { observeSelectedGeometry } from "../overlay/selectedGeometry.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";
+import { subscribeCanvasRendererMessages } from "./rendererMessageRouter.js";
+import { setStyles } from "../tokens/editActions.js";
+import { getSpacingAffordanceAtPoint, getSpacingAffordanceForDescriptor, SPACING_GUIDE_HANDLE_LENGTH, spacingValueCss, spacingValueForDrag, } from "../overlay/spacingGestures.js";
+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 {
@@ -27,14 +36,6 @@ function projectRect(iframe, rect, zoom) {
         height: rect.height * zoom,
     };
 }
-function scaleMargins(margins, zoom) {
-    return {
-        top: margins.top * zoom,
-        right: margins.right * zoom,
-        bottom: margins.bottom * zoom,
-        left: margins.left * zoom,
-    };
-}
 function overlayStyle(rect) {
     return {
         position: "fixed",
@@ -45,6 +46,17 @@ function overlayStyle(rect) {
         pointerEvents: "none",
     };
 }
+function spacingGuideStyle(rect) {
+    const isHorizontal = rect.width >= rect.height;
+    const width = isHorizontal ? Math.min(rect.width, SPACING_GUIDE_HANDLE_LENGTH) : rect.width;
+    const height = isHorizontal ? rect.height : Math.min(rect.height, SPACING_GUIDE_HANDLE_LENGTH);
+    return overlayStyle({
+        left: rect.left + (rect.width - width) / 2,
+        top: rect.top + (rect.height - height) / 2,
+        width,
+        height,
+    });
+}
 function findFrameElement(iframe, elementId, cid, src) {
     const doc = iframe.contentDocument;
     if (!doc)
@@ -55,7 +67,9 @@ function findFrameElement(iframe, elementId, cid, src) {
     if (candidates.length !== 1)
         return null;
     const candidate = candidates[0] ?? null;
-    if (!candidate || candidate.getAttribute("data-cid") !== cid || candidate.getAttribute("data-src") !== src)
+    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;
@@ -79,17 +93,79 @@ function projectGuideToCanvas(guide, zoom) {
         target: project(guide.target, true, true),
     };
 }
+function spacingDescriptorMatches(affordance, descriptor) {
+    return Boolean(affordance
+        && descriptor
+        && affordance.kind === descriptor.kind
+        && affordance.property === descriptor.property
+        && affordance.side === descriptor.side);
+}
+function clearSpacingDrag(ref) {
+    const drag = ref.current;
+    ref.current = null;
+    if (drag)
+        restoreSpacingPreview(drag);
+}
+function applySpacingPreview(drag, point, shiftKey = false) {
+    const value = spacingValueForDrag(drag.affordance, drag.start, point, shiftKey);
+    drag.currentValue = value;
+    beginLayoutPreview(drag.element, drag.affordance.property);
+    drag.element.style.setProperty(drag.affordance.property, spacingValueCss(value));
+}
+function restoreSpacingPreview(drag) {
+    if (drag.originalInlineValue) {
+        drag.element.style.setProperty(drag.affordance.property, drag.originalInlineValue, drag.originalInlinePriority);
+    }
+    else {
+        drag.element.style.removeProperty(drag.affordance.property);
+    }
+    endLayoutPreview(drag.element, drag.affordance.property);
+}
+function commitSpacingDrag(drag) {
+    // Restore the authored declaration before committing the managed rule. The
+    // captured start value is the baseline because the pointer remains hovered
+    // and CSS inspection can still report the transient preview value.
+    restoreSpacingPreview(drag);
+    if (drag.currentValue === drag.startValue)
+        return;
+    setStyles(drag.element, [{
+            property: drag.affordance.property,
+            value: spacingValueCss(drag.currentValue),
+            oldRawValue: spacingValueCss(drag.startValue),
+        }]);
+}
+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);
     const [, refreshSelectedGeometry] = useReducer((revision) => revision + 1, 0);
     const selected = useSelectedElement();
     const selectedElements = useSelectedElements();
+    const hierarchy = useHierarchy();
+    const domNavigationEnabled = useNudgeUiRuntimeConfig().capabilities.domNavigation === true;
+    const inlineTextSession = useInlineTextSession();
     const camera = useBoardCamera();
-    useCanvasCards(); // Projected geometry must follow card drag and resize updates.
+    const presentation = useCanvasPresentation();
+    const presentationTransitioning = useCanvasPresentationTransitioning();
+    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 previousProjectionGeometryKey = useRef(projectionGeometryKey);
     const dragRef = useRef(null);
+    const spacingDragRef = useRef(null);
+    const measureAltKeyRef = useRef(false);
     const dropGuide = useDropGuide("canvas");
-    const projectedDropGuide = projectGuideToCanvas(dropGuide, camera.zoom);
+    const projectedDropGuide = projectGuideToCanvas(dropGuide, projectionZoom);
     const selectedFrame = selected?.domElement.ownerDocument.defaultView?.frameElement;
     const selectedInCanvas = selectedFrame instanceof HTMLIFrameElement
         && selectedFrame.hasAttribute("data-nudge-ui-canvas-renderer");
@@ -105,16 +181,25 @@ export function CanvasElementOverlay() {
         ? toRect(selectedFrame.getBoundingClientRect())
         : null;
     const selectedRect = selectedInCanvas && selectedLocalRect
-        ? projectRect(selectedFrame, selectedLocalRect, camera.zoom)
+        ? projectRect(selectedFrame, selectedLocalRect, projectionZoom)
         : null;
     const projectedSelectedGeometry = selectedInCanvas
         ? selectedRects.flatMap((rect, index) => {
             const element = selectedElements[index];
             return rect && element
-                ? [{ element, rect: projectRect(selectedFrame, rect, camera.zoom) }]
+                ? [{ element, rect: projectRect(selectedFrame, rect, projectionZoom) }]
                 : [];
         })
         : [];
+    // 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.
+    useLayoutEffect(() => {
+        const geometryChanged = previousProjectionGeometryKey.current !== projectionGeometryKey;
+        previousProjectionGeometryKey.current = projectionGeometryKey;
+        if (selectedInCanvas && geometryChanged)
+            refreshSelectedGeometry();
+    }, [projectionGeometryKey, selectedInCanvas]);
     const selectedBorders = selectedInCanvas && selected
         ? readBorderWidths(selected.domElement)
         : null;
@@ -124,6 +209,32 @@ export function CanvasElementOverlay() {
         const stops = selectedElements.map((candidate) => observeSelectedGeometry(candidate.domElement, refreshSelectedGeometry));
         return () => stops.forEach((stop) => stop());
     }, [selected, selectedElements, selectedInCanvas]);
+    useEffect(() => {
+        const broadcastMeasureModifier = (altKey) => {
+            measureAltKeyRef.current = altKey;
+            for (const [cardId, iframe] of getRegisteredFrames()) {
+                sendMeasureModifier(iframe, cardId, altKey);
+            }
+        };
+        const onKeyDown = (event) => {
+            if (event.key !== "Alt" || measureAltKeyRef.current)
+                return;
+            broadcastMeasureModifier(true);
+        };
+        const onKeyUp = (event) => {
+            if (event.key === "Alt")
+                broadcastMeasureModifier(false);
+        };
+        const onBlur = () => broadcastMeasureModifier(false);
+        window.addEventListener("keydown", onKeyDown, true);
+        window.addEventListener("keyup", onKeyUp, true);
+        window.addEventListener("blur", onBlur);
+        return () => {
+            window.removeEventListener("keydown", onKeyDown, true);
+            window.removeEventListener("keyup", onKeyUp, true);
+            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.
@@ -135,24 +246,41 @@ export function CanvasElementOverlay() {
         return elementId ? { elementId } : null;
     }, [selected?.domElement]);
     useEffect(() => {
-        function onMessage(event) {
-            if (event.origin !== window.location.origin)
-                return;
-            if (!event.data || typeof event.data !== "object")
-                return;
-            const sourceFrame = findCanvasFrameBySource(event.source);
-            if (!sourceFrame)
-                return;
-            const { cardId: sourceCardId, iframe: sourceIframe } = sourceFrame;
-            const frameIdentity = {
-                projectId: PROJECT_ID,
-                workspaceId: WORKSPACE_ID,
-                cardId: sourceCardId,
+        const refreshSpacingPreviewOverlay = (drag) => {
+            const descriptor = {
+                kind: drag.affordance.kind,
+                property: drag.affordance.property,
+                side: drag.affordance.side,
             };
-            if (!isRendererMessageFor(event.data, frameIdentity))
+            const affordance = getSpacingAffordanceForDescriptor(drag.element, descriptor);
+            const rect = toRect(drag.element.getBoundingClientRect());
+            const borders = readBorderWidths(drag.element);
+            const elementId = drag.element.getAttribute(RENDERER_ELEMENT_ID_ATTR);
+            setHover((current) => {
+                if (!current
+                    || current.iframe !== drag.iframe
+                    || current.identity.elementId !== elementId
+                    || !current.spacing
+                    || current.spacing.kind !== descriptor.kind
+                    || current.spacing.property !== descriptor.property
+                    || current.spacing.side !== descriptor.side) {
+                    return current;
+                }
+                return {
+                    ...current,
+                    rect,
+                    borders,
+                    spacingGuides: affordance?.affectedGuides ?? [],
+                    spacingAreas: affordance?.affectedAreas ?? [],
+                };
+            });
+        };
+        const unsubscribe = subscribeCanvasRendererMessages(({ cardId: sourceCardId, iframe: sourceIframe, identity: frameIdentity, message: data, }) => {
+            if (data.type === "renderer-hello" || data.type === "frame-ready") {
+                sendMeasureModifier(sourceIframe, sourceCardId, measureAltKeyRef.current);
+            }
+            if (data.type === "renderer-hello")
                 return;
-            // SAFETY: isRendererMessageFor validated the frame identity and message shape above.
-            const data = event.data;
             if (data.type === "element-hover") {
                 const msg = data;
                 if (!msg.cid)
@@ -161,13 +289,30 @@ export function CanvasElementOverlay() {
                     setHover((current) => current?.cardId === sourceCardId ? null : current);
                     return;
                 }
+                const spacingDescriptor = msg.spacing ?? null;
+                const hoverPoint = msg.point ?? null;
+                const hoverElement = spacingDescriptor
+                    ? findFrameElement(sourceIframe, msg.elementId, msg.cid, msg.src)
+                    : null;
+                const hoverAffordance = spacingDescriptor && hoverElement
+                    ? getSpacingAffordanceForDescriptor(hoverElement, spacingDescriptor)
+                    : spacingDescriptor && hoverPoint && sourceIframe.contentDocument
+                        ? getSpacingAffordanceAtPoint(sourceIframe.contentDocument, hoverPoint.x, hoverPoint.y)
+                        : null;
+                const matchingAffordance = spacingDescriptorMatches(hoverAffordance, spacingDescriptor)
+                    ? hoverAffordance
+                    : null;
+                const spacingGuides = matchingAffordance?.affectedGuides ?? [];
+                const spacingAreas = matchingAffordance?.affectedAreas ?? [];
                 setHover({
                     iframe: sourceIframe,
                     identity: { elementId: msg.elementId },
                     rect: msg.rect,
-                    margins: msg.margins ?? { top: 0, right: 0, bottom: 0, left: 0 },
                     borders: msg.borders ?? { top: 0, right: 0, bottom: 0, left: 0 },
                     cardId: sourceCardId,
+                    spacing: spacingGuides.length > 0 ? spacingDescriptor : null,
+                    spacingGuides,
+                    spacingAreas,
                 });
             }
             else if (data.type === "element-measure-state") {
@@ -179,14 +324,38 @@ export function CanvasElementOverlay() {
                 });
             }
             else if (data.type === "element-click") {
-                if (!isElementClickMessage(event.data, frameIdentity))
+                if (!isElementClickMessage(data, frameIdentity))
                     return;
                 const msg = data;
                 if (!msg.cid)
                     return;
                 handleElementClick(msg, sourceIframe, sourceCardId);
             }
+            else if (data.type === "inline-text-intent") {
+                if (!isInlineTextIntentMessage(data, frameIdentity))
+                    return;
+                if (getSelectedElements().length > 1)
+                    return;
+                const emptyProjection = data.emptyProjectionId
+                    ? Array.from(sourceIframe.contentDocument?.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);
+                if (!element)
+                    return;
+                handleInlineTextEditIntent(data.intent === "double-click"
+                    ? { kind: "double-click", target: element, point: data.point }
+                    : {
+                        kind: "pointer-down",
+                        target: element,
+                        point: data.point,
+                        clickCount: data.clickCount ?? 0,
+                    });
+            }
             else if (data.type === "element-deselect") {
+                clearSpacingDrag(spacingDragRef);
+                dragRef.current = null;
+                clearDropGuide("canvas");
                 setSelectedElement(null);
             }
             else if (data.type === "element-drag-start") {
@@ -196,6 +365,35 @@ export function CanvasElementOverlay() {
                 const element = findFrameElement(sourceIframe, msg.elementId, msg.cid, msg.src);
                 if (!element)
                     return;
+                clearSpacingDrag(spacingDragRef);
+                dragRef.current = null;
+                const startPoint = msg.startPoint ?? msg.point;
+                const spacing = msg.spacing
+                    ? getSpacingAffordanceForDescriptor(element, msg.spacing)
+                    : sourceIframe.contentDocument
+                        ? getSpacingAffordanceAtPoint(sourceIframe.contentDocument, startPoint.x, startPoint.y)
+                        : null;
+                const isSpacingDrag = spacing
+                    && spacing.element === element
+                    && (!msg.spacing || spacingDescriptorMatches(spacing, msg.spacing));
+                if (isSpacingDrag) {
+                    spacingDragRef.current = {
+                        iframe: sourceIframe,
+                        element,
+                        affordance: spacing,
+                        start: startPoint,
+                        startValue: spacing.value,
+                        currentValue: spacing.value,
+                        originalInlineValue: element.style.getPropertyValue(spacing.property),
+                        originalInlinePriority: element.style.getPropertyPriority(spacing.property),
+                    };
+                    const selectedElement = resolveSelectionFromElement(element);
+                    if (selectedElement)
+                        setSelectedElement(selectedElement);
+                    applySpacingPreview(spacingDragRef.current, msg.point, msg.shiftKey === true);
+                    refreshSpacingPreviewOverlay(spacingDragRef.current);
+                    return;
+                }
                 dragRef.current = { iframe: sourceIframe, element };
                 const selectedElement = resolveSelectionFromElement(element);
                 if (selectedElement)
@@ -203,12 +401,38 @@ export function CanvasElementOverlay() {
                 updateDropGuide(msg.point, sourceIframe);
             }
             else if (data.type === "element-drag-move") {
+                const spacing = spacingDragRef.current;
+                if (spacing && spacing.iframe === sourceIframe) {
+                    applySpacingPreview(spacing, data.point, data.shiftKey === true);
+                    refreshSpacingPreviewOverlay(spacing);
+                    return;
+                }
                 updateDropGuide(data.point, sourceIframe);
             }
             else if (data.type === "element-drag-end") {
                 const msg = data;
+                const spacing = spacingDragRef.current;
+                if (spacing && spacing.iframe === sourceIframe) {
+                    spacingDragRef.current = null;
+                    if (msg.cancelled) {
+                        restoreSpacingPreview(spacing);
+                        refreshSpacingPreviewOverlay(spacing);
+                    }
+                    else {
+                        applySpacingPreview(spacing, msg.point, msg.shiftKey === true);
+                        commitSpacingDrag(spacing);
+                        refreshSpacingPreviewOverlay(spacing);
+                    }
+                    clearDropGuide("canvas");
+                    if (!msg.cancelled) {
+                        const selectedElement = resolveSelectionFromElement(spacing.element);
+                        if (selectedElement)
+                            setSelectedElement(selectedElement);
+                    }
+                    return;
+                }
                 const current = dragRef.current;
-                if (current && current.iframe === sourceIframe && sourceIframe.contentDocument) {
+                if (!msg.cancelled && current && current.iframe === sourceIframe && sourceIframe.contentDocument) {
                     const drop = getDropLocationAtPoint(sourceIframe.contentDocument, current.element, msg.point.x, msg.point.y);
                     if (drop)
                         moveElement(current.element, drop);
@@ -249,6 +473,12 @@ export function CanvasElementOverlay() {
                     undo();
                 }
             }
+            else if (data.type === "inspector-toggle-request") {
+                toggleInspector();
+            }
+            else if (data.type === "inspector-open-request") {
+                setInspectorOpen(true);
+            }
             function updateDropGuide(point, iframe) {
                 const current = dragRef.current;
                 if (!current || current.iframe !== iframe || !iframe.contentDocument)
@@ -260,23 +490,22 @@ export function CanvasElementOverlay() {
                 }
                 showDropGuide("canvas", iframe.contentDocument, drop);
             }
-        }
-        window.addEventListener("message", onMessage);
+        });
         return () => {
-            window.removeEventListener("message", onMessage);
+            unsubscribe();
+            clearSpacingDrag(spacingDragRef);
+            dragRef.current = null;
             clearDropGuide("canvas");
         };
     }, []);
+    if (inlineTextSession && inlineTextSession.host.ownerDocument === selected?.domElement.ownerDocument)
+        return null;
     if (!hover && projectedSelectedGeometry.length === 0 && !projectedDropGuide)
         return null;
-    const projectedHoverRect = hover ? projectRect(hover.iframe, hover.rect, camera.zoom) : null;
-    const hoverMargins = hover ? scaleMargins(hover.margins, camera.zoom) : null;
-    const hoverMarginGuides = projectedHoverRect && hoverMargins
-        ? getMarginGuides(projectedHoverRect, hoverMargins)
-        : [];
-    const hoverMarginFills = projectedHoverRect && hoverMargins
-        ? getMarginFills(projectedHoverRect, hoverMargins)
-        : [];
+    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 hoverSpacing = hover?.spacing ?? null;
     const measureStateForSelectedFrame = measureState?.iframe === selectedFrame ? measureState : null;
     const hoverInSelectedFrame = hover?.iframe === selectedFrame ? hover : null;
     const showGuideOverlay = Boolean(selectedElements.length === 1
@@ -287,6 +516,9 @@ export function CanvasElementOverlay() {
     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.
+    const showHoverOutline = Boolean(projectedHoverRect && !isSelfHover);
     const showMeasurement = Boolean(showGuideOverlay
         && selectedLocalRect
         && hoverInSelectedFrame
@@ -295,7 +527,11 @@ export function CanvasElementOverlay() {
         ? projectMeasurementSegments(selectedFrameRect, getMeasurementGeometry(selectedLocalRect, hoverInSelectedFrame.rect, {
             selectedBorders: selectedBorders ?? undefined,
             hoveredBorders: hoverInSelectedFrame.borders,
-        }).segments, camera.zoom)
+        }).segments, projectionZoom)
         : [];
-    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: [hoverMarginFills.map((fill) => (_jsx("div", { className: "canvas-hover-margin-fill", "data-side": fill.side, style: overlayStyle(fill), "aria-hidden": "true" }, fill.side))), _jsx("div", { className: "canvas-element-overlay", "data-test": "canvas-hover-outline", style: overlayStyle(projectedHoverRect), "aria-hidden": "true" }), hoverMarginGuides.map((guide) => (_jsx("div", { className: "canvas-hover-margin", "data-axis": guide.axis, "data-distance": guide.distance, "data-side": guide.side, style: overlayStyle(guide), "aria-hidden": "true" }, guide.side)))] })) : 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}`))), _jsx(DropGuideOverlay, { guide: projectedDropGuide, lineClassName: "canvas-dom-drop-line", lineTestId: "canvas-dom-drop-line", targetClassName: "canvas-dom-drop-target", targetTestId: "canvas-dom-drop-target" })] }));
+    if (presentationTransitioning)
+        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}`))), 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)
+                    : 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.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from "react";
+import type { CanvasInteractionTool } from "./keyboardShortcuts.js";
+export type { CanvasInteractionTool } from "./keyboardShortcuts.js";
+export declare const CANVAS_ZOOM_LEVELS: readonly [0.25, 0.5, 0.9, 1];
+export declare function closestCanvasZoomLevel(zoom: number): number;
+export declare function adjacentCanvasZoomLevel(zoom: number, direction: -1 | 1): number | null;
+export interface CanvasToolbarProps {
+    readonly tool: CanvasInteractionTool;
+    readonly sketchEnabled: boolean;
+    readonly onToolChange: (tool: CanvasInteractionTool) => void;
+}
+export declare function CanvasToolbar({ tool, sketchEnabled, onToolChange, }: CanvasToolbarProps): ReactElement;

package/dist/inspector/canvas/CanvasToolbar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconHandStop, IconPlayerPlay, IconPointer2, IconSketching, } from "@tabler/icons-react";
+import { IconButton } from "../ui/IconButton.js";
+export const CANVAS_ZOOM_LEVELS = [0.25, 0.5, 0.9, 1];
+export function closestCanvasZoomLevel(zoom) {
+    let closest = CANVAS_ZOOM_LEVELS[0];
+    for (const candidate of CANVAS_ZOOM_LEVELS) {
+        if (Math.abs(candidate - zoom) < Math.abs(closest - zoom))
+            closest = candidate;
+    }
+    return closest;
+}
+export function adjacentCanvasZoomLevel(zoom, direction) {
+    const current = closestCanvasZoomLevel(zoom);
+    const index = CANVAS_ZOOM_LEVELS.findIndex((candidate) => candidate === current);
+    const next = CANVAS_ZOOM_LEVELS[index + direction];
+    return next === undefined ? null : next;
+}
+function ToolButton({ active, disabled, label, description, icon, onClick, }) {
+    return (_jsx(IconButton, { variant: "quiet", size: "large", className: "canvas-toolbar__tool", label: label, title: description ?? label, "aria-pressed": active, "data-test": `canvas-tool-${label.toLowerCase()}`, "data-active": active ? "true" : "false", disabled: disabled, onClick: onClick, children: 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, { active: tool === "design", label: "Design", description: "Design (V): click elements to inspect and edit them", icon: _jsx(IconPointer2, { size: "var(--icon-size-large)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), onClick: () => onToolChange("design") }), _jsx(ToolButton, { active: tool === "pan", label: "Pan", icon: _jsx(IconHandStop, { size: "var(--icon-size-large)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), onClick: () => onToolChange("pan") }), _jsx(ToolButton, { active: tool === "sketch", label: "Sketch", disabled: !sketchEnabled, icon: _jsx(IconSketching, { size: "var(--icon-size-large)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), onClick: () => onToolChange("sketch") })] }), _jsx("div", { className: "canvas-toolbar__divider", "aria-hidden": "true" }), _jsx("div", { className: "canvas-toolbar__tools", role: "group", "aria-label": "Preview tools", children: _jsx(ToolButton, { active: tool === "select", label: "Select", description: "Select (I): use the app normally", icon: _jsx(IconPlayerPlay, { size: "var(--icon-size-large)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), onClick: () => onToolChange("select") }) })] }));
+}

package/dist/inspector/canvas/CanvasWorkspace.d.ts

@@ -1,2 +1,5 @@
 import { type ReactElement } from "react";
-export declare function CanvasWorkspace(): ReactElement | null;
+export interface CanvasWorkspaceProps {
+    readonly primaryUrl: string | null;
+}
+export declare function CanvasWorkspace({ primaryUrl }: CanvasWorkspaceProps): ReactElement | null;