nudge-ui 0.2.1 → 0.2.3

package/dist/inspector/shell/InspectorShell.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { IconLayoutSidebarRight, IconSettings } from "@tabler/icons-react";
+import { IconLayoutSidebarRight } from "@tabler/icons-react";
 import { useInspectorOpen, toggleInspector, setInspectorOpen } from "./openStore.js";
-import { useSelectedElement, useSelectedElements, useHierarchy, setSelectedElement, removeSelectedElement, } from "../selection/selectionStore.js";
+import { useSelectedElement, useSelectedElements, setSelectedElement, removeSelectedElement, } from "../selection/selectionStore.js";
 import { findTokenRow } from "../styleEditors/rowLookup.js";
 import { useBrowserCssInspection } from "../inspection/useBrowserCssInspection.js";
 import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
+import { AgentStatusButton } from "./AgentStatusButton.js";
 import { SpacingBox } from "../styleEditors/SpacingBox.js";
 import { Typography } from "../styleEditors/Typography.js";
 import { isTextRelevant } from "../styleEditors/textRelevance.js";
+import { BackgroundEditor } from "../styleEditors/BackgroundEditor.js";
 import { ColorPicker } from "../styleEditors/ColorPicker.js";
 import { BorderEditor } from "../styleEditors/BorderEditor.js";
 import { AppearanceSection } from "../styleEditors/AppearanceSection.js";
@@ -25,12 +27,11 @@ import { StatusCallout } from "../ui/StatusCallout.js";
 import { IconButton } from "../ui/IconButton.js";
 import { UI_STYLES } from "../ui/styles.js";
 import { getActiveStyleState, setActiveStyleState } from "./styleState.js";
-import { isEditableEvent } from "./shortcuts.js";
+import { getInspectorToggleShortcutLabel, isEditableEvent } from "./shortcuts.js";
 import { formatInspectorLabel } from "../ui/labels.js";
 import { FieldRow } from "../ui/FieldRow.js";
 import { Select } from "../ui/Select.js";
-import { clearRestoreCount, clearSession } from "../canvas/sessionStore.js";
-import { hasWriteLease } from "../canvas/workspaceLease.js";
+import { clearSelectedFrameChanges } from "../canvas/sessionStore.js";
 import { useFocusedCardId, useSelectedCardId, } from "../canvas/canvasStore.js";
 import { getActiveCanvasFrame } from "../canvas/activeCanvasDocument.js";
 import { getElementWindow } from "../runtime/domRealm.js";
@@ -40,17 +41,14 @@ import { ComponentPropsSection } from "../componentSemantics/ComponentPropsSecti
 import { cancelInlineTextEdit, isInlineTextEditingActive, useInlineTextDiagnostic, } from "../inline-text/inlineTextEditor.js";
 import { getInlineTextFeedback } from "../inline-text/inlineTextFeedback.js";
 import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
-import { DomNavigation } from "./DomNavigation.js";
 import { EmptyState } from "./EmptyState.js";
 import { createStyleSelection } from "../selection/styleSelection.js";
 import { intersectTokenEntries } from "../inspection/selectionProperty.js";
 import { isNudgeUiDev } from "../runtime/devFlag.js";
 import { isDemoRuntime } from "../runtime/runtimeConfig.js";
 import { SketchWorkspace } from "../sketch/SketchWorkspace.js";
