nudge-ui 0.2.3 → 0.2.5

package/dist/inspector/shell/AppShell.js

@@ -2,14 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InspectorShell } from "./InspectorShell.js";
 import { CanvasWorkspace } from "../canvas/CanvasWorkspace.js";
 import { CanvasElementOverlay } from "../canvas/CanvasElementOverlay.js";
+import { isPageSurface } from "../canvas/pageSurface.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { readNudgeUiEditorTarget } from "../../transport/editor.js";
 import { TooltipGroup } from "../ui/Tooltip.js";
+import { ToastRegion } from "../ui/Toast.js";
 import { CommentsOverlay } from "../comments/CommentsOverlay.js";
 export function AppShell() {
     const canvasEnabled = useNudgeUiRuntimeConfig().capabilities.canvas;
     const primaryUrl = typeof window === "undefined"
         ? null
-        : readNudgeUiEditorTarget(window.location.href);
-    return (_jsxs(TooltipGroup, { children: [canvasEnabled ? _jsx(CanvasWorkspace, { primaryUrl: primaryUrl }) : null, canvasEnabled ? _jsx(CanvasElementOverlay, {}) : null, canvasEnabled ? _jsx(CommentsOverlay, {}) : null, _jsx(InspectorShell, {})] }));
+        : isPageSurface()
+            ? window.location.href
+            : readNudgeUiEditorTarget(window.location.href);
+    return (_jsxs(TooltipGroup, { children: [canvasEnabled ? _jsx(CanvasWorkspace, { primaryUrl: primaryUrl }) : null, canvasEnabled ? _jsx(CanvasElementOverlay, {}) : null, canvasEnabled ? _jsx(CommentsOverlay, {}) : null, _jsx(InspectorShell, {}), _jsx(ToastRegion, {})] }));
 }

package/dist/inspector/shell/ChangesLog.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useSyncExternalStore } from "react";
+import { useMemo, useState, useSyncExternalStore } from "react";
 import { IconArrowBackUp } from "@tabler/icons-react";
-import { isComponentChange, isElementChange, isTextContentChange, isTokenChange, useChanges, revertChange, } from "../changes/changesLog.js";
+import { isComponentChange, isElementChange, isTextContentChange, isTokenChange, } from "../changes/types.js";
+import { useChanges, revertChange } from "../drafts/store.js";
 import { StaleChangeIndicator } from "../canvas/StaleChangeIndicator.js";
 import { Button } from "../ui/Button.js";
 import { Disclosure } from "../ui/Disclosure.js";
@@ -11,8 +12,8 @@ import { presentChange } from "../changes/presentation.js";
 import { getStructuralChanges, getStructuralChangeDiagnostics, getStructuralDiagnosticRevision, revertStructuralChange, subscribeStructuralChanges, subscribeStructuralDiagnostics, } from "../projection/structuralProjection.js";
 import { getRenderedInstanceChangeDiagnostics, getRenderedInstanceDiagnosticRevision, subscribeRenderedInstanceDiagnostics, } from "../projection/renderedInstance.js";
 import { getTextContentChangeDiagnostics, getTextProjectionDiagnosticRevision, subscribeTextProjectionDiagnostics, } from "../projection/textProjection.js";
