@reekon-tools/boldr-utils 1.6.28 → 1.6.30

package/dist/annotation/canvas/AnnotationCanvasInner.js

@@ -42,7 +42,12 @@ export const AnnotationCanvasInner = (props) => {
         provider.registerFont(textTypeface, TEXT_FONT_FAMILY);
         return provider;
     }, [textTypeface]);
-    const state = useAnnotationCanvasState(props);
+    // This is the web renderer, so the canvas reads web's tile-scale knob (web
+    // and mobile persist separate values — see resolveTileScaleFactor).
+    const state = useAnnotationCanvasState({
+        ...props,
+        tileScalePlatform: 'web',
+    });
     const containerRef = useRef(null);
     const panGestureRef = useRef(null);
     const spaceDownRef = useRef(false);
@@ -261,7 +266,7 @@ export const AnnotationCanvasInner = (props) => {
         const world = state.ctx.viewport.screenToWorld(screen);
         const placed = [...state.effectiveCanvas.placedMeasurements]
             .reverse()
-            .find((m) => hitPlacedMeasurement(m, world, state.viewport.zoom, state.effectiveCanvas.tileScaleFactor, state.tileViewportScale));
+            .find((m) => hitPlacedMeasurement(m, world, state.viewport.zoom, state.tileScaleFactor, state.tileViewportScale));
         if (placed)
             onMeasurementStampDoubleTap(placed);
     }, [onMeasurementStampDoubleTap, state]);
