nudge-ui 0.2.2 → 0.2.4

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;

package/dist/inspector/sketch/interaction.js

@@ -1,3 +1,4 @@
+import { getActiveDraftChanges } from "../changes/draftChanges.js";
 import { useSyncExternalStore } from "react";
 import { captureViewport, } from "./capture.js";
 const EMPTY_SNAPSHOT = {
@@ -6,6 +7,7 @@ const EMPTY_SNAPSHOT = {
     editingId: null,
     error: null,
     initialTool: "pen",
+    draftId: null,
 };
 let snapshot = EMPTY_SNAPSHOT;
 let captureController = null;
@@ -41,21 +43,22 @@ export function useSketchInteractionActive() {
 export function beginSketchCapture(initialTool = "pen") {
     captureController?.abort();
     captureController = null;
-    publish({ captureState: "sketching", captured: null, editingId: null, error: null, initialTool });
+    publish({ captureState: "sketching", captured: null, editingId: null, error: null, initialTool, draftId: getActiveDraftChanges().draftId });
 }
 export function completeSketchCapture(hostElement) {
     captureController?.abort();
     const controller = new AbortController();
     captureController = controller;
     const initialTool = snapshot.initialTool;
-    publish({ captureState: "capturing", captured: null, editingId: null, error: null, initialTool });
+    const draftId = snapshot.draftId;
+    publish({ captureState: "capturing", captured: null, editingId: null, error: null, initialTool, draftId });
     const options = { hostElement, signal: controller.signal };
     return captureViewport(options)
         .then((captured) => {
         if (captureController !== controller)
             return captured;
         captureController = null;
-        publish({ captureState: "ready", captured, editingId: null, error: null, initialTool });
+        publish({ captureState: "ready", captured, editingId: null, error: null, initialTool, draftId });
         return captured;
     })
         .catch((error) => {
@@ -72,6 +75,7 @@ export function completeSketchCapture(hostElement) {
             editingId: null,
             error: error instanceof Error ? error.message : "The viewport could not be captured.",
             initialTool,
+            draftId,
         });
         throw error;
     });
@@ -84,7 +88,7 @@ export function cancelSketchInteraction() {
 export function openSketchEditor(sketchId) {
     captureController?.abort();
     captureController = null;
-    publish({ captureState: "idle", captured: null, editingId: sketchId, error: null, initialTool: "pen" });
+    publish({ captureState: "idle", captured: null, editingId: sketchId, error: null, initialTool: "pen", draftId: null });
 }
 export function closeSketchEditor() {
     if (snapshot.captureState !== "ready" && snapshot.editingId === null)

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

@@ -63,6 +63,11 @@ export interface SketchDocument {
     readonly strokes: readonly SketchStroke[];
     /** Optional for compatibility with sketches saved before annotations existed. */
     readonly annotations?: readonly SketchAnnotation[];
+    /**
+     * Size of `annotatedImage`, which can be taller than the capture when a
+     * notes panel is appended. `capture.imageWidth`/`imageHeight` size the
+     * original screenshot and the stroke coordinate space.
+     */
     readonly imageWidth: number;
     readonly imageHeight: number;
     readonly originalByteSize: number;

package/dist/inspector/sketch/model.js

@@ -176,8 +176,12 @@ export function isSketchDocument(value) {
                 && document.annotations.length <= SKETCH_LIMITS.annotations
                 && document.annotations.every(isSketchAnnotation)
                 && new Set(document.annotations.map((annotation) => annotation.number)).size === document.annotations.length))
-        && document.imageWidth === document.capture.imageWidth
-        && document.imageHeight === document.capture.imageHeight
+        && Number.isSafeInteger(document.imageWidth)
+        && document.imageWidth > 0
+        && document.imageWidth <= SKETCH_LIMITS.imageEdge
+        && Number.isSafeInteger(document.imageHeight)
+        && document.imageHeight > 0
+        && document.imageHeight <= SKETCH_LIMITS.imageEdge
         && Number.isSafeInteger(document.originalByteSize)
         && document.originalByteSize > 0
         && document.originalByteSize <= SKETCH_LIMITS.imageBytes

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

@@ -10,8 +10,7 @@ export declare function drawSketchStroke(ctx: CanvasRenderingContext2D, stroke:
 export declare function drawSketchStrokes(ctx: CanvasRenderingContext2D, strokes: readonly SketchStroke[], scaleX?: number, scaleY?: number): void;
 export declare function drawSketchAnnotation(ctx: CanvasRenderingContext2D, annotation: Pick<SketchAnnotation, "number" | "point">, scaleX?: number, scaleY?: number): void;
 export declare function drawSketchAnnotations(ctx: CanvasRenderingContext2D, annotations: readonly SketchAnnotation[], scaleX?: number, scaleY?: number): void;
-/** Renders the immutable screenshot and committed strokes into one PNG. */
-export declare function renderAnnotatedPng(originalImage: Blob, imageWidth: number, imageHeight: number, strokes: readonly SketchStroke[], annotations?: readonly SketchAnnotation[]): Promise<{
+export declare function renderAnnotatedPng(originalImage: Blob, imageWidth: number, imageHeight: number, strokes: readonly SketchStroke[], annotations?: readonly SketchAnnotation[], description?: string): Promise<{
     readonly blob: Blob;
     readonly width: number;
     readonly height: number;

package/dist/inspector/sketch/raster.js

@@ -1,6 +1,11 @@
 import { SKETCH_ANNOTATION_RADIUS, SKETCH_LIMITS, SKETCH_STROKE_COLOR, } from "./model.js";
 import { sketchStrokeOutline } from "./freehand.js";
 const PNG_SIGNATURE = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
+const SKETCH_NOTE_PADDING = 24;
+const SKETCH_NOTE_TITLE_HEIGHT = 34;
+const SKETCH_NOTE_LINE_HEIGHT = 32;
+const SKETCH_NOTE_FONT = "24px system-ui, sans-serif";
+const SKETCH_NOTE_TITLE_FONT = "600 24px system-ui, sans-serif";
 export function readPngDimensions(bytes) {
     if (bytes.length < 24)
         return null;
@@ -137,8 +142,59 @@ function canvasPng(canvas) {
         }, "image/png");
     });
 }
-/** Renders the immutable screenshot and committed strokes into one PNG. */
-export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight, strokes, annotations = []) {
+function wrapText(ctx, text, maxWidth) {
+    const lines = [];
+    let line = "";
+    for (const word of text.split(/\s+/).filter(Boolean)) {
+        const next = line ? `${line} ${word}` : word;
+        if (line && ctx.measureText(next).width > maxWidth) {
+            lines.push(line);
+            line = word;
+        }
+        else {
+            line = next;
+        }
+    }
+    if (line)
+        lines.push(line);
+    return lines;
+}
+/** Wraps the description and numbered annotation notes to the panel width. */
+function wrapSketchNotes(ctx, width, description, annotations) {
+    const notes = [
+        description.trim(),
+        ...annotations.map((annotation) => {
+            const text = annotation.description.trim();
+            return text ? `${annotation.number}. ${text}` : "";
+        }),
+    ].filter(Boolean);
+    ctx.font = SKETCH_NOTE_FONT;
+    const textWidth = Math.max(1, width - SKETCH_NOTE_PADDING * 2);
+    return notes.flatMap((note) => wrapText(ctx, note, textWidth));
+}
+function sketchNotePanelHeight(lineCount) {
+    if (lineCount === 0)
+        return 0;
+    return SKETCH_NOTE_PADDING * 2 + SKETCH_NOTE_TITLE_HEIGHT + lineCount * SKETCH_NOTE_LINE_HEIGHT;
+}
+function drawSketchNotes(ctx, width, top, lines) {
+    ctx.save();
+    ctx.fillStyle = SKETCH_STROKE_COLOR;
+    ctx.fillRect(0, top, width, sketchNotePanelHeight(lines.length));
+    ctx.fillStyle = "#ffffff";
+    ctx.textAlign = "left";
+    ctx.textBaseline = "top";
+    ctx.font = SKETCH_NOTE_TITLE_FONT;
+    ctx.fillText("Sketch notes", SKETCH_NOTE_PADDING, top + SKETCH_NOTE_PADDING);
+    ctx.font = SKETCH_NOTE_FONT;
+    let y = top + SKETCH_NOTE_PADDING + SKETCH_NOTE_TITLE_HEIGHT;
+    for (const line of lines) {
+        ctx.fillText(line, SKETCH_NOTE_PADDING, y);
+        y += SKETCH_NOTE_LINE_HEIGHT;
+    }
+    ctx.restore();
+}
+export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight, strokes, annotations = [], description = "") {
     await validatePngBlob(originalImage, { width: imageWidth, height: imageHeight });
     if (typeof document === "undefined")
         throw new Error("Sketch rendering requires a browser document.");
@@ -146,18 +202,26 @@ export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight,
     try {
         const canvas = document.createElement("canvas");
         canvas.width = imageWidth;
-        canvas.height = imageHeight;
         const context = canvas.getContext("2d");
         if (!context)
             throw new Error("The browser could not create a sketch canvas.");
+        const noteLines = wrapSketchNotes(context, imageWidth, description, annotations);
+        const outputHeight = imageHeight + sketchNotePanelHeight(noteLines.length);
+        if (outputHeight > SKETCH_LIMITS.imageEdge) {
+            throw new Error("Sketch notes are too long to fit below the captured image.");
+        }
+        // Resizing clears the canvas and resets context state; the context stays valid.
+        canvas.height = outputHeight;
         context.drawImage(image.source, 0, 0, imageWidth, imageHeight);
         drawSketchStrokes(context, strokes);
         drawSketchAnnotations(context, annotations);
+        if (noteLines.length > 0)
+            drawSketchNotes(context, imageWidth, imageHeight, noteLines);
         const result = await canvasPng(canvas);
         if (result.size > SKETCH_LIMITS.imageBytes) {
             throw new Error("This sketch is too detailed to save within the 2 MiB image limit.");
         }
-        return { blob: result, width: imageWidth, height: imageHeight };
+        return { blob: result, width: imageWidth, height: outputHeight };
     }
     finally {
         image.close();

package/dist/inspector/styleEditors/BackgroundEditor.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from "react";
+import type { ColorPickerProps } from "./ColorPicker.js";
+/** Background layers are displayed in CSS paint order, with the top layer first. */
+export declare function BackgroundEditor(props: ColorPickerProps): ReactElement;