nudge-ui 0.2.4 → 0.2.5

package/dist/inspector/sketch/SketchWorkspace.js

@@ -1,15 +1,37 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { assignSketchToDraft } from "../drafts/store.js";
-import { getActiveDraftChanges } from "../changes/draftChanges.js";
+import { canvasFrameHost } from "../canvas/canvasFrame.js";
+import { getRegisteredFrames } from "../canvas/projection.js";
+import { setSelectedElement } from "../selection/selectionStore.js";
+import { selectCard } from "../canvas/canvasStore.js";
+import { activateDraftForCard, assignSketchToDraft, getActiveDraftChanges } from "../drafts/store.js";
 import { useEffect, useState } from "react";
 import { renderAnnotatedPng } from "./raster.js";
+import { sketchFrameHeading } from "./frameHeading.js";
 import { closeSketchEditor, completeSketchCapture, beginSketchCapture, cancelSketchInteraction, openSketchEditor, useSketchInteraction } from "./interaction.js";
-import { initializeSketchStore, saveSketch, useSketchStore } from "./store.js";
+import { recordCanvasChange } from "../workspace/timeline.js";
+import { getSketch, initializeSketchStore, removeSketch, saveSketch, useSketchStore } from "./store.js";
 import { clearSketchClipboardHandoff } from "./handoff.js";
+import { copySketchImage, saveAndCopySketch } from "./copySketch.js";
 import { SketchEditor } from "./SketchEditor.js";
 import { SketchOverlay } from "./SketchOverlay.js";
 import { closeSketchNote, useSketchNote } from "./sketchNote.js";
 import { SketchPromptPanel } from "./SketchPromptPanel.js";
+/** Makes saving a new sketch one step in the session undo history. */
+function recordSketchCreation(document, owner) {
+    let snapshot = document;
+    recordCanvasChange({
+        cardIds: [],
+        undo: () => {
+            snapshot = getSketch(document.id)?.document ?? snapshot;
+            void removeSketch(document.id);
+        },
+        redo: () => {
+            void saveSketch({ ...snapshot, annotations: snapshot.annotations ?? [] })
+                .then((saved) => assignSketchToDraft(owner, saved.id));
+        },
+        dispose: () => undefined,
+    });
+}
 function clamp(value, maximum) {
     return Math.max(0, Math.min(maximum, value));
 }
@@ -37,26 +59,6 @@ export function projectLiveStrokes(draft, captured) {
             }];
     });
 }
