nudge-ui 0.2.0

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

@@ -0,0 +1,22 @@
+import type { SelectedElement } from "./selectionStore.js";
+import type { EditTarget } from "./editTarget.js";
+import type { InspectionSnapshot } from "../inspection/browserCssInspection.js";
+import type { ResolvedProperty } from "../../css/model/index.js";
+import { type SelectionProperty } from "../inspection/selectionProperty.js";
+/** Layout roles whose controls are only safe when shared by every target. */
+export type StyleRole = "flex-container" | "flex-child" | "grid-container" | "grid-child" | "relative-position" | "inset-position";
+export interface StyleSelection {
+    primary: SelectedElement;
+    elements: readonly SelectedElement[];
+    domElements: readonly HTMLElement[];
+    target: EditTarget;
+    primaryRows: readonly ResolvedProperty[];
+    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.
+ */
+export declare function createStyleSelection(elements: readonly SelectedElement[], snapshots: readonly InspectionSnapshot[], selectedPrimary?: SelectedElement | null): StyleSelection | null;

package/dist/inspector/selection/styleSelection.js

@@ -0,0 +1,104 @@
+import { projectSelectionProperty, } from "../inspection/selectionProperty.js";
+import { getElementComputedStyle } from "../runtime/domRealm.js";
+import { getStateStyleValue } from "../shell/stateValue.js";
+import { getActiveStyleState } from "../shell/styleState.js";
+function displayIs(element, values) {
+    const display = getElementComputedStyle(element).display;
+    return values.includes(display);
+}
+function isFlexContainer(element) {
+    return displayIs(element, ["flex", "inline-flex"]);
+}
+function isGridContainer(element) {
+    return displayIs(element, ["grid", "inline-grid"]);
+}
+function parentDisplayIs(element, values) {
+    const parent = element.parentElement;
+    return parent ? displayIs(parent, values) : false;
+}
+function supportsRole(element, role) {
+    switch (role) {
+        case "flex-container":
+            return isFlexContainer(element);
+        case "flex-child":
+            return parentDisplayIs(element, ["flex", "inline-flex"]);
+        case "grid-container":
+            return isGridContainer(element);
+        case "grid-child":
+            return parentDisplayIs(element, ["grid", "inline-grid"]);
+        case "relative-position": {
+            const position = getStateStyleValue(element, "position", "static").trim().toLowerCase();
+            return position === "relative" || position === "sticky";
+        }
+        case "inset-position": {
+            const position = getStateStyleValue(element, "position", "static").trim().toLowerCase();
+            return position === "absolute" || position === "fixed";
+        }
+    }
+}
+/**
+ * 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.
+ */
+export function createStyleSelection(elements, snapshots, selectedPrimary) {
+    const primary = selectedPrimary && elements.some((element) => element.domElement === selectedPrimary.domElement)
+        ? selectedPrimary
+        : elements.at(-1);
+    if (!primary || snapshots.length !== elements.length)
+        return null;
+    const primaryIndex = elements.findIndex((element) => element.domElement === primary.domElement);
+    const activeState = getActiveStyleState();
+    const shouldUseInspection = elements.map(({ domElement }) => activeState !== "base"
+        || [":hover", ":active", ":focus", ":focus-visible"].some((selector) => {
+            try {
+                return domElement.matches(selector);
+            }
+            catch {
+                return false;
+            }
+        }));
+    const rowsByProperty = snapshots.map((snapshot) => new Map(snapshot.properties.map((row) => [row.property, row])));
+    const computedStyles = elements.map(({ domElement }) => {
+        try {
+            return getElementComputedStyle(domElement);
+        }
+        catch {
+            return null;
+        }
+    });
+    const propertyCache = new Map();
+    function getProperty(property) {
+        const cached = propertyCache.get(property);
+        if (cached)
+            return cached;
+        const rows = rowsByProperty.map((candidateRows) => candidateRows.get(property)
+            ?? (property === "background-color" ? candidateRows.get("background") : undefined)
+            ?? null);
+        const values = computedStyles.map((style, index) => {
+            if (shouldUseInspection[index]) {
+                const row = rows[index];
+                if (row?.resolvedValue)
+                    return row.resolvedValue;
+            }
+            return style?.getPropertyValue(property).trim() ?? "";
+        });
+        const projected = projectSelectionProperty(property, rows, values, primaryIndex);
+        if (projected)
+            propertyCache.set(property, projected);
+        return projected;
+    }
+    const domElements = elements.map((element) => element.domElement);
+    const target = domElements.length > 1 ? domElements : primary.domElement;
+    return {
+        primary,
+        elements,
+        domElements,
+        target,
+        primaryRows: snapshots[primaryIndex]?.properties ?? [],
+        getProperty,
+        supportsRole(role) {
+            return domElements.every((element) => supportsRole(element, role));
+        },
+    };
+}

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

@@ -0,0 +1,3 @@
+export { createDocumentSession, createInspectorSession, createWorkspace, type DocumentSession, type InspectorHost, type InspectorSession, type Workspace, } from "./sessionFactory.js";
+export { InspectorSessionProvider, useDocumentSession, useInspectorSession, useSessionContext, type InspectorSessionProviderProps, type SessionContextValue, } from "./sessionContext.js";
+export type { CleanupCallback, SessionOwner } from "./lifecycle.js";

package/dist/inspector/session/index.js

@@ -0,0 +1,2 @@
+export { createDocumentSession, createInspectorSession, createWorkspace, } from "./sessionFactory.js";
+export { InspectorSessionProvider, useDocumentSession, useInspectorSession, useSessionContext, } from "./sessionContext.js";

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

@@ -0,0 +1,22 @@
+/** 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.
+ */
+export interface SessionOwner {
+    readonly id: string;
+    readonly disposed: boolean;
+    registerCleanup(callback: CleanupCallback): () => void;
+    dispose(): void;
+}
+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

@@ -0,0 +1,63 @@
+const NOOP = () => { };
+let nextOwnerId = 0;
+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();
+    const callbacks = new Set();
+    function registerCleanup(callback) {
+        if (disposed)
+            return NOOP;
+        const registration = { callback };
+        callbacks.add(registration);
+        return () => {
+            callbacks.delete(registration);
+        };
+    }
+    function dispose() {
+        if (disposed)
+            return;
+        disposed = true;
+        const errors = [];
+        const run = (callback) => {
+            try {
+                callback();
+            }
+            catch (error) {
+                errors.push(error);
+            }
+        };
+        for (const child of children)
+            run(() => child.dispose());
+        for (const { callback } of callbacks)
+            run(callback);
+        children.clear();
+        callbacks.clear();
+        if (errors.length === 1)
+            throw errors[0];
+        if (errors.length > 1)
+            throw new AggregateError(errors, `Failed to dispose ${kind} owner.`);
+    }
+    return {
+        id: nextId(kind),
+        get disposed() {
+            return disposed;
+        },
+        registerCleanup,
+        adopt(child) {
+            if (disposed) {
+                child.dispose();
+                return;
+            }
+            if (child.disposed)
+                return;
+            children.add(child);
+            child.registerCleanup(() => children.delete(child));
+        },
+        dispose,
+    };
+}

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

