nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/boot.js

@@ -0,0 +1,289 @@
+import { startWorkspaceController } from "./workspace/controller.js";
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { toggleInspector, setInspectorOpen } from "./shell/openStore.js";
+import { setSelectedElement } from "./selection/selectionStore.js";
+import { removeManagedSheet } from "./projection/managedStylesheet.js";
+import { isInspectorToggleShortcut, isOriginalPreviewShortcut, SEND_PROMPT_HOTKEY_EVENT, } from "./shell/shortcuts.js";
+import { isCanvasRenderer } from "./canvas/roleDetection.js";
+import { isPageSurface } from "./canvas/pageSurface.js";
+import { isKeyboardShortcutMessage } from "./canvas/frameProtocol.js";
+import { subscribeCanvasRendererMessages } from "./canvas/rendererMessageRouter.js";
+import { bootstrapRenderer } from "./canvas/rendererBootstrap.js";
+import { setRestoreCount, } from "./canvas/sessionStore.js";
+import { getChangesList } from "./drafts/store.js";
+import { acquireLease, enableWriteGuard, hasWriteLease, releaseLease, subscribeOwnership, } from "./canvas/workspaceLease.js";
+import { cancelStaleDetection, startStaleDetection } from "./canvas/staleChangeDetector.js";
+import { LockedWorkspaceNotice } from "./canvas/LockedWorkspaceNotice.js";
+import { AppShell } from "./shell/AppShell.js";
+import { installInspectionBridge } from "./inspection/bridge.js";
+import { releaseDocumentProjection, getStructuralChanges } from "./projection/structuralProjection.js";
+import { cancelInlineTextEdit } from "./inline-text/inlineTextEditor.js";
+import { configureNudgeUiRuntime, getNudgeUiRuntimeConfig, isDemoRuntime } from "./runtime/runtimeConfig.js";
+import { setCanvasMode } from "./canvas/viewStore.js";
+import { isNudgeUiDev, setNudgeUiHostDevFlag } from "./runtime/devFlag.js";
+import { clearClipboardHandoff, } from "./prompt/clipboardHandoff.js";
+import { createWorkspace, InspectorSessionProvider, } from "./session/index.js";
+import { clearSketchClipboardHandoff } from "./sketch/handoff.js";
+import { cancelSketchInteraction, isSketchInteractionActive } from "./sketch/interaction.js";
+import { setOriginalPreviewActive } from "./shell/originalPreview.js";
+import { initializeSketchStore } from "./sketch/store.js";
+import { inspectorStorage } from "./runtime/inspectorStorage.js";
+import { disposeRuntimeIdentityClaims } from "./runtime/runtimeIdentityClaims.js";
+let hostElement = null;
+let reactRoot = null;
+let lockedRoot = null;
+/** Rendered by every mount until the next bootstrap; replaced so tests and embedders can supply a lighter shell. */
+let inspectorShell = AppShell;
+const workspace = createWorkspace();
+let inspectorSession = null;
+let rendererBootstrapHandle = null;
+let workspaceController = null;
+let unsubscribeOwnership = null;
+let removeInspectionBridge = null;
+let controllerStartId = 0;
+let keyboardPeekHeld = false;
+function onKeydown(e) {
+    if (isSketchInteractionActive())
+        return;
+    if (isInspectorToggleShortcut(e)) {
+        toggleInspector();
+        e.preventDefault();
+        return;
+    }
+    if (isOriginalPreviewShortcut(e)) {
+        keyboardPeekHeld = true;
+        setOriginalPreviewActive(true);
+        e.preventDefault();
+    }
+}
+function onKeyup(e) {
+    // Release only a keyboard-started peek so a button-held preview survives unrelated Backslash keyups.
+    if (e.code === "Backslash" && keyboardPeekHeld) {
+        keyboardPeekHeld = false;
+        setOriginalPreviewActive(false);
+    }
+}
+function onRendererKeyboardShortcut(message, identity) {
+    if (!isKeyboardShortcutMessage(message, identity))
+        return;
+    if (message.code === "KeyS" && message.phase === "keydown") {
+        window.dispatchEvent(new Event(SEND_PROMPT_HOTKEY_EVENT));
+        return;
+    }
+    if (message.code !== "Backslash")
+        return;
+    if (message.phase === "keydown") {
+        keyboardPeekHeld = true;
+        setOriginalPreviewActive(true);
+    }
+    else if (keyboardPeekHeld) {
+        keyboardPeekHeld = false;
+        setOriginalPreviewActive(false);
+    }
+}
+function disposeInspectorSession() {
+    const session = inspectorSession;
+    inspectorSession = null;
+    session?.dispose();
+}
+export function bootstrapNudgeUi(inspectorHost, shell = AppShell) {
+    inspectorShell = shell;
+    controllerStartId += 1;
+    const runtimeConfig = getNudgeUiRuntimeConfig();
+    const explicitDemo = isDemoRuntime();
+    if (!isNudgeUiDev() && !explicitDemo)
+        return;
+    if (explicitDemo) {
+        rendererBootstrapHandle?.teardown();
+        rendererBootstrapHandle = null;
+        // Only the configured demo runtime may open the shared dev gate; the bundle mode name alone must not.
+        setNudgeUiHostDevFlag(true);
+        if (runtimeConfig.capabilities.canvas && isCanvasRenderer()) {
+            rendererBootstrapHandle = bootstrapRenderer() ?? null;
+            return;
+        }
+        // The public demo shares the iframe editor without the write lease, persistence, or agent bridge.
+        setCanvasMode("canvas");
+        workspaceController?.dispose();
+        workspaceController = startWorkspaceController();
+        mountInspector(inspectorHost);
+        setInspectorOpen(false);
+        return;
+    }
+    if (!runtimeConfig.capabilities.canvas) {
+        // Clear a stale in-memory Canvas mode when the runtime does not expose Canvas.
+        setCanvasMode("inspect");
+    }
+    rendererBootstrapHandle?.teardown();
+    rendererBootstrapHandle = null;
+    removeInspectionBridge?.();
+    removeInspectionBridge = installInspectionBridge();
+    if (getNudgeUiRuntimeConfig().capabilities.canvas && isCanvasRenderer()) {
+        rendererBootstrapHandle = bootstrapRenderer() ?? null;
+        return;
+    }
+    enableWriteGuard();
+    const leaseGranted = acquireLease();
+    if (!leaseGranted) {
+        mountLockedNotice(inspectorHost);
+        return;
+    }
+    void startController(inspectorHost);
+}
+async function startController(inspectorHost) {
+    const startId = ++controllerStartId;
+    if (!hasWriteLease()) {
+        mountLockedNotice(inspectorHost);
+        return;
+    }
+    // Refresh ownership before hydration writes so the previous tab cannot save after this snapshot.
+    try {
+        const storage = inspectorStorage();
+        if (storage?.refresh)
+            await storage.refresh();
+    }
+    catch {
+        if (startId !== controllerStartId)
+            return;
+        releaseLease();
+        mountLockedNotice(inspectorHost, true);
+        return;
+    }
+    if (startId !== controllerStartId)
+        return;
+    if (!hasWriteLease()) {
+        mountLockedNotice(inspectorHost);
+        return;
+    }
+    if (lockedRoot) {
+        lockedRoot.unmount();
+        lockedRoot = null;
+    }
+    void initializeSketchStore(getNudgeUiRuntimeConfig().projectId).catch(() => undefined);
+    unsubscribeOwnership?.();
+    unsubscribeOwnership = subscribeOwnership((hasLease) => {
+        if (!hasLease) {
+            workspaceController?.dispose();
+            workspaceController = null;
+            mountLockedNotice(inspectorHost);
+        }
+    });
+    workspaceController?.dispose();
+    const result = startWorkspaceController();
+    workspaceController = result;
+    if (result.restored) {
+        setRestoreCount(getChangesList().length + getStructuralChanges().length);
+        const restored = getChangesList();
+        if (restored.length > 0) {
+            startStaleDetection(restored);
+        }
+    }
+    if (getNudgeUiRuntimeConfig().capabilities.canvas) {
+        // Hydration runs first so switching to Canvas mode cannot discard cards, camera, or edits.
+        setCanvasMode("canvas");
+    }
+    mountInspector(inspectorHost);
+    if (getNudgeUiRuntimeConfig().capabilities.canvas && isPageSurface()) {
+        rendererBootstrapHandle = bootstrapRenderer() ?? null;
+    }
+}
+function mountLockedNotice(host, storageError = false) {
+    controllerStartId += 1;
+    if (reactRoot) {
+        reactRoot.unmount();
+        reactRoot = null;
+    }
+    try {
+        disposeInspectorSession();
+    }
+    finally {
+        cancelStaleDetection();
+        setInspectorOpen(false);
+        cancelInlineTextEdit();
+        cancelSketchInteraction();
+        clearSketchClipboardHandoff();
+        setSelectedElement(null);
+        removeManagedSheet();
+        disposeRuntimeIdentityClaims(document);
+        releaseDocumentProjection(document);
+        hostElement = null;
+        unsubscribeOwnership?.();
+        unsubscribeOwnership = null;
+    }
+    const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+    if (!lockedRoot) {
+        lockedRoot = createRoot(shadow);
+    }
+    lockedRoot.render(createElement(LockedWorkspaceNotice, {
+        onTakeover: () => startController(host),
+        storageError,
+    }));
+}
+export function mountInspector(host) {
+    const demo = isDemoRuntime();
+    if (!demo && !hasWriteLease())
+        return;
+    const runtimeConfig = getNudgeUiRuntimeConfig();
+    if (runtimeConfig.capabilities.domNavigation !== true) {
+        configureNudgeUiRuntime({
+            ...runtimeConfig,
+            capabilities: { ...runtimeConfig.capabilities, domNavigation: true },
+        });
+    }
+    if (lockedRoot) {
+        lockedRoot.unmount();
+        lockedRoot = null;
+    }
+    if (!hostElement)
+        hostElement = host;
+    const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+    if (!reactRoot) {
+        reactRoot = createRoot(shadow);
+        inspectorSession = workspace.createInspectorSession(host);
+        inspectorSession.registerCleanup(() => window.removeEventListener("keydown", onKeydown));
+        inspectorSession.registerCleanup(() => window.removeEventListener("keyup", onKeyup));
+        inspectorSession.registerCleanup(subscribeCanvasRendererMessages(({ frame, message }) => {
+            onRendererKeyboardShortcut(message, frame.identity);
+        }));
+        reactRoot.render(createElement(InspectorSessionProvider, { inspector: inspectorSession, documentSession: null }, createElement(inspectorShell)));
+        window.addEventListener("keydown", onKeydown);
+        window.addEventListener("keyup", onKeyup);
+    }
+    setInspectorOpen(true);
+}
+export function unmountInspector() {
+    controllerStartId += 1;
+    rendererBootstrapHandle?.teardown();
+    rendererBootstrapHandle = null;
+    workspaceController?.dispose();
+    workspaceController = null;
+    unsubscribeOwnership?.();
+    unsubscribeOwnership = null;
+    if (lockedRoot) {
+        lockedRoot.unmount();
+        lockedRoot = null;
+    }
+    cancelStaleDetection();
+    cancelInlineTextEdit();
+    cancelSketchInteraction();
+    setSelectedElement(null);
+    if (reactRoot) {
+        reactRoot.unmount();
+        reactRoot = null;
+    }
+    try {
+        disposeInspectorSession();
+    }
+    finally {
+        // Release directly too, so projection applied outside a session cannot leak across unmount.
+        disposeRuntimeIdentityClaims(document);
+        releaseDocumentProjection(document);
+        clearClipboardHandoff();
+        clearSketchClipboardHandoff();
+        removeManagedSheet();
+        removeInspectionBridge?.();
+        removeInspectionBridge = null;
+        hostElement = null;
+    }
+}

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

