@reekon-tools/boldr-utils 1.6.30 → 1.6.32

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

@@ -37,6 +37,7 @@ export interface AnnotationCanvasInnerProps {
     style?: CSSProperties;
     magnifierTopOffset?: number;
     imperativeRef?: MutableRefObject<AnnotationCanvasHandle | null>;
+    snapshotRef?: MutableRefObject<(() => Uint8Array | null) | null>;
 }
 export type PanTrigger = 'middleMouse' | 'rightMouse' | 'space';
 export interface GestureConfig {

package/dist/annotation/canvas/AnnotationCanvasInner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skia, useFont, useTypeface } from '@shopify/react-native-skia';
+import { Skia, useCanvasRef, useFont, useTypeface, } from '@shopify/react-native-skia';
 import { useCallback, useEffect, useMemo, useRef, } from 'react';
 import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
 import { TEXT_FONT_FAMILY } from './elements/ShapeElement.js';
@@ -21,7 +21,25 @@ const LONG_PRESS_MS = 500;
 const LONG_PRESS_SLOP_PX = 10;
 const DEFAULT_PAN_TRIGGERS = ['middleMouse', 'space'];
 export const AnnotationCanvasInner = (props) => {
-    const { resolveImageUrl, stampFontSource, stampValueFontSize = 14, gestures, width, height, style, activeToolId, tools, } = props;
+    const { resolveImageUrl, stampFontSource, stampValueFontSize = 14, gestures, width, height, style, activeToolId, tools, snapshotRef, } = props;
+    // Snapshot plumbing for thumbnail capture: hold the <Canvas> ref and publish
+    // a capture fn on the consumer's snapshotRef. encodeToBytes() yields PNG.
+    const canvasRef = useCanvasRef();
+    useEffect(() => {
+        if (!snapshotRef)
+            return;
+        snapshotRef.current = () => {
+            const image = canvasRef.current?.makeImageSnapshot();
+            if (!image)
+                return null;
+            const bytes = image.encodeToBytes();
+            image.dispose?.();
+            return bytes ?? null;
+        };
+        return () => {
+            snapshotRef.current = null;
+        };
+    }, [snapshotRef, canvasRef]);
     const wheelMode = gestures?.wheel ?? 'auto';
     const panTriggers = gestures?.panTriggers ?? DEFAULT_PAN_TRIGGERS;
     const allowSpacePan = panTriggers.includes('space');
@@ -276,6 +294,7 @@ export const AnnotationCanvasInner = (props) => {
                 effectiveCanvas: state.effectiveCanvas,
                 worldTransform: state.worldTransform,
                 resolveImageUrl,
+                canvasRef,
                 valueFont,
                 textFontMgr,
                 penDrawingStroke: state.penDrawingStroke,

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

@@ -38,5 +38,6 @@ export interface AnnotationCanvasInnerProps {
     style?: ViewStyle;
     magnifierTopOffset?: number;
     imperativeRef?: MutableRefObject<AnnotationCanvasHandle | null>;
+    snapshotRef?: MutableRefObject<(() => Uint8Array | null) | null>;
 }
 export declare const AnnotationCanvasInner: (props: AnnotationCanvasInnerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
-import { type SkFont, type SkImage, type SkPath, type SkTypefaceFontProvider, type Transforms3d } from '@shopify/react-native-skia';
-import type { ReactNode } from 'react';
+import { type CanvasRef, type SkFont, type SkImage, type SkPath, type SkTypefaceFontProvider, type Transforms3d } from '@shopify/react-native-skia';
+import type { ReactNode, RefObject } from 'react';
 import type { AnnotationCanvasState, AnnotationStroke, StrokeCap } from '../../types/annotation.js';
 type AnimatedPoint = {
     x: number;
@@ -88,6 +88,7 @@ export interface AnnotationCanvasSkiaProps {
     };
     customPreview?: ReactNode;
     wrapContent?: (content: ReactNode) => ReactNode;
+    canvasRef?: RefObject<CanvasRef | null>;
 }
-export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, backgroundSkImage, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, customPreview, wrapContent, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, backgroundSkImage, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, customPreview, wrapContent, canvasRef, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/annotation/canvas/AnnotationCanvasSkia.js

@@ -15,7 +15,7 @@ import { StrokeElement } from './elements/StrokeElement.js';
 // against the document; the rectangle border stays thinner (it outlines a
 // region rather than pointing at one).
 const MEASUREMENT_LINE_COLOR = '#0066FF';
-const MEASUREMENT_LINE_WIDTH = 6;
+const MEASUREMENT_LINE_WIDTH = 16;
 const MEASUREMENT_RECT_WIDTH = 2;
 // Endpoint handle color — constant selection chrome, independent of the (now
 // editable) line color so the handles stay legible on any line color.
@@ -78,7 +78,7 @@ const SelectionBox = ({ bounds, isDragging, transform, }) => (_jsx(DraggableElem
 // 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, resolveImageUrl, backgroundSkImage, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, customPreview, wrapContent, }) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, backgroundSkImage, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, customPreview, wrapContent, canvasRef, }) => {
     const world = (_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, skImage: backgroundSkImage })), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => {
                 // Line/arrow shapes support endpoint editing. When selected they show
                 // grab handles at both ends; during an endpoint drag the line renders
@@ -220,5 +220,5 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                 }
                 return null;
             })(), penDrawingStroke && _jsx(StrokeElement, { stroke: penDrawingStroke }), shapePreview && (_jsxs(_Fragment, { children: [_jsx(Path, { path: shapePreview.path, color: shapePreview.color, style: "stroke", strokeWidth: shapePreview.width, strokeCap: toSkiaStrokeCap(shapePreview.cap), strokeJoin: "round", children: shapePreview.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(shapePreview.width) })) }), _jsx(Path, { path: shapePreview.headPath, color: shapePreview.color, style: "fill" })] })), livePreview?.handoffPaths?.map((p, i) => (_jsx(Path, { path: p, color: livePreview.color, style: "stroke", strokeWidth: livePreview.width, strokeCap: toSkiaStrokeCap(livePreview.cap), strokeJoin: "round", opacity: livePreview.opacity, children: livePreview.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(livePreview.width) })) }, i))), livePreview && (_jsx(Path, { path: livePreview.path, color: livePreview.color, style: "stroke", strokeWidth: livePreview.width, strokeCap: toSkiaStrokeCap(livePreview.cap), strokeJoin: "round", opacity: livePreview.opacity, children: livePreview.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(livePreview.width) })) })), customPreview] }));
