nudge-ui 0.2.2 → 0.2.3

package/dist/inspector/canvas/CanvasCard.js

@@ -1,11 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AgentActivityOverlay } from "./AgentActivityOverlay.js";
+import { contentDocumentUrl, contentNavigationUrl, contentSourceUrl, iterationId } from "./frameContent.js";
+import { refreshHtmlIteration } from "../iterations/coordinator.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { CANVAS_RENDERER_ATTR } from "./roleDetection.js";
-import { removeCanvasCard, updateCardTitle, updateCardUrl, resizeCard, setCardPosition, selectCard, getSelectedCardId, useSelectedCardId, useFocusedCardId, useBoardCamera } from "./canvasStore.js";
-import { IconRefresh, IconArrowsDiagonal, IconCornerLeftDown } from "@tabler/icons-react";
+import { useCanvasCards, getCanvasCardLabel, updateCardUrl, resizeCard, setCardPosition, selectCard, getSelectedCardId, useSelectedCardId, useFocusedCardId, } from "./canvasStore.js";
+import { useBoardCamera } from "./viewStore.js";
+import { IconArrowsDiagonal, IconCopy, IconCornerLeftDown, IconBoltFilled, IconArtboard, IconTrash } from "@tabler/icons-react";
 import { PROTOCOL_VERSION, } from "./frameProtocol.js";
 import { registerCardFrame, registerCardFrameSource, unregisterCardFrame, sendProjectionToCard, invalidateCanvasPreviewDocument, PROJECT_ID, WORKSPACE_ID } from "./projection.js";
 import { Button } from "../ui/Button.js";
+import { IconButton } from "../ui/IconButton.js";
+import { Tooltip } from "../ui/Tooltip.js";
 import { setSelectedElement } from "../selection/selectionStore.js";
 import { clearCanvasStructuralProjectionReports } from "../projection/structuralProjection.js";
 import { clearCanvasRenderedInstanceProjectionReports } from "../projection/renderedInstance.js";