@@ -1,13 +1,14 @@
+import { type CanvasFrame } from "./canvasFrame.js";
 import { type ActivityFile } from "../agent/activity.js";
 import { type FrameContent } from "./frameContent.js";
 export interface ActivityAttribution {
     files: readonly ActivityFile[];
     elements: readonly Element[];
 }
-/** Reuses rendered source identities. Iteration provenance cannot target application source. */
+/** Matches rendered source identities; iteration provenance cannot target application source. */
 export declare function attributeActivity(content: FrameContent, document: Document, files: readonly ActivityFile[]): ActivityAttribution;
 export declare function AgentActivityOverlay({ cardId, content, iframe }: {
     cardId: string;
     content: FrameContent;
-    iframe: HTMLIFrameElement | null;
+    iframe: CanvasFrame | null;
 }): import("react").JSX.Element | null;

package/dist/inspector/canvas/AgentActivityOverlay.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { canvasFrameElement } from "./canvasFrame.js";
 const activityStyles = ".canvas-agent-activity {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 12;\n  overflow: hidden;\n  border-radius: 4px;\n}\n\n.canvas-agent-activity__label {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  max-width: 80%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 4px 10px 4px 4px;\n  border-radius: 20px;\n  background: #242424e8;\n  color: #fff;\n  font: 12px system-ui;\n  box-shadow: 0 2px 12px #0003;\n}\n\n.canvas-agent-activity__label canvas {\n  flex: 0 0 auto;\n}\n\n.canvas-agent-activity__label > span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.canvas-agent-activity__shimmer {\n  position: absolute;\n  border-radius: 5px;\n  background: linear-gradient(110deg, transparent 20%, rgb(212 212 212 / 0.18) 35%, rgb(212 212 212 / 0.35) 50%, rgb(212 212 212 / 0.18) 65%, transparent 80%);\n  background-size: 250% 100%;\n  animation: nudge-component-shimmer 2.4s ease-in-out infinite;\n}\n\n@keyframes nudge-component-shimmer {\n  from { background-position: 150% 0; }\n  to { background-position: -150% 0; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .canvas-agent-activity__shimmer {\n    animation: none;\n  }\n}\n";
 import { useEffect, useState } from "react";
 import { ThinkingOrb } from "thinking-orbs";
