nudge-ui 0.2.0 → 0.2.2

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

@@ -0,0 +1,55 @@
+export type SketchCaptureErrorCode = "unsupported" | "cancelled" | "capture-failed" | "processing-timeout";
+export declare class SketchCaptureError extends Error {
+    readonly code: SketchCaptureErrorCode;
+    constructor(code: SketchCaptureErrorCode, message: string, options?: {
+        cause?: unknown;
+    });
+}
+export interface CapturedSketch {
+    readonly originalImage: Blob;
+    readonly imageWidth: number;
+    readonly imageHeight: number;
+    readonly capture: {
+        readonly url: string;
+        readonly title: string;
+        readonly timestamp: number;
+        readonly viewportWidth: number;
+        readonly viewportHeight: number;
+        readonly scrollX: number;
+        readonly scrollY: number;
+        readonly devicePixelRatio: number;
+        readonly host: string;
+        readonly framework: string;
+        readonly imageWidth: number;
+        readonly imageHeight: number;
+    };
+}
+export interface SketchCaptureOptions {
+    readonly hostElement: HTMLElement;
+    readonly signal?: AbortSignal;
+    readonly processingTimeoutMs?: number;
+}
+export interface SketchViewport {
+    readonly width: number;
+    readonly height: number;
+    readonly scrollX: number;
+    readonly scrollY: number;
+    /** Screen-space placement of the renderer iframe inside the editor. */
+    readonly offsetX: number;
+    readonly offsetY: number;
+    readonly displayWidth: number;
+    readonly displayHeight: number;
+}
+export interface SketchScrollPosition {
+    readonly x: number;
+    readonly y: number;
+}
+/** Reads root scrolling from both window and document 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>;
+export declare function createSketchCaptureOperation(options: SketchCaptureOptions): {
+    readonly promise: Promise<CapturedSketch>;
+    readonly cancel: () => void;
+};

package/dist/inspector/sketch/capture.js

@@ -0,0 +1,350 @@
+import { domToBlob } from "modern-screenshot";
+import { getNudgeUiRuntimeConfig } from "../runtime/runtimeConfig.js";
+import { SKETCH_LIMITS } from "./model.js";
+import { getPngDimensions } from "./raster.js";
+const MEDIA_LOAD_TIMEOUT_MS = 500;
+const FONT_READY_TIMEOUT_MS = 2_000;
+const DEFAULT_PROCESSING_TIMEOUT_MS = 20_000;
+const EMPTY_MEDIA_SRC = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+export class SketchCaptureError extends Error {
+    code;
+    constructor(code, message, options) {
+        super(message, options);
+        this.code = code;
+        this.name = "SketchCaptureError";
+    }
+}
+function abortError() {
+    return new SketchCaptureError("cancelled", "Sketch capture was cancelled.");
+}
+function assertNotAborted(signal) {
+    if (signal?.aborted)
+        throw abortError();
+}
+function waitForAnimationFrame(signal) {
+    return new Promise((resolve, reject) => {
+        if (signal?.aborted) {
+            reject(abortError());
+            return;
+        }
+        const finish = () => {
+            signal?.removeEventListener("abort", onAbort);
+            resolve();
+        };
+        const onAbort = () => {
+            signal?.removeEventListener("abort", onAbort);
+            reject(abortError());
+        };
+        signal?.addEventListener("abort", onAbort, { once: true });
+        if (typeof requestAnimationFrame === "function")
+            requestAnimationFrame(finish);
+        else
+            setTimeout(finish, 16);
+    });
+}
+async function waitForLayout(signal, targetDocument) {
+    try {
+        const fonts = targetDocument?.fonts
+            ?? (typeof document.fonts !== "undefined" ? document.fonts : undefined);
+        if (fonts) {
+            await new Promise((resolve, reject) => {
+                let timer = setTimeout(resolve, FONT_READY_TIMEOUT_MS);
+                const onAbort = () => {
+                    if (timer)
+                        clearTimeout(timer);
+                    timer = null;
+                    signal?.removeEventListener("abort", onAbort);
+                    reject(abortError());
+                };
+                const finish = () => {
+                    if (timer)
+                        clearTimeout(timer);
+                    timer = null;
+                    signal?.removeEventListener("abort", onAbort);
+                    resolve();
+                };
+                if (signal?.aborted) {
+                    onAbort();
+                    return;
+                }
+                signal?.addEventListener("abort", onAbort, { once: true });
+                void fonts.ready.then(finish, finish);
+            });
+        }
+    }
+    catch {
+        // Font readiness is best effort; the animation-frame settle still runs.
+    }
+    await waitForAnimationFrame(signal);
+    await waitForAnimationFrame(signal);
+}
+function domContentWidth(hostElement) {
+    const panel = hostElement.shadowRoot?.querySelector('.panel[data-open="true"]');
+    const panelRect = panel?.getBoundingClientRect();
+    if (!panelRect || panelRect.width <= 0)
+        return Math.max(1, Math.round(window.innerWidth));
+    return Math.max(1, Math.min(Math.round(window.innerWidth), Math.round(panelRect.left)));
+}
+function nonNegativeOffset(...values) {
+    return Math.max(0, ...values.filter((value) => Number.isFinite(value)));
+}
+/** Reads root scrolling from both window and document APIs. */
+export function getSketchScrollPosition(targetWindow) {
+    const targetDocument = targetWindow.document;
+    const scrollingElement = targetDocument.scrollingElement;
+    return {
+        x: nonNegativeOffset(targetWindow.scrollX, targetWindow.pageXOffset, scrollingElement?.scrollLeft ?? 0, targetDocument.documentElement?.scrollLeft ?? 0, targetDocument.body?.scrollLeft ?? 0),
+        y: nonNegativeOffset(targetWindow.scrollY, targetWindow.pageYOffset, scrollingElement?.scrollTop ?? 0, targetDocument.documentElement?.scrollTop ?? 0, targetDocument.body?.scrollTop ?? 0),
+    };
+}
+function getSketchSurface(hostElement) {
+    const iframe = typeof HTMLIFrameElement !== "undefined" && hostElement instanceof HTMLIFrameElement
+        ? hostElement
+        : null;
+    if (iframe?.contentDocument && iframe.contentWindow) {
+        return { document: iframe.contentDocument, window: iframe.contentWindow, iframe };
+    }
+    const ownerDocument = hostElement.ownerDocument ?? document;
+    return {
+        document: ownerDocument,
+        window: ownerDocument.defaultView ?? window,
+        iframe: null,
+    };
+}
+export function getSketchViewport(hostElement) {
+    const surface = getSketchSurface(hostElement);
+    const scroll = getSketchScrollPosition(surface.window);
+    if (surface.iframe) {
+        const rect = surface.iframe.getBoundingClientRect();
+        return {
+            width: Math.max(1, Math.round(surface.window.innerWidth || surface.iframe.clientWidth || rect.width)),
+            height: Math.max(1, Math.round(surface.window.innerHeight || surface.iframe.clientHeight || rect.height)),
+            scrollX: scroll.x,
+            scrollY: scroll.y,
+            offsetX: rect.left,
+            offsetY: rect.top,
+            displayWidth: Math.max(1, rect.width),
+            displayHeight: Math.max(1, rect.height),
+        };
+    }
+    const width = domContentWidth(hostElement);
+    const height = Math.max(1, Math.round(surface.window.innerHeight));
+    return {
+        width,
+        height,
+        scrollX: scroll.x,
+        scrollY: scroll.y,
+        offsetX: 0,
+        offsetY: 0,
+        displayWidth: width,
+        displayHeight: height,
+    };
+}
+function domViewportDimensions(hostElement) {
+    const surface = getSketchSurface(hostElement);
+    const { width, height } = getSketchViewport(hostElement);
+    const devicePixelRatio = Math.max(1, surface.window.devicePixelRatio || 1);
+    const scale = Math.min(devicePixelRatio, SKETCH_LIMITS.imageEdge / Math.max(width, height));
+    return { width, height, scale };
+}
+function domBackgroundColor(targetDocument) {
+    const color = targetDocument.defaultView?.getComputedStyle(targetDocument.body).backgroundColor;
+    return color && color !== "transparent" && color !== "rgba(0, 0, 0, 0)" ? color : null;
+}
+function isGoogleFontStylesheet(node) {
+    if (node.nodeType !== 1)
+        return false;
+    const element = node;
+    if (element.localName !== "link")
+        return false;
+    if ((element.getAttribute("rel") ?? "").toLowerCase() !== "stylesheet")
+        return false;
+    const href = element.getAttribute("href");
+    if (!href)
+        return false;
+    try {
+        const url = new URL(href, element.ownerDocument?.baseURI);
+        return url.hostname === "fonts.googleapis.com" || url.hostname === "fonts.gstatic.com";
+    }
+    catch {
+        return false;
+    }
+}
+function hasGoogleFontStylesheet(targetDocument) {
+    return Array.from(targetDocument.querySelectorAll("link")).some(isGoogleFontStylesheet);
+}
+function prepareDomClone(node) {
+    // Use nodeType/localName instead of instanceof so this works for iframe realms.
+    if (node.nodeType !== 1)
+        return;
+    const element = node;
+    if (element.localName === "html")
+        element.removeAttribute("data-nudge-ui-panel");
+    if (element.localName === "body")
+        element.style.setProperty("margin-right", "0", "important");
+    if (isGoogleFontStylesheet(node))
+        element.remove();
+}
+function suspendOffscreenLazyImages(targetDocument, viewport) {
+    const suspended = [];
+    for (const element of Array.from(targetDocument.images)) {
+        if (element.loading !== "lazy")
+            continue;
+        const rect = element.getBoundingClientRect();
+        const visible = rect.bottom > 0
+            && rect.right > 0
+            && rect.top < viewport.height
+            && rect.left < viewport.width;
+        if (visible)
+            continue;
+        suspended.push({
+            element,
+            src: element.getAttribute("src") ?? "",
+            srcset: element.getAttribute("srcset") ?? "",
+        });
+        element.removeAttribute("srcset");
+        element.src = EMPTY_MEDIA_SRC;
+    }
+    return () => {
+        for (const { element, src, srcset } of suspended) {
+            if (srcset)
+                element.setAttribute("srcset", srcset);
+            else
+                element.removeAttribute("srcset");
+            if (src)
+                element.src = src;
+            else
+                element.removeAttribute("src");
+        }
+    };
+}
+async function runWithProcessingTimeout(operation, timeoutMs, parentSignal) {
+    const controller = new AbortController();
+    let timer = null;
+    let onParentAbort = null;
+    try {
+        return await Promise.race([
+            operation(controller.signal),
+            new Promise((_, reject) => {
+                onParentAbort = () => {
+                    reject(abortError());
+                    controller.abort();
+                };
+                if (parentSignal?.aborted) {
+                    onParentAbort();
+                    return;
+                }
+                parentSignal?.addEventListener("abort", onParentAbort, { once: true });
+            }),
+            new Promise((_, reject) => {
+                timer = setTimeout(() => {
+                    reject(new SketchCaptureError("processing-timeout", "The selected tab took too long to prepare. Try capturing again."));
+                    controller.abort();
+                }, timeoutMs);
+            }),
+        ]);
+    }
+    finally {
+        if (timer)
+            clearTimeout(timer);
+        if (onParentAbort && parentSignal)
+            parentSignal.removeEventListener("abort", onParentAbort);
+        controller.abort();
+    }
+}
+async function captureDomFrame(options, signal) {
+    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 restoreMedia = suspendOffscreenLazyImages(surface.document, viewport);
+        let blob;
+        try {
+            blob = await domToBlob(surface.document.documentElement, {
+                type: "image/png",
+                width: viewport.width,
+                height: viewport.height,
+                scale,
+                backgroundColor: domBackgroundColor(surface.document),
+                style: {
+                    width: `${viewport.width}px`,
+                    height: `${viewport.height}px`,
+                    overflow: "hidden",
+                },
+                filter: (node) => node !== options.hostElement && !isGoogleFontStylesheet(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,
+            });
+        }
+        finally {
+            restoreMedia();
+        }
+        assertNotAborted(signal);
+        const dimensions = await getPngDimensions(blob);
+        if (!dimensions
+            || dimensions.width > SKETCH_LIMITS.imageEdge
+            || dimensions.height > SKETCH_LIMITS.imageEdge) {
+            throw new SketchCaptureError("capture-failed", "The rendered viewport produced an invalid image.");
+        }
+        if (blob.size <= SKETCH_LIMITS.imageBytes) {
+            return { blob, width: dimensions.width, height: dimensions.height };
+        }
+        scale *= 0.8;
+    }
+    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) {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+        throw new SketchCaptureError("unsupported", "Viewport capture is only available in a browser.");
+    }
+    assertNotAborted(options.signal);
+    try {
+        const surface = getSketchSurface(options.hostElement);
+        const frame = await runWithProcessingTimeout(async (processingSignal) => {
+            await waitForLayout(processingSignal, surface.document);
+            return captureDomFrame(options, processingSignal);
+        }, options.processingTimeoutMs ?? DEFAULT_PROCESSING_TIMEOUT_MS, options.signal);
+        assertNotAborted(options.signal);
+        const runtime = getNudgeUiRuntimeConfig();
+        const scroll = getSketchScrollPosition(surface.window);
+        const capture = {
+            url: surface.window.location.href,
+            title: surface.document.title,
+            timestamp: Date.now(),
+            viewportWidth: surface.window.innerWidth,
+            viewportHeight: surface.window.innerHeight,
+            scrollX: scroll.x,
+            scrollY: scroll.y,
+            devicePixelRatio: surface.window.devicePixelRatio || 1,
+            host: runtime.host,
+            framework: runtime.framework,
+            imageWidth: frame.width,
+            imageHeight: frame.height,
+        };
+        return { originalImage: frame.blob, imageWidth: frame.width, imageHeight: frame.height, capture };
+    }
+    catch (error) {
+        if (error instanceof SketchCaptureError)
+            throw error;
+        if (error instanceof DOMException && error.name === "AbortError")
+            throw abortError();
+        throw new SketchCaptureError("capture-failed", "The viewport could not be rendered from the page DOM. Try again.", { cause: error });
+    }
+}
+export function createSketchCaptureOperation(options) {
+    const controller = new AbortController();
+    const onAbort = () => controller.abort();
+    options.signal?.addEventListener("abort", onAbort, { once: true });
+    const promise = captureViewport({
+        ...options,
+        signal: controller.signal,
+    }).finally(() => options.signal?.removeEventListener("abort", onAbort));
+    return { promise, cancel: () => controller.abort() };
+}

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

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import { type SketchAnnotation, type SketchStroke } from "./model.js";
+export type Vec2 = readonly [number, number];
+export declare function getSvgPathFromStroke(points: readonly Vec2[], closed?: boolean): string;
+export declare function sketchStrokeOutline(stroke: Pick<SketchStroke, "kind" | "points" | "width">, scaleX?: number, scaleY?: number): readonly Vec2[];
+export declare function sketchStrokePath(stroke: Pick<SketchStroke, "kind" | "points" | "width">, scaleX?: number, scaleY?: number): string;
+export interface SketchSvgLayerProps {
+    readonly strokes: readonly SketchStroke[];
+    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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getStroke } from "perfect-freehand";
+import { SKETCH_STROKE_COLOR, } from "./model.js";
+const FREEHAND_OPTIONS = {
+    thinning: 0.45,
+    smoothing: 0.5,
+    streamline: 0.35,
+    simulatePressure: true,
+    last: true,
+};
+function number(value) {
+    return Number.isFinite(value) ? value.toFixed(2) : "0";
+}
+function linePath(points, scaleX, scaleY) {
+    const first = points[0];
+    if (!first)
+        return "";
+    const commands = [`M ${number(first.x * scaleX)} ${number(first.y * scaleY)}`];
+    for (const point of points.slice(1)) {
+        commands.push(`L ${number(point.x * scaleX)} ${number(point.y * scaleY)}`);
+    }
+    return commands.join(" ");
+}
+export function getSvgPathFromStroke(points, closed = true) {
+    if (points.length < 4)
+        return "";
+    const average = (left, right) => (left + right) / 2;
+    const first = points[0];
+    const second = points[1];
+    const third = points[2];
+    let result = `M ${number(first[0])} ${number(first[1])} Q ${number(second[0])} ${number(second[1])} ${number(average(second[0], third[0]))} ${number(average(second[1], third[1]))} T`;
+    for (let index = 2; index < points.length - 1; index += 1) {
+        const current = points[index];
+        const next = points[index + 1];
+        result += ` ${number(average(current[0], next[0]))} ${number(average(current[1], next[1]))}`;
+    }
+    return closed ? `${result} Z` : result;
+}
+export function sketchStrokeOutline(stroke, scaleX = 1, scaleY = scaleX) {
+    if (stroke.points.length === 0 || stroke.kind === "rectangle")
+        return [];
+    const size = stroke.width * Math.max(scaleX, scaleY);
+    return getStroke(stroke.points.map((point) => [point.x * scaleX, point.y * scaleY]), { ...FREEHAND_OPTIONS, size });
+}
+export function sketchStrokePath(stroke, scaleX = 1, scaleY = scaleX) {
+    if (stroke.points.length === 0)
+        return "";
+    if (stroke.kind === "rectangle")
+        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));
+            }), 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));
+            })] }));
+}

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