-import { cancelSketchInteraction, useSketchInteractionActive } from "../sketch/interaction.js";
-import { clearSketchClipboardHandoff } from "../sketch/handoff.js";
-import { clearSketchesForProject } from "../sketch/store.js";
-import { closeSketchNote } from "../sketch/sketchNote.js";
+import { useSketchInteractionActive } from "../sketch/interaction.js";
+import { Tooltip } from "../ui/Tooltip.js";
 function findFirstTokenRow(rows, properties) {
     for (const property of properties) {
         const row = findTokenRow(rows, property);
@@ -90,7 +88,6 @@ function scopeMutationAffectsSelection(records, selected) {
 export function InspectorShell() {
     const isOpen = useInspectorOpen();
     const runtimeConfig = useNudgeUiRuntimeConfig();
-    const domNavigationEnabled = runtimeConfig.capabilities.domNavigation === true;
     const sketchEnabled = isNudgeUiDev() && !isDemoRuntime();
     const sketchActive = useSketchInteractionActive();
     const selectedCardId = useSelectedCardId();
@@ -98,7 +95,6 @@ export function InspectorShell() {
     const sketchHost = selectedCardId || focusedCardId ? getActiveCanvasFrame() : null;
     const selected = useSelectedElement();
     const selectedElements = useSelectedElements();
-    const hierarchy = useHierarchy();
     const inlineTextFeedback = getInlineTextFeedback(useInlineTextDiagnostic());
     const [settingsOpen, setSettingsOpen] = useState(false);
     const [settingsSection, setSettingsSection] = useState("instructions");
@@ -234,19 +230,12 @@ export function InspectorShell() {
         setSettingsOpen(true);
     }
     function clearInspectorSession() {
-        clearSession();
-        clearRestoreCount();
-        if (!hasWriteLease())
-            return;
-        cancelSketchInteraction();
-        closeSketchNote();
-        clearSketchClipboardHandoff();
-        void clearSketchesForProject(runtimeConfig.projectId).catch(() => undefined);
+        clearSelectedFrameChanges();
     }
-    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "inspector-styles", children: UI_STYLES }), _jsxs("div", { className: "panel", "data-open": isOpen ? "true" : "false", children: [_jsxs("div", { className: "panel__tabs", "aria-label": "Inspector controls", children: [_jsxs("div", { className: "panel__header-row", "data-test": "inspect-tab", children: [_jsx(IconButton, { variant: "quiet", label: "Collapse inspector", "data-test": "collapse-inspector", disabled: sketchActive, style: { marginLeft: "-8px" }, onClick: () => {
-                                            cancelInlineTextEdit();
-                                            setInspectorOpen(false);
-                                        }, children: _jsx(IconLayoutSidebarRight, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }), _jsxs("div", { className: "panel__header-actions", children: [_jsx(PeekOriginalButton, {}), _jsx(IconButton, { variant: "quiet", label: "Settings", title: "Settings", "data-test": "settings-button", onClick: () => openSettings("instructions"), children: _jsx(IconSettings, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) })] })] }), _jsx("div", { className: "panel__copy-row", children: _jsx(CopyPromptButton, { settingsOpen: settingsOpen, settingsSection: settingsSection, onOpenSettings: openSettings, onSettingsOpenChange: setSettingsOpen }) })] }), _jsxs("div", { className: "panel__body", children: [inlineTextFeedback ? (_jsx(StatusCallout, { tone: "danger", className: "inline-text-diagnostic", "data-test": "inline-text-diagnostic", role: "status", "aria-live": "polite", "aria-atomic": "true", children: _jsx("span", { children: inlineTextFeedback.message }) })) : null, selected ? (_jsxs(_Fragment, { children: [domNavigationEnabled && !isMultiSelection ? _jsx(DomNavigation, { selected: selected, hierarchy: hierarchy }) : null, isMultiSelection || showInteractionState || hasEditScopeCallout ? (_jsxs("div", { className: `selection${hasEditScopeCallout ? "" : " selection--without-scope-callout"}`, "data-test": "selection", "data-selected-cid": selected.cid, "data-selected-src": selected.src, "data-selected-count": selectedElements.length, children: [isMultiSelection ? (_jsx("div", { className: "selection__summary", "data-test": "multi-selection-summary", children: _jsxs("span", { className: "selection__count", children: [selectedElements.length, " elements selected"] }) })) : null, hasEditScopeCallout ? (_jsx(StatusCallout, { tone: editScope === "rendered-instance" ? "neutral" : "accent", "data-test": "edit-scope", "data-lost": "false", children: editScope === "rendered-instance" ? (_jsxs("div", { className: "scope__unlinked", children: [_jsx("span", { children: "Element unlinked" }), _jsx(Button, { size: "compact", className: "scope__action", "data-test": "relink-element", onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-test": "inspector-styles", children: UI_STYLES }), _jsxs("div", { className: "panel", "data-open": isOpen ? "true" : "false", children: [_jsxs("div", { className: "panel__tabs", "aria-label": "Inspector controls", children: [_jsxs("div", { className: "panel__header-row", "data-test": "inspect-tab", children: [_jsx(Tooltip, { content: "Hide inspector", shortcut: getInspectorToggleShortcutLabel(), stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", label: "Collapse inspector", "data-test": "collapse-inspector", disabled: sketchActive, style: { marginLeft: "calc(var(--space-8) * -1)" }, onClick: () => {
+                                                cancelInlineTextEdit();
+                                                setInspectorOpen(false);
+                                            }, children: _jsx(IconLayoutSidebarRight, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }) }) }), _jsxs("div", { className: "panel__header-actions", children: [_jsx(PeekOriginalButton, {}), _jsx(AgentStatusButton, { onOpenSettings: openSettings })] })] }), _jsx("div", { className: "panel__copy-row", children: _jsx(CopyPromptButton, { settingsOpen: settingsOpen, settingsSection: settingsSection, onOpenSettings: openSettings, onSettingsOpenChange: setSettingsOpen }) })] }), _jsxs("div", { className: "panel__body", children: [inlineTextFeedback ? (_jsx(StatusCallout, { tone: "danger", className: "inline-text-diagnostic", "data-test": "inline-text-diagnostic", role: "status", "aria-live": "polite", "aria-atomic": "true", children: _jsx("span", { children: inlineTextFeedback.message }) })) : null, selected ? (_jsxs(_Fragment, { children: [isMultiSelection || showInteractionState || hasEditScopeCallout ? (_jsxs("div", { className: `selection${hasEditScopeCallout ? "" : " selection--without-scope-callout"}`, "data-test": "selection", "data-selected-cid": selected.cid, "data-selected-src": selected.src, "data-selected-count": selectedElements.length, children: [isMultiSelection ? (_jsx("div", { className: "selection__summary", "data-test": "multi-selection-summary", children: _jsxs("span", { className: "selection__count", children: [selectedElements.length, " elements selected"] }) })) : null, hasEditScopeCallout ? (_jsx(StatusCallout, { tone: editScope === "rendered-instance" ? "neutral" : "accent", "data-test": "edit-scope", "data-lost": "false", children: editScope === "rendered-instance" ? (_jsxs("div", { className: "scope__unlinked", children: [_jsx("span", { children: "Element unlinked" }), _jsx(Button, { size: "compact", className: "scope__action", "data-test": "relink-element", onClick: () => {
                                                                 const overrideId = relinkElement(selected.domElement);
                                                                 if (overrideId)
                                                                     discardChangesForInstanceOverride(overrideId);
@@ -263,5 +252,5 @@ export function InspectorShell() {
                                                             return;
                                                         setActiveStyleState(nextState);
                                                         setStyleState(nextState);
-                                                    } }) })) : null] })) : null, !isMultiSelection ? _jsx(ComponentPropsSection, { selected: selected }) : null, selectionEditable ? (_jsx(AtRuleContextProvider, { rows: tokenRows, children: _jsxs("div", { className: "style-editors", "data-test": "style-editors", children: [_jsx(LayoutSection, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `layout-${styleState}`), _jsx(SpacingBox, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `spacing-${styleState}`), _jsx(AppearanceSection, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `appearance-${styleState}`), showText ? _jsxs(_Fragment, { children: [_jsx(Typography, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `type-${styleState}`), _jsx(ColorPicker, { element: selected, selection: styleSelection, property: "color", entries: tokenEntries, tokenRow: findTokenRow(tokenRows, "color") }, `color-${styleState}`)] }) : null, _jsx(ColorPicker, { element: selected, selection: styleSelection, property: "background-color", entries: tokenEntries, tokenRow: backgroundTokenRow }, `background-${styleState}`), _jsx(BorderEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `border-${styleState}`), _jsx(BoxShadowEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `box-shadow-${styleState}`)] }) })) : (_jsx(StatusCallout, { tone: "neutral", "data-test": "multi-selection-uneditable", children: "These repeated items are indistinguishable, so Nudge UI cannot safely target only part of the group. Select every repeated item to edit them together." }))] })) : (_jsx(EmptyState, {})), _jsx(ChangesLog, { onClearSession: clearInspectorSession })] })] }), sketchEnabled ? (_jsx(SketchWorkspace, { hostElement: sketchHost, projectId: runtimeConfig.projectId })) : null, !isOpen ? (_jsx("div", { className: "panel__restore", children: _jsx(IconButton, { variant: "quiet", label: "Show inspector", className: "panel__restore-button", "data-test": "show-inspector", onClick: () => setInspectorOpen(true), children: _jsx(IconLayoutSidebarRight, { size: 16, stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) })) : null] }));
+                                                    } }) })) : null] })) : null, !isMultiSelection ? _jsx(ComponentPropsSection, { selected: selected }) : null, selectionEditable ? (_jsx(AtRuleContextProvider, { rows: tokenRows, children: _jsxs("div", { className: "style-editors", "data-test": "style-editors", children: [_jsx(LayoutSection, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `layout-${styleState}`), _jsx(SpacingBox, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `spacing-${styleState}`), _jsx(AppearanceSection, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `appearance-${styleState}`), showText ? _jsxs(_Fragment, { children: [_jsx(Typography, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `type-${styleState}`), _jsx(ColorPicker, { element: selected, selection: styleSelection, property: "color", entries: tokenEntries, tokenRow: findTokenRow(tokenRows, "color") }, `color-${styleState}`)] }) : null, _jsx(BackgroundEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRow: backgroundTokenRow }, `background-${styleState}`), _jsx(BorderEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `border-${styleState}`), _jsx(BoxShadowEditor, { element: selected, selection: styleSelection, entries: tokenEntries, tokenRows: tokenRows }, `box-shadow-${styleState}`)] }) })) : (_jsx(StatusCallout, { tone: "neutral", "data-test": "multi-selection-uneditable", children: "These repeated items are indistinguishable, so Nudge UI cannot safely target only part of the group. Select every repeated item to edit them together." }))] })) : (_jsx(EmptyState, {})), _jsx(ChangesLog, { onClearSession: clearInspectorSession })] })] }), sketchEnabled ? (_jsx(SketchWorkspace, { hostElement: sketchHost, projectId: runtimeConfig.projectId })) : null, !isOpen ? (_jsx("div", { className: "panel__restore", children: _jsx(Tooltip, { children: _jsx(IconButton, { variant: "quiet", label: "Show inspector", className: "panel__restore-button", "data-test": "show-inspector", onClick: () => setInspectorOpen(true), children: _jsx(IconLayoutSidebarRight, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }) }) }) })) : null] }));
 }

