nudge-ui 0.2.0 → 0.2.2

package/dist/inspector/prompt/clipboardHandoff.js

@@ -137,7 +137,7 @@ function pruneCheckpoint() {
  * Checks a copied prompt against source-rendered output and reconciles only
  * exact records that the browser can positively verify.
  */
-export async function reconcileClipboardHandoff() {
+export async function reconcileClipboardHandoff(doc = document) {
     const snapshot = checkpoint;
     if (!snapshot)
         return 0;
@@ -147,7 +147,7 @@ export async function reconcileClipboardHandoff() {
         pruneCheckpoint();
         return 0;
     }
-    const removed = await verifyAndReconcileHandoff({ changes, structuralChanges });
+    const removed = await verifyAndReconcileHandoff({ changes, structuralChanges }, doc);
     pruneCheckpoint();
     if (removed > 0) {
         lastReconciledCount = removed;
@@ -175,7 +175,7 @@ export function startClipboardHandoffController(doc = document) {
             if (stopped || checking || !checkpoint)
                 return;
             checking = true;
-            void reconcileClipboardHandoff()
+            void reconcileClipboardHandoff(doc)
                 .catch(() => undefined)
                 .finally(() => {
                 // Keep the guard through the MutationObserver microtask generated by

package/dist/inspector/prompt/generatePrompt.d.ts

@@ -1,7 +1,8 @@
 import type { ChangeRecord } from "../changes/changesLog.js";
 import type { StructuralChange } from "../projection/structuralProjection.js";
+import type { AgentSketchMetadata } from "../agent/protocol.js";
 export interface FrameworkHints {
     framework?: string;
     stylingSystem?: string;
 }
-export declare function generatePrompt(changes: ChangeRecord[], frameworkHints?: FrameworkHints, structuralChanges?: readonly StructuralChange[], customInstructions?: string): string;
+export declare function generatePrompt(changes: ChangeRecord[], frameworkHints?: FrameworkHints, structuralChanges?: readonly StructuralChange[], customInstructions?: string, sketches?: readonly AgentSketchMetadata[]): string;

package/dist/inspector/prompt/generatePrompt.js

@@ -244,6 +244,17 @@ function structuralChangeLine(change) {
         ? `- Move ${target} before ${renderedInstanceDescription(before)} in ${destinationParent}.`
         : `- Move ${target} to the end of ${destinationParent}.`;
 }
+function sketchLines(sketches) {
+    const titles = [...new Set(sketches.map((sketch) => sketch.capture.title || "(untitled)"))];
+    return [
+        ...titles.map((title) => `- Page title: ${promptText(title)}`),
+        ...sketches.flatMap((sketch) => [
+            ...(sketch.description ? [`- Description: ${promptText(sketch.description)}`] : []),
+            ...(sketch.annotations ?? []).map((annotation) => `- Annotation ${annotation.number}: ${promptText(annotation.description)}`),
+        ]),
+        "- Interpret the attached frozen screenshot, blue strokes, and numbered annotations as visual feedback. Do not derive selectors, source coordinates, or semantics from the strokes. Use each annotation number to match the note to its numbered dot.",
+    ];
+}
 function renderedInstanceKey(ref) {
     const { sourceSite, locator } = ref;
     return JSON.stringify([
@@ -304,10 +315,10 @@ function canonicalizeStructuralChanges(changes) {
     }
     return canonical;
 }
-export function generatePrompt(changes, frameworkHints, structuralChanges = [], customInstructions = DEFAULT_CUSTOM_INSTRUCTIONS) {
+export function generatePrompt(changes, frameworkHints, structuralChanges = [], customInstructions = DEFAULT_CUSTOM_INSTRUCTIONS, sketches = []) {
     const deduplicated = canonicalizeChanges(changes);
     const structuralIntent = canonicalizeStructuralChanges(structuralChanges);
-    if (deduplicated.length === 0 && structuralIntent.length === 0)
+    if (deduplicated.length === 0 && structuralIntent.length === 0 && sketches.length === 0)
         return EMPTY_SENTINEL;
     const tokenChanges = deduplicated.filter(isTokenChange);
     const componentChanges = deduplicated.filter(isComponentChange);
@@ -387,5 +398,11 @@ export function generatePrompt(changes, frameworkHints, structuralChanges = [],
             lines: structuralIntent.map(structuralChangeLine),
         });
     }
+    if (sketches.length > 0) {
+        sections.push({
+            heading: "Sketch annotations",
+            lines: sketchLines(sketches),
+        });
+    }
     return renderPrompt(sections, customInstructions);
 }

package/dist/inspector/runtime/editorShell.d.ts

@@ -0,0 +1,2 @@
+/** Returns whether a document is the application-free editor controller. */
+export declare function isEditorShellDocument(doc?: Document): boolean;

package/dist/inspector/runtime/editorShell.js

@@ -0,0 +1,4 @@
+/** Returns whether a document is the application-free editor controller. */
+export function isEditorShellDocument(doc = document) {
+    return doc.documentElement.hasAttribute("data-nudge-ui-editor");
+}

package/dist/inspector/runtime/runtimeConfig.d.ts

@@ -24,7 +24,7 @@ export interface NudgeUiRuntimeCapabilities {
     readonly canvas: boolean;
     /** Whether framework component inspection and prop overrides are available. */
     readonly componentSemantics: boolean;
-    /** Whether the experimental DOM navigation section is available. */
+    /** Whether the DOM navigator overlay is available. */
     readonly domNavigation?: boolean;
     /**
      * Source-coordinate precision policy for prompts; every source site is
@@ -60,6 +60,10 @@ export interface NudgeUiRuntimeConfig {
     readonly componentContracts: readonly ComponentContract[];
     /** Whether this runtime is the explicit public landing-page demo. */
     readonly demo?: boolean;
+    /** Additional same-origin pages seeded into the public demo canvas. */
+    readonly demoPages?: readonly string[];
+    /** Labels for demo cards in display order, including the primary card. */
+    readonly demoCardLabels?: readonly string[];
 }
 /**
  * Validates a host-supplied configuration and fills safe defaults.

package/dist/inspector/runtime/runtimeConfig.js

@@ -170,6 +170,8 @@ export function normalizeNudgeUiRuntimeConfig(input) {
     if (isNormalizedRuntimeConfig(input))
         return input;
     const demo = optionalDemoFlag(input);
+    const demoPages = optionalStringArray(input, "demoPages");
+    const demoCardLabels = optionalStringArray(input, "demoCardLabels");
     const normalized = cloneAndFreeze({
         projectId: requireString(input, "projectId"),
         host: requireEnum(input, "host", RUNTIME_HOSTS),
@@ -182,6 +184,8 @@ export function normalizeNudgeUiRuntimeConfig(input) {
         tokenGeneration: optionalString(input, "tokenGeneration"),
         componentContracts: optionalArray(input, "componentContracts"),
         ...(demo === true ? { demo: true } : {}),
+        ...(demoPages === undefined ? {} : { demoPages }),
+        ...(demoCardLabels === undefined ? {} : { demoCardLabels }),
     });
     normalizedRuntimeConfigs.add(normalized);
     return normalized;

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

@@ -3,5 +3,11 @@ export interface DescendantNode {
     element: HTMLElement;
     depth: number;
 }
+export interface NavigationNode {
+    element: HTMLElement;
+    direction: "up" | "down";
+    depth: number;
+}
 /** Returns the nearest tracked descendants, breadth-first and document-ordered. */
 export declare function computeDescendants(el: HTMLElement, maxDepth?: number, maxNodes?: number): DescendantNode[];
+export declare function computeNavigationNodes(el: HTMLElement, hierarchy?: HTMLElement[]): NavigationNode[];

package/dist/inspector/selection/hierarchy.js

@@ -40,3 +40,11 @@ export function computeDescendants(el, maxDepth = 2, maxNodes = 2) {
         .sort((left, right) => left.depth - right.depth || left.order - right.order);
     return descendants.slice(0, maxNodes).map(({ element, depth }) => ({ element, depth }));
 }
+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 })),
+    ];
+}

package/dist/inspector/selection/selectionStore.js

@@ -1,6 +1,7 @@
 import { useSyncExternalStore } from "react";
 import { computeHierarchy } from "./hierarchy.js";
 import { resolveSelectionFromElement } from "./resolveSelection.js";
+import { clearInlineTextDiagnosticsForSelection } from "../inline-text/inlineTextDiagnostics.js";
 let currentSelection = null;
 const EMPTY_SELECTION = [];
 let chain = [];
@@ -28,6 +29,7 @@ function getHierarchyIndex() {
     return index;
 }
 function notify() {
+    clearInlineTextDiagnosticsForSelection(getSelectedElements().map((element) => element.domElement));
     listeners.forEach((l) => l());
 }
 function sameComponentTargets(a, b) {

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

@@ -9,4 +9,4 @@ export interface SettingsDialogProps extends McpConnectionContentProps {
     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;
+export declare function SettingsDialog({ open, initialSection, value, onValueChange, onOpenChange, projectId, origin, snapshot, onConnect, onTakeOver, onDisconnect, onCheckAgain, }: SettingsDialogProps): ReactElement;

package/dist/inspector/settings/SettingsDialog.js

@@ -6,6 +6,10 @@ import { useBrowserCssInspection } from "../inspection/useBrowserCssInspection.j
 import { McpConnectionContent, } from "../agent/McpConnectionDialog.js";
 import { PromptSettingsFields, } from "../prompt/PromptSettingsDialog.js";
 import { TokensPanel } from "../tokens/TokensPanel.js";
+import { useSelectedElement } from "../selection/selectionStore.js";
+import { useFocusedCardId, useSelectedCardId } from "../canvas/canvasStore.js";
+import { getRegisteredFrames } from "../canvas/projection.js";
+import { getBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
 const SETTINGS_SECTIONS = [
     {
         id: "instructions",
@@ -29,12 +33,18 @@ function portalContainer() {
         : 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, }) {
+export function SettingsDialog({ open, initialSection, value, onValueChange, onOpenChange, projectId, origin, snapshot, onConnect, onTakeOver, onDisconnect, onCheckAgain, }) {
     const [activeSection, setActiveSection] = useState(initialSection);
     const closeRef = useRef(null);
     const instructionsRef = useRef(null);
+    const selectedElement = useSelectedElement();
+    const selectedCardId = useSelectedCardId();
+    const focusedCardId = useFocusedCardId();
+    const activeFrame = getRegisteredFrames().get(selectedCardId ?? focusedCardId ?? "");
+    const activeDocument = selectedElement?.domElement.ownerDocument ?? activeFrame?.contentDocument ?? document;
     const tokenInspection = useBrowserCssInspection(null, "base", {
         includeDocumentTokens: activeSection === "tokens",
+        session: getBrowserCssInspection(activeDocument),
     });
     const tokenRows = tokenInspection.documentTokens?.tokens ?? [];
     const activeDefinition = SETTINGS_SECTIONS.find((section) => section.id === activeSection) ?? SETTINGS_SECTIONS[0];
@@ -42,5 +52,5 @@ export function SettingsDialog({ open, initialSection, value, onValueChange, onO
         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] })] })] })] }) }));