-    return (_jsx(Canvas, { style: { width, height }, children: wrapContent ? wrapContent(world) : world }));
+    return (_jsx(Canvas, { ref: canvasRef, style: { width, height }, children: wrapContent ? wrapContent(world) : world }));
 };

package/dist/annotation/canvas/elements/BackgroundImageElement.js

@@ -1,14 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Image, useImage } from '@shopify/react-native-skia';
+import { Group, Image, ImageSVG, Skia, useImage, } from '@shopify/react-native-skia';
 import { memo, useEffect, useRef, useState } from 'react';
 import { imageDocRect } from '../viewport.js';
-// Resolve a background image's (possibly expired) storage URL and decode it to
-// an SkImage. Exported so a consumer can hoist the decode ABOVE the canvas and
-// share one SkImage across multiple canvases (e.g. the main canvas + a
-// magnifier overlay) — otherwise each canvas mounts its own loader and flashes
-// a blank while it re-resolves + re-decodes. Returns null until loaded, or when
-// `image` is null/undefined. Hooks run unconditionally regardless of `image`.
-export const useBackgroundSkImage = (image, resolveUrl) => {
+// Resolve a background image's (possibly expired) storage URL. Shared by the
+// raster and SVG loaders below.
+const useBackgroundUrl = (image, resolveUrl) => {
     const [url, setUrl] = useState(image?.downloadUrl ?? '');
     // Hold resolveUrl in a ref so re-resolution is keyed only on the image
     // identity, not the function's. Consumers commonly pass an inline closure
@@ -33,17 +29,76 @@ export const useBackgroundSkImage = (image, resolveUrl) => {
         return () => {
             cancelled = true;
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [image?.downloadUrl, image?.storagePath]);
+    return url;
+};
+// Null-safe SVG loader. NOT RN Skia's useSVG: that hook throws synchronously
+// on a null/undefined source (despite its DataSourceParam type), so it can't
+// be called unconditionally from a component that usually renders raster
+// backgrounds. An empty url resolves to null (nothing to draw yet).
+const useBackgroundSvg = (url) => {
+    const [svg, setSvg] = useState(null);
+    useEffect(() => {
+        if (!url) {
+            setSvg(null);
+            return;
+        }
+        let cancelled = false;
+        (async () => {
+            try {
+                const res = await fetch(url);
+                const text = await res.text();
+                const next = Skia.SVG.MakeFromString(text);
+                if (!cancelled)
+                    setSvg(next);
+            }
+            catch (e) {
+                console.warn('[BackgroundImageElement] failed to load SVG background', e);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [url]);
+    return svg;
+};
+// Resolve a background image's URL and decode it to an SkImage. Exported so a
+// consumer can hoist the decode ABOVE the canvas and share one SkImage across
+// multiple canvases (e.g. the main canvas + a magnifier overlay) — otherwise
+// each canvas mounts its own loader and flashes a blank while it re-resolves +
+// re-decodes. Returns null until loaded, or when `image` is null/undefined.
+// Hooks run unconditionally regardless of `image`. Raster only — SVG
+// backgrounds self-load in the element below (parsing an SVG is cheap).
+export const useBackgroundSkImage = (image, resolveUrl) => {
+    const url = useBackgroundUrl(image, resolveUrl);
     return useImage(url || null);
 };
 export const BackgroundImageElement = memo(({ image, docWidth, docHeight, fit = 'contain', resolveUrl, skImage: skImageProp, }) => {
-    // Self-load only when no pre-decoded image is provided; the hook still runs
-    // unconditionally (with a null image, so it no-ops) to satisfy hook rules.
+    const isSvg = image.format === 'svg';
+    // Self-load only when no pre-decoded image is provided; the hooks still run
+    // unconditionally (with a null source, so they no-op) to satisfy hook rules.
     const provided = skImageProp !== undefined;
-    const loaded = useBackgroundSkImage(provided ? null : image, resolveUrl);
+    const loaded = useBackgroundSkImage(provided || isSvg ? null : image, resolveUrl);
+    const svgUrl = useBackgroundUrl(isSvg ? image : null, resolveUrl);
+    const svg = useBackgroundSvg(isSvg ? svgUrl : '');
     const skImage = provided ? skImageProp : loaded;
+    const dims = imageDocRect(image.widthPx, image.heightPx, docWidth, docHeight, fit);
+    if (isSvg) {
+        if (!svg)
+            return null;
+        // Draw the SVG at its stamped intrinsic size inside a scale transform
+        // (rather than relying on ImageSVG's own fitting, which only applies to
+        // sources with a viewBox). The vector source re-rasterizes per frame, so
+        // it stays crisp at any canvas zoom.
+        return (_jsx(Group, { transform: [
+                { translateX: dims.x },
+                { translateY: dims.y },
+                { scaleX: dims.width / image.widthPx },
+                { scaleY: dims.height / image.heightPx },
+            ], children: _jsx(ImageSVG, { svg: svg, x: 0, y: 0, width: image.widthPx, height: image.heightPx }) }));
+    }
     if (!skImage)
         return null;
-    const dims = imageDocRect(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/annotation/canvas/tools/measurementTool.d.ts

@@ -1,4 +1,4 @@
-import type { PlacedMeasurementRef } from '../../../types/annotation.js';
+import type { PlacedMeasurementRef, StrokeCap } from '../../../types/annotation.js';
 import type { Tool } from '../Tool.js';
 export type MeasurementToolPlacement = 'line' | 'rectangle' | 'none';
 export interface MeasurementToolOptions {
@@ -11,5 +11,10 @@ export interface MeasurementToolOptions {
     selectToolId?: string;
     onAutoSwitch?: (toToolId: string) => void;
     onPlaced?: (measurement: PlacedMeasurementRef) => void;
+    color?: string;
+    width?: number;
+    cap?: StrokeCap;
+    startCap?: StrokeCap;
+    dash?: boolean;
 }
 export declare const createMeasurementTool: (options?: MeasurementToolOptions) => Tool;

package/dist/annotation/canvas/tools/measurementTool.js

@@ -1,5 +1,27 @@
 import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
 import { DEFAULT_LINE_POS, recomputeAnchor, rectCenter, } from '../measurementGeometry.js';
+// The `line*` style fields for a placed measurement, built from the tool's
+// style options. Undefined fields are dropped (never emitted) so the render
+// defaults apply and Firestore never sees an `undefined` value.
+const lineStyleFields = (placement, style) => {
+    if (placement === 'none')
+        return {};
+    const out = {};
+    if (style.color !== undefined)
+        out.lineColor = style.color;
+    if (style.width !== undefined)
+        out.lineWidth = style.width;
+    if (style.dash !== undefined)
+        out.lineDash = style.dash;
+    // End/start caps are only meaningful on the open `line` path.
+    if (placement === 'line') {
+        if (style.cap !== undefined)
+            out.lineCap = style.cap;
+        if (style.startCap !== undefined)
+            out.lineStartCap = style.startCap;
+    }
+    return out;
+};
 let counter = 0;
 const makeId = () => `annotation-${Date.now().toString(36)}-${(counter++).toString(36)}`;
 const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
@@ -8,13 +30,14 @@ const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
 // placeAnnotationAtCenter so a drawn annotation is identical to a (legacy)
 // center-placed one once committed.
 const buildMeasurement = (opts) => {
-    const { id, layerId, placement, linePos, a, b } = opts;
+    const { id, layerId, placement, linePos, a, b, style } = opts;
     const base = {
         id,
         layerId,
         showLabel: true,
         showValue: true,
         createdAt: Date.now(),
+        ...lineStyleFields(placement, style),
     };
     if (placement === 'rectangle') {
         const rect = { a, b };
@@ -51,6 +74,13 @@ export const createMeasurementTool = (options = {}) => {
     const minDragPx = options.minDragPx ?? 4;
     const autoSwitchToSelect = options.autoSwitchToSelect ?? true;
     const selectToolId = options.selectToolId ?? 'select';
+    const style = {
+        color: options.color,
+        width: options.width,
+        cap: options.cap,
+        startCap: options.startCap,
+        dash: options.dash,
+    };
     const place = (ctx, measurement) => {
         ctx.commit({ ops: [{ op: 'addMeasurement', measurement }] });
         options.onPlaced?.(measurement);
@@ -78,6 +108,7 @@ export const createMeasurementTool = (options = {}) => {
                     linePos,
                     a: event.world,
                     b: event.world,
+                    style,
                 }));
             },
         };
@@ -108,6 +139,7 @@ export const createMeasurementTool = (options = {}) => {
                 linePos,
                 a: s.startWorld,
                 b: event.world,
+                style,
             });
             ctx.preview({ ops: [{ op: 'addMeasurement', measurement }] });
             return { ...s, moved: true };
@@ -130,6 +162,7 @@ export const createMeasurementTool = (options = {}) => {
                 linePos,
                 a: s.startWorld,
                 b: event.world,
+                style,
             }));
         },
         onCancel(_state, ctx) {

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

@@ -16,6 +16,7 @@ export interface AnnotationCanvasHandle {
     }): void;
     setAnnotationType(id: AnnotationElementId, type: MeasurementPlacement): void;
     centerOnLine(id: AnnotationElementId): void;
+    setLinePos(id: AnnotationElementId, linePos: number): void;
     removeMeasurementValue(id: AnnotationElementId): void;
     associateMeasurement(id: AnnotationElementId, ref: MeasurementRef): void;
     bindColumn(id: AnnotationElementId, binding: {

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -195,6 +195,37 @@ export const useAnnotationCanvasState = (props) => {
     useEffect(() => {
         if (!imperativeRef)
             return;
+        // Shared body for centerOnLine / setLinePos: ensure the annotation is a
+        // 'line' (synthesizing a default horizontal line around the anchor if it
+        // has none) and pin its tile at `linePos` along that line.
+        const applyLinePos = (id, linePos) => {
+            const c = ctxRef.current;
+            const m = c.document.placedMeasurements.find((x) => x.id === id);
+            if (!m)
+                return;
+            let line = m.line;
+            if (!line) {
+                const len = Math.min(400, Math.max(120, canvas.viewport.width * 0.25));
+                line = {
+                    a: { x: m.anchor.x - len / 2, y: m.anchor.y },
+                    b: { x: m.anchor.x + len / 2, y: m.anchor.y },
+                };
+            }
+            c.commit({
+                ops: [
+                    {
+                        op: 'updateMeasurement',
+                        id,
+                        patch: {
+                            placement: 'line',
+                            line,
+                            linePos,
+                            anchor: recomputeAnchor(line, 'line', linePos, m.anchor),
+                        },
+                    },
+                ],
+            });
+        };
         imperativeRef.current = {
             undo() {
                 const entry = undoStackRef.current.pop();
@@ -340,34 +371,10 @@ export const useAnnotationCanvasState = (props) => {
                 });
             },
             centerOnLine(id) {
-                const c = ctxRef.current;
-                const m = c.document.placedMeasurements.find((x) => x.id === id);
-                if (!m)
-                    return;
-                // Same default-line synthesis as setAnnotationType('line') so centering
-                // a floating tile also gives it a line to sit on.
-                let line = m.line;
-                if (!line) {
-                    const len = Math.min(400, Math.max(120, canvas.viewport.width * 0.25));
-                    line = {
-                        a: { x: m.anchor.x - len / 2, y: m.anchor.y },
-                        b: { x: m.anchor.x + len / 2, y: m.anchor.y },
-                    };
-                }
-                c.commit({
-                    ops: [
-                        {
-                            op: 'updateMeasurement',
-                            id,
-                            patch: {
-                                placement: 'line',
-                                line,
-                                linePos: 0.5,
-                                anchor: recomputeAnchor(line, 'line', 0.5, m.anchor),
-                            },
-                        },
-                    ],
-                });
+                applyLinePos(id, 0.5);
+            },
+            setLinePos(id, linePos) {
+                applyLinePos(id, linePos);
             },
             removeMeasurementValue(id) {
                 const c = ctxRef.current;

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

@@ -7,6 +7,14 @@ export interface JobScope {
 export interface JobGroupScope extends JobScope {
     groupId: string;
 }
+export interface TemplateScope {
+    kind: 'template';
+    orgId?: string;
+    templateId: string;
+}
+export type AnnotationScope = JobGroupScope | TemplateScope;
+export declare const isTemplateScope: (s: AnnotationScope) => s is TemplateScope;
+export declare const annotationScopeKey: (s: AnnotationScope | null) => string;
 export type Unsubscribe = () => void;
 export type FieldOp = {
     kind: 'serverTimestamp';
@@ -26,6 +34,9 @@ export declare const isFieldOp: (v: unknown) => v is FieldOp;
 export type Patch<T> = {
     [K in keyof T]?: T[K] | FieldOp;
 };
+export type AnnotationFilePatch = Patch<AnnotationFile> & {
+    [dotPath: `fileData.${string}`]: unknown;
+};
 export interface ImageBlob {
     data: Blob | ArrayBuffer | string;
     contentType: string;
@@ -51,15 +62,15 @@ export interface AnnotationFileSummary {
     createdBy?: AnnotationFile['createdBy'];
 }
 export interface AnnotationDataProvider {
-    create(scope: JobGroupScope, seed: Partial<AnnotationFile>): Promise<string>;
-    get(scope: JobGroupScope, fileId: string): Promise<AnnotationFile | null>;
-    update(scope: JobGroupScope, fileId: string, patch: Patch<AnnotationFile>): Promise<void>;
-    delete(scope: JobGroupScope, fileId: string): Promise<void>;
-    subscribe(scope: JobGroupScope, fileId: string, onNext: (doc: AnnotationFile | null) => void, onError?: (err: Error) => void): Unsubscribe;
-    list(scope: JobGroupScope, onNext: (files: AnnotationFileSummary[]) => void, onError?: (err: Error) => void): Unsubscribe;
+    create(scope: AnnotationScope, seed: Partial<AnnotationFile>): Promise<string>;
+    get(scope: AnnotationScope, fileId: string): Promise<AnnotationFile | null>;
+    update(scope: AnnotationScope, fileId: string, patch: AnnotationFilePatch): Promise<void>;
+    delete(scope: AnnotationScope, fileId: string): Promise<void>;
+    subscribe(scope: AnnotationScope, fileId: string, onNext: (doc: AnnotationFile | null) => void, onError?: (err: Error) => void): Unsubscribe;
+    list(scope: AnnotationScope, onNext: (files: AnnotationFileSummary[]) => void, onError?: (err: Error) => void): Unsubscribe;
     subscribeGroupMeasurements(scope: JobGroupScope, onNext: (measurements: Measurement[]) => void, onError?: (err: Error) => void): Unsubscribe;
     subscribeJobMeasurements(scope: JobScope, onNext: (measurements: Measurement[]) => void, onError?: (err: Error) => void): Unsubscribe;
-    uploadImage(scope: JobGroupScope, fileId: string, role: 'background' | 'thumbnail', blob: ImageBlob): Promise<UploadedImageRef>;
-    getImageUrl(scope: JobGroupScope, fileId: string, storagePath: string): Promise<string>;
-    deleteImage(scope: JobGroupScope, fileId: string, storagePath: string): Promise<void>;
+    uploadImage(scope: AnnotationScope, fileId: string, role: 'background' | 'thumbnail', blob: ImageBlob): Promise<UploadedImageRef>;
+    getImageUrl(scope: AnnotationScope, fileId: string, storagePath: string): Promise<string>;
+    deleteImage(scope: AnnotationScope, fileId: string, storagePath: string): Promise<void>;
 }

package/dist/annotation/data/AnnotationDataProvider.js

@@ -1,3 +1,11 @@
+export const isTemplateScope = (s) => 'kind' in s && s.kind === 'template';
+// Stable string identity for a scope, for React hook dep arrays — scope
+// objects are typically rebuilt every render.
+export const annotationScopeKey = (s) => s == null
+    ? ''
+    : isTemplateScope(s)
+        ? `template/${s.orgId ?? ''}/${s.templateId}`
+        : `job/${s.orgId}/${s.projectId}/${s.jobId}/${s.groupId}`;
 export const isFieldOp = (v) => !!v &&
     typeof v === 'object' &&
     'kind' in v &&

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

@@ -1,5 +1,5 @@
 import { type Measurement } from '../../types/firestore.js';
-import { type AnnotationDataProvider, type AnnotationFile, type AnnotationFileSummary, type ImageBlob, type JobGroupScope, type JobScope, type Patch, type Unsubscribe, type UploadedImageRef } from './AnnotationDataProvider.js';
+import { type AnnotationDataProvider, type AnnotationFile, type AnnotationFilePatch, type AnnotationFileSummary, type AnnotationScope, type ImageBlob, type JobGroupScope, type JobScope, type Unsubscribe, type UploadedImageRef } from './AnnotationDataProvider.js';
 export declare class InMemoryAnnotationProvider implements AnnotationDataProvider {
     private docs;
     private measurements;
@@ -10,17 +10,17 @@ export declare class InMemoryAnnotationProvider implements AnnotationDataProvide
     private jobMeasurementListeners;
     private nextId;
     setMeasurements(scope: JobGroupScope, measurements: Measurement[]): void;
-    create(scope: JobGroupScope, seed: Partial<AnnotationFile>): Promise<string>;
-    get(scope: JobGroupScope, fileId: string): Promise<AnnotationFile | null>;
-    update(scope: JobGroupScope, fileId: string, patch: Patch<AnnotationFile>): Promise<void>;
-    delete(scope: JobGroupScope, fileId: string): Promise<void>;
-    subscribe(scope: JobGroupScope, fileId: string, onNext: (doc: AnnotationFile | null) => void): Unsubscribe;
-    list(scope: JobGroupScope, onNext: (files: AnnotationFileSummary[]) => void): Unsubscribe;
+    create(scope: AnnotationScope, seed: Partial<AnnotationFile>): Promise<string>;
+    get(scope: AnnotationScope, fileId: string): Promise<AnnotationFile | null>;
+    update(scope: AnnotationScope, fileId: string, patch: AnnotationFilePatch): Promise<void>;
+    delete(scope: AnnotationScope, fileId: string): Promise<void>;
+    subscribe(scope: AnnotationScope, fileId: string, onNext: (doc: AnnotationFile | null) => void): Unsubscribe;
+    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: JobGroupScope, fileId: string, role: 'background' | 'thumbnail', blob: ImageBlob): Promise<UploadedImageRef>;
-    getImageUrl(_scope: JobGroupScope, fileId: string, storagePath: string): Promise<string>;
-    deleteImage(_scope: JobGroupScope, fileId: string, storagePath: string): Promise<void>;
+    uploadImage(scope: AnnotationScope, fileId: string, role: 'background' | 'thumbnail', blob: ImageBlob): Promise<UploadedImageRef>;
+    getImageUrl(_scope: AnnotationScope, fileId: string, storagePath: string): Promise<string>;
+    deleteImage(_scope: AnnotationScope, fileId: string, storagePath: string): Promise<void>;
     private getBucket;
     private notifyDoc;
     private notifyList;

package/dist/annotation/data/InMemoryAnnotationProvider.js

@@ -1,7 +1,9 @@
 import { FileUploadType } from '../../types/firestore.js';
-import { isFieldOp, } from './AnnotationDataProvider.js';
-const scopeKey = (s) => `${s.orgId}/${s.projectId}/${s.jobId}/${s.groupId}`;
-const jobKey = (s) => `${s.orgId}/${s.projectId}/${s.jobId}`;
+import { annotationScopeKey, isFieldOp, } from './AnnotationDataProvider.js';
+const scopeKey = annotationScopeKey;
+// Prefix of annotationScopeKey for job scopes, so collectJobMeasurements can
+// match group keys by startsWith.
+const jobKey = (s) => `job/${s.orgId}/${s.projectId}/${s.jobId}`;
 const summarize = (file) => ({
     id: file.id,
     name: file.name,
@@ -37,6 +39,30 @@ const resolveFieldOp = (op) => {
             return undefined;
     }
 };
+// Firestore-style dotted field paths: 'fileData.canvas' merges into the
+// nested map (creating intermediate maps as needed) instead of replacing the
+// whole top-level field — mirrors what the real SDKs do with dotted keys.
+const applyDotPaths = (base, resolved) => {
+    const next = { ...base };
+    for (const [key, value] of Object.entries(resolved)) {
+        if (!key.includes('.')) {
+            next[key] = value;
+            continue;
+        }
+        const parts = key.split('.');
+        let target = next;
+        for (let i = 0; i < parts.length - 1; i++) {
+            const existing = target[parts[i]];
+            target[parts[i]] =
+                existing && typeof existing === 'object' && !Array.isArray(existing)
+                    ? { ...existing }
+                    : {};
+            target = target[parts[i]];
+        }
+        target[parts[parts.length - 1]] = value;
+    }
+    return next;
+};
 // Simple test/dev provider. Stores documents and image blobs in memory and
 // fans out subscription notifications synchronously. Not designed for
 // performance — designed for predictable behavior in tests and Storybook.
@@ -86,7 +112,7 @@ export class InMemoryAnnotationProvider {
         if (!prev)
             throw new Error(`Annotation file ${fileId} not found`);
         const resolved = applyFieldOps(patch);
-        const next = { ...prev, ...resolved };
+        const next = applyDotPaths(prev, resolved);
         bucket.set(fileId, next);
         this.notifyDoc(scope, fileId);
         this.notifyList(scope);

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

@@ -1,8 +1,8 @@
 import { type AnnotationCanvasState, type AnnotationDocumentPatch, type AnnotationViewport, type BackgroundFit } from '../../../types/annotation.js';
-import type { ImageBlob, JobGroupScope } from '../AnnotationDataProvider.js';
+import type { AnnotationScope, ImageBlob } from '../AnnotationDataProvider.js';
 export type SaveStatus = 'idle' | 'dirty' | 'saving' | 'saved' | 'error';
 export interface UseAnnotationCanvasDocOptions {
-    scope: JobGroupScope | null;
+    scope: AnnotationScope | null;
     fileId: string | null;
     fallbackViewport?: Partial<AnnotationViewport>;
     debounceMs?: number;

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

@@ -223,10 +223,17 @@ export const useAnnotationCanvasDoc = (options) => {
             }
             else {
                 const doc = dataRef.current;
+                const fileType = doc?.fileData.fileType ?? createSeedRef.current?.fileType ?? 'sketch';
+                const isLabel = doc?.fileData.isLabel ?? createSeedRef.current?.isLabel;
+                // Dotted field paths so the write MERGES into fileData instead of
+                // replacing the map — the doc may carry sibling fileData keys the
+                // canvas doesn't own (a calculator file's columns/tableConfig/
+                // isCompleted, …) which a whole-map write would silently delete.
                 await updateRef.current(id, {
-                    fileData: buildFileData(doc?.fileData.fileType ??
-                        createSeedRef.current?.fileType ??
-                        'sketch', doc?.fileData.isLabel ?? createSeedRef.current?.isLabel, canvasPayload, canvasRev),
+                    'fileData.fileType': fileType,
+                    ...(isLabel !== undefined ? { 'fileData.isLabel': isLabel } : {}),
+                    'fileData.canvas': canvasPayload,
+                    'fileData.canvasRev': canvasRev,
                 });
                 if (debug) {
                     console.log('[useAnnotationCanvasDoc] updated file', id);

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

@@ -1,7 +1,7 @@
-import type { AnnotationFile, JobGroupScope } from '../AnnotationDataProvider.js';
+import { type AnnotationFile, type AnnotationScope } from '../AnnotationDataProvider.js';
 export interface UseAnnotationDocResult {
     data: AnnotationFile | null;
     loading: boolean;
     error: Error | null;
 }
-export declare const useAnnotationDoc: (scope: JobGroupScope | null, fileId: string | null) => UseAnnotationDocResult;
+export declare const useAnnotationDoc: (scope: AnnotationScope | null, fileId: string | null) => UseAnnotationDocResult;

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

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useAnnotationData } from '../AnnotationDataContext.js';
+import { annotationScopeKey, } from '../AnnotationDataProvider.js';
 export const useAnnotationDoc = (scope, fileId) => {
     const provider = useAnnotationData();
     const [data, setData] = useState(null);
@@ -21,13 +22,7 @@ export const useAnnotationDoc = (scope, fileId) => {
             setLoading(false);
         });
         return unsubscribe;
-    }, [
-        provider,
-        scope?.orgId,
-        scope?.projectId,
-        scope?.jobId,
-        scope?.groupId,
-        fileId,
-    ]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [provider, annotationScopeKey(scope), fileId]);
     return { data, loading, error };
 };

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

@@ -1,7 +1,7 @@
-import type { AnnotationFileSummary, JobGroupScope } from '../AnnotationDataProvider.js';
+import { type AnnotationFileSummary, type AnnotationScope } from '../AnnotationDataProvider.js';
 export interface UseAnnotationListResult {
     files: AnnotationFileSummary[];
     loading: boolean;
     error: Error | null;
 }
-export declare const useAnnotationList: (scope: JobGroupScope | null) => UseAnnotationListResult;
+export declare const useAnnotationList: (scope: AnnotationScope | null) => UseAnnotationListResult;

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

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useAnnotationData } from '../AnnotationDataContext.js';
+import { annotationScopeKey, } from '../AnnotationDataProvider.js';
 export const useAnnotationList = (scope) => {
     const provider = useAnnotationData();
     const [files, setFiles] = useState([]);
@@ -21,6 +22,7 @@ export const useAnnotationList = (scope) => {
             setLoading(false);
         });
         return unsubscribe;
-    }, [provider, scope?.orgId, scope?.projectId, scope?.jobId, scope?.groupId]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [provider, annotationScopeKey(scope)]);
     return { files, loading, error };
 };

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

@@ -1,9 +1,9 @@
-import type { AnnotationFile, ImageBlob, JobGroupScope, Patch, UploadedImageRef } from '../AnnotationDataProvider.js';
+import { type AnnotationFile, type AnnotationFilePatch, type AnnotationScope, type ImageBlob, type UploadedImageRef } from '../AnnotationDataProvider.js';
 export interface AnnotationMutations {
     create(seed: Partial<AnnotationFile>): Promise<string>;
-    update(fileId: string, patch: Patch<AnnotationFile>): Promise<void>;
+    update(fileId: string, patch: AnnotationFilePatch): Promise<void>;
     remove(fileId: string): Promise<void>;
     uploadImage(fileId: string, role: 'background' | 'thumbnail', blob: ImageBlob): Promise<UploadedImageRef>;
     deleteImage(fileId: string, storagePath: string): Promise<void>;
 }
-export declare const useAnnotationMutations: (scope: JobGroupScope) => AnnotationMutations;
+export declare const useAnnotationMutations: (scope: AnnotationScope) => AnnotationMutations;

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

@@ -1,11 +1,15 @@
 import { useCallback, useMemo } from 'react';
 import { useAnnotationData } from '../AnnotationDataContext.js';
+import { annotationScopeKey, } from '../AnnotationDataProvider.js';
 export const useAnnotationMutations = (scope) => {
     const provider = useAnnotationData();
-    const create = useCallback((seed) => provider.create(scope, seed), [provider, scope.orgId, scope.projectId, scope.jobId, scope.groupId]);
-    const update = useCallback((fileId, patch) => provider.update(scope, fileId, patch), [provider, scope.orgId, scope.projectId, scope.jobId, scope.groupId]);
-    const remove = useCallback((fileId) => provider.delete(scope, fileId), [provider, scope.orgId, scope.projectId, scope.jobId, scope.groupId]);
-    const uploadImage = useCallback((fileId, role, blob) => provider.uploadImage(scope, fileId, role, blob), [provider, scope.orgId, scope.projectId, scope.jobId, scope.groupId]);
-    const deleteImage = useCallback((fileId, storagePath) => provider.deleteImage(scope, fileId, storagePath), [provider, scope.orgId, scope.projectId, scope.jobId, scope.groupId]);
+    const scopeKey = annotationScopeKey(scope);
+    /* eslint-disable react-hooks/exhaustive-deps */
+    const create = useCallback((seed) => provider.create(scope, seed), [provider, scopeKey]);
+    const update = useCallback((fileId, patch) => provider.update(scope, fileId, patch), [provider, scopeKey]);
+    const remove = useCallback((fileId) => provider.delete(scope, fileId), [provider, scopeKey]);
+    const uploadImage = useCallback((fileId, role, blob) => provider.uploadImage(scope, fileId, role, blob), [provider, scopeKey]);
+    const deleteImage = useCallback((fileId, storagePath) => provider.deleteImage(scope, fileId, storagePath), [provider, scopeKey]);
+    /* eslint-enable react-hooks/exhaustive-deps */
     return useMemo(() => ({ create, update, remove, uploadImage, deleteImage }), [create, update, remove, uploadImage, deleteImage]);
 };

package/dist/exports.d.ts

@@ -9,7 +9,7 @@ export * from './types/annotation.js';
 export { getToleranceColor, calculateDeviationPercentage, isWithinTolerance, generateToleranceGradient, createDefaultToleranceThresholds, DEFAULT_TOLERANCE_COLORS, type ToleranceThreshold, type ToleranceConfig, } from './utils/tolerance.js';
 export { DEFAULT_GROUP_INDEX, isDefaultGroup, findDefaultGroup, } from './utils/groups.js';
 export { numberToLetterIndex, formGroupInputLabel, listGroupMeasurementLabel, } from './utils/indexLabels.js';
-export { isFieldOp, type AnnotationDataProvider, type AnnotationFile, type AnnotationFileSummary, type FieldOp, type ImageBlob, type JobGroupScope, type JobScope, type Patch, type Unsubscribe, type UploadedImageRef, } from './annotation/data/AnnotationDataProvider.js';
+export { annotationScopeKey, isFieldOp, isTemplateScope, type AnnotationDataProvider, type AnnotationFile, type AnnotationFilePatch, type AnnotationFileSummary, type AnnotationScope, type FieldOp, type ImageBlob, type JobGroupScope, type JobScope, type Patch, type TemplateScope, type Unsubscribe, type UploadedImageRef, } from './annotation/data/AnnotationDataProvider.js';
 export { AnnotationDataProviderContext, useAnnotationData, type AnnotationDataProviderProps, } from './annotation/data/AnnotationDataContext.js';
 export { useAnnotationDoc, type UseAnnotationDocResult, } from './annotation/data/hooks/useAnnotationDoc.js';
 export { useAnnotationList, type UseAnnotationListResult, } from './annotation/data/hooks/useAnnotationList.js';

package/dist/exports.js

@@ -14,7 +14,7 @@ export { getToleranceColor, calculateDeviationPercentage, isWithinTolerance, gen
 export { DEFAULT_GROUP_INDEX, isDefaultGroup, findDefaultGroup, } from './utils/groups.js';
 export { numberToLetterIndex, formGroupInputLabel, listGroupMeasurementLabel, } from './utils/indexLabels.js';
 // Annotation data layer (SDK-neutral; apps provide their own provider).
-export { isFieldOp, } from './annotation/data/AnnotationDataProvider.js';
+export { annotationScopeKey, isFieldOp, isTemplateScope, } from './annotation/data/AnnotationDataProvider.js';
 export { AnnotationDataProviderContext, useAnnotationData, } from './annotation/data/AnnotationDataContext.js';
 export { useAnnotationDoc, } from './annotation/data/hooks/useAnnotationDoc.js';
 export { useAnnotationList, } from './annotation/data/hooks/useAnnotationList.js';

package/dist/types/annotation.d.ts

@@ -93,6 +93,7 @@ export interface AnnotationBackgroundImage {
     downloadUrl: string;
     widthPx: number;
     heightPx: number;
+    format?: 'raster' | 'svg';
 }
 export interface AnnotationViewport {
     width: number;

package/dist/types/firestore.d.ts

@@ -126,6 +126,11 @@ export interface CalculatorFileData {
     diagramFileId: string | null;
     columns: Record<string, any>;
     isCompleted: boolean;
+    canvas?: AnnotationCanvasState;
+    canvasRev?: {
+        clientId: string;
+        seq: number;
+    };
 }
 export interface LayoutGroupFileData {
     layoutCount?: number;
@@ -184,7 +189,7 @@ export type FileUpload = FileUploadBase & ({
     fileData?: undefined;
 } | {
     type: FileUploadType.Template;
-    fileData?: undefined;
+    fileData?: AnnotationFileData;
 } | {
     type: FileUploadType.Label;
     fileData: Label;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reekon-tools/boldr-utils",
-  "version": "1.6.30",
+  "version": "1.6.32",
   "description": "Shared utilities for formulas and measurement conversion used in Reekon apps",
   "author": "REEKON Tools",
   "license": "MIT",