@reekon-tools/boldr-utils 1.12.0 → 1.13.0

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

@@ -0,0 +1,72 @@
+import { type Group, type Section } from '../../types/firestore.js';
+export declare const GROUP_HEADER_STYLE: {
+    readonly background: "#424345";
+    readonly radius: 8;
+    readonly padding: 5;
+    readonly selectedBorderWidth: 3;
+    readonly selectedBorderColor: "#FFAD00";
+    readonly badgeHeight: 25;
+    readonly badgeRadius: 4;
+    readonly badgeFontSize: 13;
+    readonly badgeTextColor: "#FFFFFF";
+    readonly badgeGapExpanded: 5;
+    readonly badgeGapCollapsed: 5;
+    readonly nameGap: 3;
+    readonly nameFontSize: 15;
+    readonly nameColor: "#FFFFFF";
+    readonly globeSize: 17;
+    readonly globeColor: "#FFFFFF";
+};
+export interface GroupHeaderBadge {
+    /** Stable React key — 'table' | 'form' | 'group'. */
+    key: 'table' | 'form' | 'group';
+    /** Rendered text, e.g. "# Table 2". Empty for the default group's globe. */
+    text: string;
+    background: string;
+}
+export interface GroupHeaderDescriptor {
+    collapsed: boolean;
+    /**
+     * Badges in render order. A FORM group reads "# Table N" then "# Form N"
+     * (the ordering the job screen's form cards settled); a LIST group reads a
+     * single "# Group N". Expanded, they sit side by side and share the row's
+     * width; collapsed, they stack full-width. Empty only when the source group
+     * is missing entirely.
+     */
+    badges: GroupHeaderBadge[];
+    /**
+     * The default group has no index to show, so its single chip carries a globe
+     * glyph instead of text — the same stand-in the measurement picker uses.
+     * When true, `badges` holds exactly the one chip to draw the globe inside.
+     */
+    showGlobe: boolean;
+    /** Group name. `null` when collapsed — a collapsed header is badges only. */
+    name: string | null;
+    /** Natural box to lay the chip out at, before the overlay transform. */
+    design: {
+        width: number;
+        height: number;
+    };
+}
+/**
+ * Resolve what a header chip shows. `group` is looked up live by the host from
+ * `placed.groupId` so renames and re-indexes appear without touching the
+ * canvas document; `section` is that group's section, needed only for a FORM
+ * header's "# Table N". Both may be undefined — a group deleted after its
+ * header was placed still has to render something rather than crash.
+ */
+export declare const describeGroupHeader: ({ group, section, collapsed, }: {
+    group: Group | undefined | null;
+    section?: Section | undefined | null;
+    collapsed?: boolean;
+}) => GroupHeaderDescriptor;
+/**
+ * Signature of everything `describeGroupHeader` would render, for hosts that
+ * cache on tile content (mobile re-bakes its canvas thumbnail when this
+ * changes). Kept beside the resolver so the two can't drift.
+ */
+export declare const groupHeaderSignature: (input: {
+    group: Group | undefined | null;
+    section?: Section | undefined | null;
+    collapsed?: boolean;
+}) => string;

package/dist/annotation/canvas/groupHeaderLayout.js

