@reekon-tools/boldr-utils 1.6.4 → 1.6.6

package/dist/canvas/elements/StrokeElement.d.ts

@@ -0,0 +1,7 @@
+import { type SkPath } from '@shopify/react-native-skia';
+import type { AnnotationStroke } from '../../types/annotation.js';
+export declare const pointsToSkPath: (points: number[]) => SkPath;
+export interface StrokeElementProps {
+    stroke: AnnotationStroke;
+}
+export declare const StrokeElement: ({ stroke }: StrokeElementProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/elements/StrokeElement.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Path, Skia } from '@shopify/react-native-skia';
+import { useMemo } from 'react';
+export const pointsToSkPath = (points) => {
+    const path = Skia.Path.Make();
+    if (points.length < 2)
+        return path;
+    path.moveTo(points[0], points[1]);
+    for (let i = 2; i < points.length; i += 2) {
+        path.lineTo(points[i], points[i + 1]);
+    }
+    return path;
+};
+export const StrokeElement = ({ stroke }) => {
+    const path = useMemo(() => pointsToSkPath(stroke.points), [stroke.points]);
+    const opacity = stroke.tool === 'highlighter' ? 0.3 : 1;
+    return (_jsx(Path, { path: path, color: stroke.color, style: "stroke", strokeWidth: stroke.width, strokeCap: "round", strokeJoin: "round", opacity: opacity }));
+};

package/dist/canvas/measurementPicker.d.ts

@@ -0,0 +1,10 @@
+import type { Units } from '../types/firestore.js';
+export interface MeasurementRef {
+    measurementId: string;
+    measurementPath: string;
+    groupId: string;
+    label?: string;
+    value?: number;
+    unit?: Units;
+}
+export type PickMeasurement = () => Promise<MeasurementRef | null>;

package/dist/canvas/measurementPicker.js

@@ -0,0 +1 @@
+export {};

package/dist/canvas/pointerAdapter.d.ts

@@ -0,0 +1,3 @@
+import type { CanvasPointerEvent } from './Tool.js';
+import type { ViewportApi } from './viewport.js';
+export declare const domEventToCanvasPointerEvent: (event: PointerEvent, canvas: HTMLElement, viewport: ViewportApi) => CanvasPointerEvent;

package/dist/canvas/pointerAdapter.js

@@ -0,0 +1,19 @@
+// Web DOM PointerEvent → CanvasPointerEvent. The native variant will live
+// in pointerAdapter.native.ts and will translate gesture-handler events.
+export const domEventToCanvasPointerEvent = (event, canvas, viewport) => {
+    const rect = canvas.getBoundingClientRect();
+    const screen = {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+    };
+    return {
+        pointerId: event.pointerId,
+        screen,
+        world: viewport.screenToWorld(screen),
+        pressure: event.pressure || undefined,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey,
+        ctrlKey: event.ctrlKey,
+    };
+};

package/dist/canvas/stampLayout.d.ts

@@ -0,0 +1,4 @@
+export declare const STAMP_WIDTH = 120;
+export declare const STAMP_HEIGHT = 44;
+export declare const STAMP_PADDING_X = 10;
+export declare const STAMP_PADDING_Y = 6;

package/dist/canvas/stampLayout.js

@@ -0,0 +1,8 @@
+// Shared layout constants for the placed measurement stamp. Lives in a
+// Skia-free module so both render (MeasurementStampElement) and hit-test
+// (selectTool) can import it without dragging @shopify/react-native-skia
+// into the consumer's static import graph.
+export const STAMP_WIDTH = 120;
+export const STAMP_HEIGHT = 44;
+export const STAMP_PADDING_X = 10;
+export const STAMP_PADDING_Y = 6;

package/dist/canvas/tools/measurementStampTool.d.ts

@@ -0,0 +1,9 @@
+import type { PlacedMeasurementRef } from '../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export interface MeasurementStampToolOptions {
+    autoSwitchToSelect?: boolean;
+    onPlaced?: (ref: PlacedMeasurementRef) => void;
+    onAutoSwitch?: (toToolId: string) => void;
+    selectToolId?: string;
+}
+export declare const createMeasurementStampTool: (options?: MeasurementStampToolOptions) => Tool;

package/dist/canvas/tools/measurementStampTool.js

