@reekon-tools/boldr-utils 1.24.0 → 1.26.0

package/dist/annotation/canvas/useAnnotationCanvasState.d.ts

@@ -23,6 +23,17 @@ export interface AnnotationCanvasHandle {
         animated?: boolean;
         durationMs?: number;
     }): void;
+    fitDocRect(rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }, opts?: {
+        animated?: boolean;
+        durationMs?: number;
+        paddingPx?: number;
+        maxZoom?: number;
+    }): void;
     getTileScaleFactor(): number;
     getHeaderTileScaleFactor(): number;
     getFileTileScaleFactor(): number;

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { applyPatch, invertPatch, DEFAULT_LAYER_ID, } from '../../types/annotation.js';
 import { resolveHeaderTileScaleFactor, resolveFileTileScaleFactor, resolveTileScaleFactor, stampTileDims, STAMP_TILE_SIZE, tileDocSizeForFactor, tileScaleFromDocSize, } from './stampLayout.js';
 import { SNAP_RADIUS_PX } from './snapGeometry.js';
-import { createViewportApi, fitRectToScreen, panBy, zoomAt, DEFAULT_VIEWPORT, DEFAULT_ZOOM_LIMITS, } from './viewport.js';
+import { createViewportApi, fitDocRectViewport, fitRectToScreen, panBy, zoomAt, DEFAULT_VIEWPORT, DEFAULT_ZOOM_LIMITS, } from './viewport.js';
 import { computeZoomFloor, pdfFirstPageDocRect } from './pdfDocument.js';
 import { backgroundLayerDocRect, backgroundLayersOf, backgroundLayersUnionRect, } from './backgroundLayers.js';
 import { buildRemoveMeasurementOps, recomputeAnchor, rectCenter, DEFAULT_LINE_POS, } from './measurementGeometry.js';
@@ -555,6 +555,22 @@ export const useAnnotationCanvasState = (props) => {
                     setViewport(target);
                 }
             },
+            fitDocRect(rect, opts) {
+                if (!(width > 0) || !(height > 0))
+                    return;
+                const limits = zoomLimitsRef.current;
+                const target = fitDocRectViewport(rect, width, height, {
+                    paddingPx: opts?.paddingPx,
+                    minZoom: limits.min,
+                    maxZoom: Math.min(opts?.maxZoom ?? limits.max, limits.max),
+                });
+                if (opts?.animated && animateViewport) {
+                    animateViewport(target, opts.durationMs ?? 450);
+                }
+                else {
+                    setViewport(target);
+                }
+            },
             getTileScaleFactor() {
                 return ctxRef.current.tileScaleFactor;
             },

package/dist/annotation/canvas/viewport.d.ts

@@ -24,6 +24,16 @@ export declare const fitRectToScreen: (rect: {
     width: number;
     height: number;
 }, screenWidth: number, screenHeight: number, padding?: number) => ViewportState;
+export declare const fitDocRectViewport: (rect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, screenWidth: number, screenHeight: number, limits?: {
+    paddingPx?: number;
+    minZoom?: number;
+    maxZoom?: number;
+}) => ViewportState;
 export declare const DEFAULT_ZOOM_LIMITS: {
     readonly min: 0.05;
     readonly max: 50;

package/dist/annotation/canvas/viewport.js

@@ -62,6 +62,32 @@ export const fitRectToScreen = (rect, screenWidth, screenHeight, padding = 0) =>
         pan: { x: rect.x - offsetX / zoom, y: rect.y - offsetY / zoom },
     };
 };
