nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/sketch/SketchWorkspace.js

@@ -1,15 +1,36 @@
 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";
+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 +58,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();
@@ -64,9 +65,8 @@ export function SketchWorkspace({ hostElement, projectId }) {
     const editingDocument = interaction.editingId
         ? store.items.find((item) => item.document.id === interaction.editingId)?.document ?? null
         : null;
-    // IndexedDB hydration is deliberately independent from the localStorage
-    // session schema. A failed hydration leaves the inspector usable and gives
-    // the Changes log a recovery message.
+    // Deliberately independent of the localStorage session schema; a failed
+    // hydration leaves the inspector usable.
     useEffect(() => {
         clearSketchClipboardHandoff();
         closeSketchNote();
@@ -77,39 +77,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 +154,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 +181,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.d.ts

@@ -1,3 +1,5 @@
+import { type Options } from "modern-screenshot";
+import { getPngDimensions } from "./raster.js";
 export type SketchCaptureErrorCode = "unsupported" | "cancelled" | "capture-failed" | "processing-timeout";
 export declare class SketchCaptureError extends Error {
     readonly code: SketchCaptureErrorCode;
@@ -29,6 +31,13 @@ export interface SketchCaptureOptions {
     readonly signal?: AbortSignal;
     readonly processingTimeoutMs?: number;
 }
+/** The `domToBlob` call shape this module uses: a node plus render options. */
+export type DomCaptureToBlob = (node: Node, options?: Options) => Promise<Blob>;
+/** Replaces the DOM renderer and PNG reader for callers that cannot rasterize, such as jsdom tests. */
+export interface SketchCaptureResources {
+    readonly toBlob?: DomCaptureToBlob;
+    readonly pngDimensions?: typeof getPngDimensions;
+}
 export interface SketchViewport {
     readonly width: number;
     readonly height: number;
@@ -44,11 +53,11 @@ export interface SketchScrollPosition {
     readonly x: number;
     readonly y: number;
 }
-/** Reads root scrolling from both window and document APIs. */
+/** Browsers expose root scrolling through different APIs. */
 export declare function getSketchScrollPosition(targetWindow: Window): SketchScrollPosition;
 export declare function getSketchViewport(hostElement: HTMLElement): SketchViewport;
-/** Renders the current viewport from its DOM without invoking screen capture permissions. */
-export declare function captureViewport(options: SketchCaptureOptions): Promise<CapturedSketch>;
+/** DOM-rendered, so no screen-capture permission is required. */
+export declare function captureViewport(options: SketchCaptureOptions, resources?: SketchCaptureResources): Promise<CapturedSketch>;
 export declare function createSketchCaptureOperation(options: SketchCaptureOptions): {
     readonly promise: Promise<CapturedSketch>;
     readonly cancel: () => void;

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;
@@ -73,7 +74,7 @@ async function waitForLayout(signal, targetDocument) {
         }
     }
     catch {
-        // Font readiness is best effort; the animation-frame settle still runs.
+        // Font readiness is best effort.
     }
     await waitForAnimationFrame(signal);
     await waitForAnimationFrame(signal);
@@ -88,7 +89,7 @@ function domContentWidth(hostElement) {
 function nonNegativeOffset(...values) {
     return Math.max(0, ...values.filter((value) => Number.isFinite(value)));
 }
-/** Reads root scrolling from both window and document APIs. */
+/** Browsers expose root scrolling through different APIs. */
 export function getSketchScrollPosition(targetWindow) {
     const targetDocument = targetWindow.document;
     const scrollingElement = targetDocument.scrollingElement;
@@ -252,16 +253,28 @@ async function runWithProcessingTimeout(operation, timeoutMs, parentSignal) {
         controller.abort();
     }
 }
-async function captureDomFrame(options, signal) {
+async function captureDomFrame(options, resources, signal) {
+    const toBlob = resources.toBlob ?? domToBlob;
+    const readPngDimensions = resources.pngDimensions ?? getPngDimensions;
     const surface = getSketchSurface(options.hostElement);
     const viewport = domViewportDimensions(options.hostElement);
     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, {
+            blob = await toBlob(surface.document.documentElement, {
                 type: "image/png",
                 width: viewport.width,
                 height: viewport.height,
@@ -272,21 +285,25 @@ 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.
+                // modern-screenshot cannot serialize cross-origin Google CSS; 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);
+        const dimensions = await readPngDimensions(blob);
         if (!dimensions
             || dimensions.width > SKETCH_LIMITS.imageEdge
             || dimensions.height > SKETCH_LIMITS.imageEdge) {
@@ -299,8 +316,8 @@ async function captureDomFrame(options, signal) {
     }
     throw new SketchCaptureError("capture-failed", "This viewport is too detailed to save within the 2 MiB image limit.");
 }
-/** Renders the current viewport from its DOM without invoking screen capture permissions. */
-export async function captureViewport(options) {
+/** DOM-rendered, so no screen-capture permission is required. */
+export async function captureViewport(options, resources = {}) {
     if (typeof document === "undefined" || typeof window === "undefined") {
         throw new SketchCaptureError("unsupported", "Viewport capture is only available in a browser.");
     }
@@ -309,7 +326,7 @@ export async function captureViewport(options) {
         const surface = getSketchSurface(options.hostElement);
         const frame = await runWithProcessingTimeout(async (processingSignal) => {
             await waitForLayout(processingSignal, surface.document);
-            return captureDomFrame(options, processingSignal);
+            return captureDomFrame(options, resources, processingSignal);
         }, options.processingTimeoutMs ?? DEFAULT_PROCESSING_TIMEOUT_MS, options.signal);
         assertNotAborted(options.signal);
         const runtime = getNudgeUiRuntimeConfig();

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

@@ -0,0 +1,4 @@
+export declare function copySketchImage(image: Blob): Promise<void>;
+export declare function copySketchImageOnRequest(image: Blob): Promise<void>;
+/** A failed save skips the toast and rethrows so the caller can show its own error; the clipboard write starts before `save` resolves. */
+export declare function saveAndCopySketch(save: () => Promise<Blob>): Promise<void>;

package/dist/inspector/sketch/copySketch.js

@@ -0,0 +1,43 @@
+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.",
+    });
+}
+/** The toast is the only sign the clipboard changed, so success is announced too. */
+function reportAutoCopy(copied) {
+    void copied.then(() => showToast({ title: "Copied to clipboard" }), (error) => reportCopyFailure("Sketch saved, but not copied", error));
+}
+export function copySketchImage(image) {
+    const copied = copyImageToClipboard(image);
+    reportAutoCopy(copied);
+    return copied.catch(() => undefined);
+}
+export function copySketchImageOnRequest(image) {
+    const copied = copyImageToClipboard(image);
+    void copied.catch((error) => reportCopyFailure("Sketch not copied", error));
+    return copied.catch(() => undefined);
+}
+/** A failed save skips the toast and rethrows so the caller can show its own error; the clipboard write starts before `save` resolves. */
+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,15 @@
+import { type SketchPenColor } from "./model.js";
+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;
+/** Resets the tool only; the chosen color is kept. */
+export declare function resetSketchDrawingTool(): void;
+export declare function restoreDefaultSketchDrawingTools(): void;

package/dist/inspector/sketch/drawingTools.js

@@ -0,0 +1,46 @@
+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 });
+}
+/** Resets the tool only; the chosen color is kept. */
+export function resetSketchDrawingTool() {
+    setSketchDrawingTool("pen");
+}
+export function restoreDefaultSketchDrawingTools() {
+    snapshot = DEFAULT_SNAPSHOT;
+}

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

@@ -0,0 +1,3 @@
+import { type CanvasCard } from "../canvas/canvasStore.js";
+/** Iterations also name their artifact folder: 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,23 @@
+import { getCanvasCards } from "../canvas/canvasStore.js";
+import { contentSourceUrl } from "../canvas/frameContent.js";
+import { artifactIdFromUrl, htmlTarget } from "../drafts/model.js";
+function routePath(url) {
+    try {
+        return new URL(url).pathname || "/";
+    }
+    catch {
+        return url;
+    }
+}
+/** Iterations also name their artifact folder: 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.d.ts

@@ -9,5 +9,4 @@ export interface SketchSvgLayerProps {
     readonly annotations?: readonly SketchAnnotation[];
     readonly annotationScale?: number;
 }
-/** Renders sketch geometry as DOM-native SVG shapes. */
 export declare function SketchSvgLayer({ strokes, annotations, annotationScale, }: SketchSvgLayerProps): ReactElement;

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,
@@ -49,16 +49,15 @@ export function sketchStrokePath(stroke, scaleX = 1, scaleY = scaleX) {
         return linePath(stroke.points, scaleX, scaleY);
     return getSvgPathFromStroke(sketchStrokeOutline(stroke, scaleX, scaleY));
 }
-/** Renders sketch geometry as DOM-native SVG shapes. */
 export function SketchSvgLayer({ strokes, annotations = [], annotationScale = 1, }) {
     return (_jsxs("g", { "data-test": "sketch-svg-layer", children: [strokes.map((stroke) => {
                 const path = sketchStrokePath(stroke);
                 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

@@ -11,7 +11,8 @@ export type SketchElementReference = {
     readonly id: string;
 };
 export declare function distanceToSegment(point: SketchPoint, start: SketchPoint, end: SketchPoint): number;
-/** Returns the topmost drawable object under a point in canvas coordinates. */
 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;
+/** Rectangles are hit on their outline only, so erasing inside 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

@@ -37,7 +37,6 @@ function pointBounds(points) {
     }
     return { minX, maxX, minY, maxY };
 }
-/** Returns the topmost drawable object under a point in canvas coordinates. */
 export function findSketchElementAt(point, strokes, annotations) {
     for (let index = annotations.length - 1; index >= 0; index -= 1) {
         const annotation = annotations[index];
@@ -96,3 +95,18 @@ export function translateSketchAnnotation(annotation, delta, bounds) {
         },
     };
 }
+/** Rectangles are hit on their outline only, so erasing inside 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/handoff.js

@@ -20,7 +20,6 @@ function randomId() {
             return crypto.randomUUID();
     }
     catch {
-        // Use the fallback below.
     }
     return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
 }

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

@@ -0,0 +1,26 @@
+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[];
+};
+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;
+/** Strokes erased by the same `gesture` share one undo entry, so an eraser drag undoes in one 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,55 @@
+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 };
+}
+/** Strokes erased by the same `gesture` share one undo entry, so an eraser drag undoes in one 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) };
+}