nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/selection/selectionStore.js

@@ -37,7 +37,7 @@ function sameComponentTargets(a, b) {
         return false;
     return a.every((left, index) => {
         const right = b[index];
-        if (!right || left.framework !== right.framework)
+        if (!right || left.framework !== right.framework || left.livePreview !== right.livePreview)
             return false;
         const leftMeta = left.meta;
         const rightMeta = right.meta;
@@ -50,10 +50,7 @@ function sameComponentTargets(a, b) {
             || JSON.stringify(leftMeta.authoredProps) !== JSON.stringify(rightMeta.authoredProps)) {
             return false;
         }
-        // Runtime props can contain React elements and fibers with circular or
-        // intentionally unstable object identities. Only primitive values are
-        // consumed by the editable component-prop controls, so compare those and
-        // ignore opaque values that cannot affect this panel.
+        // Runtime props can hold React elements and fibers with unstable identities; only primitives affect the editable prop controls.
         const keys = new Set([...Object.keys(left.props), ...Object.keys(right.props)]);
         for (const key of keys) {
             const leftValue = left.props[key];
@@ -91,18 +88,13 @@ export function setSelectedElement(el) {
     }
     const current = currentSelection?.primary ?? null;
     if ((currentSelection?.elements.length ?? 0) > 1) {
-        // setSelectedElement is the replacement API used by an ordinary click,
-        // Canvas selection, and single-target actions. It must collapse a group
-        // even when the clicked node is already the primary target.
+        // The replacement API must collapse a group even when the clicked node is already primary.
         publishSelection([el], el);
         return;
     }
     if (current === el)
         return;
-    // Re-clicks and post-edit refreshes re-resolve a fresh object with the same
-    // source-site identity. Keep the existing selection and hierarchy step so
-    // the panel pipeline does not churn (including after step-up); edits still
-    // refresh the panel via the document revision subscription.
+    // A re-resolved object with the same source-site identity keeps the current selection and hierarchy step.
     if (el && current
         && current.cid === el.cid
         && current.src === el.src
@@ -159,14 +151,12 @@ function publishSelection(elements, primary) {
         index = 0;
     }
     else {
-        // Hierarchy stepping is a single-element operation. Clearing it here also
-        // prevents a stale parent chain from being rendered for a group.
+        // Hierarchy stepping is a single-element operation; a stale parent chain must not render for a group.
         chain = [];
         index = 0;
     }
     notify();
 }
-/** Replaces the selection with one or more ordered targets. */
 export function setSelectedElements(elements) {
     const primary = elements.at(-1);
     if (!primary) {
@@ -191,7 +181,6 @@ export function toggleSelectedElement(el) {
     }
     publishSelection([...selectedElements, el], el);
 }
-/** Removes one rendered node from the group, preserving the remaining order. */
 export function removeSelectedElement(el) {
     const selectedElements = getSelectedElements();
     const remaining = selectedElements.filter((selected) => selected.domElement !== el);

package/dist/inspector/selection/sourceSite.d.ts

@@ -1,10 +1,6 @@
 /** Stable JSX instrumentation selector, shared by source and instance edits. */
 export declare function sourceSiteSelector(cid: string, src: string): string | null;
-/**
- * Finds a source site whose position moved because its file gained or lost
- * lines. It returns a site only when the original renders nothing and exactly
- * one other position in the same file and component renders matching elements.
- */
+/** Returns a moved position only when the original renders nothing and exactly one other position in the file matches. */
 export declare function relocateSourceSite(doc: Document, site: {
     readonly cid: string;
     readonly src: string;

package/dist/inspector/selection/sourceSite.js

@@ -6,16 +6,10 @@ export function sourceSiteSelector(cid, src) {
         return null;
     if (!src)
         return `[data-cid="${escapeAttrValue(cid)}"]`;
-    // A source site is the complete file:line:column identity injected by the
-    // Vite transform. Keeping only file:line makes separate JSX elements on a
-    // single formatted line share a managed rule.
+    // File:line alone would merge separate JSX elements on one formatted line into a single managed rule.
     return `[data-cid="${escapeAttrValue(cid)}"][data-src="${escapeAttrValue(src)}"]`;
 }
-/**
- * Finds a source site whose position moved because its file gained or lost
- * lines. It returns a site only when the original renders nothing and exactly
- * one other position in the same file and component renders matching elements.
- */
+/** Returns a moved position only when the original renders nothing and exactly one other position in the file matches. */
 export function relocateSourceSite(doc, site, matches) {
     const file = SOURCE_POSITION.exec(site.src)?.[1];
     const exact = sourceSiteSelector(site.cid, site.src);

package/dist/inspector/selection/styleSelection.d.ts

@@ -14,9 +14,5 @@ export interface StyleSelection {
     getProperty(property: string): SelectionProperty | null;
     supportsRole(role: StyleRole): boolean;
 }
-/**
- * Builds the group style projection used by all style editors. Computed CSS
- * is the value source, while individual inspection snapshots provide authored
- * and token provenance where it exists.
- */
+/** Computed CSS is the value source; snapshots add authored and token provenance where it exists. */
 export declare function createStyleSelection(elements: readonly SelectedElement[], snapshots: readonly InspectionSnapshot[], selectedPrimary?: SelectedElement | null): StyleSelection | null;

package/dist/inspector/selection/styleSelection.js

@@ -36,11 +36,7 @@ function supportsRole(element, role) {
         }
     }
 }
-/**
- * Builds the group style projection used by all style editors. Computed CSS
- * is the value source, while individual inspection snapshots provide authored
- * and token provenance where it exists.
- */
+/** Computed CSS is the value source; snapshots add authored and token provenance where it exists. */
 export function createStyleSelection(elements, snapshots, selectedPrimary) {
     const primary = selectedPrimary && elements.some((element) => element.domElement === selectedPrimary.domElement)
         ? selectedPrimary

package/dist/inspector/session/lifecycle.d.ts

@@ -1,12 +1,5 @@
-/** A callback released when its owning session is disposed. */
 export type CleanupCallback = () => void;
-/**
- * The lifecycle surface shared by workspace and session handles.
- *
- * Registration after disposal is ignored and returns a no-op unregister
- * function. Disposal is idempotent. Implementations dispose adopted children
- * before their own callbacks.
- */
+/** Registration after disposal returns a no-op; disposal is idempotent and disposes adopted children before own callbacks. */
 export interface SessionOwner {
     readonly id: string;
     readonly disposed: boolean;
@@ -17,6 +10,5 @@ export interface SessionOwnerImplementation extends SessionOwner {
     adopt(child: SessionOwner): void;
 }
 type SessionKind = "workspace" | "inspector" | "document";
-/** Creates the small lifecycle implementation used by session handles. */
 export declare function createSessionOwner(kind: SessionKind): SessionOwnerImplementation;
 export {};

package/dist/inspector/session/lifecycle.js

@@ -4,7 +4,6 @@ function nextId(kind) {
     nextOwnerId += 1;
     return `${kind}-${nextOwnerId}`;
 }
-/** Creates the small lifecycle implementation used by session handles. */
 export function createSessionOwner(kind) {
     let disposed = false;
     const children = new Set();

package/dist/inspector/session/sessionContext.d.ts

@@ -11,11 +11,7 @@ export interface InspectorSessionProviderProps {
     readonly documentSession?: DocumentSession | null;
     readonly children?: ReactNode;
 }
-/** Delivers the active inspector and document handles to editor descendants. */
 export declare function InspectorSessionProvider({ inspector, documentSession, children, }: InspectorSessionProviderProps): ReactElement;
-/** Returns all active session handles, or throws when no provider is mounted. */
 export declare function useSessionContext(): SessionContextValue;
-/** Returns the active mounted-inspector handle. */
 export declare function useInspectorSession(): InspectorSession;
-/** Returns the active inspected-document handle, when one is mounted. */
 export declare function useDocumentSession(): DocumentSession | null;

package/dist/inspector/session/sessionContext.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
 const SessionContext = createContext(null);
-/** Delivers the active inspector and document handles to editor descendants. */
 export function InspectorSessionProvider({ inspector, documentSession = null, children, }) {
     const value = useMemo(() => ({
         workspace: inspector.workspace,
@@ -10,7 +9,6 @@ export function InspectorSessionProvider({ inspector, documentSession = null, ch
     }), [documentSession, inspector]);
     return _jsx(SessionContext.Provider, { value: value, children: children });
 }
-/** Returns all active session handles, or throws when no provider is mounted. */
 export function useSessionContext() {
     const value = useContext(SessionContext);
     if (!value) {
@@ -18,11 +16,9 @@ export function useSessionContext() {
     }
     return value;
 }
-/** Returns the active mounted-inspector handle. */
 export function useInspectorSession() {
     return useSessionContext().inspector;
 }
-/** Returns the active inspected-document handle, when one is mounted. */
 export function useDocumentSession() {
     return useSessionContext().document;
 }

package/dist/inspector/session/sessionFactory.d.ts

@@ -1,29 +1,20 @@
 import { type SessionOwner } from "./lifecycle.js";
-/** The mounted DOM node that hosts an inspector session. */
 export type InspectorHost = HTMLElement;
 /** Resources that survive inspector remounts. */
 export interface Workspace extends SessionOwner {
     createInspectorSession(host: InspectorHost): InspectorSession;
     createDocumentSession(doc: Document): DocumentSession;
 }
-/** Resources owned by one mounted inspector. */
 export interface InspectorSession extends SessionOwner {
     readonly host: InspectorHost;
     readonly workspace: Workspace;
     createDocumentSession(doc: Document): DocumentSession;
 }
-/** Resources and caches associated with one inspected document lifetime. */
 export interface DocumentSession extends SessionOwner {
     readonly document: Document;
     readonly inspector: InspectorSession | null;
     readonly workspace: Workspace;
 }
-/**
- * Creates the workspace owner. A workspace owns mounted inspector sessions
- * and any document sessions created directly from the workspace.
- */
 export declare function createWorkspace(): Workspace;
-/** Creates an inspector session owned by the supplied workspace. */
 export declare function createInspectorSession(workspace: Workspace, host: InspectorHost): InspectorSession;
-/** Creates a document session owned by a workspace or mounted inspector. */
 export declare function createDocumentSession(owner: Workspace | InspectorSession, doc: Document): DocumentSession;

package/dist/inspector/session/sessionFactory.js

@@ -38,10 +38,6 @@ function createInspectorSessionFor(workspace, parent, host) {
     parent.adopt(owner);
     return session;
 }
-/**
- * Creates the workspace owner. A workspace owns mounted inspector sessions
- * and any document sessions created directly from the workspace.
- */
 export function createWorkspace() {
     const owner = createSessionOwner("workspace");
     let workspace;
@@ -63,11 +59,9 @@ export function createWorkspace() {
     };
     return workspace;
 }
-/** Creates an inspector session owned by the supplied workspace. */
 export function createInspectorSession(workspace, host) {
     return workspace.createInspectorSession(host);
 }
-/** Creates a document session owned by a workspace or mounted inspector. */
 export function createDocumentSession(owner, doc) {
     return owner.createDocumentSession(doc);
 }

package/dist/inspector/settings/SettingsDialog.d.ts

@@ -8,5 +8,4 @@ export interface SettingsDialogProps extends McpConnectionContentProps {
     readonly onValueChange: (value: string) => void;
     readonly onOpenChange: (open: boolean) => void;
 }
-/** Provides one settings surface for prompt, MCP, and token configuration. */
 export declare function SettingsDialog({ open, initialSection, value, onValueChange, onOpenChange, projectId, origin, snapshot, onConnect, onTakeOver, onDisconnect, onCheckAgain, }: SettingsDialogProps): ReactElement;

package/dist/inspector/settings/SettingsDialog.js

@@ -5,6 +5,7 @@ import { IconColorSwatch, IconPlugConnected, IconSettings, IconX, IconTrash, } f
 import { useBrowserCssInspection } from "../inspection/useBrowserCssInspection.js";
 import { McpConnectionContent, } from "../agent/McpConnectionDialog.js";
 import { PromptSettingsFields, } from "../prompt/PromptSettingsDialog.js";
+import { getNudgeUiRuntimeConfig, isNudgeUiFeatureEnabled } from "../runtime/runtimeConfig.js";
 import { TokensPanel } from "../tokens/TokensPanel.js";
 import { useSelectedElement } from "../selection/selectionStore.js";
 import { useFocusedCardId, useSelectedCardId } from "../canvas/canvasStore.js";
@@ -34,7 +35,6 @@ const SETTINGS_SECTIONS = [
         icon: _jsx(IconColorSwatch, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }),
     },
 ];
-/** Provides one settings surface for prompt, MCP, and token configuration. */
 export function SettingsDialog({ open, initialSection, value, onValueChange, onOpenChange, projectId, origin, snapshot, onConnect, onTakeOver, onDisconnect, onCheckAgain, }) {
     const [activeSection, setActiveSection] = useState(initialSection);
     const closeRef = useRef(null);
@@ -49,7 +49,9 @@ export function SettingsDialog({ open, initialSection, value, onValueChange, onO
         session: getBrowserCssInspection(activeDocument),
     });
     const tokenRows = tokenInspection.documentTokens?.tokens ?? [];
-    const activeDefinition = SETTINGS_SECTIONS.find((section) => section.id === activeSection) ?? SETTINGS_SECTIONS[0];
+    const mcpEnabled = isNudgeUiFeatureEnabled(getNudgeUiRuntimeConfig().features, "mcp");
+    const sections = SETTINGS_SECTIONS.filter((section) => section.id !== "mcp" || mcpEnabled);
+    const activeDefinition = sections.find((section) => section.id === activeSection) ?? sections[0];
     useEffect(() => {
         if (open)
             setActiveSection(initialSection);
@@ -65,5 +67,5 @@ export function SettingsDialog({ open, initialSection, value, onValueChange, onO
         void clearSketchesForProject(projectId).catch(() => undefined);
         onOpenChange(false);
     }
-    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { container: portalContainer(), children: [_jsx(Dialog.Backdrop, { className: "settings__backdrop", "data-test": "settings-backdrop" }), _jsxs(Dialog.Popup, { className: "settings__popup", "data-test": "settings-dialog", initialFocus: closeRef, children: [_jsx(Dialog.Title, { className: "settings__visually-hidden", children: "Settings" }), _jsx(Dialog.Description, { className: "settings__visually-hidden", children: "Configure how Nudge connects to your coding agent and uses your design system." }), _jsx(Dialog.Close, { ref: closeRef, className: "icon-button icon-button--quiet settings__close", "aria-label": "Close settings", "data-test": "settings-close", type: "button", children: _jsx(IconX, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), _jsxs("div", { className: "settings__body", children: [_jsxs("nav", { className: "settings__nav", "aria-label": "Settings sections", children: [_jsx("span", { className: "settings__nav-label", children: "Settings" }), _jsx("div", { className: "settings__nav-items", children: SETTINGS_SECTIONS.map((section) => (_jsxs("button", { className: `settings__nav-item${activeSection === section.id ? " settings__nav-item--active" : ""}`, "data-test": `settings-nav-${section.id}`, type: "button", "aria-current": activeSection === section.id ? "page" : undefined, onClick: () => setActiveSection(section.id), children: [section.icon, _jsx("span", { className: "settings__nav-item-label", children: section.label })] }, section.id))) }), _jsxs("button", { className: "settings__nav-item settings__reset-canvas", "data-test": "settings-reset-canvas", type: "button", onClick: resetCanvas, children: [_jsx(IconTrash, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }), _jsx("span", { className: "settings__nav-item-label", children: "Reset canvas" })] })] }), _jsxs("main", { className: "settings__content", "data-test": "settings-content", children: [activeSection === "instructions" ? (_jsxs("section", { className: "settings__section", "data-test": "prompt-settings-dialog", "data-settings-section": "instructions", children: [_jsx("h2", { className: "settings__section-title", children: "Custom instructions" }), _jsx("p", { className: "settings__section-description", children: "These instructions are added to the end of every copied prompt." }), _jsx(PromptSettingsFields, { value: value, onChange: onValueChange, instructionsRef: instructionsRef })] })) : null, activeSection === "mcp" ? (_jsxs("section", { className: "settings__section", "data-test": "settings-section-mcp", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("div", { "data-test": "mcp-connection-dialog", children: _jsx(McpConnectionContent, { projectId: projectId, origin: origin, snapshot: snapshot, onConnect: onConnect, onTakeOver: onTakeOver, onDisconnect: onDisconnect, onCheckAgain: onCheckAgain }) })] })) : null, activeSection === "tokens" ? (_jsxs("section", { className: "settings__section", "data-test": "settings-section-tokens", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("p", { className: "settings__section-description", children: "Inspect and edit the design tokens available in this page." }), _jsx(TokensPanel, { rows: tokenRows })] })) : null] })] })] })] }) }));
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { container: portalContainer(), children: [_jsx(Dialog.Backdrop, { className: "settings__backdrop", "data-test": "settings-backdrop" }), _jsxs(Dialog.Popup, { className: "settings__popup", "data-test": "settings-dialog", initialFocus: closeRef, children: [_jsx(Dialog.Title, { className: "settings__visually-hidden", children: "Settings" }), _jsx(Dialog.Description, { className: "settings__visually-hidden", children: "Configure how Nudge connects to your coding agent and uses your design system." }), _jsx(Dialog.Close, { ref: closeRef, className: "icon-button icon-button--quiet settings__close", "aria-label": "Close settings", "data-test": "settings-close", type: "button", children: _jsx(IconX, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), _jsxs("div", { className: "settings__body", children: [_jsxs("nav", { className: "settings__nav", "aria-label": "Settings sections", children: [_jsx("span", { className: "settings__nav-label", children: "Settings" }), _jsx("div", { className: "settings__nav-items", children: sections.map((section) => (_jsxs("button", { className: `settings__nav-item${activeDefinition.id === section.id ? " settings__nav-item--active" : ""}`, "data-test": `settings-nav-${section.id}`, type: "button", "aria-current": activeDefinition.id === section.id ? "page" : undefined, onClick: () => setActiveSection(section.id), children: [section.icon, _jsx("span", { className: "settings__nav-item-label", children: section.label })] }, section.id))) }), _jsxs("button", { className: "settings__nav-item settings__reset-canvas", "data-test": "settings-reset-canvas", type: "button", onClick: resetCanvas, children: [_jsx(IconTrash, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }), _jsx("span", { className: "settings__nav-item-label", children: "Reset canvas" })] })] }), _jsxs("main", { className: "settings__content", "data-test": "settings-content", children: [activeDefinition.id === "instructions" ? (_jsxs("section", { className: "settings__section", "data-test": "prompt-settings-dialog", "data-settings-section": "instructions", children: [_jsx("h2", { className: "settings__section-title", children: "Custom instructions" }), _jsx("p", { className: "settings__section-description", children: "These instructions are added to the end of every copied prompt." }), _jsx(PromptSettingsFields, { value: value, onChange: onValueChange, instructionsRef: instructionsRef })] })) : null, activeDefinition.id === "mcp" ? (_jsxs("section", { className: "settings__section", "data-test": "settings-section-mcp", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("div", { "data-test": "mcp-connection-dialog", children: _jsx(McpConnectionContent, { projectId: projectId, origin: origin, snapshot: snapshot, onConnect: onConnect, onTakeOver: onTakeOver, onDisconnect: onDisconnect, onCheckAgain: onCheckAgain }) })] })) : null, activeDefinition.id === "tokens" ? (_jsxs("section", { className: "settings__section", "data-test": "settings-section-tokens", children: [_jsx("h2", { className: "settings__section-title", children: activeDefinition.label }), _jsx("p", { className: "settings__section-description", children: "Inspect and edit the design tokens available in this page." }), _jsx(TokensPanel, { rows: tokenRows })] })) : null] })] })] })] }) }));
 }

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

@@ -3,9 +3,10 @@ import { type AgentClientSnapshot } from "../agent/client.js";
 import type { SettingsSection } from "../settings/SettingsDialog.js";
 export interface AgentStatusButtonProps {
     onOpenSettings: (section: SettingsSection) => void;
+    /** Shows the agent logos and opens the MCP section; hosts without MCP keep a plain Settings button. */
+    mcpEnabled?: boolean;
 }
 export declare function AgentStatusButton({ onOpenSettings }: AgentStatusButtonProps): ReactElement;
-/** Renders the connection snapshot provided by the project client. */
-export declare function AgentStatusButtonView({ agent, onOpenSettings }: AgentStatusButtonProps & {
+export declare function AgentStatusButtonView({ agent, onOpenSettings, mcpEnabled }: AgentStatusButtonProps & {
     agent: AgentClientSnapshot;
 }): ReactElement;

package/dist/inspector/shell/AgentStatusButton.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconRobot } from "@tabler/icons-react";
 import { useAgentClient } from "../agent/client.js";
-import { getAgentConnectionStatus } from "../agent/connectionStatus.js";
+import { useAgentConnectionStatus } from "../agent/connectionStatus.js";
+import { isNudgeUiFeatureEnabled } from "../runtime/runtimeConfig.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { Button } from "../ui/Button.js";
 import { Tooltip } from "../ui/Tooltip.js";
-/** Renders a known MCP client logo, or a generic robot avatar. */
 function ConnectedAgentAvatar({ name }) {
     const harness = name?.toLowerCase().match(/(?:^|[^a-z])(codex|claude|cursor)(?:$|[^a-z])/)?.[1];
     return (_jsx("span", { className: "agent-status-button__avatars", role: "img", "aria-label": harness === "codex" ? "Codex" : harness === "claude" ? "Claude" : harness === "cursor" ? "Cursor" : "Agent", children: harness === "codex" ? _jsx(CodexAvatar, {})
@@ -25,12 +25,12 @@ function CursorAvatar() {
 export function AgentStatusButton({ onOpenSettings }) {
     const runtimeConfig = useNudgeUiRuntimeConfig();
     const agent = useAgentClient(runtimeConfig.projectId);
-    return _jsx(AgentStatusButtonView, { agent: agent, onOpenSettings: onOpenSettings });
+    const mcpEnabled = isNudgeUiFeatureEnabled(runtimeConfig.features, "mcp");
+    return _jsx(AgentStatusButtonView, { agent: agent, onOpenSettings: onOpenSettings, mcpEnabled: mcpEnabled });
 }
-/** Renders the connection snapshot provided by the project client. */
-export function AgentStatusButtonView({ agent, onOpenSettings }) {
-    const status = getAgentConnectionStatus(agent);
+export function AgentStatusButtonView({ agent, onOpenSettings, mcpEnabled = true }) {
+    const status = useAgentConnectionStatus(agent);
     const connected = agent.paired || agent.pairedElsewhere;
     const listening = connected && agent.listenerActive;
-    return (_jsx(Tooltip, { content: connected ? status.label : "Agent & MCP settings", stableTrigger: true, children: _jsxs(Button, { variant: "quiet", className: "agent-status-button", "aria-label": connected ? `MCP · ${status.label}` : "Settings", "data-test": "settings-button", "data-mcp-connected": connected ? "true" : "false", "data-mcp-listening": listening ? "true" : "false", onClick: () => onOpenSettings("mcp"), children: [connected ? _jsx(ConnectedAgentAvatar, { name: agent.agentClientName }) : _jsxs("span", { className: "agent-status-button__avatars", children: [_jsx(CodexAvatar, {}), _jsx(ClaudeAvatar, {}), _jsx(CursorAvatar, {})] }), _jsx("span", { className: "agent-status-button__label", children: connected ? "MCP" : "Settings" }), connected ? (_jsx("span", { className: "agent-status-button__dot", "data-test": "agent-status-dot", "aria-hidden": "true" })) : null] }) }));
+    return (_jsx(Tooltip, { content: connected ? status.label : mcpEnabled ? "Agent & MCP settings" : "Settings", stableTrigger: true, children: _jsxs(Button, { variant: "quiet", className: "agent-status-button", "aria-label": connected ? `MCP · ${status.label}` : "Settings", "data-test": "settings-button", "data-mcp-connected": connected ? "true" : "false", "data-mcp-listening": listening ? "true" : "false", onClick: () => onOpenSettings(mcpEnabled ? "mcp" : "instructions"), children: [connected ? _jsx(ConnectedAgentAvatar, { name: agent.agentClientName }) : mcpEnabled ? _jsxs("span", { className: "agent-status-button__avatars", children: [_jsx(CodexAvatar, {}), _jsx(ClaudeAvatar, {}), _jsx(CursorAvatar, {})] }) : null, _jsx("span", { className: "agent-status-button__label", children: connected ? "MCP" : "Settings" }), connected ? (_jsx("span", { className: "agent-status-button__dot", "data-test": "agent-status-dot", "aria-hidden": "true" })) : null] }) }));
 }

package/dist/inspector/shell/AppShell.js

@@ -2,14 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InspectorShell } from "./InspectorShell.js";
 import { CanvasWorkspace } from "../canvas/CanvasWorkspace.js";
 import { CanvasElementOverlay } from "../canvas/CanvasElementOverlay.js";
+import { isPageSurface } from "../canvas/pageSurface.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
 import { readNudgeUiEditorTarget } from "../../transport/editor.js";
 import { TooltipGroup } from "../ui/Tooltip.js";
+import { ToastRegion } from "../ui/Toast.js";
 import { CommentsOverlay } from "../comments/CommentsOverlay.js";
 export function AppShell() {
     const canvasEnabled = useNudgeUiRuntimeConfig().capabilities.canvas;
     const primaryUrl = typeof window === "undefined"
         ? null
-        : readNudgeUiEditorTarget(window.location.href);
-    return (_jsxs(TooltipGroup, { children: [canvasEnabled ? _jsx(CanvasWorkspace, { primaryUrl: primaryUrl }) : null, canvasEnabled ? _jsx(CanvasElementOverlay, {}) : null, canvasEnabled ? _jsx(CommentsOverlay, {}) : null, _jsx(InspectorShell, {})] }));
+        : isPageSurface()
+            ? window.location.href
+            : readNudgeUiEditorTarget(window.location.href);
+    return (_jsxs(TooltipGroup, { children: [canvasEnabled ? _jsx(CanvasWorkspace, { primaryUrl: primaryUrl }) : null, canvasEnabled ? _jsx(CanvasElementOverlay, {}) : null, canvasEnabled ? _jsx(CommentsOverlay, {}) : null, _jsx(InspectorShell, {}), _jsx(ToastRegion, {})] }));
 }

package/dist/inspector/shell/ChangesLog.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useSyncExternalStore } from "react";
-import { IconArrowBackUp } from "@tabler/icons-react";
-import { isComponentChange, isElementChange, isTextContentChange, isTokenChange, useChanges, revertChange, } from "../changes/changesLog.js";
+import { useMemo, useState, useSyncExternalStore } from "react";
+import { IconArrowBackUp, IconRestore } from "@tabler/icons-react";
+import { isComponentChange, isElementChange, isTextContentChange, isTokenChange, } from "../changes/types.js";
+import { useChanges, revertChange } from "../drafts/store.js";
 import { StaleChangeIndicator } from "../canvas/StaleChangeIndicator.js";
 import { Button } from "../ui/Button.js";
 import { Disclosure } from "../ui/Disclosure.js";
@@ -11,8 +12,8 @@ import { presentChange } from "../changes/presentation.js";
 import { getStructuralChanges, getStructuralChangeDiagnostics, getStructuralDiagnosticRevision, revertStructuralChange, subscribeStructuralChanges, subscribeStructuralDiagnostics, } from "../projection/structuralProjection.js";
 import { getRenderedInstanceChangeDiagnostics, getRenderedInstanceDiagnosticRevision, subscribeRenderedInstanceDiagnostics, } from "../projection/renderedInstance.js";
 import { getTextContentChangeDiagnostics, getTextProjectionDiagnosticRevision, subscribeTextProjectionDiagnostics, } from "../projection/textProjection.js";
-import { SketchChanges } from "../sketch/SketchChanges.js";
-import { useSketchStore } from "../sketch/store.js";
+import { removeSketch, useSketchStore } from "../sketch/store.js";
+import { StatusCallout } from "../ui/StatusCallout.js";
 import { useFrameComments } from "../comments/store.js";
 import { countPromptChanges } from "../prompt/generatePrompt.js";
 function groupChanges(changes) {
@@ -75,8 +76,25 @@ function changeActionLabel(change, presentation) {
         return "Changed text";
     return `Changed ${presentation.propertyLabel}`;
 }
-function RevertButton({ dataTest, dataProperty, onClick, }) {
-    return (_jsx(Tooltip, { content: "Revert", stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", size: "compact", className: "changes__revert", "data-test": dataTest, "data-property": dataProperty, label: "Revert change", onClick: onClick, children: _jsx(IconArrowBackUp, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) }));
+function RevertButton({ dataTest, dataProperty, onClick, disabled, label = "Revert change", tooltip = "Revert", }) {
+    return (_jsx(Tooltip, { content: tooltip, stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", size: "compact", className: "changes__revert", "data-test": dataTest, "data-property": dataProperty, label: label, disabled: disabled, onClick: onClick, children: _jsx(IconArrowBackUp, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) }));
+}
+function SketchChangeRow({ item }) {
+    const [error, setError] = useState(null);
+    const note = item.document.description.trim()
+        || item.document.annotations?.map((annotation) => annotation.description).join("; ");
+    const busy = item.status === "dispatching" || item.status === "handing-off";
+    async function remove() {
+        setError(null);
+        try {
+            if (!await removeSketch(item.document.id))
+                setError("The sketch could not be removed yet.");
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : "The sketch could not be removed.");
+        }
+    }
+    return (_jsxs("div", { className: "changes__group", children: [_jsxs("div", { className: "changes__row changes__row--sketch", "data-test": "sketch-row", "data-sketch-id": item.document.id, children: [_jsxs("div", { className: "changes__summary", children: [_jsx("span", { className: "changes__target", children: "Sketch" }), note ? _jsx("span", { className: "changes__action", title: note, children: note }) : null] }), _jsx(RevertButton, { dataTest: "sketch-revert", label: "Remove sketch", tooltip: "Remove sketch", disabled: busy, onClick: () => void remove() })] }), error ? _jsx(StatusCallout, { tone: "warning", role: "status", children: error }) : null] }));
 }
 export function ChangesLog({ onClearSession }) {
     const changes = useChanges();
@@ -84,8 +102,7 @@ export function ChangesLog({ onClearSession }) {
     const sketchStore = useSketchStore();
     const sketches = sketchStore.items;
     const structuralChanges = useSyncExternalStore(subscribeStructuralChanges, getStructuralChanges, getStructuralChanges);
-    // Diagnostics arrive independently from structural state when a renderer
-    // resolves a snapshot or its document observer detects a reconciliation.
+    // Diagnostics update independently of structural state, so they need their own subscriptions.
     useSyncExternalStore(subscribeStructuralDiagnostics, getStructuralDiagnosticRevision, getStructuralDiagnosticRevision);
     useSyncExternalStore(subscribeRenderedInstanceDiagnostics, getRenderedInstanceDiagnosticRevision, getRenderedInstanceDiagnosticRevision);
     useSyncExternalStore(subscribeTextProjectionDiagnostics, getTextProjectionDiagnosticRevision, getTextProjectionDiagnosticRevision);
@@ -103,8 +120,8 @@ export function ChangesLog({ onClearSession }) {
                                 const textDiagnostics = change.kind === "text-content"
                                     ? getTextContentChangeDiagnostics(change.id)
                                     : [];
-                                return (_jsxs("div", { className: "changes__row", "data-test": "change-row", "data-property": presentation.property, children: [_jsx("span", { className: "changes__target", "data-test": "change-target", children: changeTargetLabel(change, presentation) }), _jsx("span", { className: "changes__action", "data-test": "change-action", children: changeActionLabel(change, presentation) }), _jsxs("span", { className: "changes__metadata", "aria-hidden": "true", children: [_jsx("span", { className: "changes__prop", children: presentation.propertyLabel }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: presentation.before }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: presentation.after })] }), presentation.scope ? (_jsx("span", { className: "changes__scope", "data-test": "change-scope", children: presentation.scope === "source-site" ? "All outputs at source site" : "This rendered item only" })) : null, presentation.evidence ? (_jsx("span", { className: "changes__evidence", "data-test": "change-evidence", children: presentation.evidence })) : null, _jsx(StaleChangeIndicator, { change: change }), instanceDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "instance-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`))), textDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "text-projection-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`)))] }), _jsx(RevertButton, { dataTest: "change-revert", dataProperty: presentation.property, onClick: () => revertChange(change) })] }, `${group.key}\u0000${presentation.property}\u0000${i}`));
-                            }) }, group.key))), structuralChanges.map((change) => (_jsx("div", { className: "changes__group", "data-test": "dom-change", "data-cid": change.target.sourceSite.cid, children: _jsxs("div", { className: "changes__row", "data-test": "dom-change-row", "data-action": change.kind, children: [_jsx("span", { className: "changes__target", "data-test": "structural-target", children: change.target.sourceSite.cid }), _jsx("span", { className: "changes__action", "data-test": "structural-action", children: change.kind === "move" ? "Moved" : "Deleted" }), _jsxs("span", { className: "changes__metadata", "aria-hidden": "true", children: [_jsxs("span", { className: "changes__source-site", "data-test": "structural-source-site", children: ["Source site: ", change.target.sourceSite.cid] }), _jsx("span", { className: "changes__prop", children: change.kind === "move" ? "Move in DOM" : "Delete from DOM" }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: change.kind === "move"
+                                return (_jsxs("div", { className: "changes__row", "data-test": "change-row", "data-property": presentation.property, children: [_jsxs("div", { className: "changes__summary", children: [_jsx("span", { className: "changes__target", "data-test": "change-target", children: changeTargetLabel(change, presentation) }), _jsx("span", { className: "changes__action", "data-test": "change-action", children: changeActionLabel(change, presentation) })] }), _jsxs("span", { className: "changes__metadata", "aria-hidden": "true", children: [_jsx("span", { className: "changes__prop", children: presentation.propertyLabel }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: presentation.before }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: presentation.after })] }), presentation.scope ? (_jsx("span", { className: "changes__scope", "data-test": "change-scope", children: presentation.scope === "source-site" ? "All outputs at source site" : "This rendered item only" })) : null, presentation.evidence ? (_jsx("span", { className: "changes__evidence", "data-test": "change-evidence", children: presentation.evidence })) : null, _jsx(StaleChangeIndicator, { change: change }), instanceDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "instance-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`))), textDiagnostics.map((diagnostic) => (_jsxs("span", { className: "changes__diagnostic", "data-test": "text-projection-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, children: [diagnostic.document, ": ", diagnostic.status] }, `${diagnostic.document}:${diagnostic.status}`)))] }), _jsx(RevertButton, { dataTest: "change-revert", dataProperty: presentation.property, onClick: () => revertChange(change) })] }, `${group.key}\u0000${presentation.property}\u0000${i}`));
+                            }) }, group.key))), structuralChanges.map((change) => (_jsx("div", { className: "changes__group", "data-test": "dom-change", "data-cid": change.target.sourceSite.cid, children: _jsxs("div", { className: "changes__row", "data-test": "dom-change-row", "data-action": change.kind, children: [_jsxs("div", { className: "changes__summary", children: [_jsx("span", { className: "changes__target", "data-test": "structural-target", children: change.target.sourceSite.cid }), _jsx("span", { className: "changes__action", "data-test": "structural-action", children: change.kind === "move" ? "Moved" : "Deleted" })] }), _jsxs("span", { className: "changes__metadata", "aria-hidden": "true", children: [_jsxs("span", { className: "changes__source-site", "data-test": "structural-source-site", children: ["Source site: ", change.target.sourceSite.cid] }), _jsx("span", { className: "changes__prop", children: change.kind === "move" ? "Move in DOM" : "Delete from DOM" }), _jsxs("span", { className: "changes__value", children: [_jsx("span", { className: "changes__before", children: change.kind === "move"
                                                             ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
                                                                 ? `${change.presentation.sourceParentTag} position ${change.presentation.fromIndex + 1}`
                                                                 : `${structuralParentLabel(change, "source")} position ${change.presentation.fromIndex + 1}`
@@ -112,5 +129,5 @@ export function ChangesLog({ onClearSession }) {
                                                             ? structuralParentIdentityKey(change.source.parent) === structuralParentIdentityKey(change.destination.parent)
                                                                 ? `${change.presentation.destinationParentTag} position ${change.presentation.toIndex + 1}`
                                                                 : `${structuralParentLabel(change, "destination")} position ${change.presentation.toIndex + 1}`
-                                                            : "Removed" })] }), _jsx("span", { className: "changes__scope", "data-test": "structural-scope", children: "This rendered item only" }), getStructuralChangeDiagnostics(change.id).map((diagnostic) => (_jsx("span", { className: "changes__diagnostic", "data-test": "structural-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, "data-reason": diagnostic.reason, children: structuralDiagnosticText(diagnostic) }, `${diagnostic.document}:${diagnostic.status}:${diagnostic.reason ?? ""}`)))] }), _jsx(RevertButton, { dataTest: "dom-change-revert", onClick: () => revertStructuralChange(change.id) })] }) }, change.id))), _jsx(SketchChanges, {})] })) }) : null, onClearSession ? (_jsx("div", { className: "changes__session-action", "data-test": "session-actions", children: _jsx(Button, { variant: "secondary", type: "button", "data-test": "clear-session", onClick: onClearSession, children: "Clear Changes" }) })) : null] }));
+                                                            : "Removed" })] }), _jsx("span", { className: "changes__scope", "data-test": "structural-scope", children: "This rendered item only" }), getStructuralChangeDiagnostics(change.id).map((diagnostic) => (_jsx("span", { className: "changes__diagnostic", "data-test": "structural-diagnostic", "data-document": diagnostic.document, "data-status": diagnostic.status, "data-reason": diagnostic.reason, children: structuralDiagnosticText(diagnostic) }, `${diagnostic.document}:${diagnostic.status}:${diagnostic.reason ?? ""}`)))] }), _jsx(RevertButton, { dataTest: "dom-change-revert", onClick: () => revertStructuralChange(change.id) })] }) }, change.id))), sketches.map((item) => _jsx(SketchChangeRow, { item: item }, `${item.document.id}:${item.document.revision}`)), sketchStore.error ? _jsx(StatusCallout, { tone: "warning", "data-test": "sketch-storage-error", children: sketchStore.error }) : null] })) }) : null, onClearSession ? (_jsx("div", { className: "changes__session-action", "data-test": "session-actions", children: _jsxs(Button, { variant: "quiet", type: "button", "data-test": "clear-session", onClick: onClearSession, children: [_jsx(IconRestore, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), "Clear Changes"] }) })) : null] }));
 }

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

@@ -5,5 +5,6 @@ export interface CopyPromptButtonProps {
     readonly settingsSection?: SettingsSection;
     readonly onOpenSettings?: (section: SettingsSection) => void;
     readonly onSettingsOpenChange?: (open: boolean) => void;
+    readonly onClearChanges?: () => void;
 }
-export declare function CopyPromptButton({ settingsOpen: controlledSettingsOpen, settingsSection: controlledSettingsSection, onOpenSettings, onSettingsOpenChange, }?: CopyPromptButtonProps): ReactElement;
+export declare function CopyPromptButton({ settingsOpen: controlledSettingsOpen, settingsSection: controlledSettingsSection, onOpenSettings, onSettingsOpenChange, onClearChanges, }?: CopyPromptButtonProps): ReactElement;