@reekon-tools/boldr-utils 1.6.4 → 1.6.6

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,37 @@
+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';
+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>;
+    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,179 @@
+import { jsx as _jsx } 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';
+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);
+    return (_jsx("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,
+            penDrawingStroke: state.penDrawingStroke,
+            customPreview,
+        }) }));
+};

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

@@ -0,0 +1,33 @@
+import { type MutableRefObject } from 'react';
+import { type ViewStyle } from 'react-native';
+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>;
+    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;

package/dist/canvas/AnnotationCanvasInner.native.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFont } from '@shopify/react-native-skia';
+import { useMemo, useRef } from 'react';
+import { View } from 'react-native';
+import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
+import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
+import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
+// Native fingerprint: one finger drives the active tool, two fingers
+// pan/zoom the viewport. Tap counts as a brief pointer down+up so tools
+// like measurement-stamp (which only listen to onPointerUp) work via tap.
+export const AnnotationCanvasInner = (props) => {
+    const { fallbackUnit, fractionalTolerance, decimalTolerance, resolveImageUrl, stampFontSource, stampValueFontSize = 14, stampLabelFontSize = 11, width, height, style, } = props;
+    const valueFont = useFont(stampFontSource, stampValueFontSize);
+    const labelFont = useFont(stampFontSource, stampLabelFontSize);
+    const state = useAnnotationCanvasState(props);
+    // Per-gesture refs so we always emit a matching down/move/up sequence.
+    const pointerIdRef = useRef(1);
+    const inFlightRef = useRef(null);
+    const pinchStartZoomRef = useRef(1);
+    const buildEvent = (pointerId, screen) => ({
+        pointerId,
+        screen,
+        world: state.ctx.viewport.screenToWorld(screen),
+    });
+    const gesture = useMemo(() => {
+        const toolPan = Gesture.Pan()
+            .minPointers(1)
+            .maxPointers(1)
+            .runOnJS(true)
+            .onBegin((e) => {
+            const id = pointerIdRef.current++;
+            const screen = { x: e.x, y: e.y };
+            inFlightRef.current = { id, lastScreen: screen };
+            state.dispatchPointerDown(buildEvent(id, screen));
+        })
+            .onUpdate((e) => {
+            const f = inFlightRef.current;
+            if (!f)
+                return;
+            const screen = { x: e.x, y: e.y };
+            f.lastScreen = screen;
+            state.dispatchPointerMove(buildEvent(f.id, screen));
+        })
+            .onEnd((e) => {
+            const f = inFlightRef.current;
+            if (!f)
+                return;
+            state.dispatchPointerUp(buildEvent(f.id, { x: e.x, y: e.y }));
+            inFlightRef.current = null;
+        })
+            .onFinalize(() => {
+            if (inFlightRef.current) {
+                state.dispatchPointerCancel();
+                inFlightRef.current = null;
+            }
+        });
+        const tap = Gesture.Tap()
+            .maxDuration(250)
+            .runOnJS(true)
+            .onEnd((e) => {
+            const id = pointerIdRef.current++;
+            const screen = { x: e.x, y: e.y };
+            // Synthesize a down+up sequence so tools that only listen to
+            // onPointerUp (e.g. measurement stamp) still fire.
+            state.dispatchPointerDown(buildEvent(id, screen));
+            state.dispatchPointerUp(buildEvent(id, screen));
+        });
+        const viewportPan = Gesture.Pan()
+            .minPointers(2)
+            .maxPointers(2)
+            .runOnJS(true)
+            .onChange((e) => {
+            state.pan({ x: e.changeX, y: e.changeY });
+        });
+        const pinch = Gesture.Pinch()
+            .runOnJS(true)
+            .onBegin(() => {
+            pinchStartZoomRef.current = state.ctx.viewport.state.zoom;
+        })
+            .onUpdate((e) => {
+            state.zoom({ x: e.focalX, y: e.focalY }, pinchStartZoomRef.current * e.scale);
+        });
+        return Gesture.Race(tap, Gesture.Simultaneous(viewportPan, pinch), toolPan);
+    }, [state]);
+    const activeTool = props.tools.find((t) => t.id === props.activeToolId) ?? null;
+    const customPreview = activeTool?.renderPreview?.(state.customPreviewState, state.ctx);
+    return (_jsx(GestureHandlerRootView, { style: [{ width, height }, style], children: _jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: { width, height }, collapsable: false, children: AnnotationCanvasSkia({
+                    width,
+                    height,
+                    effectiveCanvas: state.effectiveCanvas,
+                    worldTransform: state.worldTransform,
+                    measurementsById: state.measurementsById,
+                    fallbackUnit,
+                    fractionalTolerance,
+                    decimalTolerance,
+                    resolveImageUrl,
+                    valueFont,
+                    labelFont,
+                    penDrawingStroke: state.penDrawingStroke,
+                    customPreview,
+                }) }) }) }));
+};

