nudge-ui 0.2.0

package/dist/inspector/shell/CopyPromptButton.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { IconCheck, 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 { 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 { 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 { createAgentPresentationAdapter } from "../canvas/agentPresentation.js";
+import { discardAgentDispatch, getAgentDispatchSize, recordAgentDispatch, verifyAndReconcileAgentDispatch, } from "../agent/verification.js";
+import { getClipboardHandoffRevision, getLastClipboardReconciledCount, recordClipboardHandoff, subscribeClipboardHandoff, } from "../prompt/clipboardHandoff.js";
+export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, settingsSection: controlledSettingsSection, onOpenSettings, onSettingsOpenChange, } = {}) {
+    const changes = useChanges();
+    const structuralChanges = useSyncExternalStore(subscribeStructuralChanges, getStructuralChanges, getStructuralChanges);
+    useSyncExternalStore(subscribeClipboardHandoff, getClipboardHandoffRevision, getClipboardHandoffRevision);
+    const reconciledCount = getLastClipboardReconciledCount();
+    const [copied, setCopied] = useState(false);
+    const [agentCompletionStatus, setAgentCompletionStatus] = useState(null);
+    const [agentCompletionSent, setAgentCompletionSent] = useState(0);
+    const [localSettingsOpen, setLocalSettingsOpen] = useState(false);
+    const [localSettingsSection, setLocalSettingsSection] = useState("instructions");
+    const settingsOpen = controlledSettingsOpen ?? localSettingsOpen;
+    const settingsSection = controlledSettingsSection ?? localSettingsSection;
+    const runtimeConfig = getNudgeUiRuntimeConfig();
+    const [customInstructions, setCustomInstructions] = useState(() => loadCustomInstructions(runtimeConfig.projectId));
+    const agentClient = useMemo(() => getAgentClient(runtimeConfig.projectId, { origin: window.location.origin }), [runtimeConfig.projectId]);
+    const agent = useAgentClient(runtimeConfig.projectId, agentClient);
+    const agentRef = useRef(agent);
+    agentRef.current = agent;
+    const hasChanges = changes.length + structuralChanges.length > 0;
+    useEffect(() => {
+        setCustomInstructions(loadCustomInstructions(runtimeConfig.projectId));
+    }, [runtimeConfig.projectId]);
+    useEffect(() => {
+        const canvas = createAgentPresentationAdapter({
+            projectId: runtimeConfig.projectId,
+            agentId: "agent",
+        });
+        agentClient.setCanvasCommandHandler((command) => canvas.execute(command));
+        return () => {
+            agentClient.setCanvasCommandHandler(undefined);
+            canvas.dispose();
+        };
+    }, [agentClient, runtimeConfig.projectId]);
+    useEffect(() => {
+        const revision = agent.request?.changeRevision;
+        if (agent.state !== "completed" || revision === undefined)
+            return;
+        const sent = getAgentDispatchSize(revision);
+        let active = true;
+        void verifyAndReconcileAgentDispatch(revision)
+            .then((removed) => {
+            if (!active)
+                return;
+            const latest = agentRef.current;
+            if (latest.request?.changeRevision !== revision || latest.state !== "completed")
+                return;
+            setAgentCompletionSent(sent);
+            setAgentCompletionStatus(removed > 0 ? "verified" : "completed");
+        })
+            .catch(() => {
+            if (!active)
+                return;
+            const latest = agentRef.current;
+            if (latest.request?.changeRevision !== revision || latest.state !== "completed")
+                return;
+            setAgentCompletionSent(sent);
+            setAgentCompletionStatus("completed");
+        });
+        return () => {
+            active = false;
+        };
+    }, [agent.request?.changeRevision, agent.state]);
+    const connecting = agent.state === "pairing";
+    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;
+    const disabled = 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 icon = copied
+        ? _jsx(IconCheck, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
+        : canConnect || connecting
+            ? _jsx(IconPlugConnected, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
+            : canSend || working
+                ? _jsx(IconSend, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
+                : _jsx(IconCopy, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" });
+    async function onClick() {
+        if (disabled)
+            return;
+        if (canConnect) {
+            await agentClient.connect();
+            return;
+        }
+        const hints = {
+            framework: runtimeConfig.framework,
+            stylingSystem: runtimeConfig.stylingSystem,
+        };
+        const text = generatePrompt(changes, hints, structuralChanges, customInstructions);
+        setAgentCompletionStatus(null);
+        setAgentCompletionSent(0);
+        if (canSend) {
+            const revision = createPromptRevision(changes, structuralChanges);
+            recordAgentDispatch(revision, changes, structuralChanges);
+            const response = await agentClient.dispatchPrompt(text, revision);
+            if (response)
+                return;
+            discardAgentDispatch(revision);
+        }
+        await copyToClipboard(text);
+        recordClipboardHandoff(changes, structuralChanges);
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1500);
+    }
+    function handleCustomInstructionsChange(value) {
+        setCustomInstructions(value);
+        saveCustomInstructions(runtimeConfig.projectId, value);
+    }
+    function setSettingsOpen(open) {
+        if (onSettingsOpenChange) {
+            onSettingsOpenChange(open);
+        }
+        else {
+            setLocalSettingsOpen(open);
+        }
+    }
+    function openSettings(section) {
+        setLocalSettingsSection(section);
+        onOpenSettings?.(section);
+        setSettingsOpen(true);
+    }
+    function openMcpConnection() {
+        openSettings("mcp");
+    }
+    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [_jsxs(Button, { variant: "primary", className: "copy-prompt__main", "data-test": "copy-prompt", type: "button", disabled: disabled, "data-copied": copied ? "true" : "false", "data-agent-state": agent.state, "aria-busy": working || connecting ? "true" : undefined, title: agent.error, onClick: onClick, children: [icon, label] }), statusAction ? (_jsx(StatusCallout, { className: "copy-prompt__agent-status", tone: agentStatus.tone, "data-test": "agent-connection-status", children: _jsxs("div", { className: "copy-prompt__agent-status-content", children: [_jsx("span", { role: "status", children: agentStatus.label }), _jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: openMcpConnection, children: statusAction.label })] }) })) : agentStatus.kind === "listening" ? (_jsxs("div", { className: "copy-prompt__agent-status copy-prompt__agent-status--listening", "data-test": "agent-connection-status", role: "status", children: [_jsx(IconCheck, { size: "var(--icon-size-small)", stroke: 2, "aria-hidden": "true" }), _jsx("span", { children: agentStatus.label })] })) : null, reconciledCount > 0 ? (_jsxs("p", { className: "copy-prompt__hint", "data-test": "clipboard-reconciled-hint", role: "status", children: ["Removed ", reconciledCount, " implemented ", reconciledCount === 1 ? "change" : "changes", " from the next prompt."] })) : null, agentCompletionStatus === "verified" ? (_jsx("p", { className: "copy-prompt__hint", "data-test": "agent-verified-hint", role: "status", children: "Agent changes verified." })) : agentCompletionStatus === "completed" ? (_jsx("p", { className: "copy-prompt__hint", "data-test": "agent-completed-hint", role: "status", children: agentCompletionSent > 0
+                    ? "Agent completed. Remaining edits were preserved because they were not verified."
+                    : "Agent completed." })) : null, _jsx(SettingsDialog, { open: settingsOpen, initialSection: settingsSection, value: customInstructions, onValueChange: handleCustomInstructionsChange, onOpenChange: setSettingsOpen, projectId: runtimeConfig.projectId, origin: window.location.origin, snapshot: agent, onConnect: () => agentClient.connect(), onDisconnect: () => agentClient.disconnect(), onCheckAgain: () => agentClient.checkConnection() })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { ReactElement } from "react";
+import type { SelectedElement } from "../selection/selectionStore.js";
+interface DomNavigationProps {
+    selected: SelectedElement;
+    hierarchy: HTMLElement[];
+}
+export declare function DomNavigation({ selected, hierarchy }: DomNavigationProps): ReactElement | null;
+export {};

package/dist/inspector/shell/DomNavigation.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
+import { setSelectedElement } from "../selection/selectionStore.js";
+import { computeDescendants } from "../selection/hierarchy.js";
+import { Button } from "../ui/Button.js";
+const MAX_PARENT_LEVELS = 2;
+const MAX_CHILD_NODES = 2;
+function nodeLabel(node) {
+    return node.getAttribute("data-cid") ?? node.localName;
+}
+function nodeDescription(node) {
+    const id = node.id ? `#${node.id}` : "";
+    const className = typeof node.className === "string"
+        ? node.className.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((name) => `.${name}`).join("")
+        : "";
+    const source = node.getAttribute("data-src");
+    return `${node.localName}${id}${className}${source ? ` — ${source}` : ""}`;
+}
+function selectNode(node) {
+    const resolved = resolveSelectionFromElement(node);
+    if (resolved)
+        setSelectedElement(resolved);
+}
+export function DomNavigation({ selected, hierarchy }) {
+    const parents = hierarchy.slice(1, MAX_PARENT_LEVELS + 1);
+    const children = computeDescendants(selected.domElement, 2, MAX_CHILD_NODES);
+    if (parents.length === 0 && children.length === 0)
+        return null;
+    return (_jsxs("section", { className: "dom-navigation", "data-test": "dom-navigation", "aria-label": "DOM navigation", children: [_jsx("div", { className: "dom-navigation__header", children: _jsx("span", { className: "dom-navigation__title", children: "DOM" }) }), parents.length > 0 ? (_jsxs("div", { className: "dom-navigation__group", "data-test": "dom-parents", children: [_jsx("span", { className: "dom-navigation__label", children: "Parents" }), _jsx("div", { className: "dom-navigation__items", children: parents.map((node, index) => (_jsxs(Button, { size: "compact", variant: "quiet", className: "dom-navigation__item", "data-test": "dom-parent-step", "data-depth": index + 1, "data-cid": node.getAttribute("data-cid") ?? undefined, title: nodeDescription(node), onClick: () => selectNode(node), children: [_jsx("span", { "aria-hidden": "true", children: "\u2191" }), index === 0 ? "Parent" : "Grandparent", _jsx("span", { className: "dom-navigation__value", children: nodeLabel(node) })] }, `${index}-${nodeLabel(node)}`))) })] })) : null, children.length > 0 ? (_jsxs("div", { className: "dom-navigation__group", "data-test": "dom-children", children: [_jsx("span", { className: "dom-navigation__label", children: "Children" }), _jsx("div", { className: "dom-navigation__items", children: children.map(({ element, depth }, index) => (_jsxs(Button, { size: "compact", variant: "quiet", className: "dom-navigation__item", "data-test": "dom-child-step", "data-depth": depth, "data-cid": element.getAttribute("data-cid") ?? undefined, title: nodeDescription(element), onClick: () => selectNode(element), children: [_jsx("span", { "aria-hidden": "true", children: "\u2193" }), depth === 1 ? "Child" : "Descendant", _jsx("span", { className: "dom-navigation__value", children: nodeLabel(element) })] }, `${depth}-${index}-${nodeLabel(element)}`))) })] })) : null] }));
+}

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

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

package/dist/inspector/shell/EmptyState.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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);
+}
+export function EmptyState() {
+    const macPlatform = isMacPlatform();
+    const modifierKey = macPlatform ? "⌘" : "Ctrl";
+    const modifierName = macPlatform ? "Command" : "Control";
+    const optionKey = macPlatform ? "⌥" : "Alt";
+    const optionName = macPlatform ? "Option" : "Alt";
+    return (_jsxs("div", { className: "empty-state", "data-test": "empty-state", children: [_jsx("img", { className: "empty-state__icon", src: gridIllustration, alt: "", "aria-hidden": "true" }), _jsx("h2", { className: "empty-state__title", children: "Select an element to edit" }), _jsx("div", { className: "empty-state__shortcuts", children: _jsxs("ul", { className: "empty-state__shortcut-list", children: [_jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Nudge" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": "Arrow keys", children: [_jsx("kbd", { children: "\u2191" }), _jsx("kbd", { children: "\u2193" }), _jsx("kbd", { children: "\u2190" }), _jsx("kbd", { children: "\u2192" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Big Nudge (8px)" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": "Shift plus arrow keys", children: [_jsx("kbd", { children: "Shift" }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Arrow" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Select deeper" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus click`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Click" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Measure" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${optionName} plus hover`, children: [_jsx("kbd", { children: optionKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Hover" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Hide UI" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus backslash`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "\\" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Undo" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus Z`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Z" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Deselect" }), _jsx("span", { className: "empty-state__shortcut-keys", children: _jsx("kbd", { children: "Esc" }) })] })] }) })] }));
+}

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

@@ -0,0 +1,11 @@
+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 setInspectorHost(host: HTMLElement | null): void;
+export declare function InspectorShell(): ReactElement;

package/dist/inspector/shell/InspectorShell.js

@@ -0,0 +1,268 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { IconArrowUpRight, IconColorSwatch, IconLayoutSidebarRight, IconSettings } from "@tabler/icons-react";
+import { useInspectorOpen, toggleInspector, setInspectorOpen } from "./openStore.js";
+import { useSelectedElement, useSelectedElements, useHierarchy, setSelectedElement, removeSelectedElement, } from "../selection/selectionStore.js";
+import { InspectorOverlay } from "../overlay/InspectorOverlay.js";
+import { findTokenRow } from "../styleEditors/rowLookup.js";
+import { useBrowserCssInspection } from "../inspection/useBrowserCssInspection.js";
+import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
+import { SpacingBox } from "../styleEditors/SpacingBox.js";
+import { Typography } from "../styleEditors/Typography.js";
+import { 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 { 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 { StatusCallout } from "../ui/StatusCallout.js";
+import { IconButton } from "../ui/IconButton.js";
+import { UI_STYLES } from "../ui/styles.js";
+import { getActiveStyleState, setActiveStyleState } from "./styleState.js";
+import { isEditableEvent } from "./shortcuts.js";
+import { clearInspectorLayout, setInspectorLayoutOpen } from "./panelLayout.js";
+import { formatInspectorLabel } from "../ui/labels.js";
+import { FieldRow } from "../ui/FieldRow.js";
+import { Select } from "../ui/Select.js";
+import { enterCanvas, useCanvasMode } from "../canvas/canvasStore.js";
+import { clearRestoreCount, clearSession } from "../canvas/sessionStore.js";
+import { getElementWindow } from "../runtime/domRealm.js";
+import { deleteElement, nudgeElement } from "../overlay/structuralGestures.js";
+import { AtRuleContextProvider } from "../ui/AtRuleContext.js";
+import { ComponentPropsSection } from "../componentSemantics/ComponentPropsSection.js";
+import { cancelInlineTextEdit, disposeInlineTextEdit, isInlineTextEditingActive, useInlineTextSession } from "../inline-text/inlineTextEditor.js";
+import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
+import { DomNavigation } from "./DomNavigation.js";
+import { EmptyState } from "./EmptyState.js";
+import { createStyleSelection } from "../selection/styleSelection.js";
+import { intersectTokenEntries } from "../inspection/selectionProperty.js";
+function findFirstTokenRow(rows, properties) {
+    for (const property of properties) {
+        const row = findTokenRow(rows, property);
+        if (row?.tokenName)
+            return row;
+    }
+    for (const property of properties) {
+        const row = findTokenRow(rows, property);
+        if (row)
+            return row;
+    }
+    return null;
+}
+export { toggleInspector, setInspectorOpen };
+let inspectorHost = null;
+export function setInspectorHost(host) {
+    inspectorHost = host;
+}
+function resolveHost() {
+    return inspectorHost ?? document.getElementById("nudge-ui-root") ?? document.body;
+}
+function nodeMatchesSelector(node, selector) {
+    if (!selector || node.nodeType !== node.ELEMENT_NODE)
+        return false;
+    // SAFETY: node.nodeType was checked as ELEMENT_NODE above, so it is an Element.
+    const element = node;
+    try {
+        return element.matches(selector) || element.querySelector(selector) !== null;
+    }
+    catch {
+        return false;
+    }
+}
+function scopeMutationAffectsSelection(records, selected) {
+    const selector = sourceSiteSelector(selected.getAttribute("data-cid") ?? "", selected.getAttribute("data-src") ?? "");
+    return records.some((record) => {
+        if (record.type === "attributes") {
+            return record.target === selected || record.attributeName !== "data-projection-instance";
+        }
+        return [...record.addedNodes, ...record.removedNodes]
+            .some((node) => nodeMatchesSelector(node, selector));
+    });
+}
+export function InspectorShell() {
+    const isOpen = useInspectorOpen();
+    const runtimeConfig = useNudgeUiRuntimeConfig();
+    const canvasEnabled = runtimeConfig.capabilities.canvas;
+    const domNavigationEnabled = runtimeConfig.capabilities.domNavigation === true;
+    const activeCanvasMode = useCanvasMode();
+    const canvasMode = canvasEnabled ? activeCanvasMode : "inspect";
+    const selected = useSelectedElement();
+    const selectedElements = useSelectedElements();
+    const hierarchy = useHierarchy();
+    const inlineTextSession = useInlineTextSession();
+    const [settingsOpen, setSettingsOpen] = useState(false);
+    const [settingsSection, setSettingsSection] = useState("instructions");
+    const [scopeRevision, refreshScope] = useState(0);
+    const [styleState, setStyleState] = useState(getActiveStyleState());
+    const cssInspection = useBrowserCssInspection(selectedElements, styleState);
+    const isMultiSelection = selectedElements.length > 1;
+    useEffect(() => {
+        setInspectorLayoutOpen(isOpen);
+        return clearInspectorLayout;
+    }, [isOpen]);
+    useEffect(() => {
+        // A new selection should never inherit an incidental state from the
+        // previous element. Base is the inspector's deliberate default.
+        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.
+        const observers = [];
+        const roots = new Map();
+        for (const target of selectedElements) {
+            const ownerRoot = target.domElement.ownerDocument?.documentElement;
+            if (ownerRoot)
+                roots.set(target.domElement.ownerDocument, ownerRoot);
+        }
+        for (const [ownerDocument, ownerRoot] of roots) {
+            const OwnerMutationObserver = getElementWindow(ownerRoot).MutationObserver;
+            const observer = new OwnerMutationObserver((records) => {
+                if (selectedElements.some((candidate) => scopeMutationAffectsSelection(records, candidate.domElement))) {
+                    refreshScope((revision) => revision + 1);
+                }
+                for (const candidate of selectedElements) {
+                    if (candidate.domElement.ownerDocument === ownerDocument && !candidate.domElement.isConnected) {
+                        removeSelectedElement(candidate.domElement);
+                    }
+                }
+            });
+            observer.observe(ownerRoot, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ["data-cid", "data-src", "data-projection-instance"],
+            });
+            observers.push(observer);
+        }
+        return () => observers.forEach((observer) => observer.disconnect());
+    }, [selectedElements, scopeRevision]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        function onKeydown(event) {
+            if (isInlineTextEditingActive())
+                return;
+            const mod = event.metaKey || event.ctrlKey;
+            const editable = isEditableEvent(event);
+            if (!editable) {
+                const scrollKey = event.code === "Space"
+                    || event.key === "ArrowUp"
+                    || event.key === "ArrowDown"
+                    || event.key === "ArrowLeft"
+                    || event.key === "ArrowRight";
+                if (scrollKey)
+                    event.preventDefault();
+                if (mod && event.shiftKey && event.key.toLowerCase() === "z") {
+                    event.preventDefault();
+                    redo();
+                    return;
+                }
+                if (mod && !event.shiftKey && event.key.toLowerCase() === "z") {
+                    event.preventDefault();
+                    undo();
+                    return;
+                }
+            }
+            if (!selected || editable)
+                return;
+            if (event.key === "Escape" || event.key === "Esc") {
+                event.preventDefault();
+                setSelectedElement(null);
+                return;
+            }
+            // macOS labels the physical Backspace key as Delete, while browsers
+            // report it as "Backspace". Support both without stealing text edits.
+            if (event.key === "Delete" || event.key === "Backspace") {
+                event.preventDefault();
+                if (!isMultiSelection && deleteElement(selected))
+                    setSelectedElement(null);
+                return;
+            }
+            if (isMultiSelection)
+                return;
+            if (event.key !== "ArrowUp" && event.key !== "ArrowDown" && event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                return;
+            if (nudgeElement(selected.domElement, event.key)) {
+                const refreshed = resolveSelectionFromElement(selected.domElement);
+                if (refreshed)
+                    setSelectedElement(refreshed);
+            }
+        }
+        window.addEventListener("keydown", onKeydown);
+        return () => window.removeEventListener("keydown", onKeydown);
+    }, [isOpen, isMultiSelection, selected]);
+    const inspectionSnapshot = cssInspection.element;
+    const styleSelection = useMemo(() => createStyleSelection(selectedElements, cssInspection.elements, selected), [cssInspection.elements, selected, selectedElements]);
+    const selectionEditable = useMemo(() => styleSelection ? canEditStyles(styleSelection.target) : false, [scopeRevision, styleSelection]);
+    const tokenEntries = useMemo(() => intersectTokenEntries(cssInspection.elements.map((snapshot) => snapshot.availableTokens)), [cssInspection.elements]);
+    const tokenRows = useMemo(() => styleSelection ? [...styleSelection.primaryRows] : [], [styleSelection]);
+    const availableInteractionStates = inspectionSnapshot?.availableStates ?? [];
+    const showInteractionState = !isMultiSelection && availableInteractionStates.length > 2;
+    const paintedBackgroundRow = findFirstTokenRow(tokenRows, ["background-color", "background"]);
+    const backgroundTokenRow = useMemo(() => {
+        if (!selected)
+            return null;
+        if (isMultiSelection)
+            return paintedBackgroundRow;
+        if (paintedBackgroundRow?.tokenName || styleState !== "base")
+            return paintedBackgroundRow;
+        return cssInspection.stableProperties.find((row) => (row.property === "background-color" || row.property === "background") && row.tokenName) ?? paintedBackgroundRow;
+    }, [cssInspection.stableProperties, isMultiSelection, paintedBackgroundRow, selected, styleState]);
+    const editScope = selected && !isMultiSelection ? getEditScope(selected.domElement) : null;
+    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);
+    }
+    function handleCanvasModeButton() {
+        // Inline text editing is controller-owned. Canvas renderer documents
+        // receive projections only, so dispose the active controller session
+        // before mounting cards rather than probing a stale iframe document.
+        disposeInlineTextEdit("frame-disposed");
+        enterCanvas();
+    }
+    function openSettings(section) {
+        setSettingsSection(section);
+        setSettingsOpen(true);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "inspector-styles", children: UI_STYLES }), canvasMode === "inspect" && _jsx(InspectorOverlay, { host: resolveHost() }), _jsxs("div", { className: "panel", "data-open": isOpen ? "true" : "false", children: [_jsxs("div", { className: "panel__tabs", "aria-label": "Inspector controls", children: [_jsxs("div", { className: "panel__header-row", "data-test": "inspect-tab", children: [_jsx(IconButton, { variant: "quiet", label: "Collapse inspector", "data-test": "collapse-inspector", style: { marginLeft: "-8px" }, onClick: () => {
+                                            cancelInlineTextEdit();
+                                            setInspectorOpen(false);
+                                        }, children: _jsx(IconLayoutSidebarRight, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), _jsxs("div", { className: "panel__header-actions", children: [_jsx(IconButton, { variant: "quiet", "data-test": "tokens-button", label: "Tokens", title: "Tokens", onClick: () => openSettings("tokens"), children: _jsx(IconColorSwatch, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), _jsx(IconButton, { variant: "quiet", label: "Settings", title: "Settings", "data-test": "settings-button", onClick: () => openSettings("instructions"), children: _jsx(IconSettings, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), canvasEnabled && canvasMode !== "canvas" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "panel__header-divider", "aria-hidden": "true" }), _jsxs(Button, { variant: "quiet", className: "panel__canvas-button", "data-test": "mode-canvas", type: "button", onClick: handleCanvasModeButton, children: ["Canvas", _jsx(IconArrowUpRight, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })] })] })) : null] })] }), _jsx("div", { className: "panel__copy-row", children: _jsx(CopyPromptButton, { settingsOpen: settingsOpen, settingsSection: settingsSection, onOpenSettings: openSettings, onSettingsOpenChange: setSettingsOpen }) })] }), _jsxs("div", { className: "panel__body", children: [inlineTextSession && (inlineTextSession.bindingChoices.length > 1 ||
+                                inlineTextSession.scopeChoices.length > 0) ? (_jsxs("section", { className: "inline-text-editor", "data-test": "inline-text-editor", children: [_jsx("div", { className: "inline-text-editor__binding", "data-test": "inline-text-binding", children: inlineTextSession.binding.kind === "component-prop"
+                                            ? `${inlineTextSession.binding.target.componentName}.${inlineTextSession.binding.property}`
+                                            : "Rendered text" }), inlineTextSession.bindingChoices.length > 1 ? (_jsxs("div", { className: "inline-text-editor__chooser", "data-test": "inline-binding-chooser", children: [_jsx("div", { className: "inline-text-editor__chooser-label", children: "Choose binding" }), _jsx("div", { className: "inline-text-editor__chooser-options", role: "group", "aria-label": "Text binding", children: inlineTextSession.bindingChoices.map((choice, index) => (_jsxs(Button, { size: "compact", variant: inlineTextSession.selectedBindingIndex === index ? "primary" : "quiet", "data-test": "inline-binding-choice", "data-index": index, "aria-pressed": inlineTextSession.selectedBindingIndex === index, onMouseDown: (event) => event.preventDefault(), onClick: () => inlineTextSession.chooseBinding(index), children: [choice.binding.target.componentName, ".", choice.binding.property] }, `${choice.binding.target.callsiteId}:${choice.binding.property}`))) })] })) : null, inlineTextSession.scopeChoices.length > 0 ? (_jsxs("div", { className: "inline-text-editor__chooser", "data-test": "inline-scope-chooser", children: [_jsx("div", { className: "inline-text-editor__chooser-label", children: "Apply to" }), _jsx("div", { className: "inline-text-editor__chooser-options", role: "group", "aria-label": "Text edit scope", children: inlineTextSession.scopeChoices.map((scope) => (_jsx(Button, { size: "compact", variant: inlineTextSession.scope === scope ? "primary" : "quiet", "data-test": `inline-scope-${scope}`, "aria-pressed": inlineTextSession.scope === scope, onMouseDown: (event) => event.preventDefault(), onClick: () => inlineTextSession.chooseScope(scope), children: scope === "source-site" ? "All outputs" : "This rendered item" }, scope))) })] })) : null, _jsxs("div", { className: "inline-text-editor__actions", children: [_jsx(Button, { size: "compact", variant: "secondary", "data-test": "inline-text-cancel", onClick: () => inlineTextSession.cancel(), children: "Cancel" }), _jsx(Button, { size: "compact", "data-test": "inline-text-commit", disabled: inlineTextSession.bindingChoices.length > 1 && inlineTextSession.selectedBindingIndex === null, onClick: () => inlineTextSession.commit(), children: "Done" })] })] })) : null, selected ? (_jsxs(_Fragment, { children: [domNavigationEnabled && !isMultiSelection ? _jsx(DomNavigation, { selected: selected, hierarchy: hierarchy }) : null, isMultiSelection || showInteractionState || hasEditScopeCallout ? (_jsxs("div", { className: `selection${hasEditScopeCallout ? "" : " selection--without-scope-callout"}`, "data-test": "selection", "data-selected-cid": selected.cid, "data-selected-src": selected.src, "data-selected-count": selectedElements.length, children: [isMultiSelection ? (_jsx("div", { className: "selection__summary", "data-test": "multi-selection-summary", children: _jsxs("span", { className: "selection__count", children: [selectedElements.length, " elements selected"] }) })) : null, hasEditScopeCallout ? (_jsx(StatusCallout, { tone: editScope === "rendered-instance" ? "neutral" : "accent", "data-test": "edit-scope", "data-lost": "false", children: editScope === "rendered-instance" ? (_jsxs("div", { className: "scope__unlinked", children: [_jsx("span", { children: "Element unlinked" }), _jsx(Button, { size: "compact", className: "scope__action", "data-test": "relink-element", onClick: () => {
+                                                                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}`), _jsx(Typography, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `type-${styleState}`), _jsx(ColorPicker, { element: selected, selection: styleSelection, property: "color", entries: tokenEntries, tokenRow: findTokenRow(tokenRows, "color") }, `color-${styleState}`), _jsx(ColorPicker, { element: selected, selection: styleSelection, property: "background-color", entries: tokenEntries, tokenRow: backgroundTokenRow }, `background-${styleState}`), _jsx(BorderEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `border-${styleState}`), _jsx(BoxShadowEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `box-shadow-${styleState}`)] }) })) : (_jsx(StatusCallout, { tone: "neutral", "data-test": "multi-selection-uneditable", children: "These repeated items are indistinguishable, so Nudge UI cannot safely target only part of the group. Select every repeated item to edit them together." }))] })) : (_jsx(EmptyState, {})), _jsx(ChangesLog, { onClearSession: () => {
+                                    clearSession();
+                                    clearRestoreCount();
+                                } })] })] }), !isOpen ? (_jsx("div", { className: "panel__restore", children: _jsx(IconButton, { variant: "quiet", label: "Show inspector", className: "panel__restore-button", "data-test": "show-inspector", onClick: () => setInspectorOpen(true), children: _jsx(IconLayoutSidebarRight, { size: 16, stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) })) : null] }));
+}

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

@@ -0,0 +1,6 @@
+declare function subscribeOpen(cb: () => void): () => void;
+declare function getOpen(): boolean;
+export declare function toggleInspector(): void;
+export declare function setInspectorOpen(value: boolean): void;
+export { subscribeOpen, getOpen };
+export declare function useInspectorOpen(): boolean;

package/dist/inspector/shell/openStore.js

@@ -0,0 +1,29 @@
+import { useSyncExternalStore } from "react";
+let open = true;
+const listeners = new Set();
+function subscribeOpen(cb) {
+    listeners.add(cb);
+    return () => {
+        listeners.delete(cb);
+    };
+}
+function getOpen() {
+    return open;
+}
+function notify() {
+    listeners.forEach((l) => l());
+}
+export function toggleInspector() {
+    open = !open;
+    notify();
+}
+export function setInspectorOpen(value) {
+    if (open === value)
+        return;
+    open = value;
+    notify();
+}
+export { subscribeOpen, getOpen };
+export function useInspectorOpen() {
+    return useSyncExternalStore(subscribeOpen, getOpen, getOpen);
+}

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

@@ -0,0 +1,2 @@
+export declare function setInspectorLayoutOpen(open: boolean): void;
+export declare function clearInspectorLayout(): void;

package/dist/inspector/shell/panelLayout.js

@@ -0,0 +1,29 @@
+const LAYOUT_STYLE_ID = "nudge-ui-panel-layout";
+const PANEL_LAYOUT_ATTRIBUTE = "data-nudge-ui-panel";
+const LAYOUT_STYLES = `
+html[${PANEL_LAYOUT_ATTRIBUTE}="open"] body {
+  margin-right: min(320px, 100vw);
+  transition: margin-right 180ms ease;
+}
+`;
+function ensureLayoutStyles() {
+    if (document.getElementById(LAYOUT_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = LAYOUT_STYLE_ID;
+    style.textContent = LAYOUT_STYLES;
+    document.head.appendChild(style);
+}
+export function setInspectorLayoutOpen(open) {
+    const root = document.documentElement;
+    if (open) {
+        ensureLayoutStyles();
+        root.setAttribute(PANEL_LAYOUT_ATTRIBUTE, "open");
+        return;
+    }
+    root.removeAttribute(PANEL_LAYOUT_ATTRIBUTE);
+}
+export function clearInspectorLayout() {
+    document.documentElement.removeAttribute(PANEL_LAYOUT_ATTRIBUTE);
+    document.getElementById(LAYOUT_STYLE_ID)?.remove();
+}

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

@@ -0,0 +1,3 @@
+export declare function isEditableTarget(target: EventTarget | null): boolean;
+export declare function isEditableEvent(event: KeyboardEvent): boolean;
+export declare function isInspectorToggleShortcut(event: KeyboardEvent): boolean;

package/dist/inspector/shell/shortcuts.js

@@ -0,0 +1,25 @@
+export function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    const tag = target.tagName;
+    return tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable;
+}
+function deeplyFocusedElement() {
+    let active = typeof document === "undefined" ? null : document.activeElement;
+    while (active?.shadowRoot?.activeElement) {
+        active = active.shadowRoot.activeElement;
+    }
+    return active;
+}
+export function isEditableEvent(event) {
+    return event.composedPath().some(isEditableTarget) || isEditableTarget(deeplyFocusedElement());
+}
+export function isInspectorToggleShortcut(event) {
+    if (isEditableEvent(event))
+        return false;
+    if (event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey && event.code === "Backslash")
+        return true;
+    if ((event.metaKey || event.ctrlKey) && !event.shiftKey && !event.altKey && event.code === "Backslash")
+        return true;
+    return event.altKey && !event.shiftKey && !event.ctrlKey && !event.metaKey && event.code === "KeyI";
+}

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

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