+// Frame a DOC-space rect (a text-search hit, a tile) centred in the screen:
+// zoom so the rect plus `paddingPx` of screen padding fits, clamped to
+// [minZoom, maxZoom] — so a two-word hit does not zoom to 50× and a whole-page
+// rect cannot go below the document's floor — then centre the rect at that
+// zoom (screen = (world − pan) · zoom, so pan = centre − half-screen / zoom).
+export const fitDocRectViewport = (rect, screenWidth, screenHeight, limits = {}) => {
+    const safe = {
+        x: rect.x,
+        y: rect.y,
+        width: Math.max(1, rect.width),
+        height: Math.max(1, rect.height),
+    };
+    const fit = fitRectToScreen(safe, screenWidth, screenHeight, limits.paddingPx ?? 0);
+    const upper = limits.maxZoom ?? Number.POSITIVE_INFINITY;
+    const lower = limits.minZoom ?? 0;
+    const zoom = Math.max(lower, Math.min(fit.zoom, upper));
+    const cx = safe.x + safe.width / 2;
+    const cy = safe.y + safe.height / 2;
+    return {
+        zoom,
+        pan: {
+            x: cx - screenWidth / (2 * zoom),
+            y: cy - screenHeight / (2 * zoom),
+        },
+    };
+};
 // Zoom toward a focal screen point so the world point under the cursor stays
 // fixed. Used for wheel-zoom on web and pinch on native.
 //

package/dist/annotation/data/hooks/usePdfCanvasDoc.js

