nudge-ui 0.2.3 → 0.2.5

package/dist/inspector/sketch/SketchOverlay.js

@@ -1,27 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { Dialog } from "@base-ui/react/dialog";
-import { IconCheck, IconX, } from "@tabler/icons-react";
-import { Button } from "../ui/Button.js";
-import { IconButton } from "../ui/IconButton.js";
 import { getSketchViewport } from "./capture.js";
-import { SKETCH_ANNOTATION_RADIUS, SKETCH_LIMITS, SKETCH_STROKE_COLOR, SKETCH_STROKE_OUTLINE, SKETCH_STROKE_WIDTH, } from "./model.js";
-import { findSketchElementAt, translateSketchAnnotation, translateSketchStroke, } from "./geometry.js";
+import { SKETCH_LIMITS, SKETCH_STROKE_OUTLINE, SKETCH_RECTANGLE_STROKE_WIDTH, SKETCH_STROKE_WIDTH, } from "./model.js";
+import { findErasedSketchStrokeIds } from "./geometry.js";
+import { EMPTY_SKETCH_HISTORY, addSketchStroke, eraseSketchStrokes, redoSketchEdit, undoSketchEdit, } from "./history.js";
+import { resetSketchDrawingTool, useSketchDrawingTools } from "./drawingTools.js";
 import { SketchPromptPanel } from "./SketchPromptPanel.js";
 import { SketchSvgLayer } from "./freehand.js";
 import { useInspectorOpen } from "../shell/openStore.js";
-import { DRAG_CURSOR, SKETCH_CURSOR } from "../ui/customCursors.js";
+import { isEditableEvent } from "../shell/shortcuts.js";
+import { ERASER_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";
+/** Eraser reach around the pointer in screen pixels, matching the cursor ring. */
+const ERASER_RADIUS_PX = 8;
+function sketchCursor(tool) {
+    if (tool === "eraser")
+        return ERASER_CURSOR;
+    if (tool === "rectangle")
+        return "crosshair";
+    return SKETCH_CURSOR;
+}
 function clamp(value, maximum) {
     return Math.max(0, Math.min(maximum, value));
 }
-function pointFromEvent(event, canvas, viewport) {
-    const bounds = canvas.getBoundingClientRect();
+function pointFromEvent(event, viewport) {
     return {
-        x: clamp(((event.clientX - bounds.left) / Math.max(1, bounds.width)) * viewport.width, viewport.width) + viewport.scrollX,
-        y: clamp(((event.clientY - bounds.top) / Math.max(1, bounds.height)) * viewport.height, viewport.height) + viewport.scrollY,
+        x: clamp(((event.clientX - viewport.offsetX) / Math.max(1, viewport.displayWidth)) * viewport.width, viewport.width) + viewport.scrollX,
+        y: clamp(((event.clientY - viewport.offsetY) / Math.max(1, viewport.displayHeight)) * viewport.height, viewport.height) + viewport.scrollY,
     };
 }
 function distance(left, right) {
@@ -36,15 +43,6 @@ function visibleStroke(stroke, viewport) {
         })),
     };
 }
-function visibleAnnotation(annotation, viewport) {
-    return {
-        ...annotation,
-        point: {
-            x: annotation.point.x - viewport.scrollX,
-            y: annotation.point.y - viewport.scrollY,
-        },
-    };
-}
 function rectanglePoints(start, end) {
     const left = Math.min(start.x, end.x);
     const right = Math.max(start.x, end.x);
@@ -58,58 +56,52 @@ function rectanglePoints(start, end) {
         { x: left, y: top },
     ];
 }