@@ -0,0 +1,115 @@
+// Presentation model for the group-header chip placed on an annotation canvas
+// (`PlacedMeasurementRef.isGroupHeader`), shared by mobile and web.
+//
+// The chip itself can't be shared — this package ships DOM and React Native
+// forks of the canvas host, and there is no react-native-web in the graph, so
+// a single component would only render on one of them. What CAN be shared is
+// everything that isn't a view node: which badges a header shows, what they
+// say, what colour they are, and every measurement in the Figma frames. Both
+// hosts render the SAME descriptor into ~40 lines of platform view code, so a
+// change to the header's content or metrics lands in one place.
+//
+// Figma (BOLDR PRO / APP STRUCTURE, "HEADER SETTINGS - MVP" 490:4189):
+//   491:5371 expanded group · 491:5654 collapsed group
+//   491:5381 expanded form  · 491:5659 collapsed form
+// Asana 1217382797393698.
+import { GroupType } from '../../types/firestore.js';
+import { GeneralColors, TileColors, YellowColors } from '../../theme/colors.js';
+import { GROUP_HEADER_DESIGN } from './stampLayout.js';
+// Every length here is in the DESIGN space the frames were drawn in — the
+// 200×56 / 90×65 boxes of GROUP_HEADER_DESIGN. Hosts lay the chip out at that
+// natural size and uniformly transform-scale it into the overlay box
+// stampTileDims hands them, so these numbers never need scaling by hand.
+export const GROUP_HEADER_STYLE = {
+    // Outer chip.
+    background: GeneralColors.grey2,
+    radius: 8,
+    padding: 5,
+    // Selection ring. Drawn INSIDE the chip's box (the footprint is the
+    // hit-test box too, so an outset ring would lie about what is grabbable).
+    selectedBorderWidth: 3,
+    selectedBorderColor: YellowColors.mainYellow,
+    // Index badges.
+    badgeHeight: 25,
+    badgeRadius: 4,
+    badgeFontSize: 13,
+    badgeTextColor: GeneralColors.white,
+    // Gap between the two badges of a form header: horizontal when expanded
+    // (they sit side by side), vertical when collapsed (they stack).
+    badgeGapExpanded: 5,
+    badgeGapCollapsed: 5,
+    // Group name, expanded only.
+    nameGap: 3,
+    nameFontSize: 15,
+    nameColor: GeneralColors.white,
+    // Globe glyph that stands in for the index badge on the default group.
+    globeSize: 17,
+    globeColor: GeneralColors.white,
+};
+/**
+ * Resolve what a header chip shows. `group` is looked up live by the host from
+ * `placed.groupId` so renames and re-indexes appear without touching the
+ * canvas document; `section` is that group's section, needed only for a FORM
+ * header's "# Table N". Both may be undefined — a group deleted after its
+ * header was placed still has to render something rather than crash.
+ */
+export const describeGroupHeader = ({ group, section, collapsed = false, }) => {
+    const design = collapsed
+        ? GROUP_HEADER_DESIGN.collapsed
+        : GROUP_HEADER_DESIGN.expanded;
+    const base = {
+        collapsed,
+        name: collapsed ? null : (group?.name ?? 'Group'),
+        design,
+    };
+    if (!group)
+        return { ...base, badges: [], showGlobe: false };
+    // Default group (index 0): no number to show — the globe chip stands in.
+    if (group.groupIndex === 0) {
+        return {
+            ...base,
+            showGlobe: true,
+            badges: [{ key: 'group', text: '', background: TileColors.darkBlue }],
+        };
+    }
+    const badges = [];
+    if (group.type === GroupType.FORM) {
+        // "# Table N" only when the section resolved — a form header with a
+        // missing section drops to its "# Form N" badge alone rather than
+        // rendering an empty chip.
+        if (typeof section?.index === 'number') {
+            badges.push({
+                key: 'table',
+                text: `# Table ${section.index + 1}`,
+                background: TileColors.lightBlue1,
+            });
+        }
+        badges.push({
+            key: 'form',
+            text: `# Form ${group.groupIndex + 1}`,
+            background: TileColors.activeBlue,
+        });
+    }
+    else {
+        badges.push({
+            key: 'group',
+            text: `# Group ${group.groupIndex + 1}`,
+            background: TileColors.darkBlue,
+        });
+    }
+    return { ...base, badges, showGlobe: false };
+};
+/**
+ * Signature of everything `describeGroupHeader` would render, for hosts that
+ * cache on tile content (mobile re-bakes its canvas thumbnail when this
+ * changes). Kept beside the resolver so the two can't drift.
+ */
+export const groupHeaderSignature = (input) => {
+    const d = describeGroupHeader(input);
+    return [
+        d.collapsed ? 'c' : 'e',
+        d.showGlobe ? 'globe' : '',
+        d.badges.map((b) => `${b.key}:${b.text}`).join(','),
+        d.name ?? '',
+    ].join('~');
+};

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

