nudge-ui 0.2.0 → 0.2.2

package/dist/inspector/sketch/SketchEditor.js

@@ -0,0 +1,402 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+import { IconArrowsMove, IconCheck, IconMessageCirclePlus, IconPencil, IconRectangle, IconX, } from "@tabler/icons-react";
+import { Button } from "../ui/Button.js";
+import { IconButton } from "../ui/IconButton.js";
+import { StatusCallout } from "../ui/StatusCallout.js";
+import { renderAnnotatedPng } from "./raster.js";
+import { SketchSvgLayer } from "./freehand.js";
+import { findSketchElementAt, translateSketchAnnotation, translateSketchStroke, } from "./geometry.js";
+import { SKETCH_LIMITS, SKETCH_ANNOTATION_RADIUS, SKETCH_STROKE_COLOR, SKETCH_STROKE_OUTLINE, SKETCH_STROKE_WIDTH, } from "./model.js";
+function portalContainer() {
+    return typeof document !== "undefined"
+        ? document.getElementById("nudge-ui-root")?.shadowRoot ?? document.body
+        : null;
+}
+function objectUrl(blob) {
+    if (!blob || typeof URL === "undefined" || typeof URL.createObjectURL !== "function")
+        return null;
+    return URL.createObjectURL(blob);
+}
+function clamp(value, maximum) {
+    return Math.max(0, Math.min(maximum, value));
+}
+function pointFromEvent(event, svg, width, height) {
+    const bounds = svg.getBoundingClientRect();
+    return {
+        x: clamp(((event.clientX - bounds.left) / Math.max(1, bounds.width)) * width, width),
+        y: clamp(((event.clientY - bounds.top) / Math.max(1, bounds.height)) * height, height),
+    };
+}
+function distance(left, right) {
+    return Math.hypot(left.x - right.x, left.y - right.y);
+}
+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 },
+    ];
+}
+export function SketchEditor({ open, document: sketchDocument, captured, onCancel, onSave }) {
+    const image = captured?.originalImage ?? sketchDocument?.originalImage ?? null;
+    const imageWidth = captured?.imageWidth ?? sketchDocument?.imageWidth ?? 0;
+    const imageHeight = captured?.imageHeight ?? sketchDocument?.imageHeight ?? 0;
+    const capture = captured?.capture ?? sketchDocument?.capture ?? null;
+    const [description, setDescription] = useState("");
+    const [tool, setTool] = useState("pen");
+    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 [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const imageUrl = useMemo(() => objectUrl(image), [image]);
+    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;
+        setDescription(sketchDocument?.description ?? "");
+        setTool("pen");
+        setStrokes(sketchDocument ? sketchDocument.strokes.map((stroke) => ({ ...stroke, points: stroke.points.map((point) => ({ ...point })) })) : []);
+        setRedoStrokes([]);
+        setAnnotations(sketchDocument?.annotations?.map((annotation) => ({
+            ...annotation,
+            point: { ...annotation.point },
+        })) ?? []);
+        setActiveAnnotationId(null);
+        setActiveAnnotationOriginal(null);
+        setAnnotationDraft("");
+        setDraftPoints([]);
+        moveState.current = null;
+        setError(null);
+        setSaving(false);
+    }, [open, sketchDocument?.id, sketchDocument?.revision]);
+    useEffect(() => {
+        if (activeAnnotationId !== null)
+            annotationInputRef.current?.focus();
+    }, [activeAnnotationId]);
+    useEffect(() => {
+        if (open)
+            svgRef.current?.focus();
+    }, [open]);
+    useEffect(() => {
+        return () => {
+            if (imageUrl && typeof URL !== "undefined")
+                URL.revokeObjectURL(imageUrl);
+        };
+    }, [imageUrl]);
+    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 nextDescription = annotationDraft.trim();
+        if (!nextDescription) {
+            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: nextDescription }
+            : 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 selectTool(nextTool) {
+        if (activeAnnotationId !== null && !commitActiveAnnotation())
+            return;
+        setTool(nextTool);
+        setError(null);
+    }
+    function annotationEditorStyle(annotation) {
+        const bounds = svgRef.current?.getBoundingClientRect();
+        const scaleX = (bounds?.width ?? imageWidth) / Math.max(1, imageWidth);
+        const scaleY = (bounds?.height ?? imageHeight) / Math.max(1, imageHeight);
+        const width = 280;
+        const height = 52;
+        const availableWidth = bounds?.width ?? imageWidth;
+        const availableHeight = bounds?.height ?? imageHeight;
+        return {
+            left: clamp(annotation.point.x * scaleX + SKETCH_ANNOTATION_RADIUS * scaleX + 8, Math.max(8, availableWidth - width - 8)),
+            top: clamp(annotation.point.y * scaleY + SKETCH_ANNOTATION_RADIUS * scaleY + 8, Math.max(8, availableHeight - height - 8)),
+        };
+    }
+    function onPointerDown(event) {
+        if (saving || !imageWidth || !imageHeight || pointerId.current !== null || moveState.current !== null)
+            return;
+        const point = pointFromEvent(event, event.currentTarget, imageWidth, imageHeight);
+        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, imageWidth, imageHeight);
+            const delta = {
+                x: point.x - activeMove.lastPoint.x,
+                y: point.y - activeMove.lastPoint.y,
+            };
+            if (delta.x !== 0 || delta.y !== 0) {
+                const bounds = { width: imageWidth, height: imageHeight };
+                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, imageWidth, imageHeight);
+        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 save() {
+        if (!image || !capture || saving)
+            return;
+        const committedAnnotations = commitActiveAnnotation();
+        if (committedAnnotations === null)
+            return;
+        if (strokes.length === 0 && committedAnnotations.length === 0 && description.trim() === "") {
+            setError("Add a mark or a short description before saving the sketch.");
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        try {
+            const rendered = await renderAnnotatedPng(image, imageWidth, imageHeight, strokes, committedAnnotations);
+            await onSave({
+                ...(sketchDocument ? { id: sketchDocument.id } : {}),
+                capture: {
+                    ...capture,
+                    imageWidth: rendered.width,
+                    imageHeight: rendered.height,
+                },
+                description: description.trim(),
+                strokes,
+                annotations: committedAnnotations,
+                imageWidth: rendered.width,
+                imageHeight: rendered.height,
+                originalImage: image,
+                annotatedImage: rendered.blob,
+            });
+        }
+        catch (saveError) {
+            setError(saveError instanceof Error ? saveError.message : "The sketch could not be saved.");
+            setSaving(false);
+        }
+    }
+    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) => ({ ...point })),
+        }
+        : null;
+    if (!open || !image || !capture)
+        return null;
+    return (_jsx(Dialog.Root, { open: open, modal: false, disablePointerDismissal: true, onOpenChange: (nextOpen) => { if (!nextOpen && !saving)
+            onCancel(); }, children: _jsxs(Dialog.Portal, { container: portalContainer(), children: [_jsx(Dialog.Backdrop, { className: "sketch__backdrop sketch__editor-backdrop", "data-test": "sketch-editor-backdrop" }), _jsxs(Dialog.Popup, { className: "sketch__popup", "data-test": "sketch-editor", initialFocus: false, onKeyDown: onEditorKeyDown, children: [_jsx(Dialog.Title, { className: "sketch__title sketch__sr-only", children: "Annotate viewport" }), _jsx(Dialog.Description, { className: "sketch__description sketch__sr-only", children: "Draw directly over the captured UI. Select Annotate to label an area with a numbered note." }), _jsx("div", { className: "sketch__canvas-frame", children: _jsxs("div", { className: "sketch__image-wrap", children: [imageUrl ? _jsx("img", { className: "sketch__image", src: imageUrl, alt: "Captured viewport", draggable: false }) : null, _jsx("svg", { ref: svgRef, className: `sketch__canvas sketch__canvas--${tool}`, width: imageWidth, height: imageHeight, viewBox: `0 0 ${imageWidth} ${imageHeight}`, preserveAspectRatio: "none", pointerEvents: "all", tabIndex: 0, "aria-label": "Sketch over the captured viewport", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: finishPointer, onPointerCancel: finishPointer, children: _jsx(SketchSvgLayer, { strokes: draftStroke ? [...strokes, draftStroke] : strokes, annotations: annotations }) }), activeAnnotation ? (_jsxs("div", { className: "sketch__annotation-editor", role: "dialog", "aria-label": `Annotation ${activeAnnotation.number}`, style: annotationEditorStyle(activeAnnotation), children: [_jsxs("label", { className: "sketch__sr-only", htmlFor: "sketch-editor-annotation-description", children: ["Annotation ", activeAnnotation.number, " description"] }), _jsx("input", { ref: annotationInputRef, id: "sketch-editor-annotation-description", value: annotationDraft, maxLength: SKETCH_LIMITS.description, placeholder: "Describe this area\u2026", autoComplete: "off", "data-test": "sketch-editor-annotation-description", onChange: (event) => setAnnotationDraft(event.target.value), onKeyDown: onAnnotationKeyDown }), _jsx(IconButton, { label: "Cancel annotation", variant: "quiet", size: "compact", "data-test": "sketch-editor-annotation-cancel", onClick: cancelActiveAnnotation, children: _jsx(IconX, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }), _jsxs(Button, { variant: "primary", size: "compact", type: "button", "data-test": "sketch-editor-annotation-save", onClick: () => { commitActiveAnnotation(); }, children: [_jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" }), "Add"] })] })) : null] }) }), _jsxs("div", { className: "sketch__floating-panel", children: [_jsxs("div", { className: "sketch__toolbar", role: "toolbar", "aria-label": "Sketch tools", children: [_jsx(IconButton, { label: "Move", title: "Move", variant: "quiet", "aria-pressed": tool === "move", "data-active": tool === "move", "data-test": "sketch-move", onClick: () => selectTool("move"), disabled: saving, children: _jsx(IconArrowsMove, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }), _jsx(IconButton, { label: "Pen", title: "Pen", variant: "quiet", "aria-pressed": tool === "pen", "data-active": tool === "pen", "data-test": "sketch-pen", onClick: () => selectTool("pen"), disabled: saving, children: _jsx(IconPencil, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }), _jsx(IconButton, { label: "Rectangle", title: "Rectangle", variant: "quiet", "aria-pressed": tool === "rectangle", "data-active": tool === "rectangle", "data-test": "sketch-rectangle", onClick: () => selectTool("rectangle"), disabled: saving, children: _jsx(IconRectangle, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }), _jsx(IconButton, { label: "Annotate", title: "Annotate", variant: "quiet", "aria-pressed": tool === "annotate", "data-active": tool === "annotate", "data-test": "sketch-annotate", onClick: () => selectTool("annotate"), disabled: saving, children: _jsx(IconMessageCirclePlus, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }), _jsx("span", { className: "sketch__toolbar-divider", "aria-hidden": "true" }), _jsx(Button, { variant: "quiet", type: "button", "data-test": "sketch-cancel", onClick: onCancel, disabled: saving, children: "Cancel" }), _jsxs(Button, { variant: "primary", type: "button", "data-test": "sketch-done", onClick: () => void save(), disabled: saving || (strokes.length === 0 && annotations.length === 0 && description.trim() === ""), children: [_jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" }), saving ? "Saving…" : "Done"] })] }), error ? _jsx(StatusCallout, { tone: "danger", "data-test": "sketch-editor-error", children: error }) : null] })] })] }) }));
+}

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

@@ -0,0 +1,4 @@
+import type { ReactElement } from "react";
+export declare function SketchEntryButton({ hostElement }: {
+    readonly hostElement: HTMLElement | null;
+}): ReactElement;

package/dist/inspector/sketch/SketchEntryButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconPencil } from "@tabler/icons-react";
+import { Button } from "../ui/Button.js";
+import { isInlineTextEditingActive } from "../inline-text/inlineTextEditor.js";
+import { useSketchInteractionActive } from "./interaction.js";
+import { startSketchCapture } from "./SketchWorkspace.js";
+export function SketchEntryButton({ hostElement }) {
+    const active = useSketchInteractionActive();
+    const disabled = active || isInlineTextEditingActive();
+    return (_jsxs(Button, { variant: "quiet", size: "compact", className: "panel__sketch-button", type: "button", "data-test": "sketch-entry", "aria-label": "Sketch viewport", title: "Sketch viewport", disabled: disabled || !hostElement, onClick: () => startSketchCapture(hostElement), children: [_jsx(IconPencil, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }), _jsx("span", { className: "panel__sketch-label", children: "Sketch" })] }));
+}

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

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

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;