+    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, 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] })] })] })] }) }));
 }

package/dist/inspector/shell/AppShell.js

@@ -3,7 +3,11 @@ import { InspectorShell } from "./InspectorShell.js";
 import { CanvasWorkspace } from "../canvas/CanvasWorkspace.js";
 import { CanvasElementOverlay } from "../canvas/CanvasElementOverlay.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
+import { readNudgeUiEditorTarget } from "../../transport/editor.js";
 export function AppShell() {
     const canvasEnabled = useNudgeUiRuntimeConfig().capabilities.canvas;
-    return (_jsxs(_Fragment, { children: [canvasEnabled ? _jsx(CanvasWorkspace, {}) : null, canvasEnabled ? _jsx(CanvasElementOverlay, {}) : null, _jsx(InspectorShell, {})] }));
+    const primaryUrl = typeof window === "undefined"
+        ? null
+        : readNudgeUiEditorTarget(window.location.href);
+    return (_jsxs(_Fragment, { children: [canvasEnabled ? _jsx(CanvasWorkspace, { primaryUrl: primaryUrl }) : null, canvasEnabled ? _jsx(CanvasElementOverlay, {}) : null, _jsx(InspectorShell, {})] }));
 }

package/dist/inspector/shell/ChangesLog.js

@@ -1,13 +1,15 @@
 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 { Disclosure } from "../ui/Disclosure.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";