package/dist/canvas/AnnotationCanvasSkia.d.ts

@@ -0,0 +1,26 @@
+import { type SkFont } from '@shopify/react-native-skia';
+import type { ReactNode } from 'react';
+import type { AnnotationCanvasState, AnnotationStroke } from '../types/annotation.js';
+import { DecimalTolerance, FractionalTolerance, Units, type Measurement } from '../types/firestore.js';
+export interface AnnotationCanvasSkiaProps {
+    width: number;
+    height: number;
+    effectiveCanvas: AnnotationCanvasState;
+    worldTransform: Array<{
+        scale: number;
+    } | {
+        translateX: number;
+    } | {
+        translateY: number;
+    }>;
+    measurementsById: Map<string, Measurement>;
+    fallbackUnit?: Units;
+    fractionalTolerance?: FractionalTolerance;
+    decimalTolerance?: DecimalTolerance;
+    resolveImageUrl?: (storagePath: string) => Promise<string>;
+    valueFont: SkFont | null;
+    labelFont: SkFont | null;
+    penDrawingStroke: AnnotationStroke | null;
+    customPreview?: ReactNode;
+}
+export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, measurementsById, fallbackUnit, fractionalTolerance, decimalTolerance, resolveImageUrl, valueFont, labelFont, penDrawingStroke, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/AnnotationCanvasSkia.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Canvas, Group } from '@shopify/react-native-skia';
+import { Units, } from '../types/firestore.js';
+import { BackgroundImageElement } from './elements/BackgroundImageElement.js';
+import { MeasurementStampElement } from './elements/MeasurementStampElement.js';
+import { ShapeElement } from './elements/ShapeElement.js';
+import { StrokeElement } from './elements/StrokeElement.js';
+// Platform-agnostic Skia subtree shared by web and native Inners.
+//
+// Call this as a FUNCTION (`AnnotationCanvasSkia({ ... })`), not as a JSX
+// component (`<AnnotationCanvasSkia ... />`). Used as a component, it adds
+// a React component boundary between the parent and Skia's `<Canvas>` that
+// breaks Skia's reconciler when the page first calls `useFont` — the JS
+// thread hangs in `MakeFreeTypeFaceFromData`. Symptoms only appeared on
+// Vite's dev server with a symlinked boldr-utils + React Refresh, but
+// since the function-call pattern works identically on native we use it
+// in both Inners for consistency. Don't add hooks here; this is a plain
+// JSX-returning helper, not a component.
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, measurementsById, fallbackUnit, fractionalTolerance, decimalTolerance, resolveImageUrl, valueFont, labelFont, penDrawingStroke, customPreview, }) => (_jsx(Canvas, { style: { width, height }, children: _jsxs(Group, { transform: worldTransform, children: [effectiveCanvas.viewport.backgroundImage && (_jsx(BackgroundImageElement, { image: effectiveCanvas.viewport.backgroundImage, docWidth: effectiveCanvas.viewport.width, docHeight: effectiveCanvas.viewport.height, fit: effectiveCanvas.viewport.backgroundFit ?? 'contain', resolveUrl: resolveImageUrl })), effectiveCanvas.strokes.map((stroke) => (_jsx(StrokeElement, { stroke: stroke }, stroke.id))), effectiveCanvas.shapes.map((shape) => (_jsx(ShapeElement, { shape: shape, font: valueFont }, shape.id))), effectiveCanvas.placedMeasurements.map((placed) => (_jsx(MeasurementStampElement, { placed: placed, measurement: measurementsById.get(placed.measurementId) ?? null, fallbackUnit: fallbackUnit ?? Units.Millimeters, fractionalTolerance: fractionalTolerance, decimalTolerance: decimalTolerance, valueFont: valueFont, labelFont: labelFont }, placed.id))), penDrawingStroke && _jsx(StrokeElement, { stroke: penDrawingStroke }), customPreview] }) }));

package/dist/canvas/Tool.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode, ComponentType } from 'react';
+import type { AnnotationCanvasState, AnnotationDocumentPatch, AnnotationElement, Selection, Vec2 } from '../types/annotation.js';
+import type { MeasurementRef } from './measurementPicker.js';
+import type { ViewportApi } from './viewport.js';
+export interface CanvasPointerEvent {
+    pointerId: number;
+    world: Vec2;
+    screen: Vec2;
+    pressure?: number;
+    shiftKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+}
+export interface ToolContext {
+    document: AnnotationCanvasState;
+    selection: Selection | null;
+    viewport: ViewportApi;
+    preview(patch: AnnotationDocumentPatch): void;
+    commit(patch: AnnotationDocumentPatch): void;
+    setSelection(selection: Selection | null): void;
+    requestPickMeasurement(): Promise<MeasurementRef | null>;
+    applyPan(deltaScreen: Vec2): void;
+    applyZoom(focalScreen: Vec2, nextZoom: number): void;
+}
+export type ToolState = unknown;
+export interface Tool {
+    id: string;
+    label: string;
+    icon?: ComponentType;
+    cursor?: string;
+    onPointerDown?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
+    onPointerMove?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
+    onPointerUp?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
+    onCancel?(state: ToolState, ctx: ToolContext): void;
+    renderPreview?(state: ToolState, ctx: ToolContext): ReactNode;
+    hitTest?(element: AnnotationElement, worldPoint: Vec2): boolean;
+}

