nudge-ui 0.2.3 → 0.2.5

package/dist/inspector/boot.js

@@ -0,0 +1,297 @@
+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;
+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 (e.g. the panel-toggle shortcuts pressed
+    // mid-hold). A guarded keydown never sets the flag, so this stays a no-op
+    // for keyups without a matching hold.
+    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) {
+    controllerStartId += 1;
+    const runtimeConfig = getNudgeUiRuntimeConfig();
+    const explicitDemo = isDemoRuntime();
+    if (!isNudgeUiDev() && !explicitDemo)
+        return;
+    if (explicitDemo) {
+        rendererBootstrapHandle?.teardown();
+        rendererBootstrapHandle = null;
+        // ADR-0014: only the configured demo runtime opens the shared dev gate
+        // for its own document. The bundle mode name alone must never flip it,
+        // so every build without both opt-ins stays governed by ADR-0002.
+        setNudgeUiHostDevFlag(true);
+        if (runtimeConfig.capabilities.canvas && isCanvasRenderer()) {
+            rendererBootstrapHandle = bootstrapRenderer() ?? null;
+            return;
+        }
+        // The public demo shares the iframe editor while keeping the write lease,
+        // persistence, and agent bridge disabled.
+        setCanvasMode("canvas");
+        workspaceController?.dispose();
+        workspaceController = startWorkspaceController();
+        mountInspector(inspectorHost);
+        setInspectorOpen(false);
+        return;
+    }
+    if (!runtimeConfig.capabilities.canvas) {
+        // A project can be reopened with a runtime that does not expose Canvas.
+        // Clear any stale in-memory mode before mounting the static inspector.
+        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;
+    }
+    // Ownership prevents the previous tab from saving after this snapshot.
+    // Refresh on remount as well as explicit takeover, before hydration writes.
+    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) {
+        // Normal controllers always host the iframe workspace. Hydration runs
+        // first so this mode change 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(AppShell)));
+        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 {
+        // Document-session cleanup already releases host projection when a
+        // session exists; release directly as well so projection applied outside
+        // a session (gestures, workspace projection) cannot leak across unmount.
+        disposeRuntimeIdentityClaims(document);
+        releaseDocumentProjection(document);
+        clearClipboardHandoff();
+        clearSketchClipboardHandoff();
+        removeManagedSheet();
+        removeInspectionBridge?.();
+        removeInspectionBridge = null;
+        hostElement = null;
+    }
+}

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

@@ -1,3 +1,4 @@
+import { type CanvasFrame } from "./canvasFrame.js";
 import { type ActivityFile } from "../agent/activity.js";
 import { type FrameContent } from "./frameContent.js";
 export interface ActivityAttribution {
@@ -9,5 +10,5 @@ export declare function attributeActivity(content: FrameContent, document: Docum
 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,6 +8,7 @@ import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
 import { parseDataSrc } from "../selection/resolveSelection.js";
 import { targetKey } from "../drafts/model.js";
 import { contentEditTarget } from "./frameContent.js";
+import { InspectorStyle } from "../ui/InspectorStyle.js";
 /** Reuses rendered source identities. Iteration provenance cannot target application source. */
 export function attributeActivity(content, document, files) {
     const target = contentEditTarget(content);
@@ -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";
@@ -27,6 +28,7 @@ import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { reconcileRuntimeWithDocumentStylesheets } from "../runtime/documentStylesheetOrder.js";
 import { subscribeCanvasRendererMessages } from "./rendererMessageRouter.js";
 import { SketchFrameOverlay } from "../sketch/SketchFrameOverlay.js";
+import { installFrameScrollbarStyles } from "./frameScrollbarStyles.js";
 import { getCanvasResizeEdges, resizeCanvasRect, } from "./canvasResize.js";
 import { getDraftContentsForCard } from "../drafts/store.js";
 import { removeFrame } from "../workspace/commands.js";
@@ -92,14 +94,20 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         const frameDocument = iframeRef.current?.contentDocument;
         if (!documentOwner || !frameDocument)
             return;
+        // The initial blank document is discarded by navigation. A blocked frame
+        // can make its Window inaccessible before cleanup runs.
+        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));
         documentSessionRef.current = { document: frameDocument, session };
     }, [disposeDocumentSession, documentOwner]);
     useEffect(() => {
@@ -168,13 +176,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;
@@ -200,8 +203,8 @@ 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.
@@ -292,6 +295,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;
@@ -342,6 +347,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
             cleanup();
             setIsDragging(false);
             cancelled = true;
+            commitMove?.();
             if (iterationId) {
                 removeFrame(iterationId, { undoable: false });
                 selectCard(card.id);
@@ -350,6 +356,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         function onUp() {
             cleanup();
             setIsDragging(false);
+            commitMove?.();
             if (iterationId)
                 setCardPosition(iterationId, position.x, position.y);
         }
@@ -378,6 +385,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;
@@ -397,6 +405,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)
@@ -439,7 +448,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,