@@ -15,12 +21,16 @@ import { getCanvasResizeHandleScale } from "./resizeHandleScale.js";
 import { disposeBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
 import { releaseDocumentProjection } from "../projection/structuralProjection.js";
 import { startClipboardHandoffController } from "../prompt/clipboardHandoff.js";
-import { disposeInlineTextEdit } from "../inline-text/inlineTextEditor.js";
+import { disposeInlineTextEdit, isInlineTextEditingActive } from "../inline-text/inlineTextEditor.js";
 import { configureNudgeUiRuntime, getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
+import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { reconcileRuntimeWithDocumentStylesheets } from "../runtime/documentStylesheetOrder.js";
 import { subscribeCanvasRendererMessages } from "./rendererMessageRouter.js";
 import { SketchFrameOverlay } from "../sketch/SketchFrameOverlay.js";
 import { getCanvasResizeEdges, resizeCanvasRect, } from "./canvasResize.js";
+import { getDraftContentsForCard } from "../drafts/store.js";
+import { removeFrame } from "../workspace/commands.js";
+import { artifactDocumentUrl } from "../iterations/client.js";
 const RESIZE_HANDLES = [
     { direction: "top-left", cursor: "nwse-resize", transformOrigin: "left top", label: "Resize card from the top-left corner" },
     { direction: "top", cursor: "ns-resize", transformOrigin: "center top", label: "Resize card from the top edge" },
@@ -38,15 +48,23 @@ function resizeHandleTransform(direction, scale) {
         return `scale(${scale}, 1)`;
     return `scale(${scale})`;
 }
-export function CanvasCard({ card, presentation = "canvas", presentationCard = true, onShowFocus, documentOwner }) {
+export function CanvasCard({ card, presentation = "canvas", presentationCard = true, linkedToActive = false, onShowFocus, onDuplicate, onCreateIteration, documentOwner }) {
     const iframeRef = useRef(null);
-    const initialUrlRef = useRef(card.navigationUrl ?? card.url);
-    const navigationUrlRef = useRef(card.navigationUrl);
+    const initialUrlRef = useRef(contentNavigationUrl(card.content) ?? contentSourceUrl(card.content));
+    const navigationUrlRef = useRef(contentNavigationUrl(card.content));
     const documentSessionRef = useRef(null);
     const frameRuntimeRef = useRef(null);
     const [loadState, setLoadState] = useState("loading");
     const [errorMessage, setErrorMessage] = useState(null);
+    const [creatingIteration, setCreatingIteration] = useState(false);
+    const [iterationError, setIterationError] = useState(null);
     const camera = useBoardCamera();
+    const runtimeConfig = useNudgeUiRuntimeConfig();
+    const canvasCards = useCanvasCards();
+    const canRemove = canvasCards.length > 1;
+    const frameLabel = runtimeConfig.demo === true && runtimeConfig.demoCardLabels?.length && card.title
+        ? card.title
+        : getCanvasCardLabel(card, canvasCards);
     const selectedCardId = useSelectedCardId();
     const focusedCardId = useFocusedCardId();
     const isSelected = selectedCardId === card.id;
@@ -94,22 +112,59 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
             disposeDocumentSession();
             unregisterCardFrame(card.id);
         };
-    }, [bindDocumentSession, card.id, disposeDocumentSession]);
+    }, [bindDocumentSession, card.id, iterationId(card.content), disposeDocumentSession]);
+    useEffect(() => {
+        if (card.content.kind !== "iteration" || loadState !== "ready")
+            return;
+        const artifactId = card.content.artifactId;
+        let active = true;
+        let checking = false;
+        let reloadPending = false;
+        const timer = window.setInterval(() => {
+            const workspace = getDraftContentsForCard(card.id);
+            // Pending inspector edits still project over preview.html. Do not replace
+            // that base until they have been saved and handed off.
+            if (checking || isInlineTextEditingActive() || workspace?.changes.length || workspace?.structuralChanges.length)
+                return;
+            checking = true;
+            const frame = iframeRef.current;
+            if (!frame) {
+                checking = false;
+                return;
+            }
+            void refreshHtmlIteration(card.id, artifactId, frame).then((changed) => {
+                reloadPending ||= changed;
+                const latest = getDraftContentsForCard(card.id);
+                if (active && reloadPending && !isInlineTextEditingActive() && !latest?.changes.length && !latest?.structuralChanges.length) {
+                    reloadPending = false;
+                    loadFrame(`${artifactDocumentUrl(artifactId)}?revision=${Date.now()}`);
+                }
+            }).catch(() => undefined).finally(() => { checking = false; });
+        }, 1500);
+        return () => { active = false; window.clearInterval(timer); };
+    }, [iterationId(card.content), card.id, loadFrame, loadState]);
     function handleReload() {
         loadFrame();
     }
     function handleRemove() {
         if (getSelectedCardId() === card.id)
             setSelectedElement(null);
-        removeCanvasCard(card.id);
+        removeFrame(card.id);
     }
-    function updateFrameTitle(title) {
-        if (!title)
-            return;
-        const runtime = getNudgeUiRuntimeConfig();
-        if (runtime.demo === true && (runtime.demoCardLabels?.length ?? 0) > 0)
+    async function handleIteration(position) {
+        if (creatingIteration || !onCreateIteration || loadState !== "ready")
             return;
-        updateCardTitle(card.id, title);
+        setCreatingIteration(true);
+        setIterationError(null);
+        try {
+            return await onCreateIteration(card.id, position);
+        }
+        catch (error) {
+            setIterationError(error instanceof Error ? error.message : "The iteration could not be created.");
+        }
+        finally {
+            setCreatingIteration(false);
+        }
     }
     /** The controller half of the handshake: announce workspace identity. */
     function sendParentReady() {
@@ -158,8 +213,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
                 adoptFrameRuntime(data.runtime);
                 setLoadState("ready");
                 setErrorMessage(null);
-                updateFrameTitle(data.title);
-                if (data.url)
+                if (data.url && !iterationId(card.content))
                     updateCardUrl(card.id, data.url);
                 if (iframeRef.current) {
                     registerCardFrame(card.id, iframeRef.current);
@@ -172,8 +226,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
                 return;
             }
             if (data.type === "frame-metadata") {
-                updateFrameTitle(data.title);
-                if (data.url)
+                if (data.url && !iterationId(card.content))
                     updateCardUrl(card.id, data.url);
                 return;
             }
@@ -182,13 +235,13 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
                 setErrorMessage(data.message || "Frame failed to load");
             }
         });
