nudge-ui 0.2.0 → 0.2.1

package/dist/inspector/shell/CopyPromptButton.js

@@ -13,16 +13,22 @@ import { getStructuralChanges, subscribeStructuralChanges } from "../projection/
 import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
 import { createPromptRevision, getAgentClient, useAgentClient, } from "../agent/client.js";
 import { createAgentPresentationAdapter } from "../canvas/agentPresentation.js";
-import { discardAgentDispatch, getAgentDispatchSize, recordAgentDispatch, verifyAndReconcileAgentDispatch, } from "../agent/verification.js";
+import { discardAgentDispatch, recordAgentDispatch, verifyAndReconcileAgentDispatch, } from "../agent/verification.js";
 import { getClipboardHandoffRevision, getLastClipboardReconciledCount, recordClipboardHandoff, subscribeClipboardHandoff, } from "../prompt/clipboardHandoff.js";
+import { useSketches, markSketchesDispatching, markSketchesHandingOff, settleSketchDispatch } from "../sketch/store.js";
+import { createSketchAttachments, createSketchHandoffSnapshot, sketchMetadataForHandoff, } from "../sketch/handoff.js";
+import { SketchLayersPanel } from "../sketch/SketchLayersPanel.js";
+import { isSendPromptShortcut, SEND_PROMPT_HOTKEY_EVENT } from "./shortcuts.js";
 export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, settingsSection: controlledSettingsSection, onOpenSettings, onSettingsOpenChange, } = {}) {
     const changes = useChanges();
+    const sketches = useSketches();
+    const pendingSketches = sketches.filter((item) => item.status === "pending");
     const structuralChanges = useSyncExternalStore(subscribeStructuralChanges, getStructuralChanges, getStructuralChanges);
     useSyncExternalStore(subscribeClipboardHandoff, getClipboardHandoffRevision, getClipboardHandoffRevision);
     const reconciledCount = getLastClipboardReconciledCount();
     const [copied, setCopied] = useState(false);
     const [agentCompletionStatus, setAgentCompletionStatus] = useState(null);
-    const [agentCompletionSent, setAgentCompletionSent] = useState(0);
+    const [sketchFallback, setSketchFallback] = useState(null);
     const [localSettingsOpen, setLocalSettingsOpen] = useState(false);
     const [localSettingsSection, setLocalSettingsSection] = useState("instructions");
     const settingsOpen = controlledSettingsOpen ?? localSettingsOpen;
@@ -33,7 +39,8 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
     const agent = useAgentClient(runtimeConfig.projectId, agentClient);
     const agentRef = useRef(agent);
     agentRef.current = agent;
-    const hasChanges = changes.length + structuralChanges.length > 0;
+    const hasChanges = changes.length + structuralChanges.length + pendingSketches.length > 0;
+    const changeCount = changes.length + structuralChanges.length + sketches.length;
     useEffect(() => {
         setCustomInstructions(loadCustomInstructions(runtimeConfig.projectId));
     }, [runtimeConfig.projectId]);
@@ -52,7 +59,6 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
         const revision = agent.request?.changeRevision;
         if (agent.state !== "completed" || revision === undefined)
             return;
-        const sent = getAgentDispatchSize(revision);
         let active = true;
         void verifyAndReconcileAgentDispatch(revision)
             .then((removed) => {
@@ -61,8 +67,7 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             const latest = agentRef.current;
             if (latest.request?.changeRevision !== revision || latest.state !== "completed")
                 return;
-            setAgentCompletionSent(sent);
-            setAgentCompletionStatus(removed > 0 ? "verified" : "completed");
+            setAgentCompletionStatus(removed > 0 ? "verified" : null);
         })
             .catch(() => {
             if (!active)
@@ -70,13 +75,18 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             const latest = agentRef.current;
             if (latest.request?.changeRevision !== revision || latest.state !== "completed")
                 return;
-            setAgentCompletionSent(sent);
-            setAgentCompletionStatus("completed");
+            setAgentCompletionStatus(null);
         });
         return () => {
             active = false;
         };
     }, [agent.request?.changeRevision, agent.state]);