@@ -293,7 +298,7 @@ export const AnnotationCanvasInner = (props) => {
                     inset: 0,
                     pointerEvents: 'none',
                 }, children: state.effectiveCanvas.placedMeasurements.map((placed) => {
-                    const size = stampTileSize(placed, state.effectiveCanvas.tileScaleFactor, state.tileViewportScale);
+                    const size = stampTileSize(placed, state.tileScaleFactor, state.tileViewportScale);
                     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;

package/dist/annotation/canvas/AnnotationCanvasInner.native.js

@@ -58,7 +58,13 @@ const LOUPE_CROSSHAIR_ARM = 9; // half-length of each crosshair arm, points
 export const AnnotationCanvasInner = (props) => {
     const { resolveImageUrl, stampFontSource, stampValueFontSize = 14, width, height, style, magnifierTopOffset = 0, } = props;
     const valueFont = useFont(stampFontSource, stampValueFontSize);
-    const state = useAnnotationCanvasState(props);
+    // This is the native (mobile) renderer, so the canvas reads mobile's
+    // tile-scale knob (web and mobile persist separate values — see
+    // resolveTileScaleFactor).
+    const state = useAnnotationCanvasState({
+        ...props,
+        tileScalePlatform: 'mobile',
+    });
     // Decode the background image ONCE here and share it with both the main
     // canvas and the magnifier loupe. If each canvas loaded its own, the loupe
     // would flash its blank base every gesture while it re-resolved + re-decoded.
@@ -746,7 +752,7 @@ export const AnnotationCanvasInner = (props) => {
                 return;
             const world = st.ctx.viewport.screenToWorld(screen);
             const zoomNow = st.ctx.viewport.state.zoom;
-            const hit = dragSelection.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale);
+            const hit = dragSelection.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale, st.ctx.tileScaleFactor);
             if (!hit || hit.kind !== 'measurement' || hit.id !== prevSelectedId) {
                 return;
             }
@@ -1012,7 +1018,7 @@ export const AnnotationCanvasInner = (props) => {
                 // so a selected tile isn't stuck until you deselect it).
                 const selId = st.ctx.selection?.ids[0];
                 if (selId &&
-                    !cfg.isSelectedTileGrab?.(st.ctx.document, selId, world, zoomNow, st.ctx.tileViewportScale)) {
+                    !cfg.isSelectedTileGrab?.(st.ctx.document, selId, world, zoomNow, st.ctx.tileViewportScale, st.ctx.tileScaleFactor)) {
                     const handle = cfg.hitTestHandle?.(st.ctx.document, selId, world, zoomNow);
                     if (handle) {
                         const m = st.ctx.document.placedMeasurements.find((x) => x.id === selId);
@@ -1112,7 +1118,7 @@ export const AnnotationCanvasInner = (props) => {
                         return;
                     }
                 }
-                const hit = cfg.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale);
+                const hit = cfg.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale, st.ctx.tileScaleFactor);
                 if (!hit) {
                     st.ctx.setSelection(null);
                     dragTargetRef.current = null;
@@ -1121,7 +1127,7 @@ export const AnnotationCanvasInner = (props) => {
                 st.ctx.setSelection({ ids: [hit.id] });
                 // Grabbing a line annotation's tile slides it; otherwise group-move.
                 const grab = hit.kind === 'measurement'
-                    ? cfg.classifyMeasurementGrab?.(st.ctx.document, hit.id, world, zoomNow, st.ctx.tileViewportScale)
+                    ? cfg.classifyMeasurementGrab?.(st.ctx.document, hit.id, world, zoomNow, st.ctx.tileViewportScale, st.ctx.tileScaleFactor)
                     : 'move';
                 if (grab === 'slide') {
                     const m = st.ctx.document.placedMeasurements.find((x) => x.id === hit.id);
@@ -1423,19 +1429,17 @@ export const AnnotationCanvasInner = (props) => {
     const loupeWrap = (content) => (_jsxs(_Fragment, { children: [_jsxs(Group, { clip: loupeClip, children: [_jsx(Rect, { x: loupeX, y: loupeY, width: loupeSize, height: loupeSize, color: LOUPE_BG_COLOR }), content] }), _jsx(RoundedRect, { x: loupeX, y: loupeY, width: loupeSize, height: loupeSize, r: LOUPE_RADIUS, color: LOUPE_BORDER_COLOR, style: "stroke", strokeWidth: LOUPE_BORDER_WIDTH }), _jsx(Line, { p1: { x: loupeCx - LOUPE_CROSSHAIR_ARM, y: loupeCy }, p2: { x: loupeCx + LOUPE_CROSSHAIR_ARM, y: loupeCy }, color: LOUPE_CROSSHAIR_COLOR, strokeWidth: 1.5 }), _jsx(Line, { p1: { x: loupeCx, y: loupeCy - LOUPE_CROSSHAIR_ARM }, p2: { x: loupeCx, y: loupeCy + LOUPE_CROSSHAIR_ARM }, color: LOUPE_CROSSHAIR_COLOR, strokeWidth: 1.5 })] }));
     return (_jsxs(GestureHandlerRootView, { style: [{ width, height }, style], children: [_jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: { width, height }, collapsable: false, children: AnnotationCanvasSkia(skiaProps) }) }), renderMeasurementStamp && (_jsx(View, { pointerEvents: "box-none", style: StyleSheet.absoluteFill, children: state.effectiveCanvas.placedMeasurements.map((placed) => (_jsx(MeasurementStampOverlayItem, { placed: placed, measurement: placed.measurementId
                         ? (state.measurementsById.get(placed.measurementId) ?? null)
-                        : (resolveStampMeasurement?.(placed) ?? null), selected: selection?.ids.includes(placed.id) ?? false, dragging: draggingId === placed.id, sliding: slidingId === placed.id, endpointDragging: epDragId === placed.id, rectResizing: rectDragId === placed.id, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, rectCtx: rectCtx, renderMeasurementStamp: renderMeasurementStamp, tileScaleFactor: state.effectiveCanvas.tileScaleFactor, tileViewportScale: state.tileViewportScale, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, onRemove: () => {
-                        const defaultRemove = () => {
-                            const { ops, keepSelection } = buildRemoveMeasurementOps(placed);
-                            state.ctx.commit({ ops });
-                            if (!keepSelection)
-                                state.ctx.setSelection(null);
-                        };
-                        if (onMeasurementStampRemove) {
+                        : (resolveStampMeasurement?.(placed) ?? null), selected: selection?.ids.includes(placed.id) ?? false, dragging: draggingId === placed.id, sliding: slidingId === placed.id, endpointDragging: epDragId === placed.id, rectResizing: rectDragId === placed.id, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, rectCtx: rectCtx, renderMeasurementStamp: renderMeasurementStamp, tileScaleFactor: state.tileScaleFactor, tileViewportScale: state.tileViewportScale, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, onRemove: onMeasurementStampRemove
+                        ? () => {
+                            const defaultRemove = () => {
+                                const { ops, keepSelection } = buildRemoveMeasurementOps(placed);
+                                state.ctx.commit({ ops });
+                                if (!keepSelection)
+                                    state.ctx.setSelection(null);
+                            };
                             onMeasurementStampRemove(placed, defaultRemove);
-                            return;
                         }
-                        defaultRemove();
-                    } }, placed.id))) })), magnifying && (_jsx(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: AnnotationCanvasSkia({
+                        : undefined }, placed.id))) })), magnifying && (_jsx(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: AnnotationCanvasSkia({
                     ...skiaProps,
                     worldTransform: loupeTransform,
                     wrapContent: loupeWrap,
@@ -1517,7 +1521,7 @@ const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging,
                     selected,
                     size,
                     zoom: zoomSnapshot,
-                }) }), onStampPress && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Open measurement", onPress: () => onStampPress(placed), onLongPress: onStampLongPress ? () => onStampLongPress(placed) : undefined, style: StyleSheet.absoluteFill })), selected && measurement && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Remove measurement", onPress: onRemove, style: {
+                }) }), onStampPress && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Open measurement", onPress: () => onStampPress(placed), onLongPress: onStampLongPress ? () => onStampLongPress(placed) : undefined, style: StyleSheet.absoluteFill })), selected && measurement && onRemove && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Remove measurement", onPress: onRemove, style: {
                     position: 'absolute',
                     top: 0,
                     right: 0,

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

@@ -23,6 +23,7 @@ export interface ToolContext {
     selection: Selection | null;
     viewport: ViewportApi;
     tileViewportScale: number;
+    tileScaleFactor: number;
     preview(patch: AnnotationDocumentPatch): void;
     commit(patch: AnnotationDocumentPatch): void;
     setSelection(selection: Selection | null): void;
@@ -53,12 +54,12 @@ export interface ShapeDrawConfig {
 }
 export type DragElementKind = 'stroke' | 'shape' | 'measurement';
 export interface DragSelectionConfig {
-    hitTest(doc: AnnotationCanvasState, world: Vec2, zoom: number, viewportTileScale?: number): {
+    hitTest(doc: AnnotationCanvasState, world: Vec2, zoom: number, viewportTileScale?: number, tileScaleFactor?: number): {
         id: AnnotationElementId;
         kind: DragElementKind;
     } | null;
     buildTranslatePatch(doc: AnnotationCanvasState, id: AnnotationElementId, kind: DragElementKind, delta: Vec2): AnnotationDocumentPatch | null;
-    classifyMeasurementGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number): 'slide' | 'move';
+    classifyMeasurementGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number, tileScaleFactor?: number): 'slide' | 'move';
     buildSlidePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2, zoom: number): AnnotationDocumentPatch | null;
     hitTestHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): 'a' | 'b' | null;
     buildEndpointPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, handle: 'a' | 'b', delta: Vec2): AnnotationDocumentPatch | null;
