nudge-ui 0.2.5 → 0.2.6

package/dist/inspector/selection/hierarchy.js

@@ -21,30 +21,48 @@ export function computeHierarchy(el) {
     }
     return chain;
 }
-/** Returns the nearest tracked descendants, breadth-first and document-ordered. */
-export function computeDescendants(el, maxDepth = 2, maxNodes = 2) {
-    if (maxDepth < 1 || maxNodes < 1)
-        return [];
-    const descendants = Array.from(el.querySelectorAll('[data-cid]'))
-        .map((element, order) => {
-        let depth = 1;
-        let ancestor = element.parentElement;
-        while (ancestor && ancestor !== el) {
-            if (ancestor.hasAttribute('data-cid'))
-                depth += 1;
-            ancestor = ancestor.parentElement;
+/** Direct children listed in the DOM navigator before the rest collapse into a count. */
+export const NAVIGATOR_CHILD_LIMIT = 50;
+function htmlElementConstructor(el) {
+    return el.ownerDocument.defaultView?.HTMLElement ?? null;
+}
+/** The nearest tracked elements below `el` in document order, looking through untracked wrappers. */
+export function computeTrackedChildren(el, limit = NAVIGATOR_CHILD_LIMIT) {
+    const constructor = htmlElementConstructor(el);
+    const result = { elements: [], hidden: 0 };
+    if (!constructor)
+        return result;
+    const visit = (parent) => {
+        for (const child of parent.children) {
+            if (!(child instanceof constructor))
+                continue;
+            if (!child.hasAttribute("data-cid"))
+                visit(child);
+            else if (result.elements.length < limit)
+                result.elements.push(child);
+            else
+                result.hidden += 1;
+        }
+    };
+    visit(el);
+    return result;
+}
+export function hasTrackedChildren(el) {
+    const constructor = htmlElementConstructor(el);
+    if (!constructor)
+        return false;
+    const visit = (parent) => {
+        for (const child of parent.children) {
+            if (!(child instanceof constructor))
+                continue;
+            if (child.hasAttribute("data-cid") || visit(child))
+                return true;
         }
-        return ancestor === el ? { element, depth, order } : null;
-    })
-        .filter((node) => node !== null && node.depth <= maxDepth)
-        .sort((left, right) => left.depth - right.depth || left.order - right.order);
-    return descendants.slice(0, maxNodes).map(({ element, depth }) => ({ element, depth }));
+        return false;
+    };
+    return visit(el);
 }
-export function computeNavigationNodes(el, hierarchy = computeHierarchy(el)) {
-    const children = computeDescendants(el, 2, 2);
-    const parents = hierarchy.slice(1, (children.length > 0 ? 2 : 4) + 1);
-    return [
-        ...parents.map((element, index) => ({ element, direction: "up", depth: index + 1 })),
-        ...children.map(({ element, depth }) => ({ element, direction: "down", depth })),
-    ];
+/** Nearest tracked ancestors, fewer when children also fill the menu. */
+export function computeNavigationParents(hierarchy, hasChildren) {
+    return hierarchy.slice(1, (hasChildren ? 2 : 4) + 1);
 }

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

@@ -10,7 +10,6 @@ export interface SelectedElement {
     fiber?: unknown;
     componentTargets: RuntimeComponentTarget[];
 }
-/** The ordered selection presented to the inspector. */
 export interface Selection {
     elements: readonly SelectedElement[];
     primary: SelectedElement;
@@ -22,11 +21,9 @@ declare function getSelection(): Selection | null;
 declare function getHierarchy(): HTMLElement[];
 declare function getHierarchyIndex(): number;
 export declare function setSelectedElement(el: SelectedElement | null): void;
-/** Replaces the selection with one or more ordered targets. */
 export declare function setSelectedElements(elements: readonly SelectedElement[]): void;
 /** Adds or removes one target while keeping the toggled target primary. */
 export declare function toggleSelectedElement(el: SelectedElement): void;
-/** Removes one rendered node from the group, preserving the remaining order. */
 export declare function removeSelectedElement(el: HTMLElement): void;
 /** Refreshes metadata for one selected DOM node without collapsing a group. */
 export declare function refreshSelectedElement(el: SelectedElement): void;

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

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconRobot } from "@tabler/icons-react";
 import { useAgentClient } from "../agent/client.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 }) {
+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/ChangesLog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState, useSyncExternalStore } from "react";
-import { IconArrowBackUp } from "@tabler/icons-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";
@@ -102,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);
@@ -130,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))), 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: _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;

