@reekon-tools/boldr-utils 1.8.3 → 1.8.5

package/dist/calculator/schema.js

@@ -13,11 +13,17 @@ import { unitsForDimension } from './units.js';
 // brackets) and every runtime field value is canonical — µm for length, µm²
 // area, µm³ volume, degrees for angle, raw for dimensionless (see units.ts).
 //
-// EXPRESSION SEMANTICS: equations are math.js expressions evaluated over a
-// canonical scope. Numeric literals inside an expression are therefore
-// canonical too (a bare `2` multiplying a length is a plain scalar; a bare
-// additive length constant would be micrometers). Authors should express
-// length constants as input fields with a defaultValue instead of literals.
+// EXPRESSION SEMANTICS: equations are math.js expressions. By default they
+// evaluate over a canonical scope, which makes numeric literals canonical too
+// (a bare `2` multiplying a length is a plain scalar; a bare additive length
+// constant would be micrometers). Per-equation `variableUnits` / `resultUnit`
+// instead evaluate in author-chosen display units: each mapped variable is
+// converted OUT of canonical into its unit before entering the scope, and the
+// result is converted back FROM `resultUnit` into canonical. This is what
+// makes literals meaningful ("roof area in ft² / 100 = roofing squares") —
+// without it, a number-kind output consuming a measurement variable silently
+// receives µm-scale values. The authoring UI always sets units; the bare
+// canonical form survives for pre-existing definitions.
 // ---------------------------------------------------------------------------
 /**
  * Version of the definition format itself. Bumped only on breaking schema

package/dist/calculator/validate.d.ts

@@ -157,6 +157,8 @@ export declare const calculatorDefinitionSchema: z.ZodObject<{
         targetFieldId: z.ZodString;
         expression: z.ZodString;
         variableToFieldId: z.ZodRecord<z.ZodString, z.ZodString>;
+        variableUnits: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+        resultUnit: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>;
     diagramFileId: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     isPublic: z.ZodBoolean;

package/dist/calculator/validate.js

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import { create, all } from 'mathjs';
 import { ColumnType, DecimalTolerance, FractionalTolerance, } from '../types/firestore.js';
-import { CALCULATOR_SCHEMA_VERSION, equationForField, isEquationTargetKind, isNumericFieldKind, } from './schema.js';
+import { CALCULATOR_SCHEMA_VERSION, equationForField, fieldDimension, isEquationTargetKind, isNumericFieldKind, } from './schema.js';
 import { CALCULATOR_UNIT_INFO, unitDimension } from './units.js';
 import { isCalculatorCategoryId } from './categories.js';
 const math = create(all);
@@ -94,6 +94,8 @@ const calculatorEquationSchema = z.object({
     targetFieldId: z.string().min(1),
     expression: z.string().min(1),
     variableToFieldId: z.record(z.string(), z.string()),
+    variableUnits: z.record(z.string(), calculatorUnitSchema).optional(),
+    resultUnit: calculatorUnitSchema.optional(),
 });
 export const calculatorDefinitionSchema = z.object({
     id: z.string().min(1),
@@ -303,6 +305,46 @@ export const validateCalculatorDefinition = (input) => {
                 push('self-referencing-equation', `${path}.variableToFieldId.${variable}`, `Equation for "${eq.targetFieldId}" references its own target`);
             }
         }
+        // --- Unit annotations --------------------------------------------------
+        for (const [variable, unit] of Object.entries(eq.variableUnits ?? {})) {
+            const unitPath = `${path}.variableUnits.${variable}`;
+            const mappedId = eq.variableToFieldId[variable];
+            if (mappedId == null) {
+                push('unit-for-unmapped-variable', unitPath, `Variable ${variable} has a unit but no field mapping`, 'warning');
+                continue;
+            }
+            const mapped = fieldById.get(mappedId);
+            if (!mapped)
+                continue; // unknown-mapped-field already reported above
+            const dim = fieldDimension(mapped);
+            if (dim === 'none') {
+                push('variable-unit-on-dimensionless-field', unitPath, `Variable ${variable} maps to "${mapped.name}", which has no unit dimension`);
+            }
+            else if (unitDimension(unit) !== dim) {
+                push('variable-unit-dimension-mismatch', unitPath, `Unit "${unit}" is not a ${dim} unit (variable ${variable} maps to "${mapped.name}")`);
+            }
+        }
+        if (eq.resultUnit != null && target) {
+            const dim = fieldDimension(target);
+            if (dim === 'none') {
+                push('result-unit-on-number-target', `${path}.resultUnit`, `Equation target "${target.name}" is a number field and takes the result as-is; remove the result unit`);
+            }
+            else if (unitDimension(eq.resultUnit) !== dim) {
+                push('result-unit-dimension-mismatch', `${path}.resultUnit`, `Result unit "${eq.resultUnit}" is not a ${dim} unit (target "${target.name}")`);
+            }
+        }
+        // The canonical-leak trap: a number target consuming a unit-carrying
+        // field without a variable unit receives raw µm-scale values.
+        if (target?.kind === ColumnType.Number) {
+            for (const [variable, fieldId] of Object.entries(eq.variableToFieldId)) {
+                const mapped = fieldById.get(fieldId);
+                if (!mapped || fieldDimension(mapped) === 'none')
+                    continue;
+                if (eq.variableUnits?.[variable] == null) {
+                    push('canonical-value-into-number-target', `${path}.variableToFieldId.${variable}`, `"${target.name}" is a number field but variable ${variable} ("${mapped.name}") has no display unit — its canonical (µm-scale) value will be used. Pick a unit for ${variable}.`, 'warning');
+                }
+            }
+        }
         const symbols = expressionSymbols(eq.expression);
         if (!symbols.ok) {
             push('expression-invalid', `${path}.expression`, `Expression does not parse: ${symbols.error}`);

package/dist/exports.d.ts

@@ -7,6 +7,7 @@ export * from './types/firestore.js';
 export * from './types/layout.js';
 export * from './types/annotation.js';
 export { getToleranceColor, calculateDeviationPercentage, isWithinTolerance, generateToleranceGradient, createDefaultToleranceThresholds, DEFAULT_TOLERANCE_COLORS, type ToleranceThreshold, type ToleranceConfig, } from './utils/tolerance.js';
+export { GeneralColors, SecondaryColors, FormColors, TileColors, FormulaColors, YellowColors, RedColors, GreenColors, tailwindColors, } from './theme/colors.js';
 export { DEFAULT_GROUP_INDEX, isDefaultGroup, findDefaultGroup, isFormGroupCompleted, } from './utils/groups.js';
 export { ALL_EXPORT_CATEGORIES, ALL_EXPORT_MEASUREMENT_DATA_FIELDS, ALL_EXPORT_OBJECT_TYPES, DEFAULT_EXPORT_CONFIG, EXPORT_EVERYTHING_CONFIG, normalizeExportConfig, type ExportCategory, type ExportConfig, type ExportImageFormat, type ExportMeasurementDataField, type ExportMeasurementFilter, type ExportObjectType, } from './export/config.js';
 export { classifyFileForExport } from './export/objectKinds.js';

package/dist/exports.js

@@ -11,6 +11,8 @@ export * from './types/firestore.js';
 export * from './types/layout.js';
 export * from './types/annotation.js';
 export { getToleranceColor, calculateDeviationPercentage, isWithinTolerance, generateToleranceGradient, createDefaultToleranceThresholds, DEFAULT_TOLERANCE_COLORS, } from './utils/tolerance.js';
+// Shared color palette (canonical source for both apps' brand colors).
+export { GeneralColors, SecondaryColors, FormColors, TileColors, FormulaColors, YellowColors, RedColors, GreenColors, tailwindColors, } from './theme/colors.js';
 export { DEFAULT_GROUP_INDEX, isDefaultGroup, findDefaultGroup, isFormGroupCompleted, } from './utils/groups.js';
 // Configurable job CSV export, shared by rock-pro-app and rock-desktop so
 // both platforms emit identical files.

package/dist/theme/colors.d.ts

@@ -0,0 +1,101 @@
+export declare const GeneralColors: {
+    readonly darkGrey: "#1D1F21";
+    readonly grey1: "#2B2C2E";
+    readonly grey2: "#424345";
+    readonly grey3: "#626364";
+    readonly grey4: "#9FA0A2";
+    readonly white: "#FFFFFF";
+};
+export declare const SecondaryColors: {
+    readonly accentBlue1: "#2D3843";
+    readonly accentBlue2: "#2E4C6A";
+    readonly accentBlue3: "#4B6074";
+    readonly accentBlue4: "#67819A";
+};
+export declare const FormColors: {
+    readonly lightGrey1: "#BCBEC2";
+    readonly lightGrey2: "#E8EAED";
+};
+export declare const TileColors: {
+    readonly darkBlue: "#02274B";
+    readonly activeBlue: "#0066FF";
+    readonly lightBlue1: "#50A6FF";
+    readonly lightBlue2: "#89C3FF";
+};
+export declare const FormulaColors: {
+    readonly darkPurple: "#6C155F";
+    readonly purple: "#BD30A8";
+};
+export declare const YellowColors: {
+    readonly mainYellow: "#FFAD00";
+};
+export declare const RedColors: {
+    readonly warningRed: "#DA1100";
+    readonly red: "#E83D2F";
+    readonly mutedRed: "#DF6358";
+};
+export declare const GreenColors: {
+    readonly warningGreen: "#00E920";
+    readonly green: "#58A942";
+    readonly mutedGreen: "#8BB380";
+};
+/**
+ * The palette above shaped for Tailwind's `theme.extend.colors`. Spread it
+ * into the app's tailwind config (works with tailwindcss v3 and NativeWind):
+ *
+ *   import { tailwindColors } from '@reekon-tools/boldr-utils/theme';
+ *   export default {
+ *     theme: { extend: { colors: { ...tailwindColors } } },
+ *   };
+ *
+ * Class names follow the constant names, kebab-cased per group, e.g.
+ * `bg-general-dark-grey`, `text-secondary-accent-blue-1`, `bg-tile-active`,
+ * `border-form-light-grey-2`, `bg-formula`, `text-brand-red-muted`.
+ *
+ * The yellow/red/green groups are namespaced under `brand-*` so they don't
+ * shadow Tailwind's built-in `yellow`/`red`/`green` scales (extend replaces
+ * a color key wholesale, which would break classes like `text-red-500`).
+ */
+export declare const tailwindColors: {
+    readonly general: {
+        readonly 'dark-grey': "#1D1F21";
+        readonly 'grey-1': "#2B2C2E";
+        readonly 'grey-2': "#424345";
+        readonly 'grey-3': "#626364";
+        readonly 'grey-4': "#9FA0A2";
+        readonly white: "#FFFFFF";
+    };
+    readonly secondary: {
+        readonly 'accent-blue-1': "#2D3843";
+        readonly 'accent-blue-2': "#2E4C6A";
+        readonly 'accent-blue-3': "#4B6074";
+        readonly 'accent-blue-4': "#67819A";
+    };
+    readonly form: {
+        readonly 'light-grey-1': "#BCBEC2";
+        readonly 'light-grey-2': "#E8EAED";
+    };
+    readonly tile: {
+        readonly dark: "#02274B";
+        readonly active: "#0066FF";
+        readonly 'light-1': "#50A6FF";
+        readonly 'light-2': "#89C3FF";
+    };
+    readonly formula: {
+        readonly DEFAULT: "#BD30A8";
+        readonly dark: "#6C155F";
+    };
+    readonly 'brand-yellow': {
+        readonly DEFAULT: "#FFAD00";
+    };
+    readonly 'brand-red': {
+        readonly DEFAULT: "#E83D2F";
+        readonly warning: "#DA1100";
+        readonly muted: "#DF6358";
+    };
+    readonly 'brand-green': {
+        readonly DEFAULT: "#58A942";
+        readonly warning: "#00E920";
+        readonly muted: "#8BB380";
+    };
+};

