nudge-ui 0.2.5 → 0.2.6

package/dist/inspector/canvas/CanvasElementOverlay.js

@@ -6,7 +6,7 @@ import { useBoardCamera, useCanvasPresentation, useCanvasPresentationTransitioni
 import { handleElementClick } from "./rendererSelectionProxy.js";
 import { getSelectedElements, useHierarchy, useSelectedElement, useSelectedElements } from "../selection/selectionStore.js";
 import { readBorderWidths, toRect, } from "../overlay/overlayGeometry.js";
-const overlayStyles = ".canvas-element-overlay {\n  position: fixed;\n  pointer-events: none;\n  z-index: 1;\n  background: transparent;\n  outline: 1px solid var(--accent);\n  outline-offset: -1px;\n}\n\n.canvas-spacing-guide {\n  position: fixed;\n  z-index: 1;\n  border-radius: 999px;\n  background: var(--accent);\n  outline: none;\n  box-shadow: none;\n  pointer-events: none;\n}\n\n.canvas-spacing-fill {\n  position: fixed;\n  z-index: 1;\n  pointer-events: none;\n  background: rgb(59 130 246 / 14%);\n}\n\n.canvas-spacing-fill[data-kind=\"gap\"] {\n  background: rgb(236 72 153 / 14%);\n}\n\n.canvas-spacing-guide[data-kind=\"gap\"] {\n  background: #ec4899;\n}\n\n.canvas-spacing-value-badge {\n  position: fixed;\n  z-index: 2;\n  transform: translate(-50%, calc(-100% - var(--space-8)));\n  padding: var(--space-4) var(--space-8);\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  font-weight: 400;\n  line-height: 1.4;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.canvas-selected-outline {\n  position: fixed;\n  pointer-events: none;\n  z-index: 1;\n  outline: 1px solid var(--accent);\n  outline-offset: -1px;\n}\n\n.canvas-dom-drop-line {\n  z-index: 2147483647;\n  border-radius: 999px;\n  background: #3b82f6;\n  box-shadow: 0 0 0 1px rgb(255 255 255 / 95%), 0 1px 5px rgb(37 99 235 / 72%);\n}\n\n.canvas-dom-drop-line::before,\n.canvas-dom-drop-line::after {\n  position: absolute;\n  top: 50%;\n  width: 8px;\n  height: 8px;\n  border: 2px solid #ffffff;\n  border-radius: 50%;\n  background: #2563eb;\n  content: \"\";\n  transform: translateY(-50%);\n}\n\n.canvas-dom-drop-line::before { left: -3px; }\n.canvas-dom-drop-line::after { right: -3px; }\n\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::before,\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::after {\n  left: 50%;\n  right: auto;\n  transform: translateX(-50%);\n}\n\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::before { top: -3px; }\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::after { top: auto; bottom: -3px; }\n\n.canvas-dom-drop-target {\n  z-index: 2147483646;\n  box-sizing: border-box;\n  border: 1px solid rgb(59 130 246 / 72%);\n  border-radius: 4px;\n  background: rgb(59 130 246 / 5%);\n}\n";
+const overlayStyles = ".canvas-element-overlay {\n  position: fixed;\n  pointer-events: none;\n  z-index: 1;\n  background: transparent;\n  outline: 1px solid var(--accent);\n  outline-offset: -1px;\n}\n\n.canvas-element-overlay[data-linked=\"true\"] {\n  outline-color: var(--linked);\n}\n\n.canvas-spacing-guide {\n  position: fixed;\n  z-index: 1;\n  border-radius: 999px;\n  background: var(--accent);\n  outline: none;\n  box-shadow: none;\n  pointer-events: none;\n}\n\n.canvas-spacing-fill {\n  position: fixed;\n  z-index: 1;\n  pointer-events: none;\n  background: rgb(59 130 246 / 14%);\n}\n\n.canvas-spacing-fill[data-kind=\"gap\"] {\n  background: rgb(236 72 153 / 14%);\n}\n\n.canvas-spacing-guide[data-kind=\"gap\"] {\n  background: #ec4899;\n}\n\n.canvas-spacing-fill[data-kind=\"margin\"] {\n  background: rgb(239 68 68 / 14%);\n}\n\n.canvas-spacing-guide[data-kind=\"margin\"] {\n  background: #ef4444;\n}\n\n.canvas-spacing-value-badge {\n  position: fixed;\n  z-index: 2;\n  transform: translate(-50%, calc(-100% - var(--space-8)));\n  padding: var(--space-4) var(--space-8);\n  border-radius: var(--radius-8);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  color: var(--text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  font-weight: 400;\n  line-height: 1.4;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.canvas-selected-outline {\n  position: fixed;\n  pointer-events: none;\n  z-index: 1;\n  outline: 1px solid var(--accent);\n  outline-offset: -1px;\n}\n\n.canvas-selected-outline[data-linked=\"true\"] {\n  outline-color: var(--linked);\n}\n\n.canvas-linked-outline {\n  position: fixed;\n  pointer-events: none;\n  z-index: 1;\n  outline: 1px solid var(--linked);\n  outline-offset: -1px;\n  opacity: 0.6;\n}\n\n.canvas-dom-drop-line {\n  z-index: 2147483647;\n  border-radius: 999px;\n  background: #3b82f6;\n  box-shadow: 0 0 0 1px rgb(255 255 255 / 95%), 0 1px 5px rgb(37 99 235 / 72%);\n}\n\n.canvas-dom-drop-line::before,\n.canvas-dom-drop-line::after {\n  position: absolute;\n  top: 50%;\n  width: 8px;\n  height: 8px;\n  border: 2px solid #ffffff;\n  border-radius: 50%;\n  background: #2563eb;\n  content: \"\";\n  transform: translateY(-50%);\n}\n\n.canvas-dom-drop-line::before { left: -3px; }\n.canvas-dom-drop-line::after { right: -3px; }\n\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::before,\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::after {\n  left: 50%;\n  right: auto;\n  transform: translateX(-50%);\n}\n\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::before { top: -3px; }\n.canvas-dom-drop-line[data-orientation=\"vertical\"]::after { top: auto; bottom: -3px; }\n\n.canvas-dom-drop-target {\n  z-index: 2147483646;\n  box-sizing: border-box;\n  border: 1px solid rgb(59 130 246 / 72%);\n  border-radius: 4px;\n  background: rgb(59 130 246 / 5%);\n}\n";
 import { deleteElement, getDropLocationAtPoint, moveElement, nudgeElement } from "../overlay/structuralGestures.js";
 import { changeKey } from "../changes/model.js";
 import { getActiveDraftChanges, redo, subscribeActiveDraftChanges, undo } from "../drafts/store.js";
@@ -21,6 +21,8 @@ import { findCanvasFrameByDocument, getRegisteredFrames } from "./projection.js"
 import { connectFrame, measureFrameViewport, toViewportPoint, toViewportRect } from "./frameConnection.js";
 import { RENDERER_ELEMENT_ID_ATTR } from "./rendererCidIndex.js";
 import { observeSelectedGeometry } from "../overlay/selectedGeometry.js";
+import { getEditScope, sourceSiteSelector } from "../selection/editScope.js";
+import { useComponentProps } from "../componentSemantics/ComponentPropsSection.js";
 import { handleInlineTextEditIntent, useInlineTextSession } from "../inline-text/inlineTextEditor.js";
 import { setInspectorOpen, toggleInspector } from "../shell/openStore.js";
 import { EMPTY_TEXT_PROJECTION_ATTR } from "../projection/textProjection.js";
@@ -31,6 +33,15 @@ import { beginLayoutPreview, endLayoutPreview } from "../styleEditors/layoutPrev
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { DomNavigator } from "../overlay/DomNavigator.js";
 import { InspectorStyle } from "../ui/InspectorStyle.js";
+/** An element that is already the only selection keeps its record; re-resolving can differ only in derived metadata. */
+function selectGestureElement(element) {
+    const current = getSelectedElements();
+    if (current.length === 1 && current[0].domElement === element)
+        return;
+    const selected = resolveSelectionFromElement(element);
+    if (selected)
+        setSelectedElement(selected);
+}
 function spacingBadgeForDrag(drag, point) {
     return {
         iframe: drag.iframe,
@@ -101,14 +112,7 @@ function restoreSpacingPreview(drag) {
     }
     endLayoutPreview(drag.element, drag.affordance.property);
 }
-/**
- * Commits a managed rule for the drag's final value. Returns the created change
- * records (empty for a no-op drag). The preview inline is intentionally left
- * applied at the committed value once a record exists; the caller must register
- * a PendingSpacingCommit and release it after the renderer acknowledges the
- * projected sheet. Restoring the authored declaration first would flash the old
- * value for the postMessage round trip the sheet takes.
- */
+/** On a real change the preview inline stays applied; the caller must register a PendingSpacingCommit. */
 function commitSpacingDrag(drag) {
     if (drag.currentValue === drag.startValue) {
         restoreSpacingPreview(drag);
@@ -120,9 +124,7 @@ function commitSpacingDrag(drag) {
             oldRawValue: spacingValueCss(drag.startValue),
         }]);
 }
-/** Removes a deferred preview inline as soon as the projected sheet alone
- * reproduces the committed value; keeps it otherwise and retries on the next
- * projection acknowledgement from that frame. */
+/** Removes the preview inline once the projected sheet alone reproduces the value; retries on the next acknowledgement. */
 function tryReleasePendingSpacingCommit(commit) {
     const { element, property, committedValue } = commit;
     if (!element.isConnected)
@@ -148,9 +150,7 @@ function releasePendingSpacingCommits(pending, iframe) {
     }
     pending.length = write;
 }
-/** Restores any held preview inline whose committed rule was undone, reverted,
- * or cleared before its sheet landed. Runs synchronously with the workspace
- * change, so the inline never outlives the intent behind it. */
+/** Restores a held preview inline whose committed rule was undone, reverted, or cleared. */
 function reconcilePendingSpacingCommits(pending) {
     if (pending.length === 0)
         return;
@@ -173,9 +173,7 @@ function reconcilePendingSpacingCommits(pending) {
     }
     pending.length = write;
 }
-/** Registers a held preview inline, folding an older unapplied commit for the
- * same element and property into the newest one so the held value and the
- * authored baseline both stay coherent across rapid successive drags. */
+/** Folds an older unapplied commit for the same element and property into the newest one. */
 function pushPendingSpacingCommit(pending, next) {
     const existing = pending.findIndex((commit) => commit.iframe === next.iframe
         && commit.element === next.element
@@ -190,6 +188,43 @@ function pushPendingSpacingCommit(pending, next) {
         originalInlinePriority: pending[existing].originalInlinePriority,
     };
 }
+const LINKED_PEER_LIMIT = 200;
+/** Frames the follow loop keeps measuring after outlines stop moving, covering the commit that applies a pan. */
+const OUTLINE_IDLE_FRAMES = 8;
+/** Writes the outline boxes straight to the DOM, so a stale React render cannot win; returns whether any moved. */
+function syncOutlinePositions(frame, outlines) {
+    const viewport = measureFrameViewport(frame);
+    let moved = false;
+    for (const [element, node] of outlines) {
+        const rect = toViewportRect(viewport, toRect(element.getBoundingClientRect()));
+        const box = `${rect.left}|${rect.top}|${rect.width}|${rect.height}`;
+        if (node.dataset.box !== box)
+            moved = true;
+        node.dataset.box = box;
+        node.style.left = `${rect.left}px`;
+        node.style.top = `${rect.top}px`;
+        node.style.width = `${rect.width}px`;
+        node.style.height = `${rect.height}px`;
+    }
+    return moved;
+}
+function isLinkedElement(element) {
+    return element !== null && getEditScope(element) === "source-site" && findLinkedPeers(element).length > 0;
+}
+/** Other elements rendered from the selected element's source site. */
+function findLinkedPeers(element) {
+    const selector = sourceSiteSelector(element.getAttribute("data-cid") ?? "", element.getAttribute("data-src") ?? "");
+    if (!selector)
+        return [];
+    try {
+        return [...element.ownerDocument.querySelectorAll(selector)]
+            .filter((candidate) => candidate !== element)
+            .slice(0, LINKED_PEER_LIMIT);
+    }
+    catch {
+        return [];
+    }
+}
 export function CanvasElementOverlay() {
     const [hover, setHover] = useState(null);
     const [measureState, setMeasureState] = useState(null);
@@ -243,9 +278,15 @@ export function CanvasElementOverlay() {
                 : [];
         })
         : [];
-    // Camera transforms commit on the board before iframe viewport geometry is
-    // readable. Re-render once after that commit so overlays use the transformed
-    // frame rectangle rather than the previous camera position.
+    const componentProps = useComponentProps(selectedElements.length === 1 ? selected : null);
+    const linkedPeers = selectedInCanvas && selectedElements.length === 1 && selected && getEditScope(selected.domElement) === "source-site"
+        ? findLinkedPeers(selected.domElement)
+        : [];
+    const projectedLinkedPeers = selectedFrameViewport
+        ? linkedPeers.map((peer) => ({ peer, rect: toViewportRect(selectedFrameViewport, toRect(peer.getBoundingClientRect())) }))
+        : [];
+    const selectionIsLinked = componentProps !== null || linkedPeers.length > 0;
+    // Camera transforms commit before iframe viewport geometry is readable; re-render once so overlays use the new frame rect.
     useLayoutEffect(() => {
         const geometryChanged = previousProjectionGeometryKey.current !== projectionGeometryKey;
         previousProjectionGeometryKey.current = projectionGeometryKey;
@@ -255,12 +296,48 @@ export function CanvasElementOverlay() {
     const selectedBorders = selectedInCanvas && selected
         ? readBorderWidths(selected.domElement)
         : null;
+    const outlineNodes = useRef(new Map());
+    const outlineRef = (element) => (node) => {
+        if (node)
+            outlineNodes.current.set(element, node);
+        else
+            outlineNodes.current.delete(element);
+    };
+    // React renders a frame or more after a pan or scroll, so outlines follow the live geometry on their own frame loop.
+    useEffect(() => {
+        if (!selectedFrame)
+            return;
+        const frameDocument = selectedFrame.contentDocument;
+        let raf = null;
+        let idleFrames = 0;
+        const tick = () => {
+            raf = null;
+            idleFrames = syncOutlinePositions(selectedFrame, outlineNodes.current) ? 0 : idleFrames + 1;
+            if (idleFrames < OUTLINE_IDLE_FRAMES)
+                raf = window.requestAnimationFrame(tick);
+        };
+        const follow = () => {
+            idleFrames = 0;
+            if (raf === null)
+                raf = window.requestAnimationFrame(tick);
+        };
+        const options = { capture: true, passive: true };
+        window.addEventListener("wheel", follow, options);
+        frameDocument?.addEventListener("scroll", follow, options);
+        return () => {
+            window.removeEventListener("wheel", follow, options);
+            frameDocument?.removeEventListener("scroll", follow, options);
+            if (raf !== null)
+                window.cancelAnimationFrame(raf);
+        };
+    }, [selectedFrame]);
     useEffect(() => {
         if (!selectedInCanvas || !selected)
             return;
-        const stops = selectedElements.map((candidate) => observeSelectedGeometry(candidate.domElement, refreshSelectedGeometry));
+        const stops = [...selectedElements.map((candidate) => candidate.domElement), ...linkedPeers]
+            .map((element) => observeSelectedGeometry(element, refreshSelectedGeometry));
         return () => stops.forEach((stop) => stop());
-    }, [selected, selectedElements, selectedInCanvas]);
+    }, [selected, selectedElements, selectedInCanvas, linkedPeers.length]);
     useEffect(() => {
         const broadcastMeasureModifier = (altKey) => {
             measureAltKeyRef.current = altKey;
@@ -287,9 +364,7 @@ export function CanvasElementOverlay() {
             window.removeEventListener("blur", onBlur);
         };
     }, []);
-    // The selected element's identity is computed once per selection change
-    // (never per hover), so the measurement self-rulers exclusion can compare
-    // identities without a per-hover scan of the frame document.
+    // Computed once per selection change, never per hover, so the measurement exclusion needs no per-hover scan.
     const selectedIdentity = useMemo(() => {
         const el = selected?.domElement;
         if (!el)
@@ -297,9 +372,7 @@ export function CanvasElementOverlay() {
         const elementId = el.getAttribute(RENDERER_ELEMENT_ID_ATTR);
         return elementId ? { elementId } : null;
     }, [selected?.domElement]);
-    // A held spacing preview inline must not outlive the committed rule behind
-    // it: undo/redo/revert/clear remove the record synchronously, so restore the
-    // authored declaration before the renderer's next replace-styles lands.
+    // Undo/redo/revert/clear remove the record synchronously; restore the authored declaration before the next replace-styles lands.
     useEffect(() => {
         return subscribeActiveDraftChanges(() => {
             reconcilePendingSpacingCommits(pendingSpacingCommitsRef.current);
@@ -380,17 +453,22 @@ export function CanvasElementOverlay() {
                     && spacingDescriptorMatches(handleAffordance, msg.spacing)
                     ? { point: hoverPoint, value: handleAffordance.value }
                     : null;
-                setHover({
+                // Hover messages arrive every frame; the peer query runs once per element entered, not per message.
+                const hoverRect = msg.rect;
+                setHover((current) => ({
                     iframe: frame.iframe,
                     identity: { elementId: msg.elementId },
-                    rect: msg.rect,
+                    rect: hoverRect,
                     borders: msg.borders ?? { top: 0, right: 0, bottom: 0, left: 0 },
                     cardId: frame.cardId,
                     spacing: spacingGuides.length > 0 ? spacingDescriptor : null,
                     spacingGuides,
                     spacingAreas,
                     spacingHandleBadge,
-                });
+                    linked: current?.iframe === frame.iframe && current.identity.elementId === msg.elementId
+                        ? current.linked
+                        : isLinkedElement(hoverElement ?? frame.element(msg)),
+                }));
             }
             else if (data.type === "element-measure-state") {
                 const msg = data;
@@ -466,18 +544,14 @@ export function CanvasElementOverlay() {
                         originalInlineValue: element.style.getPropertyValue(spacing.property),
                         originalInlinePriority: element.style.getPropertyPriority(spacing.property),
                     };
-                    const selectedElement = resolveSelectionFromElement(element);
-                    if (selectedElement)
-                        setSelectedElement(selectedElement);
+                    selectGestureElement(element);
                     applySpacingPreview(spacingDragRef.current, msg.point, msg.shiftKey === true);
                     setSpacingDragBadge(spacingBadgeForDrag(spacingDragRef.current, msg.point));
                     refreshSpacingPreviewOverlay(spacingDragRef.current);
                     return;
                 }
                 dragRef.current = { iframe: frame.iframe, element };
-                const selectedElement = resolveSelectionFromElement(element);
-                if (selectedElement)
-                    setSelectedElement(selectedElement);
+                selectGestureElement(element);
                 updateDropGuide(msg.point);
             }
             else if (data.type === "element-drag-move") {
@@ -518,9 +592,7 @@ export function CanvasElementOverlay() {
                     }
                     clearDropGuide("canvas");
                     if (!msg.cancelled) {
-                        const selectedElement = resolveSelectionFromElement(spacing.element);
-                        if (selectedElement)
-                            setSelectedElement(selectedElement);
+                        selectGestureElement(spacing.element);
                     }
                     return;
                 }
@@ -530,9 +602,7 @@ export function CanvasElementOverlay() {
                     const drop = getDropLocationAtPoint(frameDocument, current.element, msg.point.x, msg.point.y);
                     if (drop)
                         moveElement(current.element, drop);
-                    const selectedElement = resolveSelectionFromElement(current.element);
-                    if (selectedElement)
-                        setSelectedElement(selectedElement);
+                    selectGestureElement(current.element);
                 }
                 dragRef.current = null;
                 clearDropGuide("canvas");
@@ -551,9 +621,7 @@ export function CanvasElementOverlay() {
                 const element = frame.element(data);
                 const record = element ? nudgeElement(element, data.key) : null;
                 if (element && record) {
-                    const selectedElement = resolveSelectionFromElement(element);
-                    if (selectedElement)
-                        setSelectedElement(selectedElement);
+                    selectGestureElement(element);
                 }
             }
             else if (data.type === "history-request") {
@@ -616,8 +684,7 @@ 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.
+    // Selected elements already have a live outline; the hover outline is cached and can lag during spacing previews.
     const showHoverOutline = Boolean(projectedHoverRect && !isSelfHover);
     const showMeasurement = Boolean(showGuideOverlay
         && selectedLocalRect
@@ -636,7 +703,7 @@ export function CanvasElementOverlay() {
         : [];
     if (presentationTransitioning || layoutTransitioning || temporaryAppInteraction)
         return _jsx(InspectorStyle, { testId: "canvas-element-overlay-styles", css: overlayStyles });
-    return (_jsxs(_Fragment, { children: [_jsx(InspectorStyle, { testId: "canvas-element-overlay-styles", css: overlayStyles }), showGuideOverlay && selectedRect && selectedFrameViewport ? (_jsx(MeasurementGuideOverlay, { testId: "canvas-measurement-overlay", selectedRect: selectedRect, guideViewport: selectedFrameViewport, segments: measurementSegments })) : null, projectedHoverRect ? (_jsxs(_Fragment, { children: [hoverSpacing ? projectedSpacingAreas.map((area, index) => (_jsx("div", { className: "canvas-spacing-fill", "data-test": "canvas-spacing-fill", "data-kind": hoverSpacing.kind, "data-property": hoverSpacing.property, "data-side": hoverSpacing.side ?? undefined, "data-area-index": index, style: overlayStyle(area), "aria-hidden": "true" }, `${hoverSpacing.property}-area-${index}`))) : null, showHoverOutline ? (_jsx("div", { className: "canvas-element-overlay", "data-test": "canvas-hover-outline", style: overlayStyle(projectedHoverRect), "aria-hidden": "true" })) : null, hoverSpacing ? projectedSpacingGuides.map((guide, index) => (_jsx("div", { className: "canvas-spacing-guide", "data-test": "canvas-spacing-guide", "data-kind": hoverSpacing.kind, "data-property": hoverSpacing.property, "data-side": hoverSpacing.side ?? undefined, "data-guide-index": index, style: spacingGuideStyle(guide), "aria-hidden": "true" }, `${hoverSpacing.property}-${index}`))) : null] })) : null, projectedSelectedGeometry.map(({ element, rect }, index) => (_jsx("div", { className: "canvas-selected-outline", "data-test": "canvas-selected-outline", "data-selected-cid": element.cid, "data-selected-index": index, "data-selected-src": element.src, style: overlayStyle(rect), "aria-hidden": "true" }, `${element.cid}-${index}`))), projectedSpacingBadge && spacingBadge ? (_jsx("div", { className: "canvas-spacing-value-badge", "data-test": "canvas-spacing-value-badge", style: { left: projectedSpacingBadge.x, top: projectedSpacingBadge.y }, "aria-hidden": "true", children: spacingValueCss(spacingBadge.value) })) : null, domNavigationEnabled && !inlineTextSession && selectedElements.length === 1 && selected && selectedRect && selectedFrameViewport ? (_jsx(DomNavigator, { selected: selected, hierarchy: hierarchy, anchor: selectedRect, project: (element) => element.ownerDocument === selected.domElement.ownerDocument
+    return (_jsxs(_Fragment, { children: [_jsx(InspectorStyle, { testId: "canvas-element-overlay-styles", css: overlayStyles }), showGuideOverlay && selectedRect && selectedFrameViewport ? (_jsx(MeasurementGuideOverlay, { testId: "canvas-measurement-overlay", selectedRect: selectedRect, guideViewport: selectedFrameViewport, segments: measurementSegments })) : null, projectedHoverRect ? (_jsxs(_Fragment, { children: [hoverSpacing ? projectedSpacingAreas.map((area, index) => (_jsx("div", { className: "canvas-spacing-fill", "data-test": "canvas-spacing-fill", "data-kind": hoverSpacing.kind, "data-property": hoverSpacing.property, "data-side": hoverSpacing.side ?? undefined, "data-area-index": index, style: overlayStyle(area), "aria-hidden": "true" }, `${hoverSpacing.property}-area-${index}`))) : null, showHoverOutline ? (_jsx("div", { className: "canvas-element-overlay", "data-linked": hover?.linked ? "true" : undefined, "data-test": "canvas-hover-outline", style: overlayStyle(projectedHoverRect), "aria-hidden": "true" })) : null, hoverSpacing ? projectedSpacingGuides.map((guide, index) => (_jsx("div", { className: "canvas-spacing-guide", "data-test": "canvas-spacing-guide", "data-kind": hoverSpacing.kind, "data-property": hoverSpacing.property, "data-side": hoverSpacing.side ?? undefined, "data-guide-index": index, style: spacingGuideStyle(guide), "aria-hidden": "true" }, `${hoverSpacing.property}-${index}`))) : null] })) : null, projectedLinkedPeers.map(({ peer, rect }, index) => (_jsx("div", { ref: outlineRef(peer), className: "canvas-linked-outline", "data-test": "canvas-linked-outline", style: overlayStyle(rect), "aria-hidden": "true" }, `${peer.getAttribute("data-cid")}-${index}`))), projectedSelectedGeometry.map(({ element, rect }, index) => (_jsx("div", { ref: outlineRef(element.domElement), className: "canvas-selected-outline", "data-linked": selectionIsLinked ? "true" : undefined, "data-test": "canvas-selected-outline", "data-selected-cid": element.cid, "data-selected-index": index, "data-selected-src": element.src, style: overlayStyle(rect), "aria-hidden": "true" }, `${element.cid}-${index}`))), projectedSpacingBadge && spacingBadge ? (_jsx("div", { className: "canvas-spacing-value-badge", "data-test": "canvas-spacing-value-badge", style: { left: projectedSpacingBadge.x, top: projectedSpacingBadge.y }, "aria-hidden": "true", children: spacingValueCss(spacingBadge.value) })) : null, domNavigationEnabled && !inlineTextSession && !measureStateForSelectedFrame?.altKey && selectedElements.length === 1 && selected && selectedRect && selectedFrameViewport ? (_jsx(DomNavigator, { selected: selected, hierarchy: hierarchy, anchor: selectedRect, linked: selectionIsLinked, project: (element) => element.ownerDocument === selected.domElement.ownerDocument
                     ? toViewportRect(selectedFrameViewport, toRect(element.getBoundingClientRect()))
                     : null })) : null, _jsx(DropGuideOverlay, { guide: projectedDropGuide, lineClassName: "canvas-dom-drop-line", lineTestId: "canvas-dom-drop-line", targetClassName: "canvas-dom-drop-target", targetTestId: "canvas-dom-drop-target" })] }));
 }

package/dist/inspector/canvas/CanvasWorkspace.js

@@ -18,10 +18,8 @@ import { subscribeOriginalPreview, isOriginalPreviewActive } from "../shell/orig
 import { recordCanvasStructuralProjectionReports } from "../projection/structuralProjection.js";
 import { recordCanvasRenderedInstanceProjectionReports } from "../projection/renderedInstance.js";
 import { recordCanvasTextProjectionReports } from "../projection/textProjection.js";
-import { isPreviewableChange } from "../changes/types.js";
-import { changeKey } from "../changes/model.js";
-import { beginPreviewAttempt, publishPreviewDiagnostic } from "../changes/previewDiagnostics.js";
-import { verifyManagedStyleProjection } from "../changes/managedStyleProjection.js";
+import { beginPreviewAttempt } from "../changes/previewDiagnostics.js";
+import { verifyPreviewChanges } from "../changes/previewVerification.js";
 import { getCanvasPreviewDocument, getRegisteredFrames, isCanvasCanonicalProjectionRevisionCurrent, projectToAllReadyCards, recordCanvasProjectionApplied, getFrameRegistryVersion, subscribeFrameRegistry, } from "./projection.js";
 import { connectFrame, toViewportPoint } from "./frameConnection.js";
 import { normalizeUrl, normalizedUrlKey } from "./normalizeUrl.js";
@@ -32,7 +30,7 @@ import { wheelPanDelta } from "./wheelPan.js";
 import { zoomCameraAtPointer } from "./canvasGestures.js";
 const canvasWorkspaceStyles = ".canvas-workspace {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--surface-panel);\n  pointer-events: auto;\n}\n\n.canvas-workspace__board {\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n  background: var(--surface-panel);\n}\n\n.canvas-workspace__focus-action {\n  position: absolute;\n  top: max(12px, env(safe-area-inset-top));\n  left: max(12px, env(safe-area-inset-left));\n  z-index: calc(var(--z-index) - 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-4);\n  border-radius: var(--radius-12);\n  background: var(--surface-raised-2x);\n  box-shadow: var(--shadow-popup);\n  pointer-events: auto;\n}\n\n.canvas-workspace__board.is-grabbable {\n  cursor: grab;\n}\n\n.canvas-workspace__board.is-grabbing {\n  cursor: grabbing;\n}\n\n/* Canvas gestures take precedence over every card interaction while Space is\n   held. This also closes the short postMessage gap before an iframe receives\n   its mirrored modifier state. */\n.canvas-workspace__board.is-grabbable .canvas-card,\n.canvas-workspace__board.is-grabbing .canvas-card {\n  pointer-events: none;\n}\n\n.canvas-workspace__board-content {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  /*\n   * Leave `will-change` unset so the browser can re-rasterize this subtree at\n   * the current camera scale. A permanent `will-change: transform` promotes\n   * it to a fixed bitmap, which makes iframe content look soft when zoomed.\n   */\n}\n\n.canvas-workspace__board.is-grabbing .canvas-workspace__board-content {\n  /* Panning benefits from a cached composited layer; zoom restores the crisp\n   * default path as soon as the gesture ends. */\n  will-change: transform;\n}\n\n.canvas-workspace[data-presentation=\"focus\"] .canvas-workspace__board-content {\n  inset: 0;\n  transform: none !important;\n}\n\n.canvas-workspace.is-presentation-transitioning .canvas-card:not(.is-presentation-card) {\n  visibility: hidden !important;\n  pointer-events: none !important;\n}\n\n.canvas-workspace__target-error {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  color: #6b7280;\n  font: 500 14px/1.4 system-ui, sans-serif;\n}\n\n/* Moving iframes must not acquire hover state beneath a stationary pointer. */\n.canvas-workspace.is-presentation-transitioning .canvas-card__iframe,\n.canvas-workspace__board.is-layout-transitioning .canvas-card__iframe {\n  pointer-events: none;\n}\n\n/* The page surface edits the live page under the workspace, so only the\n   toolbar takes pointer input. */\n.canvas-workspace[data-surface=\"page\"],\n.canvas-workspace[data-surface=\"page\"] .canvas-workspace__board {\n  background: transparent;\n  pointer-events: none;\n}\n\n.canvas-workspace[data-surface=\"page\"] .canvas-toolbar {\n  pointer-events: auto;\n}\n";
 const canvasCardStyles = ".canvas-card {\n  position: relative;\n}\n\n/* Extend the card's hover region to the toolbar above the iframe. */\n.canvas-card::before {\n  content: \"\";\n  position: absolute;\n  right: 0;\n  bottom: 100%;\n  left: 0;\n  height: calc((var(--control-height-large) + var(--space-16)) * var(--canvas-toolbar-scale, 1));\n  pointer-events: auto;\n}\n\n.canvas-card__frame {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--surface-panel);\n  border-radius: 0;\n  overflow: hidden;\n}\n\n.canvas-card.is-selected .canvas-card__frame {\n  outline: 2px solid var(--frame-accent, var(--accent));\n  outline-offset: -2px;\n}\n\n.canvas-card.is-focus-presentation .canvas-card__frame {\n  outline: none;\n}\n\n.canvas-card.is-focused.is-selected:not(.is-linked) .canvas-card__frame {\n  animation: canvas-card-focus 900ms ease-out;\n}\n\n@keyframes canvas-card-focus {\n  0%, 35% { outline: 3px solid var(--frame-accent, var(--accent)); outline-offset: -3px; }\n  100% { outline: 0 solid transparent; outline-offset: -2px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .canvas-card.is-focused .canvas-card__frame {\n    animation: none;\n  }\n}\n\n.canvas-card__header {\n  display: flex;\n  align-items: center;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: calc(100% + var(--space-8));\n  justify-content: flex-end;\n  z-index: 3;\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n\n.canvas-card__drag-surface {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  flex: 0 1 auto;\n  margin-right: auto;\n  min-width: 0;\n  min-height: var(--control-height-large);\n  padding: 0;\n  cursor: grab;\n  user-select: none;\n  touch-action: none;\n}\n\n.canvas-card.is-dragging .canvas-card__drag-surface {\n  cursor: grabbing;\n}\n\n.canvas-card__identity {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  min-width: 0;\n}\n\n.canvas-card__dimensions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-8);\n  position: relative;\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 260px;\n  color: var(--text-secondary);\n  font-size: var(--font-size-base);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  pointer-events: none;\n}\n\n.canvas-card__title {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.canvas-card__live-badge,\n.canvas-card__iteration-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 20px;\n  height: 20px;\n  background: var(--accent-surface);\n  color: var(--accent);\n  border-radius: var(--radius-4);\n  pointer-events: auto;\n}\n\n.canvas-card__floating-toolbar {\n  position: absolute;\n  left: 50%;\n  flex-shrink: 0;\n  width: max-content;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transform: translate(-50%, calc(-24px + var(--space-4)));\n  transition: opacity 140ms ease-out, transform 140ms ease-out, visibility 140ms;\n}\n\n.canvas-card:hover .canvas-card__floating-toolbar,\n.canvas-card:focus-within .canvas-card__floating-toolbar,\n.canvas-card__floating-toolbar[data-busy=\"true\"] {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transform: translate(-50%, -24px);\n}\n\n.canvas-card__actions.canvas-toolbar {\n  position: static;\n  width: max-content;\n  transform: none;\n  white-space: nowrap;\n}\n\n.canvas-card__actions .canvas-toolbar__divider {\n  margin-inline: 0;\n}\n\n@media (hover: none) {\n  .canvas-card.is-selected .canvas-card__floating-toolbar {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n    transform: translate(-50%, -24px);\n  }\n}\n\n.canvas-card.is-dragging .canvas-card__floating-toolbar,\n.canvas-workspace__board.is-grabbable .canvas-card__floating-toolbar,\n.canvas-workspace__board.is-grabbing .canvas-card__floating-toolbar,\n.canvas-workspace.is-presentation-transitioning .canvas-card__floating-toolbar,\n.canvas-workspace__board.is-layout-transitioning .canvas-card__floating-toolbar {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .canvas-card__floating-toolbar { transition: none; }\n}\n\n.canvas-card__iteration-error {\n  position: absolute;\n  right: 0;\n  bottom: calc(100% + var(--space-8));\n  color: var(--text-danger, #b42318);\n  font-size: 12px;\n  white-space: nowrap;\n}\n\n.canvas-card__iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  display: block;\n}\n\n.canvas-card__sketch-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: block;\n  pointer-events: none;\n}\n\n.canvas-card__loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--text-muted, #777777);\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.canvas-card__error {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  height: 100%;\n  padding: 20px;\n  text-align: center;\n}\n\n.canvas-card__error p {\n  margin: 0;\n  color: var(--text-muted, #777777);\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.canvas-card__error-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.canvas-card__resize-handle {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  padding: 4px;\n  color: var(--text-muted, #777777);\n  opacity: 0;\n  transition: opacity 150ms ease;\n  touch-action: none;\n  user-select: none;\n}\n\n.canvas-card__resize-handle--top,\n.canvas-card__resize-handle--bottom {\n  right: 16px;\n  left: 16px;\n  height: 16px;\n  cursor: ns-resize;\n}\n\n.canvas-card__resize-handle--top {\n  top: 0;\n}\n\n.canvas-card__resize-handle--bottom {\n  bottom: 0;\n}\n\n.canvas-card__resize-handle--left,\n.canvas-card__resize-handle--right {\n  top: 16px;\n  bottom: 16px;\n  width: 16px;\n  cursor: ew-resize;\n}\n\n.canvas-card__resize-handle--left {\n  left: 0;\n}\n\n.canvas-card__resize-handle--right {\n  right: 0;\n}\n\n.canvas-card__resize-handle--top-left,\n.canvas-card__resize-handle--top-right,\n.canvas-card__resize-handle--bottom-right,\n.canvas-card__resize-handle--bottom-left {\n  z-index: 4;\n  width: 24px;\n  height: 24px;\n  cursor: nwse-resize;\n}\n\n.canvas-card__resize-handle--top-left {\n  top: 0;\n  left: 0;\n}\n\n.canvas-card__resize-handle--top-right {\n  top: 0;\n  right: 0;\n  cursor: nesw-resize;\n}\n\n.canvas-card__resize-handle--bottom-right {\n  right: 0;\n  bottom: 0;\n}\n\n.canvas-card__resize-handle--bottom-left {\n  bottom: 0;\n  left: 0;\n  cursor: nesw-resize;\n}\n\n.canvas-card:hover .canvas-card__resize-handle,\n.canvas-card:focus-within .canvas-card__resize-handle {\n  opacity: 1;\n}\n\n.canvas-card__resize-handle:hover {\n  color: var(--accent);\n}\n\n.canvas-card__resize-handle:focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n  opacity: 1;\n}\n\n.canvas-card.is-linked {\n  --frame-accent: #a855f7;\n}\n\n.canvas-card.is-linked:not(.is-focus-presentation) .canvas-card__frame {\n  outline: 2px solid var(--frame-accent);\n  outline-offset: -2px;\n}\n\n.canvas-card__iteration-badge {\n  color: var(--text-secondary);\n  background: var(--surface-raised-2x);\n}\n";
-const foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #F5F5F4;\n  --surface-control: var(--surface-well);\n  --surface-control-hover: var(--surface-well-2x);\n  --surface-raised: #FAFAFA;\n  --surface-raised-2x: #fff ;\n  --surface-raised-hover: #F5F5F4;\n  --surface-well: hsla(0, 0%, 0%, 0.05);\n  --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n\n  --border-subtle: hsla(0, 0%, 0%, 0.1);\n  --border-medium: hsla(0, 0%, 0%, 0.2);\n  --border-strong: #d8d8d8;\n\n  --text-primary: #242424;\n  --text-secondary: #6f6f6f;\n  --text-muted: #777777;\n  --text-muted-subtle: #a1a1a1;\n\n  --accent: #0096ff;\n  --accent-surface: rgba(0, 176, 255, 0.15);\n  --warning: #d97706;\n  --warning-text: #9a5b00;\n  --warning-surface: #fff6e5;\n  --danger: #df4b4b;\n  --danger-text: #bd3636;\n  --danger-surface: rgba(223, 75, 75, 0.2);\n  --success: #2e7d52;\n\n  --space-0: 0;\n  --space-4: 4px;\n  --space-8: 8px;\n  --space-12: 12px;\n  --space-16: 16px;\n  --space-20: 20px;\n  --space-24: 24px;\n  --space-32: 32px;\n  --space-40: 40px;\n  --space-48: 48px;\n\n  /* Radius */\n  --radius-0: 0;\n  --radius-4: 4px;\n  --radius-8: 8px;\n  --radius-12: 12px;\n  --radius-16: 16px;\n  --radius-20: 20px;\n  --radius-24: 24px;\n  --radius-pill: 999px;\n\n  --radius-control: var(--radius-8);\n  --shadow-outline: 0 0 0 1px rgba(0, 0, 0, 0.05);\n  --shadow-popup: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.10);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --z-index: 2147483647;\n\n  --font-family: \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --font-size-base: 12px;\n  --font-size-small: 10px;\n  --font-weight-base: 400;\n  --font-weight-label: 600;\n\n  /* Control semantic sizes */\n  --control-height-small: 24px;\n  --control-height-large: 32px;\n  --control-height-xlarge: 40px;\n  --label-column: 104px;\n\n  --icon-size-small: 16px;\n  --icon-size-large: 20px;\n  --icon-stroke-width: 1.5px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n  font-family: var(--font-family);\n  background: transparent;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect {\n  font-family: inherit;\n}\n";
+const foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #fff;\n  --surface-control: var(--surface-well);\n  --surface-control-hover: var(--surface-well-2x);\n  --surface-raised: #FAFAFA;\n  --surface-raised-2x: #fff ;\n  --surface-raised-hover: #F5F5F4;\n  --surface-well: hsla(0, 0%, 0%, 0.05);\n  --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n  /* Inverse surfaces mirror the landing palette for dark, high-emphasis controls. */\n  --surface-inverse: #1f201e;\n  --surface-inverse-hover: #343532;\n\n  --border-subtle: hsla(0, 0%, 0%, 0.1);\n  --border-medium: hsla(0, 0%, 0%, 0.2);\n  --border-strong: #d8d8d8;\n\n  --text-primary: #242424;\n  --text-secondary: #6f6f6f;\n  --text-muted: #777777;\n  --text-muted-subtle: #a1a1a1;\n  --text-inverse: #fff;\n\n  --accent: #0096ff;\n  --linked: #8b5cf6;\n  --accent-surface: rgba(0, 176, 255, 0.15);\n  --warning: #d97706;\n  --warning-text: #9a5b00;\n  --warning-surface: #fff6e5;\n  --danger: #df4b4b;\n  --danger-text: #bd3636;\n  --danger-surface: rgba(223, 75, 75, 0.2);\n  --success: #2e7d52;\n\n  --space-0: 0;\n  --space-4: 4px;\n  --space-8: 8px;\n  --space-12: 12px;\n  --space-16: 16px;\n  --space-20: 20px;\n  --space-24: 24px;\n  --space-32: 32px;\n  --space-40: 40px;\n  --space-48: 48px;\n\n  /* Radius */\n  --radius-0: 0;\n  --radius-4: 4px;\n  --radius-6: 6px;\n  --radius-8: 8px;\n  --radius-12: 12px;\n  --radius-16: 16px;\n  --radius-20: 20px;\n  --radius-24: 24px;\n  --radius-pill: 999px;\n\n  --radius-control: var(--radius-8);\n  --shadow-outline: 0 0 0 1px rgba(0, 0, 0, 0.05);\n  --shadow-popup: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.10);\n  --shadow-control-outline: 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), var(--shadow-control-outline);\n  --z-index: 2147483647;\n\n  --font-family: \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --font-size-base: 12px;\n  --font-size-small: 10px;\n  --font-weight-base: 400;\n  --font-weight-label: 600;\n\n  /* Control semantic sizes */\n  --control-height-small: 24px;\n  --control-height-large: 32px;\n  --control-height-xlarge: 40px;\n  --label-column: 104px;\n\n  --icon-size-small: 16px;\n  --icon-size-large: 20px;\n  --icon-stroke-width: 1.5px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n  font-family: var(--font-family);\n  background: transparent;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect {\n  font-family: inherit;\n}\n";
 import { useInspectorOpen } from "../shell/openStore.js";
 import { isEditableEvent } from "../shell/shortcuts.js";
 import { acknowledgeAgentRendererReady } from "./agentPresentation.js";
@@ -129,8 +127,7 @@ export function CanvasWorkspace({ primaryUrl }) {
             : null;
         if (!board || !card || !cardElement || typeof cardElement.animate !== "function" || camera.zoom <= 0)
             return;
-        // The previous layout is already gone, so derive it: focus fills the
-        // board, and canvas places the card through the camera.
+        // The previous layout is gone, so derive it: focus fills the board, canvas places the card through the camera.
         const boardRect = snapshotRect(board.getBoundingClientRect());
         const canvasRect = {
             left: boardRect.left + camera.x + card.x * camera.zoom,
@@ -497,8 +494,7 @@ export function CanvasWorkspace({ primaryUrl }) {
             };
             if (isProjectionAppliedMessage(msg, identity)) {
                 recordCanvasProjectionApplied(frame.cardId, msg.revision);
-                // While hold-to-view-original is active the frame intentionally shows
-                // the page without inspector changes; skip conflict verification.
+                // Peek shows the page without inspector changes; skip conflict verification.
                 if (isOriginalPreviewActive())
                     return;
                 const frameDocument = frame.document();
@@ -507,23 +503,14 @@ export function CanvasWorkspace({ primaryUrl }) {
                 if (frameDocument && plan && draft && isCanvasCanonicalProjectionRevisionCurrent(frameDocument, msg.revision)) {
                     const attempt = beginPreviewAttempt(getCanvasPreviewDocument(frame.cardId), plan.draftRevision);
                     if (attempt) {
-                        for (const change of draft.contents.changes) {
-                            if (!isPreviewableChange(change))
-                                continue;
-                            const result = verifyManagedStyleProjection(change, null, frameDocument);
-                            if (result) {
-                                publishPreviewDiagnostic(attempt, changeKey(change), result);
-                                if (result.status === "conflict" && result.reason === "animation") {
-                                    window.setTimeout(() => {
-                                        if (!isCanvasCanonicalProjectionRevisionCurrent(frameDocument, msg.revision))
-                                            return;
-                                        const settled = verifyManagedStyleProjection(change, null, frameDocument);
-                                        if (settled)
-                                            publishPreviewDiagnostic(attempt, changeKey(change), settled);
-                                    }, 300);
-                                }
-                            }
-                        }
+                        verifyPreviewChanges({
+                            changes: draft.contents.changes,
+                            document: frameDocument,
+                            attempt,
+                            targetFor: () => null,
+                            isCurrent: () => isCanvasCanonicalProjectionRevisionCurrent(frameDocument, msg.revision),
+                            retryAnimation: (run) => window.setTimeout(run, 300),
+                        });
                     }
                 }
                 return;
@@ -549,8 +536,7 @@ export function CanvasWorkspace({ primaryUrl }) {
             if (msg.type === "frame-ready") {
                 acknowledgeAgentRendererReady(frame.cardId);
                 syncActiveFrameUrl(msg.url);
-                // A card can finish loading after Space was pressed on the controller.
-                // Seed it with the current modifier state before its first pointer event.
+                // A card can load after Space was pressed, so seed the current modifier state.
                 frame.post({ type: "pan-modifier", spaceHeld: spaceHeldRef.current });
                 sendInspectorInteractionState(frame, inspectorOpen, rendererInteractionsEnabled, spaceHeldRef.current ? "drag" : rendererCursor);
                 sendBoardGestureState(frame, presentation === "canvas");
@@ -753,7 +739,7 @@ export function CanvasWorkspace({ primaryUrl }) {
         window.addEventListener("wheel", handleGlobalWheel, { capture: true, passive: false });
         return () => window.removeEventListener("wheel", handleGlobalWheel, { capture: true });
     }, [mode, presentation, sketchActive, interactionTool, panCanvasByWheel, zoomAtPointer]);
-    // Every page card would share the one page renderer, so restored extra cards stay unmounted.
+    // Every page card would share the one page renderer, so extra restored cards stay unmounted.
     const renderCard = (card) => pageSurface ? (card.id === presentationCardId ? _jsx(PageCard, { card: card, documentOwner: inspectorSession }, card.id) : null) : (_jsx(CanvasCard, { card: card, presentation: presentation, presentationCard: card.id === presentationCardId, linkedToActive: linkedFrameIds.includes(card.id), onShowFocus: showFocus, onDuplicate: duplicateDesign, onCreateIteration: canvasIterationsEnabled ? createIteration : undefined, documentOwner: inspectorSession }, card.id));
     if (mode !== "canvas")
         return null;

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

@@ -5,6 +5,5 @@ interface PageCardProps {
     card: CanvasCard;
     documentOwner?: InspectorSession;
 }
-/** The page-surface Canvas card: the inspected page is the renderer. */
 export declare function PageCard({ card, documentOwner }: PageCardProps): ReactElement;
 export {};

package/dist/inspector/canvas/PageCard.js

@@ -11,7 +11,6 @@ import { disposeRuntimeIdentityClaims } from "../runtime/runtimeIdentityClaims.j
 import { disposeInlineTextEdit } from "../inline-text/inlineTextEditor.js";
 import { startClipboardHandoffController } from "../prompt/clipboardHandoff.js";
 import { SketchFrameOverlay } from "../sketch/SketchFrameOverlay.js";
-/** The page-surface Canvas card: the inspected page is the renderer. */
 export function PageCard({ card, documentOwner }) {
     const cardRef = useRef(card);
     cardRef.current = card;

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

@@ -1,5 +1,4 @@
 import type { ReactElement } from "react";
-/** Pen, eraser, color and rectangle controls that slide out beside the sketch tool. */
 export declare function SketchToolOptions({ open }: {
     readonly open: boolean;
 }): ReactElement;

package/dist/inspector/canvas/SketchToolOptions.js

@@ -13,7 +13,6 @@ function EraserIllustration() {
     const id = useId();
     return (_jsxs("svg", { className: "sketch-options__illustration sketch-options__illustration--eraser", viewBox: "0 0 22 47", width: 22, height: 47, fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M0.302734 4.7855V32.0302C0.302734 33.7251 1.40783 35.2219 3.0276 35.721L16.5844 39.898C19.0565 40.6597 21.5639 38.8232 21.5836 36.2366L21.8269 4.22443C21.8393 2.59599 20.8289 1.13477 19.3009 0.571436L19.1428 0.513114C18.2253 0.174845 17.2467 0.0339522 16.271 0.0996387L3.90538 0.932154C1.8777 1.06867 0.302734 2.75323 0.302734 4.7855Z", fill: "#DFDBD8" }), _jsx("mask", { id: `${id}-shade-mask`, style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: 22, height: 27, children: _jsx("path", { d: "M0.302734 4.7855V18.1255C0.302734 19.8204 1.40783 21.3173 3.0276 21.8164L16.6054 25.9999C19.0712 26.7596 21.5743 24.9341 21.6044 22.3541L21.8158 4.23606C21.8348 2.60193 20.8233 1.1327 19.2899 0.567375L19.1428 0.513114C18.2253 0.174845 17.2467 0.0339521 16.271 0.0996387L3.90538 0.932154C1.8777 1.06867 0.302734 2.75323 0.302734 4.7855Z", fill: "#131211" }) }), _jsxs("g", { mask: `url(#${id}-shade-mask)`, children: [_jsxs("g", { opacity: 0.7, filter: `url(#${id}-blur)`, children: [_jsx("path", { d: "M4.40022 2.17282C2.33677 1.90432 3.237 0.727298 3.94504 0.335731L14.1105 -2.01367C14.6668 -2.01367 16.4471 -1.71161 19.1174 -0.503342C21.7878 0.704922 22.253 1.11886 22.1519 1.1748L16.6898 1.51043C13.4531 1.73418 6.46367 2.44133 4.40022 2.17282Z", fill: "white" }), _jsx("path", { d: "M5.5 10.4287V21.2917C9.01287 22.5379 17.0143 25.0204 20.8216 22.1607C22.8245 20.6563 21.6392 14.6978 21.8484 12.754C22.4553 7.11543 21.6967 2.68513 18.2071 2.68513C17.4484 2.74107 15 3.04186 10.5 3.47638C6.03379 3.90764 5.39885 7.96741 5.5 10.4287Z", fill: "white" }), _jsx("path", { d: "M4.40022 5.87361V21.7262C3.42918 23.6057 1.51777 20.7842 0.759154 19.5536C0.809729 17.4839 0.758789 6.10855 0.758789 5.03454C0.758789 3.69202 1.51741 1.84606 2.88293 2.3495C3.97534 2.75226 4.34963 4.86672 4.40022 5.87361Z", fill: "white" })] }), _jsx("path", { d: "M16.2881 0.348633C17.2286 0.285354 18.1722 0.421976 19.0566 0.748047L19.2148 0.805664C20.6438 1.33259 21.5887 2.69971 21.5771 4.22266L21.334 36.2344C21.3156 38.6536 18.9702 40.3714 16.6582 39.6592L3.10156 35.4824C1.58668 35.0157 0.552786 33.6154 0.552734 32.0303V4.78516L0.556641 4.6084C0.644771 2.78788 2.08482 1.30547 3.92188 1.18164L16.2881 0.348633Z", stroke: "black", strokeOpacity: 0.1, strokeWidth: 0.5 })] }), _jsx("path", { d: "M4.55172 21.3245L0.303448 18.9751H0V44.6507L4.09655 47.0001L22 44.1473V19.3107L4.55172 21.3245Z", fill: `url(#${id}-sleeve)` }), _jsx("path", { d: "M0.253906 19.1685L4.45801 21.4937L4.5127 21.5229L4.57422 21.5161L21.8066 19.5269V43.9819L4.13281 46.7983L0.193359 44.5386V19.1685H0.253906Z", stroke: "black", strokeOpacity: 0.3, strokeWidth: 0.386207 }), _jsxs("defs", { children: [_jsxs("filter", { id: `${id}-blur`, x: -0.786039, y: -3.5585, width: 24.4949, height: 28.5867, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), _jsx("feGaussianBlur", { stdDeviation: 0.772414, result: "effect1_foregroundBlur" })] }), _jsxs("linearGradient", { id: `${id}-sleeve`, x1: "1.01446e-07", y1: "26.0713", x2: "8.5", y2: "26.0713", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#5D5D5D" }), _jsx("stop", { offset: "0.48629", stopColor: "#5D5D5D" }), _jsx("stop", { offset: "0.568482", stopColor: "#2B2B2B" })] })] })] }));
 }
-/** Rectangle tool icon: outlined in the selected pen color with a 10% tint, matching what it draws. */
 function RectangleIcon({ color }) {
     return (_jsx("svg", { viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", "aria-hidden": "true", children: _jsx("rect", { x: 1, y: 1, width: 22, height: 22, rx: 4, fill: color.value, fillOpacity: SKETCH_RECTANGLE_FILL_OPACITY, stroke: color.value, strokeWidth: 2 }) }));
 }
@@ -21,14 +20,10 @@ function IllustratedToolButton({ tool, activeTool, label, hidden, children, }) {
     const active = tool === activeTool;
     return (_jsx(Tooltip, { content: label, stableTrigger: true, children: _jsx("button", { type: "button", className: "sketch-options__illustrated", "aria-label": label, "aria-pressed": active, "data-active": active ? "true" : "false", "data-test": `sketch-tool-${tool}`, tabIndex: hidden ? -1 : undefined, onClick: () => setSketchDrawingTool(tool), children: children }) }));
 }
-/** Distance from the picker's center to each swatch center, and the swatch diameter, in px. */
 const PALETTE_RADIUS = 26;
 const PALETTE_SWATCH_SIZE = 32;
-/** Paint order of the overlapping swatches, bottom to top; the selected swatch always wins. */
-/** Delay between neighboring swatches as they fan out or collapse, in ms. */
 const PALETTE_STAGGER_MS = 18;
 const PALETTE_STACK_ORDER = ["yellow", "orange", "red", "black", "green", "blue"];
-/** Offset of swatch `index` of `count` from the picker's center; the first sits at the top right. */
 function paletteSwatchOffset(index, count) {
     const radians = ((-90 + (index + 0.5) * (360 / count)) * Math.PI) / 180;
     return {
@@ -79,7 +74,6 @@ function ColorPicker({ color, hidden }) {
                         closePalette();
                     } }, option.id))) })) : null] }));
 }
-/** Pen, eraser, color and rectangle controls that slide out beside the sketch tool. */
 export function SketchToolOptions({ open }) {
     const drawing = useSketchDrawingTools();
     return (_jsx(ToolOptionsDrawer, { name: "sketch", open: open, label: "Sketch tools", children: ({ hidden, settled }) => (_jsxs(_Fragment, { children: [_jsx(IllustratedToolButton, { tool: "pen", activeTool: drawing.tool, label: "Pen", hidden: hidden, children: _jsx(PenIllustration, { color: drawing.color }) }), _jsx(IllustratedToolButton, { tool: "eraser", activeTool: drawing.tool, label: "Eraser", hidden: hidden, children: _jsx(EraserIllustration, {}) }), _jsx(Tooltip, { content: "Rectangle", stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", size: "large", className: "canvas-toolbar__tool sketch-options__rectangle", label: "Rectangle", "aria-pressed": drawing.tool === "rectangle", "data-active": drawing.tool === "rectangle" ? "true" : "false", "data-test": "sketch-tool-rectangle", tabIndex: hidden ? -1 : undefined, onClick: () => setSketchDrawingTool("rectangle"), children: _jsx(RectangleIcon, { color: drawing.color }) }) }), _jsx(ColorPicker, { color: drawing.color, hidden: hidden || !settled })] })) }));

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

@@ -4,18 +4,13 @@ export interface ToolOptionsDrawerProps {
     readonly name: string;
     readonly open: boolean;
     readonly label: string;
-    /**
-     * Renders the drawer content. `hidden` removes controls from the tab order;
-     * `settled` is true once the slide finishes and content may overflow the bar.
-     */
+    /** `hidden` removes controls from the tab order; `settled` is true once the slide finishes. */
     readonly children: (state: {
         readonly hidden: boolean;
         readonly settled: boolean;
     }) => ReactNode;
 }
-/** Slides tool-specific options out of the canvas toolbar beside their tool. */
 export declare function ToolOptionsDrawer({ name, open, label, children }: ToolOptionsDrawerProps): ReactElement;
-/** Closes a toolbar popover on an outside pointer press or Escape. */
 export declare function useDismissablePopover(open: boolean, rootRef: {
     readonly current: HTMLElement | null;
 }, close: () => void): void;

package/dist/inspector/canvas/ToolOptionsDrawer.js

@@ -2,12 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 /** Matches the `width` transition in CanvasToolbar.css. */
 const SLIDE_DURATION_MS = 220;
-// The toolbar is remounted when sketching moves it into a root-level portal.
-// Remember each drawer's last state and width so the new instance can animate
-// from them; it can mount before its content has been laid out.
+// The toolbar remounts when sketching moves it into a root-level portal; remember each drawer's last state and width.
 const lastOpen = new Map();
 const lastWidth = new Map();
-/** Slides tool-specific options out of the canvas toolbar beside their tool. */
 export function ToolOptionsDrawer({ name, open, label, children }) {
     const [expanded, setExpanded] = useState(() => lastOpen.get(name) ?? false);
     const [settled, setSettled] = useState(() => (lastOpen.get(name) ?? false) && open);
@@ -35,9 +32,7 @@ export function ToolOptionsDrawer({ name, open, label, children }) {
             setSettled(false);
         let timer;
         const frame = requestAnimationFrame(() => {
-            // Tool clicks and shortcuts are discrete events, so React can run this
-            // effect before a freshly mounted toolbar is ever styled. Flush its
-            // previous state first so the width change transitions instead of jumping.
+            // React can run this effect before a remounted toolbar is styled; flush layout so the width change transitions instead of jumping.
             void drawerRef.current?.offsetWidth;
             setExpanded(open);
             if (open)
@@ -50,7 +45,6 @@ export function ToolOptionsDrawer({ name, open, label, children }) {
     }, [name, open]);
     return (_jsx("div", { ref: drawerRef, className: "tool-options", role: "group", "aria-label": label, "aria-hidden": !open, "data-expanded": expanded ? "true" : "false", "data-settled": settled ? "true" : "false", "data-test": `${name}-tool-options`, style: { width: expanded ? contentWidth : 0 }, children: _jsx("div", { className: "tool-options__inner", ref: innerRef, children: children({ hidden: !open, settled }) }) }));
 }
-/** Closes a toolbar popover on an outside pointer press or Escape. */
 export function useDismissablePopover(open, rootRef, close) {
     const closeRef = useRef(close);
     closeRef.current = close;

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

@@ -1,6 +1,4 @@
 import type { CanvasFrame } from "./canvasFrame.js";
-/** Resolves only the selected or focused frame. */
 export declare function resolveActiveCanvasFrame(frames: ReadonlyMap<string, CanvasFrame>, selectedCardId: string | null, focusedCardId: string | null): CanvasFrame | null;
 export declare function getActiveCanvasDocument(): Document | null;
-/** Returns the iframe that owns the active renderer document. */
 export declare function getActiveCanvasFrame(): CanvasFrame | null;

package/dist/inspector/canvas/activeCanvasDocument.js

@@ -1,6 +1,5 @@
 import { getFocusedCardId, getSelectedCardId } from "./canvasStore.js";
 import { getRegisteredFrames } from "./projection.js";
-/** Resolves only the selected or focused frame. */
 export function resolveActiveCanvasFrame(frames, selectedCardId, focusedCardId) {
     const activeCardId = selectedCardId ?? focusedCardId;
     return activeCardId ? frames.get(activeCardId) ?? null : null;
@@ -17,7 +16,6 @@ export function getActiveCanvasDocument() {
         return null;
     }
 }
-/** Returns the iframe that owns the active renderer document. */
 export function getActiveCanvasFrame() {
     return resolveActiveCanvasFrame(getRegisteredFrames(), getSelectedCardId(), getFocusedCardId());
 }