nudge-ui 0.2.0 → 0.2.2

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" })] })] }));
+}

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

@@ -0,0 +1,13 @@
+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";
+export interface SketchWorkspaceProps {
+    readonly hostElement: HTMLElement | null;
+    readonly projectId: string;
+}
+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 editSketch(sketchId: string): void;

package/dist/inspector/sketch/SketchWorkspace.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { renderAnnotatedPng } from "./raster.js";
+import { closeSketchEditor, completeSketchCapture, beginSketchCapture, cancelSketchInteraction, openSketchEditor, useSketchInteraction } from "./interaction.js";
+import { initializeSketchStore, saveSketch, useSketchStore } from "./store.js";
+import { clearSketchClipboardHandoff } from "./handoff.js";
+import { SketchEditor } from "./SketchEditor.js";
+import { SketchOverlay } from "./SketchOverlay.js";
+import { closeSketchNote, useSketchNote } from "./sketchNote.js";
+import { SketchPromptPanel } from "./SketchPromptPanel.js";
+function clamp(value, maximum) {
+    return Math.max(0, Math.min(maximum, value));
+}
+export function projectLiveStrokes(draft, captured) {
+    const scaleX = captured.imageWidth / Math.max(1, draft.viewport.width);
+    const scaleY = captured.imageHeight / Math.max(1, draft.viewport.height);
+    const captureScrollX = captured.capture.scrollX;
+    const captureScrollY = captured.capture.scrollY;
+    const visibleRight = captureScrollX + draft.viewport.width;
+    const visibleBottom = captureScrollY + draft.viewport.height;
+    return draft.strokes.flatMap((stroke) => {
+        const visiblePoints = stroke.points.filter((point) => point.x >= captureScrollX
+            && point.x <= visibleRight
+            && point.y >= captureScrollY
+            && point.y <= visibleBottom);
+        if (visiblePoints.length === 0)
+            return [];
+        return [{
+                ...stroke,
+                width: stroke.width * Math.max(scaleX, scaleY),
+                points: visiblePoints.map((point) => ({
+                    x: clamp((point.x - captureScrollX) * scaleX, captured.imageWidth),
+                    y: clamp((point.y - captureScrollY) * scaleY, captured.imageHeight),
+                })),
+            }];
+    });
+}
+function projectLiveAnnotations(draft, captured) {
+    const scaleX = captured.imageWidth / Math.max(1, draft.viewport.width);
+    const scaleY = captured.imageHeight / Math.max(1, draft.viewport.height);
+    const captureScrollX = captured.capture.scrollX;
+    const captureScrollY = captured.capture.scrollY;
+    const visibleRight = captureScrollX + draft.viewport.width;
+    const visibleBottom = captureScrollY + draft.viewport.height;
+    return draft.annotations
+        .filter((annotation) => annotation.point.x >= captureScrollX
+        && annotation.point.x <= visibleRight
+        && annotation.point.y >= captureScrollY
+        && annotation.point.y <= visibleBottom)
+        .map((annotation) => ({
+        ...annotation,
+        point: {
+            x: clamp((annotation.point.x - captureScrollX) * scaleX, captured.imageWidth),
+            y: clamp((annotation.point.y - captureScrollY) * scaleY, captured.imageHeight),
+        },
+    }));
+}
+export function SketchWorkspace({ hostElement, projectId }) {
+    const interaction = useSketchInteraction();
+    const store = useSketchStore();
+    const note = useSketchNote();
+    const editingDocument = interaction.editingId
+        ? store.items.find((item) => item.document.id === interaction.editingId)?.document ?? null
+        : null;
+    // IndexedDB hydration is deliberately independent from the localStorage
+    // session schema. A failed hydration leaves the inspector usable and gives
+    // the Changes log a recovery message.
+    useEffect(() => {
+        clearSketchClipboardHandoff();
+        closeSketchNote();
+        void initializeSketchStore(projectId).catch(() => undefined);
+    }, [projectId]);
+    const liveOpen = interaction.editingId === null && interaction.captureState !== "idle";
+    const editorOpen = interaction.editingId !== null;
+    const noteDocument = note.sketchId
+        ? store.items.find((item) => item.document.id === note.sketchId)?.document ?? null
+        : null;
+    async function save(input) {
+        await saveSketch(input);
+        closeSketchEditor();
+    }
+    async function saveLive(draft) {
+        if (!hostElement)
+            throw new Error("The inspector is no longer available.");
+        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,
+            },
+            description: draft.description,
+            strokes,
+            annotations,
+            imageWidth: rendered.width,
+            imageHeight: rendered.height,
+            originalImage: captured.originalImage,
+            annotatedImage: rendered.blob,
+        });
+    }
+    async function saveNote(description) {
+        if (!noteDocument)
+            return;
+        await saveSketch({
+            id: noteDocument.id,
+            capture: noteDocument.capture,
+            description: description.trim(),
+            strokes: noteDocument.strokes,
+            annotations: noteDocument.annotations ?? [],
+            imageWidth: noteDocument.imageWidth,
+            imageHeight: noteDocument.imageHeight,
+            originalImage: noteDocument.originalImage,
+            annotatedImage: noteDocument.annotatedImage,
+        });
+        closeSketchNote();
+    }
+    return (_jsxs(_Fragment, { children: [hostElement ? (_jsx(SketchOverlay, { open: liveOpen, hostElement: hostElement, initialTool: interaction.initialTool, onCancel: cancelSketchInteraction, onDone: saveLive })) : null, _jsx(SketchEditor, { open: editorOpen, document: editingDocument, captured: interaction.captured, onCancel: cancelSketchInteraction, onSave: save }), noteDocument ? (_jsx(SavedSketchNote, { document: noteDocument, onSave: saveNote, onCancel: closeSketchNote })) : null] }));
+}
+function SavedSketchNote({ document, onSave, onCancel, }) {
+    const [description, setDescription] = useState(document.description);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        setDescription(document.description);
+        setError(null);
+    }, [document.id, document.revision, document.description]);
+    async function done() {
+        if (saving)
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            await onSave(description);
+        }
+        catch (saveError) {
+            setError(saveError instanceof Error ? saveError.message : "The sketch note could not be saved.");
+            setSaving(false);
+        }
+    }
+    return (_jsx(SketchPromptPanel, { dataTest: "sketch-note-prompt", className: "sketch__saved-note-panel", description: description, error: error, saving: saving, autoFocus: true, onDescriptionChange: setDescription, onDone: done, onCancel: onCancel }));
+}
+export function startSketchCapture(hostElement, initialTool = "pen") {
+    if (!hostElement)
+        return;
+    beginSketchCapture(initialTool);
+}
+export function editSketch(sketchId) {
+    openSketchEditor(sketchId);
+}