@@ -7,7 +8,8 @@ import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
 import { parseDataSrc } from "../selection/resolveSelection.js";
 import { targetKey } from "../drafts/model.js";
 import { contentEditTarget } from "./frameContent.js";
-/** Reuses rendered source identities. Iteration provenance cannot target application source. */
+import { InspectorStyle } from "../ui/InspectorStyle.js";
+/** Matches rendered source identities; iteration provenance cannot target application source. */
 export function attributeActivity(content, document, files) {
     const target = contentEditTarget(content);
     if (target.kind === "html")
@@ -99,13 +101,14 @@ export function AgentActivityOverlay({ cardId, content, iframe }) {
             };
         };
         attachDocument();
-        iframe.addEventListener("load", attachDocument);
-        return () => { iframe.removeEventListener("load", attachDocument); detachDocument(); };
+        const element = canvasFrameElement(iframe);
+        element?.addEventListener("load", attachDocument);
+        return () => { element?.removeEventListener("load", attachDocument); detachDocument(); };
     }, [activity, content, iframe]);
     const submitted = activity.requestId !== null && activity.targets.includes(cardId)
         && (!activity.target || targetKey(activity.target) === targetKey(contentEditTarget(content)));
     const working = activity.requestId !== null && (submitted || visual.files.length > 0);
     if (!working)
         return null;