package/dist/theme/colors.js

@@ -0,0 +1,101 @@
+export const GeneralColors = {
+    darkGrey: '#1D1F21',
+    grey1: '#2B2C2E',
+    grey2: '#424345',
+    grey3: '#626364',
+    grey4: '#9FA0A2',
+    white: '#FFFFFF',
+};
+export const SecondaryColors = {
+    accentBlue1: '#2D3843',
+    accentBlue2: '#2E4C6A',
+    accentBlue3: '#4B6074',
+    accentBlue4: '#67819A',
+};
+export const FormColors = {
+    lightGrey1: '#BCBEC2',
+    lightGrey2: '#E8EAED',
+};
+export const TileColors = {
+    darkBlue: '#02274B',
+    activeBlue: '#0066FF',
+    lightBlue1: '#50A6FF',
+    lightBlue2: '#89C3FF',
+};
+export const FormulaColors = {
+    darkPurple: '#6C155F',
+    purple: '#BD30A8',
+};
+export const YellowColors = {
+    mainYellow: '#FFAD00',
+};
+export const RedColors = {
+    warningRed: '#DA1100',
+    red: '#E83D2F',
+    mutedRed: '#DF6358',
+};
+export const GreenColors = {
+    warningGreen: '#00E920',
+    green: '#58A942',
+    mutedGreen: '#8BB380',
+};
+/**
+ * The palette above shaped for Tailwind's `theme.extend.colors`. Spread it
+ * into the app's tailwind config (works with tailwindcss v3 and NativeWind):
+ *
+ *   import { tailwindColors } from '@reekon-tools/boldr-utils/theme';
+ *   export default {
+ *     theme: { extend: { colors: { ...tailwindColors } } },
+ *   };
+ *
+ * Class names follow the constant names, kebab-cased per group, e.g.
+ * `bg-general-dark-grey`, `text-secondary-accent-blue-1`, `bg-tile-active`,
+ * `border-form-light-grey-2`, `bg-formula`, `text-brand-red-muted`.
+ *
+ * The yellow/red/green groups are namespaced under `brand-*` so they don't
+ * shadow Tailwind's built-in `yellow`/`red`/`green` scales (extend replaces
+ * a color key wholesale, which would break classes like `text-red-500`).
+ */
+export const tailwindColors = {
+    general: {
+        'dark-grey': GeneralColors.darkGrey,
+        'grey-1': GeneralColors.grey1,
+        'grey-2': GeneralColors.grey2,
+        'grey-3': GeneralColors.grey3,
+        'grey-4': GeneralColors.grey4,
+        white: GeneralColors.white,
+    },
+    secondary: {
+        'accent-blue-1': SecondaryColors.accentBlue1,
+        'accent-blue-2': SecondaryColors.accentBlue2,
+        'accent-blue-3': SecondaryColors.accentBlue3,
+        'accent-blue-4': SecondaryColors.accentBlue4,
+    },
+    form: {
+        'light-grey-1': FormColors.lightGrey1,
+        'light-grey-2': FormColors.lightGrey2,
+    },
+    tile: {
+        dark: TileColors.darkBlue,
+        active: TileColors.activeBlue,
+        'light-1': TileColors.lightBlue1,
+        'light-2': TileColors.lightBlue2,
+    },
+    formula: {
+        DEFAULT: FormulaColors.purple,
+        dark: FormulaColors.darkPurple,
+    },
+    'brand-yellow': {
+        DEFAULT: YellowColors.mainYellow,
+    },
+    'brand-red': {
+        DEFAULT: RedColors.red,
+        warning: RedColors.warningRed,
+        muted: RedColors.mutedRed,
+    },
+    'brand-green': {
+        DEFAULT: GreenColors.green,
+        warning: GreenColors.warningGreen,
+        muted: GreenColors.mutedGreen,
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reekon-tools/boldr-utils",
-  "version": "1.8.3",
+  "version": "1.8.5",
   "description": "Shared utilities for formulas and measurement conversion used in Reekon apps",
   "author": "REEKON Tools",
   "license": "MIT",
@@ -19,6 +19,11 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./theme": {
+      "types": "./dist/theme/colors.d.ts",
+      "import": "./dist/theme/colors.js",
+      "default": "./dist/theme/colors.js"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -30,7 +35,7 @@
     "coverage": "vitest run --coverage",
     "format": "prettier --write .",
     "check-format": "prettier --check .",
-    "check-exports": "attw --pack . --ignore-rules=cjs-resolves-to-esm",
+    "check-exports": "attw --pack . --profile esm-only",
     "ci": "yarn run check-format && vitest run && yarn run build && yarn run check-exports"
   },
   "keywords": [],

package/dist/canvas/AnnotationCanvas.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,219 +0,0 @@
-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));
-                }) }))] }));
-};