-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();
@@ -77,39 +79,71 @@ export function SketchWorkspace({ hostElement, projectId }) {
     const noteDocument = note.sketchId
         ? store.items.find((item) => item.document.id === note.sketchId)?.document ?? null
         : null;
+    function selectTarget(point, lockedTarget) {
+        for (const [cardId, frame] of getRegisteredFrames()) {
+            const target = canvasFrameHost(frame);
+            if (!target || !frame.isConnected || getComputedStyle(target).visibility === "hidden")
+                continue;
+            const bounds = frame.getBoundingClientRect();
+            if (bounds.width <= 0 || bounds.height <= 0)
+                continue;
+            if (point.x < bounds.left || point.x > bounds.right || point.y < bounds.top || point.y > bounds.bottom)
+                continue;
+            if (lockedTarget && target !== lockedTarget)
+                return null;
+            if (target !== hostElement) {
+                setSelectedElement(null);
+                selectCard(cardId);
+                activateDraftForCard(cardId);
+                beginSketchCapture();
+            }
+            return target;
+        }
+        return null;
+    }
     async function save(input) {
         const owner = interaction.draftId ?? getActiveDraftChanges().draftId;
         const saved = await saveSketch(input);
-        if (!input.id)
+        if (!input.id) {
             assignSketchToDraft(owner, saved.id);
+            recordSketchCreation(saved, owner);
+        }
         closeSketchEditor();
+        void copySketchImage(input.annotatedImage);
+    }
+    function saveLive(draft) {
+        return saveAndCopySketch(() => saveLiveSketch(draft));
     }
-    async function saveLive(draft) {
+    async function saveLiveSketch(draft) {
         if (!hostElement)
             throw new Error("The inspector is no longer available.");
         const owner = interaction.draftId ?? getActiveDraftChanges().draftId;
         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, draft.description);
+        const rendered = await renderAnnotatedPng(captured.originalImage, captured.imageWidth, captured.imageHeight, strokes, [], draft.description, sketchFrameHeading(captured.capture.url));
         const saved = await saveSketch({
             capture: captured.capture,
             description: draft.description,
             strokes,
-            annotations,
+            annotations: [],
             imageWidth: rendered.width,
             imageHeight: rendered.height,
             originalImage: captured.originalImage,
             annotatedImage: rendered.blob,
         });
         assignSketchToDraft(owner, saved.id);
+        recordSketchCreation(saved, owner);
         closeSketchEditor();
+        return rendered.blob;
     }
-    async function saveNote(description) {
+    function saveNote(description) {
         if (!noteDocument)
-            return;
+            return Promise.resolve();
+        return saveAndCopySketch(() => saveNoteSketch(noteDocument, description));
+    }
+    async function saveNoteSketch(noteDocument, description) {
         const nextDescription = description.trim();
-        const rendered = await renderAnnotatedPng(noteDocument.originalImage, noteDocument.capture.imageWidth, noteDocument.capture.imageHeight, noteDocument.strokes, noteDocument.annotations ?? [], nextDescription);
+        const rendered = await renderAnnotatedPng(noteDocument.originalImage, noteDocument.capture.imageWidth, noteDocument.capture.imageHeight, noteDocument.strokes, noteDocument.annotations ?? [], nextDescription, sketchFrameHeading(noteDocument.capture.url));
         await saveSketch({
             id: noteDocument.id,
             capture: noteDocument.capture,
@@ -122,8 +156,9 @@ export function SketchWorkspace({ hostElement, projectId }) {
             annotatedImage: rendered.blob,
         });
         closeSketchNote();
+        return rendered.blob;
     }
-    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] }));
+    return (_jsxs(_Fragment, { children: [hostElement ? (_jsx(SketchOverlay, { open: liveOpen, hostElement: hostElement, selectTarget: selectTarget, 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);
@@ -148,10 +183,10 @@ function SavedSketchNote({ document, onSave, onCancel, }) {
     }
     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") {
+export function startSketchCapture(hostElement) {
     if (!hostElement)
         return;
-    beginSketchCapture(initialTool);
+    beginSketchCapture();
 }
 export function editSketch(sketchId) {
     openSketchEditor(sketchId);

package/dist/inspector/sketch/capture.js

@@ -2,6 +2,7 @@ import { domToBlob } from "modern-screenshot";
 import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
 import { SKETCH_LIMITS } from "./model.js";
 import { getPngDimensions } from "./raster.js";
+import { prepareSketchVideoFrames } from "./videoFrames.js";
 const MEDIA_LOAD_TIMEOUT_MS = 500;
 const FONT_READY_TIMEOUT_MS = 2_000;
 const DEFAULT_PROCESSING_TIMEOUT_MS = 20_000;
@@ -258,7 +259,17 @@ async function captureDomFrame(options, signal) {
     let scale = viewport.scale;
     for (let attempt = 0; attempt < 7; attempt += 1) {
         assertNotAborted(signal);
+        const videoFrames = prepareSketchVideoFrames(surface.document);
         const restoreMedia = suspendOffscreenLazyImages(surface.document, viewport);
+        let restored = false;
+        const restore = () => {
+            if (restored)
+                return;
+            restored = true;
+            videoFrames.restore();
+            restoreMedia();
+        };
+        signal?.addEventListener("abort", restore, { once: true });
         let blob;
         try {
             blob = await domToBlob(surface.document.documentElement, {
@@ -272,18 +283,23 @@ async function captureDomFrame(options, signal) {
                     height: `${viewport.height}px`,
                     overflow: "hidden",
                 },
-                filter: (node) => node !== options.hostElement && !isGoogleFontStylesheet(node),
+                filter: (node) => node !== options.hostElement && !isGoogleFontStylesheet(node) && videoFrames.filter(node),
                 features: { restoreScrollPosition: true },
                 timeout: MEDIA_LOAD_TIMEOUT_MS,
                 // Cross-origin Google CSS cannot be read by modern-screenshot. Skipping
                 // its font embedding avoids waiting on a stylesheet that the renderer
                 // cannot serialize anyway; computed font styles still remain inline.
                 font: hasGoogleFontStylesheet(surface.document) ? false : undefined,
-                onCloneEachNode: prepareDomClone,
+                onCloneEachNode: (node) => {
+                    prepareDomClone(node);
+                    videoFrames.prepareClone(node);
+                },
+                onCloneNode: restore,
             });
         }
         finally {
-            restoreMedia();
+            signal?.removeEventListener("abort", restore);
+            restore();
         }
         assertNotAborted(signal);
         const dimensions = await getPngDimensions(blob);

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

@@ -0,0 +1,10 @@
+/** Copies a saved sketch image automatically after an edit and reports the outcome as a toast. */
+export declare function copySketchImage(image: Blob): Promise<void>;
+/** Copies a sketch image the user asked for; only a failure needs a toast. */
+export declare function copySketchImageOnRequest(image: Blob): Promise<void>;
+/**
+ * Starts the clipboard write synchronously (inside the "Done" gesture) and
+ * fills it with the image that `save` renders. A failed save skips the toast
+ * and rethrows so the caller can show its own error.
+ */
+export declare function saveAndCopySketch(save: () => Promise<Blob>): Promise<void>;

package/dist/inspector/sketch/copySketch.js

@@ -0,0 +1,52 @@
+import { showToast } from "../ui/Toast.js";
+import { copyImageToClipboard } from "./raster.js";
+function reportCopyFailure(title, error) {
+    showToast({
+        tone: "error",
+        title,
+        description: error instanceof Error ? error.message : "The sketch image could not be copied.",
+    });
+}
+/**
+ * Reports a copy made automatically on save. The toast is the only sign the
+ * clipboard changed, so success is announced as well as failure.
+ */
+function reportAutoCopy(copied) {
+    void copied.then(() => showToast({ title: "Copied to clipboard" }), (error) => reportCopyFailure("Sketch saved, but not copied", error));
+}
+/** Copies a saved sketch image automatically after an edit and reports the outcome as a toast. */
+export function copySketchImage(image) {
+    const copied = copyImageToClipboard(image);
+    reportAutoCopy(copied);
+    return copied.catch(() => undefined);
+}
+/** Copies a sketch image the user asked for; only a failure needs a toast. */
+export function copySketchImageOnRequest(image) {
+    const copied = copyImageToClipboard(image);
+    void copied.catch((error) => reportCopyFailure("Sketch not copied", error));
+    return copied.catch(() => undefined);
+}
+/**
+ * Starts the clipboard write synchronously (inside the "Done" gesture) and
+ * fills it with the image that `save` renders. A failed save skips the toast
+ * and rethrows so the caller can show its own error.
+ */
+export async function saveAndCopySketch(save) {
+    let resolveImage = () => undefined;
+    let rejectImage = () => undefined;
+    const image = new Promise((resolve, reject) => {
+        resolveImage = resolve;
+        rejectImage = reject;
+    });
+    image.catch(() => undefined);
+    const copied = copyImageToClipboard(image);
+    copied.catch(() => undefined);
+    try {
+        resolveImage(await save());
+    }
+    catch (error) {
+        rejectImage(error);
+        throw error;
+    }
+    reportAutoCopy(copied);
+}

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

@@ -0,0 +1,17 @@
+import { type SketchPenColor } from "./model.js";
+/** Drawing mode chosen from the canvas toolbar while the sketch tool is active. */
+export type SketchDrawingTool = "pen" | "eraser" | "rectangle";
+export interface SketchDrawingToolsSnapshot {
+    readonly tool: SketchDrawingTool;
+    readonly color: SketchPenColor;
+}
+export declare function getSketchDrawingTools(): SketchDrawingToolsSnapshot;
+export declare function subscribeSketchDrawingTools(listener: () => void): () => void;
+export declare function useSketchDrawingTools(): SketchDrawingToolsSnapshot;
+export declare function setSketchDrawingTool(tool: SketchDrawingTool): void;
+/** Choosing a color implies drawing with it, so the eraser hands back to the pen. */
+export declare function setSketchStrokeColor(color: SketchPenColor): void;
+/** Every sketch session starts with the pen; the chosen color is kept. */
+export declare function resetSketchDrawingTool(): void;
+/** Restores the default tool and color. */
+export declare function restoreDefaultSketchDrawingTools(): void;

package/dist/inspector/sketch/drawingTools.js

@@ -0,0 +1,47 @@
+import { useSyncExternalStore } from "react";
+import { SKETCH_PEN_COLORS, SKETCH_STROKE_COLOR } from "./model.js";
+const DEFAULT_COLOR = SKETCH_PEN_COLORS.find((color) => color.value === SKETCH_STROKE_COLOR) ?? SKETCH_PEN_COLORS[0];
+const DEFAULT_SNAPSHOT = {
+    tool: "pen",
+    color: DEFAULT_COLOR,
+};
+let snapshot = DEFAULT_SNAPSHOT;
+const listeners = new Set();
+function publish(next) {
+    if (next.tool === snapshot.tool && next.color === snapshot.color)
+        return;
+    snapshot = next;
+    for (const listener of listeners) {
+        try {
+            listener();
+        }
+        catch {
+            // A view subscriber must not stop the others from seeing the new tool.
+        }
+    }
+}
+export function getSketchDrawingTools() {
+    return snapshot;
+}
+export function subscribeSketchDrawingTools(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+export function useSketchDrawingTools() {
+    return useSyncExternalStore(subscribeSketchDrawingTools, getSketchDrawingTools, getSketchDrawingTools);
+}
+export function setSketchDrawingTool(tool) {
+    publish({ ...snapshot, tool });
+}
+/** Choosing a color implies drawing with it, so the eraser hands back to the pen. */
+export function setSketchStrokeColor(color) {
+    publish({ tool: snapshot.tool === "eraser" ? "pen" : snapshot.tool, color });
+}
+/** Every sketch session starts with the pen; the chosen color is kept. */
+export function resetSketchDrawingTool() {
+    setSketchDrawingTool("pen");
+}
+/** Restores the default tool and color. */
+export function restoreDefaultSketchDrawingTools() {
+    snapshot = DEFAULT_SNAPSHOT;
+}

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

@@ -0,0 +1,9 @@
+import { type CanvasCard } from "../canvas/canvasStore.js";
+/**
+ * Names the frame an annotated sketch targets, so the PNG stays actionable when
+ * a user copies it to an agent without the handoff prompt. Iterations also name
+ * their artifact file: the folder ID is the only stable identity an agent can
+ * use to find the right iteration, since canvas iteration numbers are live
+ * labels that nothing persists.
+ */
+export declare function sketchFrameHeading(captureUrl: string, frameCards?: readonly CanvasCard[]): string;

package/dist/inspector/sketch/frameHeading.js

@@ -0,0 +1,30 @@
+import { getCanvasCards } from "../canvas/canvasStore.js";
+import { contentSourceUrl } from "../canvas/frameContent.js";
+import { artifactIdFromUrl, htmlTarget } from "../drafts/model.js";
+/** The page path shown in sketch headings; origin, query, and hash stay out. */
+function routePath(url) {
+    try {
+        return new URL(url).pathname || "/";
+    }
+    catch {
+        return url;
+    }
+}
+/**
+ * Names the frame an annotated sketch targets, so the PNG stays actionable when
+ * a user copies it to an agent without the handoff prompt. Iterations also name
+ * their artifact file: the folder ID is the only stable identity an agent can
+ * use to find the right iteration, since canvas iteration numbers are live
+ * labels that nothing persists.
+ */
+export function sketchFrameHeading(captureUrl, frameCards = getCanvasCards()) {
+    const artifactId = artifactIdFromUrl(captureUrl);
+    if (!artifactId)
+        return `Implement these changes for "${routePath(captureUrl)}"`;
+    const card = frameCards.find((candidate) => candidate.content.kind === "iteration"
+        && candidate.content.artifactId === artifactId);
+    const path = htmlTarget(artifactId).path;
+    return card
+        ? `Implement these changes for the HTML iteration "${routePath(contentSourceUrl(card.content))}" (${path})`
+        : `Implement these changes for the HTML iteration (${path})`;
+}

package/dist/inspector/sketch/freehand.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getStroke } from "perfect-freehand";
-import { SKETCH_STROKE_COLOR, } from "./model.js";
+import { SKETCH_ACCENT_COLOR, SKETCH_RECTANGLE_FILL_OPACITY, SKETCH_STROKE_COLOR, } from "./model.js";
 const FREEHAND_OPTIONS = {
     thinning: 0.45,
     smoothing: 0.5,
@@ -56,9 +56,9 @@ export function SketchSvgLayer({ strokes, annotations = [], annotationScale = 1,
                 if (!path)
                     return null;
                 const rectangle = stroke.kind === "rectangle";
-                return (_jsx("path", { d: path, fill: rectangle ? "none" : stroke.color || SKETCH_STROKE_COLOR, stroke: rectangle ? stroke.color || SKETCH_STROKE_COLOR : "none", strokeWidth: rectangle ? stroke.width : undefined, strokeLinecap: "round", strokeLinejoin: "round", pointerEvents: "none" }, stroke.id));
+                return (_jsx("path", { d: path, fill: stroke.color || SKETCH_STROKE_COLOR, fillOpacity: rectangle ? SKETCH_RECTANGLE_FILL_OPACITY : undefined, stroke: rectangle ? stroke.color || SKETCH_STROKE_COLOR : "none", strokeWidth: rectangle ? stroke.width : undefined, strokeLinecap: "round", strokeLinejoin: "round", pointerEvents: "none" }, stroke.id));
             }), annotations.map((annotation) => {
                 const radius = 16 * annotationScale;
-                return (_jsxs("g", { transform: `translate(${number(annotation.point.x)} ${number(annotation.point.y)})`, pointerEvents: "none", children: [_jsx("circle", { r: radius, fill: SKETCH_STROKE_COLOR }), _jsx("text", { x: "0", y: "0", fill: "#ffffff", fontFamily: "system-ui, sans-serif", fontSize: 12 * annotationScale, fontWeight: "600", textAnchor: "middle", dominantBaseline: "central", children: annotation.number })] }, annotation.id));
+                return (_jsxs("g", { transform: `translate(${number(annotation.point.x)} ${number(annotation.point.y)})`, pointerEvents: "none", children: [_jsx("circle", { r: radius, fill: SKETCH_ACCENT_COLOR }), _jsx("text", { x: "0", y: "0", fill: "#ffffff", fontFamily: "system-ui, sans-serif", fontSize: 12 * annotationScale, fontWeight: "600", textAnchor: "middle", dominantBaseline: "central", children: annotation.number })] }, annotation.id));
             })] }));
 }

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

@@ -15,3 +15,9 @@ export declare function distanceToSegment(point: SketchPoint, start: SketchPoint
 export declare function findSketchElementAt(point: SketchPoint, strokes: readonly SketchStroke[], annotations: readonly SketchAnnotation[]): SketchElementReference | null;
 export declare function translateSketchStroke(stroke: SketchStroke, delta: SketchPoint, bounds: SketchBounds): SketchStroke;
 export declare function translateSketchAnnotation(annotation: SketchAnnotation, delta: SketchPoint, bounds: SketchBounds): SketchAnnotation;
+/**
+ * Returns the ids of strokes whose drawn line passes within `radius` of the
+ * eraser path from `start` to `end`. Rectangles are hit on their outline only,
+ * so erasing across the inside of a box leaves it in place.
+ */
+export declare function findErasedSketchStrokeIds(start: SketchPoint, end: SketchPoint, strokes: readonly SketchStroke[], radius: number): string[];

package/dist/inspector/sketch/geometry.js

@@ -96,3 +96,22 @@ export function translateSketchAnnotation(annotation, delta, bounds) {
         },
     };
 }
+/**
+ * Returns the ids of strokes whose drawn line passes within `radius` of the
+ * eraser path from `start` to `end`. Rectangles are hit on their outline only,
+ * so erasing across the inside of a box leaves it in place.
+ */
+export function findErasedSketchStrokeIds(start, end, strokes, radius) {
+    const steps = Math.max(1, Math.ceil(distance(start, end) / Math.max(1, radius / 2)));
+    const samples = [];
+    for (let step = 0; step <= steps; step += 1) {
+        const position = step / steps;
+        samples.push({ x: start.x + (end.x - start.x) * position, y: start.y + (end.y - start.y) * position });
+    }
+    return strokes
+        .filter((stroke) => {
+        const tolerance = radius + stroke.width / 2;
+        return samples.some((sample) => distanceToStroke(sample, stroke) <= tolerance);
+    })
+        .map((stroke) => stroke.id);
+}

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

@@ -0,0 +1,30 @@
+import type { SketchStroke } from "./model.js";
+interface ErasedStroke {
+    readonly stroke: SketchStroke;
+    /** Position in the stroke list at the moment it was erased. */
+    readonly index: number;
+}
+type SketchHistoryEntry = {
+    readonly kind: "add";
+    readonly stroke: SketchStroke;
+} | {
+    readonly kind: "erase";
+    readonly gesture: number;
+    readonly erased: readonly ErasedStroke[];
+};
+/** Strokes plus the undo and redo stacks of the edits that produced them. */
+export interface SketchHistory {
+    readonly strokes: readonly SketchStroke[];
+    readonly undo: readonly SketchHistoryEntry[];
+    readonly redo: readonly SketchHistoryEntry[];
+}
+export declare const EMPTY_SKETCH_HISTORY: SketchHistory;
+export declare function addSketchStroke(history: SketchHistory, stroke: SketchStroke): SketchHistory;
+/**
+ * Erases strokes as one undoable edit. Strokes erased by the same `gesture`
+ * share an entry, so one eraser drag undoes in a single step.
+ */
+export declare function eraseSketchStrokes(history: SketchHistory, ids: readonly string[], gesture: number): SketchHistory;
+export declare function undoSketchEdit(history: SketchHistory): SketchHistory;
+export declare function redoSketchEdit(history: SketchHistory): SketchHistory;
+export {};

package/dist/inspector/sketch/history.js

@@ -0,0 +1,58 @@
+export const EMPTY_SKETCH_HISTORY = { strokes: [], undo: [], redo: [] };
+export function addSketchStroke(history, stroke) {
+    return {
+        strokes: [...history.strokes, stroke],
+        undo: [...history.undo, { kind: "add", stroke }],
+        redo: [],
+    };
+}
+function removeStrokes(strokes, ids) {
+    const remaining = [];
+    const erased = [];
+    strokes.forEach((stroke, index) => {
+        if (ids.has(stroke.id))
+            erased.push({ stroke, index: index - erased.length });
+        else
+            remaining.push(stroke);
+    });
+    return { strokes: remaining, erased };
+}
+/**
+ * Erases strokes as one undoable edit. Strokes erased by the same `gesture`
+ * share an entry, so one eraser drag undoes in a single step.
+ */
+export function eraseSketchStrokes(history, ids, gesture) {
+    const { strokes, erased } = removeStrokes(history.strokes, new Set(ids));
+    if (erased.length === 0)
+        return history;
+    const last = history.undo.at(-1);
+    const undo = last?.kind === "erase" && last.gesture === gesture
+        ? [...history.undo.slice(0, -1), { ...last, erased: [...last.erased, ...erased] }]
+        : [...history.undo, { kind: "erase", gesture, erased }];
+    return { strokes, undo, redo: [] };
+}
+function restoreErased(strokes, erased) {
+    const restored = [...strokes];
+    // Reinsert in reverse removal order so each recorded index is valid again.
+    for (const { stroke, index } of [...erased].reverse())
+        restored.splice(index, 0, stroke);
+    return restored;
+}
+export function undoSketchEdit(history) {
+    const entry = history.undo.at(-1);
+    if (!entry)
+        return history;
+    const strokes = entry.kind === "add"
+        ? history.strokes.filter((stroke) => stroke.id !== entry.stroke.id)
+        : restoreErased(history.strokes, entry.erased);
+    return { strokes, undo: history.undo.slice(0, -1), redo: [...history.redo, entry] };
+}
+export function redoSketchEdit(history) {
+    const entry = history.redo.at(-1);
+    if (!entry)
+        return history;
+    const strokes = entry.kind === "add"
+        ? [...history.strokes, entry.stroke]
+        : removeStrokes(history.strokes, new Set(entry.erased.map(({ stroke }) => stroke.id))).strokes;
+    return { strokes, undo: [...history.undo, entry], redo: history.redo.slice(0, -1) };
+}

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

@@ -1,12 +1,10 @@
 import { type CapturedSketch } from "./capture.js";
 export type SketchCaptureState = "idle" | "sketching" | "capturing" | "ready" | "error";
-export type SketchEntryTool = "pen" | "annotate";
 export interface SketchInteractionSnapshot {
     readonly captureState: SketchCaptureState;
     readonly captured: CapturedSketch | null;
     readonly editingId: string | null;
     readonly error: string | null;
-    readonly initialTool: SketchEntryTool;
     readonly draftId: string | null;
 }
 export declare function getSketchInteractionSnapshot(): SketchInteractionSnapshot;
@@ -14,7 +12,7 @@ export declare function subscribeSketchInteraction(listener: () => void): () =>
 export declare function useSketchInteraction(): SketchInteractionSnapshot;
 export declare function isSketchInteractionActive(): boolean;
 export declare function useSketchInteractionActive(): boolean;
-export declare function beginSketchCapture(initialTool?: SketchEntryTool): void;
+export declare function beginSketchCapture(): void;
 export declare function completeSketchCapture(hostElement: HTMLElement): Promise<CapturedSketch>;
 export declare function cancelSketchInteraction(): void;
 export declare function openSketchEditor(sketchId: string): void;

package/dist/inspector/sketch/interaction.js

@@ -1,4 +1,4 @@
-import { getActiveDraftChanges } from "../changes/draftChanges.js";
+import { getActiveDraftChanges } from "../drafts/store.js";
 import { useSyncExternalStore } from "react";
 import { captureViewport, } from "./capture.js";
 const EMPTY_SNAPSHOT = {
@@ -6,7 +6,6 @@ const EMPTY_SNAPSHOT = {
     captured: null,
     editingId: null,
     error: null,
-    initialTool: "pen",
     draftId: null,
 };
 let snapshot = EMPTY_SNAPSHOT;
@@ -40,25 +39,24 @@ export function useSketchInteractionActive() {
     const current = useSketchInteraction();
     return current.captureState !== "idle" || current.captured !== null || current.editingId !== null;
 }
-export function beginSketchCapture(initialTool = "pen") {
+export function beginSketchCapture() {
     captureController?.abort();
     captureController = null;
-    publish({ captureState: "sketching", captured: null, editingId: null, error: null, initialTool, draftId: getActiveDraftChanges().draftId });
+    publish({ captureState: "sketching", captured: null, editingId: null, error: null, draftId: getActiveDraftChanges().draftId });
 }
 export function completeSketchCapture(hostElement) {
     captureController?.abort();
     const controller = new AbortController();
     captureController = controller;
-    const initialTool = snapshot.initialTool;
     const draftId = snapshot.draftId;
-    publish({ captureState: "capturing", captured: null, editingId: null, error: null, initialTool, draftId });
+    publish({ captureState: "capturing", captured: null, editingId: null, error: null, draftId });
     const options = { hostElement, signal: controller.signal };
     return captureViewport(options)
         .then((captured) => {
         if (captureController !== controller)
             return captured;
         captureController = null;
-        publish({ captureState: "ready", captured, editingId: null, error: null, initialTool, draftId });
+        publish({ captureState: "ready", captured, editingId: null, error: null, draftId });
         return captured;
     })
         .catch((error) => {
@@ -74,7 +72,6 @@ export function completeSketchCapture(hostElement) {
             captured: null,
             editingId: null,
             error: error instanceof Error ? error.message : "The viewport could not be captured.",
-            initialTool,
             draftId,
         });
         throw error;
@@ -88,7 +85,7 @@ export function cancelSketchInteraction() {
 export function openSketchEditor(sketchId) {
     captureController?.abort();
     captureController = null;
-    publish({ captureState: "idle", captured: null, editingId: sketchId, error: null, initialTool: "pen", draftId: null });
+    publish({ captureState: "idle", captured: null, editingId: sketchId, error: null, draftId: null });
 }
 export function closeSketchEditor() {
     if (snapshot.captureState !== "ready" && snapshot.editingId === null)