-    return _jsxs("div", { className: "canvas-agent-activity", "data-test": `canvas-agent-activity-${cardId}`, children: [visual.highlights.map((rect, index) => _jsx("div", { className: "canvas-agent-activity__shimmer", "data-test": "canvas-agent-component-shimmer", style: { left: rect.x, top: rect.y, width: rect.width, height: rect.height } }, index)), _jsxs("span", { className: "canvas-agent-activity__label", role: "status", children: [_jsx(ThinkingOrb, { state: "solving", size: 20, theme: "dark", "aria-hidden": "true" }), _jsx("span", { children: "Agent working\u2026" })] }), _jsx("style", { children: activityStyles })] });
+    return _jsxs("div", { className: "canvas-agent-activity", "data-test": `canvas-agent-activity-${cardId}`, children: [visual.highlights.map((rect, index) => _jsx("div", { className: "canvas-agent-activity__shimmer", "data-test": "canvas-agent-component-shimmer", style: { left: rect.x, top: rect.y, width: rect.width, height: rect.height } }, index)), _jsxs("span", { className: "canvas-agent-activity__label", role: "status", children: [_jsx(ThinkingOrb, { state: "solving", size: 20, theme: "dark", "aria-hidden": "true" }), _jsx("span", { children: "Agent working\u2026" })] }), _jsx(InspectorStyle, { css: activityStyles })] });
 }

