nudge-ui 0.2.1 → 0.2.3

package/dist/inspector/canvas/CanvasElementOverlay.js

@@ -1,18 +1,21 @@
 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 { useBoardCamera, useCanvasCards, useCanvasPresentation, useCanvasPresentationTransitioning } from "./canvasStore.js";
+import { useCanvasCards } from "./canvasStore.js";
+import { useBoardCamera, useCanvasPresentation, useCanvasPresentationTransitioning, useCanvasLayoutTransitioning, getCanvasLayoutTransitioning, useTemporaryAppInteraction, } from "./viewStore.js";
 import { handleElementClick } from "./rendererSelectionProxy.js";
-import { getSelectedElements, useSelectedElement, useSelectedElements } from "../selection/selectionStore.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-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-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 { redo, undo } from "../changes/changesLog.js";
+import { changeKey } from "../changes/model.js";
+import { getChanges, redo, subscribeChanges, undo } from "../changes/changesLog.js";
 import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
 import { setSelectedElement } from "../selection/selectionStore.js";
 import { clearDropGuide, showDropGuide, useDropGuide } from "../overlay/dropGuide.js";
 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";
@@ -23,8 +26,10 @@ 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 { getSpacingAffordanceAtPoint, getSpacingAffordanceForDescriptor, getSpacingHoverAtPoint, 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 {
@@ -34,6 +39,20 @@ function projectRect(iframe, rect, 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,
+    };
+}
+function spacingBadgeForDrag(drag, point) {
+    return {
+        iframe: drag.iframe,
+        point: { x: point.x, y: point.y },
+        value: drag.currentValue,
+    };
+}
 function overlayStyle(rect) {
     return {
         position: "fixed",
@@ -104,8 +123,8 @@ function clearSpacingDrag(ref) {
     if (drag)
         restoreSpacingPreview(drag);
 }
-function applySpacingPreview(drag, point) {
-    const value = spacingValueForDrag(drag.affordance, drag.start, point);
+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));
@@ -119,19 +138,95 @@ 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.
+ */
 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, [{
+    if (drag.currentValue === drag.startValue) {
+        restoreSpacingPreview(drag);
+        return [];
+    }
+    return setStyles(drag.element, [{
             property: drag.affordance.property,
             value: spacingValueCss(drag.currentValue),
             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. */
+function tryReleasePendingSpacingCommit(commit) {
+    const { element, property, committedValue } = commit;
+    if (!element.isConnected)
+        return true;
+    element.style.removeProperty(property);
+    const computed = getElementComputedStyle(element).getPropertyValue(property).trim();
+    if (computed === committedValue) {
+        endLayoutPreview(element, property);
+        return true;
+    }
+    element.style.setProperty(property, committedValue);
+    return false;
+}
+function releasePendingSpacingCommits(pending, iframe) {
+    if (pending.length === 0)
+        return;
+    let write = 0;
+    for (const commit of pending) {
+        if (commit.iframe !== iframe || !tryReleasePendingSpacingCommit(commit)) {
+            pending[write] = commit;
+            write += 1;
+        }
+    }
+    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. */
+function reconcilePendingSpacingCommits(pending) {
+    if (pending.length === 0)
+        return;
+    const survivingKeys = new Set(getChanges().map(changeKey));
+    let write = 0;
+    for (const commit of pending) {
+        if (commit.keys.some((key) => survivingKeys.has(key))) {
+            pending[write] = commit;
+            write += 1;
+            continue;
+        }
+        const { element, property, originalInlineValue, originalInlinePriority } = commit;
+        if (originalInlineValue) {
+            element.style.setProperty(property, originalInlineValue, originalInlinePriority);
+        }
+        else {
+            element.style.removeProperty(property);
+        }
+        endLayoutPreview(element, property);
+    }
+    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. */
+function pushPendingSpacingCommit(pending, next) {
+    const existing = pending.findIndex((commit) => commit.iframe === next.iframe
+        && commit.element === next.element
+        && commit.property === next.property);
+    if (existing === -1) {
+        pending.push(next);
+        return;
+    }
+    pending[existing] = {
+        ...next,
+        originalInlineValue: pending[existing].originalInlineValue,
+        originalInlinePriority: pending[existing].originalInlinePriority,
+    };
+}
 function sendMeasureModifier(iframe, cardId, altKey) {
     iframe.contentWindow?.postMessage({
         type: "measure-modifier",
@@ -148,10 +243,20 @@ export function CanvasElementOverlay() {
     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();
     const presentation = useCanvasPresentation();
     const presentationTransitioning = useCanvasPresentationTransitioning();
+    const layoutTransitioning = useCanvasLayoutTransitioning();
+    const temporaryAppInteraction = useTemporaryAppInteraction();
+    useEffect(() => {
+        if (!layoutTransitioning)
+            return;
+        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("|");
@@ -159,6 +264,8 @@ export function CanvasElementOverlay() {
     const previousProjectionGeometryKey = useRef(projectionGeometryKey);
     const dragRef = useRef(null);
     const spacingDragRef = useRef(null);
+    const pendingSpacingCommitsRef = useRef([]);
+    const [spacingDragBadge, setSpacingDragBadge] = useState(null);
     const measureAltKeyRef = useRef(false);
     const dropGuide = useDropGuide("canvas");
     const projectedDropGuide = projectGuideToCanvas(dropGuide, projectionZoom);
@@ -241,13 +348,56 @@ 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.
+    useEffect(() => {
+        return subscribeChanges(() => {
+            reconcilePendingSpacingCommits(pendingSpacingCommitsRef.current);
+        });
+    }, []);
     useEffect(() => {
+        const refreshSpacingPreviewOverlay = (drag) => {
+            const descriptor = {
+                kind: drag.affordance.kind,
+                property: drag.affordance.property,
+                side: drag.affordance.side,
+            };
+            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;
+            if (data.type === "projection-applied") {
+                releasePendingSpacingCommits(pendingSpacingCommitsRef.current, sourceIframe);
+                return;
+            }
+            if (getCanvasLayoutTransitioning())
+                return;
             if (data.type === "element-hover") {
                 const msg = data;
                 if (!msg.cid)
@@ -256,7 +406,7 @@ export function CanvasElementOverlay() {
                     setHover((current) => current?.cardId === sourceCardId ? null : current);
                     return;
                 }
-                const spacingDescriptor = msg.spacing ?? null;
+                const spacingDescriptor = msg.hoverSpacing ?? msg.spacing ?? null;
                 const hoverPoint = msg.point ?? null;
                 const hoverElement = spacingDescriptor
                     ? findFrameElement(sourceIframe, msg.elementId, msg.cid, msg.src)
@@ -264,7 +414,7 @@ export function CanvasElementOverlay() {
                 const hoverAffordance = spacingDescriptor && hoverElement
                     ? getSpacingAffordanceForDescriptor(hoverElement, spacingDescriptor)
                     : spacingDescriptor && hoverPoint && sourceIframe.contentDocument
-                        ? getSpacingAffordanceAtPoint(sourceIframe.contentDocument, hoverPoint.x, hoverPoint.y)
+                        ? getSpacingHoverAtPoint(sourceIframe.contentDocument, hoverPoint.x, hoverPoint.y)
                         : null;
                 const matchingAffordance = spacingDescriptorMatches(hoverAffordance, spacingDescriptor)
                     ? hoverAffordance
@@ -321,6 +471,7 @@ export function CanvasElementOverlay() {
             }
             else if (data.type === "element-deselect") {
                 clearSpacingDrag(spacingDragRef);
+                setSpacingDragBadge(null);
                 dragRef.current = null;
                 clearDropGuide("canvas");
                 setSelectedElement(null);
@@ -357,7 +508,9 @@ export function CanvasElementOverlay() {
                     const selectedElement = resolveSelectionFromElement(element);
                     if (selectedElement)
                         setSelectedElement(selectedElement);
-                    applySpacingPreview(spacingDragRef.current, msg.point);
+                    applySpacingPreview(spacingDragRef.current, msg.point, msg.shiftKey === true);
+                    setSpacingDragBadge(spacingBadgeForDrag(spacingDragRef.current, msg.point));
+                    refreshSpacingPreviewOverlay(spacingDragRef.current);
                     return;
                 }
                 dragRef.current = { iframe: sourceIframe, element };
@@ -369,7 +522,9 @@ export function CanvasElementOverlay() {
             else if (data.type === "element-drag-move") {
                 const spacing = spacingDragRef.current;
                 if (spacing && spacing.iframe === sourceIframe) {
-                    applySpacingPreview(spacing, data.point);
+                    applySpacingPreview(spacing, data.point, data.shiftKey === true);
+                    setSpacingDragBadge(spacingBadgeForDrag(spacing, data.point));
+                    refreshSpacingPreviewOverlay(spacing);
                     return;
                 }
                 updateDropGuide(data.point, sourceIframe);
@@ -379,12 +534,26 @@ export function CanvasElementOverlay() {
                 const spacing = spacingDragRef.current;
                 if (spacing && spacing.iframe === sourceIframe) {
                     spacingDragRef.current = null;
+                    setSpacingDragBadge(null);
                     if (msg.cancelled) {
                         restoreSpacingPreview(spacing);
+                        refreshSpacingPreviewOverlay(spacing);
                     }
                     else {
-                        applySpacingPreview(spacing, msg.point);
-                        commitSpacingDrag(spacing);
+                        applySpacingPreview(spacing, msg.point, msg.shiftKey === true);
+                        const records = commitSpacingDrag(spacing);
+                        if (records.length > 0) {
+                            pushPendingSpacingCommit(pendingSpacingCommitsRef.current, {
+                                iframe: sourceIframe,
+                                element: spacing.element,
+                                property: spacing.affordance.property,
+                                committedValue: spacingValueCss(spacing.currentValue),
+                                keys: records.map((record) => changeKey(record)),
+                                originalInlineValue: spacing.originalInlineValue,
+                                originalInlinePriority: spacing.originalInlinePriority,
+                            });
+                        }
+                        refreshSpacingPreviewOverlay(spacing);
                     }
                     clearDropGuide("canvas");
                     if (!msg.cancelled) {
@@ -458,6 +627,7 @@ export function CanvasElementOverlay() {
             unsubscribe();
             clearSpacingDrag(spacingDragRef);
             dragRef.current = null;
+            pendingSpacingCommitsRef.current = [];
             clearDropGuide("canvas");
         };
     }, []);
@@ -468,6 +638,9 @@ export function CanvasElementOverlay() {
     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)
+        : null;
     const hoverSpacing = hover?.spacing ?? null;
     const measureStateForSelectedFrame = measureState?.iframe === selectedFrame ? measureState : null;
     const hoverInSelectedFrame = hover?.iframe === selectedFrame ? hover : null;
@@ -479,6 +652,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
@@ -489,7 +665,9 @@ export function CanvasElementOverlay() {
             hoveredBorders: hoverInSelectedFrame.borders,
         }).segments, projectionZoom)
         : [];
-    if (presentationTransitioning)
+    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, _jsx("div", { className: "canvas-element-overlay", "data-test": "canvas-hover-outline", style: overlayStyle(projectedHoverRect), "aria-hidden": "true" }), 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}`))), _jsx(DropGuideOverlay, { guide: projectedDropGuide, lineClassName: "canvas-dom-drop-line", lineTestId: "canvas-dom-drop-line", targetClassName: "canvas-dom-drop-target", targetTestId: "canvas-dom-drop-target" })] }));
+    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)
+                    : 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/CanvasToolIcons.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement, SVGProps } from "react";
+type CanvasToolIconProps = Pick<SVGProps<SVGSVGElement>, "aria-hidden" | "className" | "style"> & {
+    readonly size?: string | number;
+};
+export declare function DesignPointerFilledIcon(props: CanvasToolIconProps): ReactElement;
+export declare function SketchThickIcon(props: CanvasToolIconProps): ReactElement;
+export declare function PanHandFilledIcon(props: CanvasToolIconProps): ReactElement;
+export declare function SelectPlayOutlineIcon(props: CanvasToolIconProps): ReactElement;
+export declare function SelectPlayFilledIcon(props: CanvasToolIconProps): ReactElement;
+export {};

package/dist/inspector/canvas/CanvasToolIcons.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function ToolIconSvg({ size = 24, children, ...props }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: children }));
+}
+export function DesignPointerFilledIcon(props) {
+    return (_jsx(ToolIconSvg, { ...props, children: _jsx("path", { d: "M19.8289 10.9379L14.499 12.9999L14.1844 13.1399C13.9474 13.2324 13.7322 13.373 13.5524 13.5529C13.3725 13.7327 13.2319 13.9479 13.1395 14.1849L10.9376 19.8288C10.3047 21.4538 7.97489 21.3668 7.46494 19.6988L3.08331 5.38099C2.65134 3.97101 3.97123 2.65202 5.38111 3.08302L19.6989 7.46496C21.3668 7.97595 21.4537 10.3039 19.8289 10.9379Z", fill: "currentColor" }) }));
+}
+export function SketchThickIcon(props) {
+    return (_jsx(ToolIconSvg, { ...props, children: _jsx("path", { d: "M4 15C6 10.03 11.356 4 13 4C17.25 4 7.5 15.958 10 17C12.5 18.042 15.65 10.322 17.4 11.098C19.15 11.875 16.35 18.687 17.1 19.728C17.85 20.769 20.25 18.831 21 17", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+export function PanHandFilledIcon(props) {
+    return (_jsx(ToolIconSvg, { ...props, children: _jsx("path", { d: "M12.5 2.5C12.6312 2.50003 12.7616 2.52599 12.8828 2.57617C13.004 2.6264 13.1143 2.70024 13.207 2.79297C13.2998 2.88575 13.3736 2.99599 13.4238 3.11719C13.4741 3.23849 13.5 3.36871 13.5 3.5V12C13.5 12.2761 13.724 12.4999 14 12.5C14.2761 12.4999 14.5 12.2761 14.5 12V5.5C14.5 5.23483 14.6055 4.98049 14.793 4.79297C14.9805 4.60555 15.2349 4.50006 15.5 4.5C15.7651 4.50006 16.0196 4.60555 16.207 4.79297C16.3945 4.98049 16.5 5.23484 16.5 5.5V12C16.5 12.2761 16.724 12.4999 17 12.5C17.2761 12.4999 17.5 12.2761 17.5 12V7.5C17.5 7.23483 17.6055 6.9805 17.793 6.79297C17.9805 6.60555 18.2349 6.50006 18.5 6.5C18.7651 6.50006 19.0196 6.60555 19.207 6.79297C19.3945 6.98049 19.5 7.23484 19.5 7.5V16C19.5 17.4585 18.9208 18.8573 17.8897 19.8887C16.8583 20.9201 15.4586 21.4999 14 21.5H12.208C11.2973 21.5001 10.4005 21.2737 9.59865 20.8418C8.79689 20.4098 8.11519 19.786 7.61427 19.0254C7.54921 18.9264 7.48351 18.8269 7.41896 18.7275C7.11837 18.266 6.03484 16.376 4.15041 13.0264C4.0228 12.7994 3.98801 12.5319 4.0547 12.2803C4.12142 12.0287 4.28463 11.8126 4.50783 11.6787C4.7689 11.5222 5.07483 11.4571 5.37697 11.4941C5.67933 11.5313 5.96123 11.6685 6.17677 11.8838L7.6465 13.3535C7.68032 13.3873 7.71897 13.4135 7.7588 13.4355C7.80294 13.4601 7.85033 13.48 7.90138 13.4902C7.96605 13.5031 8.03299 13.5031 8.09767 13.4902C8.15175 13.4795 8.20178 13.4583 8.24806 13.4316C8.28533 13.4102 8.32167 13.3854 8.35353 13.3535C8.38754 13.3195 8.41341 13.2803 8.43556 13.2402C8.46003 13.196 8.48011 13.1488 8.49025 13.0977C8.49663 13.0654 8.50002 13.0327 8.50002 13V5.5C8.50002 5.23483 8.60551 4.98049 8.79298 4.79297C8.98046 4.60555 9.23493 4.50006 9.50002 4.5C9.7651 4.50006 10.0196 4.60555 10.207 4.79297C10.3945 4.98049 10.5 5.23484 10.5 5.5V12C10.5 12.2761 10.724 12.4999 11 12.5C11.2761 12.4999 11.5 12.2761 11.5 12V3.5C11.5 3.3687 11.526 3.23849 11.5762 3.11719C11.6264 2.99599 11.7002 2.88575 11.793 2.79297C11.8857 2.70024 11.996 2.6264 12.1172 2.57617C12.2384 2.526 12.3688 2.50003 12.5 2.5Z", fill: "currentColor" }) }));
+}
+const SELECT_PLAY_PATH = "M8.5241 4.93791C7.85783 4.52789 7 5.00724 7 5.78956V18.2104C7 18.9928 7.85783 19.4721 8.5241 19.0621L18.6161 12.8517C19.2506 12.4612 19.2506 11.5388 18.6161 11.1483L8.5241 4.93791Z";
+export function SelectPlayOutlineIcon(props) {
+    return (_jsx(ToolIconSvg, { ...props, children: _jsx("path", { d: SELECT_PLAY_PATH, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+export function SelectPlayFilledIcon(props) {
+    return (_jsx(ToolIconSvg, { ...props, children: _jsx("path", { d: SELECT_PLAY_PATH, fill: "currentColor", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/inspector/canvas/CanvasToolbar.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconHandStop, IconPointer2, IconSketching, } from "@tabler/icons-react";
+import { IconMessageCircle, IconMessageCircleFilled, IconPointer2, IconSketching } from "@tabler/icons-react";
 import { IconButton } from "../ui/IconButton.js";
+import { Tooltip } from "../ui/Tooltip.js";
+import { DesignPointerFilledIcon, SelectPlayFilledIcon, SelectPlayOutlineIcon, SketchThickIcon, } from "./CanvasToolIcons.js";
 export const CANVAS_ZOOM_LEVELS = [0.25, 0.5, 0.9, 1];
 export function closestCanvasZoomLevel(zoom) {
     let closest = CANVAS_ZOOM_LEVELS[0];
@@ -16,9 +18,11 @@ export function adjacentCanvasZoomLevel(zoom, direction) {
     const next = CANVAS_ZOOM_LEVELS[index + direction];
     return next === undefined ? null : next;
 }
-function ToolButton({ active, disabled, label, icon, onClick, }) {
-    return (_jsx(IconButton, { variant: "quiet", size: "large", className: "canvas-toolbar__tool", label: label, title: label, "aria-pressed": active, "data-test": `canvas-tool-${label.toLowerCase()}`, "data-active": active ? "true" : "false", disabled: disabled, onClick: onClick, children: icon }));
+const ICON_SIZE = "var(--icon-size-large)";
+function ToolButton({ tool, activeTool, disabled, label, shortcut, icon, activeIcon, onToolChange, }) {
+    const active = tool === activeTool;
+    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 (_jsx("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 === "move", label: "Move", icon: _jsx(IconPointer2, { size: "var(--icon-size-large)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), onClick: () => onToolChange("move") }), _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") })] }) }));
+    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 }) })] }));
 }