nudge-ui 0.2.0 → 0.2.1

package/dist/inspector/shell/shortcuts.js

@@ -14,6 +14,12 @@ function deeplyFocusedElement() {
 export function isEditableEvent(event) {
     return event.composedPath().some(isEditableTarget) || isEditableTarget(deeplyFocusedElement());
 }
+export const SEND_PROMPT_HOTKEY_EVENT = "nudge-ui-send-prompt-hotkey";
+export function isSendPromptShortcut(event) {
+    if (event.repeat || event.altKey || isEditableEvent(event))
+        return false;
+    return event.shiftKey && !event.metaKey && !event.ctrlKey && event.code === "KeyS";
+}
 export function isInspectorToggleShortcut(event) {
     if (isEditableEvent(event))
         return false;
@@ -23,3 +29,12 @@ export function isInspectorToggleShortcut(event) {
         return true;
     return event.altKey && !event.shiftKey && !event.ctrlKey && !event.metaKey && event.code === "KeyI";
 }
+export function isOriginalPreviewShortcut(event) {
+    if (event.repeat)
+        return false;
+    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey)
+        return false;
+    if (event.code !== "Backslash")
+        return false;
+    return !isEditableEvent(event);
+}

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

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

package/dist/inspector/sketch/SketchChanges.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IconCheck, IconCopy, IconDownload, IconEdit, IconRefresh, IconTrash } from "@tabler/icons-react";
+import { Button } from "../ui/Button.js";
+import { StatusCallout } from "../ui/StatusCallout.js";
+import { copyImageToClipboard, downloadImage } from "./raster.js";
+import { editSketch } from "./SketchWorkspace.js";
+import { removeSketch, requeueSketch, useSketchStore } from "./store.js";
+import {} from "./model.js";
+function routeLabel(url) {
+    try {
+        const parsed = new URL(url);
+        return `${parsed.pathname}${parsed.search}` || "/";
+    }
+    catch {
+        return url;
+    }
+}
+function statusLabel(status) {
+    switch (status) {
+        case "dispatching": return "Sending";
+        case "handing-off": return "Handing off";
+        case "needs-review": return "Needs review";
+        case "unknown": return "Unknown";
+        default: return "Pending";
+    }
+}
+function Thumbnail({ item }) {
+    const [url, setUrl] = useState(null);
+    useEffect(() => {
+        if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function")
+            return;
+        const next = URL.createObjectURL(item.document.annotatedImage);
+        setUrl(next);
+        return () => URL.revokeObjectURL(next);
+    }, [item.document.annotatedImage]);
+    return url ? _jsx("img", { className: "sketch-change__thumbnail", src: url, alt: "Sketch annotation", "data-test": "sketch-thumbnail" }) : _jsx("div", { className: "sketch-change__thumbnail sketch-change__thumbnail--empty", "data-test": "sketch-thumbnail" });
+}
+function SketchRow({ item }) {
+    const [actionError, setActionError] = useState(null);
+    const busy = item.status === "dispatching" || item.status === "handing-off";
+    const canReview = item.status === "needs-review" || item.status === "unknown";
+    const document = item.document;
+    async function copyImage() {
+        setActionError(null);
+        try {
+            await copyImageToClipboard(document.annotatedImage);
+        }
+        catch (error) {
+            setActionError(error instanceof Error ? error.message : "The image could not be copied.");
+        }
+    }
+    async function runQueueAction(action, failureMessage) {
+        setActionError(null);
+        try {
+            if (!await action())
+                setActionError(failureMessage);
+        }
+        catch (error) {
+            setActionError(error instanceof Error ? error.message : failureMessage);
+        }
+    }
+    return (_jsxs("div", { className: "sketch-change__row", "data-test": "sketch-row", "data-sketch-id": document.id, children: [_jsx(Thumbnail, { item: item }), _jsxs("div", { className: "sketch-change__body", children: [_jsxs("div", { className: "sketch-change__heading", children: [_jsx("span", { className: "sketch-change__name", children: document.filename }), _jsx("span", { className: "sketch-change__status", "data-test": "sketch-status", "data-status": item.status, children: statusLabel(item.status) })] }), _jsxs("span", { className: "sketch-change__route", children: [routeLabel(document.capture.url), " \u00B7 revision ", document.revision] }), document.description ? _jsx("p", { className: "sketch-change__description", children: document.description }) : null, document.annotations?.length ? (_jsx("ol", { className: "sketch-change__annotations", children: document.annotations.map((annotation) => (_jsxs("li", { children: [_jsxs("span", { children: [annotation.number, "."] }), " ", annotation.description] }, annotation.id))) })) : null, _jsxs("div", { className: "sketch-change__actions", children: [_jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-copy-image", onClick: () => void copyImage(), children: [_jsx(IconCopy, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " Copy image"] }), _jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-download-image", onClick: () => downloadImage(document.annotatedImage, document.filename), children: [_jsx(IconDownload, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " Download"] }), _jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-reopen", onClick: () => editSketch(document.id), disabled: busy, children: [_jsx(IconEdit, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " Reopen"] }), canReview ? (_jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-requeue", onClick: () => void runQueueAction(() => requeueSketch(document.id), "The sketch could not be requeued."), disabled: busy, children: [_jsx(IconRefresh, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " Requeue"] })) : null, _jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-mark-done", onClick: () => void runQueueAction(() => removeSketch(document.id), "The sketch could not be removed yet."), disabled: busy, children: [canReview ? _jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" }) : _jsx(IconTrash, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " ", canReview ? "Mark done" : "Delete"] })] }), actionError ? _jsx("span", { className: "sketch-change__error", role: "status", children: actionError }) : null] })] }));
+}
+export function SketchChanges() {
+    const store = useSketchStore();
+    const items = store.items;
+    const hasError = store.error !== null;
+    if (items.length === 0 && !hasError)
+        return null;
+    return (_jsxs("section", { className: "sketch-change", "data-test": "sketches", children: [_jsxs("div", { className: "sketch-change__title", children: ["Sketch annotations ", _jsx("span", { children: items.length })] }), store.error ? _jsx(StatusCallout, { tone: "warning", "data-test": "sketch-storage-error", children: store.error }) : null, items.length > 0 ? items.map((item) => _jsx(SketchRow, { item: item }, `${item.document.id}:${item.document.revision}`)) : (_jsx(StatusCallout, { tone: "warning", children: "Saved sketches need recovery. Reload the page to try again." }))] }));
+}

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

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react";
+import { type SketchAnnotation, type SketchDocument, type SketchStroke } from "./model.js";
+import type { CapturedSketch } from "./capture.js";
+export interface SketchEditorProps {
+    readonly open: boolean;
+    readonly document: SketchDocument | null;
+    readonly captured: CapturedSketch | null;
+    readonly onCancel: () => void;
+    readonly onSave: (input: {
+        readonly id?: string;
+        readonly capture: SketchDocument["capture"];
+        readonly description: string;
+        readonly strokes: readonly SketchStroke[];
+        readonly annotations?: readonly SketchAnnotation[];
+        readonly imageWidth: number;
+        readonly imageHeight: number;
+        readonly originalImage: Blob;
+        readonly annotatedImage: Blob;
+    }) => Promise<void>;
+}
+export declare function SketchEditor({ open, document: sketchDocument, captured, onCancel, onSave }: SketchEditorProps): ReactElement | null;

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 {};