+import { SketchChanges } from "../sketch/SketchChanges.js";
+import { useSketchStore } from "../sketch/store.js";
 function groupChanges(changes) {
     const map = new Map();
     for (const change of changes) {
@@ -60,6 +62,8 @@ function structuralDiagnosticText(diagnostic) {
 }
 export function ChangesLog({ onClearSession }) {
     const changes = useChanges();
+    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.
@@ -67,26 +71,26 @@ export function ChangesLog({ onClearSession }) {
     useSyncExternalStore(subscribeRenderedInstanceDiagnostics, getRenderedInstanceDiagnosticRevision, getRenderedInstanceDiagnosticRevision);
     useSyncExternalStore(subscribeTextProjectionDiagnostics, getTextProjectionDiagnosticRevision, getTextProjectionDiagnosticRevision);
     const groups = useMemo(() => groupChanges(changes), [changes]);
-    const total = changes.length + structuralChanges.length;
-    if (total === 0)
+    const total = changes.length + structuralChanges.length + sketches.length;
+    if (total === 0 && sketchStore.error === null)
         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] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Disclosure, { className: "changes", "data-test": "changes-log", triggerDataTest: "changes-toggle", title: "Changes", badge: total > 0 ? _jsx("span", { className: "changes__count", children: total }) : null, panelClassName: "changes__content", children: groups.length === 0 && structuralChanges.length === 0 && sketches.length === 0 && sketchStore.error === null ? (_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))), _jsx(SketchChanges, {})] })) }), 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.js