@@ -76,7 +77,7 @@ export interface DragSelectionConfig {
         fixed: Vec2;
     } | null;
     buildShapeCornerPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, corner: RectCorner, delta: Vec2): AnnotationDocumentPatch | null;
-    isSelectedTileGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number): boolean;
+    isSelectedTileGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number, tileScaleFactor?: number): boolean;
     hitTestResizeHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): ResizeGeometry | null;
     buildResizePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2): AnnotationDocumentPatch | null;
 }

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

@@ -1,8 +1,9 @@
-import type { PlacedMeasurementRef } from '../../types/annotation.js';
+import type { AnnotationCanvasState, PlacedMeasurementRef, TileScalePlatform } from '../../types/annotation.js';
 export declare const STAMP_TILE_SIZE = 96;
 export declare const DEFAULT_TILE_SCALE = 1;
 export declare const TILE_SCALE_MIN = 0.4;
 export declare const TILE_SCALE_MAX = 2;
+export declare const resolveTileScaleFactor: (canvas: Pick<AnnotationCanvasState, "tileScaleFactor" | "tileScaleFactorMobile">, platform: TileScalePlatform) => number;
 export declare const clampTileScale: (v: number) => number;
 export declare const isUnassociatedStamp: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "columnId">) => boolean;
 export declare const stampTileSize: (m: Pick<PlacedMeasurementRef, "scale">, tileScaleFactor?: number, viewportScale?: number) => number;

package/dist/annotation/canvas/stampLayout.js

@@ -12,16 +12,28 @@
 // user who set the tile-scale slider against blank tiles saw their tiles
 // balloon once populated (Asana 1216233394800417).
 export const STAMP_TILE_SIZE = 96;
