nudge-ui 0.2.5 → 0.2.6

package/dist/inspector/agent/verification.d.ts

@@ -13,35 +13,18 @@ export interface HandoffSnapshot {
     readonly changes: readonly ChangeRecord[];
     readonly structuralChanges: readonly StructuralChange[];
 }
-/** Stable, preview-metadata-free identity for one prompt handoff record. */
 export declare function handoffChangeFingerprint(change: ChangeRecord): string;
-/** Stable identity for one structural record included in a prompt handoff. */
 export declare function handoffStructuralFingerprint(change: StructuralChange): string;
-/**
- * Positively verifies browser-observable source results after the inspector's
- * own projections have been removed. Component props and interaction states
- * intentionally remain unresolved because rendered output alone cannot prove
- * that their source was updated.
- */
+/** Component props and interaction states stay unresolved: rendered output alone cannot prove their source changed. */
 export declare function verifiedChangeKeys(sentChanges: readonly ChangeRecord[], doc?: Document): Set<string>;
-/** Captures the exact canonical edits associated with one dispatched prompt. */
 export declare function recordAgentDispatch(revision: number, changes: readonly ChangeRecord[], structuralChanges?: readonly StructuralChange[], owner?: HandoffOwner): void;
-/** Drops a captured revision when the bridge rejects its dispatch. */
 export declare function discardAgentDispatch(revision: number): void;
-/** Returns how many canonical edits were in flight for one dispatch. */
 export declare function getAgentDispatchSize(revision: number): number;
-/**
- * Reconciles only records that still equal the sent snapshot and that remain
- * observable after removing Nudge's own preview. Newer edits and ambiguous
- * records are preserved.
- */
+/** Newer edits and ambiguous records are preserved. */
 export declare function verifyAndReconcileHandoff(snapshot: HandoffSnapshot, doc?: Document | null): Promise<number>;
 export declare function documentBelongsToHandoff(doc: Document, owner: HandoffOwner): boolean;
-/** Returns the records captured for one dispatch until it is reconciled. */
 export declare function getAgentDispatch(revision: number): HandoffSnapshot | null;
-/** Records in the owner draft that still equal what a handoff sent. */
 export declare function unchangedHandoffRecords(snapshot: HandoffSnapshot): Pick<HandoffSnapshot, "changes" | "structuralChanges">;
-/** Reconciles the captured records for one completed connected-agent request. */
 export declare function verifyAndReconcileAgentDispatch(revision: number): Promise<number>;
 /** Test/session reset for in-memory dispatch snapshots. */
 export declare function resetAgentVerification(): void;

package/dist/inspector/agent/verification.js

@@ -34,11 +34,9 @@ function stableJsonValue(value) {
 function stableSerialized(value) {
     return JSON.stringify(stableJsonValue(value));
 }
-/** Stable, preview-metadata-free identity for one prompt handoff record. */
 export function handoffChangeFingerprint(change) {
     return stableSerialized(change);
 }
-/** Stable identity for one structural record included in a prompt handoff. */
 export function handoffStructuralFingerprint(change) {
     return stableSerialized(change);
 }
@@ -59,7 +57,7 @@ function queryTargets(doc, selector) {
         return [];
     }
 }