@@ -23,14 +23,17 @@ export const usePdfCanvasDoc = (options) => {
     const provider = useAnnotationData();
     const { data: file, loading: fileLoading, error: fileError, } = useAnnotationDoc(scope, fileId);
     const pdfCanvas = file?.fileData.pdfCanvas ?? null;
-    const [pageDoc, setPageDoc] = useState(null);
+    // The current page's doc, TAGGED with the page it answers for. On a page
+    // turn the previous page's doc is still in state until the new subscription
+    // reports, and hydrating the new page from it is exactly how annotations
+    // land on the wrong page. `state` null = the page has no doc yet.
+    const [pageSnapshot, setPageSnapshot] = useState(null);
     const [pageLoading, setPageLoading] = useState(true);
     const [pageError, setPageError] = useState(null);
     const [working, setWorking] = useState(null);
     const [saveStatus, setSaveStatus] = useState('idle');
     const workingRef = useRef(null);
     const pdfCanvasRef = useRef(null);
-    const pageDocRef = useRef(null);
     const statusRef = useRef('idle');
     const pageIndexRef = useRef(pageIndex);
     const scopeRef = useRef(scope);
@@ -48,10 +51,9 @@ export const usePdfCanvasDoc = (options) => {
     const thumbnailPromiseRef = useRef(undefined);
     // A page whose edits must be persisted although it is no longer the current
     // page (the user turned the page with unsaved edits).
-    const outgoingRef = useRef(null);
+    const outgoingRef = useRef([]);
     workingRef.current = working;
     pdfCanvasRef.current = pdfCanvas;
-    pageDocRef.current = pageDoc;
     statusRef.current = saveStatus;
     scopeRef.current = scope;
     fileIdRef.current = fileId;
@@ -65,14 +67,17 @@ export const usePdfCanvasDoc = (options) => {
     // Subscribe to the current page's doc.
     useEffect(() => {
         if (!scope || !fileId) {
-            setPageDoc(null);
+            setPageSnapshot(null);
             setPageLoading(false);
             return;
         }
+        // Drop the previous page's snapshot synchronously so nothing can read it
+        // as this page's while the subscription is still connecting.
+        setPageSnapshot(null);
         setPageLoading(true);
         setPageError(null);
         const unsubscribe = provider.subscribePage(scope, fileId, pageIndex, (doc) => {
-            setPageDoc(doc);
+            setPageSnapshot({ pageIndex, state: doc });
             setPageLoading(false);
         }, (err) => {
             setPageError(err);
@@ -154,10 +159,10 @@ export const usePdfCanvasDoc = (options) => {
     // One flush pass: an outgoing page first (if a page turn left one behind),
     // then the current page when it is dirty.
     const runFlush = useCallback(async () => {
-        const outgoing = outgoingRef.current;
-        if (outgoing) {
-            outgoingRef.current = null;
-            await persist(outgoing);
+        // Every page left behind with unsaved edits, in the order they were
+        // left: two quick turns must not lose the middle page.
+        while (outgoingRef.current.length > 0) {
+            await persist(outgoingRef.current.shift());
         }
         const canvas = workingRef.current;
         const data = pdfCanvasRef.current;
@@ -200,11 +205,11 @@ export const usePdfCanvasDoc = (options) => {
         if (previous &&
             data &&
             (statusRef.current === 'dirty' || statusRef.current === 'error')) {
-            outgoingRef.current = {
+            outgoingRef.current.push({
                 pageIndex: pageIndexRef.current,
                 canvas: previous,
                 pdfCanvas: data,
-            };
+            });
             void flush();
         }
         pageIndexRef.current = pageIndex;
@@ -225,6 +230,10 @@ export const usePdfCanvasDoc = (options) => {
             return;
         if (pageIndex >= pdfCanvas.document.pages.length)
             return;
+        // Only a snapshot for THIS page counts (see pageSnapshot).
+        if (!pageSnapshot || pageSnapshot.pageIndex !== pageIndex)
+            return;
+        const pageDoc = pageSnapshot.state;
         if (workingRef.current === null) {
             const next = pageStateToCanvasState(pdfCanvas, pageDoc, pageIndex);
             workingRef.current = next;
@@ -241,7 +250,7 @@ export const usePdfCanvasDoc = (options) => {
         workingRef.current = next;
         setWorking(next);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [pdfCanvas, pageDoc, pageLoading, pageIndex]);
+    }, [pdfCanvas, pageSnapshot, pageLoading, pageIndex]);
     const onCommit = useCallback((patch) => {
         editSeqRef.current += 1;
         setWorking((prev) => {

package/dist/canvas/AnnotationCanvas.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import type { AnnotationCanvasInnerProps } from './AnnotationCanvasInner.js';
+export type { AnnotationCanvasHandle, GestureConfig, PanTrigger, } from './AnnotationCanvasInner.js';
+export interface CanvasKitOpts {
+    locateFile?: (file: string) => string;
+}
+export type AnnotationCanvasProps = AnnotationCanvasInnerProps & {
+    fallback?: ReactNode;
+    canvasKitOpts?: CanvasKitOpts;
+};
+export declare const AnnotationCanvas: ({ fallback, canvasKitOpts, ...rest }: AnnotationCanvasProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/AnnotationCanvas.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WithSkiaWeb } from '@shopify/react-native-skia/lib/module/web/index.js';
+// Web-only entry point: lazy-loads CanvasKit wasm via WithSkiaWeb. Imperative
+// API (undo/redo/zoom) is exposed through the `imperativeRef` prop rather
+// than React refs, since WithSkiaWeb can't forward refs through its lazy
+// component boundary. The native build sits in `AnnotationCanvas.native.tsx`
+// and skips WithSkiaWeb entirely (no wasm to load).
+export const AnnotationCanvas = ({ fallback, canvasKitOpts, ...rest }) => (_jsx(WithSkiaWeb, { getComponent: () => import('./AnnotationCanvasInner.js').then((m) => ({
+        default: m.AnnotationCanvasInner,
+    })), fallback: fallback ?? null, componentProps: rest, opts: canvasKitOpts }));

package/dist/canvas/AnnotationCanvas.native.d.ts

@@ -0,0 +1,8 @@
+import type { AnnotationCanvasInnerProps } from './AnnotationCanvasInner.native.js';
+export type { AnnotationCanvasHandle, } from './useAnnotationCanvasState.js';
+export type { GestureConfig, PanTrigger, } from './AnnotationCanvasInner.js';
+export type AnnotationCanvasProps = AnnotationCanvasInnerProps & {
+    fallback?: unknown;
+    canvasKitOpts?: unknown;
+};
+export declare const AnnotationCanvas: (props: AnnotationCanvasProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/AnnotationCanvas.native.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AnnotationCanvasInner } from './AnnotationCanvasInner.native.js';
+export const AnnotationCanvas = (props) => {
+    const { fallback: _f, canvasKitOpts: _o, ...rest } = props;
+    return _jsx(AnnotationCanvasInner, { ...rest });
+};

package/dist/canvas/AnnotationCanvasInner.d.ts

@@ -0,0 +1,39 @@
+import { type CSSProperties, type MutableRefObject } from 'react';
+import type { DecimalTolerance, FractionalTolerance, Measurement, Units } from '../types/firestore.js';
+import type { AnnotationCanvasState, AnnotationDocumentPatch, Selection } from '../types/annotation.js';
+import type { MeasurementRef } from './measurementPicker.js';
+import type { Tool } from './Tool.js';
+import { type AnnotationCanvasHandle } from './useAnnotationCanvasState.js';
+import { type ViewportState } from './viewport.js';
+import type { RenderMeasurementStamp } from './measurementStampOverlay.js';
+export type { AnnotationCanvasHandle };
+export interface AnnotationCanvasInnerProps {
+    canvas: AnnotationCanvasState;
+    onCommit(patch: AnnotationDocumentPatch): void;
+    tools: Tool[];
+    activeToolId: string;
+    selection: Selection | null;
+    onSelectionChange(selection: Selection | null): void;
+    measurements?: Measurement[];
+    fallbackUnit?: Units;
+    fractionalTolerance?: FractionalTolerance;
+    decimalTolerance?: DecimalTolerance;
+    resolveImageUrl?: (storagePath: string) => Promise<string>;
+    pickMeasurement?: () => Promise<MeasurementRef | null>;
+    renderMeasurementStamp?: RenderMeasurementStamp;
+    stampFontSource?: unknown;
+    stampValueFontSize?: number;
+    stampLabelFontSize?: number;
+    gestures?: GestureConfig;
+    width: number;
+    height: number;
+    initialViewport?: ViewportState;
+    style?: CSSProperties;
+    imperativeRef?: MutableRefObject<AnnotationCanvasHandle | null>;
+}
+export type PanTrigger = 'middleMouse' | 'rightMouse' | 'space';
+export interface GestureConfig {
+    wheel?: 'zoom' | 'pan' | 'auto';
+    panTriggers?: PanTrigger[];
+}
+export declare const AnnotationCanvasInner: (props: AnnotationCanvasInnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/AnnotationCanvasInner.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFont } from '@shopify/react-native-skia';
+import { useCallback, useEffect, useRef, } from 'react';
+import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
+import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
+import { STAMP_TILE_SIZE } from './stampLayout.js';
+const DEFAULT_PAN_TRIGGERS = ['middleMouse', 'space'];
+export const AnnotationCanvasInner = (props) => {
+    const { fallbackUnit, fractionalTolerance, decimalTolerance, resolveImageUrl, stampFontSource, stampValueFontSize = 14, stampLabelFontSize = 11, gestures, width, height, style, activeToolId, tools, } = props;
+    const wheelMode = gestures?.wheel ?? 'auto';
+    const panTriggers = gestures?.panTriggers ?? DEFAULT_PAN_TRIGGERS;
+    const allowSpacePan = panTriggers.includes('space');
+    const allowMiddlePan = panTriggers.includes('middleMouse');
+    const allowRightPan = panTriggers.includes('rightMouse');
+    const valueFont = useFont(stampFontSource, stampValueFontSize);
+    const labelFont = useFont(stampFontSource, stampLabelFontSize);
+    const state = useAnnotationCanvasState(props);
+    const containerRef = useRef(null);
+    const panGestureRef = useRef(null);
+    const spaceDownRef = useRef(false);
+    const activeTool = tools.find((t) => t.id === activeToolId) ?? null;
+    const toCanvasPointer = useCallback((event) => {
+        const rect = containerRef.current?.getBoundingClientRect();
+        const screen = {
+            x: event.clientX - (rect?.left ?? 0),
+            y: event.clientY - (rect?.top ?? 0),
+        };
+        return {
+            pointerId: event.pointerId,
+            screen,
+            world: state.ctx.viewport.screenToWorld(screen),
+            pressure: event.pressure || undefined,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            metaKey: event.metaKey,
+            ctrlKey: event.ctrlKey,
+        };
+    }, [state.ctx.viewport]);
+    const isPanTriggerDown = useCallback((event) => {
+        if (allowMiddlePan && event.button === 1)
+            return true;
+        if (allowRightPan && event.button === 2)
+            return true;
+        if (allowSpacePan && event.button === 0 && spaceDownRef.current)
+            return true;
+        return false;
+    }, [allowMiddlePan, allowRightPan, allowSpacePan]);
+    const handlePointerDown = useCallback((event) => {
+        const rect = containerRef.current?.getBoundingClientRect();
+        const screen = {
+            x: event.clientX - (rect?.left ?? 0),
+            y: event.clientY - (rect?.top ?? 0),
+        };
+        if (isPanTriggerDown(event)) {
+            panGestureRef.current = { pointerId: event.pointerId, lastScreen: screen };
+            event.currentTarget.setPointerCapture(event.pointerId);
+            event.preventDefault();
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        state.dispatchPointerDown(toCanvasPointer(event));
+    }, [state, toCanvasPointer, isPanTriggerDown]);
+    const handlePointerMove = useCallback((event) => {
+        const pan = panGestureRef.current;
+        if (pan && event.pointerId === pan.pointerId) {
+            const rect = containerRef.current?.getBoundingClientRect();
+            const screen = {
+                x: event.clientX - (rect?.left ?? 0),
+                y: event.clientY - (rect?.top ?? 0),
+            };
+            state.pan({
+                x: screen.x - pan.lastScreen.x,
+                y: screen.y - pan.lastScreen.y,
+            });
+            panGestureRef.current = { pointerId: pan.pointerId, lastScreen: screen };
+            return;
+        }
+        state.dispatchPointerMove(toCanvasPointer(event));
+    }, [state, toCanvasPointer]);
+    const handlePointerUp = useCallback((event) => {
+        const pan = panGestureRef.current;
+        if (pan && event.pointerId === pan.pointerId) {
+            panGestureRef.current = null;
+            return;
+        }
+        state.dispatchPointerUp(toCanvasPointer(event));
+    }, [state, toCanvasPointer]);
+    const handlePointerCancel = useCallback(() => {
+        panGestureRef.current = null;
+        state.dispatchPointerCancel();
+    }, [state]);
+    const handleWheel = useCallback((event) => {
+        const rect = containerRef.current?.getBoundingClientRect();
+        const focal = {
+            x: event.clientX - (rect?.left ?? 0),
+            y: event.clientY - (rect?.top ?? 0),
+        };
+        if (event.ctrlKey || event.metaKey) {
+            const factor = Math.exp(-event.deltaY / 200);
+            state.zoom(focal, state.ctx.viewport.state.zoom * factor);
+            return;
+        }
+        if (wheelMode === 'zoom') {
+            const factor = Math.exp(-event.deltaY / 300);
+            state.zoom(focal, state.ctx.viewport.state.zoom * factor);
+            return;
+        }
+        if (event.shiftKey) {
+            state.pan({ x: event.deltaY, y: event.deltaX });
+            return;
+        }
+        state.pan({ x: event.deltaX, y: event.deltaY });
+    }, [state, wheelMode]);
+    const handleContextMenu = useCallback((event) => {
+        if (allowRightPan)
+            event.preventDefault();
+    }, [allowRightPan]);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const stop = (e) => {
+            if (e.target === el || el.contains(e.target)) {
+                e.preventDefault();
+            }
+        };
+        el.addEventListener('wheel', stop, { passive: false });
+        return () => el.removeEventListener('wheel', stop);
+    }, []);
+    useEffect(() => {
+        if (!allowSpacePan)
+            return;
+        const onKeyDown = (e) => {
+            if (e.code === 'Space' && !e.repeat) {
+                spaceDownRef.current = true;
+                if (containerRef.current)
+                    containerRef.current.style.cursor = 'grab';
+            }
+        };
+        const onKeyUp = (e) => {
+            if (e.code === 'Space') {
+                spaceDownRef.current = false;
+                if (containerRef.current)
+                    containerRef.current.style.cursor = '';
+            }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('keyup', onKeyUp);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('keyup', onKeyUp);
+        };
+    }, [allowSpacePan]);
+    const containerStyle = {
+        position: 'relative',
+        width,
+        height,
+        overflow: 'hidden',
+        touchAction: 'none',
+        userSelect: 'none',
+        cursor: activeTool?.cursor ?? 'default',
+        ...style,
+    };
+    const customPreview = activeTool?.renderPreview?.(state.customPreviewState, state.ctx);
+    const { renderMeasurementStamp, selection } = props;
+    return (_jsxs("div", { ref: containerRef, style: containerStyle, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, onWheel: handleWheel, onContextMenu: handleContextMenu, children: [AnnotationCanvasSkia({
+                width,
+                height,
+                effectiveCanvas: state.effectiveCanvas,
+                worldTransform: state.worldTransform,
+                measurementsById: state.measurementsById,
+                fallbackUnit,
+                fractionalTolerance,
+                decimalTolerance,
+                resolveImageUrl,
+                valueFont,
+                labelFont,
+                hideMeasurementStamps: !!renderMeasurementStamp,
+                penDrawingStroke: state.penDrawingStroke,
+                customPreview,
+            }), renderMeasurementStamp && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    pointerEvents: 'none',
+                }, children: state.effectiveCanvas.placedMeasurements.map((placed) => {
+                    const size = STAMP_TILE_SIZE * (placed.scale ?? 1);
+                    const cx = (placed.anchor.x - state.viewport.pan.x) * state.viewport.zoom;
+                    const cy = (placed.anchor.y - state.viewport.pan.y) * state.viewport.zoom;
+                    const isSelected = selection?.ids.includes(placed.id) ?? false;
+                    return (_jsxs("div", { style: {
+                            position: 'absolute',
+                            left: 0,
+                            top: 0,
+                            width: size,
+                            height: size,
+                            transform: `translate(${cx - size / 2}px, ${cy - size / 2}px)`,
+                        }, children: [renderMeasurementStamp({
+                                placed,
+                                measurement: state.measurementsById.get(placed.measurementId) ?? null,
+                                selected: isSelected,
+                                size,
+                                zoom: state.viewport.zoom,
+                            }), isSelected && (_jsx("div", { role: "button", "aria-label": "Remove measurement", onPointerDown: (e) => {
+                                    e.stopPropagation();
+                                    state.ctx.commit({
+                                        ops: [{ op: 'removeMeasurement', id: placed.id }],
+                                    });
+                                    state.ctx.setSelection(null);
+                                }, style: {
+                                    position: 'absolute',
+                                    top: -10,
+                                    right: -10,
+                                    width: 40,
+                                    height: 40,
+                                    cursor: 'pointer',
+                                    pointerEvents: 'auto',
+                                } }))] }, placed.id));
+                }) }))] }));
+};

package/dist/canvas/AnnotationCanvasInner.native.d.ts

@@ -0,0 +1,35 @@
+import { type MutableRefObject } from 'react';
+import { type ViewStyle } from 'react-native';
+import type { RenderMeasurementStamp } from './measurementStampOverlay.js';
+import type { DecimalTolerance, FractionalTolerance, Measurement, Units } from '../types/firestore.js';
+import type { AnnotationCanvasState, AnnotationDocumentPatch, Selection } from '../types/annotation.js';
+import type { MeasurementRef } from './measurementPicker.js';
+import type { Tool } from './Tool.js';
+import { type AnnotationCanvasHandle } from './useAnnotationCanvasState.js';
+import type { ViewportState } from './viewport.js';
+export type { AnnotationCanvasHandle };
+export interface AnnotationCanvasInnerProps {
+    canvas: AnnotationCanvasState;
+    onCommit(patch: AnnotationDocumentPatch): void;
+    tools: Tool[];
+    activeToolId: string;
+    selection: Selection | null;
+    onSelectionChange(selection: Selection | null): void;
+    measurements?: Measurement[];
+    fallbackUnit?: Units;
+    fractionalTolerance?: FractionalTolerance;
+    decimalTolerance?: DecimalTolerance;
+    resolveImageUrl?: (storagePath: string) => Promise<string>;
+    pickMeasurement?: () => Promise<MeasurementRef | null>;
+    renderMeasurementStamp?: RenderMeasurementStamp;
+    stampFontSource?: unknown;
+    stampValueFontSize?: number;
+    stampLabelFontSize?: number;
+    gestures?: unknown;
+    width: number;
+    height: number;
+    initialViewport?: ViewportState;
+    style?: ViewStyle;
+    imperativeRef?: MutableRefObject<AnnotationCanvasHandle | null>;
+}
+export declare const AnnotationCanvasInner: (props: AnnotationCanvasInnerProps) => import("react/jsx-runtime").JSX.Element;