@@ -0,0 +1,37 @@
+import { DEFAULT_LAYER_ID } from '../../types/annotation.js';
+let counter = 0;
+const makeId = () => `measurement-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
+export const createMeasurementStampTool = (options = {}) => {
+    const autoSwitchToSelect = options.autoSwitchToSelect ?? true;
+    const selectToolId = options.selectToolId ?? 'select';
+    return {
+        id: 'measurement',
+        label: 'Place measurement',
+        cursor: 'copy',
+        onPointerUp(event, ctx) {
+            // Tap-to-place. Open the consumer's picker and commit on selection.
+            void ctx.requestPickMeasurement().then((ref) => {
+                if (!ref)
+                    return;
+                const placed = {
+                    id: makeId(),
+                    layerId: firstLayerId(ctx.document),
+                    measurementPath: ref.measurementPath,
+                    measurementId: ref.measurementId,
+                    groupId: ref.groupId,
+                    anchor: event.world,
+                    labelOverride: ref.label,
+                    unitOverride: ref.unit,
+                    showLabel: true,
+                    showValue: true,
+                    createdAt: Date.now(),
+                };
+                ctx.commit({ ops: [{ op: 'addMeasurement', measurement: placed }] });
+                options.onPlaced?.(placed);
+                if (autoSwitchToSelect)
+                    options.onAutoSwitch?.(selectToolId);
+            });
+        },
+    };
+};

package/dist/canvas/tools/panTool.d.ts

@@ -0,0 +1,5 @@
+import type { Tool } from '../Tool.js';
+export interface PanToolOptions {
+    cursor?: string;
+}
+export declare const createPanTool: (options?: PanToolOptions) => Tool;

package/dist/canvas/tools/panTool.js

@@ -0,0 +1,25 @@
+// Built-in "Hand" tool. When active, any drag pans the viewport. Tools that
+// want one-off pan triggers (middle-mouse, space-drag) get those via the
+// AnnotationCanvas `gestures` prop without needing to switch tools.
+export const createPanTool = (options = {}) => ({
+    id: 'pan',
+    label: 'Hand',
+    cursor: options.cursor ?? 'grab',
+    onPointerDown(event, _ctx, _state) {
+        return { kind: 'panning', lastScreen: event.screen };
+    },
+    onPointerMove(event, ctx, state) {
+        const s = state;
+        if (s?.kind !== 'panning')
+            return s;
+        const delta = {
+            x: event.screen.x - s.lastScreen.x,
+            y: event.screen.y - s.lastScreen.y,
+        };
+        ctx.applyPan(delta);
+        return { kind: 'panning', lastScreen: event.screen };
+    },
+    onPointerUp(_event, _ctx, _state) {
+        // No commit — viewport state is canvas-internal, not persisted.
+    },
+});

package/dist/canvas/tools/penTool.d.ts

@@ -0,0 +1,13 @@
+import type { AnnotationStroke } from '../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export interface PenToolOptions {
+    color?: string;
+    width?: number;
+    minSampleDistance?: number;
+    variant?: 'pen' | 'marker' | 'highlighter';
+}
+export interface PenDrawingState {
+    kind: 'pen-drawing';
+    stroke: AnnotationStroke;
+}
+export declare const createPenTool: (options?: PenToolOptions) => Tool;

package/dist/canvas/tools/penTool.js

@@ -0,0 +1,68 @@
+import { DEFAULT_LAYER_ID } from '../../types/annotation.js';
+const distSq = (ax, ay, bx, by) => {
+    const dx = ax - bx;
+    const dy = ay - by;
+    return dx * dx + dy * dy;
+};
+let counter = 0;
+const makeId = (prefix) => `${prefix}-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+export const createPenTool = (options = {}) => {
+    const color = options.color ?? '#111827';
+    const width = options.width ?? 2;
+    const variant = options.variant ?? 'pen';
+    const minSampleDistance = options.minSampleDistance ?? 1.5;
+    const minSampleDistanceSq = minSampleDistance * minSampleDistance;
+    return {
+        id: variant,
+        label: variant === 'pen' ? 'Pen' : variant === 'marker' ? 'Marker' : 'Highlighter',
+        cursor: 'crosshair',
+        onPointerDown(event, ctx) {
+            const stroke = {
+                id: makeId('stroke'),
+                layerId: ctx.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
+                tool: variant,
+                color,
+                width,
+                points: [event.world.x, event.world.y],
+                pressure: event.pressure !== undefined ? [event.pressure] : undefined,
+                createdAt: Date.now(),
+            };
+            return { kind: 'pen-drawing', stroke };
+        },
+        onPointerMove(event, _ctx, state) {
+            const s = state;
+            if (s?.kind !== 'pen-drawing')
+                return s;
+            const len = s.stroke.points.length;
+            const lastX = s.stroke.points[len - 2];
+            const lastY = s.stroke.points[len - 1];
+            if (distSq(lastX, lastY, event.world.x, event.world.y) < minSampleDistanceSq) {
+                return s;
+            }
+            return {
+                kind: 'pen-drawing',
+                stroke: {
+                    ...s.stroke,
+                    points: [...s.stroke.points, event.world.x, event.world.y],
+                    pressure: s.stroke.pressure && event.pressure !== undefined
+                        ? [...s.stroke.pressure, event.pressure]
+                        : s.stroke.pressure,
+                },
+            };
+        },
+        onPointerUp(_event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'pen-drawing')
+                return;
+            // Need at least two distinct samples to be a stroke.
+            if (s.stroke.points.length < 4)
+                return;
+            ctx.commit({ ops: [{ op: 'addStroke', stroke: s.stroke }] });
+        },
+        // No renderPreview. The canvas inner detects PenDrawingState in
+        // toolState and renders the in-flight stroke directly with its own
+        // (Skia-aware) StrokeElement. Keeping tools Skia-free is what lets
+        // consumers import them statically without breaking WithSkiaWeb's
+        // lazy-load ordering on web.
+    };
+};

