nudge-ui 0.2.0 → 0.2.2

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 { useSelectedElement, useSelectedElements, setSelectedElement, removeSelectedElement, } from "../selection/selectionStore.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,36 @@ 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 +64,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 +89,20 @@ 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 +145,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 +198,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 +226,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: [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 +260,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;

package/dist/inspector/shell/shortcuts.js

@@ -14,6 +14,12 @@ function deeplyFocusedElement() {
 export function isEditableEvent(event) {
     return event.composedPath().some(isEditableTarget) || isEditableTarget(deeplyFocusedElement());
 }
+export const SEND_PROMPT_HOTKEY_EVENT = "nudge-ui-send-prompt-hotkey";
+export function isSendPromptShortcut(event) {
+    if (event.repeat || event.altKey || isEditableEvent(event))
+        return false;
+    return event.shiftKey && !event.metaKey && !event.ctrlKey && event.code === "KeyS";
+}
 export function isInspectorToggleShortcut(event) {
     if (isEditableEvent(event))
         return false;
@@ -23,3 +29,12 @@ export function isInspectorToggleShortcut(event) {
         return true;
     return event.altKey && !event.shiftKey && !event.ctrlKey && !event.metaKey && event.code === "KeyI";
 }
+export function isOriginalPreviewShortcut(event) {
+    if (event.repeat)
+        return false;
+    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey)
+        return false;
+    if (event.code !== "Backslash")
+        return false;
+    return !isEditableEvent(event);
+}

package/dist/inspector/sketch/SketchChanges.d.ts

@@ -0,0 +1,2 @@
+import type { ReactElement } from "react";
+export declare function SketchChanges(): ReactElement | null;

package/dist/inspector/sketch/SketchChanges.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IconCheck, IconCopy, IconDownload, IconEdit, IconRefresh, IconTrash } from "@tabler/icons-react";
+import { Button } from "../ui/Button.js";
+import { StatusCallout } from "../ui/StatusCallout.js";
+import { copyImageToClipboard, downloadImage } from "./raster.js";
+import { editSketch } from "./SketchWorkspace.js";
+import { removeSketch, requeueSketch, useSketchStore } from "./store.js";
+import {} from "./model.js";
+function routeLabel(url) {
+    try {
+        const parsed = new URL(url);
+        return `${parsed.pathname}${parsed.search}` || "/";
+    }
+    catch {
+        return url;
+    }
+}
+function statusLabel(status) {
+    switch (status) {
+        case "dispatching": return "Sending";
+        case "handing-off": return "Handing off";
+        case "needs-review": return "Needs review";
+        case "unknown": return "Unknown";
+        default: return "Pending";
+    }
+}
+function Thumbnail({ item }) {
+    const [url, setUrl] = useState(null);
+    useEffect(() => {
+        if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function")
+            return;
+        const next = URL.createObjectURL(item.document.annotatedImage);
+        setUrl(next);
+        return () => URL.revokeObjectURL(next);
+    }, [item.document.annotatedImage]);
+    return url ? _jsx("img", { className: "sketch-change__thumbnail", src: url, alt: "Sketch annotation", "data-test": "sketch-thumbnail" }) : _jsx("div", { className: "sketch-change__thumbnail sketch-change__thumbnail--empty", "data-test": "sketch-thumbnail" });
+}
+function SketchRow({ item }) {
+    const [actionError, setActionError] = useState(null);
+    const busy = item.status === "dispatching" || item.status === "handing-off";
+    const canReview = item.status === "needs-review" || item.status === "unknown";
+    const document = item.document;
+    async function copyImage() {
+        setActionError(null);
+        try {
+            await copyImageToClipboard(document.annotatedImage);
+        }
+        catch (error) {
+            setActionError(error instanceof Error ? error.message : "The image could not be copied.");
+        }
+    }
+    async function runQueueAction(action, failureMessage) {
+        setActionError(null);
+        try {
+            if (!await action())
+                setActionError(failureMessage);
+        }
+        catch (error) {
+            setActionError(error instanceof Error ? error.message : failureMessage);
+        }
+    }
+    return (_jsxs("div", { className: "sketch-change__row", "data-test": "sketch-row", "data-sketch-id": document.id, children: [_jsx(Thumbnail, { item: item }), _jsxs("div", { className: "sketch-change__body", children: [_jsxs("div", { className: "sketch-change__heading", children: [_jsx("span", { className: "sketch-change__name", children: document.filename }), _jsx("span", { className: "sketch-change__status", "data-test": "sketch-status", "data-status": item.status, children: statusLabel(item.status) })] }), _jsxs("span", { className: "sketch-change__route", children: [routeLabel(document.capture.url), " \u00B7 revision ", document.revision] }), document.description ? _jsx("p", { className: "sketch-change__description", children: document.description }) : null, document.annotations?.length ? (_jsx("ol", { className: "sketch-change__annotations", children: document.annotations.map((annotation) => (_jsxs("li", { children: [_jsxs("span", { children: [annotation.number, "."] }), " ", annotation.description] }, annotation.id))) })) : null, _jsxs("div", { className: "sketch-change__actions", children: [_jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-copy-image", onClick: () => void copyImage(), children: [_jsx(IconCopy, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " Copy image"] }), _jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-download-image", onClick: () => downloadImage(document.annotatedImage, document.filename), children: [_jsx(IconDownload, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " Download"] }), _jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-reopen", onClick: () => editSketch(document.id), disabled: busy, children: [_jsx(IconEdit, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " Reopen"] }), canReview ? (_jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-requeue", onClick: () => void runQueueAction(() => requeueSketch(document.id), "The sketch could not be requeued."), disabled: busy, children: [_jsx(IconRefresh, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " Requeue"] })) : null, _jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-mark-done", onClick: () => void runQueueAction(() => removeSketch(document.id), "The sketch could not be removed yet."), disabled: busy, children: [canReview ? _jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" }) : _jsx(IconTrash, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " ", canReview ? "Mark done" : "Delete"] })] }), actionError ? _jsx("span", { className: "sketch-change__error", role: "status", children: actionError }) : null] })] }));
+}
+export function SketchChanges() {
+    const store = useSketchStore();
+    const items = store.items;
+    const hasError = store.error !== null;
+    if (items.length === 0 && !hasError)
+        return null;
+    return (_jsxs("section", { className: "sketch-change", "data-test": "sketches", children: [_jsxs("div", { className: "sketch-change__title", children: ["Sketch annotations ", _jsx("span", { children: items.length })] }), store.error ? _jsx(StatusCallout, { tone: "warning", "data-test": "sketch-storage-error", children: store.error }) : null, items.length > 0 ? items.map((item) => _jsx(SketchRow, { item: item }, `${item.document.id}:${item.document.revision}`)) : (_jsx(StatusCallout, { tone: "warning", children: "Saved sketches need recovery. Reload the page to try again." }))] }));
+}

package/dist/inspector/sketch/SketchEditor.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react";
+import { type SketchAnnotation, type SketchDocument, type SketchStroke } from "./model.js";
+import type { CapturedSketch } from "./capture.js";
+export interface SketchEditorProps {
+    readonly open: boolean;
+    readonly document: SketchDocument | null;
+    readonly captured: CapturedSketch | null;
+    readonly onCancel: () => void;
+    readonly onSave: (input: {
+        readonly id?: string;
+        readonly capture: SketchDocument["capture"];
+        readonly description: string;
+        readonly strokes: readonly SketchStroke[];
+        readonly annotations?: readonly SketchAnnotation[];
+        readonly imageWidth: number;
+        readonly imageHeight: number;
+        readonly originalImage: Blob;
+        readonly annotatedImage: Blob;
+    }) => Promise<void>;
+}
+export declare function SketchEditor({ open, document: sketchDocument, captured, onCancel, onSave }: SketchEditorProps): ReactElement | null;