@reekon-tools/boldr-utils 1.11.0 → 1.13.0

package/dist/annotation/data/InMemoryAnnotationProvider.d.ts

@@ -18,7 +18,7 @@ export declare class InMemoryAnnotationProvider implements AnnotationDataProvide
     list(scope: AnnotationScope, onNext: (files: AnnotationFileSummary[]) => void): Unsubscribe;
     subscribeGroupMeasurements(scope: JobGroupScope, onNext: (measurements: Measurement[]) => void): Unsubscribe;
     subscribeJobMeasurements(scope: JobScope, onNext: (measurements: Measurement[]) => void): Unsubscribe;
-    uploadImage(scope: AnnotationScope, fileId: string, role: 'background' | 'thumbnail', blob: ImageBlob): Promise<UploadedImageRef>;
+    uploadImage(scope: AnnotationScope, fileId: string, role: string, blob: ImageBlob): Promise<UploadedImageRef>;
     getImageUrl(_scope: AnnotationScope, fileId: string, storagePath: string): Promise<string>;
     deleteImage(_scope: AnnotationScope, fileId: string, storagePath: string): Promise<void>;
     private getBucket;

package/dist/annotation/data/hooks/useAnnotationCanvasDoc.d.ts

@@ -1,4 +1,4 @@
-import { type AnnotationCanvasState, type AnnotationDocumentPatch, type AnnotationViewport, type BackgroundFit } from '../../../types/annotation.js';
+import { type AnnotationBackgroundLayer, type AnnotationCanvasState, type AnnotationDocumentPatch, type AnnotationViewport, type BackgroundFit } from '../../../types/annotation.js';
 import type { AnnotationScope, ImageBlob } from '../AnnotationDataProvider.js';
 export type SaveStatus = 'idle' | 'dirty' | 'saving' | 'saved' | 'error';
 export interface UseAnnotationCanvasDocOptions {
@@ -26,6 +26,12 @@ export interface UseAnnotationCanvasDocResult {
     save: () => Promise<void>;
     refreshThumbnail: () => Promise<void>;
     ensureFileId: () => Promise<string>;
+    addBackgroundImage: (blob: ImageBlob, dims: {
+        width: number;
+        height: number;
+    }) => Promise<string>;
+    updateBackgroundImage: (id: string, patch: Partial<Omit<AnnotationBackgroundLayer, 'id'>>) => void;
+    removeBackgroundImage: (id: string) => Promise<void>;
     setBackgroundImage: (blob: ImageBlob, dims: {
         width: number;
         height: number;

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

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { applyPatch, createEmptyCanvasState, } from '../../../types/annotation.js';
+import { backgroundLayersOf, placeNewBackgroundLayer, } from '../../canvas/backgroundLayers.js';
+import { imageDocRect } from '../../canvas/viewport.js';
 import { FileUploadType } from '../../../types/firestore.js';
 import { useAnnotationDoc } from './useAnnotationDoc.js';
 import { useAnnotationMutations } from './useAnnotationMutations.js';
@@ -26,6 +28,15 @@ const buildFileData = (fileType, isLabel, canvas, canvasRev) => ({
 // AnnotationFileData). Uniqueness only needs to hold across the handful of
 // clients that ever touch one annotation doc.
 const makeClientId = () => `${Date.now().toString(36)}-${Math.floor(Math.random() * 0x100000000).toString(36)}`;
+// Background layer ids carry the same uniqueness contract as the tools'
+// stroke/shape ids (timestamp + module counter): unique within one document
+// across the handful of clients that touch it. Never 'background-legacy' —
+// that id is reserved for the layer synthesized from the legacy single slot.
+let backgroundIdCounter = 0;
+const makeBackgroundLayerId = () => `background-${Date.now().toString(36)}-${(backgroundIdCounter++).toString(36)}`;
+// The renderer decodes 'svg' via Skia's SVG module and everything else via
+// the bitmap decoder, so an SVG left unstamped silently fails to draw.
+const backgroundFormatOf = (blob) => blob.contentType === 'image/svg+xml' ? 'svg' : 'raster';
 // Orchestrates load + auto-save for the annotation canvas. Hydrates the working
 // state from the persisted doc, applies commits optimistically, and persists
 // (debounced) through the data provider — creating the file on first save when
@@ -354,45 +365,133 @@ export const useAnnotationCanvasDoc = (options) => {
         }
         return id;
     }, [flush, fallbackViewport]);
-    const setBackgroundImage = useCallback(async (blob, dims, fit = 'contain') => {
-        const id = await ensureFileId();
-        const ref = await uploadImage(id, 'background', blob);
+    const addBackgroundImage = useCallback(async (blob, dims) => {
+        const fileId = await ensureFileId();
+        const layerId = makeBackgroundLayerId();
+        const ref = await uploadImage(fileId, `backgrounds/${layerId}`, blob);
+        // ensureFileId seeds the working state for a never-saved canvas, but a
+        // still-hydrating existing doc can reach here with no working state —
+        // fall back to the same empty canvas hydration would start from.
+        const { viewport } = workingRef.current ?? createEmptyCanvasState(fallbackViewport);
         onCommit({
             ops: [
                 {
-                    op: 'setViewport',
-                    patch: {
-                        backgroundImage: {
-                            storagePath: ref.storagePath,
-                            downloadUrl: ref.downloadUrl,
-                            widthPx: dims.width,
-                            heightPx: dims.height,
-                        },
-                        backgroundFit: fit,
+                    op: 'addBackgroundImage',
+                    image: {
+                        id: layerId,
+                        storagePath: ref.storagePath,
+                        downloadUrl: ref.downloadUrl,
+                        widthPx: dims.width,
+                        heightPx: dims.height,
+                        format: backgroundFormatOf(blob),
+                        transform: placeNewBackgroundLayer(backgroundLayersOf(viewport), dims, viewport),
                     },
                 },
             ],
         });
-    }, [ensureFileId, uploadImage, onCommit]);
-    const clearBackgroundImage = useCallback(async () => {
-        const bg = workingRef.current?.viewport.backgroundImage;
-        const id = fileIdRef.current ?? createdIdRef.current;
-        if (bg && id) {
+        return layerId;
+    }, [ensureFileId, uploadImage, onCommit, fallbackViewport]);
+    const updateBackgroundImage = useCallback((id, patch) => {
+        onCommit({ ops: [{ op: 'updateBackgroundImage', id, patch }] });
+    }, [onCommit]);
+    const removeBackgroundImage = useCallback(async (id) => {
+        const viewport = workingRef.current?.viewport;
+        const layer = viewport
+            ? backgroundLayersOf(viewport).find((l) => l.id === id)
+            : undefined;
+        const fileId = fileIdRef.current ?? createdIdRef.current;
+        if (layer && fileId) {
             try {
-                await deleteImage(id, bg.storagePath);
+                await deleteImage(fileId, layer.storagePath);
             }
             catch (e) {
-                // Non-fatal: still clear the viewport reference even if the storage
-                // object is already gone.
+                // Non-fatal: still remove the layer even if the storage object is
+                // already gone.
                 console.warn('[useAnnotationCanvasDoc] failed to delete background image', e);
             }
         }
+        onCommit({ ops: [{ op: 'removeBackgroundImage', id }] });
+    }, [deleteImage, onCommit]);
+    const setBackgroundImage = useCallback(async (blob, dims, fit = 'contain') => {
+        const fileId = await ensureFileId();
+        const prior = workingRef.current
+            ? backgroundLayersOf(workingRef.current.viewport)
+            : [];
+        // Upload before touching the prior layers' objects: a failed upload
+        // must leave the doc — and every object it references — intact. The
+        // prior objects are deleted only after the replacement is committed.
+        const layerId = makeBackgroundLayerId();
+        const ref = await uploadImage(fileId, `backgrounds/${layerId}`, blob);
+        const { viewport } = workingRef.current ?? createEmptyCanvasState(fallbackViewport);
+        // The fit argument still decides where the replacement lands (the same
+        // imageDocRect placement the legacy single slot rendered at), so
+        // existing callers keep their visual behavior. `backgroundFit` is also
+        // still written: old clients render the mirrored legacy slot with it.
+        const rect = imageDocRect(dims.width, dims.height, viewport.width, viewport.height, fit);
         onCommit({
             ops: [
+                ...prior.map((l) => ({
+                    op: 'removeBackgroundImage',
+                    id: l.id,
+                })),
                 {
-                    op: 'setViewport',
-                    patch: { backgroundImage: undefined, backgroundFit: undefined },
+                    op: 'addBackgroundImage',
+                    image: {
+                        id: layerId,
+                        storagePath: ref.storagePath,
+                        downloadUrl: ref.downloadUrl,
+                        widthPx: dims.width,
+                        heightPx: dims.height,
+                        format: backgroundFormatOf(blob),
+                        transform: {
+                            x: rect.x,
+                            y: rect.y,
+                            scaleX: dims.width > 0 ? rect.width / dims.width : 1,
+                            scaleY: dims.height > 0 ? rect.height / dims.height : 1,
+                        },
+                    },
                 },
+                { op: 'setViewport', patch: { backgroundFit: fit } },
+            ],
+        });
+        for (const layer of prior) {
+            try {
+                await deleteImage(fileId, layer.storagePath);
+            }
+            catch (e) {
+                // Non-fatal: the replacement is already committed; an undeleted
+                // prior object is merely orphaned.
+                console.warn('[useAnnotationCanvasDoc] failed to delete background image', e);
+            }
+        }
+    }, [ensureFileId, uploadImage, deleteImage, onCommit, fallbackViewport]);
+    const clearBackgroundImage = useCallback(async () => {
+        const layers = workingRef.current
+            ? backgroundLayersOf(workingRef.current.viewport)
+            : [];
+        const id = fileIdRef.current ?? createdIdRef.current;
+        if (id) {
+            for (const layer of layers) {
+                try {
+                    await deleteImage(id, layer.storagePath);
+                }
+                catch (e) {
+                    // Non-fatal: still clear the viewport reference even if the storage
+                    // object is already gone.
+                    console.warn('[useAnnotationCanvasDoc] failed to delete background image', e);
+                }
+            }
+        }
+        onCommit({
+            ops: [
+                ...layers.map((l) => ({
+                    op: 'removeBackgroundImage',
+                    id: l.id,
+                })),
+                // A fit means nothing without a background; clearing it preserves
+                // this method's original contract. The explicit `undefined` is
+                // stripped by the write path's JSON round-trip.
+                { op: 'setViewport', patch: { backgroundFit: undefined } },
             ],
         });
     }, [deleteImage, onCommit]);
@@ -414,6 +513,9 @@ export const useAnnotationCanvasDoc = (options) => {
         save,
         refreshThumbnail,
         ensureFileId,
+        addBackgroundImage,
+        updateBackgroundImage,
+        removeBackgroundImage,
         setBackgroundImage,
         clearBackgroundImage,
     };

package/dist/annotation/data/hooks/useAnnotationMutations.d.ts

@@ -3,7 +3,7 @@ export interface AnnotationMutations {
     create(seed: Partial<AnnotationFile>): Promise<string>;
     update(fileId: string, patch: AnnotationFilePatch): Promise<void>;
     remove(fileId: string): Promise<void>;
-    uploadImage(fileId: string, role: 'background' | 'thumbnail', blob: ImageBlob): Promise<UploadedImageRef>;
+    uploadImage(fileId: string, role: string, blob: ImageBlob): Promise<UploadedImageRef>;
     deleteImage(fileId: string, storagePath: string): Promise<void>;
 }
 export declare const useAnnotationMutations: (scope: AnnotationScope) => AnnotationMutations;

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;