nudge-ui 0.2.2 → 0.2.4

package/dist/inspector/shell/CopyPromptButton.js

@@ -1,33 +1,56 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+import { iterationId } from "../canvas/frameContent.js";
 import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { IconCheck, IconCopy, IconPlugConnected, IconSend, } from "@tabler/icons-react";
+import { IconArtboard, IconBoltFilled, IconCheck, IconChevronDown, IconCopy, IconPlugConnected, IconSend, } from "@tabler/icons-react";
 import { useChanges } from "../changes/changesLog.js";
-import { generatePrompt } from "../prompt/generatePrompt.js";
-import { copyToClipboard } from "../prompt/copyToClipboard.js";
+import { countPromptChanges } from "../prompt/generatePrompt.js";
 import { loadCustomInstructions, saveCustomInstructions } from "../prompt/promptSettings.js";
 import { getAgentConnectionStatus } from "../agent/connectionStatus.js";
 import { SettingsDialog } from "../settings/SettingsDialog.js";
 import { Button } from "../ui/Button.js";
+import { portalContainer } from "../ui/portalContainer.js";
 import { StatusCallout } from "../ui/StatusCallout.js";
 import { getStructuralChanges, subscribeStructuralChanges } from "../projection/structuralProjection.js";
 import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
-import { createPromptRevision, getAgentClient, useAgentClient, } from "../agent/client.js";
+import { getAgentClient, useAgentClient } from "../agent/client.js";
 import { createAgentPresentationAdapter } from "../canvas/agentPresentation.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 { captureHandoffOwner, getAgentDispatch, verifyAndReconcileAgentDispatch, } from "../agent/verification.js";
+import { clearSentItems, getSentItems, sentItemCount } from "../workspace/sentItems.js";
+import { getClipboardHandoffRevision, getLastClipboardReconciledCount, subscribeClipboardHandoff, } from "../prompt/clipboardHandoff.js";
+import { useSketches, settleSketchDispatch } from "../sketch/store.js";
 import { SketchLayersPanel } from "../sketch/SketchLayersPanel.js";
 import { isSendPromptShortcut, SEND_PROMPT_HOTKEY_EVENT } from "./shortcuts.js";