package/dist/inspector/shell/PeekOriginalButton.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useSyncExternalStore } from "react";
 import { IconButton } from "../ui/IconButton.js";
+import { Tooltip } from "../ui/Tooltip.js";
 import { PeekOriginalIcon } from "./PeekOriginalIcon.js";
-import { workspaceChangeStore } from "../changes/workspaceChanges.js";
+import { draftChangeStore } from "../changes/draftChanges.js";
 import { setOriginalPreviewActive, useOriginalPreviewActive, } from "./originalPreview.js";
-function useWorkspaceChangeCount() {
-    return useSyncExternalStore(workspaceChangeStore.subscribe, () => {
-        const snapshot = workspaceChangeStore.getSnapshot();
+function useDraftChangeCount() {
+    return useSyncExternalStore(draftChangeStore.subscribe, () => {
+        const snapshot = draftChangeStore.getSnapshot();
         return snapshot.changes.length + snapshot.structuralChanges.length;
     }, () => 0);
 }
@@ -17,7 +18,7 @@ function useWorkspaceChangeCount() {
  */
 export function PeekOriginalButton() {
     const active = useOriginalPreviewActive();
-    const changeCount = useWorkspaceChangeCount();
+    const changeCount = useDraftChangeCount();
     const disabled = changeCount === 0;
     useEffect(() => {
         if (!active)
@@ -35,23 +36,23 @@ export function PeekOriginalButton() {
     useEffect(() => () => {
         setOriginalPreviewActive(false);
     }, []);
-    return (_jsx(IconButton, { variant: "quiet", "data-test": "peek-original-button", label: "Hold to view original", title: disabled ? "No changes to preview" : "Hold to view original", "aria-pressed": active, "data-active": active ? "true" : "false", disabled: disabled, onPointerDown: (event) => {
-            if (disabled)
-                return;
-            if (event.pointerType === "mouse" && event.button !== 0)
-                return;
-            event.currentTarget.setPointerCapture?.(event.pointerId);
-            setOriginalPreviewActive(true);
-        }, onPointerUp: () => setOriginalPreviewActive(false), onPointerCancel: () => setOriginalPreviewActive(false), onLostPointerCapture: () => setOriginalPreviewActive(false), onKeyDown: (event) => {
-            if (disabled || event.repeat)
-                return;
-            if (event.key === " " || event.key === "Enter")
+    return (_jsx(Tooltip, { content: disabled ? "No changes to preview" : "Hold to view original", shortcut: disabled ? undefined : "\\", stableTrigger: true, children: _jsx(IconButton, { variant: "quiet", "data-test": "peek-original-button", label: "Hold to view original", "aria-pressed": active, "data-active": active ? "true" : "false", disabled: disabled, onPointerDown: (event) => {
+                if (disabled)
+                    return;
+                if (event.pointerType === "mouse" && event.button !== 0)
+                    return;
+                event.currentTarget.setPointerCapture?.(event.pointerId);
                 setOriginalPreviewActive(true);
-        }, onKeyUp: (event) => {
-            if (event.key === " " || event.key === "Enter")
-                setOriginalPreviewActive(false);
-        }, onBlur: () => setOriginalPreviewActive(false), onContextMenu: (event) => {
-            if (active)
-                event.preventDefault();
-        }, children: _jsx(PeekOriginalIcon, {}) }));
+            }, onPointerUp: () => setOriginalPreviewActive(false), onPointerCancel: () => setOriginalPreviewActive(false), onLostPointerCapture: () => setOriginalPreviewActive(false), onKeyDown: (event) => {
+                if (disabled || event.repeat)
+                    return;
+                if (event.key === " " || event.key === "Enter")
+                    setOriginalPreviewActive(true);
+            }, onKeyUp: (event) => {
+                if (event.key === " " || event.key === "Enter")
+                    setOriginalPreviewActive(false);
+            }, onBlur: () => setOriginalPreviewActive(false), onContextMenu: (event) => {
+                if (active)
+                    event.preventDefault();
+            }, children: _jsx(PeekOriginalIcon, {}) }) }));
 }

package/dist/inspector/shell/originalPreview.js

@@ -1,6 +1,6 @@
 import { useSyncExternalStore } from "react";
-import { workspaceChangeStore } from "../changes/workspaceChanges.js";
-import { applyHostWorkspaceProjection, compileWorkspaceProjection, } from "../projection/workspaceProjection.js";
+import { draftChangeStore } from "../changes/draftChanges.js";
+import { applyHostDraftProjection, compileDraftProjection, } from "../projection/draftProjection.js";
 import { isEditorShellDocument } from "../runtime/editorShell.js";
 let previewingOriginal = false;
 const listeners = new Set();
@@ -29,8 +29,8 @@ function notifyOriginalPreviewListeners() {
 function applyEmptyHostProjection() {
     if (isEditorShellDocument())
         return;
-    const { revision } = workspaceChangeStore.getSnapshot();
-    applyHostWorkspaceProjection({
+    const { revision } = draftChangeStore.getSnapshot();
+    applyHostDraftProjection({
         sourceRevision: revision,
         managedStyles: { rules: [], css: "" },
         instanceOverrides: [],
@@ -42,7 +42,7 @@ function applyEmptyHostProjection() {
 function applyCanonicalHostProjection() {
     if (isEditorShellDocument())
         return;
-    applyHostWorkspaceProjection(compileWorkspaceProjection(workspaceChangeStore.getSnapshot()));
+    applyHostDraftProjection(compileDraftProjection(draftChangeStore.getSnapshot()));
 }
 /**
  * Hold-to-view-original (NUD-30). While active the host document shows the

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

@@ -1,5 +1,8 @@
 export declare function isEditableTarget(target: EventTarget | null): boolean;
 export declare function isEditableEvent(event: KeyboardEvent): boolean;
+export declare function isMacPlatform(): boolean;
+export declare function getPlatformModifierKey(): "⌘" | "Ctrl";
+export declare function getInspectorToggleShortcutLabel(): string;
 export declare const SEND_PROMPT_HOTKEY_EVENT = "nudge-ui-send-prompt-hotkey";
 export declare function isSendPromptShortcut(event: KeyboardEvent): boolean;
 export declare function isInspectorToggleShortcut(event: KeyboardEvent): boolean;

package/dist/inspector/shell/shortcuts.js

@@ -14,6 +14,17 @@ function deeplyFocusedElement() {
 export function isEditableEvent(event) {
     return event.composedPath().some(isEditableTarget) || isEditableTarget(deeplyFocusedElement());
 }
+export function isMacPlatform() {
+    if (typeof navigator === "undefined")
+        return false;
+    return /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+}
+export function getPlatformModifierKey() {
+    return isMacPlatform() ? "⌘" : "Ctrl";
+}
+export function getInspectorToggleShortcutLabel() {
+    return `${getPlatformModifierKey()}\\`;
+}
 export const SEND_PROMPT_HOTKEY_EVENT = "nudge-ui-send-prompt-hotkey";
 export function isSendPromptShortcut(event) {
     if (event.repeat || event.altKey || isEditableEvent(event))

package/dist/inspector/sketch/SketchEditor.js

@@ -5,15 +5,19 @@ import { IconArrowsMove, IconCheck, IconMessageCirclePlus, IconPencil, IconRecta
 import { Button } from "../ui/Button.js";
 import { IconButton } from "../ui/IconButton.js";
 import { StatusCallout } from "../ui/StatusCallout.js";
+import { Tooltip } from "../ui/Tooltip.js";
 import { renderAnnotatedPng } from "./raster.js";
 import { SketchSvgLayer } from "./freehand.js";
 import { findSketchElementAt, translateSketchAnnotation, translateSketchStroke, } from "./geometry.js";
 import { SKETCH_LIMITS, SKETCH_ANNOTATION_RADIUS, SKETCH_STROKE_COLOR, SKETCH_STROKE_OUTLINE, SKETCH_STROKE_WIDTH, } from "./model.js";
-function portalContainer() {
-    return typeof document !== "undefined"
-        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
-        : null;
-}
+import { DRAG_CURSOR, SKETCH_CURSOR } from "../ui/customCursors.js";
+import { portalContainer } from "../ui/portalContainer.js";
+const SKETCH_TOOLS = [
+    { tool: "move", label: "Move", Icon: IconArrowsMove },
+    { tool: "pen", label: "Pen", Icon: IconPencil },
+    { tool: "rectangle", label: "Rectangle", Icon: IconRectangle },
+    { tool: "annotate", label: "Annotate", Icon: IconMessageCirclePlus },
+];
 function objectUrl(blob) {
     if (!blob || typeof URL === "undefined" || typeof URL.createObjectURL !== "function")
         return null;
@@ -47,8 +51,8 @@ function rectanglePoints(start, end) {
 }
 export function SketchEditor({ open, document: sketchDocument, captured, onCancel, onSave }) {
     const image = captured?.originalImage ?? sketchDocument?.originalImage ?? null;
-    const imageWidth = captured?.imageWidth ?? sketchDocument?.imageWidth ?? 0;
-    const imageHeight = captured?.imageHeight ?? sketchDocument?.imageHeight ?? 0;
+    const imageWidth = captured?.imageWidth ?? sketchDocument?.capture.imageWidth ?? 0;
+    const imageHeight = captured?.imageHeight ?? sketchDocument?.capture.imageHeight ?? 0;
     const capture = captured?.capture ?? sketchDocument?.capture ?? null;
     const [description, setDescription] = useState("");
     const [tool, setTool] = useState("pen");
@@ -361,14 +365,10 @@ export function SketchEditor({ open, document: sketchDocument, captured, onCance
         setSaving(true);
         setError(null);
         try {
-            const rendered = await renderAnnotatedPng(image, imageWidth, imageHeight, strokes, committedAnnotations);
+            const rendered = await renderAnnotatedPng(image, imageWidth, imageHeight, strokes, committedAnnotations, description.trim());
             await onSave({
                 ...(sketchDocument ? { id: sketchDocument.id } : {}),
-                capture: {
-                    ...capture,
-                    imageWidth: rendered.width,
-                    imageHeight: rendered.height,
-                },
+                capture,
                 description: description.trim(),
                 strokes,
                 annotations: committedAnnotations,
@@ -398,5 +398,5 @@ export function SketchEditor({ open, document: sketchDocument, captured, onCance
     if (!open || !image || !capture)
         return null;
     return (_jsx(Dialog.Root, { open: open, modal: false, disablePointerDismissal: true, onOpenChange: (nextOpen) => { if (!nextOpen && !saving)
-            onCancel(); }, children: _jsxs(Dialog.Portal, { container: portalContainer(), children: [_jsx(Dialog.Backdrop, { className: "sketch__backdrop sketch__editor-backdrop", "data-test": "sketch-editor-backdrop" }), _jsxs(Dialog.Popup, { className: "sketch__popup", "data-test": "sketch-editor", initialFocus: false, onKeyDown: onEditorKeyDown, children: [_jsx(Dialog.Title, { className: "sketch__title sketch__sr-only", children: "Annotate viewport" }), _jsx(Dialog.Description, { className: "sketch__description sketch__sr-only", children: "Draw directly over the captured UI. Select Annotate to label an area with a numbered note." }), _jsx("div", { className: "sketch__canvas-frame", children: _jsxs("div", { className: "sketch__image-wrap", children: [imageUrl ? _jsx("img", { className: "sketch__image", src: imageUrl, alt: "Captured viewport", draggable: false }) : null, _jsx("svg", { ref: svgRef, className: `sketch__canvas sketch__canvas--${tool}`, width: imageWidth, height: imageHeight, viewBox: `0 0 ${imageWidth} ${imageHeight}`, preserveAspectRatio: "none", pointerEvents: "all", tabIndex: 0, "aria-label": "Sketch over the captured viewport", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: finishPointer, onPointerCancel: finishPointer, children: _jsx(SketchSvgLayer, { strokes: draftStroke ? [...strokes, draftStroke] : strokes, annotations: annotations }) }), activeAnnotation ? (_jsxs("div", { className: "sketch__annotation-editor", role: "dialog", "aria-label": `Annotation ${activeAnnotation.number}`, style: annotationEditorStyle(activeAnnotation), children: [_jsxs("label", { className: "sketch__sr-only", htmlFor: "sketch-editor-annotation-description", children: ["Annotation ", activeAnnotation.number, " description"] }), _jsx("input", { ref: annotationInputRef, id: "sketch-editor-annotation-description", value: annotationDraft, maxLength: SKETCH_LIMITS.description, placeholder: "Describe this area\u2026", autoComplete: "off", "data-test": "sketch-editor-annotation-description", onChange: (event) => setAnnotationDraft(event.target.value), onKeyDown: onAnnotationKeyDown }), _jsx(IconButton, { label: "Cancel annotation", variant: "quiet", size: "compact", "data-test": "sketch-editor-annotation-cancel", onClick: cancelActiveAnnotation, children: _jsx(IconX, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }), _jsxs(Button, { variant: "primary", size: "compact", type: "button", "data-test": "sketch-editor-annotation-save", onClick: () => { commitActiveAnnotation(); }, children: [_jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" }), "Add"] })] })) : null] }) }), _jsxs("div", { className: "sketch__floating-panel", children: [_jsxs("div", { className: "sketch__toolbar", role: "toolbar", "aria-label": "Sketch tools", children: [_jsx(IconButton, { label: "Move", title: "Move", variant: "quiet", "aria-pressed": tool === "move", "data-active": tool === "move", "data-test": "sketch-move", onClick: () => selectTool("move"), disabled: saving, children: _jsx(IconArrowsMove, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }), _jsx(IconButton, { label: "Pen", title: "Pen", variant: "quiet", "aria-pressed": tool === "pen", "data-active": tool === "pen", "data-test": "sketch-pen", onClick: () => selectTool("pen"), disabled: saving, children: _jsx(IconPencil, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }), _jsx(IconButton, { label: "Rectangle", title: "Rectangle", variant: "quiet", "aria-pressed": tool === "rectangle", "data-active": tool === "rectangle", "data-test": "sketch-rectangle", onClick: () => selectTool("rectangle"), disabled: saving, children: _jsx(IconRectangle, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }), _jsx(IconButton, { label: "Annotate", title: "Annotate", variant: "quiet", "aria-pressed": tool === "annotate", "data-active": tool === "annotate", "data-test": "sketch-annotate", onClick: () => selectTool("annotate"), disabled: saving, children: _jsx(IconMessageCirclePlus, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }), _jsx("span", { className: "sketch__toolbar-divider", "aria-hidden": "true" }), _jsx(Button, { variant: "quiet", type: "button", "data-test": "sketch-cancel", onClick: onCancel, disabled: saving, children: "Cancel" }), _jsxs(Button, { variant: "primary", type: "button", "data-test": "sketch-done", onClick: () => void save(), disabled: saving || (strokes.length === 0 && annotations.length === 0 && description.trim() === ""), children: [_jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" }), saving ? "Saving…" : "Done"] })] }), error ? _jsx(StatusCallout, { tone: "danger", "data-test": "sketch-editor-error", children: error }) : null] })] })] }) }));
+            onCancel(); }, children: _jsxs(Dialog.Portal, { container: portalContainer(), children: [_jsx(Dialog.Backdrop, { className: "sketch__backdrop sketch__editor-backdrop", "data-test": "sketch-editor-backdrop" }), _jsxs(Dialog.Popup, { className: "sketch__popup", "data-test": "sketch-editor", initialFocus: false, onKeyDown: onEditorKeyDown, children: [_jsx(Dialog.Title, { className: "sketch__title sketch__sr-only", children: "Annotate viewport" }), _jsx(Dialog.Description, { className: "sketch__description sketch__sr-only", children: "Draw directly over the captured UI. Select Annotate to label an area with a numbered note." }), _jsx("div", { className: "sketch__canvas-frame", children: _jsxs("div", { className: "sketch__image-wrap", children: [imageUrl ? _jsx("img", { className: "sketch__image", src: imageUrl, alt: "Captured viewport", draggable: false }) : null, _jsx("svg", { ref: svgRef, className: `sketch__canvas sketch__canvas--${tool}`, width: imageWidth, height: imageHeight, viewBox: `0 0 ${imageWidth} ${imageHeight}`, preserveAspectRatio: "none", pointerEvents: "all", style: { cursor: tool === "move" ? DRAG_CURSOR : SKETCH_CURSOR }, tabIndex: 0, "aria-label": "Sketch over the captured viewport", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: finishPointer, onPointerCancel: finishPointer, children: _jsx(SketchSvgLayer, { strokes: draftStroke ? [...strokes, draftStroke] : strokes, annotations: annotations }) }), activeAnnotation ? (_jsxs("div", { className: "sketch__annotation-editor", role: "dialog", "aria-label": `Annotation ${activeAnnotation.number}`, style: annotationEditorStyle(activeAnnotation), children: [_jsxs("label", { className: "sketch__sr-only", htmlFor: "sketch-editor-annotation-description", children: ["Annotation ", activeAnnotation.number, " description"] }), _jsx("input", { ref: annotationInputRef, id: "sketch-editor-annotation-description", value: annotationDraft, maxLength: SKETCH_LIMITS.description, placeholder: "Describe this area\u2026", autoComplete: "off", "data-test": "sketch-editor-annotation-description", onChange: (event) => setAnnotationDraft(event.target.value), onKeyDown: onAnnotationKeyDown }), _jsx(Tooltip, { children: _jsx(IconButton, { label: "Cancel annotation", variant: "quiet", size: "compact", "data-test": "sketch-editor-annotation-cancel", onClick: cancelActiveAnnotation, children: _jsx(IconX, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }) }), _jsxs(Button, { variant: "primary", size: "compact", type: "button", "data-test": "sketch-editor-annotation-save", onClick: () => { commitActiveAnnotation(); }, children: [_jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" }), "Add"] })] })) : null] }) }), _jsxs("div", { className: "sketch__floating-panel", children: [_jsxs("div", { className: "sketch__toolbar", role: "toolbar", "aria-label": "Sketch tools", children: [SKETCH_TOOLS.map(({ tool: option, label, Icon }) => (_jsx(Tooltip, { stableTrigger: true, children: _jsx(IconButton, { label: label, variant: "quiet", "aria-pressed": tool === option, "data-active": tool === option, "data-test": `sketch-${option}`, onClick: () => selectTool(option), disabled: saving, children: _jsx(Icon, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }) }, option))), _jsx("span", { className: "sketch__toolbar-divider", "aria-hidden": "true" }), _jsx(Button, { variant: "quiet", type: "button", "data-test": "sketch-cancel", onClick: onCancel, disabled: saving, children: "Cancel" }), _jsxs(Button, { variant: "primary", type: "button", "data-test": "sketch-done", onClick: () => void save(), disabled: saving || (strokes.length === 0 && annotations.length === 0 && description.trim() === ""), children: [_jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" }), saving ? "Saving…" : "Done"] })] }), error ? _jsx(StatusCallout, { tone: "danger", "data-test": "sketch-editor-error", children: error }) : null] })] })] }) }));
 }

package/dist/inspector/sketch/SketchEntryButton.js

@@ -7,5 +7,5 @@ import { startSketchCapture } from "./SketchWorkspace.js";
 export function SketchEntryButton({ hostElement }) {
     const active = useSketchInteractionActive();
     const disabled = active || isInlineTextEditingActive();
-    return (_jsxs(Button, { variant: "quiet", size: "compact", className: "panel__sketch-button", type: "button", "data-test": "sketch-entry", "aria-label": "Sketch viewport", title: "Sketch viewport", disabled: disabled || !hostElement, onClick: () => startSketchCapture(hostElement), children: [_jsx(IconPencil, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }), _jsx("span", { className: "panel__sketch-label", children: "Sketch" })] }));
+    return (_jsxs(Button, { variant: "quiet", size: "compact", className: "panel__sketch-button", type: "button", "data-test": "sketch-entry", "aria-label": "Sketch viewport", disabled: disabled || !hostElement, onClick: () => startSketchCapture(hostElement), children: [_jsx(IconPencil, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }), _jsx("span", { className: "panel__sketch-label", children: "Sketch" })] }));
 }

package/dist/inspector/sketch/SketchFrameOverlay.d.ts

@@ -2,10 +2,12 @@ import type { ReactElement } from "react";
 import type { SketchDocument, SketchPoint } from "./model.js";
 interface SketchFrameOverlayProps {
     readonly iframe: HTMLIFrameElement | null;
+    readonly cardId?: string;
     readonly cardUrl: string;
+    readonly artifactId?: string;
     readonly ready: boolean;
 }
 export declare function sketchRouteKey(url: string): string | null;
 export declare function projectSketchPoint(point: SketchPoint, document: SketchDocument, frameWindow: Window, width: number, height: number): SketchPoint;
-export declare function SketchFrameOverlay({ iframe, cardUrl, ready }: SketchFrameOverlayProps): ReactElement | null;
+export declare function SketchFrameOverlay({ cardId, iframe, cardUrl, artifactId, ready }: SketchFrameOverlayProps): ReactElement | null;
 export {};

package/dist/inspector/sketch/SketchFrameOverlay.js

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import { SketchSvgLayer } from "./freehand.js";
 import { useSketchStore } from "./store.js";
 import { getSketchScrollPosition } from "./capture.js";
+import { sketchBelongsToCard, useDrafts } from "../drafts/store.js";
 export function sketchRouteKey(url) {
     try {
         const parsed = new URL(url);
@@ -27,16 +28,17 @@ function frameRoute(iframe, fallback) {
         return sketchRouteKey(fallback);
     }
 }
-function sameFrame(document, iframe, cardUrl) {
+function sameFrame(document, iframe, cardUrl, artifactId) {
     const sketchRoute = sketchRouteKey(document.capture.url);
     if (!sketchRoute)
         return false;
-    return sketchRoute === frameRoute(iframe, cardUrl);
+    return sketchRoute === frameRoute(iframe, cardUrl)
+        || (artifactId !== undefined && sketchRoute === sketchRouteKey(cardUrl));
 }
 export function projectSketchPoint(point, document, frameWindow, width, height) {
     const capture = document.capture;
-    const imageWidth = Math.max(1, document.imageWidth);
-    const imageHeight = Math.max(1, document.imageHeight);
+    const imageWidth = Math.max(1, document.capture.imageWidth);
+    const imageHeight = Math.max(1, document.capture.imageHeight);
     const viewportWidth = Math.max(1, frameWindow.innerWidth || width);
     const viewportHeight = Math.max(1, frameWindow.innerHeight || height);
     const scroll = getSketchScrollPosition(frameWindow);
@@ -53,7 +55,7 @@ export function projectSketchPoint(point, document, frameWindow, width, height)
     };
 }
 function visibleStroke(stroke, document, frameWindow, width, height) {
-    const captureScale = document.capture.viewportWidth / Math.max(1, document.imageWidth);
+    const captureScale = document.capture.viewportWidth / Math.max(1, document.capture.imageWidth);
     const currentScale = width / Math.max(1, frameWindow.innerWidth || width);
     return {
         ...stroke,
@@ -61,12 +63,13 @@ function visibleStroke(stroke, document, frameWindow, width, height) {
         points: stroke.points.map((point) => projectSketchPoint(point, document, frameWindow, width, height)),
     };
 }
-export function SketchFrameOverlay({ iframe, cardUrl, ready }) {
+export function SketchFrameOverlay({ cardId, iframe, cardUrl, artifactId, ready }) {
     const { items } = useSketchStore();
+    useDrafts();
     const [revision, setRevision] = useState(0);
     const documents = useMemo(() => ready && iframe
-        ? items.map((item) => item.document).filter((document) => sameFrame(document, iframe, cardUrl))
-        : [], [cardUrl, iframe, items, ready]);
+        ? items.map((item) => item.document).filter((document) => sketchBelongsToCard(document, cardId ?? null) && sameFrame(document, iframe, cardUrl, artifactId))
+        : [], [artifactId, cardId, cardUrl, iframe, items, ready]);
     useEffect(() => {
         if (!iframe || documents.length === 0)
             return;

package/dist/inspector/sketch/SketchLayersPanel.js

@@ -6,6 +6,9 @@ import { IconButton } from "../ui/IconButton.js";
 import { copyImageToClipboard } from "./raster.js";
 import { closeSketchNote } from "./sketchNote.js";
 import { removeSketch, useSketchStore } from "./store.js";
+import { useFocusedCardId, useSelectedCardId } from "../canvas/canvasStore.js";
+import { sketchBelongsToCard, useDrafts } from "../drafts/store.js";
+import { Tooltip } from "../ui/Tooltip.js";
 function SketchThumbnail({ item }) {
     const [url, setUrl] = useState(null);
     const hasMarks = item.document.strokes.length > 0 || (item.document.annotations?.length ?? 0) > 0;
@@ -22,7 +25,7 @@ function SketchThumbnail({ item }) {
     }, [hasMarks, item.document.annotatedImage]);
     return hasMarks && url ? (_jsx("img", { className: "sketch-layers__thumbnail", src: url, alt: "", "aria-hidden": "true" })) : (_jsx("span", { className: "sketch-layers__thumbnail sketch-layers__thumbnail--empty", "aria-hidden": "true" }));
 }
-function SketchLayer({ item, index }) {
+function SketchLayer({ item, index, multiple, }) {
     const [copied, setCopied] = useState(false);
     const [error, setError] = useState(null);
     const busy = item.status === "dispatching" || item.status === "handing-off";
@@ -51,13 +54,18 @@ function SketchLayer({ item, index }) {
             setError(deleteError instanceof Error ? deleteError.message : "The sketch could not be deleted.");
         }
     }
-    return (_jsxs("div", { className: "sketch-layers__item", "data-test": "sketch-layer", "data-sketch-id": item.document.id, children: [_jsxs(Button, { className: "sketch-layers__copy", variant: "secondary", type: "button", "data-test": "sketch-layer-copy-image", onClick: () => void copyImage(), disabled: busy, children: [_jsxs("span", { className: "sketch-layers__copy-label", children: [copied
+    return (_jsxs("div", { className: "sketch-layers__item", "data-test": "sketch-layer", "data-sketch-id": item.document.id, children: [_jsxs(Button, { className: "sketch-layers__copy", variant: "primary", type: "button", "data-test": "sketch-layer-copy-image", onClick: () => void copyImage(), disabled: busy, children: [_jsxs("span", { className: "sketch-layers__copy-label", children: [copied
                                 ? _jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" })
-                                : _jsx(IconCopy, { size: "var(--icon-size-small)", "aria-hidden": "true" }), _jsx("span", { className: "sketch-layers__name", children: copied ? "Copied" : `Sketch ${index + 1}` })] }), _jsx(SketchThumbnail, { item: item })] }), _jsx(IconButton, { className: "sketch-layers__delete", variant: "quiet", size: "compact", label: "Delete sketch", title: "Delete sketch", "data-test": "sketch-layer-delete", onClick: () => void deleteLayer(), disabled: busy, children: _jsx(IconX, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }), error ? _jsx("span", { className: "sketch-layers__error", role: "status", children: error }) : null] }));
+                                : _jsx(IconCopy, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsx("span", { className: "sketch-layers__name", children: copied ? "Copied" : `Copy sketch note${multiple ? ` ${index + 1}` : ""}` })] }), _jsx(SketchThumbnail, { item: item })] }), _jsx(Tooltip, { children: _jsx(IconButton, { className: "sketch-layers__delete", variant: "quiet", size: "compact", label: "Delete sketch", "data-test": "sketch-layer-delete", onClick: () => void deleteLayer(), disabled: busy, children: _jsx(IconX, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }) }), error ? _jsx("span", { className: "sketch-layers__error", role: "status", children: error }) : null] }));
 }
 export function SketchLayersPanel() {
     const { items } = useSketchStore();
-    if (items.length === 0)
+    useDrafts();
+    const selectedCardId = useSelectedCardId();
+    const focusedCardId = useFocusedCardId();
+    const cardId = selectedCardId ?? focusedCardId;
+    const visibleItems = items.filter((item) => sketchBelongsToCard(item.document, cardId));
+    if (visibleItems.length === 0)
         return null;
-    return (_jsxs("section", { className: "sketch-layers", "data-test": "sketch-layers", "aria-label": "Sketch layers", children: [items.map((item, index) => (_jsx(SketchLayer, { item: item, index: index }, `${item.document.id}:${item.document.revision}`))), _jsx("p", { className: "sketch-layers__hint", "data-test": "sketch-copy-helper", children: "Copy prompt and sketch individually into agent" })] }));
+    return (_jsx("section", { className: "sketch-layers", "data-test": "sketch-layers", "aria-label": "Sketch layers", children: visibleItems.map((item, index) => (_jsx(SketchLayer, { item: item, index: index, multiple: visibleItems.length > 1 }, `${item.document.id}:${item.document.revision}`))) }));
 }

package/dist/inspector/sketch/SketchOverlay.js

@@ -10,11 +10,10 @@ import { findSketchElementAt, translateSketchAnnotation, translateSketchStroke,
 import { SketchPromptPanel } from "./SketchPromptPanel.js";
 import { SketchSvgLayer } from "./freehand.js";
 import { useInspectorOpen } from "../shell/openStore.js";
-function portalContainer() {
-    return typeof document !== "undefined"
-        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
-        : null;
-}
+import { DRAG_CURSOR, SKETCH_CURSOR } from "../ui/customCursors.js";
+import { useTemporaryAppInteraction } from "../canvas/viewStore.js";
+import { Tooltip } from "../ui/Tooltip.js";
+import { portalContainer } from "../ui/portalContainer.js";
 function clamp(value, maximum) {
     return Math.max(0, Math.min(maximum, value));
 }
@@ -68,6 +67,7 @@ function annotationEditorStyle(annotation, viewport) {
     };
 }
 export function SketchOverlay({ open, hostElement, initialTool = "pen", onCancel, onDone }) {
+    const temporaryAppInteraction = useTemporaryAppInteraction();
     const inspectorOpen = useInspectorOpen();
     const [viewport, setViewport] = useState(() => getSketchViewport(hostElement));
     const [tool, setTool] = useState("pen");
@@ -411,10 +411,10 @@ export function SketchOverlay({ open, hostElement, initialTool = "pen", onCancel
     if (!open)
         return null;
     return (_jsx(Dialog.Root, { open: open, modal: false, disablePointerDismissal: true, onOpenChange: (nextOpen) => { if (!nextOpen && !submitting)
-            onCancel(); }, children: _jsxs(Dialog.Portal, { container: portalContainer(), children: [_jsx(Dialog.Backdrop, { className: "sketch__backdrop sketch__live-backdrop", "data-inspector-open": inspectorOpen ? "true" : "false", "data-test": "sketch-live-backdrop" }), _jsxs(Dialog.Popup, { className: "sketch__popup sketch__live-popup", "data-inspector-open": inspectorOpen ? "true" : "false", "data-test": "sketch-live-editor", onKeyDown: onEditorKeyDown, children: [_jsx(Dialog.Title, { className: "sketch__title sketch__sr-only", children: "Sketch viewport" }), _jsx(Dialog.Description, { className: "sketch__description sketch__sr-only", children: "Draw directly over the live interface, then add a short note for the sketch." }), _jsxs("div", { className: "sketch__canvas-frame sketch__live-frame", style: {
+            onCancel(); }, children: _jsxs(Dialog.Portal, { container: portalContainer(), children: [_jsx(Dialog.Backdrop, { style: { visibility: temporaryAppInteraction ? "hidden" : undefined }, className: "sketch__backdrop sketch__live-backdrop", "data-inspector-open": inspectorOpen ? "true" : "false", "data-test": "sketch-live-backdrop" }), _jsxs(Dialog.Popup, { style: { visibility: temporaryAppInteraction ? "hidden" : undefined }, className: "sketch__popup sketch__live-popup", "data-inspector-open": inspectorOpen ? "true" : "false", "data-test": "sketch-live-editor", onKeyDown: onEditorKeyDown, children: [_jsx(Dialog.Title, { className: "sketch__title sketch__sr-only", children: "Sketch viewport" }), _jsx(Dialog.Description, { className: "sketch__description sketch__sr-only", children: "Draw directly over the live interface, then add a short note for the sketch." }), _jsxs("div", { className: "sketch__canvas-frame sketch__live-frame", style: {
                                 left: viewport.offsetX,
                                 top: viewport.offsetY,
                                 width: viewport.displayWidth,
                                 height: viewport.displayHeight,
-                            }, children: [_jsx("svg", { ref: svgRef, className: `sketch__canvas sketch__live-canvas sketch__canvas--${tool}`, width: viewport.width, height: viewport.height, viewBox: `0 0 ${viewport.width} ${viewport.height}`, preserveAspectRatio: "none", pointerEvents: "all", tabIndex: 0, "aria-label": "Sketch over the live interface", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: finishPointer, onPointerCancel: finishPointer, children: _jsx(SketchSvgLayer, { strokes: draftStroke ? [...visibleStrokes, draftStroke] : visibleStrokes, annotations: visibleAnnotations }) }), activeAnnotation ? (_jsxs("div", { className: "sketch__annotation-editor", role: "dialog", "aria-label": `Annotation ${activeAnnotation.number}`, style: annotationEditorStyle(activeAnnotation, viewport), children: [_jsxs("label", { className: "sketch__sr-only", htmlFor: "sketch-annotation-description", children: ["Annotation ", activeAnnotation.number, " description"] }), _jsx("input", { ref: annotationInputRef, id: "sketch-annotation-description", value: annotationDraft, maxLength: SKETCH_LIMITS.description, placeholder: "Describe this area\u2026", autoComplete: "off", "data-test": "sketch-live-annotation-description", onChange: (event) => setAnnotationDraft(event.target.value), onKeyDown: onAnnotationKeyDown }), _jsx(IconButton, { label: "Cancel annotation", variant: "quiet", size: "compact", "data-test": "sketch-live-annotation-cancel", onClick: cancelActiveAnnotation, children: _jsx(IconX, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }), _jsxs(Button, { variant: "primary", size: "compact", type: "button", "data-test": "sketch-live-annotation-save", onClick: () => { commitActiveAnnotation(); }, children: [_jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" }), "Add"] })] })) : null] }), _jsx(SketchPromptPanel, { dataTest: "sketch-live-prompt", className: "sketch__live-note-panel", description: description, error: error, saving: submitting, autoFocus: true, onDescriptionChange: setDescription, onDone: done, onCancel: onCancel })] })] }) }));
+                            }, children: [_jsx("svg", { ref: svgRef, className: `sketch__canvas sketch__live-canvas sketch__canvas--${tool}`, width: viewport.width, height: viewport.height, viewBox: `0 0 ${viewport.width} ${viewport.height}`, preserveAspectRatio: "none", pointerEvents: "all", style: { cursor: tool === "move" ? DRAG_CURSOR : SKETCH_CURSOR }, tabIndex: 0, "aria-label": "Sketch over the live interface", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: finishPointer, onPointerCancel: finishPointer, children: _jsx(SketchSvgLayer, { strokes: draftStroke ? [...visibleStrokes, draftStroke] : visibleStrokes, annotations: visibleAnnotations }) }), activeAnnotation ? (_jsxs("div", { className: "sketch__annotation-editor", role: "dialog", "aria-label": `Annotation ${activeAnnotation.number}`, style: annotationEditorStyle(activeAnnotation, viewport), children: [_jsxs("label", { className: "sketch__sr-only", htmlFor: "sketch-annotation-description", children: ["Annotation ", activeAnnotation.number, " description"] }), _jsx("input", { ref: annotationInputRef, id: "sketch-annotation-description", value: annotationDraft, maxLength: SKETCH_LIMITS.description, placeholder: "Describe this area\u2026", autoComplete: "off", "data-test": "sketch-live-annotation-description", onChange: (event) => setAnnotationDraft(event.target.value), onKeyDown: onAnnotationKeyDown }), _jsx(Tooltip, { children: _jsx(IconButton, { label: "Cancel annotation", variant: "quiet", size: "compact", "data-test": "sketch-live-annotation-cancel", onClick: cancelActiveAnnotation, children: _jsx(IconX, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }) }), _jsxs(Button, { variant: "primary", size: "compact", type: "button", "data-test": "sketch-live-annotation-save", onClick: () => { commitActiveAnnotation(); }, children: [_jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" }), "Add"] })] })) : null] }), _jsx(SketchPromptPanel, { dataTest: "sketch-live-prompt", className: "sketch__live-note-panel", description: description, error: error, saving: submitting, autoFocus: true, onDescriptionChange: setDescription, onDone: done, onCancel: onCancel })] })] }) }));
 }

package/dist/inspector/sketch/SketchWorkspace.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { assignSketchToDraft } from "../drafts/store.js";
+import { getActiveDraftChanges } from "../changes/draftChanges.js";
 import { useEffect, useState } from "react";
 import { renderAnnotatedPng } from "./raster.js";
 import { closeSketchEditor, completeSketchCapture, beginSketchCapture, cancelSketchInteraction, openSketchEditor, useSketchInteraction } from "./interaction.js";
@@ -76,22 +78,22 @@ export function SketchWorkspace({ hostElement, projectId }) {
         ? store.items.find((item) => item.document.id === note.sketchId)?.document ?? null
         : null;
     async function save(input) {
-        await saveSketch(input);
+        const owner = interaction.draftId ?? getActiveDraftChanges().draftId;
+        const saved = await saveSketch(input);
+        if (!input.id)
+            assignSketchToDraft(owner, saved.id);
         closeSketchEditor();
     }
     async function saveLive(draft) {
         if (!hostElement)
             throw new Error("The inspector is no longer available.");
+        const owner = interaction.draftId ?? getActiveDraftChanges().draftId;
         const captured = await completeSketchCapture(hostElement);
         const strokes = projectLiveStrokes(draft, captured);
         const annotations = projectLiveAnnotations(draft, captured);
-        const rendered = await renderAnnotatedPng(captured.originalImage, captured.imageWidth, captured.imageHeight, strokes, annotations);
-        await save({
-            capture: {
-                ...captured.capture,
-                imageWidth: rendered.width,
-                imageHeight: rendered.height,
-            },
+        const rendered = await renderAnnotatedPng(captured.originalImage, captured.imageWidth, captured.imageHeight, strokes, annotations, draft.description);
+        const saved = await saveSketch({
+            capture: captured.capture,
             description: draft.description,
             strokes,
             annotations,
@@ -100,20 +102,24 @@ export function SketchWorkspace({ hostElement, projectId }) {
             originalImage: captured.originalImage,
             annotatedImage: rendered.blob,
         });
+        assignSketchToDraft(owner, saved.id);
+        closeSketchEditor();
     }
     async function saveNote(description) {
         if (!noteDocument)
             return;
+        const nextDescription = description.trim();
+        const rendered = await renderAnnotatedPng(noteDocument.originalImage, noteDocument.capture.imageWidth, noteDocument.capture.imageHeight, noteDocument.strokes, noteDocument.annotations ?? [], nextDescription);
         await saveSketch({
             id: noteDocument.id,
             capture: noteDocument.capture,
-            description: description.trim(),
+            description: nextDescription,
             strokes: noteDocument.strokes,
             annotations: noteDocument.annotations ?? [],
-            imageWidth: noteDocument.imageWidth,
-            imageHeight: noteDocument.imageHeight,
+            imageWidth: rendered.width,
+            imageHeight: rendered.height,
             originalImage: noteDocument.originalImage,
-            annotatedImage: noteDocument.annotatedImage,
+            annotatedImage: rendered.blob,
         });
         closeSketchNote();
     }

package/dist/inspector/sketch/interaction.d.ts

@@ -7,6 +7,7 @@ export interface SketchInteractionSnapshot {
     readonly editingId: string | null;
     readonly error: string | null;
     readonly initialTool: SketchEntryTool;
+    readonly draftId: string | null;
 }
 export declare function getSketchInteractionSnapshot(): SketchInteractionSnapshot;
 export declare function subscribeSketchInteraction(listener: () => void): () => void;