-// Document-wide tile scale factor (AnnotationCanvasState.tileScaleFactor): 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, or bump them up on a sparse one. Like `scale` it
-// is purely a screen-space multiplier — it does NOT change with zoom. Absent ===
-// DEFAULT_TILE_SCALE (visually identical to documents written before the knob
-// existed).
+// 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,
+// or bump them up on a sparse one. Like `scale` it is purely a screen-space
+// multiplier — it does NOT change with zoom. Absent === DEFAULT_TILE_SCALE
+// (visually identical to documents written before the knob existed).
+// Web and mobile persist separate knobs (AnnotationCanvasState.tileScaleFactor
+// vs .tileScaleFactorMobile) — read them through resolveTileScaleFactor below.
 export const DEFAULT_TILE_SCALE = 1;
 export const TILE_SCALE_MIN = 0.4;
 export const TILE_SCALE_MAX = 2;
+// Resolve the document-wide tile-scale knob for a platform. Web and mobile
+// persist separate values because a scale calibrated against a desktop window
+// is wrong on a phone screen (and vice versa): web reads `tileScaleFactor`
+// (also the legacy shared field from before the split); mobile reads its own
+// `tileScaleFactorMobile` and falls back to the shared field, so a pre-split
+// document keeps its current mobile look until a mobile user first moves the
+// slider. The ONE read path for these fields — renderers, hit-testing, and
+// the slider UIs must all resolve through here so they agree.
+export const resolveTileScaleFactor = (canvas, platform) => (platform === 'mobile'
+    ? (canvas.tileScaleFactorMobile ?? canvas.tileScaleFactor)
+    : canvas.tileScaleFactor) ?? DEFAULT_TILE_SCALE;
 // Clamp a tile-scale-factor candidate to the supported range. The single guard
 // for the value before it lands in the document (slider input, restored docs).
 export const clampTileScale = (v) => v < TILE_SCALE_MIN ? TILE_SCALE_MIN : v > TILE_SCALE_MAX ? TILE_SCALE_MAX : v;
@@ -54,8 +66,8 @@ export const isUnassociatedStamp = (m) => !m.measurementId && !m.measurementPath
 // value. The ONE source of truth for tile footprint — render overlay,
 // hit-test, and slide-grab classification all call this so the drawn tile and
 // its touch box always agree. `tileScaleFactor` is the document-wide knob
-// (default 1, from `AnnotationCanvasState.tileScaleFactor`, driven by the
-// "Tile size" slider). `viewportScale` is retained for call compatibility and
-// is always 1 — the old per-canvas multiplier was retired (see the note
-// above). Independent of zoom.
+// (default 1), driven by the "Tile size" slider and already resolved for the
+// caller's platform via resolveTileScaleFactor above. `viewportScale` is
+// retained for call compatibility and is always 1 — the old per-canvas
+// multiplier was retired (see the note above). Independent of zoom.
 export const stampTileSize = (m, tileScaleFactor = DEFAULT_TILE_SCALE, viewportScale = 1) => STAMP_TILE_SIZE * (m.scale ?? 1) * tileScaleFactor * viewportScale;

package/dist/annotation/canvas/tools/measurementLineTool.d.ts

@@ -0,0 +1,12 @@
+import type { PlacedMeasurementRef } from '../../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export interface MeasurementLineToolOptions {
+    id?: string;
+    label?: string;
+    minDragPx?: number;
+    autoSwitchToSelect?: boolean;
+    selectToolId?: string;
+    onAutoSwitch?: (toToolId: string) => void;
+    onPlaced?: (measurement: PlacedMeasurementRef) => void;
+}
+export declare const createMeasurementLineTool: (options?: MeasurementLineToolOptions) => Tool;

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