@@ -1,7 +1,20 @@
 import type { AnnotationCanvasState, PlacedMeasurementRef, TileScalePlatform } from '../../types/annotation.js';
 export declare const STAMP_TILE_SIZE = 96;
 export declare const GROUP_HEADER_TILE_WIDTH = 240;
-export declare const GROUP_HEADER_TILE_HEIGHT = 64;
+export declare const GROUP_HEADER_TILE_HEIGHT = 67.2;
+export declare const GROUP_HEADER_DESIGN: {
+    readonly expanded: {
+        readonly width: 200;
+        readonly height: 56;
+    };
+    readonly collapsed: {
+        readonly width: 90;
+        readonly height: 65;
+    };
+};
+export declare const GROUP_HEADER_COLLAPSED_WIDTH: number;
+export declare const GROUP_HEADER_COLLAPSED_HEIGHT: number;
+export declare const groupHeaderBaseDims: (collapsed?: boolean) => StampTileDims;
 export declare const DEFAULT_TILE_SCALE = 1;
 export declare const TILE_SCALE_MIN = 0.4;
 export declare const TILE_SCALE_MAX = 2;
@@ -15,4 +28,4 @@ export interface StampTileDims {
     width: number;
     height: number;
 }
-export declare const stampTileDims: (m: Pick<PlacedMeasurementRef, "scale" | "isGroupHeader">, tileScaleFactor?: number, viewportScale?: number) => StampTileDims;
+export declare const stampTileDims: (m: Pick<PlacedMeasurementRef, "scale" | "isGroupHeader" | "collapsed">, tileScaleFactor?: number, viewportScale?: number) => StampTileDims;

package/dist/annotation/canvas/stampLayout.js

@@ -15,13 +15,48 @@
 // tile-scale slider against blank tiles saw their tiles balloon once
 // populated (Asana 1216233394800417).
 export const STAMP_TILE_SIZE = 96;
-// Base footprint of a group-header chip (`isGroupHeader`) — a wide pill
-// rather than the square tile, same 3.75:1 ratio as the legacy Nutrient
-// header stamp (150×40). Sized exactly like STAMP_TILE_SIZE: `placed.scale`
-// × the document-wide tile-scale factor, scaling with zoom from the
-// content-fit reference.
+// Base footprint of an EXPANDED group-header chip (`isGroupHeader`) — a wide
+// pill rather than the square tile. Sized exactly like STAMP_TILE_SIZE:
+// `placed.scale` × the document-wide tile-scale factor, scaling with zoom from
+// the content-fit reference. The width is the header's established base and
+// does not change; the height now follows the design's 200×56 proportion
+// (see GROUP_HEADER_DESIGN below) rather than the legacy Nutrient stamp's
+// 150×40, a ~5% difference on existing documents.
 export const GROUP_HEADER_TILE_WIDTH = 240;