-    }, [card.id]);
+    }, [card.id, iterationId(card.content)]);
     useLayoutEffect(() => {
-        if (!card.navigationUrl || navigationUrlRef.current === card.navigationUrl)
+        if (!contentNavigationUrl(card.content) || navigationUrlRef.current === contentNavigationUrl(card.content))
             return;
-        navigationUrlRef.current = card.navigationUrl;
-        loadFrame(card.navigationUrl);
-    }, [card.navigationUrl, loadFrame]);
+        navigationUrlRef.current = contentNavigationUrl(card.content);
+        loadFrame(contentNavigationUrl(card.content));
+    }, [contentNavigationUrl(card.content), loadFrame]);
     useEffect(() => {
         if (loadState !== "loading")
             return;
@@ -220,12 +273,13 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         }
         iframe.addEventListener("load", onLoad);
         return () => iframe.removeEventListener("load", onLoad);
-    }, [bindDocumentSession, card.id, disposeDocumentSession]);
+    }, [bindDocumentSession, card.id, iterationId(card.content), disposeDocumentSession]);
     const [isDragging, setIsDragging] = useState(false);
     const dragRef = useRef({ startX: 0, startY: 0, cardX: 0, cardY: 0 });
+    const dragCleanupRef = useRef(null);
     const resizeCleanupRef = useRef(null);
     useEffect(() => {
-        return () => resizeCleanupRef.current?.();
+        return () => { resizeCleanupRef.current?.(); dragCleanupRef.current?.(); };
     }, []);
     const handleToolbarPointerDown = useCallback((e) => {
         // SAFETY: pointer events on the card target are HTMLElements in this DOM context.
@@ -237,6 +291,12 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         selectCard(card.id);
         e.stopPropagation();
         e.preventDefault();
+        const iterationDrag = e.altKey && !!onCreateIteration && loadState === "ready" && !creatingIteration;
+        let moved = false;
+        let iterationId;
+        let creationStarted = false;
+        let cancelled = false;
+        let position = { x: card.x, y: card.y };
         dragRef.current = {
             startX: e.clientX,
             startY: e.clientY,
@@ -249,16 +309,56 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         function onMove(ev) {
             const dx = (ev.clientX - dragRef.current.startX) / camera.zoom;
             const dy = (ev.clientY - dragRef.current.startY) / camera.zoom;
-            setCardPosition(card.id, dragRef.current.cardX + dx, dragRef.current.cardY + dy);
+            moved ||= Math.hypot(ev.clientX - dragRef.current.startX, ev.clientY - dragRef.current.startY) >= 6;
+            position = { x: dragRef.current.cardX + dx, y: dragRef.current.cardY + dy };
+            if (iterationDrag) {
+                if (iterationId)
+                    setCardPosition(iterationId, position.x, position.y);
+                else if (moved && !creationStarted) {
+                    creationStarted = true;
+                    void handleIteration(position).then((id) => {
+                        if (!id)
+                            return;
+                        iterationId = id;
+                        if (cancelled) {
+                            removeFrame(id, { undoable: false });
+                            selectCard(card.id);
+                        }
+                        else
+                            setCardPosition(id, position.x, position.y);
+                    });
+                }
+            }
+            else
+                setCardPosition(card.id, position.x, position.y);
         }
-        function onUp() {
-            setIsDragging(false);
+        function cleanup() {
             window.removeEventListener("pointermove", onMove);
             window.removeEventListener("pointerup", onUp);
+            window.removeEventListener("pointercancel", onCancel);
+            dragCleanupRef.current = null;
         }
+        function onCancel() {
+            cleanup();
+            setIsDragging(false);
+            cancelled = true;
+            if (iterationId) {
+                removeFrame(iterationId, { undoable: false });
+                selectCard(card.id);
+            }
+        }
+        function onUp() {
+            cleanup();
+            setIsDragging(false);
+            if (iterationId)
+                setCardPosition(iterationId, position.x, position.y);
+        }
+        dragCleanupRef.current?.();
+        dragCleanupRef.current = onCancel;
         window.addEventListener("pointermove", onMove);
         window.addEventListener("pointerup", onUp);
-    }, [card.id, card.x, card.y, camera.zoom]);
+        window.addEventListener("pointercancel", onCancel);
+    }, [card.id, card.x, card.y, camera.zoom, onCreateIteration, loadState, creatingIteration]);
     const handleCardPointerDown = useCallback(() => {
         if (getSelectedCardId() !== card.id)
             setSelectedElement(null);
@@ -341,7 +441,8 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         const next = resizeCanvasRect(card, direction, delta);
         resizeCard(card.id, next.width, next.height, { x: next.x, y: next.y });
     }
-    return (_jsxs("div", { className: `canvas-card${isDragging ? " is-dragging" : ""}${isSelected ? " is-selected" : ""}${isFocused ? " is-focused" : ""}${isFocusPresentationCard ? " is-focus-presentation" : ""}${presentationCard ? " is-presentation-card" : ""}`, "data-card-id": card.id, style: {
+    return (_jsxs("div", { className: `canvas-card${linkedToActive ? " is-linked" : ""}${isDragging ? " is-dragging" : ""}${isSelected ? " is-selected" : ""}${isFocused ? " is-focused" : ""}${isFocusPresentationCard ? " is-focus-presentation" : ""}${presentationCard ? " is-presentation-card" : ""}`, "data-card-id": card.id, tabIndex: presentation === "canvas" ? 0 : undefined, role: "group", "aria-label": `Frame: ${frameLabel}`, style: {
+            "--canvas-toolbar-scale": toolbarScale,
             position: "absolute",
             visibility: presentation === "focus" && !presentationCard ? "hidden" : undefined,
             pointerEvents: presentation === "focus" && !presentationCard ? "none" : undefined,
@@ -349,13 +450,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
             top: isFocusPresentationCard ? 0 : card.y,
             width: isFocusPresentationCard ? "100%" : card.width,
             height: isFocusPresentationCard ? "100%" : card.height,
-        }, onPointerDown: presentation === "canvas" ? handleCardPointerDown : undefined, children: [presentation === "canvas" ? _jsx("div", { className: "canvas-card__toolbar", onPointerDown: handleToolbarPointerDown, children: _jsxs("div", { className: "canvas-card__drag-surface", "data-test": `canvas-card-drag-${card.id}`, children: [onShowFocus ? (_jsxs(Button, { title: "Focus", variant: "primary", size: "default", "data-test": `canvas-card-focus-${card.id}`, style: {
-                                transform: `scale(${toolbarScale})`,
-                                transformOrigin: "left bottom",
-                            }, onClick: () => onShowFocus(card.id), children: [_jsx(IconCornerLeftDown, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), "Focus"] })) : null, _jsx("span", { className: "canvas-card__dimensions", "data-test": `canvas-card-dimensions-${card.id}`, style: {
-                                transform: `translateX(-50%) scale(${toolbarScale})`,
-                                transformOrigin: "center bottom",
-                            }, children: card.title || `${Math.round(card.width)} × ${Math.round(card.height)} px` })] }) }) : null, _jsxs("div", { className: "canvas-card__frame", children: [loadState === "loading" ? (_jsx("div", { className: "canvas-card__loading", "data-test": `canvas-card-loading-${card.id}`, children: "Loading preview..." })) : loadState === "error" ? (_jsxs("div", { className: "canvas-card__error", "data-test": `canvas-card-error-${card.id}`, children: [_jsx("p", { children: errorMessage || "Frame could not be loaded" }), _jsxs("div", { className: "canvas-card__error-actions", children: [_jsx(Button, { size: "compact", variant: "secondary", onClick: handleReload, children: "Retry" }), _jsx(Button, { size: "compact", variant: "danger", onClick: handleRemove, children: "Remove" })] })] })) : null, _jsx("iframe", { ref: iframeRef, className: "canvas-card__iframe", src: initialUrlRef.current, title: card.title || card.url, [CANVAS_RENDERER_ATTR]: "", sandbox: "allow-scripts allow-same-origin allow-forms allow-popups", "data-test": `canvas-card-iframe-${card.id}` }), _jsx(SketchFrameOverlay, { iframe: iframeRef.current, cardUrl: card.url, ready: loadState === "ready" })] }), presentation === "canvas" ? RESIZE_HANDLES.map((handle) => (_jsx("div", { className: `canvas-card__resize-handle canvas-card__resize-handle--${handle.direction}`, "data-test": `canvas-card-resize-${card.id}${handle.direction === "bottom-right" ? "" : `-${handle.direction}`}`, "data-resize-direction": handle.direction, style: {
+        }, onPointerDown: presentation === "canvas" ? handleCardPointerDown : undefined, children: [presentation === "canvas" ? _jsx(_Fragment, { children: _jsxs("div", { className: "canvas-card__header", style: { bottom: "100%", minHeight: `calc(var(--control-height-large) * ${toolbarScale})` }, children: [_jsxs("div", { className: "canvas-card__drag-surface", style: { minHeight: `calc(var(--control-height-large) * ${toolbarScale})` }, "data-test": `canvas-card-drag-${card.id}`, onPointerDown: handleToolbarPointerDown, children: [_jsx("div", { className: "canvas-card__identity", style: { zoom: toolbarScale }, children: _jsxs("span", { className: "canvas-card__dimensions", "data-test": `canvas-card-dimensions-${card.id}`, children: [!iterationId(card.content) ? (_jsx(Tooltip, { content: "Live view", children: _jsx("span", { className: "canvas-card__live-badge", "aria-label": "Live view", "data-test": `canvas-card-live-${card.id}`, children: _jsx(IconBoltFilled, { size: 12, "aria-hidden": "true" }) }) })) : (_jsx(Tooltip, { content: "HTML only", children: _jsx("span", { className: "canvas-card__iteration-badge", "aria-label": "HTML only", "data-test": `canvas-card-iteration-badge-${card.id}`, children: _jsx(IconArtboard, { size: 14, "aria-hidden": "true" }) }) })), _jsx("span", { className: "canvas-card__title", children: frameLabel })] }) }), iterationError ? _jsx("span", { className: "canvas-card__iteration-error", role: "status", children: iterationError }) : null] }), _jsx("div", { className: "canvas-card__floating-toolbar", "data-busy": creatingIteration ? "true" : undefined, onPointerDown: (event) => event.stopPropagation(), children: _jsxs("div", { className: "canvas-toolbar canvas-card__actions", style: { zoom: toolbarScale }, role: "toolbar", "aria-label": "Frame actions", "aria-busy": creatingIteration, "data-test": `canvas-card-actions-${card.id}`, children: [onShowFocus ? (_jsx(Tooltip, { content: "Open this frame in focus view", children: _jsxs(Button, { variant: "quiet", size: "default", "data-test": `canvas-card-focus-${card.id}`, onClick: () => onShowFocus(card.id), children: [_jsx(IconCornerLeftDown, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), "Focus"] }) })) : null, onDuplicate && !iterationId(card.content) ? (_jsx(Tooltip, { content: "Create a linked copy of this frame", children: _jsxs(Button, { variant: "quiet", size: "default", "data-test": `canvas-card-duplicate-${card.id}`, onClick: () => onDuplicate(card.id), children: [_jsx(IconCopy, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), "Duplicate"] }) })) : null, onCreateIteration ? (_jsx(Tooltip, { content: "Unlinked HTML version", stableTrigger: true, children: _jsxs(Button, { variant: "quiet", size: "default", "data-test": `canvas-card-create-iteration-${card.id}`, disabled: creatingIteration || loadState !== "ready", onClick: () => void handleIteration(), children: [_jsx(IconArtboard, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), creatingIteration ? "Creating…" : "Iteration"] }) })) : null, _jsx("div", { className: "canvas-toolbar__divider", "aria-hidden": "true" }), _jsx(Tooltip, { content: canRemove ? "Delete frame" : "Keep at least one frame on the canvas", children: _jsx(IconButton, { variant: "quiet", size: "default", label: "Delete frame", "data-test": `canvas-card-delete-${card.id}`, disabled: !canRemove, onClick: handleRemove, children: _jsx(IconTrash, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) })] }) })] }) }) : null, _jsxs("div", { className: "canvas-card__frame", children: [loadState === "loading" ? (_jsx("div", { className: "canvas-card__loading", "data-test": `canvas-card-loading-${card.id}`, children: "Loading preview..." })) : loadState === "error" ? (_jsxs("div", { className: "canvas-card__error", "data-test": `canvas-card-error-${card.id}`, children: [_jsx("p", { children: errorMessage || "Frame could not be loaded" }), _jsxs("div", { className: "canvas-card__error-actions", children: [_jsx(Button, { size: "compact", variant: "secondary", onClick: handleReload, children: "Retry" }), _jsx(Button, { size: "compact", variant: "danger", onClick: handleRemove, children: "Remove" })] })] })) : null, _jsx("iframe", { ref: iframeRef, className: "canvas-card__iframe", src: card.content.kind === "iteration" ? contentDocumentUrl(card.content) : initialUrlRef.current, title: frameLabel, [CANVAS_RENDERER_ATTR]: "", sandbox: "allow-scripts allow-same-origin allow-forms allow-popups", "data-test": `canvas-card-iframe-${card.id}` }, iterationId(card.content) ?? "live"), _jsx(AgentActivityOverlay, { cardId: card.id, content: card.content, iframe: loadState === "ready" ? iframeRef.current : null }), _jsx(SketchFrameOverlay, { cardId: card.id, iframe: iframeRef.current, cardUrl: contentSourceUrl(card.content), artifactId: iterationId(card.content), ready: loadState === "ready" })] }), presentation === "canvas" ? RESIZE_HANDLES.map((handle) => (_jsx("div", { className: `canvas-card__resize-handle canvas-card__resize-handle--${handle.direction}`, "data-test": `canvas-card-resize-${card.id}${handle.direction === "bottom-right" ? "" : `-${handle.direction}`}`, "data-resize-direction": handle.direction, style: {
                     // Keep the edge's long axis aligned with the zoomed card. Only
                     // the thickness needs inverse scaling to remain screen-sized.
                     transform: resizeHandleTransform(handle.direction, resizeHandleScale),

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, 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,7 +26,7 @@ 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";
@@ -36,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",
@@ -121,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",
@@ -156,6 +249,14 @@ export function CanvasElementOverlay() {
     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("|");
@@ -163,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);
@@ -245,6 +348,14 @@ 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 = {
@@ -281,6 +392,12 @@ export function CanvasElementOverlay() {
             }
             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)
@@ -289,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)
@@ -297,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
@@ -354,6 +471,7 @@ export function CanvasElementOverlay() {
             }
             else if (data.type === "element-deselect") {
                 clearSpacingDrag(spacingDragRef);
+                setSpacingDragBadge(null);
                 dragRef.current = null;
                 clearDropGuide("canvas");
                 setSelectedElement(null);
@@ -391,6 +509,7 @@ export function CanvasElementOverlay() {
                     if (selectedElement)
                         setSelectedElement(selectedElement);
                     applySpacingPreview(spacingDragRef.current, msg.point, msg.shiftKey === true);
+                    setSpacingDragBadge(spacingBadgeForDrag(spacingDragRef.current, msg.point));
                     refreshSpacingPreviewOverlay(spacingDragRef.current);
                     return;
                 }
@@ -404,6 +523,7 @@ export function CanvasElementOverlay() {
                 const spacing = spacingDragRef.current;
                 if (spacing && spacing.iframe === sourceIframe) {
                     applySpacingPreview(spacing, data.point, data.shiftKey === true);
+                    setSpacingDragBadge(spacingBadgeForDrag(spacing, data.point));
                     refreshSpacingPreviewOverlay(spacing);
                     return;
                 }
@@ -414,13 +534,25 @@ 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, msg.shiftKey === true);
-                        commitSpacingDrag(spacing);
+                        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");
@@ -495,6 +627,7 @@ export function CanvasElementOverlay() {
             unsubscribe();
             clearSpacingDrag(spacingDragRef);
             dragRef.current = null;
+            pendingSpacingCommitsRef.current = [];
             clearDropGuide("canvas");
         };
     }, []);
@@ -505,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;
@@ -529,9 +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, 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
+    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 {};