@@ -0,0 +1,21 @@
+import type { ReactElement, ReactNode } from "react";
+import type { DocumentSession, InspectorSession, Workspace } from "./sessionFactory.js";
+/** Handles delivered to editors through React without carrying domain state. */
+export interface SessionContextValue {
+    readonly workspace: Workspace;
+    readonly inspector: InspectorSession;
+    readonly document: DocumentSession | null;
+}
+export interface InspectorSessionProviderProps {
+    readonly inspector: InspectorSession;
+    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

@@ -0,0 +1,28 @@
+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,
+        inspector,
+        document: documentSession,
+    }), [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) {
+        throw new Error("useSessionContext must be used inside InspectorSessionProvider.");
+    }
+    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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,73 @@
+import { createSessionOwner, } from "./lifecycle.js";
+function createDocumentSessionFor(workspace, inspector, parent, doc) {
+    const owner = createSessionOwner("document");
+    const session = {
+        get id() {
+            return owner.id;
+        },
+        get disposed() {
+            return owner.disposed;
+        },
+        registerCleanup: owner.registerCleanup,
+        dispose: owner.dispose,
+        document: doc,
+        inspector,
+        workspace,
+    };
+    parent.adopt(owner);
+    return session;
+}
+function createInspectorSessionFor(workspace, parent, host) {
+    const owner = createSessionOwner("inspector");
+    let session;
+    session = {
+        get id() {
+            return owner.id;
+        },
+        get disposed() {
+            return owner.disposed;
+        },
+        registerCleanup: owner.registerCleanup,
+        dispose: owner.dispose,
+        host,
+        workspace,
+        createDocumentSession(doc) {
+            return createDocumentSessionFor(workspace, session, owner, doc);
+        },
+    };
+    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;
+    workspace = {
+        get id() {
+            return owner.id;
+        },
+        get disposed() {
+            return owner.disposed;
+        },
+        registerCleanup: owner.registerCleanup,
+        dispose: owner.dispose,
+        createInspectorSession(host) {
+            return createInspectorSessionFor(workspace, owner, host);
+        },
+        createDocumentSession(doc) {
+            return createDocumentSessionFor(workspace, null, owner, doc);
+        },
+    };
+    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

@@ -0,0 +1,12 @@
+import type { ReactElement } from "react";
+import { type McpConnectionContentProps } from "../agent/McpConnectionDialog.js";
+export type SettingsSection = "instructions" | "mcp" | "tokens";
+export interface SettingsDialogProps extends McpConnectionContentProps {
+    readonly open: boolean;
+    readonly initialSection: SettingsSection;
+    readonly value: string;
+    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, onDisconnect, onCheckAgain, }: SettingsDialogProps): ReactElement;