@@ -13,16 +13,22 @@ import { getStructuralChanges, subscribeStructuralChanges } from "../projection/
 import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
 import { createPromptRevision, getAgentClient, useAgentClient, } from "../agent/client.js";
 import { createAgentPresentationAdapter } from "../canvas/agentPresentation.js";
-import { discardAgentDispatch, getAgentDispatchSize, recordAgentDispatch, verifyAndReconcileAgentDispatch, } from "../agent/verification.js";
+import { discardAgentDispatch, recordAgentDispatch, verifyAndReconcileAgentDispatch, } from "../agent/verification.js";
 import { getClipboardHandoffRevision, getLastClipboardReconciledCount, recordClipboardHandoff, subscribeClipboardHandoff, } from "../prompt/clipboardHandoff.js";
+import { useSketches, markSketchesDispatching, markSketchesHandingOff, settleSketchDispatch } from "../sketch/store.js";
+import { createSketchAttachments, createSketchHandoffSnapshot, sketchMetadataForHandoff, } from "../sketch/handoff.js";
+import { SketchLayersPanel } from "../sketch/SketchLayersPanel.js";
+import { isSendPromptShortcut, SEND_PROMPT_HOTKEY_EVENT } from "./shortcuts.js";
 export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, settingsSection: controlledSettingsSection, onOpenSettings, onSettingsOpenChange, } = {}) {
     const changes = useChanges();
+    const sketches = useSketches();
+    const pendingSketches = sketches.filter((item) => item.status === "pending");
     const structuralChanges = useSyncExternalStore(subscribeStructuralChanges, getStructuralChanges, getStructuralChanges);
     useSyncExternalStore(subscribeClipboardHandoff, getClipboardHandoffRevision, getClipboardHandoffRevision);
     const reconciledCount = getLastClipboardReconciledCount();
     const [copied, setCopied] = useState(false);
     const [agentCompletionStatus, setAgentCompletionStatus] = useState(null);
-    const [agentCompletionSent, setAgentCompletionSent] = useState(0);
+    const [sketchFallback, setSketchFallback] = useState(null);
     const [localSettingsOpen, setLocalSettingsOpen] = useState(false);
     const [localSettingsSection, setLocalSettingsSection] = useState("instructions");
     const settingsOpen = controlledSettingsOpen ?? localSettingsOpen;
@@ -33,7 +39,8 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
     const agent = useAgentClient(runtimeConfig.projectId, agentClient);
     const agentRef = useRef(agent);
     agentRef.current = agent;
-    const hasChanges = changes.length + structuralChanges.length > 0;
+    const hasChanges = changes.length + structuralChanges.length + pendingSketches.length > 0;
+    const changeCount = changes.length + structuralChanges.length + sketches.length;
     useEffect(() => {
         setCustomInstructions(loadCustomInstructions(runtimeConfig.projectId));
     }, [runtimeConfig.projectId]);
@@ -52,7 +59,6 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
         const revision = agent.request?.changeRevision;
         if (agent.state !== "completed" || revision === undefined)
             return;
-        const sent = getAgentDispatchSize(revision);
         let active = true;
         void verifyAndReconcileAgentDispatch(revision)
             .then((removed) => {
@@ -61,8 +67,7 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             const latest = agentRef.current;
             if (latest.request?.changeRevision !== revision || latest.state !== "completed")
                 return;
-            setAgentCompletionSent(sent);
-            setAgentCompletionStatus(removed > 0 ? "verified" : "completed");
+            setAgentCompletionStatus(removed > 0 ? "verified" : null);
         })
             .catch(() => {
             if (!active)
@@ -70,13 +75,18 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             const latest = agentRef.current;
             if (latest.request?.changeRevision !== revision || latest.state !== "completed")
                 return;
-            setAgentCompletionSent(sent);
-            setAgentCompletionStatus("completed");
+            setAgentCompletionStatus(null);
         });
         return () => {
             active = false;
         };
     }, [agent.request?.changeRevision, agent.state]);
