nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/shell/InspectorShell.js

@@ -1,43 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
-import { IconLayoutSidebarRight } from "@tabler/icons-react";
-import { useInspectorOpen, toggleInspector, setInspectorOpen } from "./openStore.js";
+import { InspectorPanel } from "./InspectorPanel.js";
+import { InspectorSelection } from "./InspectorSelection.js";
+import { describeElement } from "./elementName.js";
+import { InspectorEditors } from "./InspectorEditors.js";
+import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { useInspectorOpen, setInspectorOpen } from "./openStore.js";
 import { useSelectedElement, useSelectedElements, setSelectedElement, removeSelectedElement, } from "../selection/selectionStore.js";
 import { findTokenRow } from "../styleEditors/rowLookup.js";
 import { useBrowserCssInspection } from "../inspection/useBrowserCssInspection.js";
 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";
-import { BoxShadowEditor } from "../styleEditors/BoxShadowEditor.js";
-import { LayoutSection } from "../styleEditors/LayoutSection.js";
 import { ChangesLog } from "./ChangesLog.js";
-import { discardChangesForInstanceOverride, undo, redo } from "../changes/changesLog.js";
+import { discardChangesForInstanceOverride, undo, redo } from "../drafts/store.js";
 import { countSourceSiteMatches, getEditScope, relinkElement, sourceSiteSelector, unlinkElement } from "../selection/editScope.js";
 import { canEditStyles } from "../tokens/editActions.js";
-import { Button } from "../ui/Button.js";
 import { CopyPromptButton } from "./CopyPromptButton.js";
 import { PeekOriginalButton } from "./PeekOriginalButton.js";
+import { NudgeLogoIcon } from "./NudgeLogoIcon.js";
 import { StatusCallout } from "../ui/StatusCallout.js";
-import { IconButton } from "../ui/IconButton.js";
 import { UI_STYLES } from "../ui/styles.js";
 import { getActiveStyleState, setActiveStyleState } from "./styleState.js";
+import { useInteractionStatePreview } from "./interactionStatePreview.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 { clearSelectedFrameChanges } from "../canvas/sessionStore.js";
 import { useFocusedCardId, useSelectedCardId, } from "../canvas/canvasStore.js";
 import { getActiveCanvasFrame } from "../canvas/activeCanvasDocument.js";
+import { canvasFrameHost } from "../canvas/canvasFrame.js";
+import { getFrameRegistryVersion, subscribeFrameRegistry } from "../canvas/projection.js";
 import { getElementWindow } from "../runtime/domRealm.js";
 import { deleteElement, nudgeElement } from "../overlay/structuralGestures.js";
-import { AtRuleContextProvider } from "../ui/AtRuleContext.js";
-import { ComponentPropsSection } from "../componentSemantics/ComponentPropsSection.js";
+import { ComponentPropsSection, useComponentProps } from "../componentSemantics/ComponentPropsSection.js";
 import { cancelInlineTextEdit, isInlineTextEditingActive, useInlineTextDiagnostic, } from "../inline-text/inlineTextEditor.js";
 import { getInlineTextFeedback } from "../inline-text/inlineTextFeedback.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
@@ -45,10 +38,10 @@ import { EmptyState } from "./EmptyState.js";
 import { createStyleSelection } from "../selection/styleSelection.js";
 import { intersectTokenEntries } from "../inspection/selectionProperty.js";
 import { isNudgeUiDev } from "../runtime/devFlag.js";
-import { isDemoRuntime } from "../runtime/runtimeConfig.js";
+import { isDemoRuntime, isNudgeUiFeatureEnabled } from "../runtime/runtimeConfig.js";
 import { SketchWorkspace } from "../sketch/SketchWorkspace.js";
 import { useSketchInteractionActive } from "../sketch/interaction.js";
