nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/shell/CopyPromptButton.js

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

package/dist/inspector/shell/EmptyState.js

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

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

@@ -0,0 +1,16 @@
+import type { ReactElement } from "react";
+import type { ResolvedProperty, TokenEntry } from "../../css/model/index.js";
+import type { SelectedElement } from "../selection/selectionStore.js";
+import type { StyleSelection } from "../selection/styleSelection.js";
+import type { InteractionState } from "./styleState.js";
+export interface InspectorEditorsProps {
+    readonly selected: SelectedElement;
+    readonly styleSelection: StyleSelection | null;
+    readonly tokenEntries: TokenEntry[];
+    readonly tokenRows: ResolvedProperty[];
+    readonly styleState: InteractionState;
+    readonly showText: boolean;
+    readonly backgroundTokenRow: ResolvedProperty | null;
+}
+/** Composes the same style editors for the live inspector and fixture hosts. */
+export declare function InspectorEditors({ selected, styleSelection, tokenEntries, tokenRows, styleState, showText, backgroundTokenRow }: InspectorEditorsProps): ReactElement;

package/dist/inspector/shell/InspectorEditors.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { findTokenRow } from "../styleEditors/rowLookup.js";
+import { Typography } from "../styleEditors/Typography.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";
+import { BoxShadowEditor } from "../styleEditors/BoxShadowEditor.js";
+import { LayoutSection } from "../styleEditors/LayoutSection.js";
+import { AtRuleContextProvider } from "../ui/AtRuleContext.js";
+/** Composes the same style editors for the live inspector and fixture hosts. */
+export function InspectorEditors({ selected, styleSelection, tokenEntries, tokenRows, styleState, showText, backgroundTokenRow }) {
+    return (_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(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}`)] }) }));
+}

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

@@ -0,0 +1,12 @@
+import type { ReactElement, ReactNode } from "react";
+export interface InspectorPanelProps {
+    readonly isOpen: boolean;
+    readonly collapseDisabled?: boolean;
+    readonly toggleShortcut?: string;
+    readonly headerActions: ReactNode;
+    readonly prompt: ReactNode;
+    readonly children: ReactNode;
+    readonly onOpenChange: (open: boolean) => void;
+}
+/** Shared panel layout. The host supplies state, content, and commands. */
+export declare function InspectorPanel({ isOpen, collapseDisabled, toggleShortcut, headerActions, prompt, children, onOpenChange }: InspectorPanelProps): ReactElement;

package/dist/inspector/shell/InspectorPanel.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconLayoutSidebarRight } from "@tabler/icons-react";
+import { IconButton } from "../ui/IconButton.js";
+import { Tooltip } from "../ui/Tooltip.js";
+/** Shared panel layout. The host supplies state, content, and commands. */
+export function InspectorPanel({ isOpen, collapseDisabled, toggleShortcut, headerActions, prompt, children, onOpenChange }) {
+    return (_jsxs(_Fragment, { children: [_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: toggleShortcut, stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", label: "Collapse inspector", "data-test": "collapse-inspector", disabled: collapseDisabled, style: { marginLeft: "calc(var(--space-8) * -1)" }, onClick: () => onOpenChange(false), children: _jsx(IconLayoutSidebarRight, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }) }), _jsx("div", { className: "panel__header-actions", children: headerActions })] }), _jsx("div", { className: "panel__copy-row", children: prompt })] }), _jsx("div", { className: "panel__body", children: children })] }), !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: () => onOpenChange(true), children: _jsx(IconLayoutSidebarRight, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) }) })) : null] }));
+}

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

@@ -0,0 +1,24 @@
+import type { ReactElement, ReactNode } from "react";
+import type { InteractionState } from "./styleState.js";
+import type { ElementName } from "./elementName.js";
+export interface InspectorSelectionProps {
+    readonly identity?: {
+        readonly cid: string;
+        readonly src: string;
+    };
+    readonly count: number;
+    readonly name: ElementName | null;
+    /** The selection has editable component props, which links it like a shared source site does. */
+    readonly isComponent?: boolean;
+    /** Component props, shown between the name and the link status. */
+    readonly children?: ReactNode;
+    readonly editScope: "source-site" | "rendered-instance" | null;
+    readonly sourceSiteMatchCount: number;
+    readonly styleState: InteractionState;
+    readonly availableInteractionStates: readonly InteractionState[];
+    readonly onStyleStateChange: (state: InteractionState) => void;
+    readonly onRelink: () => void;
+    readonly onUnlink: () => void;
+}
+/** Presents selection scope and interaction states without reading the DOM. */
+export declare function InspectorSelection({ identity, count, name, isComponent, children, editScope, sourceSiteMatchCount, styleState, availableInteractionStates, onStyleStateChange, onRelink, onUnlink }: InspectorSelectionProps): ReactElement;

package/dist/inspector/shell/InspectorSelection.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { StatusCallout } from "../ui/StatusCallout.js";
+import { IconLink, IconSquareRotated, IconUnlink } from "@tabler/icons-react";
+import { IconButton } from "../ui/IconButton.js";
+import { FieldRow } from "../ui/FieldRow.js";
+import { Select } from "../ui/Select.js";
+import { formatInspectorLabel } from "../ui/labels.js";
+/** Presents selection scope and interaction states without reading the DOM. */
+export function InspectorSelection({ identity, count, name, isComponent = false, children, editScope, sourceSiteMatchCount, styleState, availableInteractionStates, onStyleStateChange, onRelink, onUnlink }) {
+    const showInteractionState = count === 1 && availableInteractionStates.length > 1;
+    const hasEditScopeCallout = count === 1 && (editScope === "rendered-instance" || sourceSiteMatchCount > 1);
+    return _jsx(_Fragment, { children: name || children || showInteractionState || hasEditScopeCallout ? (_jsxs("div", { className: `selection${hasEditScopeCallout ? "" : " selection--without-scope-callout"}`, "data-test": "selection", "data-selected-cid": identity?.cid, "data-selected-src": identity?.src, "data-selected-count": count, children: [name ? (_jsxs("div", { className: "editor__title-row selection__name", "data-test": "selection-name", children: [isComponent || (hasEditScopeCallout && editScope === "source-site") ? (_jsx(IconSquareRotated, { className: "selection__linked-icon", size: 14, stroke: 2, "aria-hidden": "true", "data-test": "selection-linked-icon" })) : null, _jsx("div", { className: "editor__title", children: name.title }), hasEditScopeCallout ? (_jsx(StatusCallout, { tone: editScope === "rendered-instance" ? "neutral" : "accent", className: "selection__scope", "data-test": "edit-scope", "data-lost": "false", children: editScope === "rendered-instance" ? (_jsxs("div", { className: "scope__unlinked", children: [_jsx("span", { children: "Unlinked" }), _jsx(IconButton, { variant: "quiet", label: "Relink element", className: "scope__action", "data-test": "relink-element", onClick: onRelink, children: _jsx(IconLink, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) })] })) : (_jsxs("div", { className: "scope__linked", children: [_jsxs("span", { children: ["Linked (", sourceSiteMatchCount, ")"] }), _jsx(IconButton, { variant: "quiet", label: "Unlink element", "data-test": "unlink-element", onClick: onUnlink, children: _jsx(IconUnlink, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) })] })) })) : null] })) : null, children, showInteractionState ? (_jsx(FieldRow, { label: "State", className: "style-state", "data-test": "style-state", children: _jsx(Select, { value: styleState, "data-test": "style-state-select", "aria-label": "Style State", options: availableInteractionStates.map((state) => ({
+                            value: state,
+                            label: formatInspectorLabel(state),
+                        })), onValueChange: (state) => {
+                            const next = availableInteractionStates.find((candidate) => candidate === state);
+                            if (next)
+                                onStyleStateChange(next);
+                        } }) })) : null] })) : null });
+}

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

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