@@ -0,0 +1,17 @@
+import { type SketchAnnotation, type SketchPoint, type SketchStroke } from "./model.js";
+export interface SketchBounds {
+    readonly width: number;
+    readonly height: number;
+}
+export type SketchElementReference = {
+    readonly kind: "stroke";
+    readonly id: string;
+} | {
+    readonly kind: "annotation";
+    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;

package/dist/inspector/sketch/geometry.js

@@ -0,0 +1,98 @@
+import { SKETCH_ANNOTATION_RADIUS, } from "./model.js";
+function distance(left, right) {
+    return Math.hypot(left.x - right.x, left.y - right.y);
+}
+export function distanceToSegment(point, start, end) {
+    const deltaX = end.x - start.x;
+    const deltaY = end.y - start.y;
+    const lengthSquared = deltaX * deltaX + deltaY * deltaY;
+    if (lengthSquared === 0)
+        return distance(point, start);
+    const projection = ((point.x - start.x) * deltaX + (point.y - start.y) * deltaY) / lengthSquared;
+    const position = Math.max(0, Math.min(1, projection));
+    return distance(point, {
+        x: start.x + position * deltaX,
+        y: start.y + position * deltaY,
+    });
+}
+function distanceToStroke(point, stroke) {
+    if (stroke.points.length === 1)
+        return distance(point, stroke.points[0]);
+    let closest = Number.POSITIVE_INFINITY;
+    for (let index = 1; index < stroke.points.length; index += 1) {
+        closest = Math.min(closest, distanceToSegment(point, stroke.points[index - 1], stroke.points[index]));
+    }
+    return closest;
+}
+function pointBounds(points) {
+    let minX = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const point of points) {
+        minX = Math.min(minX, point.x);
+        maxX = Math.max(maxX, point.x);
+        minY = Math.min(minY, point.y);
+        maxY = Math.max(maxY, point.y);
+    }
+    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];
+        if (distance(point, annotation.point) <= SKETCH_ANNOTATION_RADIUS * 1.5) {
+            return { kind: "annotation", id: annotation.id };
+        }
+    }
+    for (let index = strokes.length - 1; index >= 0; index -= 1) {
+        const stroke = strokes[index];
+        const tolerance = Math.max(10, stroke.width / 2 + 6);
+        const bounds = pointBounds(stroke.points);
+        const insideRectangle = stroke.kind === "rectangle"
+            && point.x >= bounds.minX - tolerance
+            && point.x <= bounds.maxX + tolerance
+            && point.y >= bounds.minY - tolerance
+            && point.y <= bounds.maxY + tolerance;
+        if (insideRectangle || distanceToStroke(point, stroke) <= tolerance) {
+            return { kind: "stroke", id: stroke.id };
+        }
+    }
+    return null;
+}
+function constrainedDelta(points, delta, bounds) {
+    if (points.length === 0)
+        return delta;
+    const { minX, maxX, minY, maxY } = pointBounds(points);
+    let x = delta.x;
+    let y = delta.y;
+    if (minX + x < 0)
+        x = -minX;
+    else if (maxX + x > bounds.width)
+        x = bounds.width - maxX;
+    if (minY + y < 0)
+        y = -minY;
+    else if (maxY + y > bounds.height)
+        y = bounds.height - maxY;
+    return { x, y };
+}
+export function translateSketchStroke(stroke, delta, bounds) {
+    const constrained = constrainedDelta(stroke.points, delta, bounds);
+    return {
+        ...stroke,
+        points: stroke.points.map((point) => ({
+            x: point.x + constrained.x,
+            y: point.y + constrained.y,
+        })),
+    };
+}
+export function translateSketchAnnotation(annotation, delta, bounds) {
+    const constrained = constrainedDelta([annotation.point], delta, bounds);
+    return {
+        ...annotation,
+        point: {
+            x: annotation.point.x + constrained.x,
+            y: annotation.point.y + constrained.y,
+        },
+    };
+}

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