-export const GROUP_HEADER_TILE_HEIGHT = 64;
+export const GROUP_HEADER_TILE_HEIGHT = 67.2;
+// Natural design-space size of each header state, straight off the Figma
+// frames (491:5371 expanded / 491:5654 collapsed — the two form variants,
+// 491:5381 / 491:5659, use the same boxes). Renderers lay the chip out at
+// THESE dimensions and uniformly transform-scale it into the overlay box, the
+// same natural-size-then-scale pattern the measurement tiles use, so type and
+// badges keep their proportions under the tile-scale slider. Collapsed is one
+// fixed box for both group and form headers — a form stacks its two badges to
+// fill it, a group centers its single badge — so a canvas of collapsed
+// headers reads as a tidy row of equal chips.
+export const GROUP_HEADER_DESIGN = {
+    expanded: { width: 200, height: 56 },
+    collapsed: { width: 90, height: 65 },
+};
+// Design units → base units. Pinned by the expanded header keeping its
+// established 240-unit width, and applied to BOTH states so the two share one
+// scale: a badge is the same size whether its header is expanded or collapsed.
+const HEADER_BASE_SCALE = GROUP_HEADER_TILE_WIDTH / GROUP_HEADER_DESIGN.expanded.width;
+// Base footprint of a COLLAPSED group-header chip — the design's 90×65 at the
+// same scale. Wider-than-tall no longer holds here: a collapsed header is
+// slightly TALLER than an expanded one (it stacks badges where the expanded
+// one puts them side by side and hangs the name underneath).
+export const GROUP_HEADER_COLLAPSED_WIDTH = GROUP_HEADER_DESIGN.collapsed.width * HEADER_BASE_SCALE;
+export const GROUP_HEADER_COLLAPSED_HEIGHT = GROUP_HEADER_DESIGN.collapsed.height * HEADER_BASE_SCALE;
+// Unscaled footprint of a group header in each state — the one place the
+// expanded/collapsed box choice is made. Callers that already hold a
+// PlacedMeasurementRef should go through stampTileDims instead, which folds in
+// `scale`, the document-wide factor and the zoom.
+export const groupHeaderBaseDims = (collapsed) => collapsed
+    ? {
+        width: GROUP_HEADER_COLLAPSED_WIDTH,
+        height: GROUP_HEADER_COLLAPSED_HEIGHT,
+    }
+    : { width: GROUP_HEADER_TILE_WIDTH, height: GROUP_HEADER_TILE_HEIGHT };
 // Document-wide tile scale factor: one knob that shrinks/grows EVERY
 // measurement tile on the canvas at once, on top of each tile's own `scale`.
 // Lets a user pull tiles down on a dense drawing where lines crowd together,
@@ -103,10 +138,9 @@ export const isUnassociatedStamp = (m) => !m.isGroupHeader && !m.measurementId &
 export const stampTileSize = (m, tileScaleFactor = DEFAULT_TILE_SCALE, viewportScale = 1) => STAMP_TILE_SIZE * (m.scale ?? 1) * tileScaleFactor * viewportScale;
 export const stampTileDims = (m, tileScaleFactor = DEFAULT_TILE_SCALE, viewportScale = 1) => {
     const k = (m.scale ?? 1) * tileScaleFactor * viewportScale;
-    return m.isGroupHeader
-        ? {
-            width: GROUP_HEADER_TILE_WIDTH * k,
-            height: GROUP_HEADER_TILE_HEIGHT * k,
-        }
-        : { width: STAMP_TILE_SIZE * k, height: STAMP_TILE_SIZE * k };
+    if (!m.isGroupHeader) {
+        return { width: STAMP_TILE_SIZE * k, height: STAMP_TILE_SIZE * k };
+    }
+    const base = groupHeaderBaseDims(m.collapsed);
+    return { width: base.width * k, height: base.height * k };
 };

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

@@ -46,6 +46,7 @@ export interface AnnotationCanvasHandle {
     placeGroupHeaderAtCenter(ref: {
         groupId: string;
     }): AnnotationElementId;
+    setGroupHeaderCollapsed(id: AnnotationElementId, collapsed: boolean): void;
     deleteSelected(): void;
 }
 export interface UseAnnotationCanvasStateProps {

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -661,6 +661,17 @@ export const useAnnotationCanvasState = (props) => {
                 c.setSelection({ ids: [placed.id] });
                 return placed.id;
             },
+            setGroupHeaderCollapsed(id, collapsed) {
+                const c = ctxRef.current;
+                const target = c.document.placedMeasurements.find((m) => m.id === id);
+                if (!target?.isGroupHeader)
+                    return;
+                if (!!target.collapsed === collapsed)
+                    return;
+                c.commit({
+                    ops: [{ op: 'updateMeasurement', id, patch: { collapsed } }],
+                });
+            },
             deleteSelected() {
                 const c = ctxRef.current;
                 const ids = c.selection?.ids;

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;