-import { Tooltip } from "../ui/Tooltip.js";
+import { InspectorStyle } from "../ui/InspectorStyle.js";
 function findFirstTokenRow(rows, properties) {
     for (const property of properties) {
         const row = findTokenRow(rows, property);
@@ -62,7 +55,6 @@ function findFirstTokenRow(rows, properties) {
     }
     return null;
 }
-export { toggleInspector, setInspectorOpen };
 function nodeMatchesSelector(node, selector) {
     if (!selector || node.nodeType !== node.ELEMENT_NODE)
         return false;
@@ -88,32 +80,34 @@ function scopeMutationAffectsSelection(records, selected) {
 export function InspectorShell() {
     const isOpen = useInspectorOpen();
     const runtimeConfig = useNudgeUiRuntimeConfig();
-    const sketchEnabled = isNudgeUiDev() && !isDemoRuntime();
+    const sketchEnabled = isNudgeUiDev()
+        && !runtimeConfig.inspectionUnavailableReason
+        && (!isDemoRuntime() || isNudgeUiFeatureEnabled(runtimeConfig.features, "sketch"));
     const sketchActive = useSketchInteractionActive();
     const selectedCardId = useSelectedCardId();
     const focusedCardId = useFocusedCardId();
-    const sketchHost = selectedCardId || focusedCardId ? getActiveCanvasFrame() : null;
+    useSyncExternalStore(subscribeFrameRegistry, getFrameRegistryVersion);
+    const sketchHost = selectedCardId || focusedCardId ? canvasFrameHost(getActiveCanvasFrame()) : null;
     const selected = useSelectedElement();
     const selectedElements = useSelectedElements();
+    const componentProps = useComponentProps(selected);
     const inlineTextFeedback = getInlineTextFeedback(useInlineTextDiagnostic());
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [settingsSection, setSettingsSection] = useState("instructions");
     const [scopeRevision, refreshScope] = useState(0);
     const [styleState, setStyleState] = useState(getActiveStyleState());
+    useInteractionStatePreview(selectedElements.length === 1 ? selectedElements[0].domElement : null, styleState);
     const cssInspection = useBrowserCssInspection(selectedElements, styleState);
     const isMultiSelection = selectedElements.length > 1;
     useEffect(() => {
-        // A new selection should never inherit an incidental state from the
-        // previous element. Base is the inspector's deliberate default.
+        // A new selection must not inherit an incidental state from the previous element; base is the deliberate default.
         setActiveStyleState("base");
         setStyleState("base");
     }, [selected?.domElement, isMultiSelection]);
     useEffect(() => {
         if (!selected)
             return;
-        // The selected element can live inside a card iframe (canvas mode); observe
-        // its own ownerDocument rather than the parent app's document, otherwise
-        // removal inside the iframe would never be noticed.
+        // In canvas mode the element can live in a card iframe, so observe its ownerDocument, not the parent app's.
         const observers = [];
         const roots = new Map();
         for (const target of selectedElements) {
@@ -144,7 +138,7 @@ export function InspectorShell() {
         return () => observers.forEach((observer) => observer.disconnect());
     }, [selectedElements, scopeRevision]);
     useEffect(() => {
-        if (sketchActive)
+        if (sketchActive || runtimeConfig.inspectionUnavailableReason)
             return;
         function onKeydown(event) {
             if (isInlineTextEditingActive())
@@ -177,8 +171,7 @@ export function InspectorShell() {
                 setSelectedElement(null);
                 return;
             }
-            // macOS labels the physical Backspace key as Delete, while browsers
-            // report it as "Backspace". Support both without stealing text edits.
+            // macOS labels the physical Backspace key as Delete; browsers report "Backspace". Support both.
             if (event.key === "Delete" || event.key === "Backspace") {
                 event.preventDefault();
                 if (!isMultiSelection && deleteElement(selected))
@@ -197,7 +190,7 @@ export function InspectorShell() {
         }
         window.addEventListener("keydown", onKeydown);
         return () => window.removeEventListener("keydown", onKeydown);
-    }, [isMultiSelection, selected, sketchActive]);
+    }, [isMultiSelection, selected, sketchActive, runtimeConfig.inspectionUnavailableReason]);
     const inspectionSnapshot = cssInspection.element;
     const styleSelection = useMemo(() => createStyleSelection(selectedElements, cssInspection.elements, selected), [cssInspection.elements, selected, selectedElements]);
     const selectionEditable = useMemo(() => styleSelection ? canEditStyles(styleSelection.target) : false, [scopeRevision, styleSelection]);
@@ -205,7 +198,6 @@ export function InspectorShell() {
     const tokenRows = useMemo(() => styleSelection ? [...styleSelection.primaryRows] : [], [styleSelection]);
     const availableInteractionStates = inspectionSnapshot?.availableStates ?? [];
     const showText = selectedElements.length > 0 && selectedElements.every((element, index) => isTextRelevant(element.domElement, cssInspection.elements[index]?.properties ?? []));
-    const showInteractionState = !isMultiSelection && availableInteractionStates.length > 2;
     const paintedBackgroundRow = findFirstTokenRow(tokenRows, ["background-color", "background"]);
     const backgroundTokenRow = useMemo(() => {
         if (!selected)
@@ -220,8 +212,6 @@ export function InspectorShell() {
     const sourceSiteMatchCount = selected && editScope === "source-site"
         ? countSourceSiteMatches(selected.domElement, scopeRevision)
         : 0;
-    const hasEditScopeCallout = !isMultiSelection
-        && (editScope === "rendered-instance" || sourceSiteMatchCount > 1);
     function refreshScopeState() {
         refreshScope((revision) => revision + 1);
     }
@@ -230,27 +220,23 @@ export function InspectorShell() {
         setSettingsOpen(true);
     }
     function clearInspectorSession() {
-        clearSelectedFrameChanges();
+        // Sketch persistence failures are reported by the sketch store in the panel.
+        void clearSelectedFrameChanges().catch(() => undefined);
     }
-    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "inspector-styles", children: UI_STYLES }), _jsxs("div", { className: "panel", "data-open": isOpen ? "true" : "false", children: [_jsxs("div", { className: "panel__tabs", "aria-label": "Inspector controls", children: [_jsxs("div", { className: "panel__header-row", "data-test": "inspect-tab", children: [_jsx(Tooltip, { content: "Hide inspector", shortcut: getInspectorToggleShortcutLabel(), stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", label: "Collapse inspector", "data-test": "collapse-inspector", disabled: sketchActive, style: { marginLeft: "calc(var(--space-8) * -1)" }, onClick: () => {
-                                                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);
-                                                                refreshScopeState();
-                                                            }, children: "Relink" })] })) : (_jsxs("div", { className: "scope__linked", children: [_jsxs("span", { children: ["Affects ", sourceSiteMatchCount, " elements."] }), _jsx(Button, { size: "compact", variant: "quiet", "data-test": "unlink-element", onClick: () => {
-                                                                unlinkElement(selected.domElement);
-                                                                refreshScopeState();
-                                                            }, children: "Unlink" })] })) })) : null, 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 nextState = availableInteractionStates.find((candidate) => candidate === state);
-                                                        if (!nextState)
-                                                            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(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] }));
+    return (_jsxs(_Fragment, { children: [_jsx(InspectorStyle, { testId: "inspector-styles", css: UI_STYLES }), _jsxs(InspectorPanel, { isOpen: isOpen, collapseDisabled: sketchActive, toggleShortcut: getInspectorToggleShortcutLabel(), onOpenChange: (open) => {
+                    if (!open)
+                        cancelInlineTextEdit();
+                    setInspectorOpen(open);
+                }, headerActions: _jsxs(_Fragment, { children: [_jsx(PeekOriginalButton, {}), _jsx(AgentStatusButton, { onOpenSettings: openSettings })] }), prompt: _jsx(CopyPromptButton, { settingsOpen: settingsOpen, settingsSection: settingsSection, onOpenSettings: openSettings, onSettingsOpenChange: setSettingsOpen, onClearChanges: clearInspectorSession }), children: [inlineTextFeedback ? (_jsx(StatusCallout, { tone: "danger", className: "inline-text-diagnostic", "data-test": "inline-text-diagnostic", role: "status", "aria-live": "polite", "aria-atomic": "true", children: _jsx("span", { children: inlineTextFeedback.message }) })) : null, runtimeConfig.inspectionUnavailableReason ? (_jsxs(StatusCallout, { tone: "danger", "data-test": "page-inspection-error", role: "status", children: ["Can\u2019t load Nudge on this page due to ", runtimeConfig.inspectionUnavailableReason, "."] })) : selected ? (_jsxs(_Fragment, { children: [_jsx(InspectorSelection, { identity: selected, count: selectedElements.length, isComponent: !isMultiSelection && componentProps !== null, name: isMultiSelection ? { title: `${selectedElements.length} elements` } : componentProps ? { title: componentProps.target.meta.componentName } : describeElement(selected.domElement), editScope: editScope, sourceSiteMatchCount: sourceSiteMatchCount, styleState: styleState, availableInteractionStates: availableInteractionStates, onStyleStateChange: (state) => {
+                                    setActiveStyleState(state);
+                                    setStyleState(state);
+                                }, onRelink: () => {
+                                    const overrideId = relinkElement(selected.domElement);
+                                    if (overrideId)
+                                        discardChangesForInstanceOverride(overrideId);
+                                    refreshScopeState();
+                                }, onUnlink: () => {
+                                    unlinkElement(selected.domElement);
+                                    refreshScopeState();
+                                }, children: !isMultiSelection ? _jsx(ComponentPropsSection, { selected: selected }) : null }), selectionEditable ? (_jsx(InspectorEditors, { selected: selected, styleSelection: styleSelection, tokenEntries: tokenEntries, tokenRows: tokenRows, styleState: styleState, showText: showText, backgroundTokenRow: backgroundTokenRow })) : (_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] }));
 }

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

@@ -0,0 +1,5 @@
+import type { ReactElement } from "react";
+/** Same artwork as the extension and landing favicons. */
+export declare function NudgeLogoIcon({ size }: {
+    size?: string;
+}): ReactElement;

package/dist/inspector/shell/NudgeLogoIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Same artwork as the extension and landing favicons. */
+export function NudgeLogoIcon({ size = "var(--icon-size-small)" }) {
+    return (_jsxs("svg", { viewBox: "5 4 35 35", width: size, height: size, fill: "currentColor", "aria-hidden": "true", children: [_jsx("path", { d: "M14.7742 6C27.6015 6 38 16.569 38 29.6066V38H30.7742V29.6066C30.7742 20.6251 23.6107 13.3443 14.7742 13.3443H13.2258V38H6V6H14.7742Z" }), _jsx("path", { d: "M39 15.6629C37 11.5 33 7 28.4919 5H39V15.6629Z" })] }));
+}

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

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

package/dist/inspector/shell/PeekOriginalButton.js

@@ -3,19 +3,14 @@ import { useEffect, useSyncExternalStore } from "react";
 import { IconButton } from "../ui/IconButton.js";
 import { Tooltip } from "../ui/Tooltip.js";
 import { PeekOriginalIcon } from "./PeekOriginalIcon.js";
-import { draftChangeStore } from "../changes/draftChanges.js";
+import { getActiveDraftChanges, subscribeActiveDraftChanges } from "../drafts/store.js";
 import { setOriginalPreviewActive, useOriginalPreviewActive, } from "./originalPreview.js";
 function useDraftChangeCount() {
-    return useSyncExternalStore(draftChangeStore.subscribe, () => {
-        const snapshot = draftChangeStore.getSnapshot();
+    return useSyncExternalStore(subscribeActiveDraftChanges, () => {
+        const snapshot = getActiveDraftChanges();
         return snapshot.changes.length + snapshot.structuralChanges.length;
     }, () => 0);
 }
-/**
- * Press-and-hold button that previews the page without inspector changes
- * (NUD-30). Releasing restores the edited preview; canonical intent is never
- * cleared, so nothing is lost while held.
- */
 export function PeekOriginalButton() {
     const active = useOriginalPreviewActive();
     const changeCount = useDraftChangeCount();

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

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

package/dist/inspector/shell/PeekOriginalIcon.js

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

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

@@ -0,0 +1,21 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type ButtonProps } from "../ui/Button.js";
+export interface PromptActionButtonProps extends ButtonProps {
+    readonly copied?: boolean;
+    readonly agentState?: string;
+    readonly busy?: boolean;
+    readonly icon?: ReactNode;
+    readonly label?: ReactNode;
+    readonly badgeCount?: number;
+    readonly hasMenu?: boolean;
+}
+/** Presents a prompt action without owning clipboard or agent connections. */
+export declare const PromptActionButton: import("react").ForwardRefExoticComponent<PromptActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface PromptActionRowProps {
+    readonly children: ReactNode;
+    /** Clears the pending changes; the clear changes action stays beside the prompt action and disables without changes. */
+    readonly onClear?: () => void;
+    readonly hasChanges?: boolean;
+}
+/** A prompt action with a matching clear changes action beside it, disabled until there are changes. */
+export declare function PromptActionRow({ children, onClear, hasChanges }: PromptActionRowProps): ReactElement;

package/dist/inspector/shell/PromptActionButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { IconChevronDown, IconCopy, IconRestore } from "@tabler/icons-react";
+import { Button } from "../ui/Button.js";
+import { IconButton } from "../ui/IconButton.js";
+import { Tooltip } from "../ui/Tooltip.js";
+/** Presents a prompt action without owning clipboard or agent connections. */
+export const PromptActionButton = forwardRef(function PromptActionButton({ copied = false, agentState = "disconnected", busy = false, icon = _jsx(IconCopy, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), label = "Copy prompt", badgeCount = 0, hasMenu = false, ...props }, ref) {
+    return _jsxs(Button, { ref: ref, variant: "primary", className: "copy-prompt__main", "data-test": "copy-prompt", type: "button", "data-copied": copied ? "true" : "false", "data-agent-state": agentState, "aria-busy": busy ? "true" : undefined, ...props, children: [icon, label, badgeCount > 0 ? _jsx("span", { className: "copy-prompt__change-count", "data-test": "copy-prompt-change-count", children: badgeCount }) : null, hasMenu ? _jsx(IconChevronDown, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) : null] });
+});
+/** A prompt action with a matching clear changes action beside it, disabled until there are changes. */
+export function PromptActionRow({ children, onClear, hasChanges = false }) {
+    return (_jsxs("div", { className: "copy-prompt__row", children: [children, onClear ? (_jsx(Tooltip, { children: _jsx(IconButton, { className: "copy-prompt__clear-changes", variant: "secondary", label: "Clear changes", "data-test": "copy-prompt-clear", disabled: !hasChanges, onClick: onClear, children: _jsx(IconRestore, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }) })) : null] }));
+}

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

@@ -0,0 +1,5 @@
+export interface ElementName {
+    readonly title: string;
+}
+/** The title is derived from the tag, with an accessible name when the author gave one. */
+export declare function describeElement(element: HTMLElement): ElementName;

package/dist/inspector/shell/elementName.js

@@ -0,0 +1,29 @@
+const TAG_LABELS = new Map([
+    ["a", "Link"],
+    ["article", "Article"],
+    ["aside", "Aside"],
+    ["button", "Button"],
+    ["footer", "Footer"],
+    ["form", "Form"],
+    ["header", "Header"],
+    ["img", "Image"],
+    ["input", "Input"],
+    ["label", "Label"],
+    ["li", "List item"],
+    ["main", "Main"],
+    ["nav", "Navigation"],
+    ["ol", "List"],
+    ["p", "Paragraph"],
+    ["section", "Section"],
+    ["select", "Select"],
+    ["svg", "Icon"],
+    ["textarea", "Text area"],
+    ["ul", "List"],
+]);
+/** The title is derived from the tag, with an accessible name when the author gave one. */
+export function describeElement(element) {
+    const tag = element.localName.toLowerCase();
+    const base = /^h[1-6]$/.test(tag) ? `Heading ${tag.slice(1)}` : TAG_LABELS.get(tag) ?? (tag.charAt(0).toUpperCase() + tag.slice(1));
+    const accessible = element.getAttribute("aria-label")?.trim();
+    return { title: accessible ? `${base} · ${accessible}` : base };
+}

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

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

package/dist/inspector/shell/interactionStatePreview.js

@@ -0,0 +1,107 @@
+import { useLayoutEffect } from "react";
+import { collectRules, invalidateStyleResolutionCache, subscribeDocumentRevision } from "../tokens/resolution/cssomCollector.js";
+import { selectorPseudoClasses, splitSelectorAtTopLevel } from "../tokens/resolution/selectorSemantics.js";
+import { adoptStylesheet, allowsStyleElements, releaseAdoptedStylesheet, STATE_PREVIEW_SHEET_ID } from "../runtime/ownedStylesheets.js";
+import { INTERACTION_STATES } from "./styleState.js";
+const MARKER = "data-nudge-ui-state-preview";
+const interactionStates = new Set(INTERACTION_STATES);
+/** Matches native interaction states and the Inspector's temporary CSS state. */
+export function selectorForInteractionStatePreview(selector) {
+    let transformed = selector;
+    for (const pseudo of [...selectorPseudoClasses(selector)].reverse()) {
+        if (!interactionStates.has(pseudo.name))
+            continue;
+        // :where() keeps the replacement at the original pseudo-class specificity.
+        const replacement = `:is(:${pseudo.name}:where(:not([${MARKER}])), [${MARKER}="${pseudo.name}"])`;
+        transformed = transformed.slice(0, pseudo.start) + replacement + transformed.slice(pseudo.end);
+    }
+    return transformed;
+}
+function previewSelector(selector) {
+    const transformed = selectorForInteractionStatePreview(selector);
+    // Same added specificity on every branch preserves their relative cascade while overriding native pointer states.
+    const scope = `:where([${MARKER}], [${MARKER}] *):is(#${STATE_PREVIEW_SHEET_ID}, *)`;
+    // A scope must precede a pseudo-element, which cannot take an attribute.
+    let parentheses = 0;
+    let brackets = 0;
+    let quote = null;
+    for (let index = 0; index < transformed.length; index++) {
+        const character = transformed[index];
+        if (character === "\\") {
+            index++;
+            continue;
+        }
+        if (quote) {
+            if (character === quote)
+                quote = null;
+            continue;
+        }
+        if (character === '"' || character === "'") {
+            quote = character;
+            continue;
+        }
+        if (character === "[")
+            brackets++;
+        else if (character === "]")
+            brackets--;
+        else if (brackets === 0) {
+            if (character === "(")
+                parentheses++;
+            else if (character === ")")
+                parentheses--;
+            else if (parentheses === 0 && /^::|^:(?:before|after|first-line|first-letter)\b/.test(transformed.slice(index))) {
+                return transformed.slice(0, index) + scope + transformed.slice(index);
+            }
+        }
+    }
+    return transformed + scope;
+}
+/** Previews interaction states without dispatching events or changing application state. */
+export function startInteractionStatePreview(element, state) {
+    if (state === "base")
+        return () => undefined;
+    const doc = element.ownerDocument;
+    const previousMarker = element.getAttribute(MARKER);
+    element.setAttribute(MARKER, state);
+    const style = allowsStyleElements(doc) ? doc.createElement("style") : null;
+    if (style) {
+        style.id = STATE_PREVIEW_SHEET_ID;
+        style.setAttribute("data-nudge-ui", "state-preview");
+        (doc.head ?? doc.documentElement).appendChild(style);
+    }
+    const refresh = () => {
+        const css = collectRules(doc).rules.map((rule) => {
+            const selector = splitSelectorAtTopLevel(rule.selectorText, ",")
+                .map((branch) => previewSelector(branch.trim())).join(", ");
+            const declarations = rule.declarations.map(({ property, value, important }) => `${property}: ${value}${important ? " !important" : ""};`).join(" ");
+            let text = `${selector} { ${declarations} }`;
+            for (const wrapper of [...(rule.atRules ?? [])].reverse()) {
+                text = `@${wrapper.kind} ${wrapper.params} { ${text} }`;
+            }
+            if (rule.layer)
+                text = `@layer ${rule.layer} { ${text} }`;
+            return text;
+        }).join("\n");
+        if (style)
+            style.textContent = css;
+        else
+            adoptStylesheet(doc, STATE_PREVIEW_SHEET_ID, css);
+    };
+    refresh();
+    // Inspection excludes the preview sheet, but its painted values have changed.
+    invalidateStyleResolutionCache(doc);
+    const unsubscribe = subscribeDocumentRevision(doc, refresh);
+    return () => {
+        unsubscribe();
+        style?.remove();
+        releaseAdoptedStylesheet(doc, STATE_PREVIEW_SHEET_ID);
+        if (previousMarker === null)
+            element.removeAttribute(MARKER);
+        else
+            element.setAttribute(MARKER, previousMarker);
+        invalidateStyleResolutionCache(doc);
+    };
+}
+export function useInteractionStatePreview(element, state) {
+    useLayoutEffect(() => element ? startInteractionStatePreview(element, state) : undefined, [element, state]);
+}

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

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

package/dist/inspector/shell/originalPreview.js

@@ -1,7 +1,4 @@
 import { useSyncExternalStore } from "react";
-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();
 export function isOriginalPreviewActive() {
@@ -16,7 +13,11 @@ export function subscribeOriginalPreview(listener) {
 export function useOriginalPreviewActive() {
     return useSyncExternalStore(subscribeOriginalPreview, () => previewingOriginal, () => false);
 }
-function notifyOriginalPreviewListeners() {
+/** While active the document shows the page without inspector changes; canonical intent is never cleared. */
+export function setOriginalPreviewActive(next) {
+    if (next === previewingOriginal)
+        return;
+    previewingOriginal = next;
     for (const listener of listeners) {
         try {
             listener();
@@ -26,36 +27,3 @@ function notifyOriginalPreviewListeners() {
         }
     }
 }
-function applyEmptyHostProjection() {
-    if (isEditorShellDocument())
-        return;
-    const { revision } = draftChangeStore.getSnapshot();
-    applyHostDraftProjection({
-        sourceRevision: revision,
-        managedStyles: { rules: [], css: "" },
-        instanceOverrides: [],
-        structuralChanges: [],
-        textContentChanges: [],
-        componentOverrides: [],
-    });
-}
-function applyCanonicalHostProjection() {
-    if (isEditorShellDocument())
-        return;
-    applyHostDraftProjection(compileDraftProjection(draftChangeStore.getSnapshot()));
-}
-/**
- * Hold-to-view-original (NUD-30). While active the host document shows the
- * page without any inspector changes. Canonical intent stays in the workspace
- * store, so releasing restores the edited preview without loss.
- */
-export function setOriginalPreviewActive(next) {
-    if (next === previewingOriginal)
-        return;
-    previewingOriginal = next;
-    if (previewingOriginal)
-        applyEmptyHostProjection();
-    else
-        applyCanonicalHostProjection();
-    notifyOriginalPreviewListeners();
-}

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

@@ -1,3 +1,2 @@
-/** Read an inspector value from the selected authored state, falling back to
- * the browser only when CSSOM has no declaration to attribute. */
+/** Reads from the authored state; the browser is only the fallback when CSSOM has no declaration to attribute. */
 export declare function getStateStyleValue(el: HTMLElement, property: string, fallback?: string): string;

package/dist/inspector/shell/stateValue.js

@@ -1,14 +1,11 @@
 import { getActiveStyleState } from "./styleState.js";
-import { getBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
+import { readInspectionSnapshot } from "../inspection/inspectionSnapshot.js";
 import { getElementComputedStyle } from "../runtime/domRealm.js";
-/** Read an inspector value from the selected authored state, falling back to
- * the browser only when CSSOM has no declaration to attribute. */
+/** Reads from the authored state; the browser is only the fallback when CSSOM has no declaration to attribute. */
 export function getStateStyleValue(el, property, fallback = "") {
     try {
         const state = getActiveStyleState();
-        // Keep the browser's exact computed value for ordinary Base inspection.
-        // Authored resolution is needed when the live element is transiently
-        // interacted with, or when the user explicitly selected another state.
+        // Base inspection uses the browser's computed value unless the element is transiently hovered or focused.
         const hasLiveInteraction = [":hover", ":active", ":focus", ":focus-visible"].some((selector) => {
             try {
                 return el.matches(selector);
@@ -20,8 +17,7 @@ export function getStateStyleValue(el, property, fallback = "") {
         if (state === "base" && !hasLiveInteraction) {
             return getElementComputedStyle(el).getPropertyValue(property).trim() || fallback;
         }
-        const rows = getBrowserCssInspection(el.ownerDocument ?? document)
-            .inspect(el, { state }).properties;
+        const rows = readInspectionSnapshot(el, state)?.properties ?? [];
         const row = rows.find((candidate) => candidate.property === property)
             ?? (property === "background-color" ? rows.find((candidate) => candidate.property === "background") : undefined);
         if (row?.resolvedValue)

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

@@ -1,7 +1,6 @@
 export declare const INTERACTION_STATES: readonly ["hover", "active", "focus", "focus-visible", "disabled"];
 export type InteractionState = "base" | (typeof INTERACTION_STATES)[number];
-/** The selected authored interaction state. Kept outside React so edit actions
- * and history have the same context as the panel that initiated an edit. */
+/** Kept outside React so edit actions and history share the panel's context. */
 export declare function getActiveStyleState(): InteractionState;
 export declare function setActiveStyleState(state: InteractionState): void;
 export declare function selectorForInteractionState(selector: string, state: InteractionState): string;

package/dist/inspector/shell/styleState.js

@@ -1,7 +1,6 @@
 export const INTERACTION_STATES = ["hover", "active", "focus", "focus-visible", "disabled"];
 let activeState = "base";
-/** The selected authored interaction state. Kept outside React so edit actions
- * and history have the same context as the panel that initiated an edit. */
+/** Kept outside React so edit actions and history share the panel's context. */
 export function getActiveStyleState() {
     return activeState;
 }