+    useEffect(() => {
+        const request = agent.request;
+        if (!request?.sketches || request.sketches.length === 0)
+            return;
+        void settleSketchDispatch(request.changeRevision, request.status, request.requestId, request.clientDispatchId).catch(() => undefined);
+    }, [agent.request?.changeRevision, agent.request?.requestId, agent.request?.clientDispatchId, agent.request?.sketches, agent.request?.status]);
     const connecting = agent.state === "pairing";
     const working = agent.state === "working" || agent.request?.status === "working";
     const canConnect = agent.companionReachable
@@ -105,7 +115,7 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             ? _jsx(IconPlugConnected, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
             : canSend || working
                 ? _jsx(IconSend, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" })
-                : _jsx(IconCopy, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" });
+                : _jsx(IconCopy, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" });
     async function onClick() {
         if (disabled)
             return;
@@ -117,22 +127,83 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
             framework: runtimeConfig.framework,
             stylingSystem: runtimeConfig.stylingSystem,
         };
-        const text = generatePrompt(changes, hints, structuralChanges, customInstructions);
+        const sketchHandoff = createSketchHandoffSnapshot(pendingSketches);
+        const sketchMetadata = sketchHandoff ? sketchMetadataForHandoff(sketchHandoff) : [];
+        const text = generatePrompt(changes, hints, structuralChanges, customInstructions, sketchMetadata);
         setAgentCompletionStatus(null);
-        setAgentCompletionSent(0);
+        setSketchFallback(null);
         if (canSend) {
-            const revision = createPromptRevision(changes, structuralChanges);
+            const revision = createPromptRevision(changes, structuralChanges, sketchMetadata);
             recordAgentDispatch(revision, changes, structuralChanges);
-            const response = await agentClient.dispatchPrompt(text, revision);
-            if (response)
-                return;
+            const clientDispatchId = sketchHandoff?.localBatchId ?? `dispatch-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+            let attachments = undefined;
+            try {
+                if (sketchHandoff) {
+                    await markSketchesDispatching(sketchHandoff.entries.map((entry) => ({ id: entry.id, revision: entry.revision })), revision, sketchHandoff.localBatchId);
+                    attachments = await createSketchAttachments(sketchHandoff);
+                }
+                const response = await agentClient.dispatchPrompt(text, revision, {
+                    clientDispatchId,
+                    ...(attachments === undefined ? {} : { attachments }),
+                });
+                if (response) {
+                    if (sketchHandoff) {
+                        await markSketchesHandingOff(sketchHandoff.entries.map((entry) => ({ id: entry.id, revision: entry.revision })), revision, sketchHandoff.localBatchId, response.request.requestId);
+                    }
+                    return;
+                }
+                if (sketchHandoff) {
+                    await settleSketchDispatch(revision, "failed", undefined, sketchHandoff.localBatchId);
+                    discardAgentDispatch(revision);
+                    const latestAgent = agentClient.getSnapshot();
+                    setSketchFallback({
+                        prompt: text,
+                        error: latestAgent.request?.error
+                            ?? latestAgent.error
+                            ?? "The agent did not accept the sketch attachments.",
+                    });
+                    return;
+                }
+            }
+            catch (error) {
+                discardAgentDispatch(revision);
+                if (sketchHandoff) {
+                    await settleSketchDispatch(revision, "failed", undefined, sketchHandoff.localBatchId).catch(() => undefined);
+                    setSketchFallback({
+                        prompt: text,
+                        error: error instanceof Error ? error.message : "The sketch could not be sent to the agent.",
+                    });
+                    return;
+                }
+            }
             discardAgentDispatch(revision);
         }
         await copyToClipboard(text);
-        recordClipboardHandoff(changes, structuralChanges);
+        if (changes.length > 0 || structuralChanges.length > 0) {
+            recordClipboardHandoff(changes, structuralChanges);
+        }
         setCopied(true);
         window.setTimeout(() => setCopied(false), 1500);
     }
+    useEffect(() => {
+        function onKeydown(event) {
+            if (!isSendPromptShortcut(event) || !canSend || !hasChanges || disabled)
+                return;
+            event.preventDefault();
+            void onClick();
+        }
+        function onRendererHotkey() {
+            if (!canSend || !hasChanges || disabled)
+                return;
+            void onClick();
+        }
+        window.addEventListener("keydown", onKeydown, true);
+        window.addEventListener(SEND_PROMPT_HOTKEY_EVENT, onRendererHotkey);
+        return () => {
+            window.removeEventListener("keydown", onKeydown, true);
+            window.removeEventListener(SEND_PROMPT_HOTKEY_EVENT, onRendererHotkey);
+        };
+    }, [canSend, disabled, hasChanges, onClick]);
     function handleCustomInstructionsChange(value) {
         setCustomInstructions(value);
         saveCustomInstructions(runtimeConfig.projectId, value);
@@ -153,7 +224,19 @@ export function CopyPromptButton({ settingsOpen: controlledSettingsOpen, setting
     function openMcpConnection() {
         openSettings("mcp");
     }
-    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [_jsxs(Button, { variant: "primary", className: "copy-prompt__main", "data-test": "copy-prompt", type: "button", disabled: disabled, "data-copied": copied ? "true" : "false", "data-agent-state": agent.state, "aria-busy": working || connecting ? "true" : undefined, title: agent.error, onClick: onClick, children: [icon, label] }), statusAction ? (_jsx(StatusCallout, { className: "copy-prompt__agent-status", tone: agentStatus.tone, "data-test": "agent-connection-status", children: _jsxs("div", { className: "copy-prompt__agent-status-content", children: [_jsx("span", { role: "status", children: agentStatus.label }), _jsx(Button, { size: "compact", variant: "quiet", "data-test": "agent-status-action", "data-action": statusAction.kind, type: "button", onClick: openMcpConnection, children: statusAction.label })] }) })) : agentStatus.kind === "listening" ? (_jsxs("div", { className: "copy-prompt__agent-status copy-prompt__agent-status--listening", "data-test": "agent-connection-status", role: "status", children: [_jsx(IconCheck, { size: "var(--icon-size-small)", stroke: 2, "aria-hidden": "true" }), _jsx("span", { children: agentStatus.label })] })) : null, reconciledCount > 0 ? (_jsxs("p", { className: "copy-prompt__hint", "data-test": "clipboard-reconciled-hint", role: "status", children: ["Removed ", reconciledCount, " implemented ", reconciledCount === 1 ? "change" : "changes", " from the next prompt."] })) : null, agentCompletionStatus === "verified" ? (_jsx("p", { className: "copy-prompt__hint", "data-test": "agent-verified-hint", role: "status", children: "Agent changes verified." })) : agentCompletionStatus === "completed" ? (_jsx("p", { className: "copy-prompt__hint", "data-test": "agent-completed-hint", role: "status", children: agentCompletionSent > 0
-                    ? "Agent completed. Remaining edits were preserved because they were not verified."
-                    : "Agent completed." })) : null, _jsx(SettingsDialog, { open: settingsOpen, initialSection: settingsSection, value: customInstructions, onValueChange: handleCustomInstructionsChange, onOpenChange: setSettingsOpen, projectId: runtimeConfig.projectId, origin: window.location.origin, snapshot: agent, onConnect: () => agentClient.connect(), onDisconnect: () => agentClient.disconnect(), onCheckAgain: () => agentClient.checkConnection() })] }));
+    async function handleAgentStatusAction() {
+        if (statusAction?.kind === "takeover") {
+            await agentClient.takeOver();
+            return;
+        }
+        openMcpConnection();
+    }
+    return (_jsxs("div", { className: "copy-prompt__stack", "data-test": "copy-prompt-control", children: [_jsxs(Button, { variant: "primary", className: "copy-prompt__main", "data-test": "copy-prompt", type: "button", disabled: disabled, "data-copied": copied ? "true" : "false", "data-agent-state": agent.state, "data-agent-listening": agentStatus.kind === "listening" ? "true" : undefined, "aria-busy": working || connecting ? "true" : undefined, title: agent.error, onClick: onClick, children: [icon, label, changeCount > 0 ? (_jsx("span", { className: "copy-prompt__change-count", "data-test": "copy-prompt-change-count", children: changeCount })) : null, agentStatus.kind === "listening" ? (_jsx("span", { className: "copy-prompt__agent-listening", "data-test": "agent-listening-indicator", role: "status", "aria-label": "Agent listening" })) : null] }), _jsx(SketchLayersPanel, {}), 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, reconciledCount > 0 ? (_jsxs("p", { className: "copy-prompt__hint copy-prompt__hint--centered", "data-test": "clipboard-reconciled-hint", role: "status", children: [reconciledCount, " Implemented changes"] })) : null, agentCompletionStatus === "verified" ? (_jsx("p", { className: "copy-prompt__hint", "data-test": "agent-verified-hint", role: "status", children: "Agent changes verified." })) : 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 copyToClipboard(sketchFallback.prompt).then(() => {
+                                if (changes.length > 0 || structuralChanges.length > 0) {
+                                    recordClipboardHandoff(changes, structuralChanges);
+                                }
+                                setSketchFallback(null);
+                            }).catch(() => undefined);
+                        }, children: "Copy prompt" })] })) : null, _jsx(SettingsDialog, { open: settingsOpen, initialSection: settingsSection, value: customInstructions, onValueChange: handleCustomInstructionsChange, onOpenChange: setSettingsOpen, projectId: runtimeConfig.projectId, origin: window.location.origin, snapshot: agent, onConnect: () => agentClient.connect(), onTakeOver: () => agentClient.takeOver(), onDisconnect: () => agentClient.disconnect(), onCheckAgain: () => agentClient.checkConnection() })] }));
 }

package/dist/inspector/shell/EmptyState.js

@@ -11,5 +11,5 @@ export function EmptyState() {
     const modifierName = macPlatform ? "Command" : "Control";
     const optionKey = macPlatform ? "⌥" : "Alt";
     const optionName = macPlatform ? "Option" : "Alt";
-    return (_jsxs("div", { className: "empty-state", "data-test": "empty-state", children: [_jsx("img", { className: "empty-state__icon", src: gridIllustration, alt: "", "aria-hidden": "true" }), _jsx("h2", { className: "empty-state__title", children: "Select an element to edit" }), _jsx("div", { className: "empty-state__shortcuts", children: _jsxs("ul", { className: "empty-state__shortcut-list", children: [_jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Nudge" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": "Arrow keys", children: [_jsx("kbd", { children: "\u2191" }), _jsx("kbd", { children: "\u2193" }), _jsx("kbd", { children: "\u2190" }), _jsx("kbd", { children: "\u2192" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Big Nudge (8px)" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": "Shift plus arrow keys", children: [_jsx("kbd", { children: "Shift" }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Arrow" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Select deeper" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus click`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Click" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Measure" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${optionName} plus hover`, children: [_jsx("kbd", { children: optionKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Hover" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Hide UI" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus backslash`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "\\" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Undo" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus Z`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Z" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Deselect" }), _jsx("span", { className: "empty-state__shortcut-keys", children: _jsx("kbd", { children: "Esc" }) })] })] }) })] }));
+    return (_jsxs("div", { className: "empty-state", "data-test": "empty-state", children: [_jsx("img", { className: "empty-state__icon", src: gridIllustration, alt: "", "aria-hidden": "true" }), _jsx("h2", { className: "empty-state__title", children: "Select an element to edit" }), _jsx("div", { className: "empty-state__shortcuts", children: _jsxs("ul", { className: "empty-state__shortcut-list", children: [_jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Nudge" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": "Arrow keys", children: [_jsx("kbd", { children: "\u2191" }), _jsx("kbd", { children: "\u2193" }), _jsx("kbd", { children: "\u2190" }), _jsx("kbd", { children: "\u2192" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Big Nudge (8px)" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": "Shift plus arrow keys", children: [_jsx("kbd", { children: "Shift" }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Arrow" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Select deeper" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus click`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Click" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Measure" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${optionName} plus hover`, children: [_jsx("kbd", { children: optionKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Hover" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Hide UI" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus backslash`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "\\" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Hold to view original" }), _jsx("span", { className: "empty-state__shortcut-keys", "aria-label": "Backslash", children: _jsx("kbd", { children: "\\" }) })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Undo" }), _jsxs("span", { className: "empty-state__shortcut-keys", "aria-label": `${modifierName} plus Z`, children: [_jsx("kbd", { children: modifierKey }), _jsx("span", { "aria-hidden": "true", children: "+" }), _jsx("kbd", { children: "Z" })] })] }), _jsxs("li", { className: "empty-state__shortcut", "data-test": "empty-state-shortcut", children: [_jsx("span", { children: "Deselect" }), _jsx("span", { className: "empty-state__shortcut-keys", children: _jsx("kbd", { children: "Esc" }) })] })] }) })] }));
 }

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

@@ -7,5 +7,4 @@ declare global {
 }
 export { toggleInspector, setInspectorOpen };
 export type { SelectedElement } from "../selection/selectionStore.js";
-export declare function setInspectorHost(host: HTMLElement | null): void;
 export declare function InspectorShell(): ReactElement;