-import { SketchChanges } from "../sketch/SketchChanges.js";
-import { useSketchStore } from "../sketch/store.js";
+import { removeSketch, useSketchStore } from "../sketch/store.js";
+import { StatusCallout } from "../ui/StatusCallout.js";
 import { useFrameComments } from "../comments/store.js";
 import { countPromptChanges } from "../prompt/generatePrompt.js";
 function groupChanges(changes) {
@@ -75,8 +76,25 @@ function changeActionLabel(change, presentation) {
         return "Changed text";
     return `Changed ${presentation.propertyLabel}`;
 }
-function RevertButton({ dataTest, dataProperty, onClick, }) {
-    return (_jsx(Tooltip, { content: "Revert", stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", size: "compact", className: "changes__revert", "data-test": dataTest, "data-property": dataProperty, label: "Revert change", onClick: onClick, children: _jsx(IconArrowBackUp, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) }));
+function RevertButton({ dataTest, dataProperty, onClick, disabled, label = "Revert change", tooltip = "Revert", }) {
+    return (_jsx(Tooltip, { content: tooltip, stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", size: "compact", className: "changes__revert", "data-test": dataTest, "data-property": dataProperty, label: label, disabled: disabled, onClick: onClick, children: _jsx(IconArrowBackUp, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) }));
+}
+function SketchChangeRow({ item }) {
+    const [error, setError] = useState(null);
+    const note = item.document.description.trim()
+        || item.document.annotations?.map((annotation) => annotation.description).join("; ");
+    const busy = item.status === "dispatching" || item.status === "handing-off";
+    async function remove() {
+        setError(null);
+        try {
+            if (!await removeSketch(item.document.id))
+                setError("The sketch could not be removed yet.");
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : "The sketch could not be removed.");
+        }
+    }
+    return (_jsxs("div", { className: "changes__group", children: [_jsxs("div", { className: "changes__row changes__row--sketch", "data-test": "sketch-row", "data-sketch-id": item.document.id, children: [_jsxs("div", { className: "changes__summary", children: [_jsx("span", { className: "changes__target", children: "Sketch" }), note ? _jsx("span", { className: "changes__action", title: note, children: note }) : null] }), _jsx(RevertButton, { dataTest: "sketch-revert", label: "Remove sketch", tooltip: "Remove sketch", disabled: busy, onClick: () => void remove() })] }), error ? _jsx(StatusCallout, { tone: "warning", role: "status", children: error }) : null] }));
 }
 export function ChangesLog({ onClearSession }) {
     const changes = useChanges();
@@ -103,8 +121,8 @@ export function ChangesLog({ onClearSession }) {
                                 const textDiagnostics = change.kind === "text-content"
                                     ? getTextContentChangeDiagnostics(change.id)
                                     : [];
-                                return (_jsxs("div", { className: "changes__row", "data-test": "change-row", "data-property": presentation.property, children: [_jsx("span", { className: "changes__target", "data-test": "change-target", children: changeTargetLabel(change, presentation) }), _jsx("span", { className: "changes__action", "data-test": "change-action", children: changeActionLabel(change, presentation) }), _jsxs("span", { className: "changes__metadata", "aria-hidden": "true", children: [_jsx("span", { className: "changes__prop", children: presentation.propertyLabel }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: presentation.before }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: presentation.after })] }), presentation.scope ? (_jsx("span", { className: "changes__scope", "data-test": "change-scope", children: presentation.scope === "source-site" ? "All outputs at source site" : "This rendered item only" })) : null, presentation.evidence ? (_jsx("span", { className: "changes__evidence", "data-test": "change-evidence", children: presentation.evidence })) : null, _jsx(StaleChangeIndicator, { change: change }), instanceDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "instance-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`))), textDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "text-projection-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`)))] }), _jsx(RevertButton, { dataTest: "change-revert", dataProperty: presentation.property, onClick: () => revertChange(change) })] }, `${group.key}\u0000${presentation.property}\u0000${i}`));
-                            }) }, group.key))), structuralChanges.map((change) => (_jsx("div", { className: "changes__group", "data-test": "dom-change", "data-cid": change.target.sourceSite.cid, children: _jsxs("div", { className: "changes__row", "data-test": "dom-change-row", "data-action": change.kind, children: [_jsx("span", { className: "changes__target", "data-test": "structural-target", children: change.target.sourceSite.cid }), _jsx("span", { className: "changes__action", "data-test": "structural-action", children: change.kind === "move" ? "Moved" : "Deleted" }), _jsxs("span", { className: "changes__metadata", "aria-hidden": "true", children: [_jsxs("span", { className: "changes__source-site", "data-test": "structural-source-site", children: ["Source site: ", change.target.sourceSite.cid] }), _jsx("span", { className: "changes__prop", children: change.kind === "move" ? "Move in DOM" : "Delete from DOM" }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: change.kind === "move"
+                                return (_jsxs("div", { className: "changes__row", "data-test": "change-row", "data-property": presentation.property, children: [_jsxs("div", { className: "changes__summary", children: [_jsx("span", { className: "changes__target", "data-test": "change-target", children: changeTargetLabel(change, presentation) }), _jsx("span", { className: "changes__action", "data-test": "change-action", children: changeActionLabel(change, presentation) })] }), _jsxs("span", { className: "changes__metadata", "aria-hidden": "true", children: [_jsx("span", { className: "changes__prop", children: presentation.propertyLabel }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: presentation.before }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: presentation.after })] }), presentation.scope ? (_jsx("span", { className: "changes__scope", "data-test": "change-scope", children: presentation.scope === "source-site" ? "All outputs at source site" : "This rendered item only" })) : null, presentation.evidence ? (_jsx("span", { className: "changes__evidence", "data-test": "change-evidence", children: presentation.evidence })) : null, _jsx(StaleChangeIndicator, { change: change }), instanceDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "instance-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`))), textDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "text-projection-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`)))] }), _jsx(RevertButton, { dataTest: "change-revert", dataProperty: presentation.property, onClick: () => revertChange(change) })] }, `${group.key}\u0000${presentation.property}\u0000${i}`));
+                            }) }, group.key))), structuralChanges.map((change) => (_jsx("div", { className: "changes__group", "data-test": "dom-change", "data-cid": change.target.sourceSite.cid, children: _jsxs("div", { className: "changes__row", "data-test": "dom-change-row", "data-action": change.kind, children: [_jsxs("div", { className: "changes__summary", children: [_jsx("span", { className: "changes__target", "data-test": "structural-target", children: change.target.sourceSite.cid }), _jsx("span", { className: "changes__action", "data-test": "structural-action", children: change.kind === "move" ? "Moved" : "Deleted" })] }), _jsxs("span", { className: "changes__metadata", "aria-hidden": "true", children: [_jsxs("span", { className: "changes__source-site", "data-test": "structural-source-site", children: ["Source site: ", change.target.sourceSite.cid] }), _jsx("span", { className: "changes__prop", children: change.kind === "move" ? "Move in DOM" : "Delete from DOM" }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: change.kind === "move"
                                                             ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
                                                                 ? `${change.presentation.sourceParentTag} position ${change.presentation.fromIndex + 1}`
                                                                 : `${structuralParentLabel(change, "source")} position ${change.presentation.fromIndex + 1}`
@@ -112,5 +130,5 @@ export function ChangesLog({ onClearSession }) {
                                                             ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
                                                                 ? `${change.presentation.destinationParentTag} position ${change.presentation.toIndex + 1}`
                                                                 : `${structuralParentLabel(change, "destination")} position ${change.presentation.toIndex + 1}`
-                                                            : "Removed" })] }), _jsx("span", { className: "changes__scope", "data-test": "structural-scope", children: "This rendered item only" }), getStructuralChangeDiagnostics(change.id).map((diagnostic) => (_jsx("span", { className: "changes__diagnostic", "data-test": "structural-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, "data-reason": diagnostic.reason, children: structuralDiagnosticText(diagnostic) }, `${diagnostic.document}:${diagnostic.status}:${diagnostic.reason ?? ""}`)))] }), _jsx(RevertButton, { dataTest: "dom-change-revert", onClick: () => revertStructuralChange(change.id) })] }) }, change.id))), _jsx(SketchChanges, {})] })) }) : null, onClearSession ? (_jsx("div", { className: "changes__session-action", "data-test": "session-actions", children: _jsx(Button, { variant: "secondary", type: "button", "data-test": "clear-session", onClick: onClearSession, children: "Clear Changes" }) })) : null] }));
+                                                            : "Removed" })] }), _jsx("span", { className: "changes__scope", "data-test": "structural-scope", children: "This rendered item only" }), getStructuralChangeDiagnostics(change.id).map((diagnostic) => (_jsx("span", { className: "changes__diagnostic", "data-test": "structural-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, "data-reason": diagnostic.reason, children: structuralDiagnosticText(diagnostic) }, `${diagnostic.document}:${diagnostic.status}:${diagnostic.reason ?? ""}`)))] }), _jsx(RevertButton, { dataTest: "dom-change-revert", onClick: () => revertStructuralChange(change.id) })] }) }, change.id))), sketches.map((item) => _jsx(SketchChangeRow, { item: item }, `${item.document.id}:${item.document.revision}`)), sketchStore.error ? _jsx(StatusCallout, { tone: "warning", "data-test": "sketch-storage-error", children: sketchStore.error }) : null] })) }) : null, onClearSession ? (_jsx("div", { className: "changes__session-action", "data-test": "session-actions", children: _jsx(Button, { variant: "secondary", type: "button", "data-test": "clear-session", onClick: onClearSession, children: "Clear Changes" }) })) : null] }));
 }

package/dist/inspector/shell/CopyPromptButton.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 import { iterationId } from "../canvas/frameContent.js";
 import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { IconArtboard, IconBoltFilled, IconCheck, IconChevronDown, IconCopy, IconPlugConnected, IconSend, } from "@tabler/icons-react";
-import { useChanges } from "../changes/changesLog.js";
+import { IconArtboard, IconBoltFilled, IconCheck, IconChevronDown, IconCopy, IconPencil, IconPlugConnected, IconSend, IconX, } from "@tabler/icons-react";
+import { useChanges } from "../drafts/store.js";
 import { countPromptChanges } from "../prompt/generatePrompt.js";
 import { loadCustomInstructions, saveCustomInstructions } from "../prompt/promptSettings.js";
-import { getAgentConnectionStatus } from "../agent/connectionStatus.js";
+import { useAgentConnectionStatus } from "../agent/connectionStatus.js";
 import { SettingsDialog } from "../settings/SettingsDialog.js";
 import { Button } from "../ui/Button.js";
 import { portalContainer } from "../ui/portalContainer.js";
@@ -15,10 +15,15 @@ import { getStructuralChanges, subscribeStructuralChanges } from "../projection/
 import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
 import { getAgentClient, useAgentClient } from "../agent/client.js";
 import { createAgentPresentationAdapter } from "../canvas/agentPresentation.js";
-import { verifyAndReconcileAgentDispatch } from "../agent/verification.js";
+import { captureHandoffOwner, getAgentDispatch, verifyAndReconcileAgentDispatch, } from "../agent/verification.js";
+import { clearSentItems, getSentItems, sentItemCount } from "../workspace/sentItems.js";
 import { getClipboardHandoffRevision, getLastClipboardReconciledCount, subscribeClipboardHandoff, } from "../prompt/clipboardHandoff.js";
-import { useSketches, settleSketchDispatch } from "../sketch/store.js";
-import { SketchLayersPanel } from "../sketch/SketchLayersPanel.js";
+import { removeSketch, useSketches, settleSketchDispatch } from "../sketch/store.js";
+import { SketchThumbnail } from "../sketch/SketchThumbnail.js";
+import { copySketchImageOnRequest } from "../sketch/copySketch.js";
+import { closeSketchNote } from "../sketch/sketchNote.js";
+import { IconButton } from "../ui/IconButton.js";
+import { showToast } from "../ui/Toast.js";
 import { isSendPromptShortcut, SEND_PROMPT_HOTKEY_EVENT } from "./shortcuts.js";
 import { getFocusedCardId, getSelectedCardId, useCanvasCards, useFocusedCardId, useSelectedCardId } from "../canvas/canvasStore.js";
 import { getEditableCardId, sketchBelongsToCard, useDrafts } from "../drafts/store.js";
@@ -47,7 +52,7 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
     const [preparing, setPreparing] = useState(false);
     const handoffBusy = useRef(false);
     const [saveMessage, setSaveMessage] = useState(null);
-    const [agentCompletionStatus, setAgentCompletionStatus] = useState(null);
+    const [agentOutcome, setAgentOutcome] = useState(null);
     const [sketchFallback, setSketchFallback] = useState(null);
     const [localSettingsOpen, setLocalSettingsOpen] = useState(false);
     const [localSettingsSection, setLocalSettingsSection] = useState("instructions");
@@ -85,6 +90,7 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
         if (agent.state !== "completed" || revision === undefined)
             return;
         let active = true;
+        const dispatch = getAgentDispatch(revision);
         void verifyAndReconcileAgentDispatch(revision)
             .then(async (removed) => {
             for (const [, iframe] of getRegisteredFrames()) {
@@ -99,7 +105,7 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             const latest = agentRef.current;
             if (latest.request?.changeRevision !== revision || latest.state !== "completed")
                 return;
-            setAgentCompletionStatus(removed > 0 ? "verified" : null);
+            setAgentOutcome({ removed, dispatch });
         })
             .catch(() => {
             if (!active)
@@ -107,7 +113,7 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             const latest = agentRef.current;
             if (latest.request?.changeRevision !== revision || latest.state !== "completed")
                 return;
-            setAgentCompletionStatus(null);
+            setAgentOutcome({ removed: 0, dispatch });
         });
         return () => {
             active = false;
@@ -120,16 +126,20 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
         void settleSketchDispatch(request.changeRevision, request.status, request.requestId, request.clientDispatchId).catch(() => undefined);
     }, [agent.request?.changeRevision, agent.request?.requestId, agent.request?.clientDispatchId, agent.request?.sketches, agent.request?.status]);
     const connecting = agent.state === "pairing";
+    const delivered = agent.state === "delivered" || agent.request?.status === "delivered";
     const working = agent.state === "working" || agent.request?.status === "working";
     const canConnect = agent.companionReachable
         && agent.listenerActive
         && !agent.paired
         && !connecting
-        && !working;
-    const canSend = agent.paired && agent.listenerActive && !working;
+        && !working
+        && !delivered;
+    const canSend = agent.paired && agent.listenerActive && !working && !delivered;
     const changeCount = countPromptChanges(changes, structuralChanges, canSend ? pendingSketches.length : 0) + comments.length;
-    const disabled = preparing || connecting || working || (!canConnect && !hasChanges);
-    const agentStatus = getAgentConnectionStatus(agent);
+    // The badge counts every pending sketch, including ones copied separately from the menu.
+    const badgeCount = countPromptChanges(changes, structuralChanges, pendingSketches.length) + comments.length;
+    const disabled = preparing || connecting || working || delivered || (!canConnect && !hasChanges);
+    const agentStatus = useAgentConnectionStatus(agent);
     const statusAction = agentStatus.action;
     const label = preparing
         ? "Saving iteration…"
@@ -137,18 +147,20 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             ? "Copied!"
             : connecting
                 ? "Connecting…"
-                : working
-                    ? "Agent working…"
-                    : canConnect && !activeArtifactId
-                        ? "Connect agent"
-                        : canSend && !activeArtifactId
-                            ? "Send prompt"
-                            : "Copy prompt";
+                : delivered
+                    ? "Awaiting agent…"
+                    : working
+                        ? "Agent working…"
+                        : canConnect && !activeArtifactId
+                            ? "Connect agent"
+                            : canSend && !activeArtifactId
+                                ? "Send prompt"
+                                : "Copy prompt";
     const icon = copied
         ? _jsx(IconCheck, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
         : !activeArtifactId && (canConnect || connecting)
             ? _jsx(IconPlugConnected, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
-            : !activeArtifactId && (canSend || working)
+            : !activeArtifactId && (canSend || working || delivered)
                 ? _jsx(IconSend, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
                 : _jsx(IconCopy, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" });
     async function onClick() {
@@ -227,7 +239,7 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             setSaveMessage(error instanceof Error ? error.message : "The HTML iteration could not be saved.");
             return;
         }
-        setAgentCompletionStatus(null);
+        setAgentOutcome(null);
         setSketchFallback(null);
         const outcome = await deliverHandoff(prepared, runtimeConfig.projectId, canSend ? agentClient : null);
         if (outcome.kind === "sketch-failed") {
@@ -238,6 +250,14 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             return;
         setCopied(true);
     }
+    const handoffOwner = captureHandoffOwner(activeDraftCardId);
+    const sentItems = getSentItems(handoffOwner.draftId, handoffOwner.target, agentOutcome?.dispatch ?? null);
+    const remainingCount = sentItemCount(sentItems);
+    const showImplemented = (agentOutcome?.removed ?? 0) > 0 || reconciledCount > 0
+        || (remainingCount > 0 && agentOutcome !== null);
+    function clearRemaining() {
+        clearSentItems(sentItems);
+    }
     useEffect(() => {
         function onKeydown(event) {
             if (!isSendPromptShortcut(event) || !canSend || !hasChanges || disabled)
@@ -284,8 +304,36 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
         }
         openMcpConnection();
     }
-    const promptButton = (_jsxs(Button, { variant: "primary", className: "copy-prompt__main", "data-test": "copy-prompt", type: "button", disabled: disabled, "data-copied": copied ? "true" : "false", "data-agent-state": agent.state, "aria-busy": preparing || working || connecting ? "true" : undefined, onClick: activeArtifactId ? undefined : onClick, children: [icon, label, changeCount > 0 ? (_jsx("span", { className: "copy-prompt__change-count", "data-test": "copy-prompt-change-count", children: changeCount })) : null, activeArtifactId ? _jsx(IconChevronDown, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) : null] }));
-    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [activeArtifactId ? (_jsxs(Menu.Root, { modal: false, children: [_jsx(Menu.Trigger, { render: promptButton }), _jsx(Menu.Portal, { container: portalContainer(), children: _jsx(Menu.Positioner, { className: "inspector-popover__positioner", side: "bottom", align: "start", sideOffset: 6, children: _jsxs(Menu.Popup, { className: "inspector-popover__popup copy-prompt__menu", "data-test": "copy-prompt-menu", children: [_jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-iteration-prompt", label: "Copy iteration prompt", onClick: () => void copyIterationPrompt("iteration"), children: [_jsx(IconArtboard, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: "Copy iteration prompt" }), _jsx("span", { className: "copy-prompt__menu-description", children: "Continue editing this HTML iteration." })] })] }), _jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-iteration-implementation", label: "Copy prompt for live app", onClick: () => void copyIterationPrompt("application"), children: [_jsx(IconBoltFilled, { className: "copy-prompt__menu-icon copy-prompt__menu-icon--live", size: "var(--icon-size-small)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: "Copy prompt for live app" }), _jsx("span", { className: "copy-prompt__menu-description", children: "Implement design in real app" })] })] })] }) }) })] }, activeDraftCardId)) : promptButton, _jsx(SketchLayersPanel, {}), statusAction || agentStatus.kind === "connected-not-listening" ? (_jsx(StatusCallout, { className: "copy-prompt__agent-status", tone: agentStatus.tone, "data-test": "agent-connection-status", children: _jsxs("div", { className: "copy-prompt__agent-status-content", children: [_jsx("span", { role: "status", children: agentStatus.label }), statusAction ? (_jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: () => void handleAgentStatusAction(), children: statusAction.label })) : null] }) })) : null, reconciledCount > 0 ? (_jsxs("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "clipboard-reconciled-hint", role: "status", children: [reconciledCount, " Implemented changes"] })) : null, saveMessage ? (_jsx("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "iteration-save-hint", role: "status", children: saveMessage })) : null, agentCompletionStatus === "verified" ? (_jsx("p", { className: "copy-prompt__hint copy-prompt__hint--centered copy-prompt__hint--implemented", "data-test": "agent-verified-hint", role: "status", children: "Changes implemented" })) : null, sketchFallback ? (_jsxs(StatusCallout, { className: "copy-prompt__sketch-fallback", tone: "warning", "data-test": "sketch-dispatch-error", children: [_jsx("span", { children: sketchFallback.error }), _jsx(Button, { size: "compact", variant: "secondary", type: "button", "data-test": "sketch-copy-fallback", onClick: () => {
-                            void copyHandoff(sketchFallback.handoff).then(() => setSketchFallback(null)).catch(() => undefined);
+    async function deleteSketch(sketchId) {
+        try {
+            if (!await removeSketch(sketchId)) {
+                showToast({ tone: "error", title: "Sketch not deleted", description: "This sketch is being sent and cannot be deleted yet." });
+                return;
+            }
+            closeSketchNote();
+        }
+        catch (error) {
+            showToast({ tone: "error", title: "Sketch not deleted", description: error instanceof Error ? error.message : "The sketch could not be deleted." });
+        }
+    }
+    const hasMenu = Boolean(activeArtifactId) || visibleSketches.length > 0;
+    const styleEditLabel = canConnect ? "Connect agent" : canSend ? "Send style edit prompt" : "Copy style edit prompt";
+    const styleEditDescription = canConnect
+        ? "Pair an agent first"
+        : canSend
+            ? "Send to the connected agent"
+            : "Edits made in the inspector";
+    const promptButton = (_jsxs(Button, { variant: "primary", className: "copy-prompt__main", "data-test": "copy-prompt", type: "button", disabled: disabled, "data-copied": copied ? "true" : "false", "data-agent-state": agent.state, "aria-busy": preparing || working || connecting ? "true" : undefined, onClick: hasMenu ? undefined : onClick, children: [icon, label, badgeCount > 0 ? (_jsx("span", { className: "copy-prompt__change-count", "data-test": "copy-prompt-change-count", children: badgeCount })) : null, hasMenu ? _jsx(IconChevronDown, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) : null] }));
+    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [hasMenu ? (_jsxs(Menu.Root, { modal: false, children: [_jsx(Menu.Trigger, { render: promptButton }), _jsx(Menu.Portal, { container: portalContainer(), children: _jsx(Menu.Positioner, { className: "inspector-popover__positioner", side: "bottom", align: "start", sideOffset: 6, children: _jsxs(Menu.Popup, { className: "inspector-popover__popup copy-prompt__menu", "data-test": "copy-prompt-menu", children: [activeArtifactId ? (_jsxs(_Fragment, { children: [_jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-iteration-prompt", label: "Copy iteration prompt", onClick: () => void copyIterationPrompt("iteration"), children: [_jsx(IconArtboard, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: "Copy iteration prompt" }), _jsx("span", { className: "copy-prompt__menu-description", children: "Continue editing this HTML iteration." })] })] }), _jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-iteration-implementation", label: "Copy prompt for live app", onClick: () => void copyIterationPrompt("application"), children: [_jsx(IconBoltFilled, { className: "copy-prompt__menu-icon copy-prompt__menu-icon--live", size: "var(--icon-size-small)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: "Copy prompt for live app" }), _jsx("span", { className: "copy-prompt__menu-description", children: "Implement design in real app" })] })] })] })) : (_jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-style-edit-prompt", label: styleEditLabel, disabled: !canConnect && changeCount === 0, onClick: () => void onClick(), children: [canConnect
+                                                ? _jsx(IconPlugConnected, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" })
+                                                : canSend
+                                                    ? _jsx(IconSend, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" })
+                                                    : _jsx(IconPencil, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: styleEditLabel }), _jsx("span", { className: "copy-prompt__menu-description", children: styleEditDescription })] })] })), visibleSketches.length > 0 ? _jsx(Menu.Separator, { className: "copy-prompt__menu-separator" }) : null, visibleSketches.map((item, index) => {
+                                        const busy = item.status === "dispatching" || item.status === "handing-off";
+                                        return (_jsxs("div", { className: "copy-prompt__menu-row", children: [_jsxs(Menu.Item, { className: "copy-prompt__menu-item copy-prompt__menu-item--sketch", "data-test": "copy-sketch", "data-sketch-id": item.document.id, label: `Copy Sketch ${index + 1}`, disabled: busy, onClick: () => void copySketchImageOnRequest(item.document.annotatedImage), children: [_jsx(SketchThumbnail, { item: item }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsxs("span", { className: "copy-prompt__menu-title", children: ["Copy Sketch ", index + 1] }), item.document.description ? (_jsx("span", { className: "copy-prompt__menu-description copy-prompt__menu-description--truncate", children: item.document.description })) : null] })] }), _jsx(IconButton, { className: "copy-prompt__menu-delete", variant: "quiet", size: "compact", label: `Delete Sketch ${index + 1}`, "data-test": "copy-sketch-delete", disabled: busy, onClick: () => void deleteSketch(item.document.id), children: _jsx(IconX, { size: "var(--icon-size-small)", "aria-hidden": "true" }) })] }, item.document.id));
+                                    })] }) }) })] }, activeDraftCardId)) : promptButton, statusAction || agentStatus.kind === "connected-not-listening" ? (_jsx(StatusCallout, { className: "copy-prompt__agent-status", tone: agentStatus.tone, "data-test": "agent-connection-status", children: _jsxs("div", { className: "copy-prompt__agent-status-content", children: [_jsx("span", { role: "status", children: agentStatus.label }), statusAction ? (_jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: () => void handleAgentStatusAction(), children: statusAction.label })) : null] }) })) : null, showImplemented ? (_jsxs("p", { className: "copy-prompt__hint copy-prompt__hint--centered copy-prompt__hint--implemented", "data-test": "handoff-implemented-hint", role: "status", children: ["Changes implemented.", remainingCount > 0 ? (_jsxs(_Fragment, { children: [" ", _jsx("button", { type: "button", className: "copy-prompt__hint-action", "data-test": "handoff-clear-remaining", onClick: clearRemaining, children: "Clear stale edits" })] })) : null] })) : null, saveMessage ? (_jsx("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "iteration-save-hint", role: "status", children: saveMessage })) : null, sketchFallback ? (_jsxs(StatusCallout, { className: "copy-prompt__sketch-fallback", tone: "warning", "data-test": "sketch-dispatch-error", children: [_jsx("span", { children: sketchFallback.error }), _jsx(Button, { size: "compact", variant: "secondary", type: "button", "data-test": "sketch-copy-fallback", onClick: () => {
+                            void copyHandoff(sketchFallback.handoff).then(() => {
+                                setSketchFallback(null);
+                            }).catch(() => undefined);
                         }, children: "Copy prompt" })] })) : null, _jsx(SettingsDialog, { open: settingsOpen, initialSection: settingsSection, value: customInstructions, onValueChange: handleCustomInstructionsChange, onOpenChange: setSettingsOpen, projectId: runtimeConfig.projectId, origin: window.location.origin, snapshot: agent, onConnect: () => agentClient.connect(), onTakeOver: () => agentClient.takeOver(), onDisconnect: () => agentClient.disconnect(), onCheckAgain: () => agentClient.checkConnection() })] }));
 }

package/dist/inspector/shell/EmptyState.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { IconArtboard, IconBoltFilled, IconSparkles } from "@tabler/icons-react";
 import { useCanvasPresentation } from "../canvas/viewStore.js";
 import { Disclosure } from "../ui/Disclosure.js";
-import gridIllustration from "../ui/assets/grid.svg";
+import { CANVAS_ILLUSTRATION_SVG } from "../ui/assets/canvasIllustration.js";
+import { GRID_ILLUSTRATION_SVG } from "../ui/assets/gridIllustration.js";
 import { getPlatformModifierKey, isMacPlatform } from "./shortcuts.js";
 export function EmptyState() {
     const presentation = useCanvasPresentation();
@@ -12,5 +12,5 @@ export function EmptyState() {
     const modifierName = macPlatform ? "Command" : "Control";
     const optionKey = macPlatform ? "⌥" : "Alt";
     const optionName = macPlatform ? "Option" : "Alt";
-    return (_jsxs("div", { className: `empty-state${canvas ? " empty-state--canvas" : ""}`, "data-test": "empty-state", children: [canvas ? (_jsxs("div", { className: "empty-state__canvas", "data-test": "canvas-intro", children: [_jsx("h2", { className: "empty-state__title", children: "Using the canvas" }), _jsxs("p", { children: [_jsx("span", { className: "empty-state__live-badge", children: _jsx(IconBoltFilled, { "aria-hidden": "true" }) }), _jsxs("span", { children: [_jsx("strong", { children: "Live app" }), "A view of your real running app"] })] }), _jsxs("p", { children: [_jsx(IconArtboard, { "aria-hidden": "true" }), _jsxs("span", { children: [_jsx("strong", { children: "HTML iterations" }), "Unlinked from live app for isolated changes. Ask your agent to implement in live app once ready."] })] }), _jsxs("p", { children: [_jsx(IconSparkles, { "aria-hidden": "true" }), _jsxs("span", { children: [_jsx("strong", { children: "Agent with MCP" }), "Ask your agent to: lay out flows, show page states and create iterations."] })] })] })) : (_jsxs(_Fragment, { children: [_jsx("img", { className: "empty-state__icon", src: gridIllustration, alt: "", "aria-hidden": "true" }), _jsx("h2", { className: "empty-state__title", children: "Select an element to edit" })] })), _jsx(Disclosure, { className: "empty-state__shortcuts", title: "Keyboard shortcuts", triggerDataTest: "empty-state-shortcuts-toggle", defaultOpen: !canvas, children: _jsxs("ul", { className: "empty-state__shortcut-list", children: [_jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Nudge" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": "Arrow keys", children: [_jsx("kbd", { children: "\u2191" }), _jsx("kbd", { children: "\u2193" }), _jsx("kbd", { children: "\u2190" }), _jsx("kbd", { children: "\u2192" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Big Nudge (8px)" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": "Shift plus arrow keys", children: [_jsx("kbd", { children: "Shift" }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Arrow" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Select deeper" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus click`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Click" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Measure" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${optionName} plus hover`, children: [_jsx("kbd", { children: optionKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Hover" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Hide UI" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus backslash`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "\\" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Hold to view original" }), _jsx("span", { className: "empty-state__shortcut-keys", "aria-label": "Backslash", children: _jsx("kbd", { children: "\\" }) })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Undo" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus Z`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Z" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Deselect" }), _jsx("span", { className: "empty-state__shortcut-keys", children: _jsx("kbd", { children: "Esc" }) })] })] }) }, presentation)] }));
+    return (_jsxs("div", { className: "empty-state", "data-test": "empty-state", children: [canvas ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "empty-state__icon", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: CANVAS_ILLUSTRATION_SVG } }), _jsxs("p", { className: "empty-state__hint", "data-test": "canvas-intro", children: ["Hold ", _jsx("kbd", { children: "A" }), " to click links and open them as new pages on the canvas."] })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "empty-state__icon", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: GRID_ILLUSTRATION_SVG } }), _jsx("h2", { className: "empty-state__title", children: "Select an element to edit" })] })), _jsx(Disclosure, { className: "empty-state__shortcuts", title: "Keyboard shortcuts", triggerDataTest: "empty-state-shortcuts-toggle", defaultOpen: true, children: _jsxs("ul", { className: "empty-state__shortcut-list", children: [_jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Nudge" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": "Arrow keys", children: [_jsx("kbd", { children: "\u2191" }), _jsx("kbd", { children: "\u2193" }), _jsx("kbd", { children: "\u2190" }), _jsx("kbd", { children: "\u2192" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Big Nudge (8px)" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": "Shift plus arrow keys", children: [_jsx("kbd", { children: "Shift" }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Arrow" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Select deeper" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus click`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Click" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Measure" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${optionName} plus hover`, children: [_jsx("kbd", { children: optionKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Hover" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Hide UI" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus backslash`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "\\" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Hold to view original" }), _jsx("span", { className: "empty-state__shortcut-keys", "aria-label": "Backslash", children: _jsx("kbd", { children: "\\" }) })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Undo" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus Z`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Z" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Deselect" }), _jsx("span", { className: "empty-state__shortcut-keys", children: _jsx("kbd", { children: "Esc" }) })] })] }) }, presentation)] }));
 }

package/dist/inspector/shell/InspectorShell.d.ts

@@ -1,10 +1,7 @@
 import type { ReactElement } from "react";
-import { toggleInspector, setInspectorOpen } from "./openStore.js";
 declare global {
     interface Window {
         MutationObserver: typeof MutationObserver;
     }
 }
-export { toggleInspector, setInspectorOpen };
-export type { SelectedElement } from "../selection/selectionStore.js";
 export declare function InspectorShell(): ReactElement;

package/dist/inspector/shell/InspectorShell.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { IconLayoutSidebarRight } from "@tabler/icons-react";
-import { useInspectorOpen, toggleInspector, setInspectorOpen } from "./openStore.js";
+import { useInspectorOpen, setInspectorOpen } from "./openStore.js";
 import { useSelectedElement, useSelectedElements, setSelectedElement, removeSelectedElement, } from "../selection/selectionStore.js";
 import { findTokenRow } from "../styleEditors/rowLookup.js";
 import { useBrowserCssInspection } from "../inspection/useBrowserCssInspection.js";
@@ -17,7 +17,7 @@ import { AppearanceSection } from "../styleEditors/AppearanceSection.js";
 import { BoxShadowEditor } from "../styleEditors/BoxShadowEditor.js";
 import { LayoutSection } from "../styleEditors/LayoutSection.js";
 import { ChangesLog } from "./ChangesLog.js";
-import { discardChangesForInstanceOverride, undo, redo } from "../changes/changesLog.js";
+import { discardChangesForInstanceOverride, undo, redo } from "../drafts/store.js";
 import { countSourceSiteMatches, getEditScope, relinkElement, sourceSiteSelector, unlinkElement } from "../selection/editScope.js";
 import { canEditStyles } from "../tokens/editActions.js";
 import { Button } from "../ui/Button.js";
@@ -27,6 +27,7 @@ import { StatusCallout } from "../ui/StatusCallout.js";
 import { IconButton } from "../ui/IconButton.js";
 import { UI_STYLES } from "../ui/styles.js";
 import { getActiveStyleState, setActiveStyleState } from "./styleState.js";
+import { useInteractionStatePreview } from "./interactionStatePreview.js";
 import { getInspectorToggleShortcutLabel, isEditableEvent } from "./shortcuts.js";
 import { formatInspectorLabel } from "../ui/labels.js";
 import { FieldRow } from "../ui/FieldRow.js";
@@ -34,6 +35,8 @@ import { Select } from "../ui/Select.js";
 import { clearSelectedFrameChanges } from "../canvas/sessionStore.js";
 import { useFocusedCardId, useSelectedCardId, } from "../canvas/canvasStore.js";
 import { getActiveCanvasFrame } from "../canvas/activeCanvasDocument.js";
+import { canvasFrameHost } from "../canvas/canvasFrame.js";
+import { getFrameRegistryVersion, subscribeFrameRegistry } from "../canvas/projection.js";
 import { getElementWindow } from "../runtime/domRealm.js";
 import { deleteElement, nudgeElement } from "../overlay/structuralGestures.js";
 import { AtRuleContextProvider } from "../ui/AtRuleContext.js";
@@ -45,10 +48,11 @@ import { EmptyState } from "./EmptyState.js";
 import { createStyleSelection } from "../selection/styleSelection.js";
 import { intersectTokenEntries } from "../inspection/selectionProperty.js";
 import { isNudgeUiDev } from "../runtime/devFlag.js";
-import { isDemoRuntime } from "../runtime/runtimeConfig.js";
+import { isDemoRuntime, isNudgeUiFeatureEnabled } from "../runtime/runtimeConfig.js";
 import { SketchWorkspace } from "../sketch/SketchWorkspace.js";
 import { useSketchInteractionActive } from "../sketch/interaction.js";
 import { Tooltip } from "../ui/Tooltip.js";
+import { InspectorStyle } from "../ui/InspectorStyle.js";
 function findFirstTokenRow(rows, properties) {
     for (const property of properties) {
         const row = findTokenRow(rows, property);
@@ -62,7 +66,6 @@ function findFirstTokenRow(rows, properties) {
     }
     return null;
 }
-export { toggleInspector, setInspectorOpen };
 function nodeMatchesSelector(node, selector) {
     if (!selector || node.nodeType !== node.ELEMENT_NODE)
         return false;
@@ -88,11 +91,14 @@ function scopeMutationAffectsSelection(records, selected) {
 export function InspectorShell() {
     const isOpen = useInspectorOpen();
     const runtimeConfig = useNudgeUiRuntimeConfig();
-    const sketchEnabled = isNudgeUiDev() && !isDemoRuntime();
+    const sketchEnabled = isNudgeUiDev()
+        && !runtimeConfig.inspectionUnavailableReason
+        && (!isDemoRuntime() || isNudgeUiFeatureEnabled(runtimeConfig.features, "sketch"));
     const sketchActive = useSketchInteractionActive();
     const selectedCardId = useSelectedCardId();
     const focusedCardId = useFocusedCardId();
-    const sketchHost = selectedCardId || focusedCardId ? getActiveCanvasFrame() : null;
+    useSyncExternalStore(subscribeFrameRegistry, getFrameRegistryVersion);
+    const sketchHost = selectedCardId || focusedCardId ? canvasFrameHost(getActiveCanvasFrame()) : null;
     const selected = useSelectedElement();
     const selectedElements = useSelectedElements();
     const inlineTextFeedback = getInlineTextFeedback(useInlineTextDiagnostic());
@@ -100,6 +106,7 @@ export function InspectorShell() {
     const [settingsSection, setSettingsSection] = useState("instructions");
     const [scopeRevision, refreshScope] = useState(0);
     const [styleState, setStyleState] = useState(getActiveStyleState());
+    useInteractionStatePreview(selectedElements.length === 1 ? selectedElements[0].domElement : null, styleState);
     const cssInspection = useBrowserCssInspection(selectedElements, styleState);
     const isMultiSelection = selectedElements.length > 1;
     useEffect(() => {
@@ -144,7 +151,7 @@ export function InspectorShell() {
         return () => observers.forEach((observer) => observer.disconnect());
     }, [selectedElements, scopeRevision]);
     useEffect(() => {
-        if (sketchActive)
+        if (sketchActive || runtimeConfig.inspectionUnavailableReason)
             return;
         function onKeydown(event) {
             if (isInlineTextEditingActive())
@@ -197,7 +204,7 @@ export function InspectorShell() {
         }
         window.addEventListener("keydown", onKeydown);
         return () => window.removeEventListener("keydown", onKeydown);
-    }, [isMultiSelection, selected, sketchActive]);
+    }, [isMultiSelection, selected, sketchActive, runtimeConfig.inspectionUnavailableReason]);
     const inspectionSnapshot = cssInspection.element;
     const styleSelection = useMemo(() => createStyleSelection(selectedElements, cssInspection.elements, selected), [cssInspection.elements, selected, selectedElements]);
     const selectionEditable = useMemo(() => styleSelection ? canEditStyles(styleSelection.target) : false, [scopeRevision, styleSelection]);
@@ -205,7 +212,7 @@ export function InspectorShell() {
     const tokenRows = useMemo(() => styleSelection ? [...styleSelection.primaryRows] : [], [styleSelection]);
     const availableInteractionStates = inspectionSnapshot?.availableStates ?? [];
     const showText = selectedElements.length > 0 && selectedElements.every((element, index) => isTextRelevant(element.domElement, cssInspection.elements[index]?.properties ?? []));
-    const showInteractionState = !isMultiSelection && availableInteractionStates.length > 2;
+    const showInteractionState = !isMultiSelection && availableInteractionStates.length > 1;
     const paintedBackgroundRow = findFirstTokenRow(tokenRows, ["background-color", "background"]);
     const backgroundTokenRow = useMemo(() => {
         if (!selected)
@@ -230,12 +237,13 @@ export function InspectorShell() {
         setSettingsOpen(true);
     }
     function clearInspectorSession() {
-        clearSelectedFrameChanges();
+        // Sketch persistence failures are reported by the sketch store in the panel.
+        void clearSelectedFrameChanges().catch(() => undefined);
     }
-    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "inspector-styles", children: UI_STYLES }), _jsxs("div", { className: "panel", "data-open": isOpen ? "true" : "false", children: [_jsxs("div", { className: "panel__tabs", "aria-label": "Inspector controls", children: [_jsxs("div", { className: "panel__header-row", "data-test": "inspect-tab", children: [_jsx(Tooltip, { content: "Hide inspector", shortcut: getInspectorToggleShortcutLabel(), stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", label: "Collapse inspector", "data-test": "collapse-inspector", disabled: sketchActive, style: { marginLeft: "calc(var(--space-8) * -1)" }, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(InspectorStyle, { testId: "inspector-styles", css: UI_STYLES }), _jsxs("div", { className: "panel", "data-open": isOpen ? "true" : "false", children: [_jsxs("div", { className: "panel__tabs", "aria-label": "Inspector controls", children: [_jsxs("div", { className: "panel__header-row", "data-test": "inspect-tab", children: [_jsx(Tooltip, { content: "Hide inspector", shortcut: getInspectorToggleShortcutLabel(), stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", label: "Collapse inspector", "data-test": "collapse-inspector", disabled: sketchActive, style: { marginLeft: "calc(var(--space-8) * -1)" }, onClick: () => {
                                                 cancelInlineTextEdit();
                                                 setInspectorOpen(false);
-                                            }, children: _jsx(IconLayoutSidebarRight, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }) }), _jsxs("div", { className: "panel__header-actions", children: [_jsx(PeekOriginalButton, {}), _jsx(AgentStatusButton, { onOpenSettings: openSettings })] })] }), _jsx("div", { className: "panel__copy-row", children: _jsx(CopyPromptButton, { settingsOpen: settingsOpen, settingsSection: settingsSection, onOpenSettings: openSettings, onSettingsOpenChange: setSettingsOpen }) })] }), _jsxs("div", { className: "panel__body", children: [inlineTextFeedback ? (_jsx(StatusCallout, { tone: "danger", className: "inline-text-diagnostic", "data-test": "inline-text-diagnostic", role: "status", "aria-live": "polite", "aria-atomic": "true", children: _jsx("span", { children: inlineTextFeedback.message }) })) : null, selected ? (_jsxs(_Fragment, { children: [isMultiSelection || showInteractionState || hasEditScopeCallout ? (_jsxs("div", { className: `selection${hasEditScopeCallout ? "" : " selection--without-scope-callout"}`, "data-test": "selection", "data-selected-cid": selected.cid, "data-selected-src": selected.src, "data-selected-count": selectedElements.length, children: [isMultiSelection ? (_jsx("div", { className: "selection__summary", "data-test": "multi-selection-summary", children: _jsxs("span", { className: "selection__count", children: [selectedElements.length, " elements selected"] }) })) : null, hasEditScopeCallout ? (_jsx(StatusCallout, { tone: editScope === "rendered-instance" ? "neutral" : "accent", "data-test": "edit-scope", "data-lost": "false", children: editScope === "rendered-instance" ? (_jsxs("div", { className: "scope__unlinked", children: [_jsx("span", { children: "Element unlinked" }), _jsx(Button, { size: "compact", className: "scope__action", "data-test": "relink-element", onClick: () => {
+                                            }, children: _jsx(IconLayoutSidebarRight, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }) }), _jsxs("div", { className: "panel__header-actions", children: [_jsx(PeekOriginalButton, {}), _jsx(AgentStatusButton, { onOpenSettings: openSettings })] })] }), _jsx("div", { className: "panel__copy-row", children: _jsx(CopyPromptButton, { settingsOpen: settingsOpen, settingsSection: settingsSection, onOpenSettings: openSettings, onSettingsOpenChange: setSettingsOpen }) })] }), _jsxs("div", { className: "panel__body", children: [inlineTextFeedback ? (_jsx(StatusCallout, { tone: "danger", className: "inline-text-diagnostic", "data-test": "inline-text-diagnostic", role: "status", "aria-live": "polite", "aria-atomic": "true", children: _jsx("span", { children: inlineTextFeedback.message }) })) : null, runtimeConfig.inspectionUnavailableReason ? (_jsxs(StatusCallout, { tone: "danger", "data-test": "page-inspection-error", role: "status", children: ["Can\u2019t load Nudge on this page due to ", runtimeConfig.inspectionUnavailableReason, "."] })) : selected ? (_jsxs(_Fragment, { children: [showInteractionState || hasEditScopeCallout ? (_jsxs("div", { className: `selection${hasEditScopeCallout ? "" : " selection--without-scope-callout"}`, "data-test": "selection", "data-selected-cid": selected.cid, "data-selected-src": selected.src, "data-selected-count": selectedElements.length, children: [hasEditScopeCallout ? (_jsx(StatusCallout, { tone: editScope === "rendered-instance" ? "neutral" : "accent", "data-test": "edit-scope", "data-lost": "false", children: editScope === "rendered-instance" ? (_jsxs("div", { className: "scope__unlinked", children: [_jsx("span", { children: "Element unlinked" }), _jsx(Button, { size: "compact", className: "scope__action", "data-test": "relink-element", onClick: () => {
                                                                 const overrideId = relinkElement(selected.domElement);
                                                                 if (overrideId)
                                                                     discardChangesForInstanceOverride(overrideId);

package/dist/inspector/shell/PeekOriginalButton.js

@@ -3,11 +3,11 @@ import { useEffect, useSyncExternalStore } from "react";
 import { IconButton } from "../ui/IconButton.js";
 import { Tooltip } from "../ui/Tooltip.js";
 import { PeekOriginalIcon } from "./PeekOriginalIcon.js";
-import { draftChangeStore } from "../changes/draftChanges.js";
+import { getActiveDraftChanges, subscribeActiveDraftChanges } from "../drafts/store.js";
 import { setOriginalPreviewActive, useOriginalPreviewActive, } from "./originalPreview.js";
 function useDraftChangeCount() {
-    return useSyncExternalStore(draftChangeStore.subscribe, () => {
-        const snapshot = draftChangeStore.getSnapshot();
+    return useSyncExternalStore(subscribeActiveDraftChanges, () => {
+        const snapshot = getActiveDraftChanges();
         return snapshot.changes.length + snapshot.structuralChanges.length;
     }, () => 0);
 }

package/dist/inspector/shell/interactionStatePreview.d.ts

@@ -0,0 +1,9 @@
+import { type InteractionState } from "./styleState.js";
+/** Matches native interaction states and the Inspector's temporary CSS state. */
+export declare function selectorForInteractionStatePreview(selector: string): string;
+/**
+ * Projects CSS interaction states into the selected element's document.
+ * This previews styles without dispatching events or changing application state.
+ */
+export declare function startInteractionStatePreview(element: HTMLElement, state: InteractionState): () => void;
+export declare function useInteractionStatePreview(element: HTMLElement | null, state: InteractionState): void;