package/dist/inspector/shell/CopyPromptButton.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PromptActionButton, PromptActionRow } from "./PromptActionButton.js";
 import { Menu } from "@base-ui/react/menu";
 import { iterationId } from "../canvas/frameContent.js";
 import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { IconArtboard, IconBoltFilled, IconCheck, IconChevronDown, IconCopy, IconPencil, IconPlugConnected, IconSend, IconX, } from "@tabler/icons-react";
+import { IconArtboard, IconBoltFilled, IconCheck, IconCopy, IconPencil, IconPlugConnected, IconSend, IconX, } from "@tabler/icons-react";
 import { useChanges } from "../drafts/store.js";
 import { countPromptChanges } from "../prompt/generatePrompt.js";
 import { loadCustomInstructions, saveCustomInstructions } from "../prompt/promptSettings.js";
@@ -32,7 +33,7 @@ import { copyToClipboard } from "../prompt/copyToClipboard.js";
 import { useFrameComments } from "../comments/store.js";
 import { reconcileComments } from "../comments/verification.js";
 import { getRegisteredFrames } from "../canvas/projection.js";
-export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, settingsSection: controlledSettingsSection, onOpenSettings, onSettingsOpenChange, } = {}) {
+export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, settingsSection: controlledSettingsSection, onOpenSettings, onSettingsOpenChange, onClearChanges, } = {}) {
     const changes = useChanges();
     const comments = useFrameComments();
     useDrafts();
@@ -323,15 +324,15 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
         : canSend
             ? "Send to the connected agent"
             : "Edits made in the inspector";
-    const promptButton = (_jsxs(Button, { variant: "primary", className: "copy-prompt__main", "data-test": "copy-prompt", type: "button", disabled: disabled, "data-copied": copied ? "true" : "false", "data-agent-state": agent.state, "aria-busy": preparing || working || connecting ? "true" : undefined, onClick: hasMenu ? undefined : onClick, 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] }));
-    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [hasMenu ? (_jsxs(Menu.Root, { modal: false, children: [_jsx(Menu.Trigger, { render: promptButton }), _jsx(Menu.Portal, { container: portalContainer(), children: _jsx(Menu.Positioner, { className: "inspector-popover__positioner", side: "bottom", align: "start", sideOffset: 6, children: _jsxs(Menu.Popup, { className: "inspector-popover__popup copy-prompt__menu", "data-test": "copy-prompt-menu", children: [activeArtifactId ? (_jsxs(_Fragment, { children: [_jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-iteration-prompt", label: "Copy iteration prompt", onClick: () => void copyIterationPrompt("iteration"), children: [_jsx(IconArtboard, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: "Copy iteration prompt" }), _jsx("span", { className: "copy-prompt__menu-description", children: "Continue editing this HTML iteration." })] })] }), _jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-iteration-implementation", label: "Copy prompt for live app", onClick: () => void copyIterationPrompt("application"), children: [_jsx(IconBoltFilled, { className: "copy-prompt__menu-icon copy-prompt__menu-icon--live", size: "var(--icon-size-small)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: "Copy prompt for live app" }), _jsx("span", { className: "copy-prompt__menu-description", children: "Implement design in real app" })] })] })] })) : (_jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-style-edit-prompt", label: styleEditLabel, disabled: !canConnect && changeCount === 0, onClick: () => void onClick(), children: [canConnect
-                                                ? _jsx(IconPlugConnected, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" })
-                                                : canSend
-                                                    ? _jsx(IconSend, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" })
-                                                    : _jsx(IconPencil, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: styleEditLabel }), _jsx("span", { className: "copy-prompt__menu-description", children: styleEditDescription })] })] })), visibleSketches.length > 0 ? _jsx(Menu.Separator, { className: "copy-prompt__menu-separator" }) : null, visibleSketches.map((item, index) => {
-                                        const busy = item.status === "dispatching" || item.status === "handing-off";
-                                        return (_jsxs("div", { className: "copy-prompt__menu-row", children: [_jsxs(Menu.Item, { className: "copy-prompt__menu-item copy-prompt__menu-item--sketch", "data-test": "copy-sketch", "data-sketch-id": item.document.id, label: `Copy Sketch ${index + 1}`, disabled: busy, onClick: () => void copySketchImageOnRequest(item.document.annotatedImage), children: [_jsx(SketchThumbnail, { item: item }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsxs("span", { className: "copy-prompt__menu-title", children: ["Copy Sketch ", index + 1] }), item.document.description ? (_jsx("span", { className: "copy-prompt__menu-description copy-prompt__menu-description--truncate", children: item.document.description })) : null] })] }), _jsx(IconButton, { className: "copy-prompt__menu-delete", variant: "quiet", size: "compact", label: `Delete Sketch ${index + 1}`, "data-test": "copy-sketch-delete", disabled: busy, onClick: () => void deleteSketch(item.document.id), children: _jsx(IconX, { size: "var(--icon-size-small)", "aria-hidden": "true" }) })] }, item.document.id));
-                                    })] }) }) })] }, activeDraftCardId)) : promptButton, statusAction || agentStatus.kind === "connected-not-listening" ? (_jsx(StatusCallout, { className: "copy-prompt__agent-status", tone: agentStatus.tone, "data-test": "agent-connection-status", children: _jsxs("div", { className: "copy-prompt__agent-status-content", children: [_jsx("span", { role: "status", children: agentStatus.label }), statusAction ? (_jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: () => void handleAgentStatusAction(), children: statusAction.label })) : null] }) })) : null, showImplemented ? (_jsxs("p", { className: "copy-prompt__hint copy-prompt__hint--centered copy-prompt__hint--implemented", "data-test": "handoff-implemented-hint", role: "status", children: ["Changes implemented.", remainingCount > 0 ? (_jsxs(_Fragment, { children: [" ", _jsx("button", { type: "button", className: "copy-prompt__hint-action", "data-test": "handoff-clear-remaining", onClick: clearRemaining, children: "Clear stale edits" })] })) : null] })) : null, saveMessage ? (_jsx("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "iteration-save-hint", role: "status", children: saveMessage })) : null, sketchFallback ? (_jsxs(StatusCallout, { className: "copy-prompt__sketch-fallback", tone: "warning", "data-test": "sketch-dispatch-error", children: [_jsx("span", { children: sketchFallback.error }), _jsx(Button, { size: "compact", variant: "secondary", type: "button", "data-test": "sketch-copy-fallback", onClick: () => {
+    const promptButton = (_jsx(PromptActionButton, { disabled: disabled, copied: copied, agentState: agent.state, busy: preparing || working || connecting, onClick: hasMenu ? undefined : onClick, icon: icon, label: label, badgeCount: badgeCount, hasMenu: hasMenu }));
+    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [_jsx(PromptActionRow, { onClear: onClearChanges, hasChanges: changeCount > 0, children: hasMenu ? (_jsxs(Menu.Root, { modal: false, children: [_jsx(Menu.Trigger, { render: promptButton }), _jsx(Menu.Portal, { container: portalContainer(), children: _jsx(Menu.Positioner, { className: "inspector-popover__positioner", side: "bottom", align: "start", sideOffset: 6, children: _jsxs(Menu.Popup, { className: "inspector-popover__popup copy-prompt__menu", "data-test": "copy-prompt-menu", children: [activeArtifactId ? (_jsxs(_Fragment, { children: [_jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-iteration-prompt", label: "Copy iteration prompt", onClick: () => void copyIterationPrompt("iteration"), children: [_jsx(IconArtboard, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: "Copy iteration prompt" }), _jsx("span", { className: "copy-prompt__menu-description", children: "Continue editing this HTML iteration." })] })] }), _jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-iteration-implementation", label: "Copy prompt for live app", onClick: () => void copyIterationPrompt("application"), children: [_jsx(IconBoltFilled, { className: "copy-prompt__menu-icon copy-prompt__menu-icon--live", size: "var(--icon-size-small)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: "Copy prompt for live app" }), _jsx("span", { className: "copy-prompt__menu-description", children: "Implement design in real app" })] })] })] })) : (_jsxs(Menu.Item, { className: "copy-prompt__menu-item", "data-test": "copy-style-edit-prompt", label: styleEditLabel, disabled: !canConnect && changeCount === 0, onClick: () => void onClick(), children: [canConnect
+                                                    ? _jsx(IconPlugConnected, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" })
+                                                    : canSend
+                                                        ? _jsx(IconSend, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" })
+                                                        : _jsx(IconPencil, { className: "copy-prompt__menu-icon", size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsx("span", { className: "copy-prompt__menu-title", children: styleEditLabel }), _jsx("span", { className: "copy-prompt__menu-description", children: styleEditDescription })] })] })), visibleSketches.length > 0 ? _jsx(Menu.Separator, { className: "copy-prompt__menu-separator" }) : null, visibleSketches.map((item, index) => {
+                                            const busy = item.status === "dispatching" || item.status === "handing-off";
+                                            return (_jsxs("div", { className: "copy-prompt__menu-row", children: [_jsxs(Menu.Item, { className: "copy-prompt__menu-item copy-prompt__menu-item--sketch", "data-test": "copy-sketch", "data-sketch-id": item.document.id, label: `Copy Sketch ${index + 1}`, disabled: busy, onClick: () => void copySketchImageOnRequest(item.document.annotatedImage), children: [_jsx(SketchThumbnail, { item: item }), _jsxs("span", { className: "copy-prompt__menu-content", children: [_jsxs("span", { className: "copy-prompt__menu-title", children: ["Copy Sketch ", index + 1] }), item.document.description ? (_jsx("span", { className: "copy-prompt__menu-description copy-prompt__menu-description--truncate", children: item.document.description })) : null] })] }), _jsx(IconButton, { className: "copy-prompt__menu-delete", variant: "quiet", size: "compact", label: `Delete Sketch ${index + 1}`, "data-test": "copy-sketch-delete", disabled: busy, onClick: () => void deleteSketch(item.document.id), children: _jsx(IconX, { size: "var(--icon-size-small)", "aria-hidden": "true" }) })] }, item.document.id));
+                                        })] }) }) })] }, activeDraftCardId)) : promptButton }), statusAction || agentStatus.kind === "connected-not-listening" ? (_jsx(StatusCallout, { className: "copy-prompt__agent-status", tone: agentStatus.tone, "data-test": "agent-connection-status", children: _jsxs("div", { className: "copy-prompt__agent-status-content", children: [_jsx("span", { role: "status", children: agentStatus.label }), statusAction ? (_jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: () => void handleAgentStatusAction(), children: statusAction.label })) : null] }) })) : null, showImplemented ? (_jsxs("p", { className: "copy-prompt__hint copy-prompt__hint--centered copy-prompt__hint--implemented", "data-test": "handoff-implemented-hint", role: "status", children: ["Changes implemented.", remainingCount > 0 ? (_jsxs(_Fragment, { children: [" ", _jsx("button", { type: "button", className: "copy-prompt__hint-action", "data-test": "handoff-clear-remaining", onClick: clearRemaining, children: "Clear stale edits" })] })) : null] })) : null, saveMessage ? (_jsx("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "iteration-save-hint", role: "status", children: saveMessage })) : null, sketchFallback ? (_jsxs(StatusCallout, { className: "copy-prompt__sketch-fallback", tone: "warning", "data-test": "sketch-dispatch-error", children: [_jsx("span", { children: sketchFallback.error }), _jsx(Button, { size: "compact", variant: "secondary", type: "button", "data-test": "sketch-copy-fallback", onClick: () => {
                             void copyHandoff(sketchFallback.handoff).then(() => {
                                 setSketchFallback(null);
                             }).catch(() => undefined);

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

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

package/dist/inspector/shell/InspectorEditors.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { findTokenRow } from "../styleEditors/rowLookup.js";
+import { Typography } from "../styleEditors/Typography.js";
+import { BackgroundEditor } from "../styleEditors/BackgroundEditor.js";
+import { ColorPicker } from "../styleEditors/ColorPicker.js";
+import { BorderEditor } from "../styleEditors/BorderEditor.js";
+import { AppearanceSection } from "../styleEditors/AppearanceSection.js";
+import { BoxShadowEditor } from "../styleEditors/BoxShadowEditor.js";
+import { LayoutSection } from "../styleEditors/LayoutSection.js";
+import { AtRuleContextProvider } from "../ui/AtRuleContext.js";
+/** Composes the same style editors for the live inspector and fixture hosts. */
+export function InspectorEditors({ selected, styleSelection, tokenEntries, tokenRows, styleState, showText, backgroundTokenRow }) {
+    return (_jsx(AtRuleContextProvider, { rows: tokenRows, children: _jsxs("div", { className: "style-editors", "data-test": "style-editors", children: [_jsx(LayoutSection, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `layout-${styleState}`), _jsx(AppearanceSection, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `appearance-${styleState}`), showText ? _jsxs(_Fragment, { children: [_jsx(Typography, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `type-${styleState}`), _jsx(ColorPicker, { element: selected, selection: styleSelection, property: "color", entries: tokenEntries, tokenRow: findTokenRow(tokenRows, "color") }, `color-${styleState}`)] }) : null, _jsx(BackgroundEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRow: backgroundTokenRow }, `background-${styleState}`), _jsx(BorderEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `border-${styleState}`), _jsx(BoxShadowEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `box-shadow-${styleState}`)] }) }));
+}