+import { getFocusedCardId, getSelectedCardId, useCanvasCards, useFocusedCardId, useSelectedCardId } from "../canvas/canvasStore.js";
+import { getEditableCardId, sketchBelongsToCard, useDrafts } from "../drafts/store.js";
+import { copyHandoff, deliverHandoff, prepareHandoff, prepareIterationImplementationPrompt } from "../workspace/handoff.js";
+import { copyToClipboard } from "../prompt/copyToClipboard.js";
+import { useFrameComments } from "../comments/store.js";
+import { reconcileComments } from "../comments/verification.js";
+import { getRegisteredFrames } from "../canvas/projection.js";
 export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, settingsSection: controlledSettingsSection, onOpenSettings, onSettingsOpenChange, } = {}) {
     const changes = useChanges();
+    const comments = useFrameComments();
+    useDrafts();
     const sketches = useSketches();
-    const pendingSketches = sketches.filter((item) => item.status === "pending");
+    const selectedDraftCardId = useSelectedCardId();
+    const focusedDraftCardId = useFocusedCardId();
+    const activeDraftCardId = getEditableCardId(selectedDraftCardId, focusedDraftCardId);
+    const canvasCards = useCanvasCards();
+    const activeContent = canvasCards.find((card) => card.id === activeDraftCardId)?.content;
+    const activeArtifactId = iterationId(activeContent);
+    const visibleSketches = sketches.filter((item) => sketchBelongsToCard(item.document, activeDraftCardId));
+    const pendingSketches = visibleSketches.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 [preparing, setPreparing] = useState(false);
+    const handoffBusy = useRef(false);
+    const [saveMessage, setSaveMessage] = useState(null);
+    const [agentOutcome, setAgentOutcome] = useState(null);
+    const [clipboardPhase, setClipboardPhase] = useState("idle");
+    const [undoClear, setUndoClear] = useState(null);
     const [sketchFallback, setSketchFallback] = useState(null);
     const [localSettingsOpen, setLocalSettingsOpen] = useState(false);
     const [localSettingsSection, setLocalSettingsSection] = useState("instructions");
@@ -39,8 +62,13 @@ 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 + pendingSketches.length > 0;
-    const changeCount = changes.length + structuralChanges.length + sketches.length;
+    const hasChanges = Boolean(activeArtifactId) || countPromptChanges(changes, structuralChanges, pendingSketches.length) + comments.length > 0;
+    useEffect(() => {
+        if (!copied)
+            return;
+        const timer = window.setTimeout(() => setCopied(false), 1500);
+        return () => window.clearTimeout(timer);
+    }, [copied]);
     useEffect(() => {
         setCustomInstructions(loadCustomInstructions(runtimeConfig.projectId));
     }, [runtimeConfig.projectId]);
@@ -60,14 +88,22 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
         if (agent.state !== "completed" || revision === undefined)
             return;
         let active = true;
+        const dispatch = getAgentDispatch(revision);
         void verifyAndReconcileAgentDispatch(revision)
+            .then(async (removed) => {
+            for (const [, iframe] of getRegisteredFrames()) {
+                if (iframe.contentDocument)
+                    await reconcileComments(iframe.contentDocument);
+            }
+            return removed;
+        })
             .then((removed) => {
             if (!active)
                 return;
             const latest = agentRef.current;
             if (latest.request?.changeRevision !== revision || latest.state !== "completed")
                 return;
-            setAgentCompletionStatus(removed > 0 ? "verified" : null);
+            setAgentOutcome({ removed, dispatch });
         })
             .catch(() => {
             if (!active)
@@ -75,7 +111,7 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             const latest = agentRef.current;
             if (latest.request?.changeRevision !== revision || latest.state !== "completed")
                 return;
-            setAgentCompletionStatus(null);
+            setAgentOutcome({ removed: 0, dispatch });
         });
         return () => {
             active = false;
@@ -95,95 +131,151 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
         && !connecting
         && !working;
     const canSend = agent.paired && agent.listenerActive && !working;
-    const disabled = connecting || working || (!canConnect && !hasChanges);
+    const changeCount = countPromptChanges(changes, structuralChanges, canSend ? pendingSketches.length : 0) + comments.length;
+    const disabled = preparing || connecting || working || (!canConnect && !hasChanges);
     const agentStatus = getAgentConnectionStatus(agent);
     const statusAction = agentStatus.action;
-    const label = copied
-        ? "Copied!"
-        : connecting
-            ? "Connecting…"
-            : working
-                ? "Agent working…"
-                : canConnect
-                    ? "Connect agent"
-                    : canSend
-                        ? "Send prompt"
-                        : "Copy prompt";
+    const label = preparing
+        ? "Saving iteration…"
+        : copied
+            ? "Copied!"
+            : connecting
+                ? "Connecting…"
+                : working
+                    ? "Agent working…"
+                    : canConnect && !activeArtifactId
+                        ? "Connect agent"
+                        : canSend && !activeArtifactId
+                            ? "Send prompt"
+                            : "Copy prompt";
     const icon = copied
         ? _jsx(IconCheck, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
-        : canConnect || connecting
+        : !activeArtifactId && (canConnect || connecting)
             ? _jsx(IconPlugConnected, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
-            : canSend || working
+            : !activeArtifactId && (canSend || working)
                 ? _jsx(IconSend, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
                 : _jsx(IconCopy, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" });
     async function onClick() {
-        if (disabled)
-            return;
-        if (canConnect) {
-            await agentClient.connect();
+        if (disabled || handoffBusy.current)
             return;
+        handoffBusy.current = true;
+        setPreparing(Boolean(activeArtifactId) && !canConnect);
+        try {
+            await handoff();
         }
-        const hints = {
-            framework: runtimeConfig.framework,
-            stylingSystem: runtimeConfig.stylingSystem,
-        };
-        const sketchHandoff = createSketchHandoffSnapshot(pendingSketches);
-        const sketchMetadata = sketchHandoff ? sketchMetadataForHandoff(sketchHandoff) : [];
-        const text = generatePrompt(changes, hints, structuralChanges, customInstructions, sketchMetadata);
-        setAgentCompletionStatus(null);
-        setSketchFallback(null);
-        if (canSend) {
-            const revision = createPromptRevision(changes, structuralChanges, sketchMetadata);
-            recordAgentDispatch(revision, changes, structuralChanges);
-            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;
+        finally {
+            handoffBusy.current = false;
+            setPreparing(false);
+        }
+    }
+    async function copyIterationPrompt(target) {
+        if (!activeArtifactId || disabled || handoffBusy.current)
+            return;
+        handoffBusy.current = true;
+        setCopied(false);
+        setPreparing(true);
+        try {
+            const request = {
+                cardId: getEditableCardId(getSelectedCardId(), getFocusedCardId()),
+                hints: { framework: runtimeConfig.framework, stylingSystem: runtimeConfig.stylingSystem },
+                customInstructions,
+                pendingSketches,
+            };
+            if (target === "application") {
+                const prompt = await prepareIterationImplementationPrompt(request);
+                try {
+                    await copyToClipboard(prompt);
                 }
-                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 {
+                    throw new Error("The iteration was saved, but the prompt could not be copied. Try again.");
                 }
             }
-            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;
+            else {
+                const prepared = await prepareHandoff(request);
+                try {
+                    await copyHandoff(prepared);
+                }
+                catch {
+                    throw new Error("The iteration was saved, but the prompt could not be copied. Try again.");
                 }
             }
-            discardAgentDispatch(revision);
+            setSaveMessage(null);
+            setCopied(true);
+        }
+        catch (error) {
+            setSaveMessage(error instanceof Error ? error.message : "The prompt could not be copied. Try again.");
+        }
+        finally {
+            handoffBusy.current = false;
+            setPreparing(false);
+        }
+    }
+    async function handoff() {
+        if (disabled)
+            return;
+        if (canConnect) {
+            await agentClient.connect();
+            return;
+        }
+        let prepared;
+        try {
+            prepared = await prepareHandoff({
+                cardId: getEditableCardId(getSelectedCardId(), getFocusedCardId()),
+                hints: { framework: runtimeConfig.framework, stylingSystem: runtimeConfig.stylingSystem },
+                customInstructions,
+                pendingSketches,
+            });
+            setSaveMessage(null);
         }
-        await copyToClipboard(text);
-        if (changes.length > 0 || structuralChanges.length > 0) {
-            recordClipboardHandoff(changes, structuralChanges);
+        catch (error) {
+            setSaveMessage(error instanceof Error ? error.message : "The HTML iteration could not be saved.");
+            return;
+        }
+        setAgentOutcome(null);
+        setUndoClear(null);
+        setClipboardPhase("idle");
+        setSketchFallback(null);
+        const outcome = await deliverHandoff(prepared, runtimeConfig.projectId, canSend ? agentClient : null);
+        if (outcome.kind === "sketch-failed") {
+            setSketchFallback({ handoff: outcome.handoff, error: outcome.error });
+            return;
         }
+        if (outcome.kind === "sent")
+            return;
         setCopied(true);
-        window.setTimeout(() => setCopied(false), 1500);
+        setClipboardPhase("copied");
+    }
+    useEffect(() => {
+        if (clipboardPhase !== "copied" && clipboardPhase !== "away")
+            return;
+        // Focus moving into a canvas frame is not a return from the agent.
+        const onBlur = () => {
+            if (!(document.activeElement instanceof HTMLIFrameElement))
+                setClipboardPhase("away");
+        };
+        const onFocus = () => setClipboardPhase((phase) => phase === "away" ? "returned" : phase);
+        window.addEventListener("blur", onBlur);
+        window.addEventListener("focus", onFocus);
+        return () => {
+            window.removeEventListener("blur", onBlur);
+            window.removeEventListener("focus", onFocus);
+        };
+    }, [clipboardPhase]);
+    useEffect(() => {
+        if (!undoClear)
+            return;
+        const timer = window.setTimeout(() => setUndoClear(null), 10_000);
+        return () => window.clearTimeout(timer);
+    }, [undoClear]);
+    const handoffOwner = captureHandoffOwner(activeDraftCardId);
+    const sentItems = getSentItems(handoffOwner.draftId, handoffOwner.target, agentOutcome?.dispatch ?? null);
+    const remainingCount = sentItemCount(sentItems);
+    const showImplemented = (agentOutcome?.removed ?? 0) > 0 || reconciledCount > 0
+        || (remainingCount > 0 && (agentOutcome !== null || clipboardPhase === "returned"));
+    function clearRemaining() {
+        const restore = clearSentItems(sentItems);
+        if (restore)
+            setUndoClear(() => restore);
     }
     useEffect(() => {
         function onKeydown(event) {
@@ -231,12 +323,11 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
         }
         openMcpConnection();
     }
-    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 || agentStatus.kind === "connected-not-listening" ? (_jsx(StatusCallout, { className: "copy-prompt__agent-status", tone: agentStatus.tone, "data-test": "agent-connection-status", children: _jsxs("div", { className: "copy-prompt__agent-status-content", children: [_jsx("span", { role: "status", children: agentStatus.label }), statusAction ? (_jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: () => void handleAgentStatusAction(), children: statusAction.label })) : null] }) })) : null, reconciledCount > 0 ? (_jsxs("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "clipboard-reconciled-hint", role: "status", children: [reconciledCount, " Implemented changes"] })) : null, 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);
+    const promptButton = (_jsxs(Button, { variant: "primary", className: "copy-prompt__main", "data-test": "copy-prompt", type: "button", disabled: disabled, "data-copied": copied ? "true" : "false", "data-agent-state": agent.state, "aria-busy": preparing || working || connecting ? "true" : undefined, onClick: activeArtifactId ? undefined : onClick, children: [icon, label, changeCount > 0 ? (_jsx("span", { className: "copy-prompt__change-count", "data-test": "copy-prompt-change-count", children: changeCount })) : null, activeArtifactId ? _jsx(IconChevronDown, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) : null] }));
+    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [activeArtifactId ? (_jsxs(Menu.Root, { modal: false, children: [_jsx(Menu.Trigger, { render: promptButton }), _jsx(Menu.Portal, { container: portalContainer(), children: _jsx(Menu.Positioner, { className: "inspector-popover__positioner", side: "bottom", align: "start", sideOffset: 6, children: _jsxs(Menu.Popup, { className: "inspector-popover__popup copy-prompt__menu", "data-test": "copy-prompt-menu", children: [_jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-iteration-prompt", label: "Copy iteration prompt", onClick: () => void copyIterationPrompt("iteration"), children: [_jsx(IconArtboard, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: "Copy iteration prompt" }), _jsx("span", { className: "copy-prompt__menu-description", children: "Continue editing this HTML iteration." })] })] }), _jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-iteration-implementation", label: "Copy prompt for live app", onClick: () => void copyIterationPrompt("application"), children: [_jsx(IconBoltFilled, { className: "copy-prompt__menu-icon copy-prompt__menu-icon--live", size: "var(--icon-size-small)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: "Copy prompt for live app" }), _jsx("span", { className: "copy-prompt__menu-description", children: "Implement design in real app" })] })] })] }) }) })] }, activeDraftCardId)) : promptButton, _jsx(SketchLayersPanel, {}), statusAction || agentStatus.kind === "connected-not-listening" ? (_jsx(StatusCallout, { className: "copy-prompt__agent-status", tone: agentStatus.tone, "data-test": "agent-connection-status", children: _jsxs("div", { className: "copy-prompt__agent-status-content", children: [_jsx("span", { role: "status", children: agentStatus.label }), statusAction ? (_jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: () => void handleAgentStatusAction(), children: statusAction.label })) : null] }) })) : null, undoClear ? (_jsxs("p", { className: "copy-prompt__hint copy-prompt__hint--centered copy-prompt__hint--implemented", "data-test": "handoff-cleared-hint", role: "status", children: ["Cleared stale edits.", " ", _jsx("button", { type: "button", className: "copy-prompt__hint-action", "data-test": "handoff-undo-clear", onClick: () => {
+                            undoClear();
+                            setUndoClear(null);
+                        }, children: "Undo" })] })) : showImplemented ? (_jsxs("p", { className: "copy-prompt__hint copy-prompt__hint--centered copy-prompt__hint--implemented", "data-test": "handoff-implemented-hint", role: "status", children: ["Changes implemented.", remainingCount > 0 ? (_jsxs(_Fragment, { children: [" ", _jsx("button", { type: "button", className: "copy-prompt__hint-action", "data-test": "handoff-clear-remaining", onClick: clearRemaining, children: "Clear stale edits" })] })) : null] })) : null, saveMessage ? (_jsx("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "iteration-save-hint", role: "status", children: saveMessage })) : null, sketchFallback ? (_jsxs(StatusCallout, { className: "copy-prompt__sketch-fallback", tone: "warning", "data-test": "sketch-dispatch-error", children: [_jsx("span", { children: sketchFallback.error }), _jsx(Button, { size: "compact", variant: "secondary", type: "button", "data-test": "sketch-copy-fallback", onClick: () => {
+                            void copyHandoff(sketchFallback.handoff).then(() => setSketchFallback(null)).catch(() => undefined);
                         }, children: "Copy prompt" })] })) : null, _jsx(SettingsDialog, { open: settingsOpen, initialSection: settingsSection, value: customInstructions, onValueChange: handleCustomInstructionsChange, onOpenChange: setSettingsOpen, projectId: runtimeConfig.projectId, origin: window.location.origin, snapshot: agent, onConnect: () => agentClient.connect(), onTakeOver: () => agentClient.takeOver(), onDisconnect: () => agentClient.disconnect(), onCheckAgain: () => agentClient.checkConnection() })] }));
 }

package/dist/inspector/shell/EmptyState.js

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

package/dist/inspector/shell/InspectorShell.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { IconLayoutSidebarRight, IconSettings } from "@tabler/icons-react";
+import { IconLayoutSidebarRight } from "@tabler/icons-react";
 import { useInspectorOpen, toggleInspector, setInspectorOpen } from "./openStore.js";
 import { useSelectedElement, useSelectedElements, setSelectedElement, removeSelectedElement, } from "../selection/selectionStore.js";
 import { findTokenRow } from "../styleEditors/rowLookup.js";
 import { useBrowserCssInspection } from "../inspection/useBrowserCssInspection.js";
 import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
+import { AgentStatusButton } from "./AgentStatusButton.js";
 import { SpacingBox } from "../styleEditors/SpacingBox.js";
 import { Typography } from "../styleEditors/Typography.js";
 import { isTextRelevant } from "../styleEditors/textRelevance.js";
+import { BackgroundEditor } from "../styleEditors/BackgroundEditor.js";
 import { ColorPicker } from "../styleEditors/ColorPicker.js";
 import { BorderEditor } from "../styleEditors/BorderEditor.js";
 import { AppearanceSection } from "../styleEditors/AppearanceSection.js";
@@ -25,12 +27,11 @@ 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 { getInspectorToggleShortcutLabel, isEditableEvent } from "./shortcuts.js";
 import { formatInspectorLabel } from "../ui/labels.js";
 import { FieldRow } from "../ui/FieldRow.js";
 import { Select } from "../ui/Select.js";
-import { clearRestoreCount, clearSession } from "../canvas/sessionStore.js";
-import { hasWriteLease } from "../canvas/workspaceLease.js";
+import { clearSelectedFrameChanges } from "../canvas/sessionStore.js";
 import { useFocusedCardId, useSelectedCardId, } from "../canvas/canvasStore.js";
 import { getActiveCanvasFrame } from "../canvas/activeCanvasDocument.js";
 import { getElementWindow } from "../runtime/domRealm.js";
@@ -46,10 +47,8 @@ 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";
+import { useSketchInteractionActive } from "../sketch/interaction.js";
+import { Tooltip } from "../ui/Tooltip.js";
 function findFirstTokenRow(rows, properties) {
     for (const property of properties) {
         const row = findTokenRow(rows, property);
@@ -231,19 +230,12 @@ export function InspectorShell() {
         setSettingsOpen(true);
     }
     function clearInspectorSession() {
-        clearSession();
-        clearRestoreCount();
-        if (!hasWriteLease())
-            return;
-        cancelSketchInteraction();
-        closeSketchNote();
-        clearSketchClipboardHandoff();
-        void clearSketchesForProject(runtimeConfig.projectId).catch(() => undefined);
+        clearSelectedFrameChanges();
     }
-    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(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: () => {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "inspector-styles", children: UI_STYLES }), _jsxs("div", { className: "panel", "data-open": isOpen ? "true" : "false", children: [_jsxs("div", { className: "panel__tabs", "aria-label": "Inspector controls", children: [_jsxs("div", { className: "panel__header-row", "data-test": "inspect-tab", children: [_jsx(Tooltip, { content: "Hide inspector", shortcut: getInspectorToggleShortcutLabel(), stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", label: "Collapse inspector", "data-test": "collapse-inspector", disabled: sketchActive, style: { marginLeft: "calc(var(--space-8) * -1)" }, onClick: () => {
+                                                cancelInlineTextEdit();
+                                                setInspectorOpen(false);
+                                            }, children: _jsx(IconLayoutSidebarRight, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }) }), _jsxs("div", { className: "panel__header-actions", children: [_jsx(PeekOriginalButton, {}), _jsx(AgentStatusButton, { onOpenSettings: openSettings })] })] }), _jsx("div", { className: "panel__copy-row", children: _jsx(CopyPromptButton, { settingsOpen: settingsOpen, settingsSection: settingsSection, onOpenSettings: openSettings, onSettingsOpenChange: setSettingsOpen }) })] }), _jsxs("div", { className: "panel__body", children: [inlineTextFeedback ? (_jsx(StatusCallout, { tone: "danger", className: "inline-text-diagnostic", "data-test": "inline-text-diagnostic", role: "status", "aria-live": "polite", "aria-atomic": "true", children: _jsx("span", { children: inlineTextFeedback.message }) })) : null, selected ? (_jsxs(_Fragment, { children: [isMultiSelection || showInteractionState || hasEditScopeCallout ? (_jsxs("div", { className: `selection${hasEditScopeCallout ? "" : " selection--without-scope-callout"}`, "data-test": "selection", "data-selected-cid": selected.cid, "data-selected-src": selected.src, "data-selected-count": selectedElements.length, children: [isMultiSelection ? (_jsx("div", { className: "selection__summary", "data-test": "multi-selection-summary", children: _jsxs("span", { className: "selection__count", children: [selectedElements.length, " elements selected"] }) })) : null, hasEditScopeCallout ? (_jsx(StatusCallout, { tone: editScope === "rendered-instance" ? "neutral" : "accent", "data-test": "edit-scope", "data-lost": "false", children: editScope === "rendered-instance" ? (_jsxs("div", { className: "scope__unlinked", children: [_jsx("span", { children: "Element unlinked" }), _jsx(Button, { size: "compact", className: "scope__action", "data-test": "relink-element", onClick: () => {
                                                                 const overrideId = relinkElement(selected.domElement);
                                                                 if (overrideId)
                                                                     discardChangesForInstanceOverride(overrideId);
@@ -260,5 +252,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}`), 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] }));
+                                                    } }) })) : 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(BackgroundEditor, { element: selected, selection: styleSelection, 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(Tooltip, { children: _jsx(IconButton, { variant: "quiet", label: "Show inspector", className: "panel__restore-button", "data-test": "show-inspector", onClick: () => setInspectorOpen(true), children: _jsx(IconLayoutSidebarRight, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) }) })) : null] }));
 }

package/dist/inspector/shell/PeekOriginalButton.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useSyncExternalStore } from "react";
 import { IconButton } from "../ui/IconButton.js";
+import { Tooltip } from "../ui/Tooltip.js";
 import { PeekOriginalIcon } from "./PeekOriginalIcon.js";
-import { workspaceChangeStore } from "../changes/workspaceChanges.js";
+import { draftChangeStore } from "../changes/draftChanges.js";
 import { setOriginalPreviewActive, useOriginalPreviewActive, } from "./originalPreview.js";
-function useWorkspaceChangeCount() {
-    return useSyncExternalStore(workspaceChangeStore.subscribe, () => {
-        const snapshot = workspaceChangeStore.getSnapshot();
+function useDraftChangeCount() {
+    return useSyncExternalStore(draftChangeStore.subscribe, () => {
+        const snapshot = draftChangeStore.getSnapshot();
         return snapshot.changes.length + snapshot.structuralChanges.length;
     }, () => 0);
 }
@@ -17,7 +18,7 @@ function useWorkspaceChangeCount() {
  */
 export function PeekOriginalButton() {
     const active = useOriginalPreviewActive();
-    const changeCount = useWorkspaceChangeCount();
+    const changeCount = useDraftChangeCount();
     const disabled = changeCount === 0;
     useEffect(() => {
         if (!active)
@@ -35,23 +36,23 @@ export function PeekOriginalButton() {
     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")
+    return (_jsx(Tooltip, { content: disabled ? "No changes to preview" : "Hold to view original", shortcut: disabled ? undefined : "\\", stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", "data-test": "peek-original-button", label: "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);
-        }, onKeyUp: (event) => {
-            if (event.key === " " || event.key === "Enter")
-                setOriginalPreviewActive(false);
-        }, onBlur: () => setOriginalPreviewActive(false), onContextMenu: (event) => {
-            if (active)
-                event.preventDefault();
-        }, children: _jsx(PeekOriginalIcon, {}) }));
+            }, 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/originalPreview.js

@@ -1,6 +1,6 @@
 import { useSyncExternalStore } from "react";
-import { workspaceChangeStore } from "../changes/workspaceChanges.js";
-import { applyHostWorkspaceProjection, compileWorkspaceProjection, } from "../projection/workspaceProjection.js";
+import { draftChangeStore } from "../changes/draftChanges.js";
+import { applyHostDraftProjection, compileDraftProjection, } from "../projection/draftProjection.js";
 import { isEditorShellDocument } from "../runtime/editorShell.js";
 let previewingOriginal = false;
 const listeners = new Set();
@@ -29,8 +29,8 @@ function notifyOriginalPreviewListeners() {
 function applyEmptyHostProjection() {
     if (isEditorShellDocument())
         return;
-    const { revision } = workspaceChangeStore.getSnapshot();
-    applyHostWorkspaceProjection({
+    const { revision } = draftChangeStore.getSnapshot();
+    applyHostDraftProjection({
         sourceRevision: revision,
         managedStyles: { rules: [], css: "" },
         instanceOverrides: [],
@@ -42,7 +42,7 @@ function applyEmptyHostProjection() {
 function applyCanonicalHostProjection() {
     if (isEditorShellDocument())
         return;
-    applyHostWorkspaceProjection(compileWorkspaceProjection(workspaceChangeStore.getSnapshot()));
+    applyHostDraftProjection(compileDraftProjection(draftChangeStore.getSnapshot()));
 }
 /**
  * Hold-to-view-original (NUD-30). While active the host document shows the