@@ -0,0 +1,21 @@
+import type { AgentSketchAttachment, AgentSketchMetadata } from "../agent/protocol.js";
+import { type SketchQueueItem } from "./model.js";
+export interface SketchHandoffEntry {
+    readonly id: string;
+    readonly revision: number;
+    readonly metadata: AgentSketchMetadata;
+    readonly annotatedImage: Blob;
+}
+export interface SketchClipboardHandoffSnapshot {
+    readonly localBatchId: string;
+    readonly entries: readonly SketchHandoffEntry[];
+}
+export declare function createSketchHandoffSnapshot(items: readonly SketchQueueItem[]): SketchClipboardHandoffSnapshot | null;
+export declare function createSketchAttachments(handoff: SketchClipboardHandoffSnapshot): Promise<AgentSketchAttachment[]>;
+export declare function sketchMetadataForHandoff(handoff: SketchClipboardHandoffSnapshot | null): readonly AgentSketchMetadata[];
+export declare function getSketchClipboardHandoffSnapshot(): SketchClipboardHandoffSnapshot | null;
+export declare function subscribeSketchClipboardHandoff(listener: () => void): () => void;
+export declare function useSketchClipboardHandoff(): SketchClipboardHandoffSnapshot | null;
+export declare function recordSketchClipboardHandoff(snapshot: SketchClipboardHandoffSnapshot | null): void;
+export declare function clearSketchClipboardHandoff(): void;
+export declare function resetSketchClipboardHandoff(): void;