-function annotationEditorStyle(annotation, viewport) {
-    const width = 280;
-    const height = 52;
-    return {
-        left: clamp(annotation.point.x - viewport.scrollX + SKETCH_ANNOTATION_RADIUS + 8, Math.max(8, viewport.width - width - 8)),
-        top: clamp(annotation.point.y - viewport.scrollY + SKETCH_ANNOTATION_RADIUS + 8, Math.max(8, viewport.height - height - 8)),
-    };
-}
-export function SketchOverlay({ open, hostElement, initialTool = "pen", onCancel, onDone }) {
+export function SketchOverlay({ open, hostElement, selectTarget, onCancel, onDone }) {
     const temporaryAppInteraction = useTemporaryAppInteraction();
     const inspectorOpen = useInspectorOpen();
     const [viewport, setViewport] = useState(() => getSketchViewport(hostElement));
-    const [tool, setTool] = useState("pen");
+    const drawing = useSketchDrawingTools();
+    const tool = drawing.tool;
     const [description, setDescription] = useState("");
-    const [strokes, setStrokes] = useState([]);
-    const [redoStrokes, setRedoStrokes] = useState([]);
-    const [annotations, setAnnotations] = useState([]);
-    const [activeAnnotationId, setActiveAnnotationId] = useState(null);
-    const [activeAnnotationOriginal, setActiveAnnotationOriginal] = useState(null);
-    const [annotationDraft, setAnnotationDraft] = useState("");
+    const [history, setHistory] = useState(EMPTY_SKETCH_HISTORY);
     const [draftPoints, setDraftPoints] = useState([]);
     const [submitting, setSubmitting] = useState(false);
     const [error, setError] = useState(null);
     const svgRef = useRef(null);
-    const annotationInputRef = useRef(null);
+    const targetRef = useRef(hostElement);
     const pointerId = useRef(null);
-    const moveState = useRef(null);
+    const draftPointsRef = useRef([]);
     const draftPointLimitReached = useRef(false);
-    const activeAnnotation = annotations.find((annotation) => annotation.id === activeAnnotationId) ?? null;
+    const eraserPoint = useRef(null);
+    // Identifies the current eraser drag so it undoes as a single edit.
+    const eraseGesture = useRef(0);
+    const strokes = history.strokes;
+    function updateDraftPoints(next) {
+        draftPointsRef.current = next;
+        setDraftPoints(next);
+    }
     useEffect(() => {
         if (!open)
             return;
+        targetRef.current = hostElement;
         setViewport(getSketchViewport(hostElement));
-        // Sketch starts with a freehand pen. The separate Annotate entry point
-        // still opens directly in annotation mode without the old live toolbar.
-        setTool(initialTool);
+        resetSketchDrawingTool();
         setDescription("");
-        setStrokes([]);
-        setRedoStrokes([]);
-        setAnnotations([]);
-        setActiveAnnotationId(null);
-        setActiveAnnotationOriginal(null);
-        setAnnotationDraft("");
-        setDraftPoints([]);
-        moveState.current = null;
+        setHistory(EMPTY_SKETCH_HISTORY);
+        updateDraftPoints([]);
+        // Closing mid-stroke unmounts the surface before its pointerup arrives.
+        pointerId.current = null;
+        eraserPoint.current = null;
         setSubmitting(false);
         setError(null);
-    }, [hostElement, initialTool, open]);
+        // Choosing the first stroke's frame must preserve the stroke already in progress.
+    }, [open]);
     useEffect(() => {
         if (!open)
             return;
+        targetRef.current = hostElement;
         const updateViewport = () => setViewport(getSketchViewport(hostElement));
+        updateViewport();
         window.addEventListener("resize", updateViewport);
         window.addEventListener("scroll", updateViewport, true);
         const frameWindow = typeof HTMLIFrameElement !== "undefined"
@@ -125,155 +117,90 @@ export function SketchOverlay({ open, hostElement, initialTool = "pen", onCancel
             frameWindow?.removeEventListener("scroll", updateViewport, true);
         };
     }, [hostElement, open]);
-    useEffect(() => {
-        if (activeAnnotationId !== null)
-            annotationInputRef.current?.focus();
-    }, [activeAnnotationId]);
     useEffect(() => {
         if (open)
             svgRef.current?.focus();
     }, [open]);
-    function openAnnotation(annotation) {
-        setActiveAnnotationId(annotation.id);
-        setActiveAnnotationOriginal(annotation.description);
-        setAnnotationDraft(annotation.description);
-        setError(null);
-    }
-    function annotationAt(point) {
-        return [...annotations].reverse().find((annotation) => distance(annotation.point, point) <= SKETCH_ANNOTATION_RADIUS * 1.5) ?? null;
-    }
-    function commitActiveAnnotation() {
-        if (activeAnnotationId === null)
-            return annotations;
-        const description = annotationDraft.trim();
-        if (!description) {
-            setError("Add a short description for this annotation before continuing.");
-            annotationInputRef.current?.focus();
-            return null;
-        }
-        const next = annotations.map((annotation) => annotation.id === activeAnnotationId
-            ? { ...annotation, description }
-            : annotation);
-        setAnnotations(next);
-        setActiveAnnotationId(null);
-        setActiveAnnotationOriginal(null);
-        setAnnotationDraft("");
-        setError(null);
-        return next;
-    }
-    function cancelActiveAnnotation() {
-        if (activeAnnotationId !== null && activeAnnotationOriginal === "") {
-            setAnnotations((current) => current.filter((annotation) => annotation.id !== activeAnnotationId));
+    // Listen on the window rather than the dialog: the drawing options live in
+    // the canvas toolbar, so focus is often outside the dialog while sketching.
+    // Text fields keep their native undo.
+    useEffect(() => {
+        if (!open)
+            return;
+        function onKeyDown(event) {
+            if (!(event.metaKey || event.ctrlKey) || event.altKey || isEditableEvent(event))
+                return;
+            const key = event.key.toLowerCase();
+            const isRedo = (key === "z" && event.shiftKey) || (key === "y" && !event.shiftKey);
+            const isUndo = key === "z" && !event.shiftKey;
+            if (!isRedo && !isUndo)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            setHistory((current) => isRedo ? redoSketchEdit(current) : undoSketchEdit(current));
         }
-        setActiveAnnotationId(null);
-        setActiveAnnotationOriginal(null);
-        setAnnotationDraft("");
-        setError(null);
+        window.addEventListener("keydown", onKeyDown, true);
+        return () => window.removeEventListener("keydown", onKeyDown, true);
+    }, [open]);
+    function eraseAlong(start, end, drawingViewport) {
+        const radius = ERASER_RADIUS_PX * (drawingViewport.width / Math.max(1, drawingViewport.displayWidth));
+        const gesture = eraseGesture.current;
+        setHistory((current) => eraseSketchStrokes(current, findErasedSketchStrokeIds(start, end, current.strokes, radius), gesture));
     }
     function onPointerDown(event) {
-        if (submitting || pointerId.current !== null || moveState.current !== null)
+        if (submitting || pointerId.current !== null)
             return;
-        const point = pointFromEvent(event, event.currentTarget, viewport);
-        if (tool === "move") {
-            event.preventDefault();
-            const element = findSketchElementAt(point, strokes, annotations);
-            if (!element)
-                return;
-            moveState.current = { pointerId: event.pointerId, element, lastPoint: point };
-            event.currentTarget.setPointerCapture(event.pointerId);
-            return;
-        }
-        if (tool === "annotate") {
-            event.preventDefault();
-            if (activeAnnotationId !== null) {
-                if (commitActiveAnnotation())
-                    setError("Select Annotate again, then click another area.");
-                return;
-            }
-            const existing = annotationAt(point);
-            if (existing) {
-                openAnnotation(existing);
-                return;
-            }
-            if (annotations.length >= SKETCH_LIMITS.annotations) {
-                setError(`A sketch can contain at most ${SKETCH_LIMITS.annotations} annotations.`);
+        let drawingViewport = getSketchViewport(targetRef.current);
+        if (selectTarget) {
+            const target = selectTarget({ x: event.clientX, y: event.clientY }, history.undo.length > 0 || history.redo.length > 0 ? targetRef.current : null);
+            if (!target)
                 return;
+            if (target !== targetRef.current) {
+                targetRef.current = target;
+                drawingViewport = getSketchViewport(target);
+                setViewport(drawingViewport);
             }
-            const usedNumbers = new Set(annotations.map((annotation) => annotation.number));
-            let nextNumber = 1;
-            while (usedNumbers.has(nextNumber))
-                nextNumber += 1;
-            const annotation = {
-                id: `annotation-${Date.now()}-${Math.random().toString(36).slice(2)}`,
-                number: nextNumber,
-                point,
-                description: "",
-            };
-            setAnnotations((current) => [...current, annotation]);
-            setActiveAnnotationId(annotation.id);
-            setActiveAnnotationOriginal("");
-            setAnnotationDraft("");
-            setError(null);
-            return;
         }
+        if (event.clientX < drawingViewport.offsetX || event.clientX > drawingViewport.offsetX + drawingViewport.displayWidth
+            || event.clientY < drawingViewport.offsetY || event.clientY > drawingViewport.offsetY + drawingViewport.displayHeight)
+            return;
+        const point = pointFromEvent(event, drawingViewport);
+        // Drawing cancels the browser's focus change, so move focus here
+        // explicitly; otherwise undo keeps going to the note or a toolbar button.
         event.preventDefault();
+        svgRef.current?.focus({ preventScroll: true });
         pointerId.current = event.pointerId;
-        draftPointLimitReached.current = false;
         event.currentTarget.setPointerCapture(event.pointerId);
-        setDraftPoints([point]);
-    }
-    function onPointerMove(event) {
-        const activeMove = moveState.current;
-        if (activeMove?.pointerId === event.pointerId) {
-            event.preventDefault();
-            const point = pointFromEvent(event, event.currentTarget, viewport);
-            const delta = {
-                x: point.x - activeMove.lastPoint.x,
-                y: point.y - activeMove.lastPoint.y,
-            };
-            if (delta.x !== 0 || delta.y !== 0) {
-                const bounds = { width: SKETCH_LIMITS.imageEdge, height: SKETCH_LIMITS.imageEdge };
-                if (activeMove.element.kind === "stroke") {
-                    setStrokes((current) => current.map((stroke) => stroke.id === activeMove.element.id
-                        ? translateSketchStroke(stroke, delta, bounds)
-                        : stroke));
-                }
-                else {
-                    setAnnotations((current) => current.map((annotation) => annotation.id === activeMove.element.id
-                        ? translateSketchAnnotation(annotation, delta, bounds)
-                        : annotation));
-                }
-                activeMove.lastPoint = point;
-            }
+        if (tool === "eraser") {
+            eraserPoint.current = point;
+            eraseGesture.current += 1;
+            eraseAlong(point, point, drawingViewport);
             return;
         }
+        draftPointLimitReached.current = false;
+        updateDraftPoints([point]);
+    }
+    function onPointerMove(event) {
         if (pointerId.current !== event.pointerId)
             return;
         event.preventDefault();
-        const point = pointFromEvent(event, event.currentTarget, viewport);
-        setDraftPoints((previous) => {
-            const last = previous.at(-1);
-            if (last && distance(last, point) < 1)
-                return previous;
-            if (previous.length >= SKETCH_LIMITS.points) {
-                draftPointLimitReached.current = true;
-                return previous;
-            }
-            return [...previous, point];
-        });
-    }
-    function finishPointer(event) {
-        const activeMove = moveState.current;
-        if (activeMove?.pointerId === event.pointerId) {
-            moveState.current = null;
-            try {
-                event.currentTarget.releasePointerCapture(event.pointerId);
-            }
-            catch {
-                // The pointer may already have been released by the browser.
-            }
+        const point = pointFromEvent(event, viewport);
+        if (eraserPoint.current) {
+            eraseAlong(eraserPoint.current, point, viewport);
+            eraserPoint.current = point;
             return;
         }
+        const previous = draftPointsRef.current;
+        const last = previous.at(-1);
+        if (last && distance(last, point) < 1)
+            return;
+        if (previous.length >= SKETCH_LIMITS.points) {
+            draftPointLimitReached.current = true;
+            return;
+        }
+        updateDraftPoints([...previous, point]);
+    }
+    function finishPointer(event) {
         if (pointerId.current !== event.pointerId)
             return;
         pointerId.current = null;
@@ -283,92 +210,46 @@ export function SketchOverlay({ open, hostElement, initialTool = "pen", onCancel
         catch {
             // The pointer may already have been released by the browser.
         }
+        if (eraserPoint.current) {
+            eraserPoint.current = null;
+            return;
+        }
+        const previous = draftPointsRef.current;
+        updateDraftPoints([]);
         if (draftPointLimitReached.current) {
             draftPointLimitReached.current = false;
-            setDraftPoints([]);
             setError(`A stroke can contain at most ${SKETCH_LIMITS.points.toLocaleString()} points. The incomplete stroke was discarded.`);
             return;
         }
-        setDraftPoints((previous) => {
-            if (previous.length === 0)
-                return previous;
-            const points = tool === "rectangle" && previous.length > 1
-                ? rectanglePoints(previous[0], previous.at(-1))
-                : previous;
-            const totalPoints = strokes.reduce((total, stroke) => total + stroke.points.length, 0) + points.length;
-            if (strokes.length >= SKETCH_LIMITS.strokes || totalPoints > SKETCH_LIMITS.points) {
-                setError("The sketch has reached its stroke limit. Undo a mark before drawing again.");
-                return [];
-            }
-            if (points.length < 2)
-                return [];
-            if (tool === "rectangle" && distance(previous[0], previous.at(-1)) < 1)
-                return [];
-            const stroke = {
-                id: `stroke-${Date.now()}-${Math.random().toString(36).slice(2)}`,
-                kind: tool === "rectangle" ? "rectangle" : "freehand",
-                width: SKETCH_STROKE_WIDTH,
-                color: SKETCH_STROKE_COLOR,
-                outlineColor: SKETCH_STROKE_OUTLINE,
-                points: points.map((point) => ({ ...point })),
-            };
-            setStrokes((current) => [...current, stroke]);
-            setRedoStrokes([]);
-            return [];
-        });
-    }
-    function undo() {
-        setStrokes((current) => {
-            const last = current.at(-1);
-            if (!last)
-                return current;
-            setRedoStrokes((redo) => [...redo, last]);
-            return current.slice(0, -1);
-        });
-    }
-    function redo() {
-        setRedoStrokes((current) => {
-            const last = current.at(-1);
-            if (!last)
-                return current;
-            setStrokes((existing) => [...existing, last]);
-            return current.slice(0, -1);
-        });
-    }
-    function onEditorKeyDown(event) {
-        const mod = event.metaKey || event.ctrlKey;
-        if (mod && event.key.toLowerCase() === "z") {
-            event.preventDefault();
-            event.stopPropagation();
-            if (event.shiftKey)
-                redo();
-            else
-                undo();
-        }
-        else if (mod && event.key.toLowerCase() === "y") {
-            event.preventDefault();
-            event.stopPropagation();
-            redo();
-        }
-    }
-    function onAnnotationKeyDown(event) {
-        if (event.key === "Enter") {
-            event.preventDefault();
-            commitActiveAnnotation();
-        }
-        else if (event.key === "Escape") {
-            event.preventDefault();
-            cancelActiveAnnotation();
+        if (previous.length === 0)
+            return;
+        const points = tool === "rectangle" && previous.length > 1
+            ? rectanglePoints(previous[0], previous.at(-1))
+            : previous;
+        const totalPoints = strokes.reduce((total, stroke) => total + stroke.points.length, 0) + points.length;
+        if (strokes.length >= SKETCH_LIMITS.strokes || totalPoints > SKETCH_LIMITS.points) {
+            setError("The sketch has reached its stroke limit. Erase a mark before drawing again.");
+            return;
         }
+        if (points.length < 2)
+            return;
+        if (tool === "rectangle" && distance(previous[0], previous.at(-1)) < 1)
+            return;
+        const stroke = {
+            id: `stroke-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+            kind: tool === "rectangle" ? "rectangle" : "freehand",
+            width: tool === "rectangle" ? SKETCH_RECTANGLE_STROKE_WIDTH : SKETCH_STROKE_WIDTH,
+            color: drawing.color.value,
+            outlineColor: SKETCH_STROKE_OUTLINE,
+            points: points.map((point) => ({ ...point })),
+        };
+        setHistory((current) => addSketchStroke(current, stroke));
     }
     async function done() {
         if (submitting)
             return;
-        const committedAnnotations = commitActiveAnnotation();
-        if (committedAnnotations === null)
-            return;
         const trimmedDescription = description.trim();
-        if (strokes.length === 0 && committedAnnotations.length === 0 && trimmedDescription === "") {
+        if (strokes.length === 0 && trimmedDescription === "") {
             setError("Add a mark or a short description before saving the sketch.");
             return;
         }
@@ -381,10 +262,6 @@ export function SketchOverlay({ open, hostElement, initialTool = "pen", onCancel
                     ...stroke,
                     points: stroke.points.map((point) => ({ ...point })),
                 })),
-                annotations: committedAnnotations.map((annotation) => ({
-                    ...annotation,
-                    point: { ...annotation.point },
-                })),
                 viewport: getSketchViewport(hostElement),
             });
         }
@@ -394,12 +271,11 @@ export function SketchOverlay({ open, hostElement, initialTool = "pen", onCancel
         }
     }
     const visibleStrokes = strokes.map((stroke) => visibleStroke(stroke, viewport));
-    const visibleAnnotations = annotations.map((annotation) => visibleAnnotation(annotation, viewport));
     const draftStroke = draftPoints.length > 0 ? {
         id: "draft",
         kind: tool === "rectangle" ? "rectangle" : "freehand",
-        width: SKETCH_STROKE_WIDTH,
-        color: SKETCH_STROKE_COLOR,
+        width: tool === "rectangle" ? SKETCH_RECTANGLE_STROKE_WIDTH : SKETCH_STROKE_WIDTH,
+        color: drawing.color.value,
         outlineColor: SKETCH_STROKE_OUTLINE,
         points: (tool === "rectangle" && draftPoints.length > 1
             ? rectanglePoints(draftPoints[0], draftPoints.at(-1))
@@ -411,10 +287,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, { 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: {
+            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", 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." }), selectTarget ? (_jsx("svg", { className: "sketch__target-surface", "aria-hidden": "true", style: { cursor: sketchCursor(tool) }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: finishPointer, onPointerCancel: finishPointer })) : null, _jsx("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", 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 })] })] }) }));
+                            }, 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: sketchCursor(tool) }, 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 }) }) }), _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/SketchPromptPanel.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement } from "react";
+import { type ReactElement } from "react";
 export interface SketchPromptPanelProps {
     readonly dataTest: string;
     readonly className?: string;

package/dist/inspector/sketch/SketchPromptPanel.js

@@ -1,8 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconAlertTriangleFilled } from "@tabler/icons-react";
+import { useRef } from "react";
 import { Button } from "../ui/Button.js";
 import { SKETCH_LIMITS } from "./model.js";
 /** The small note editor shared by a new live sketch and saved sketch layers. */
 export function SketchPromptPanel({ dataTest, className, description, error = null, disabled = false, saving = false, autoFocus = false, onDescriptionChange, onDone, onCancel, }) {
+    // Keep the last message while the banner collapses so its text does not vanish mid-animation.
+    const lastError = useRef(error);
+    if (error)
+        lastError.current = error;
+    const bannerMessage = error ?? lastError.current;
     function onKeyDown(event) {
         if (event.key === "Escape" && onCancel) {
             event.preventDefault();
@@ -14,5 +21,5 @@ export function SketchPromptPanel({ dataTest, className, description, error = nu
             void onDone();
         }
     }
-    return (_jsxs("section", { className: `sketch__prompt-panel${className ? ` ${className}` : ""}`, role: "dialog", "aria-label": "Sketch note", "data-test": dataTest, children: [_jsx("label", { className: "sketch__prompt-label sketch__sr-only", htmlFor: `${dataTest}-input`, children: "Sketch note" }), _jsx("textarea", { id: `${dataTest}-input`, className: "sketch__prompt-input", value: description, rows: 2, maxLength: SKETCH_LIMITS.description, placeholder: "Add a note to your sketch", "aria-label": "Sketch note", "data-test": `${dataTest}-input`, autoFocus: autoFocus, disabled: disabled, onChange: (event) => onDescriptionChange(event.target.value), onKeyDown: onKeyDown }), _jsxs("div", { className: "sketch__prompt-footer", children: [error ? _jsx("span", { className: "sketch__prompt-error", role: "status", children: error }) : _jsx("span", {}), _jsx(Button, { variant: "primary", size: "compact", type: "button", "data-test": `${dataTest}-done`, disabled: disabled || saving, onClick: () => { void onDone(); }, children: saving ? "Saving…" : "Done" })] })] }));
+    return (_jsxs("section", { className: `sketch__prompt-panel${className ? ` ${className}` : ""}`, role: "dialog", "aria-label": "Sketch note", "data-test": dataTest, children: [_jsx("div", { className: "sketch__prompt-error", "data-open": error ? "true" : "false", "aria-hidden": error ? undefined : true, children: _jsx("div", { className: "sketch__prompt-error-clip", children: _jsxs("div", { className: "sketch__prompt-error-body", role: "status", children: [_jsx(IconAlertTriangleFilled, { className: "sketch__prompt-error-icon", size: 16, "aria-hidden": "true" }), _jsx("span", { children: bannerMessage })] }) }) }), _jsx("label", { className: "sketch__prompt-label sketch__sr-only", htmlFor: `${dataTest}-input`, children: "Sketch note" }), _jsx("textarea", { id: `${dataTest}-input`, className: "sketch__prompt-input", value: description, rows: 2, maxLength: SKETCH_LIMITS.description, placeholder: "Add a note to your sketch", "aria-label": "Sketch note", "data-test": `${dataTest}-input`, autoFocus: autoFocus, disabled: disabled, onChange: (event) => onDescriptionChange(event.target.value), onKeyDown: onKeyDown }), _jsx("div", { className: "sketch__prompt-footer", children: _jsx(Button, { variant: "primary", size: "compact", type: "button", "data-test": `${dataTest}-done`, disabled: disabled || saving, onClick: () => { void onDone(); }, children: saving ? "Saving…" : "Done" }) })] }));
 }

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

@@ -0,0 +1,5 @@
+import type { ReactElement } from "react";
+import type { SketchQueueItem } from "./model.js";
+export declare function SketchThumbnail({ item }: {
+    readonly item: SketchQueueItem;
+}): ReactElement;

package/dist/inspector/sketch/SketchThumbnail.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+export function SketchThumbnail({ item }) {
+    const [url, setUrl] = useState(null);
+    const hasMarks = item.document.strokes.length > 0 || (item.document.annotations?.length ?? 0) > 0;
+    useEffect(() => {
+        if (!hasMarks) {
+            setUrl(null);
+            return;
+        }
+        if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function")
+            return;
+        const next = URL.createObjectURL(item.document.annotatedImage);
+        setUrl(next);
+        return () => URL.revokeObjectURL(next);
+    }, [hasMarks, item.document.annotatedImage]);
+    return hasMarks && url ? (_jsx("img", { className: "sketch-thumbnail", src: url, alt: "", "aria-hidden": "true" })) : (_jsx("span", { className: "sketch-thumbnail sketch-thumbnail--empty", "aria-hidden": "true" }));
+}

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

@@ -1,5 +1,4 @@
 import type { ReactElement } from "react";
-import { beginSketchCapture } from "./interaction.js";
 import { type SketchLiveDraft } from "./SketchOverlay.js";
 import type { CapturedSketch } from "./capture.js";
 import type { SketchStroke } from "./model.js";
@@ -9,5 +8,5 @@ export interface SketchWorkspaceProps {
 }
 export declare function projectLiveStrokes(draft: SketchLiveDraft, captured: CapturedSketch): SketchStroke[];
 export declare function SketchWorkspace({ hostElement, projectId }: SketchWorkspaceProps): ReactElement;
-export declare function startSketchCapture(hostElement: HTMLElement | null, initialTool?: Parameters<typeof beginSketchCapture>[0]): void;
+export declare function startSketchCapture(hostElement: HTMLElement | null): void;
 export declare function editSketch(sketchId: string): void;