package/dist/canvas/tools/selectTool.d.ts

@@ -0,0 +1,2 @@
+import type { Tool } from '../Tool.js';
+export declare const createSelectTool: () => Tool;

package/dist/canvas/tools/selectTool.js

@@ -0,0 +1,182 @@
+import { STAMP_HEIGHT, STAMP_WIDTH } from '../stampLayout.js';
+const HIT_PADDING = 6;
+// Hit-test in doc-space. Crude but fast — good enough for v1; tools can
+// override via `hitTest` for more precision later.
+const hitStroke = (stroke, p) => {
+    const r = stroke.width / 2 + HIT_PADDING;
+    const r2 = r * r;
+    for (let i = 0; i < stroke.points.length - 2; i += 2) {
+        if (segmentDistanceSq(p.x, p.y, stroke.points[i], stroke.points[i + 1], stroke.points[i + 2], stroke.points[i + 3]) <= r2) {
+            return true;
+        }
+    }
+    return false;
+};
+const hitMeasurement = (m, p) => {
+    // Stamp rectangle is fixed-size, centered on the anchor and scaled by
+    // `placed.scale`. Match the hit box exactly to that rectangle (plus a
+    // small padding so the click target feels generous).
+    const scale = m.scale ?? 1;
+    const halfW = (STAMP_WIDTH * scale) / 2 + HIT_PADDING;
+    const halfH = (STAMP_HEIGHT * scale) / 2 + HIT_PADDING;
+    const dx = Math.abs(p.x - m.anchor.x);
+    const dy = Math.abs(p.y - m.anchor.y);
+    return dx <= halfW && dy <= halfH;
+};
+const segmentDistanceSq = (px, py, ax, ay, bx, by) => {
+    const abx = bx - ax;
+    const aby = by - ay;
+    const lenSq = abx * abx + aby * aby;
+    let t = lenSq === 0 ? 0 : ((px - ax) * abx + (py - ay) * aby) / lenSq;
+    t = Math.max(0, Math.min(1, t));
+    const cx = ax + t * abx;
+    const cy = ay + t * aby;
+    const dx = px - cx;
+    const dy = py - cy;
+    return dx * dx + dy * dy;
+};
+const findHit = (doc, world) => {
+    // Hit-test in z-order (top first): measurements > shapes > strokes.
+    for (let i = doc.placedMeasurements.length - 1; i >= 0; i--) {
+        const m = doc.placedMeasurements[i];
+        if (hitMeasurement(m, world))
+            return { id: m.id, kind: 'measurement' };
+    }
+    for (let i = doc.shapes.length - 1; i >= 0; i--) {
+        // Default shape hit test: bounding box of the shape's points + padding.
+        const s = doc.shapes[i];
+        const pts = s.geometry.points;
+        if (pts.length === 0)
+            continue;
+        let minX = pts[0].x;
+        let maxX = pts[0].x;
+        let minY = pts[0].y;
+        let maxY = pts[0].y;
+        for (let j = 1; j < pts.length; j++) {
+            const p = pts[j];
+            if (p.x < minX)
+                minX = p.x;
+            if (p.x > maxX)
+                maxX = p.x;
+            if (p.y < minY)
+                minY = p.y;
+            if (p.y > maxY)
+                maxY = p.y;
+        }
+        if (world.x >= minX - HIT_PADDING &&
+            world.x <= maxX + HIT_PADDING &&
+            world.y >= minY - HIT_PADDING &&
+            world.y <= maxY + HIT_PADDING) {
+            return { id: s.id, kind: 'shape' };
+        }
+    }
+    for (let i = doc.strokes.length - 1; i >= 0; i--) {
+        const s = doc.strokes[i];
+        if (hitStroke(s, world))
+            return { id: s.id, kind: 'stroke' };
+    }
+    return null;
+};
+const translatePatch = (elementKind, id, doc, delta) => {
+    if (elementKind === 'measurement') {
+        const m = doc.placedMeasurements.find((x) => x.id === id);
+        if (!m)
+            return null;
+        return {
+            op: 'updateMeasurement',
+            id,
+            patch: {
+                anchor: { x: m.anchor.x + delta.x, y: m.anchor.y + delta.y },
+                leader: m.leader
+                    ? {
+                        from: {
+                            x: m.leader.from.x + delta.x,
+                            y: m.leader.from.y + delta.y,
+                        },
+                        to: {
+                            x: m.leader.to.x + delta.x,
+                            y: m.leader.to.y + delta.y,
+                        },
+                    }
+                    : undefined,
+            },
+        };
+    }
+    if (elementKind === 'shape') {
+        const s = doc.shapes.find((x) => x.id === id);
+        if (!s)
+            return null;
+        return {
+            op: 'updateShape',
+            id,
+            patch: {
+                geometry: {
+                    ...s.geometry,
+                    points: s.geometry.points.map((p) => ({
+                        x: p.x + delta.x,
+                        y: p.y + delta.y,
+                    })),
+                },
+            },
+        };
+    }
+    const stroke = doc.strokes.find((x) => x.id === id);
+    if (!stroke)
+        return null;
+    const points = stroke.points.slice();
+    for (let i = 0; i < points.length; i += 2) {
+        points[i] = points[i] + delta.x;
+        points[i + 1] = points[i + 1] + delta.y;
+    }
+    return { op: 'updateStroke', id, patch: { points } };
+};
+export const createSelectTool = () => ({
+    id: 'select',
+    label: 'Select',
+    cursor: 'default',
+    onPointerDown(event, ctx) {
+        const hit = findHit(ctx.document, event.world);
+        if (!hit) {
+            ctx.setSelection(null);
+            return { kind: 'idle' };
+        }
+        ctx.setSelection({ ids: [hit.id] });
+        return {
+            kind: 'dragging',
+            id: hit.id,
+            elementKind: hit.kind,
+            start: event.world,
+            delta: { x: 0, y: 0 },
+        };
+    },
+    onPointerMove(event, ctx, state) {
+        const s = state;
+        if (s?.kind !== 'dragging')
+            return s;
+        const delta = { x: event.world.x - s.start.x, y: event.world.y - s.start.y };
+        const op = translatePatch(s.elementKind, s.id, ctx.document, delta);
+        if (op)
+            ctx.preview({ ops: [op] });
+        return { ...s, delta };
+    },
+    onPointerUp(_event, ctx, state) {
+        const s = state;
+        if (s?.kind !== 'dragging')
+            return;
+        if (s.delta.x === 0 && s.delta.y === 0)
+            return;
+        const op = translatePatch(s.elementKind, s.id, ctx.document, s.delta);
+        if (op)
+            ctx.commit({ ops: [op] });
+    },
+    onCancel(_state, ctx) {
+        ctx.preview({ ops: [] });
+    },
+    hitTest(element, p) {
+        if (element.kind === 'measurement')
+            return hitMeasurement(element, p);
+        if (element.kind === 'stroke')
+            return hitStroke(element, p);
+        return false;
+    },
+});