@@ -0,0 +1,95 @@
+import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
+import { DEFAULT_LINE_POS, recomputeAnchor } from '../measurementGeometry.js';
+let counter = 0;
+const makeId = () => `annotation-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
+// Build the blank line-measurement annotation for a drag from `a` to `b`: a
+// 2-point line with a value tile magnetized to its center (linePos 0.5). The
+// payload mirrors useAnnotationCanvasState's placeAnnotationAtCenter so a drawn
+// line and a (legacy) center-placed one are byte-identical once committed.
+const buildLineMeasurement = (opts) => {
+    const line = { a: opts.a, b: opts.b };
+    return {
+        id: opts.id,
+        layerId: opts.layerId,
+        placement: 'line',
+        line,
+        linePos: DEFAULT_LINE_POS,
+        // Center of the line; recomputeAnchor keeps this in sync on edits.
+        anchor: recomputeAnchor(line, 'line', DEFAULT_LINE_POS, {
+            x: (opts.a.x + opts.b.x) / 2,
+            y: (opts.a.y + opts.b.y) / 2,
+        }),
+        showLabel: true,
+        showValue: true,
+        createdAt: Date.now(),
+    };
+};
+// Drag-to-draw measurement-line tool. Press-drag rubber-bands a measurement
+// annotation (a line with a blank value tile at its center); release commits
+// it. Mirrors createShapeTool's interaction so "input lines" are placed the
+// same way as shapes — draw to add, not tap-the-icon-to-add — replacing the
+// old center-place affordance. The annotation stays blank (no measurement
+// associated) until the user fills it via the tile / picker. Skia-free, like
+// every tool factory; it renders its live preview through ctx.preview, so it
+// works on web and (via the generic tool-pan dispatch) on native.
+export const createMeasurementLineTool = (options = {}) => {
+    const minDragPx = options.minDragPx ?? 4;
+    const autoSwitchToSelect = options.autoSwitchToSelect ?? true;
+    const selectToolId = options.selectToolId ?? 'select';
+    return {
+        id: options.id ?? 'measure-line',
+        label: options.label ?? 'Measurement line',
+        cursor: 'crosshair',
+        onPointerDown(event) {
+            return {
+                kind: 'measurement-line-drawing',
+                id: makeId(),
+                startWorld: event.world,
+                startScreen: event.screen,
+                moved: false,
+            };
+        },
+        onPointerMove(event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'measurement-line-drawing')
+                return s;
+            const measurement = buildLineMeasurement({
+                id: s.id,
+                layerId: firstLayerId(ctx.document),
+                a: s.startWorld,
+                b: event.world,
+            });
+            ctx.preview({ ops: [{ op: 'addMeasurement', measurement }] });
+            return { ...s, moved: true };
+        },
+        onPointerUp(event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'measurement-line-drawing')
+                return;
+            const dx = event.screen.x - s.startScreen.x;
+            const dy = event.screen.y - s.startScreen.y;
+            if (!s.moved || dx * dx + dy * dy < minDragPx * minDragPx) {
+                // Accidental tap — discard the rubber-band, commit nothing.
+                ctx.preview({ ops: [] });
+                return;
+            }
+            const measurement = buildLineMeasurement({
+                id: s.id,
+                layerId: firstLayerId(ctx.document),
+                a: s.startWorld,
+                b: event.world,
+            });
+            ctx.commit({ ops: [{ op: 'addMeasurement', measurement }] });
+            // Leave it selected (and hand back to select) so the blank line can be
+            // filled / moved straight away — the same flow as the text tool.
+            ctx.setSelection({ ids: [measurement.id] });
+            options.onPlaced?.(measurement);
+            if (autoSwitchToSelect)
+                options.onAutoSwitch?.(selectToolId);
+        },
+        onCancel(_state, ctx) {
+            ctx.preview({ ops: [] });
+        },
+    };
+};

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

@@ -51,7 +51,7 @@ export const createPanTool = (options = {}) => ({
         const measurements = ctx.document.placedMeasurements;
         for (let i = measurements.length - 1; i >= 0; i--) {
             const m = measurements[i];
-            if (hitPlacedMeasurement(m, event.world, zoom, ctx.document.tileScaleFactor, ctx.tileViewportScale)) {
+            if (hitPlacedMeasurement(m, event.world, zoom, ctx.tileScaleFactor, ctx.tileViewportScale)) {
                 ctx.setSelection({ ids: [m.id] });
                 return;
             }

package/dist/annotation/canvas/tools/selectTool.d.ts

@@ -1,2 +1,5 @@
 import type { Tool } from '../Tool.js';
-export declare const createSelectTool: () => Tool;
+export interface SelectToolOptions {
+    panOnEmptyDrag?: boolean;
+}
+export declare const createSelectTool: (options?: SelectToolOptions) => Tool;

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

@@ -56,11 +56,14 @@ const segmentDistanceSq = (px, py, ax, ay, bx, by) => {
     const dy = py - cy;
     return dx * dx + dy * dy;
 };
-const findHit = (doc, world, zoom, viewportTileScale = 1) => {
+const findHit = (doc, world, zoom, viewportTileScale = 1, 
+// Platform-resolved tile-scale knob (ctx.tileScaleFactor). Defaults to the
+// doc's web/legacy field so un-threaded callers keep the pre-split behavior.
+tileScaleFactor = doc.tileScaleFactor) => {
     // Hit-test in z-order (top first): measurements > shapes > strokes.
     for (let i = doc.placedMeasurements.length - 1; i >= 0; i--) {
         const m = doc.placedMeasurements[i];
-        if (hitPlacedMeasurement(m, world, zoom, doc.tileScaleFactor, viewportTileScale)) {
+        if (hitPlacedMeasurement(m, world, zoom, tileScaleFactor, viewportTileScale)) {
             return { id: m.id, kind: 'measurement' };
         }
     }
@@ -150,12 +153,11 @@ const translatePatch = (elementKind, id, doc, delta) => {
 // is selected; without this, a handle sitting under the tile (a rectangle
 // tile at the rect center, a line tile slid onto an endpoint) hijacks the grab
 // and the tile becomes unmovable until deselected.
-const isOnMeasurementTile = (doc, id, world, zoom, viewportTileScale = 1) => {
+const isOnMeasurementTile = (doc, id, world, zoom, viewportTileScale = 1, tileScaleFactor = doc.tileScaleFactor) => {
     const m = doc.placedMeasurements.find((x) => x.id === id);
     if (!m)
         return false;
-    const half = (stampTileSize(m, doc.tileScaleFactor, viewportTileScale) / 2 +
-        HIT_PADDING) /
+    const half = (stampTileSize(m, tileScaleFactor, viewportTileScale) / 2 + HIT_PADDING) /
         zoom;
     return (Math.abs(world.x - m.anchor.x) <= half &&
         Math.abs(world.y - m.anchor.y) <= half);
@@ -164,15 +166,14 @@ const isOnMeasurementTile = (doc, id, world, zoom, viewportTileScale = 1) => {
 // via DragSelectionConfig AND the web pointer handlers — one source of truth) ---
 // Grabbing the tile of a line annotation slides it along the line; everything
 // else (bare stamps, grabs on the line body) is a group move.
-const classifyGrab = (doc, id, world, zoom, viewportTileScale = 1) => {
+const classifyGrab = (doc, id, world, zoom, viewportTileScale = 1, tileScaleFactor = doc.tileScaleFactor) => {
     const m = doc.placedMeasurements.find((x) => x.id === id);
     if (!m)
         return 'move';
     // Same footprint the tile is drawn at (smaller for unassociated inputs, #6;
     // folds in the document-wide tile scale + viewport scale so slide-grab
     // matches the draw).
-    const half = (stampTileSize(m, doc.tileScaleFactor, viewportTileScale) / 2 +
-        HIT_PADDING) /
+    const half = (stampTileSize(m, tileScaleFactor, viewportTileScale) / 2 + HIT_PADDING) /
         zoom;
     const onTile = Math.abs(world.x - m.anchor.x) <= half &&
         Math.abs(world.y - m.anchor.y) <= half;
@@ -472,7 +473,7 @@ const dragPatch = (s, doc, delta, zoom) => {
     const op = translatePatch(s.elementKind, s.id, doc, delta);
     return op ? { ops: [op] } : null;
 };
-export const createSelectTool = () => ({
+export const createSelectTool = (options = {}) => ({
     id: 'select',
     label: 'Select',
     cursor: 'default',
@@ -480,7 +481,7 @@ export const createSelectTool = () => ({
     // reusing the same hit-test and translate logic the pointer handlers below
     // use for web — one source of truth.
     dragSelection: {
-        hitTest: (doc, world, zoom, viewportTileScale) => findHit(doc, world, zoom, viewportTileScale),
+        hitTest: (doc, world, zoom, viewportTileScale, tileScaleFactor) => findHit(doc, world, zoom, viewportTileScale, tileScaleFactor),
         buildTranslatePatch: (doc, id, kind, delta) => {
             const op = translatePatch(kind, id, doc, delta);
             return op ? { ops: [op] } : null;
@@ -515,7 +516,7 @@ export const createSelectTool = () => ({
         // tile stays draggable (otherwise it can only be moved after deselecting).
         const selId = ctx.selection?.ids[0];
         if (selId &&
-            !isOnMeasurementTile(ctx.document, selId, world, zoom, ctx.tileViewportScale)) {
+            !isOnMeasurementTile(ctx.document, selId, world, zoom, ctx.tileViewportScale, ctx.tileScaleFactor)) {
             const handle = findHandleHit(ctx.document, selId, world, zoom);
             if (handle) {
                 ctx.setSelection({ ids: [selId] });
@@ -579,9 +580,14 @@ export const createSelectTool = () => ({
                 };
             }
         }
-        const hit = findHit(ctx.document, world, zoom, ctx.tileViewportScale);
+        const hit = findHit(ctx.document, world, zoom, ctx.tileViewportScale, ctx.tileScaleFactor);
         if (!hit) {
             ctx.setSelection(null);
+            // Nothing under the pointer: with panOnEmptyDrag the gesture pans the
+            // viewport instead of dead-ending, so bare drags navigate the canvas.
+            if (options.panOnEmptyDrag) {
+                return { kind: 'panning', lastScreen: event.screen };
+            }
             return { kind: 'idle' };
         }
         // Re-tapping an already-selected text shape (without dragging) opens its
@@ -595,8 +601,7 @@ export const createSelectTool = () => ({
                 : null;
         ctx.setSelection({ ids: [hit.id] });
         const mode = hit.kind === 'measurement' &&
-            classifyGrab(ctx.document, hit.id, world, zoom, ctx.tileViewportScale) ===
-                'slide'
+            classifyGrab(ctx.document, hit.id, world, zoom, ctx.tileViewportScale, ctx.tileScaleFactor) === 'slide'
             ? 'slide'
             : 'move';
         return {
@@ -610,6 +615,13 @@ export const createSelectTool = () => ({
     },
     onPointerMove(event, ctx, state) {
         const s = state;
+        if (s?.kind === 'panning') {
+            ctx.applyPan({
+                x: event.screen.x - s.lastScreen.x,
+                y: event.screen.y - s.lastScreen.y,
+            });
+            return { ...s, lastScreen: event.screen };
+        }
         if (s?.kind !== 'dragging')
             return s;
         const delta = {

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

@@ -1,5 +1,5 @@
 import type { Measurement } from '../../types/firestore.js';
-import { type AnnotationCanvasState, type AnnotationDocumentPatch, type AnnotationElementId, type AnnotationStroke, type MeasurementPlacement, type Selection, type Vec2 } from '../../types/annotation.js';
+import { type AnnotationCanvasState, type AnnotationDocumentPatch, type AnnotationElementId, type AnnotationStroke, type MeasurementPlacement, type Selection, type TileScalePlatform, type Vec2 } from '../../types/annotation.js';
 import type { MeasurementRef } from './measurementPicker.js';
 import type { CanvasPointerEvent, RequestTextInput, Tool, ToolContext, ToolState } from './Tool.js';
 import { type ViewportState } from './viewport.js';
@@ -15,6 +15,8 @@ export interface AnnotationCanvasHandle {
         defaultLengthDoc?: number;
     }): void;
     setAnnotationType(id: AnnotationElementId, type: MeasurementPlacement): void;
+    centerOnLine(id: AnnotationElementId): void;
+    removeMeasurementValue(id: AnnotationElementId): void;
     associateMeasurement(id: AnnotationElementId, ref: MeasurementRef): void;
     bindColumn(id: AnnotationElementId, binding: {
         groupId: string;
@@ -39,6 +41,7 @@ export interface UseAnnotationCanvasStateProps {
     width: number;
     height: number;
     initialViewport?: ViewportState;
+    tileScalePlatform?: TileScalePlatform;
     imperativeRef?: {
         current: AnnotationCanvasHandle | null;
     };
@@ -58,6 +61,7 @@ export interface AnnotationCanvasStateApi {
     toolState: ToolState;
     ctx: ToolContext;
     tileViewportScale: number;
+    tileScaleFactor: number;
     penDrawingStroke: AnnotationStroke | null;
     customPreviewState: ToolState;
     dispatchPointerDown(event: CanvasPointerEvent): void;

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { applyPatch, invertPatch, DEFAULT_LAYER_ID, } from '../../types/annotation.js';
+import { resolveTileScaleFactor } from './stampLayout.js';
 import { createViewportApi, fitRectToScreen, imageDocRect, panBy, zoomAt, DEFAULT_VIEWPORT, } from './viewport.js';
-import { recomputeAnchor, rectCenter, DEFAULT_LINE_POS, } from './measurementGeometry.js';
+import { buildRemoveMeasurementOps, recomputeAnchor, rectCenter, DEFAULT_LINE_POS, } from './measurementGeometry.js';
 // The viewport that frames the document's content on screen. When a background
 // image is present we fit its rendered rect (so the whole image shows, filling
 // the viewport regardless of its pixel resolution — never the native-resolution
@@ -22,7 +23,7 @@ const computeContentFit = (canvas, width, height) => {
 // inners share this hook; each wraps it with platform-specific event
 // capture and JSX (div + DOM events vs. GestureDetector + RN Views).
 export const useAnnotationCanvasState = (props) => {
-    const { canvas, onCommit, tools, activeToolId, selection, onSelectionChange, measurements, pickMeasurement, requestTextInput, width, height, initialViewport, imperativeRef, } = props;
+    const { canvas, onCommit, tools, activeToolId, selection, onSelectionChange, measurements, pickMeasurement, requestTextInput, width, height, initialViewport, tileScalePlatform, imperativeRef, } = props;
     const [viewport, setViewport] = useState(initialViewport ?? DEFAULT_VIEWPORT);
     const [toolState, setToolState] = useState(undefined);
     const [previewPatch, setPreviewPatch] = useState(null);
@@ -63,11 +64,17 @@ export const useAnnotationCanvasState = (props) => {
     // (hit box) thread it; keeping them in lockstep at 1 means both still agree.
     // (See stampLayout.ts for why the old per-canvas multiplier was retired.)
     const tileViewportScale = 1;
+    // The platform's tile-scale knob, resolved once from the effective canvas so
+    // tools (hit boxes) and overlays (drawn size) share one value. Uses the
+    // effective (preview-applied) canvas for parity with what is on screen; the
+    // slider only ever commits, so this matches ctx.document in practice.
+    const tileScaleFactor = resolveTileScaleFactor(effectiveCanvas, tileScalePlatform ?? 'web');
     const ctx = useMemo(() => ({
         document: canvas,
         selection,
         viewport: viewportApi,
         tileViewportScale,
+        tileScaleFactor,
         preview(patch) {
             setPreviewPatch(patch);
         },
@@ -100,6 +107,7 @@ export const useAnnotationCanvasState = (props) => {
         selection,
         viewportApi,
         tileViewportScale,
+        tileScaleFactor,
         onCommit,
         onSelectionChange,
         pickMeasurement,
@@ -331,6 +339,46 @@ export const useAnnotationCanvasState = (props) => {
                     ops: [{ op: 'updateMeasurement', id, patch: { placement: 'none' } }],
                 });
             },
+            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),
+                            },
+                        },
+                    ],
+                });
+            },
+            removeMeasurementValue(id) {
+                const c = ctxRef.current;
+                const m = c.document.placedMeasurements.find((x) => x.id === id);
+                if (!m)
+                    return;
+                const { ops, keepSelection } = buildRemoveMeasurementOps(m);
+                c.commit({ ops });
+                if (!keepSelection)
+                    c.setSelection(null);
+            },
             associateMeasurement(id, ref) {
                 const c = ctxRef.current;
                 c.commit({
@@ -342,6 +390,11 @@ export const useAnnotationCanvasState = (props) => {
                                 measurementId: ref.measurementId,
                                 measurementPath: ref.measurementPath,
                                 groupId: ref.groupId,
+                                // A direct association replaces any FORM-column binding — the
+                                // tile now resolves through the measurement, not
+                                // group.columns[columnId]. Cleared keys serialize away at the
+                                // persistence boundary; undo restores the prior binding.
+                                columnId: undefined,
                                 labelOverride: ref.label,
                                 unitOverride: ref.unit,
                             },
@@ -443,6 +496,7 @@ export const useAnnotationCanvasState = (props) => {
         toolState,
         ctx,
         tileViewportScale,
+        tileScaleFactor,
         penDrawingStroke,
         customPreviewState: toolState,
         dispatchPointerDown,

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

@@ -6,6 +6,7 @@ export interface UseAnnotationCanvasDocOptions {
     fileId: string | null;
     fallbackViewport?: Partial<AnnotationViewport>;
     debounceMs?: number;
+    autoSave?: boolean;
     createSeed?: {
         name?: string;
         fileType?: 'sketch' | 'document';