nudge-ui 0.2.0 → 0.2.1

package/dist/inspector/sketch/SketchFrameOverlay.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { SketchSvgLayer } from "./freehand.js";
+import { useSketchStore } from "./store.js";
+import { getSketchScrollPosition } from "./capture.js";
+export function sketchRouteKey(url) {
+    try {
+        const parsed = new URL(url);
+        // These parameters belong to the inspector host, not to the application
+        // route. Removing them lets a sketch follow the same page in Focus mode,
+        // the canvas, and a direct editor launch.
+        parsed.searchParams.delete("__nudge_ui_direct");
+        parsed.searchParams.delete("nudge-ui");
+        // Hashes identify an in-document location, not a different sketch canvas.
+        // Keep saved marks attached when navigation changes only the anchor.
+        return `${parsed.origin}${parsed.pathname}${parsed.search}`;
+    }
+    catch {
+        return null;
+    }
+}
+function frameRoute(iframe, fallback) {
+    try {
+        return sketchRouteKey(iframe.contentWindow?.location.href ?? fallback);
+    }
+    catch {
+        return sketchRouteKey(fallback);
+    }
+}
+function sameFrame(document, iframe, cardUrl) {
+    const sketchRoute = sketchRouteKey(document.capture.url);
+    if (!sketchRoute)
+        return false;
+    return sketchRoute === frameRoute(iframe, 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 viewportWidth = Math.max(1, frameWindow.innerWidth || width);
+    const viewportHeight = Math.max(1, frameWindow.innerHeight || height);
+    const scroll = getSketchScrollPosition(frameWindow);
+    // Preserve the point's relative horizontal position when the responsive
+    // iframe changes width. Apply the scroll delta separately so horizontal
+    // page scrolling still moves the sketch with the content.
+    const captureLocalX = (point.x / imageWidth) * capture.viewportWidth;
+    const currentLocalX = (captureLocalX / Math.max(1, capture.viewportWidth)) * viewportWidth
+        - (scroll.x - capture.scrollX);
+    const pageY = capture.scrollY + (point.y / imageHeight) * capture.viewportHeight;
+    return {
+        x: (currentLocalX / viewportWidth) * width,
+        y: ((pageY - scroll.y) / viewportHeight) * height,
+    };
+}
+function visibleStroke(stroke, document, frameWindow, width, height) {
+    const captureScale = document.capture.viewportWidth / Math.max(1, document.imageWidth);
+    const currentScale = width / Math.max(1, frameWindow.innerWidth || width);
+    return {
+        ...stroke,
+        width: stroke.width * captureScale * currentScale,
+        points: stroke.points.map((point) => projectSketchPoint(point, document, frameWindow, width, height)),
+    };
+}
+export function SketchFrameOverlay({ iframe, cardUrl, ready }) {
+    const { items } = useSketchStore();
+    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]);
+    useEffect(() => {
+        if (!iframe || documents.length === 0)
+            return;
+        const frameWindow = iframe.contentWindow;
+        if (!frameWindow)
+            return;
+        const refresh = () => setRevision((value) => value + 1);
+        window.addEventListener("resize", refresh);
+        frameWindow.addEventListener("resize", refresh);
+        frameWindow.addEventListener("scroll", refresh, true);
+        const observer = typeof ResizeObserver === "undefined"
+            ? null
+            : new ResizeObserver(refresh);
+        observer?.observe(iframe);
+        return () => {
+            window.removeEventListener("resize", refresh);
+            frameWindow.removeEventListener("resize", refresh);
+            frameWindow.removeEventListener("scroll", refresh, true);
+            observer?.disconnect();
+        };
+    }, [documents.length, iframe]);
+    const width = iframe
+        ? Math.max(1, iframe.clientWidth || iframe.getBoundingClientRect().width)
+        : 1;
+    const height = iframe
+        ? Math.max(1, iframe.clientHeight || iframe.getBoundingClientRect().height)
+        : 1;
+    const frameWindow = iframe?.contentWindow ?? null;
+    const layers = useMemo(() => {
+        if (!iframe || !frameWindow || documents.length === 0) {
+            return {
+                strokes: [],
+                annotations: [],
+            };
+        }
+        const strokes = [];
+        const annotations = [];
+        for (const document of documents) {
+            strokes.push(...document.strokes.map((stroke) => visibleStroke(stroke, document, frameWindow, width, height)));
+            annotations.push(...(document.annotations ?? []).map((annotation) => ({
+                ...annotation,
+                point: projectSketchPoint(annotation.point, document, frameWindow, width, height),
+            })));
+        }
+        return { strokes, annotations };
+    }, [documents, frameWindow, height, iframe, revision, width]);
+    if (!iframe || documents.length === 0 || !frameWindow)
+        return null;
+    return (_jsx("svg", { className: "canvas-card__sketch-overlay", width: width, height: height, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", "aria-hidden": "true", "data-test": "canvas-sketch-overlay", children: _jsx(SketchSvgLayer, { strokes: layers.strokes, annotations: layers.annotations }) }));
+}

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

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

package/dist/inspector/sketch/SketchLayersPanel.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IconCheck, IconCopy, IconX } from "@tabler/icons-react";
+import { Button } from "../ui/Button.js";
+import { IconButton } from "../ui/IconButton.js";
+import { copyImageToClipboard } from "./raster.js";
+import { closeSketchNote } from "./sketchNote.js";
+import { removeSketch, useSketchStore } from "./store.js";
+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-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 }) {
+    const [copied, setCopied] = useState(false);
+    const [error, setError] = useState(null);
+    const busy = item.status === "dispatching" || item.status === "handing-off";
+    async function copyImage() {
+        setError(null);
+        try {
+            await copyImageToClipboard(item.document.annotatedImage);
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1500);
+        }
+        catch (copyError) {
+            setError(copyError instanceof Error ? copyError.message : "The sketch image could not be copied.");
+        }
+    }
+    async function deleteLayer() {
+        setError(null);
+        try {
+            if (!await removeSketch(item.document.id)) {
+                setError("This sketch is being sent and cannot be deleted yet.");
+            }
+            else {
+                closeSketchNote();
+            }
+        }
+        catch (deleteError) {
+            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
+                                ? _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] }));
+}
+export function SketchLayersPanel() {
+    const { items } = useSketchStore();
+    if (items.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" })] }));
+}

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

@@ -0,0 +1,19 @@
+import type { ReactElement } from "react";
+import { type SketchViewport } from "./capture.js";
+import { type SketchAnnotation, type SketchStroke } from "./model.js";
+import type { SketchEntryTool } from "./interaction.js";
+export interface SketchLiveDraft {
+    /** Kept for compatibility with sketches created with the original editor. */
+    readonly description: string;
+    readonly strokes: readonly SketchStroke[];
+    readonly annotations: readonly SketchAnnotation[];
+    readonly viewport: SketchViewport;
+}
+export interface SketchOverlayProps {
+    readonly open: boolean;
+    readonly hostElement: HTMLElement;
+    readonly initialTool?: SketchEntryTool;
+    readonly onCancel: () => void;
+    readonly onDone: (draft: SketchLiveDraft) => Promise<void>;
+}
+export declare function SketchOverlay({ open, hostElement, initialTool, onCancel, onDone }: SketchOverlayProps): ReactElement | null;

package/dist/inspector/sketch/SketchOverlay.js

@@ -0,0 +1,420 @@
+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 { 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;
+}
+function clamp(value, maximum) {
+    return Math.max(0, Math.min(maximum, value));
+}
+function pointFromEvent(event, canvas, viewport) {
+    const bounds = canvas.getBoundingClientRect();
+    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,
+    };
+}
+function distance(left, right) {
+    return Math.hypot(left.x - right.x, left.y - right.y);
+}
+function visibleStroke(stroke, viewport) {
+    return {
+        ...stroke,
+        points: stroke.points.map((point) => ({
+            x: point.x - viewport.scrollX,
+            y: point.y - viewport.scrollY,
+        })),
+    };
+}
+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);
+    const top = Math.min(start.y, end.y);
+    const bottom = Math.max(start.y, end.y);
+    return [
+        { x: left, y: top },
+        { x: right, y: top },
+        { x: right, y: bottom },
+        { x: left, y: bottom },
+        { 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 }) {
+    const inspectorOpen = useInspectorOpen();
+    const [viewport, setViewport] = useState(() => getSketchViewport(hostElement));
+    const [tool, setTool] = useState("pen");
+    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 [draftPoints, setDraftPoints] = useState([]);
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const svgRef = useRef(null);
+    const annotationInputRef = useRef(null);
+    const pointerId = useRef(null);
+    const moveState = useRef(null);
+    const draftPointLimitReached = useRef(false);
+    const activeAnnotation = annotations.find((annotation) => annotation.id === activeAnnotationId) ?? null;
+    useEffect(() => {
+        if (!open)
+            return;
+        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);
+        setDescription("");
+        setStrokes([]);
+        setRedoStrokes([]);
+        setAnnotations([]);
+        setActiveAnnotationId(null);
+        setActiveAnnotationOriginal(null);
+        setAnnotationDraft("");
+        setDraftPoints([]);
+        moveState.current = null;
+        setSubmitting(false);
+        setError(null);
+    }, [hostElement, initialTool, open]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const updateViewport = () => setViewport(getSketchViewport(hostElement));
+        window.addEventListener("resize", updateViewport);
+        window.addEventListener("scroll", updateViewport, true);
+        const frameWindow = typeof HTMLIFrameElement !== "undefined"
+            && hostElement instanceof HTMLIFrameElement
+            ? hostElement.contentWindow
+            : null;
+        frameWindow?.addEventListener("resize", updateViewport);
+        frameWindow?.addEventListener("scroll", updateViewport, true);
+        return () => {
+            window.removeEventListener("resize", updateViewport);
+            window.removeEventListener("scroll", updateViewport, true);
+            frameWindow?.removeEventListener("resize", updateViewport);
+            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));
+        }
+        setActiveAnnotationId(null);
+        setActiveAnnotationOriginal(null);
+        setAnnotationDraft("");
+        setError(null);
+    }
+    function onPointerDown(event) {
+        if (submitting || pointerId.current !== null || moveState.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.`);
+                return;
+            }
+            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;
+        }
+        event.preventDefault();
+        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;
+            }
+            return;
+        }
+        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.
+            }
+            return;
+        }
+        if (pointerId.current !== event.pointerId)
+            return;
+        pointerId.current = null;
+        try {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        catch {
+            // The pointer may already have been released by the browser.
+        }
+        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();
+        }
+    }
+    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 === "") {
+            setError("Add a mark or a short description before saving the sketch.");
+            return;
+        }
+        setSubmitting(true);
+        setError(null);
+        try {
+            await onDone({
+                description: trimmedDescription,
+                strokes: strokes.map((stroke) => ({
+                    ...stroke,
+                    points: stroke.points.map((point) => ({ ...point })),
+                })),
+                annotations: committedAnnotations.map((annotation) => ({
+                    ...annotation,
+                    point: { ...annotation.point },
+                })),
+                viewport: getSketchViewport(hostElement),
+            });
+        }
+        catch (doneError) {
+            setError(doneError instanceof Error ? doneError.message : "The sketch could not be saved.");
+            setSubmitting(false);
+        }
+    }
+    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,
+        outlineColor: SKETCH_STROKE_OUTLINE,
+        points: (tool === "rectangle" && draftPoints.length > 1
+            ? rectanglePoints(draftPoints[0], draftPoints.at(-1))
+            : draftPoints).map((point) => ({
+            x: point.x - viewport.scrollX,
+            y: point.y - viewport.scrollY,
+        })),
+    } : null;
+    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: {
+                                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 })] })] }) }));
+}

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

@@ -0,0 +1,15 @@
+import type { ReactElement } from "react";
+export interface SketchPromptPanelProps {
+    readonly dataTest: string;
+    readonly className?: string;
+    readonly description: string;
+    readonly error?: string | null;
+    readonly disabled?: boolean;
+    readonly saving?: boolean;
+    readonly autoFocus?: boolean;
+    readonly onDescriptionChange: (value: string) => void;
+    readonly onDone: () => void | Promise<void>;
+    readonly onCancel?: () => void;
+}
+/** The small note editor shared by a new live sketch and saved sketch layers. */
+export declare function SketchPromptPanel({ dataTest, className, description, error, disabled, saving, autoFocus, onDescriptionChange, onDone, onCancel, }: SketchPromptPanelProps): ReactElement;

package/dist/inspector/sketch/SketchPromptPanel.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, }) {
+    function onKeyDown(event) {
+        if (event.key === "Escape" && onCancel) {
+            event.preventDefault();
+            onCancel();
+            return;
+        }
+        if (event.key === "Enter" && !event.shiftKey && !disabled && !saving) {
+            event.preventDefault();
+            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" })] })] }));
+}