-/** Resolves current style targets, following a source site whose position shifted. */
+/** Falls back to relocating a shifted source site. */
 function styleTargets(change, doc) {
     if (isTokenChange(change))
         return queryTargets(doc, change.selector);
@@ -106,12 +104,7 @@ function verifyText(change, doc) {
         && change.after.length === 0
         && (resolved.element.textContent ?? "") === "";
 }
-/**
- * A delete verifies when its target no longer resolves in the document once
- * the preview is lifted: the source really removed it. Ambiguous evidence
- * still means identical elements are present, so only a definitive miss
- * verifies.
- */
+/** Only a definitive miss verifies; ambiguous evidence still means identical elements are present. */
 function verifyStructuralDelete(change, doc) {
     if (!change.route || !change.state || !doc.location)
         return false;
@@ -128,12 +121,7 @@ function verifyStructuralDelete(change, doc) {
         && documentStateKey(doc) === change.state
         && resolveMovedRenderedInstance(doc, change.target).status === "missing";
 }
-/**
- * A move verifies when the element sits at its recorded destination without
- * the preview holding it there. The projection rebuild returns a cleanly
- * applied move preview to its captured origin, so such records conservatively
- * stay unverified instead of trusting rendered placement alone.
- */
+/** A cleanly applied preview returns to its captured origin, so only a move that stays at its recorded destination verifies. */
 function verifyStructuralMove(change, doc) {
     const target = resolveMovedRenderedInstance(doc, change.target);
     if (target.status !== "resolved")
@@ -159,12 +147,7 @@ function verifiedStructuralChangeIds(eligible, doc) {
     }
     return verified;
 }
-/**
- * Positively verifies browser-observable source results after the inspector's
- * own projections have been removed. Component props and interaction states
- * intentionally remain unresolved because rendered output alone cannot prove
- * that their source was updated.
- */
+/** Component props and interaction states stay unresolved: rendered output alone cannot prove their source changed. */
 export function verifiedChangeKeys(sentChanges, doc = document) {
     const verified = new Set();
     for (const change of sentChanges) {
@@ -178,7 +161,6 @@ export function verifiedChangeKeys(sentChanges, doc = document) {
     }
     return verified;
 }
-/** Captures the exact canonical edits associated with one dispatched prompt. */
 export function recordAgentDispatch(revision, changes, structuralChanges = [], owner = captureHandoffOwner()) {
     dispatches.set(revision, {
         owner: structuredClone(owner),
@@ -186,11 +168,9 @@ export function recordAgentDispatch(revision, changes, structuralChanges = [], o
         structuralChanges: structuralChanges.map((change) => structuredClone(change)),
     });
 }
-/** Drops a captured revision when the bridge rejects its dispatch. */
 export function discardAgentDispatch(revision) {
     dispatches.delete(revision);
 }
-/** Returns how many canonical edits were in flight for one dispatch. */
 export function getAgentDispatchSize(revision) {
     const snapshot = dispatches.get(revision);
     if (!snapshot)
@@ -219,11 +199,7 @@ function afterBrowserPaint(doc) {
         });
     });
 }
-/**
- * Reconciles only records that still equal the sent snapshot and that remain
- * observable after removing Nudge's own preview. Newer edits and ambiguous
- * records are preserved.
- */
+/** Newer edits and ambiguous records are preserved. */
 export async function verifyAndReconcileHandoff(snapshot, doc = handoffDocument(snapshot.owner)) {
     if (!doc || !documentBelongsToHandoff(doc, snapshot.owner))
         return 0;
@@ -241,8 +217,6 @@ export async function verifyAndReconcileHandoff(snapshot, doc = handoffDocument(
     const eligible = current.filter((change) => sentByKey.get(changeKey(change)) === handoffChangeFingerprint(change));
     const eligibleKeys = new Set(eligible.map(changeKey));
     const remaining = current.filter((change) => !eligibleKeys.has(changeKey(change)));
-    // The same "still unchanged" rule for structural intent: only canonical
-    // records byte-identical to the dispatched snapshot may be reconciled.
     const sentStructural = new Map(snapshot.structuralChanges.map((change) => [change.id, handoffStructuralFingerprint(change)]));
     const currentStructural = getDraftChanges(snapshot.owner.draftId).structuralChanges;
     const eligibleStructural = currentStructural.filter((change) => sentStructural.get(change.id) === handoffStructuralFingerprint(change));
@@ -265,9 +239,7 @@ export async function verifyAndReconcileHandoff(snapshot, doc = handoffDocument(
             return 0;
         const verified = verifiedChangeKeys(eligible, doc);
         const verifiedStructural = verifiedStructuralChangeIds(eligibleStructural, doc);
-        // A user can make another inspector edit while the two-frame verification
-        // window is open. Recheck byte identity immediately before reconciliation
-        // so a newer value at the same key can never be removed.
+        // Recheck byte identity before reconciling; a user edit can land while the two-frame window is open.
         const currentByKey = new Map(getDraftChanges(snapshot.owner.draftId).changes.map((change) => [changeKey(change), handoffChangeFingerprint(change)]));
         const stillVerified = new Set([...verified].filter((key) => currentByKey.get(key) === sentByKey.get(key)));
         const currentStructuralById = new Map(getDraftChanges(snapshot.owner.draftId).structuralChanges.map((change) => [change.id, handoffStructuralFingerprint(change)]));
@@ -280,12 +252,7 @@ export async function verifyAndReconcileHandoff(snapshot, doc = handoffDocument(
         return reconcileDraftChanges(snapshot.owner.draftId, stillVerified, stillVerifiedStructural);
     }
     finally {
-        // Reconciliation reapplies the canonical set. If it was unable to write
-        // (for example, a read-only Canvas lease), restore the untouched set here.
-        // A Canvas restore settles on the renderer's acknowledgement: that
-        // acknowledgement invalidates the frame's stylesheet revision, and a
-        // caller still inside this verification must not mistake it for a source
-        // change and schedule another verification.
+        // If reconciliation could not write (read-only Canvas lease), restore the untouched set; a Canvas restore settles on the renderer's acknowledgement.
         if (doc === document)
             await applyProjection(getActiveDraftChanges());
         else
@@ -311,11 +278,9 @@ function handoffDocument(owner) {
     }
     return owner.target.kind === "application" && !isEditorShellDocument() ? document : null;
 }
-/** Returns the records captured for one dispatch until it is reconciled. */
 export function getAgentDispatch(revision) {
     return dispatches.get(revision) ?? null;
 }
-/** Records in the owner draft that still equal what a handoff sent. */
 export function unchangedHandoffRecords(snapshot) {
     const sent = new Set(snapshot.changes.map(handoffChangeFingerprint));
     const sentStructural = new Set(snapshot.structuralChanges.map(handoffStructuralFingerprint));
@@ -325,7 +290,6 @@ export function unchangedHandoffRecords(snapshot) {
         structuralChanges: current.structuralChanges.filter((change) => sentStructural.has(handoffStructuralFingerprint(change))),
     };
 }
-/** Reconciles the captured records for one completed connected-agent request. */
 export async function verifyAndReconcileAgentDispatch(revision) {
     const snapshot = dispatches.get(revision);
     if (!snapshot)

package/dist/inspector/boot.d.ts

@@ -1,3 +1,5 @@
-export declare function bootstrapNudgeUi(inspectorHost: HTMLElement): void;
+import { type ReactElement } from "react";
+export type InspectorShell = () => ReactElement;
+export declare function bootstrapNudgeUi(inspectorHost: HTMLElement, shell?: InspectorShell): void;
 export declare function mountInspector(host: HTMLElement): void;
 export declare function unmountInspector(): void;

package/dist/inspector/boot.js

@@ -33,6 +33,8 @@ 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;
@@ -56,10 +58,7 @@ function onKeydown(e) {
     }
 }
 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.
+    // Release only a keyboard-started peek so a button-held preview survives unrelated Backslash keyups.
     if (e.code === "Backslash" && keyboardPeekHeld) {
         keyboardPeekHeld = false;
         setOriginalPreviewActive(false);
@@ -88,7 +87,8 @@ function disposeInspectorSession() {
     inspectorSession = null;
     session?.dispose();
 }
-export function bootstrapNudgeUi(inspectorHost) {
+export function bootstrapNudgeUi(inspectorHost, shell = AppShell) {
+    inspectorShell = shell;
     controllerStartId += 1;
     const runtimeConfig = getNudgeUiRuntimeConfig();
     const explicitDemo = isDemoRuntime();
@@ -97,16 +97,13 @@ export function bootstrapNudgeUi(inspectorHost) {
     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.
+        // 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 while keeping the write lease,
-        // persistence, and agent bridge disabled.
+        // The public demo shares the iframe editor without the write lease, persistence, or agent bridge.
         setCanvasMode("canvas");
         workspaceController?.dispose();
         workspaceController = startWorkspaceController();
@@ -115,8 +112,7 @@ export function bootstrapNudgeUi(inspectorHost) {
         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.
+        // Clear a stale in-memory Canvas mode when the runtime does not expose Canvas.
         setCanvasMode("inspect");
     }
     rendererBootstrapHandle?.teardown();
@@ -141,8 +137,7 @@ async function startController(inspectorHost) {
         mountLockedNotice(inspectorHost);
         return;
     }
-    // Ownership prevents the previous tab from saving after this snapshot.
-    // Refresh on remount as well as explicit takeover, before hydration writes.
+    // Refresh ownership before hydration writes so the previous tab cannot save after this snapshot.
     try {
         const storage = inspectorStorage();
         if (storage?.refresh)
@@ -185,8 +180,7 @@ async function startController(inspectorHost) {
         }
     }
     if (getNudgeUiRuntimeConfig().capabilities.canvas) {
-        // Normal controllers always host the iframe workspace. Hydration runs
-        // first so this mode change cannot discard cards, camera, or edits.
+        // Hydration runs first so switching to Canvas mode cannot discard cards, camera, or edits.
         setCanvasMode("canvas");
     }
     mountInspector(inspectorHost);
@@ -252,7 +246,7 @@ export function mountInspector(host) {
         inspectorSession.registerCleanup(subscribeCanvasRendererMessages(({ frame, message }) => {
             onRendererKeyboardShortcut(message, frame.identity);
         }));
-        reactRoot.render(createElement(InspectorSessionProvider, { inspector: inspectorSession, documentSession: null }, createElement(AppShell)));
+        reactRoot.render(createElement(InspectorSessionProvider, { inspector: inspectorSession, documentSession: null }, createElement(inspectorShell)));
         window.addEventListener("keydown", onKeydown);
         window.addEventListener("keyup", onKeyup);
     }
@@ -282,9 +276,7 @@ export function unmountInspector() {
         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.
+        // Release directly too, so projection applied outside a session cannot leak across unmount.
         disposeRuntimeIdentityClaims(document);
         releaseDocumentProjection(document);
         clearClipboardHandoff();

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

@@ -5,7 +5,7 @@ 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;

package/dist/inspector/canvas/AgentActivityOverlay.js

@@ -9,7 +9,7 @@ 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. */
+/** Matches rendered source identities; iteration provenance cannot target application source. */
 export function attributeActivity(content, document, files) {
     const target = contentEditTarget(content);
     if (target.kind === "html")

package/dist/inspector/canvas/CanvasCard.js

@@ -94,8 +94,7 @@ 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.
+        // 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)
@@ -130,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;
@@ -206,8 +204,7 @@ export function CanvasCard({ card, presentation = "canvas", presentationCard = t
         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;
@@ -254,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)
@@ -265,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);
@@ -461,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,