package/dist/canvas/Tool.js

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

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

@@ -0,0 +1,9 @@
+import type { AnnotationBackgroundImage, BackgroundFit } from '../../types/annotation.js';
+export interface BackgroundImageElementProps {
+    image: AnnotationBackgroundImage;
+    docWidth: number;
+    docHeight: number;
+    fit?: BackgroundFit;
+    resolveUrl?: (path: string) => Promise<string>;
+}
+export declare const BackgroundImageElement: ({ image, docWidth, docHeight, fit, resolveUrl, }: BackgroundImageElementProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/canvas/elements/BackgroundImageElement.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image, useImage } from '@shopify/react-native-skia';
+import { useEffect, useState } from 'react';
+const computeFit = (imgW, imgH, docW, docH, fit) => {
+    if (fit === 'stretch') {
+        return { x: 0, y: 0, width: docW, height: docH };
+    }
+    const scale = fit === 'cover'
+        ? Math.max(docW / imgW, docH / imgH)
+        : Math.min(docW / imgW, docH / imgH);
+    const w = imgW * scale;
+    const h = imgH * scale;
+    return { x: (docW - w) / 2, y: (docH - h) / 2, width: w, height: h };
+};
+export const BackgroundImageElement = ({ image, docWidth, docHeight, fit = 'contain', resolveUrl, }) => {
+    const [url, setUrl] = useState(image.downloadUrl);
+    useEffect(() => {
+        let cancelled = false;
+        if (resolveUrl) {
+            resolveUrl(image.storagePath).then((next) => {
+                if (!cancelled)
+                    setUrl(next);
+            });
+        }
+        else {
+            setUrl(image.downloadUrl);
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [image.downloadUrl, image.storagePath, resolveUrl]);
+    const skImage = useImage(url);
+    if (!skImage)
+        return null;
+    const dims = computeFit(image.widthPx, image.heightPx, docWidth, docHeight, fit);
+    return (_jsx(Image, { image: skImage, x: dims.x, y: dims.y, width: dims.width, height: dims.height, fit: "fill" }));
+};

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

@@ -0,0 +1,13 @@
+import { type SkFont } from '@shopify/react-native-skia';
+import type { PlacedMeasurementRef } from '../../types/annotation.js';
+import { DecimalTolerance, FractionalTolerance, type Measurement, type Units } from '../../types/firestore.js';
+export interface MeasurementStampElementProps {
+    placed: PlacedMeasurementRef;
+    measurement: Measurement | null;
+    fallbackUnit: Units;
+    fractionalTolerance?: FractionalTolerance;
+    decimalTolerance?: DecimalTolerance;
+    valueFont?: SkFont | null;
+    labelFont?: SkFont | null;
+}
+export declare const MeasurementStampElement: ({ placed, measurement, fallbackUnit, fractionalTolerance, decimalTolerance, valueFont, labelFont, }: MeasurementStampElementProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/elements/MeasurementStampElement.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Group, Line, RoundedRect, Text, } from '@shopify/react-native-skia';
+import { DecimalTolerance, FractionalTolerance, } from '../../types/firestore.js';
+import { convertMicrometers } from '../../utils/micrometersToUnit.js';
+import { STAMP_HEIGHT, STAMP_PADDING_X, STAMP_PADDING_Y, STAMP_WIDTH, } from '../stampLayout.js';
+const VALUE_FONT_BASELINE_OFFSET = 14;
+const LABEL_FONT_BASELINE_OFFSET = 24;
+const formatValue = (measurement, unit, fractionalTolerance, decimalTolerance) => {
+    if (!measurement)
+        return '—';
+    const result = convertMicrometers(measurement.value, unit, fractionalTolerance, decimalTolerance);
+    return `${result.value}${result.unit ? ` ${result.unit}` : ''}`;
+};
+export const MeasurementStampElement = ({ placed, measurement, fallbackUnit, fractionalTolerance = FractionalTolerance.Sixteenth, decimalTolerance = DecimalTolerance.Hundredth, valueFont, labelFont, }) => {
+    const unit = placed.unitOverride ?? measurement?.unit ?? fallbackUnit;
+    const valueText = formatValue(measurement, unit, fractionalTolerance, decimalTolerance);
+    const label = placed.labelOverride ??
+        measurement?.label ??
+        (measurement
+            ? `M${measurement.measurementIndex ?? ''}`
+            : '');
+    const showLabel = placed.showLabel !== false && !!label;
+    const showValue = placed.showValue !== false;
+    const scale = placed.scale ?? 1;
+    // Fixed-size stamp — no measureText calls. Keeps rendering deterministic
+    // even when no font is loaded (browser/native both).
+    const baseX = placed.anchor.x - (STAMP_WIDTH * scale) / 2;
+    const baseY = placed.anchor.y - (STAMP_HEIGHT * scale) / 2;
+    return (_jsxs(Group, { transform: [{ translateX: baseX }, { translateY: baseY }, { scale }], children: [placed.leader && (_jsx(Line, { p1: placed.leader.from, p2: placed.leader.to, color: "#3B82F6", style: "stroke", strokeWidth: 1.5 })), _jsx(RoundedRect, { x: 0, y: 0, width: STAMP_WIDTH, height: STAMP_HEIGHT, r: 6, color: "#FFFFFFEE" }), _jsx(RoundedRect, { x: 0, y: 0, width: STAMP_WIDTH, height: STAMP_HEIGHT, r: 6, color: "#3B82F6", style: "stroke", strokeWidth: 1.25 }), showValue && valueFont && (_jsx(Text, { x: STAMP_PADDING_X, y: STAMP_PADDING_Y + VALUE_FONT_BASELINE_OFFSET, text: valueText, font: valueFont, color: "#111827" })), showLabel && labelFont && (_jsx(Text, { x: STAMP_PADDING_X, y: STAMP_PADDING_Y + LABEL_FONT_BASELINE_OFFSET, text: label, font: labelFont, color: "#6B7280" }))] }));
+};

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

@@ -0,0 +1,7 @@
+import { type SkFont } from '@shopify/react-native-skia';
+import type { AnnotationShape } from '../../types/annotation.js';
+export interface ShapeElementProps {
+    shape: AnnotationShape;
+    font?: SkFont | null;
+}
+export declare const ShapeElement: ({ shape, font }: ShapeElementProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/canvas/elements/ShapeElement.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, Line, Path, Rect, Skia, Text, } from '@shopify/react-native-skia';
+import { useMemo } from 'react';
+const polygonPath = (points) => {
+    const path = Skia.Path.Make();
+    if (points.length === 0)
+        return path;
+    path.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+        path.lineTo(points[i].x, points[i].y);
+    }
+    path.close();
+    return path;
+};
+export const ShapeElement = ({ shape, font }) => {
+    const { kind, geometry, style, text } = shape;
+    const stroke = style.stroke ?? '#000000';
+    const fill = style.fill;
+    const strokeWidth = style.strokeWidth ?? 2;
+    const polyPath = useMemo(() => (kind === 'polygon' ? polygonPath(geometry.points) : null), [kind, geometry.points]);
+    switch (kind) {
+        case 'rect': {
+            const [a, b] = geometry.points;
+            if (!a || !b)
+                return null;
+            const x = Math.min(a.x, b.x);
+            const y = Math.min(a.y, b.y);
+            const w = Math.abs(b.x - a.x);
+            const h = Math.abs(b.y - a.y);
+            return (_jsxs(_Fragment, { children: [fill && _jsx(Rect, { x: x, y: y, width: w, height: h, color: fill }), _jsx(Rect, { x: x, y: y, width: w, height: h, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+        }
+        case 'ellipse': {
+            const [a, b] = geometry.points;
+            if (!a || !b)
+                return null;
+            const cx = (a.x + b.x) / 2;
+            const cy = (a.y + b.y) / 2;
+            const r = Math.max(Math.abs(b.x - a.x), Math.abs(b.y - a.y)) / 2;
+            return (_jsxs(_Fragment, { children: [fill && _jsx(Circle, { cx: cx, cy: cy, r: r, color: fill }), _jsx(Circle, { cx: cx, cy: cy, r: r, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+        }
+        case 'line':
+        case 'arrow': {
+            const [a, b] = geometry.points;
+            if (!a || !b)
+                return null;
+            return (_jsx(Line, { p1: a, p2: b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: "round" }));
+        }
+        case 'polygon': {
+            if (!polyPath)
+                return null;
+            return (_jsxs(_Fragment, { children: [fill && _jsx(Path, { path: polyPath, color: fill }), _jsx(Path, { path: polyPath, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+        }
+        case 'text': {
+            const [origin] = geometry.points;
+            if (!origin || !text)
+                return null;
+            if (!font)
+                return null;
+            return (_jsx(Text, { x: origin.x, y: origin.y, text: text, font: font, color: stroke }));
+        }
+    }
+};