package/dist/inspector/settings/SettingsDialog.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+import { IconColorSwatch, IconPlugConnected, IconSettings, IconX, } from "@tabler/icons-react";
+import { useBrowserCssInspection } from "../inspection/useBrowserCssInspection.js";
+import { McpConnectionContent, } from "../agent/McpConnectionDialog.js";
+import { PromptSettingsFields, } from "../prompt/PromptSettingsDialog.js";
+import { TokensPanel } from "../tokens/TokensPanel.js";
+const SETTINGS_SECTIONS = [
+    {
+        id: "instructions",
+        label: "Custom instructions",
+        icon: _jsx(IconSettings, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }),
+    },
+    {
+        id: "mcp",
+        label: "MCP",
+        icon: _jsx(IconPlugConnected, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }),
+    },
+    {
+        id: "tokens",
+        label: "Tokens",
+        icon: _jsx(IconColorSwatch, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }),
+    },
+];
+function portalContainer() {
+    return typeof document !== "undefined"
+        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
+        : null;
+}
+/** Provides one settings surface for prompt, MCP, and token configuration. */
+export function SettingsDialog({ open, initialSection, value, onValueChange, onOpenChange, projectId, origin, snapshot, onConnect, onDisconnect, onCheckAgain, }) {
+    const [activeSection, setActiveSection] = useState(initialSection);
+    const closeRef = useRef(null);
+    const instructionsRef = useRef(null);
+    const tokenInspection = useBrowserCssInspection(null, "base", {
+        includeDocumentTokens: activeSection === "tokens",
+    });
+    const tokenRows = tokenInspection.documentTokens?.tokens ?? [];
+    const activeDefinition = SETTINGS_SECTIONS.find((section) => section.id === activeSection) ?? SETTINGS_SECTIONS[0];
+    useEffect(() => {
+        if (open)
+            setActiveSection(initialSection);
+    }, [initialSection, open]);
+    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("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: activeDefinition.label }), _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, 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] })] })] })] }) }));
+}

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

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

package/dist/inspector/shell/AppShell.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
+export function AppShell() {
+    const canvasEnabled = useNudgeUiRuntimeConfig().capabilities.canvas;
+    return (_jsxs(_Fragment, { children: [canvasEnabled ? _jsx(CanvasWorkspace, {}) : null, canvasEnabled ? _jsx(CanvasElementOverlay, {}) : null, _jsx(InspectorShell, {})] }));
+}

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

@@ -0,0 +1,6 @@
+import type { ReactElement } from "react";
+interface ChangesLogProps {
+    onClearSession?: () => void;
+}
+export declare function ChangesLog({ onClearSession }: ChangesLogProps): ReactElement | null;
+export {};

package/dist/inspector/shell/ChangesLog.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useSyncExternalStore } from "react";
+import { IconChevronDown } from "@tabler/icons-react";
+import { isElementChange, useChanges, revertChange } from "../changes/changesLog.js";
+import { StaleChangeIndicator } from "../canvas/StaleChangeIndicator.js";
+import { Button } from "../ui/Button.js";
+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";
+function groupChanges(changes) {
+    const map = new Map();
+    for (const change of changes) {
+        const presentation = presentChange(change);
+        const key = presentation.groupKey;
+        let group = map.get(key);
+        if (!group) {
+            group = {
+                key,
+                label: presentation.groupLabel,
+                file: presentation.file,
+                changes: [],
+            };
+            map.set(key, group);
+        }
+        group.changes.push(change);
+    }
+    return Array.from(map.values());
+}
+function sourceFile(change) {
+    return change.target.sourceSite.src.split(":").slice(0, -2).join(":") || change.target.sourceSite.src;
+}
+function structuralParentLabel(change, side) {
+    const parent = side === "source" ? change.source.parent : change.destination.parent;
+    const tag = side === "source" ? change.presentation.sourceParentTag : change.presentation.destinationParentTag;
+    return `${parent.sourceSite.cid} (${tag})`;
+}
+function structuralParentIdentityKey(ref) {
+    const { sourceSite, locator } = ref;
+    return JSON.stringify([
+        sourceSite.cid,
+        sourceSite.src,
+        locator.occurrence,
+        locator.props,
+        locator.ariaLabel ?? null,
+    ]);
+}
+function structuralReasonLabel(reason) {
+    switch (reason) {
+        case "target": return "target address";
+        case "source-parent": return "source parent address";
+        case "destination-parent": return "destination parent address";
+        case "anchor": return "destination anchor";
+        case "illegal-destination": return "illegal destination";
+        case "react-override": return "React override";
+    }
+}
+function structuralDiagnosticText(diagnostic) {
+    return `${diagnostic.document}: ${diagnostic.status}${diagnostic.reason ? ` (${structuralReasonLabel(diagnostic.reason)})` : ""}`;
+}
+export function ChangesLog({ onClearSession }) {
+    const changes = useChanges();
+    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.
+    useSyncExternalStore(subscribeStructuralDiagnostics, getStructuralDiagnosticRevision, getStructuralDiagnosticRevision);
+    useSyncExternalStore(subscribeRenderedInstanceDiagnostics, getRenderedInstanceDiagnosticRevision, getRenderedInstanceDiagnosticRevision);
+    useSyncExternalStore(subscribeTextProjectionDiagnostics, getTextProjectionDiagnosticRevision, getTextProjectionDiagnosticRevision);
+    const groups = useMemo(() => groupChanges(changes), [changes]);
+    const total = changes.length + structuralChanges.length;
+    if (total === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsxs("details", { className: "changes", "data-test": "changes-log", children: [_jsxs("summary", { className: "changes__title", "data-test": "changes-toggle", children: [_jsx("span", { className: "changes__title-label", children: "Changes" }), total > 0 ? _jsx("span", { className: "changes__count", children: total }) : null, _jsx(IconChevronDown, { className: "changes__toggle-icon", size: 15, stroke: 2, "aria-hidden": "true" })] }), _jsx("div", { className: "changes__content", children: groups.length === 0 && structuralChanges.length === 0 ? (_jsx("div", { className: "changes__empty", "data-test": "changes-empty", children: "No changes yet" })) : (_jsxs(_Fragment, { children: [groups.map((group) => (_jsxs("div", { className: "changes__group", "data-test": "changes-group", "data-cid": group.label, children: [_jsxs("div", { className: "changes__group-title", children: [_jsx("span", { children: group.label }), _jsx("span", { className: "changes__group-file", children: group.file })] }), group.changes.map((change, i) => {
+                                            const presentation = presentChange(change);
+                                            const instanceDiagnostics = isElementChange(change) && change.scope === "rendered-instance"
+                                                && change.instanceOverride
+                                                ? getRenderedInstanceChangeDiagnostics(change.instanceOverride.id)
+                                                : [];
+                                            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__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(Button, { size: "compact", className: "changes__revert", "data-test": "change-revert", "data-property": presentation.property, onClick: () => revertChange(change), children: "Revert" })] }, `${group.key}\u0000${presentation.property}\u0000${i}`));
+                                        })] }, group.key))), structuralChanges.map((change) => (_jsxs("div", { className: "changes__group", "data-test": "dom-change", "data-cid": change.target.sourceSite.cid, children: [_jsxs("div", { className: "changes__group-title", children: [_jsx("span", { children: change.target.sourceSite.cid }), _jsx("span", { className: "changes__group-file", children: sourceFile(change) })] }), _jsxs("div", { className: "changes__row", "data-test": "dom-change-row", "data-action": change.kind, 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}`
+                                                                : "Visible" }), _jsx("span", { className: "changes__arrow", children: "\u2192" }), _jsx("span", { className: "changes__after", children: change.kind === "move"
+                                                                ? 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(Button, { size: "compact", className: "changes__revert", "data-test": "dom-change-revert", onClick: () => revertStructuralChange(change.id), children: "Revert" })] })] }, change.id)))] })) })] }), 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] }));
+}

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

@@ -0,0 +1,9 @@
+import type { ReactElement } from "react";
+import { type SettingsSection } from "../settings/SettingsDialog.js";
+export interface CopyPromptButtonProps {
+    readonly settingsOpen?: boolean;
+    readonly settingsSection?: SettingsSection;
+    readonly onOpenSettings?: (section: SettingsSection) => void;
+    readonly onSettingsOpenChange?: (open: boolean) => void;
+}
+export declare function CopyPromptButton({ settingsOpen: controlledSettingsOpen, settingsSection: controlledSettingsSection, onOpenSettings, onSettingsOpenChange, }?: CopyPromptButtonProps): ReactElement;