package/dist/inspector/canvas/CanvasCard.js

@@ -4,11 +4,11 @@ import { contentDocumentUrl, contentNavigationUrl, contentSourceUrl, iterationId
 import { refreshHtmlIteration } from "../iterations/coordinator.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { CANVAS_RENDERER_ATTR } from "./roleDetection.js";
-import { useCanvasCards, getCanvasCardLabel, updateCardUrl, resizeCard, setCardPosition, selectCard, getSelectedCardId, useSelectedCardId, useFocusedCardId, } from "./canvasStore.js";
+import { useCanvasCards, getCanvasCardLabel, updateCardUrl, resizeCard, setCardPosition, beginCardGeometryChange, 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 { connectFrame } from "./frameConnection.js";
+import { registerCardFrame, registerCardFrameSource, unregisterCardFrame, sendProjectionToCard, invalidateCanvasPreviewDocument } from "./projection.js";
 import { Button } from "../ui/Button.js";
 import { IconButton } from "../ui/IconButton.js";
 import { Tooltip } from "../ui/Tooltip.js";
@@ -20,6 +20,7 @@ import { getCanvasToolbarScale } from "./toolbarScale.js";
 import { getCanvasResizeHandleScale } from "./resizeHandleScale.js";
 import { disposeBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
 import { releaseDocumentProjection } from "../projection/structuralProjection.js";
+import { disposeRuntimeIdentityClaims } from "../runtime/runtimeIdentityClaims.js";
 import { startClipboardHandoffController } from "../prompt/clipboardHandoff.js";
 import { disposeInlineTextEdit, isInlineTextEditingActive } from "../inline-text/inlineTextEditor.js";
 import { configureNudgeUiRuntime, getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
@@ -93,12 +94,16 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         const frameDocument = iframeRef.current?.contentDocument;
         if (!documentOwner || !frameDocument)
             return;
+        // The initial about:blank document is discarded by navigation; a blocked frame's Window may be inaccessible.
+        if (frameDocument.URL === "about:blank")
+            return;
         if (documentSessionRef.current?.document === frameDocument)
             return;
         disposeDocumentSession();
         const session = documentOwner.createDocumentSession(frameDocument);
         session.registerCleanup(() => disposeBrowserCssInspection(frameDocument));
         session.registerCleanup(() => releaseDocumentProjection(frameDocument));
+        session.registerCleanup(() => disposeRuntimeIdentityClaims(frameDocument));
         session.registerCleanup(() => disposeInlineTextEdit("frame-disposed", frameDocument));
         session.registerCleanup(startClipboardHandoffController(frameDocument));
         session.registerCleanup(installFrameScrollbarStyles(frameDocument));
@@ -124,8 +129,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         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.
+            // Pending inspector edits still project over preview.html; do not replace that base until they are saved.
             if (checking || isInlineTextEditingActive() || workspace?.changes.length || workspace?.structuralChanges.length)
                 return;
             checking = true;
@@ -170,13 +174,8 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
     }
     /** The controller half of the handshake: announce workspace identity. */
     function sendParentReady() {
-        iframeRef.current?.contentWindow?.postMessage({
-            type: "parent-ready",
-            protocolVersion: PROTOCOL_VERSION,
-            projectId: PROJECT_ID,
-            workspaceId: WORKSPACE_ID,
-            cardId: card.id,
-        }, window.location.origin);
+        if (iframeRef.current)
+            connectFrame(card.id, iframeRef.current).post({ type: "parent-ready" });
     }
     function adoptFrameRuntime(runtime) {
         frameRuntimeRef.current = runtime;
@@ -202,11 +201,10 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         adoptFrameRuntime(frameRuntimeRef.current);
     }, [isSelected]);
     useEffect(() => {
-        return subscribeCanvasRendererMessages(({ cardId, message: data }) => {
-            if (cardId !== card.id)
+        return subscribeCanvasRendererMessages(({ frame, message: data }) => {
+            if (frame.cardId !== card.id)
                 return;
-            // A renderer whose runtime finished booting after the iframe load event
-            // asks for the identity announcement it may have missed.
+            // A renderer that booted after the iframe load event asks for the identity announcement it missed.
             if (data.type === "renderer-hello") {
                 sendParentReady();
                 return;
@@ -253,9 +251,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         }, 15000);
         return () => clearTimeout(timeout);
     }, [loadState]);
-    // A late handshake still recovers: the message listener stays installed in
-    // the error state, so a slow renderer's eventual frame-ready flips the card
-    // back to "ready" without user action.
+    // A late handshake still recovers: the message listener stays installed in the error state.
     useEffect(() => {
         const iframe = iframeRef.current;
         if (!iframe)
@@ -264,8 +260,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
             if (getSelectedCardId() === card.id)
                 setSelectedElement(null);
             disposeDocumentSession();
-            // A reload creates a new renderer document; do not show diagnostics
-            // produced by the old frame while its replacement is handshaking.
+            // A reload creates a new renderer document; drop the old frame's diagnostics while it handshakes.
             invalidateCanvasPreviewDocument(card.id);
             clearCanvasStructuralProjectionReports(card.id);
             clearCanvasRenderedInstanceProjectionReports(card.id);
@@ -294,6 +289,8 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         e.stopPropagation();
         e.preventDefault();
         const iterationDrag = e.altKey && !!onCreateIteration && loadState === "ready" && !creatingIteration;
+        // Iteration creation history already records where the new frame was dropped.
+        const commitMove = iterationDrag ? null : beginCardGeometryChange(card.id);
         let moved = false;
         let iterationId;
         let creationStarted = false;
@@ -344,6 +341,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
             cleanup();
             setIsDragging(false);
             cancelled = true;
+            commitMove?.();
             if (iterationId) {
                 removeFrame(iterationId, { undoable: false });
                 selectCard(card.id);
@@ -352,6 +350,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         function onUp() {
             cleanup();
             setIsDragging(false);
+            commitMove?.();
             if (iterationId)
                 setCardPosition(iterationId, position.x, position.y);
         }
@@ -380,6 +379,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
             width: card.width,
             height: card.height,
         };
+        const commitResize = beginCardGeometryChange(card.id);
         function onMove(ev) {
             if (ev.pointerId !== pointerId)
                 return;
@@ -399,6 +399,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
                 target.releasePointerCapture(pointerId);
             if (resizeCleanupRef.current === cleanup)
                 resizeCleanupRef.current = null;
+            commitResize();
         }
         function onUp(ev) {
             if (ev.pointerId !== pointerId)
@@ -441,7 +442,9 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         if ((delta.x !== 0 && edges.horizontal === null) || (delta.y !== 0 && edges.vertical === null))
             return;
         const next = resizeCanvasRect(card, direction, delta);
+        const commitResize = beginCardGeometryChange(card.id);
         resizeCard(card.id, next.width, next.height, { x: next.x, y: next.y });
+        commitResize();
     }
     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,
@@ -452,9 +455,8 @@ 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(_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.
+        }, 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 allow-popups-to-escape-sandbox", "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: {
+                    // The edge's long axis follows the zoomed card; only its thickness is inverse-scaled.
                     transform: resizeHandleTransform(handle.direction, resizeHandleScale),
                     transformOrigin: handle.transformOrigin,
                     cursor: handle.cursor,