package/dist/canvas/useAnnotationCanvasState.d.ts

@@ -0,0 +1,53 @@
+import type { Measurement } from '../types/firestore.js';
+import { type AnnotationCanvasState, type AnnotationDocumentPatch, type AnnotationStroke, type Selection, type Vec2 } from '../types/annotation.js';
+import type { MeasurementRef } from './measurementPicker.js';
+import type { CanvasPointerEvent, Tool, ToolContext, ToolState } from './Tool.js';
+import { type ViewportState } from './viewport.js';
+export interface AnnotationCanvasHandle {
+    undo(): void;
+    redo(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    zoomToFit(): void;
+    resetView(): void;
+}
+export interface UseAnnotationCanvasStateProps {
+    canvas: AnnotationCanvasState;
+    onCommit(patch: AnnotationDocumentPatch): void;
+    tools: Tool[];
+    activeToolId: string;
+    selection: Selection | null;
+    onSelectionChange(selection: Selection | null): void;
+    measurements?: Measurement[];
+    pickMeasurement?: () => Promise<MeasurementRef | null>;
+    width: number;
+    height: number;
+    initialViewport?: ViewportState;
+    imperativeRef?: {
+        current: AnnotationCanvasHandle | null;
+    };
+}
+export interface AnnotationCanvasStateApi {
+    effectiveCanvas: AnnotationCanvasState;
+    worldTransform: Array<{
+        scale: number;
+    } | {
+        translateX: number;
+    } | {
+        translateY: number;
+    }>;
+    viewport: ViewportState;
+    measurementsById: Map<string, Measurement>;
+    activeTool: Tool | null;
+    toolState: ToolState;
+    ctx: ToolContext;
+    penDrawingStroke: AnnotationStroke | null;
+    customPreviewState: ToolState;
+    dispatchPointerDown(event: CanvasPointerEvent): void;
+    dispatchPointerMove(event: CanvasPointerEvent): void;
+    dispatchPointerUp(event: CanvasPointerEvent): void;
+    dispatchPointerCancel(): void;
+    pan(deltaScreen: Vec2): void;
+    zoom(focalScreen: Vec2, nextZoom: number): void;
+}
+export declare const useAnnotationCanvasState: (props: UseAnnotationCanvasStateProps) => AnnotationCanvasStateApi;

package/dist/canvas/useAnnotationCanvasState.js

@@ -0,0 +1,182 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { applyPatch, invertPatch, } from '../types/annotation.js';
+import { createViewportApi, panBy, zoomAt, DEFAULT_VIEWPORT, } from './viewport.js';
+// Platform-agnostic state machine for the annotation canvas. Web and native
+// inners share this hook; each wraps it with platform-specific event
+// capture and JSX (div + DOM events vs. GestureDetector + RN Views).
+export const useAnnotationCanvasState = (props) => {
+    const { canvas, onCommit, tools, activeToolId, selection, onSelectionChange, measurements, pickMeasurement, width, height, initialViewport, imperativeRef, } = props;
+    const [viewport, setViewport] = useState(initialViewport ?? DEFAULT_VIEWPORT);
+    const [toolState, setToolState] = useState(undefined);
+    const [previewPatch, setPreviewPatch] = useState(null);
+    const undoStackRef = useRef([]);
+    const redoStackRef = useRef([]);
+    const activePointerIdRef = useRef(null);
+    const activeTool = useMemo(() => tools.find((t) => t.id === activeToolId) ?? null, [tools, activeToolId]);
+    const effectiveCanvas = useMemo(() => (previewPatch ? applyPatch(canvas, previewPatch) : canvas), [canvas, previewPatch]);
+    const measurementsById = useMemo(() => {
+        const map = new Map();
+        measurements?.forEach((m) => map.set(m.id, m));
+        return map;
+    }, [measurements]);
+    const viewportApi = useMemo(() => createViewportApi(viewport), [viewport]);
+    const ctx = useMemo(() => ({
+        document: canvas,
+        selection,
+        viewport: viewportApi,
+        preview(patch) {
+            setPreviewPatch(patch);
+        },
+        commit(patch) {
+            const inverse = invertPatch(canvas, patch);
+            undoStackRef.current.push({ forward: patch, inverse });
+            redoStackRef.current = [];
+            setPreviewPatch(null);
+            onCommit(patch);
+        },
+        setSelection(s) {
+            onSelectionChange(s);
+        },
+        requestPickMeasurement() {
+            return pickMeasurement ? pickMeasurement() : Promise.resolve(null);
+        },
+        applyPan(deltaScreen) {
+            setViewport((v) => panBy(v, deltaScreen));
+        },
+        applyZoom(focalScreen, nextZoom) {
+            setViewport((v) => zoomAt(v, focalScreen, nextZoom));
+        },
+    }), [
+        canvas,
+        selection,
+        viewportApi,
+        onCommit,
+        onSelectionChange,
+        pickMeasurement,
+    ]);
+    const dispatchPointerDown = useCallback((event) => {
+        if (!activeTool)
+            return;
+        activePointerIdRef.current = event.pointerId;
+        const next = activeTool.onPointerDown?.(event, ctx, toolState);
+        if (next !== undefined)
+            setToolState(next);
+    }, [activeTool, ctx, toolState]);
+    const dispatchPointerMove = useCallback((event) => {
+        if (!activeTool)
+            return;
+        if (activePointerIdRef.current !== null &&
+            event.pointerId !== activePointerIdRef.current) {
+            return;
+        }
+        const next = activeTool.onPointerMove?.(event, ctx, toolState);
+        if (next !== undefined)
+            setToolState(next);
+    }, [activeTool, ctx, toolState]);
+    const dispatchPointerUp = useCallback((event) => {
+        if (!activeTool)
+            return;
+        if (activePointerIdRef.current !== null &&
+            event.pointerId !== activePointerIdRef.current) {
+            return;
+        }
+        activeTool.onPointerUp?.(event, ctx, toolState);
+        activePointerIdRef.current = null;
+        setToolState(undefined);
+    }, [activeTool, ctx, toolState]);
+    const dispatchPointerCancel = useCallback(() => {
+        if (activeTool)
+            activeTool.onCancel?.(toolState, ctx);
+        activePointerIdRef.current = null;
+        setToolState(undefined);
+        setPreviewPatch(null);
+    }, [activeTool, ctx, toolState]);
+    const pan = useCallback((deltaScreen) => {
+        setViewport((v) => panBy(v, deltaScreen));
+    }, []);
+    const zoom = useCallback((focalScreen, nextZoom) => {
+        setViewport((v) => zoomAt(v, focalScreen, nextZoom));
+    }, []);
+    // Imperative API mirror — set via prop so it survives WithSkiaWeb's lazy
+    // boundary on web.
+    useEffect(() => {
+        if (!imperativeRef)
+            return;
+        imperativeRef.current = {
+            undo() {
+                const entry = undoStackRef.current.pop();
+                if (!entry)
+                    return;
+                redoStackRef.current.push(entry);
+                onCommit(entry.inverse);
+            },
+            redo() {
+                const entry = redoStackRef.current.pop();
+                if (!entry)
+                    return;
+                undoStackRef.current.push(entry);
+                onCommit(entry.forward);
+            },
+            canUndo() {
+                return undoStackRef.current.length > 0;
+            },
+            canRedo() {
+                return redoStackRef.current.length > 0;
+            },
+            zoomToFit() {
+                setViewport(() => {
+                    const docW = canvas.viewport.width;
+                    const docH = canvas.viewport.height;
+                    const z = Math.min(width / docW, height / docH);
+                    const offsetX = (width - docW * z) / 2;
+                    const offsetY = (height - docH * z) / 2;
+                    return { zoom: z, pan: { x: -offsetX / z, y: -offsetY / z } };
+                });
+            },
+            resetView() {
+                setViewport(DEFAULT_VIEWPORT);
+            },
+        };
+        return () => {
+            if (imperativeRef)
+                imperativeRef.current = null;
+        };
+    }, [
+        imperativeRef,
+        onCommit,
+        canvas.viewport.width,
+        canvas.viewport.height,
+        width,
+        height,
+    ]);
+    const worldTransform = useMemo(() => [
+        { scale: viewport.zoom },
+        { translateX: -viewport.pan.x },
+        { translateY: -viewport.pan.y },
+    ], [viewport]);
+    // Detect the built-in pen tool's in-flight state shape so the canvas can
+    // render the preview (the tool factory is Skia-free and can't render).
+    const penDrawingStroke = toolState &&
+        typeof toolState === 'object' &&
+        'kind' in toolState &&
+        toolState.kind === 'pen-drawing'
+        ? toolState.stroke
+        : null;
+    return {
+        effectiveCanvas,
+        worldTransform,
+        viewport,
+        measurementsById,
+        activeTool,
+        toolState,
+        ctx,
+        penDrawingStroke,
+        customPreviewState: toolState,
+        dispatchPointerDown,
+        dispatchPointerMove,
+        dispatchPointerUp,
+        dispatchPointerCancel,
+        pan,
+        zoom,
+    };
+};