+    useEffect(() => {
+        const request = agent.request;
+        if (!request?.sketches || request.sketches.length === 0)
+            return;
+        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 working = agent.state === "working" || agent.request?.status === "working";
     const canConnect = agent.companionReachable
@@ -105,7 +115,7 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             ? _jsx(IconPlugConnected, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
             : canSend || working
                 ? _jsx(IconSend, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
-                : _jsx(IconCopy, { 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() {
         if (disabled)
             return;
@@ -117,22 +127,83 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             framework: runtimeConfig.framework,
             stylingSystem: runtimeConfig.stylingSystem,
         };
-        const text = generatePrompt(changes, hints, structuralChanges, customInstructions);
+        const sketchHandoff = createSketchHandoffSnapshot(pendingSketches);
+        const sketchMetadata = sketchHandoff ? sketchMetadataForHandoff(sketchHandoff) : [];
+        const text = generatePrompt(changes, hints, structuralChanges, customInstructions, sketchMetadata);
         setAgentCompletionStatus(null);
-        setAgentCompletionSent(0);
+        setSketchFallback(null);
         if (canSend) {
-            const revision = createPromptRevision(changes, structuralChanges);
+            const revision = createPromptRevision(changes, structuralChanges, sketchMetadata);
             recordAgentDispatch(revision, changes, structuralChanges);
-            const response = await agentClient.dispatchPrompt(text, revision);
-            if (response)
-                return;
+            const clientDispatchId = sketchHandoff?.localBatchId ?? `dispatch-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+            let attachments = undefined;
+            try {
+                if (sketchHandoff) {
+                    await markSketchesDispatching(sketchHandoff.entries.map((entry) => ({ id: entry.id, revision: entry.revision })), revision, sketchHandoff.localBatchId);
+                    attachments = await createSketchAttachments(sketchHandoff);
+                }
+                const response = await agentClient.dispatchPrompt(text, revision, {
+                    clientDispatchId,
+                    ...(attachments === undefined ? {} : { attachments }),
+                });
+                if (response) {
+                    if (sketchHandoff) {
+                        await markSketchesHandingOff(sketchHandoff.entries.map((entry) => ({ id: entry.id, revision: entry.revision })), revision, sketchHandoff.localBatchId, response.request.requestId);
+                    }
+                    return;
+                }
+                if (sketchHandoff) {
+                    await settleSketchDispatch(revision, "failed", undefined, sketchHandoff.localBatchId);
+                    discardAgentDispatch(revision);
+                    const latestAgent = agentClient.getSnapshot();
+                    setSketchFallback({
+                        prompt: text,
+                        error: latestAgent.request?.error
+                            ?? latestAgent.error
+                            ?? "The agent did not accept the sketch attachments.",
+                    });
+                    return;
+                }
+            }
+            catch (error) {
+                discardAgentDispatch(revision);
+                if (sketchHandoff) {
+                    await settleSketchDispatch(revision, "failed", undefined, sketchHandoff.localBatchId).catch(() => undefined);
+                    setSketchFallback({
+                        prompt: text,
+                        error: error instanceof Error ? error.message : "The sketch could not be sent to the agent.",
+                    });
+                    return;
+                }
+            }
             discardAgentDispatch(revision);
         }
         await copyToClipboard(text);
-        recordClipboardHandoff(changes, structuralChanges);
+        if (changes.length > 0 || structuralChanges.length > 0) {
+            recordClipboardHandoff(changes, structuralChanges);
+        }
         setCopied(true);
         window.setTimeout(() => setCopied(false), 1500);
     }
+    useEffect(() => {
+        function onKeydown(event) {
+            if (!isSendPromptShortcut(event) || !canSend || !hasChanges || disabled)
+                return;
+            event.preventDefault();
+            void onClick();
+        }
+        function onRendererHotkey() {
+            if (!canSend || !hasChanges || disabled)
+                return;
+            void onClick();
+        }
+        window.addEventListener("keydown", onKeydown, true);
+        window.addEventListener(SEND_PROMPT_HOTKEY_EVENT, onRendererHotkey);
+        return () => {
+            window.removeEventListener("keydown", onKeydown, true);
+            window.removeEventListener(SEND_PROMPT_HOTKEY_EVENT, onRendererHotkey);
+        };
+    }, [canSend, disabled, hasChanges, onClick]);
     function handleCustomInstructionsChange(value) {
         setCustomInstructions(value);
         saveCustomInstructions(runtimeConfig.projectId, value);
@@ -153,7 +224,12 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
     function openMcpConnection() {
         openSettings("mcp");
     }
-    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [_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": working || connecting ? "true" : undefined, title: agent.error, onClick: onClick, children: [icon, label] }), statusAction ? (_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 }), _jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: openMcpConnection, children: statusAction.label })] }) })) : agentStatus.kind === "listening" ? (_jsxs("div", { className: "copy-prompt__agent-status copy-prompt__agent-status--listening", "data-test": "agent-connection-status", role: "status", children: [_jsx(IconCheck, { size: "var(--icon-size-small)", stroke: 2, "aria-hidden": "true" }), _jsx("span", { children: agentStatus.label })] })) : null, reconciledCount > 0 ? (_jsxs("p", { className: "copy-prompt__hint", "data-test": "clipboard-reconciled-hint", role: "status", children: ["Removed ", reconciledCount, " implemented ", reconciledCount === 1 ? "change" : "changes", " from the next prompt."] })) : null, agentCompletionStatus === "verified" ? (_jsx("p", { className: "copy-prompt__hint", "data-test": "agent-verified-hint", role: "status", children: "Agent changes verified." })) : agentCompletionStatus === "completed" ? (_jsx("p", { className: "copy-prompt__hint", "data-test": "agent-completed-hint", role: "status", children: agentCompletionSent > 0
-                    ? "Agent completed. Remaining edits were preserved because they were not verified."
-                    : "Agent completed." })) : 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(), onDisconnect: () => agentClient.disconnect(), onCheckAgain: () => agentClient.checkConnection() })] }));
+    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [_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, "data-agent-listening": agentStatus.kind === "listening" ? "true" : undefined, "aria-busy": working || connecting ? "true" : undefined, title: agent.error, onClick: onClick, children: [icon, label, changeCount > 0 ? (_jsx("span", { className: "copy-prompt__change-count", "data-test": "copy-prompt-change-count", children: changeCount })) : null, agentStatus.kind === "listening" ? (_jsx("span", { className: "copy-prompt__agent-listening", "data-test": "agent-listening-indicator", role: "status", "aria-label": "Agent listening" })) : null] }), _jsx(SketchLayersPanel, {}), statusAction ? (_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 }), _jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: openMcpConnection, children: statusAction.label })] }) })) : 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, agentCompletionStatus === "verified" ? (_jsx("p", { className: "copy-prompt__hint", "data-test": "agent-verified-hint", role: "status", children: "Agent changes verified." })) : 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 copyToClipboard(sketchFallback.prompt).then(() => {
+                                if (changes.length > 0 || structuralChanges.length > 0) {
+                                    recordClipboardHandoff(changes, structuralChanges);
+                                }
+                                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(), onDisconnect: () => agentClient.disconnect(), onCheckAgain: () => agentClient.checkConnection() })] }));
 }

package/dist/inspector/shell/EmptyState.js

@@ -11,5 +11,5 @@ export function EmptyState() {
     const modifierName = macPlatform ? "Command" : "Control";
     const optionKey = macPlatform ? "⌥" : "Alt";
     const optionName = macPlatform ? "Option" : "Alt";
-    return (_jsxs("div", { className: "empty-state", "data-test": "empty-state", 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("div", { className: "empty-state__shortcuts", 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: "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" }) })] })] }) })] }));
+    return (_jsxs("div", { className: "empty-state", "data-test": "empty-state", 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("div", { className: "empty-state__shortcuts", 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" }) })] })] }) })] }));
 }

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

@@ -7,5 +7,4 @@ declare global {
 }
 export { toggleInspector, setInspectorOpen };
 export type { SelectedElement } from "../selection/selectionStore.js";
-export declare function setInspectorHost(host: HTMLElement | null): void;
 export declare function InspectorShell(): ReactElement;

package/dist/inspector/shell/InspectorShell.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { IconArrowUpRight, IconColorSwatch, IconLayoutSidebarRight, IconSettings } from "@tabler/icons-react";
+import { IconLayoutSidebarRight, IconSettings } from "@tabler/icons-react";
 import { useInspectorOpen, toggleInspector, setInspectorOpen } from "./openStore.js";
 import { useSelectedElement, useSelectedElements, useHierarchy, setSelectedElement, removeSelectedElement, } from "../selection/selectionStore.js";
-import { InspectorOverlay } from "../overlay/InspectorOverlay.js";
 import { findTokenRow } from "../styleEditors/rowLookup.js";
 import { useBrowserCssInspection } from "../inspection/useBrowserCssInspection.js";
 import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
 import { SpacingBox } from "../styleEditors/SpacingBox.js";
 import { Typography } from "../styleEditors/Typography.js";
+import { isTextRelevant } from "../styleEditors/textRelevance.js";
 import { ColorPicker } from "../styleEditors/ColorPicker.js";
 import { BorderEditor } from "../styleEditors/BorderEditor.js";
 import { AppearanceSection } from "../styleEditors/AppearanceSection.js";
@@ -20,27 +20,37 @@ import { countSourceSiteMatches, getEditScope, relinkElement, sourceSiteSelector
 import { canEditStyles } from "../tokens/editActions.js";
 import { Button } from "../ui/Button.js";
 import { CopyPromptButton } from "./CopyPromptButton.js";
+import { PeekOriginalButton } from "./PeekOriginalButton.js";
 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 { isEditableEvent } from "./shortcuts.js";
-import { clearInspectorLayout, setInspectorLayoutOpen } from "./panelLayout.js";
 import { formatInspectorLabel } from "../ui/labels.js";
 import { FieldRow } from "../ui/FieldRow.js";
 import { Select } from "../ui/Select.js";
-import { enterCanvas, useCanvasMode } from "../canvas/canvasStore.js";
 import { clearRestoreCount, clearSession } from "../canvas/sessionStore.js";
+import { hasWriteLease } from "../canvas/workspaceLease.js";
+import { useFocusedCardId, useSelectedCardId, } from "../canvas/canvasStore.js";
+import { getActiveCanvasFrame } from "../canvas/activeCanvasDocument.js";
 import { getElementWindow } from "../runtime/domRealm.js";
 import { deleteElement, nudgeElement } from "../overlay/structuralGestures.js";
 import { AtRuleContextProvider } from "../ui/AtRuleContext.js";
 import { ComponentPropsSection } from "../componentSemantics/ComponentPropsSection.js";
-import { cancelInlineTextEdit, disposeInlineTextEdit, isInlineTextEditingActive, useInlineTextSession } from "../inline-text/inlineTextEditor.js";
+import { cancelInlineTextEdit, isInlineTextEditingActive, useInlineTextDiagnostic, } from "../inline-text/inlineTextEditor.js";
+import { getInlineTextFeedback } from "../inline-text/inlineTextFeedback.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { DomNavigation } from "./DomNavigation.js";
 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 { SketchWorkspace } from "../sketch/SketchWorkspace.js";
+import { cancelSketchInteraction, useSketchInteractionActive } from "../sketch/interaction.js";
+import { clearSketchClipboardHandoff } from "../sketch/handoff.js";
+import { clearSketchesForProject } from "../sketch/store.js";
+import { closeSketchNote } from "../sketch/sketchNote.js";
 function findFirstTokenRow(rows, properties) {
     for (const property of properties) {
         const row = findTokenRow(rows, property);
@@ -55,13 +65,6 @@ function findFirstTokenRow(rows, properties) {
     return null;
 }
 export { toggleInspector, setInspectorOpen };
-let inspectorHost = null;
-export function setInspectorHost(host) {
-    inspectorHost = host;
-}
-function resolveHost() {
-    return inspectorHost ?? document.getElementById("nudge-ui-root") ?? document.body;
-}
 function nodeMatchesSelector(node, selector) {
     if (!selector || node.nodeType !== node.ELEMENT_NODE)
         return false;
@@ -87,24 +90,22 @@ function scopeMutationAffectsSelection(records, selected) {
 export function InspectorShell() {
     const isOpen = useInspectorOpen();
     const runtimeConfig = useNudgeUiRuntimeConfig();
-    const canvasEnabled = runtimeConfig.capabilities.canvas;
     const domNavigationEnabled = runtimeConfig.capabilities.domNavigation === true;
-    const activeCanvasMode = useCanvasMode();
-    const canvasMode = canvasEnabled ? activeCanvasMode : "inspect";
+    const sketchEnabled = isNudgeUiDev() && !isDemoRuntime();
+    const sketchActive = useSketchInteractionActive();
+    const selectedCardId = useSelectedCardId();
+    const focusedCardId = useFocusedCardId();
+    const sketchHost = selectedCardId || focusedCardId ? getActiveCanvasFrame() : null;
     const selected = useSelectedElement();
     const selectedElements = useSelectedElements();
     const hierarchy = useHierarchy();
-    const inlineTextSession = useInlineTextSession();
+    const inlineTextFeedback = getInlineTextFeedback(useInlineTextDiagnostic());
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [settingsSection, setSettingsSection] = useState("instructions");
     const [scopeRevision, refreshScope] = useState(0);
     const [styleState, setStyleState] = useState(getActiveStyleState());
     const cssInspection = useBrowserCssInspection(selectedElements, styleState);
     const isMultiSelection = selectedElements.length > 1;
-    useEffect(() => {
-        setInspectorLayoutOpen(isOpen);
-        return clearInspectorLayout;
-    }, [isOpen]);
     useEffect(() => {
         // A new selection should never inherit an incidental state from the
         // previous element. Base is the inspector's deliberate default.
@@ -147,7 +148,7 @@ export function InspectorShell() {
         return () => observers.forEach((observer) => observer.disconnect());
     }, [selectedElements, scopeRevision]);
     useEffect(() => {
-        if (!isOpen)
+        if (sketchActive)
             return;
         function onKeydown(event) {
             if (isInlineTextEditingActive())
@@ -200,13 +201,14 @@ export function InspectorShell() {
         }
         window.addEventListener("keydown", onKeydown);
         return () => window.removeEventListener("keydown", onKeydown);
-    }, [isOpen, isMultiSelection, selected]);
+    }, [isMultiSelection, selected, sketchActive]);
     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]);
     const tokenEntries = useMemo(() => intersectTokenEntries(cssInspection.elements.map((snapshot) => snapshot.availableTokens)), [cssInspection.elements]);
     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 paintedBackgroundRow = findFirstTokenRow(tokenRows, ["background-color", "background"]);
     const backgroundTokenRow = useMemo(() => {
@@ -227,24 +229,24 @@ export function InspectorShell() {
     function refreshScopeState() {
         refreshScope((revision) => revision + 1);
     }
-    function handleCanvasModeButton() {
-        // Inline text editing is controller-owned. Canvas renderer documents
-        // receive projections only, so dispose the active controller session
-        // before mounting cards rather than probing a stale iframe document.
-        disposeInlineTextEdit("frame-disposed");
-        enterCanvas();
-    }
     function openSettings(section) {
         setSettingsSection(section);
         setSettingsOpen(true);
     }
-    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "inspector-styles", children: UI_STYLES }), canvasMode === "inspect" && _jsx(InspectorOverlay, { host: resolveHost() }), _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(IconButton, { variant: "quiet", label: "Collapse inspector", "data-test": "collapse-inspector", style: { marginLeft: "-8px" }, onClick: () => {
+    function clearInspectorSession() {
+        clearSession();
+        clearRestoreCount();
+        if (!hasWriteLease())
+            return;
+        cancelSketchInteraction();
+        closeSketchNote();
+        clearSketchClipboardHandoff();
+        void clearSketchesForProject(runtimeConfig.projectId).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(IconButton, { variant: "quiet", label: "Collapse inspector", "data-test": "collapse-inspector", disabled: sketchActive, style: { marginLeft: "-8px" }, 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(IconButton, { variant: "quiet", "data-test": "tokens-button", label: "Tokens", title: "Tokens", onClick: () => openSettings("tokens"), children: _jsx(IconColorSwatch, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), _jsx(IconButton, { variant: "quiet", label: "Settings", title: "Settings", "data-test": "settings-button", onClick: () => openSettings("instructions"), children: _jsx(IconSettings, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), canvasEnabled && canvasMode !== "canvas" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "panel__header-divider", "aria-hidden": "true" }), _jsxs(Button, { variant: "quiet", className: "panel__canvas-button", "data-test": "mode-canvas", type: "button", onClick: handleCanvasModeButton, children: ["Canvas", _jsx(IconArrowUpRight, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })] })] })) : null] })] }), _jsx("div", { className: "panel__copy-row", children: _jsx(CopyPromptButton, { settingsOpen: settingsOpen, settingsSection: settingsSection, onOpenSettings: openSettings, onSettingsOpenChange: setSettingsOpen }) })] }), _jsxs("div", { className: "panel__body", children: [inlineTextSession && (inlineTextSession.bindingChoices.length > 1 ||
-                                inlineTextSession.scopeChoices.length > 0) ? (_jsxs("section", { className: "inline-text-editor", "data-test": "inline-text-editor", children: [_jsx("div", { className: "inline-text-editor__binding", "data-test": "inline-text-binding", children: inlineTextSession.binding.kind === "component-prop"
-                                            ? `${inlineTextSession.binding.target.componentName}.${inlineTextSession.binding.property}`
-                                            : "Rendered text" }), inlineTextSession.bindingChoices.length > 1 ? (_jsxs("div", { className: "inline-text-editor__chooser", "data-test": "inline-binding-chooser", children: [_jsx("div", { className: "inline-text-editor__chooser-label", children: "Choose binding" }), _jsx("div", { className: "inline-text-editor__chooser-options", role: "group", "aria-label": "Text binding", children: inlineTextSession.bindingChoices.map((choice, index) => (_jsxs(Button, { size: "compact", variant: inlineTextSession.selectedBindingIndex === index ? "primary" : "quiet", "data-test": "inline-binding-choice", "data-index": index, "aria-pressed": inlineTextSession.selectedBindingIndex === index, onMouseDown: (event) => event.preventDefault(), onClick: () => inlineTextSession.chooseBinding(index), children: [choice.binding.target.componentName, ".", choice.binding.property] }, `${choice.binding.target.callsiteId}:${choice.binding.property}`))) })] })) : null, inlineTextSession.scopeChoices.length > 0 ? (_jsxs("div", { className: "inline-text-editor__chooser", "data-test": "inline-scope-chooser", children: [_jsx("div", { className: "inline-text-editor__chooser-label", children: "Apply to" }), _jsx("div", { className: "inline-text-editor__chooser-options", role: "group", "aria-label": "Text edit scope", children: inlineTextSession.scopeChoices.map((scope) => (_jsx(Button, { size: "compact", variant: inlineTextSession.scope === scope ? "primary" : "quiet", "data-test": `inline-scope-${scope}`, "aria-pressed": inlineTextSession.scope === scope, onMouseDown: (event) => event.preventDefault(), onClick: () => inlineTextSession.chooseScope(scope), children: scope === "source-site" ? "All outputs" : "This rendered item" }, scope))) })] })) : null, _jsxs("div", { className: "inline-text-editor__actions", children: [_jsx(Button, { size: "compact", variant: "secondary", "data-test": "inline-text-cancel", onClick: () => inlineTextSession.cancel(), children: "Cancel" }), _jsx(Button, { size: "compact", "data-test": "inline-text-commit", disabled: inlineTextSession.bindingChoices.length > 1 && inlineTextSession.selectedBindingIndex === null, onClick: () => inlineTextSession.commit(), children: "Done" })] })] })) : null, selected ? (_jsxs(_Fragment, { children: [domNavigationEnabled && !isMultiSelection ? _jsx(DomNavigation, { selected: selected, hierarchy: hierarchy }) : null, 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(IconButton, { variant: "quiet", label: "Settings", title: "Settings", "data-test": "settings-button", onClick: () => openSettings("instructions"), children: _jsx(IconSettings, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) })] })] }), _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: [domNavigationEnabled && !isMultiSelection ? _jsx(DomNavigation, { selected: selected, hierarchy: hierarchy }) : null, 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: () => {
                                                                 const overrideId = relinkElement(selected.domElement);
                                                                 if (overrideId)
                                                                     discardChangesForInstanceOverride(overrideId);
@@ -261,8 +263,5 @@ export function InspectorShell() {
                                                             return;
                                                         setActiveStyleState(nextState);
                                                         setStyleState(nextState);
-                                                    } }) })) : null] })) : null, !isMultiSelection ? _jsx(ComponentPropsSection, { selected: selected }) : null, selectionEditable ? (_jsx(AtRuleContextProvider, { rows: tokenRows, children: _jsxs("div", { className: "style-editors", "data-test": "style-editors", children: [_jsx(LayoutSection, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `layout-${styleState}`), _jsx(SpacingBox, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `spacing-${styleState}`), _jsx(AppearanceSection, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `appearance-${styleState}`), _jsx(Typography, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `type-${styleState}`), _jsx(ColorPicker, { element: selected, selection: styleSelection, property: "color", entries: tokenEntries, tokenRow: findTokenRow(tokenRows, "color") }, `color-${styleState}`), _jsx(ColorPicker, { element: selected, selection: styleSelection, property: "background-color", entries: tokenEntries, tokenRow: backgroundTokenRow }, `background-${styleState}`), _jsx(BorderEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `border-${styleState}`), _jsx(BoxShadowEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `box-shadow-${styleState}`)] }) })) : (_jsx(StatusCallout, { tone: "neutral", "data-test": "multi-selection-uneditable", children: "These repeated items are indistinguishable, so Nudge UI cannot safely target only part of the group. Select every repeated item to edit them together." }))] })) : (_jsx(EmptyState, {})), _jsx(ChangesLog, { onClearSession: () => {
-                                    clearSession();
-                                    clearRestoreCount();
-                                } })] })] }), !isOpen ? (_jsx("div", { className: "panel__restore", children: _jsx(IconButton, { variant: "quiet", label: "Show inspector", className: "panel__restore-button", "data-test": "show-inspector", onClick: () => setInspectorOpen(true), children: _jsx(IconLayoutSidebarRight, { size: 16, stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) })) : null] }));
+                                                    } }) })) : null] })) : null, !isMultiSelection ? _jsx(ComponentPropsSection, { selected: selected }) : null, selectionEditable ? (_jsx(AtRuleContextProvider, { rows: tokenRows, children: _jsxs("div", { className: "style-editors", "data-test": "style-editors", children: [_jsx(LayoutSection, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `layout-${styleState}`), _jsx(SpacingBox, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `spacing-${styleState}`), _jsx(AppearanceSection, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `appearance-${styleState}`), showText ? _jsxs(_Fragment, { children: [_jsx(Typography, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `type-${styleState}`), _jsx(ColorPicker, { element: selected, selection: styleSelection, property: "color", entries: tokenEntries, tokenRow: findTokenRow(tokenRows, "color") }, `color-${styleState}`)] }) : null, _jsx(ColorPicker, { element: selected, selection: styleSelection, property: "background-color", entries: tokenEntries, tokenRow: backgroundTokenRow }, `background-${styleState}`), _jsx(BorderEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `border-${styleState}`), _jsx(BoxShadowEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `box-shadow-${styleState}`)] }) })) : (_jsx(StatusCallout, { tone: "neutral", "data-test": "multi-selection-uneditable", children: "These repeated items are indistinguishable, so Nudge UI cannot safely target only part of the group. Select every repeated item to edit them together." }))] })) : (_jsx(EmptyState, {})), _jsx(ChangesLog, { onClearSession: clearInspectorSession })] })] }), sketchEnabled ? (_jsx(SketchWorkspace, { hostElement: sketchHost, projectId: runtimeConfig.projectId })) : null, !isOpen ? (_jsx("div", { className: "panel__restore", children: _jsx(IconButton, { variant: "quiet", label: "Show inspector", className: "panel__restore-button", "data-test": "show-inspector", onClick: () => setInspectorOpen(true), children: _jsx(IconLayoutSidebarRight, { size: 16, stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) })) : null] }));
 }

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

@@ -0,0 +1,7 @@
+import { type ReactElement } from "react";
+/**
+ * Press-and-hold button that previews the page without inspector changes
+ * (NUD-30). Releasing restores the edited preview; canonical intent is never
+ * cleared, so nothing is lost while held.
+ */
+export declare function PeekOriginalButton(): ReactElement;

package/dist/inspector/shell/PeekOriginalButton.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useSyncExternalStore } from "react";
+import { IconButton } from "../ui/IconButton.js";
+import { PeekOriginalIcon } from "./PeekOriginalIcon.js";
+import { workspaceChangeStore } from "../changes/workspaceChanges.js";
+import { setOriginalPreviewActive, useOriginalPreviewActive, } from "./originalPreview.js";
+function useWorkspaceChangeCount() {
+    return useSyncExternalStore(workspaceChangeStore.subscribe, () => {
+        const snapshot = workspaceChangeStore.getSnapshot();
+        return snapshot.changes.length + snapshot.structuralChanges.length;
+    }, () => 0);
+}
+/**
+ * Press-and-hold button that previews the page without inspector changes
+ * (NUD-30). Releasing restores the edited preview; canonical intent is never
+ * cleared, so nothing is lost while held.
+ */
+export function PeekOriginalButton() {
+    const active = useOriginalPreviewActive();
+    const changeCount = useWorkspaceChangeCount();
+    const disabled = changeCount === 0;
+    useEffect(() => {
+        if (!active)
+            return;
+        const release = () => setOriginalPreviewActive(false);
+        window.addEventListener("pointerup", release);
+        window.addEventListener("pointercancel", release);
+        window.addEventListener("blur", release);
+        return () => {
+            window.removeEventListener("pointerup", release);
+            window.removeEventListener("pointercancel", release);
+            window.removeEventListener("blur", release);
+        };
+    }, [active]);
+    useEffect(() => () => {
+        setOriginalPreviewActive(false);
+    }, []);
+    return (_jsx(IconButton, { variant: "quiet", "data-test": "peek-original-button", label: "Hold to view original", title: disabled ? "No changes to preview" : "Hold to view original", "aria-pressed": active, "data-active": active ? "true" : "false", disabled: disabled, onPointerDown: (event) => {
+            if (disabled)
+                return;
+            if (event.pointerType === "mouse" && event.button !== 0)
+                return;
+            event.currentTarget.setPointerCapture?.(event.pointerId);
+            setOriginalPreviewActive(true);
+        }, onPointerUp: () => setOriginalPreviewActive(false), onPointerCancel: () => setOriginalPreviewActive(false), onLostPointerCapture: () => setOriginalPreviewActive(false), onKeyDown: (event) => {
+            if (disabled || event.repeat)
+                return;
+            if (event.key === " " || event.key === "Enter")
+                setOriginalPreviewActive(true);
+        }, onKeyUp: (event) => {
+            if (event.key === " " || event.key === "Enter")
+                setOriginalPreviewActive(false);
+        }, onBlur: () => setOriginalPreviewActive(false), onContextMenu: (event) => {
+            if (active)
+                event.preventDefault();
+        }, children: _jsx(PeekOriginalIcon, {}) }));
+}

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

@@ -0,0 +1,7 @@
+import type { ReactElement } from "react";
+/**
+ * Before/after comparison glyph for the hold-to-view-original button.
+ * Custom artwork rendered with the shared inspector icon tokens so it
+ * matches the neighboring header icons.
+ */
+export declare function PeekOriginalIcon(): ReactElement;

package/dist/inspector/shell/PeekOriginalIcon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Before/after comparison glyph for the hold-to-view-original button.
+ * Custom artwork rendered with the shared inspector icon tokens so it
+ * matches the neighboring header icons.
+ */
+export function PeekOriginalIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", width: "var(--icon-size-small)", height: "var(--icon-size-small)", "aria-hidden": "true", children: [_jsx("path", { d: "M8.66667 5L6 5C4.34315 5 3 6.34315 3 8L3 16C3 17.6569 4.34315 19 6 19L12 19", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "var(--icon-stroke-width)" }), _jsx("path", { d: "M13 5L18 5C19.6569 5 21 6.34315 21 8L21 16C21 17.6569 19.6569 19 18 19L16.3333 19", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "var(--icon-stroke-width)" }), _jsx("line", { x1: "13.7721", y1: "22.2984", x2: "8.29835", y2: "2.22788", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "var(--icon-stroke-width)" })] }));
+}

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

@@ -0,0 +1,9 @@
+export declare function isOriginalPreviewActive(): boolean;
+export declare function subscribeOriginalPreview(listener: () => void): () => void;
+export declare function useOriginalPreviewActive(): boolean;
+/**
+ * Hold-to-view-original (NUD-30). While active the host document shows the
+ * page without any inspector changes. Canonical intent stays in the workspace
+ * store, so releasing restores the edited preview without loss.
+ */
+export declare function setOriginalPreviewActive(next: boolean): void;

package/dist/inspector/shell/originalPreview.js

@@ -0,0 +1,61 @@
+import { useSyncExternalStore } from "react";
+import { workspaceChangeStore } from "../changes/workspaceChanges.js";
+import { applyHostWorkspaceProjection, compileWorkspaceProjection, } from "../projection/workspaceProjection.js";
+import { isEditorShellDocument } from "../runtime/editorShell.js";
+let previewingOriginal = false;
+const listeners = new Set();
+export function isOriginalPreviewActive() {
+    return previewingOriginal;
+}
+export function subscribeOriginalPreview(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function useOriginalPreviewActive() {
+    return useSyncExternalStore(subscribeOriginalPreview, () => previewingOriginal, () => false);
+}
+function notifyOriginalPreviewListeners() {
+    for (const listener of listeners) {
+        try {
+            listener();
+        }
+        catch {
+            /* Subscriber errors must not break the preview toggle. */
+        }
+    }
+}
+function applyEmptyHostProjection() {
+    if (isEditorShellDocument())
+        return;
+    const { revision } = workspaceChangeStore.getSnapshot();
+    applyHostWorkspaceProjection({
+        sourceRevision: revision,
+        managedStyles: { rules: [], css: "" },
+        instanceOverrides: [],
+        structuralChanges: [],
+        textContentChanges: [],
+        componentOverrides: [],
+    });
+}
+function applyCanonicalHostProjection() {
+    if (isEditorShellDocument())
+        return;
+    applyHostWorkspaceProjection(compileWorkspaceProjection(workspaceChangeStore.getSnapshot()));
+}
+/**
+ * Hold-to-view-original (NUD-30). While active the host document shows the
+ * page without any inspector changes. Canonical intent stays in the workspace
+ * store, so releasing restores the edited preview without loss.
+ */
+export function setOriginalPreviewActive(next) {
+    if (next === previewingOriginal)
+        return;
+    previewingOriginal = next;
+    if (previewingOriginal)
+        applyEmptyHostProjection();
+    else
+        applyCanonicalHostProjection();
+    notifyOriginalPreviewListeners();
+}

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

@@ -1,3 +1,6 @@
 export declare function isEditableTarget(target: EventTarget | null): boolean;
 export declare function isEditableEvent(event: KeyboardEvent): boolean;
+export declare const SEND_PROMPT_HOTKEY_EVENT = "nudge-ui-send-prompt-hotkey";
+export declare function isSendPromptShortcut(event: KeyboardEvent): boolean;
 export declare function isInspectorToggleShortcut(event: KeyboardEvent): boolean;
+export declare function isOriginalPreviewShortcut(event: KeyboardEvent): boolean;