@reekon-tools/boldr-utils 1.6.19 → 1.6.23

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

@@ -24,6 +24,9 @@ export interface AnnotationCanvasInnerProps {
     renderMeasurementStamp?: RenderMeasurementStamp;
     onMeasurementStampPress?: (placed: PlacedMeasurementRef) => void;
     onMeasurementStampLongPress?: (placed: PlacedMeasurementRef) => void;
+    onMeasurementStampDoubleTap?: (placed: PlacedMeasurementRef) => void;
+    resolveStampMeasurement?: (placed: PlacedMeasurementRef) => Measurement | null;
+    onMeasurementStampRemove?: (placed: PlacedMeasurementRef, defaultRemove: () => void) => void;
     stampFontSource?: unknown;
     stampValueFontSize?: number;
     stampLabelFontSize?: number;

package/dist/annotation/canvas/AnnotationCanvasInner.js

@@ -3,7 +3,7 @@ import { Skia, useFont, useTypeface } from '@shopify/react-native-skia';
 import { useCallback, useEffect, useMemo, useRef, } from 'react';
 import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
 import { TEXT_FONT_FAMILY } from './elements/ShapeElement.js';
-import { buildRemoveMeasurementOps } from './measurementGeometry.js';
+import { buildRemoveMeasurementOps, hitPlacedMeasurement, } from './measurementGeometry.js';
 import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
 import { stampTileSize } from './stampLayout.js';
 // Screen-px radius of a measurement-annotation endpoint handle (matches the
@@ -12,6 +12,13 @@ const HANDLE_PX = 7;
 // Screen-px stroke width of the handle's colored ring (matches native
 // HANDLE_RING_PX); the white-disc + ring keeps the knob legible on any line.
 const HANDLE_RING_PX = 2;
+// Press-and-hold timing/tolerance. The DOM has no native long-press, so it's
+// derived from a hold timer: pressing without moving past the slop for this
+// long fires the tool's onLongPress; movement or an early release cancels it.
+// 500ms / RN's default delayLongPress so web matches native + the stamp
+// overlay's press target below.
+const LONG_PRESS_MS = 500;
+const LONG_PRESS_SLOP_PX = 10;
 const DEFAULT_PAN_TRIGGERS = ['middleMouse', 'space'];
 export const AnnotationCanvasInner = (props) => {
     const { resolveImageUrl, stampFontSource, stampValueFontSize = 14, gestures, width, height, style, activeToolId, tools, } = props;
@@ -39,7 +46,19 @@ export const AnnotationCanvasInner = (props) => {
     const containerRef = useRef(null);
     const panGestureRef = useRef(null);
     const spaceDownRef = useRef(false);
+    // Armed hold timer + its origin, for the derived long-press (see handlers).
+    const longPressTimerRef = useRef(null);
+    const longPressRef = useRef(null);
     const activeTool = tools.find((t) => t.id === activeToolId) ?? null;
+    const clearLongPress = useCallback(() => {
+        if (longPressTimerRef.current != null) {
+            clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+        longPressRef.current = null;
+    }, []);
+    // Drop any armed hold timer if the canvas unmounts mid-press.
+    useEffect(() => clearLongPress, [clearLongPress]);
     const toCanvasPointer = useCallback((event) => {
         const rect = containerRef.current?.getBoundingClientRect();
         const screen = {
@@ -82,8 +101,31 @@ export const AnnotationCanvasInner = (props) => {
             return;
         }
         event.currentTarget.setPointerCapture(event.pointerId);
-        state.dispatchPointerDown(toCanvasPointer(event));
-    }, [state, toCanvasPointer, isPanTriggerDown]);
+        const canvasEvent = toCanvasPointer(event);
+        state.dispatchPointerDown(canvasEvent);
+        // Arm the hold timer only when the active tool acts on a long-press (the
+        // select tool, to re-open the text editor). The pointer keeps driving the
+        // tool underneath; if the hold fires before any movement past the slop,
+        // dispatchLongPress runs with the (unmoved) down point. Movement or
+        // pointer up/cancel clears it below.
+        if (activeTool?.onLongPress && event.button === 0) {
+            clearLongPress();
+            const { screen, pointerId } = canvasEvent;
+            longPressRef.current = { pointerId, start: screen };
+            longPressTimerRef.current = setTimeout(() => {
+                longPressTimerRef.current = null;
+                const lp = longPressRef.current;
+                if (!lp)
+                    return;
+                longPressRef.current = null;
+                state.dispatchLongPress({
+                    pointerId: lp.pointerId,
+                    screen: lp.start,
+                    world: state.ctx.viewport.screenToWorld(lp.start),
+                });
+            }, LONG_PRESS_MS);
+        }
+    }, [state, toCanvasPointer, isPanTriggerDown, activeTool, clearLongPress]);
     const handlePointerMove = useCallback((event) => {
         const pan = panGestureRef.current;
         if (pan && event.pointerId === pan.pointerId) {
@@ -102,20 +144,33 @@ export const AnnotationCanvasInner = (props) => {
             };
             return;
         }
+        // Moving past the slop turns the press into a drag — cancel the hold so a
+        // drag never also fires a long-press.
+        const lp = longPressRef.current;
+        if (lp && event.pointerId === lp.pointerId) {
+            const rect = containerRef.current?.getBoundingClientRect();
+            const dx = event.clientX - (rect?.left ?? 0) - lp.start.x;
+            const dy = event.clientY - (rect?.top ?? 0) - lp.start.y;
+            if (dx * dx + dy * dy > LONG_PRESS_SLOP_PX * LONG_PRESS_SLOP_PX) {
+                clearLongPress();
+            }
+        }
         state.dispatchPointerMove(toCanvasPointer(event));
-    }, [state, toCanvasPointer]);
+    }, [state, toCanvasPointer, clearLongPress]);
     const handlePointerUp = useCallback((event) => {
+        clearLongPress();
         const pan = panGestureRef.current;
         if (pan && event.pointerId === pan.pointerId) {
             panGestureRef.current = null;
             return;
         }
         state.dispatchPointerUp(toCanvasPointer(event));
-    }, [state, toCanvasPointer]);
+    }, [state, toCanvasPointer, clearLongPress]);
     const handlePointerCancel = useCallback(() => {
+        clearLongPress();
         panGestureRef.current = null;
         state.dispatchPointerCancel();
-    }, [state]);
+    }, [state, clearLongPress]);
     const handleWheel = useCallback((event) => {
         const rect = containerRef.current?.getBoundingClientRect();
         const focal = {
@@ -189,8 +244,28 @@ export const AnnotationCanvasInner = (props) => {
         ...style,
     };
     const customPreview = activeTool?.renderPreview?.(state.customPreviewState, state.ctx);
-    const { renderMeasurementStamp, onMeasurementStampPress, onMeasurementStampLongPress, selection, } = props;
-    return (_jsxs("div", { ref: containerRef, style: containerStyle, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, onWheel: handleWheel, onContextMenu: handleContextMenu, children: [AnnotationCanvasSkia({
+    const { renderMeasurementStamp, onMeasurementStampPress, onMeasurementStampLongPress, onMeasurementStampDoubleTap, resolveStampMeasurement, onMeasurementStampRemove, selection, } = props;
+    // Double-click a stamp → fire the consumer callback (e.g. open its value
+    // editor). Runs the SAME hit-test the select tool uses (top-of-z-order), on
+    // the gesture container, so the stamp overlay stays pointer-events:none and
+    // drag-to-move / single-tap select are unaffected. dblclick is a distinct
+    // browser event that doesn't suppress the preceding pointerdown/up select.
+    const handleDoubleClick = useCallback((event) => {
+        if (!onMeasurementStampDoubleTap)
+            return;
+        const rect = containerRef.current?.getBoundingClientRect();
+        const screen = {
+            x: event.clientX - (rect?.left ?? 0),
+            y: event.clientY - (rect?.top ?? 0),
+        };
+        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));
+        if (placed)
+            onMeasurementStampDoubleTap(placed);
+    }, [onMeasurementStampDoubleTap, state]);
+    return (_jsxs("div", { ref: containerRef, style: containerStyle, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, onDoubleClick: handleDoubleClick, onWheel: handleWheel, onContextMenu: handleContextMenu, children: [AnnotationCanvasSkia({
                 width,
                 height,
                 effectiveCanvas: state.effectiveCanvas,
@@ -224,7 +299,10 @@ export const AnnotationCanvasInner = (props) => {
                     const isSelected = selection?.ids.includes(placed.id) ?? false;
                     const measurement = placed.measurementId
                         ? (state.measurementsById.get(placed.measurementId) ?? null)
-                        : null;
+                        : (resolveStampMeasurement?.(placed) ?? null);
+                    // Corner-pinned, tile-proportional remove target (see the style
+                    // comment below) so it can't blanket a small tile and eat its grab.
+                    const removeSize = Math.min(40, size * 0.4);
                     return (_jsxs("div", { style: {
                             position: 'absolute',
                             left: 0,
@@ -242,16 +320,27 @@ export const AnnotationCanvasInner = (props) => {
                                     ? () => onMeasurementStampLongPress(placed)
                                     : undefined })), isSelected && measurement && (_jsx("div", { role: "button", "aria-label": "Remove measurement", onPointerDown: (e) => {
                                     e.stopPropagation();
-                                    const { ops, keepSelection } = buildRemoveMeasurementOps(placed);
-                                    state.ctx.commit({ ops });
-                                    if (!keepSelection)
-                                        state.ctx.setSelection(null);
+                                    const defaultRemove = () => {
+                                        const { ops, keepSelection } = buildRemoveMeasurementOps(placed);
+                                        state.ctx.commit({ ops });
+                                        if (!keepSelection)
+                                            state.ctx.setSelection(null);
+                                    };
+                                    if (onMeasurementStampRemove) {
+                                        onMeasurementStampRemove(placed, defaultRemove);
+                                        return;
+                                    }
+                                    defaultRemove();
                                 }, style: {
+                                    // Sized as a fraction of the tile and corner-pinned so it
+                                    // never covers the center. A fixed 40px target blanketed
+                                    // small tiles (the tile-scale slider shrinks them), eating
+                                    // the center grab so a selected tile couldn't be dragged.
                                     position: 'absolute',
-                                    top: -10,
-                                    right: -10,
-                                    width: 40,
-                                    height: 40,
+                                    top: 0,
+                                    right: 0,
+                                    width: removeSize,
+                                    height: removeSize,
                                     cursor: 'pointer',
                                     pointerEvents: 'auto',
                                 } }))] }, placed.id));
@@ -261,8 +350,7 @@ export const AnnotationCanvasInner = (props) => {
 // long-press, so it's derived: pointerdown arms a timer; if it fires before
 // the pointer lifts (or leaves/cancels), the long-press callback runs and the
 // trailing click is swallowed. Mirrors the native overlay's TouchableOpacity
-// onPress/onLongPress semantics (500ms, RN's default delayLongPress).
-const LONG_PRESS_MS = 500;
+// onPress/onLongPress semantics (LONG_PRESS_MS, RN's default delayLongPress).
 const StampPressTarget = ({ onPress, onLongPress, }) => {
     const timerRef = useRef(null);
     const longPressFiredRef = useRef(false);

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

@@ -25,6 +25,9 @@ export interface AnnotationCanvasInnerProps {
     renderMeasurementStamp?: RenderMeasurementStamp;
     onMeasurementStampPress?: (placed: PlacedMeasurementRef) => void;
     onMeasurementStampLongPress?: (placed: PlacedMeasurementRef) => void;
+    onMeasurementStampDoubleTap?: (placed: PlacedMeasurementRef) => void;
+    resolveStampMeasurement?: (placed: PlacedMeasurementRef) => Measurement | null;
+    onMeasurementStampRemove?: (placed: PlacedMeasurementRef, defaultRemove: () => void) => void;
     stampFontSource?: unknown;
     stampValueFontSize?: number;
     stampLabelFontSize?: number;

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

@@ -12,6 +12,12 @@ import { buildShapeFromDrag } from './tools/shapeTool.js';
 import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
 let strokeCounter = 0;
 const makeStrokeId = () => `stroke-${Date.now().toString(36)}-${(strokeCounter++).toString(36)}`;
+// Press-and-hold timing/tolerance for the long-press gesture (matches the
+// measurement-stamp overlay's TouchableOpacity feel — 500ms / RN default).
+// Holding still this long without moving past the slop fires onLongPress;
+// moving first lets the drag win instead.
+const LONG_PRESS_MS = 500;
+const LONG_PRESS_SLOP_PX = 10;
 // Screen-px radius of a measurement-annotation endpoint handle dot. Divided by
 // the live zoom so the handle is a constant on-screen size.
 const HANDLE_RADIUS_PX = 7;
@@ -155,6 +161,7 @@ export const AnnotationCanvasInner = (props) => {
     const shapeDraw = state.activeTool?.shapeDraw ?? null;
     const panViewport = !!state.activeTool?.panViewport;
     const dragSelection = state.activeTool?.dragSelection ?? null;
+    const longPressEnabled = !!state.activeTool?.onLongPress;
     // In-flight shape rubber-band (line/arrow/rect/triangle/circle tools),
     // owned by the UI thread — the shape twin of `livePoints`. The drag worklet
     // tracks the start/current world points; derived paths below render the
@@ -479,6 +486,20 @@ export const AnnotationCanvasInner = (props) => {
                 inFlightRef.current = null;
             }
         });
+        // Press-and-hold (one finger, no movement) → dispatch a long-press to the
+        // active tool (the select tool re-opens the text editor for a placed text
+        // shape). Races against the one-finger drag: holding still activates this
+        // at LONG_PRESS_MS, moving first activates the drag/pan instead (this one's
+        // maxDistance cancels it). A quick tap is shorter than the hold, so the tap
+        // gesture still owns selection.
+        const longPress = Gesture.LongPress()
+            .minDuration(LONG_PRESS_MS)
+            .maxDistance(LONG_PRESS_SLOP_PX)
+            .runOnJS(true)
+            .onStart((e) => {
+            const id = pointerIdRef.current++;
+            stateRef.current.dispatchLongPress(buildEvent(id, { x: e.x, y: e.y }));
+        });
         const tap = Gesture.Tap()
             .maxDuration(250)
             .runOnJS(true)
@@ -752,9 +773,13 @@ export const AnnotationCanvasInner = (props) => {
                 const world = st.ctx.viewport.screenToWorld(screen);
                 const zoomNow = st.ctx.viewport.state.zoom;
                 // Endpoint handles show only on the selected annotation, so check the
-                // current selection's handles before the general hit-test.
+                // current selection's handles before the general hit-test — UNLESS the
+                // grab is on that element's tile, which must stay draggable (the tile
+                // is the move/slide affordance and wins over a handle sitting under it,
+                // so a selected tile isn't stuck until you deselect it).
                 const selId = st.ctx.selection?.ids[0];
-                if (selId) {
+                if (selId &&
+                    !cfg.isSelectedTileGrab?.(st.ctx.document, selId, world, zoomNow, st.ctx.tileViewportScale)) {
                     const handle = cfg.hitTestHandle?.(st.ctx.document, selId, world, zoomNow);
                     if (handle) {
                         const m = st.ctx.document.placedMeasurements.find((x) => x.id === selId);
@@ -996,7 +1021,9 @@ export const AnnotationCanvasInner = (props) => {
                     : dragSelection
                         ? buildSelectDragPan(dragSelection)
                         : toolPan;
-        return Gesture.Race(tap, Gesture.Simultaneous(viewportPan, pinch), oneFinger);
+        // Long-press only joins the race when the active tool acts on it, so it
+        // never pre-empts a one-finger drag/draw on tools that ignore holds.
+        return Gesture.Race(tap, ...(longPressEnabled ? [longPress] : []), Gesture.Simultaneous(viewportPan, pinch), oneFinger);
     }, [
         zoom,
         panX,
@@ -1011,6 +1038,7 @@ export const AnnotationCanvasInner = (props) => {
         shapeDraw,
         panViewport,
         dragSelection,
+        longPressEnabled,
         dragX,
         dragY,
         dragEnded,
@@ -1021,7 +1049,7 @@ export const AnnotationCanvasInner = (props) => {
     ]);
     const activeTool = props.tools.find((t) => t.id === props.activeToolId) ?? null;
     const customPreview = activeTool?.renderPreview?.(state.customPreviewState, state.ctx);
-    const { renderMeasurementStamp, onMeasurementStampPress, onMeasurementStampLongPress, selection, } = props;
+    const { renderMeasurementStamp, onMeasurementStampPress, onMeasurementStampLongPress, resolveStampMeasurement, onMeasurementStampRemove, selection, } = props;
     return (_jsxs(GestureHandlerRootView, { style: [{ width, height }, style], children: [_jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: { width, height }, collapsable: false, children: AnnotationCanvasSkia({
                         width,
                         height,
@@ -1089,16 +1117,29 @@ export const AnnotationCanvasInner = (props) => {
                         customPreview,
                     }) }) }), 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)
-                        : 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 { ops, keepSelection } = buildRemoveMeasurementOps(placed);
-                        state.ctx.commit({ ops });
-                        if (!keepSelection)
-                            state.ctx.setSelection(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) {
+                            onMeasurementStampRemove(placed, defaultRemove);
+                            return;
+                        }
+                        defaultRemove();
                     } }, placed.id))) }))] }));
 };
 const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, tileScaleFactor, tileViewportScale, onStampPress, onStampLongPress, onRemove, }) => {
     const size = stampTileSize(placed, tileScaleFactor, tileViewportScale);
     const half = size / 2;
+    // Remove-"X" touch target, sized as a fraction of the tile and corner-pinned
+    // so it never reaches the center. A FIXED 36px+hitSlop target blanketed small
+    // tiles (the tile-scale slider can shrink them to ~38px), swallowing the
+    // center grab and making a selected tile impossible to drag (it had to be
+    // deselected first). Capped so it doesn't grow past the old size on big tiles.
+    const removeSize = Math.min(36, size * 0.4);
     const anchorX = placed.anchor.x;
     const anchorY = placed.anchor.y;
     // doc → screen each frame, on the UI thread. Position is a translate
@@ -1166,11 +1207,11 @@ 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", hitSlop: 10, onPress: onRemove, style: {
+                }) }), 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: {
                     position: 'absolute',
-                    top: -8,
-                    right: -8,
-                    width: 36,
-                    height: 36,
+                    top: 0,
+                    right: 0,
+                    width: removeSize,
+                    height: removeSize,
                 } }))] }));
 };

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

@@ -68,6 +68,7 @@ export interface DragSelectionConfig {
         fixed: Vec2;
     } | null;
     buildRectCornerPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, corner: RectCorner, delta: Vec2): AnnotationDocumentPatch | null;
+    isSelectedTileGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number): boolean;
     hitTestResizeHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): ResizeGeometry | null;
     buildResizePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2): AnnotationDocumentPatch | null;
 }
@@ -83,6 +84,7 @@ export interface Tool {
     onPointerDown?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
     onPointerMove?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
     onPointerUp?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
+    onLongPress?(event: CanvasPointerEvent, ctx: ToolContext): void;
     onCancel?(state: ToolState, ctx: ToolContext): void;
     onDeactivate?(ctx: ToolContext): void;
     renderPreview?(state: ToolState, ctx: ToolContext): ReactNode;

package/dist/annotation/canvas/measurementGeometry.js

@@ -92,9 +92,10 @@ export const oppositeRectCorner = (corner) => {
 const STAMP_HIT_PADDING = 6;
 // Screen-space grab tolerance (px) for a measurement-annotation line or rect
 // border, converted to doc space via zoom (the body is a thin world-space
-// stroke). Matches the select tool's drag-grab tolerance so tap-select and
-// drag-grab agree on what counts as "on the measurement".
-const LINE_GRAB_PX = 12;
+// stroke). Deliberately wider than a fingertip so a thin line isn't fiddly to
+// grab on touch, and kept in sync with the select tool's SHAPE_GRAB_PX so
+// tap-select and drag-grab agree on what counts as "on the measurement".
+const LINE_GRAB_PX = 32;
 const segmentDistSq = (p, a, b) => {
     const abx = b.x - a.x;
     const aby = b.y - a.y;

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

@@ -1,11 +1,9 @@
 import type { PlacedMeasurementRef } from '../../types/annotation.js';
 export declare const STAMP_TILE_SIZE = 96;
-export declare const STAMP_INPUT_TILE_SIZE = 56;
+export declare const STAMP_INPUT_TILE_SIZE = 44;
 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 clampTileScale: (v: number) => number;
-export declare const renderedDocWidthAtFit: (canvasW: number, canvasH: number, docW: number, docH: number) => number;
-export declare const viewportTileScale: (canvasW: number, canvasH: number, docW: number, docH: number) => number;
-export declare const isUnassociatedStamp: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath">) => boolean;
-export declare const stampTileSize: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "scale">, tileScaleFactor?: number, viewportScale?: number) => number;
+export declare const isUnassociatedStamp: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "columnId">) => boolean;
+export declare const stampTileSize: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "columnId" | "scale">, tileScaleFactor?: number, viewportScale?: number) => number;

package/dist/annotation/canvas/stampLayout.js

@@ -11,10 +11,12 @@
 export const STAMP_TILE_SIZE = 96;
 // Edge length for an UNASSOCIATED stamp — a measurement annotation with no
 // measurement picked yet, which renders as a compact "+" input placeholder
-// rather than a full readable tile. Smaller than STAMP_TILE_SIZE so empty
-// inputs read as lightweight tap targets; associated tiles keep STAMP_TILE_SIZE
-// so existing saved annotations are visually unchanged. The single knob for #6.
-export const STAMP_INPUT_TILE_SIZE = 56;
+// rather than a full readable tile. Kept noticeably smaller than
+// STAMP_TILE_SIZE so empty inputs read as lightweight tap targets that don't
+// crowd the drawing; associated tiles keep STAMP_TILE_SIZE so existing saved
+// annotations are visually unchanged. Still comfortably tappable once the
+// viewport/tile-scale multipliers (min 1) are folded in. The single knob for #6.
+export const STAMP_INPUT_TILE_SIZE = 44;
 // 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
@@ -28,60 +30,40 @@ export const TILE_SCALE_MAX = 2;
 // 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;
-// --- Viewport-relative tile sizing ------------------------------------------
-// A bare-pixel tile is the same size on every device, but the SAME document is
-// fit into wildly different canvases (a phone window vs a desktop pane), so the
-// drawing renders much larger on desktop and a fixed-px tile reads as a tiny
-// fraction of it. To keep a tile a CONSISTENT fraction of the drawing across
-// platforms — while staying independent of the user's live zoom — the tile
-// footprint is multiplied by `viewportTileScale`, which tracks how large the
-// document renders when fit to the canvas (NOT the live zoom).
-// Rendered document width (screen px) at which a tile uses its unscaled base
-// size. Calibrated to a large phone's width so phone canvases land at scale 1
-// (mobile visually unchanged); larger canvases scale up proportionally.
-const TILE_VIEWPORT_REFERENCE_PX = 430;
-// Clamp so phone-sized canvases never shrink tiles below base (lower = 1) and
-// very large monitors don't produce runaway tiles (upper = 4).
-const TILE_VIEWPORT_SCALE_MIN = 1;
-const TILE_VIEWPORT_SCALE_MAX = 4;
-// Screen-px width the document occupies when fit to the canvas:
-//   docW * fitZoom, fitZoom = min(canvasW/docW, canvasH/docH)
-//            = min(canvasW, docW * canvasH / docH)
-// This — not the raw canvas size — governs the tile's fraction of the drawing,
-// so the same document at the same canvas aspect yields the same value on web
-// and native. Falls back to canvasW when doc dimensions are unknown.
-export const renderedDocWidthAtFit = (canvasW, canvasH, docW, docH) => {
-    if (!(docW > 0) || !(docH > 0) || !(canvasW > 0) || !(canvasH > 0)) {
-        return canvasW > 0 ? canvasW : TILE_VIEWPORT_REFERENCE_PX;
-    }
-    return Math.min(canvasW, (docW * canvasH) / docH);
-};
-// Multiplier folded into the tile footprint so tiles are a consistent fraction
-// of the rendered drawing on any canvas. Zoom-INDEPENDENT (a function of canvas
-// + doc dimensions only), so the tile still never changes size as the user
-// pinches/wheels. Defaults to 1 (callers without canvas dimensions are
-// unaffected — e.g. legacy tests).
-export const viewportTileScale = (canvasW, canvasH, docW, docH) => {
-    const s = renderedDocWidthAtFit(canvasW, canvasH, docW, docH) /
-        TILE_VIEWPORT_REFERENCE_PX;
-    return s < TILE_VIEWPORT_SCALE_MIN
-        ? TILE_VIEWPORT_SCALE_MIN
-        : s > TILE_VIEWPORT_SCALE_MAX
-            ? TILE_VIEWPORT_SCALE_MAX
-            : s;
-};
+// --- Tile sizing is independent of canvas size ------------------------------
+// A measurement tile's footprint is base × per-tile `scale` × the document-wide
+// `tileScaleFactor` (below) — and NOTHING tied to the canvas's pixel size, so
+// the same document shows the same tiles at any canvas/window size.
+//
+// Earlier builds multiplied the footprint by a per-canvas `viewportTileScale`
+// derived from how large the document rendered when fit to the canvas, to keep a
+// tile a constant fraction of the drawing across devices. But that made a tile's
+// size change whenever the canvas was resized (e.g. dragging a desktop pane) —
+// the same document read with different-sized tiles at different window sizes.
+// That auto-multiplier is retired in favor of the user-driven "Tile size"
+// slider (the document-wide `tileScaleFactor`), which is explicit, persisted,
+// and consistent everywhere. Mobile is unchanged — its old factor was already
+// pinned at 1, calibrated to a phone's width.
+//
+// `stampTileSize` keeps its `viewportScale` parameter (default 1) only so the
+// render overlay, hit-test, and tools that thread it stay call-compatible; it is
+// now always 1.
 // A placed measurement is an unassociated input until a measurement reference
-// is attached (id or path). Such stamps use STAMP_INPUT_TILE_SIZE.
-export const isUnassociatedStamp = (m) => !m.measurementId && !m.measurementPath;
+// is attached (id or path) OR it is bound to a form column (`columnId`). Such
+// stamps use STAMP_INPUT_TILE_SIZE. A column-bound tile is a full editable
+// input *card* (it shows the column's label + value editor), so it takes the
+// full STAMP_TILE_SIZE like an associated tile — only the truly blank "+"
+// placeholder uses the compact input size.
+export const isUnassociatedStamp = (m) => !m.measurementId && !m.measurementPath && !m.columnId;
 // Screen-space edge length for a placed stamp: the compact input size while
 // unassociated, full size once a measurement is attached, then scaled by the
-// per-stamp `scale`, the document-wide `tileScaleFactor`, and the
-// `viewportTileScale` (so tiles read at a consistent fraction of the drawing on
-// any canvas). 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 canvas-level knob
-// (default 1, from `AnnotationCanvasState.tileScaleFactor`); `viewportScale`
-// (default 1) is the per-canvas multiplier from `viewportTileScale`.
+// per-stamp `scale` and the document-wide `tileScaleFactor`. 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.
 export const stampTileSize = (m, tileScaleFactor = DEFAULT_TILE_SCALE, viewportScale = 1) => (isUnassociatedStamp(m) ? STAMP_INPUT_TILE_SIZE : STAMP_TILE_SIZE) *
     (m.scale ?? 1) *
     tileScaleFactor *

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

@@ -53,10 +53,16 @@ export const createMeasurementTool = (options = {}) => {
     const selectToolId = options.selectToolId ?? 'select';
     const place = (ctx, measurement) => {
         ctx.commit({ ops: [{ op: 'addMeasurement', measurement }] });
-        ctx.setSelection({ ids: [measurement.id] });
         options.onPlaced?.(measurement);
-        if (autoSwitchToSelect)
+        // Selecting the new annotation and handing back to select only makes sense
+        // when we actually switch tools. With autoSwitchToSelect off the tool stays
+        // active and behaves like the shape tools — commit and keep drawing, with
+        // nothing selected — so placing an empty input doesn't kick you out of
+        // drawing mode (and the keypad/pill doesn't pop for the blank tile).
+        if (autoSwitchToSelect) {
+            ctx.setSelection({ ids: [measurement.id] });
             options.onAutoSwitch?.(selectToolId);
+        }
     };
     // Bare stamp: tap-to-place, no rubber-band.
     if (placement === 'none') {

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

@@ -2,7 +2,20 @@ import { stampTileSize } from '../stampLayout.js';
 import { placementOf, linePosOf, snapLinePos, lerp, recomputeAnchor, rectCenter, rectCornerPoint, oppositeRectCorner, hitPlacedMeasurement, } from '../measurementGeometry.js';
 import { hitShapeOutline } from '../shapeGeometry.js';
 import { DEFAULT_TEXT_FONT_SIZE, resizeScaleFromDrag, textResizeGeometry, textShapeBounds, } from '../textGeometry.js';
+import { editTextShape } from './textEditing.js';
 const HIT_PADDING = 6;
+// Whether an element id refers to a text shape (findHit reports text, lines,
+// rects and ellipses all as kind 'shape'; only text supports tap-to-edit).
+const isTextShape = (doc, id) => doc.shapes.some((s) => s.id === id && s.kind === 'text');
+// Re-tap-to-edit for text. The pointer-down records a text shape's id here only
+// when that shape was *already* selected before this gesture; a release with no
+// movement then re-opens its editor. Held at module scope (not in ToolState)
+// because the native tap gesture synthesizes pointer-down and pointer-up in a
+// single React tick — a ToolState set on down isn't visible to up, but this is.
+// Only one select gesture is ever in flight, so a shared cell is safe. A first
+// tap (shape not yet selected) leaves this null, so it only selects; the second
+// tap edits. Cleared on drag, release, and cancel.
+let pendingTextEditId = null;
 // Hit-test in doc-space. Crude but fast — good enough for v1; tools can
 // override via `hitTest` for more precision later.
 const hitStroke = (stroke, p) => {
@@ -16,8 +29,14 @@ const hitStroke = (stroke, p) => {
     return false;
 };
 // Screen-space grab tolerance (px) added around a geometric shape's outline
-// (line/arrow/rect/ellipse/polygon), converted to doc space via zoom.
-const SHAPE_GRAB_PX = 12;
+// (line/arrow/rect/ellipse/polygon), converted to doc space via zoom. A thin
+// line gives almost nothing to aim at, so the grab corridor is deliberately
+// wider than a fingertip — landing anywhere near the ink grabs it. Kept in sync
+// with measurementGeometry's LINE_GRAB_PX so tap-select and drag-grab agree on
+// what counts as "on the line". (The endpoint-resize handles use their own,
+// tighter HANDLE_GRAB_PX and are checked first on the selected element, so a
+// wider body grab never swallows them.)
+const SHAPE_GRAB_PX = 32;
 // Screen-px radius of the center snap detent when sliding a tile along its line.
 // Converted to t-space per line via (SNAP_PX / zoom) / lineLength. The native
 // slide worklet inlines the same value — keep them in sync.
@@ -124,6 +143,23 @@ const translatePatch = (elementKind, id, doc, delta) => {
     }
     return { op: 'updateStroke', id, patch: { points } };
 };
+// Whether a world point lands on a measurement's tile (its screen-constant
+// anchor box, converted back to doc space via zoom — the same footprint
+// classifyGrab uses). The tile is the move/slide affordance, so a grab here
+// must win over the endpoint/corner/resize handles that appear once an element
+// 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 m = doc.placedMeasurements.find((x) => x.id === id);
+    if (!m)
+        return false;
+    const half = (stampTileSize(m, doc.tileScaleFactor, viewportTileScale) / 2 +
+        HIT_PADDING) /
+        zoom;
+    return (Math.abs(world.x - m.anchor.x) <= half &&
+        Math.abs(world.y - m.anchor.y) <= half);
+};
 // --- Measurement-annotation grab logic (shared by the native UI-thread drag
 // via DragSelectionConfig AND the web pointer handlers — one source of truth) ---
 // Grabbing the tile of a line annotation slides it along the line; everything
@@ -348,6 +384,7 @@ export const createSelectTool = () => ({
             return op ? { ops: [op] } : null;
         },
         classifyMeasurementGrab: classifyGrab,
+        isSelectedTileGrab: isOnMeasurementTile,
         buildSlidePatch: slidePatch,
         hitTestHandle: findHandleHit,
         buildEndpointPatch: endpointPatch,
@@ -364,9 +401,17 @@ export const createSelectTool = () => ({
     onPointerDown(event, ctx) {
         const { world } = event;
         const zoom = ctx.viewport.state.zoom;
-        // Endpoint/resize handles show only on the selected element — check first.
+        // Reset the re-tap-to-edit latch; only a body grab of an already-selected
+        // text shape (below) re-arms it. Grabbing a handle or empty canvas leaves
+        // it cleared, so neither can leak an edit into the next release.
+        pendingTextEditId = null;
+        // Endpoint/resize handles show only on the selected element — check first,
+        // UNLESS the grab is on that element's tile: the tile is the move/slide
+        // affordance and must win over a handle sitting under it, so a selected
+        // tile stays draggable (otherwise it can only be moved after deselecting).
         const selId = ctx.selection?.ids[0];
-        if (selId) {
+        if (selId &&
+            !isOnMeasurementTile(ctx.document, selId, world, zoom, ctx.tileViewportScale)) {
             const handle = findHandleHit(ctx.document, selId, world, zoom);
             if (handle) {
                 ctx.setSelection({ ids: [selId] });
@@ -422,6 +467,15 @@ export const createSelectTool = () => ({
             ctx.setSelection(null);
             return { kind: 'idle' };
         }
+        // Re-tapping an already-selected text shape (without dragging) opens its
+        // editor on release — see onPointerUp. `selId` is the selection from before
+        // this down, so a first tap only selects; the second tap edits.
+        pendingTextEditId =
+            hit.kind === 'shape' &&
+                hit.id === selId &&
+                isTextShape(ctx.document, hit.id)
+                ? hit.id
+                : null;
         ctx.setSelection({ ids: [hit.id] });
         const mode = hit.kind === 'measurement' &&
             classifyGrab(ctx.document, hit.id, world, zoom, ctx.tileViewportScale) ===
@@ -445,22 +499,37 @@ export const createSelectTool = () => ({
             x: event.world.x - s.start.x,
             y: event.world.y - s.start.y,
         };
+        // Any real movement turns this into a drag, not a re-tap — disarm the edit.
+        if (delta.x !== 0 || delta.y !== 0)
+            pendingTextEditId = null;
         const patch = dragPatch(s, ctx.document, delta, ctx.viewport.state.zoom);
         if (patch)
             ctx.preview(patch);
         return { ...s, delta };
     },
     onPointerUp(_event, ctx, state) {
+        const editId = pendingTextEditId;
+        pendingTextEditId = null;
         const s = state;
-        if (s?.kind !== 'dragging')
-            return;
-        if (s.delta.x === 0 && s.delta.y === 0)
+        // A moved selection commits its drag and is never a tap-to-edit.
+        if (s?.kind === 'dragging' && (s.delta.x !== 0 || s.delta.y !== 0)) {
+            const patch = dragPatch(s, ctx.document, s.delta, ctx.viewport.state.zoom);
+            if (patch)
+                ctx.commit(patch);
             return;
-        const patch = dragPatch(s, ctx.document, s.delta, ctx.viewport.state.zoom);
-        if (patch)
-            ctx.commit(patch);
+        }
+        // No movement: re-tapping an already-selected text shape re-opens its
+        // editor (the same edit flow as tapping it with the text tool, via the
+        // shared editTextShape). `editId` was latched on the down, so this survives
+        // the native tap's synchronous down+up where `state` cannot.
+        if (editId) {
+            const shape = ctx.document.shapes.find((sh) => sh.id === editId);
+            if (shape && shape.kind === 'text')
+                editTextShape(ctx, shape);
+        }
     },
     onCancel(_state, ctx) {
+        pendingTextEditId = null;
         ctx.preview({ ops: [] });
     },
     hitTest(element, p) {

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

@@ -0,0 +1,4 @@
+import type { AnnotationCanvasState, AnnotationShape, Vec2 } from '../../../types/annotation.js';
+import type { ToolContext } from '../Tool.js';
+export declare const findTextShapeAt: (doc: AnnotationCanvasState, world: Vec2) => AnnotationShape | null;
+export declare const editTextShape: (ctx: ToolContext, shape: AnnotationShape, onDone?: () => void) => void;

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

@@ -0,0 +1,36 @@
+import { hitTestTextShape } from '../textGeometry.js';
+// Topmost text shape under a world point (z-order, top first), or null. Shared
+// by the text tool (tap-to-edit) and the select tool (tap-a-selected-shape-to-
+// edit) so a press resolves to the same element from either tool.
+export const findTextShapeAt = (doc, world) => {
+    for (let i = doc.shapes.length - 1; i >= 0; i--) {
+        const s = doc.shapes[i];
+        if (s.kind === 'text' && hitTestTextShape(s, world))
+            return s;
+    }
+    return null;
+};
+// Re-open the consumer's text input pre-filled with an existing text shape's
+// content and commit the edit: cancelling (null) leaves it untouched, clearing
+// the text deletes the shape, and changed text updates it. The shape is left
+// selected (cleared on delete). `onDone` runs only after a non-cancel,
+// non-delete resolution — the text tool uses it to switch back to select.
+// One source of truth for editing placed text from either tool.
+export const editTextShape = (ctx, shape, onDone) => {
+    void ctx.requestTextInput({ initialText: shape.text }).then((text) => {
+        if (text === null)
+            return;
+        if (text === '') {
+            ctx.commit({ ops: [{ op: 'removeShape', id: shape.id }] });
+            ctx.setSelection(null);
+            return;
+        }
+        if (text !== shape.text) {
+            ctx.commit({
+                ops: [{ op: 'updateShape', id: shape.id, patch: { text } }],
+            });
+        }
+        ctx.setSelection({ ids: [shape.id] });
+        onDone?.();
+    });
+};

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

@@ -1,5 +1,6 @@
 import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
-import { DEFAULT_TEXT_FONT_SIZE, hitTestTextShape } from '../textGeometry.js';
+import { DEFAULT_TEXT_FONT_SIZE } from '../textGeometry.js';
+import { editTextShape, findTextShapeAt } from './textEditing.js';
 let counter = 0;
 const makeId = () => `text-${Date.now().toString(36)}-${(counter++).toString(36)}`;
 // Screen-px a press may travel and still count as a tap. Beyond this the
@@ -7,15 +8,6 @@ const makeId = () => `text-${Date.now().toString(36)}-${(counter++).toString(36)
 // NOT open the text sheet — the cause of the stray "weird popup" on screen.
 const TAP_SLOP_PX = 10;
 const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
-// Topmost text shape under a world point, for tap-to-edit.
-const findTextShapeAt = (doc, world) => {
-    for (let i = doc.shapes.length - 1; i >= 0; i--) {
-        const s = doc.shapes[i];
-        if (s.kind === 'text' && hitTestTextShape(s, world))
-            return s;
-    }
-    return null;
-};
 // Tap-to-type. Tapping empty canvas opens the consumer's text input and
 // commits a new text shape at the tap point (top-left anchored); tapping an
 // existing text shape re-opens the input pre-filled to edit it (clearing the
@@ -51,22 +43,7 @@ export const createTextTool = (options = {}) => {
             }
             const existing = findTextShapeAt(ctx.document, event.world);
             if (existing) {
-                void ctx
-                    .requestTextInput({ initialText: existing.text })
-                    .then((text) => {
-                    if (text === null)
-                        return;
-                    if (text === '') {
-                        ctx.commit({ ops: [{ op: 'removeShape', id: existing.id }] });
-                        ctx.setSelection(null);
-                        return;
-                    }
-                    if (text !== existing.text) {
-                        ctx.commit({
-                            ops: [{ op: 'updateShape', id: existing.id, patch: { text } }],
-                        });
-                    }
-                    ctx.setSelection({ ids: [existing.id] });
+                editTextShape(ctx, existing, () => {
                     if (autoSwitchToSelect)
                         options.onAutoSwitch?.(selectToolId);
                 });

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

@@ -16,6 +16,14 @@ export interface AnnotationCanvasHandle {
     }): void;
     setAnnotationType(id: AnnotationElementId, type: MeasurementPlacement): void;
     associateMeasurement(id: AnnotationElementId, ref: MeasurementRef): void;
+    bindColumn(id: AnnotationElementId, binding: {
+        groupId: string;
+        columnId: string;
+    }): void;
+    placeColumnTileAtCenter(binding: {
+        groupId: string;
+        columnId: string;
+    }): AnnotationElementId;
     deleteSelected(): void;
 }
 export interface UseAnnotationCanvasStateProps {
@@ -56,6 +64,7 @@ export interface AnnotationCanvasStateApi {
     dispatchPointerMove(event: CanvasPointerEvent): void;
     dispatchPointerUp(event: CanvasPointerEvent): void;
     dispatchPointerCancel(): void;
+    dispatchLongPress(event: CanvasPointerEvent): void;
     pan(deltaScreen: Vec2): void;
     zoom(focalScreen: Vec2, nextZoom: number): void;
     setViewport(next: ViewportState): void;

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { applyPatch, invertPatch, DEFAULT_LAYER_ID, } from '../../types/annotation.js';
 import { createViewportApi, panBy, zoomAt, DEFAULT_VIEWPORT, } from './viewport.js';
 import { recomputeAnchor, rectCenter, DEFAULT_LINE_POS, } from './measurementGeometry.js';
-import { viewportTileScale } from './stampLayout.js';
 // Platform-agnostic state machine for the annotation canvas. Web and native
 // inners share this hook; each wraps it with platform-specific event
 // capture and JSX (div + DOM events vs. GestureDetector + RN Views).
@@ -22,11 +21,13 @@ export const useAnnotationCanvasState = (props) => {
         return map;
     }, [measurements]);
     const viewportApi = useMemo(() => createViewportApi(viewport), [viewport]);
-    // How large the document renders when fit to this canvas, as a tile-footprint
-    // multiplier (zoom-independent). Keeps tiles a consistent fraction of the
-    // drawing on a phone vs a desktop pane. Used by the overlays (drawn size) and
-    // the tools (hit box) so both agree.
-    const tileViewportScale = useMemo(() => viewportTileScale(width, height, canvas.viewport.width, canvas.viewport.height), [width, height, canvas.viewport.width, canvas.viewport.height]);
+    // Tiles are sized independently of the canvas: their footprint is base ×
+    // per-tile scale × the document-wide `tileScaleFactor` ("Tile size" slider),
+    // never the canvas pixel size — so resizing the pane no longer rescales tiles.
+    // Retained as a (constant 1) value because the overlays (drawn size) and tools
+    // (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;
     const ctx = useMemo(() => ({
         document: canvas,
         selection,
@@ -121,6 +122,14 @@ export const useAnnotationCanvasState = (props) => {
         activePointerIdRef.current = null;
         setToolState(undefined);
     }, [activeTool, ctx, toolState]);
+    const dispatchLongPress = useCallback((event) => {
+        if (!activeTool)
+            return;
+        // Fire-and-forget: onLongPress is a discrete action (it opens the text
+        // editor), so it neither reads nor writes the gesture's tool state — the
+        // in-flight drag/select state on web stays intact underneath it.
+        activeTool.onLongPress?.(event, ctx);
+    }, [activeTool, ctx]);
     const dispatchPointerCancel = useCallback(() => {
         // Clear FIRST, then let the tool react: state updates batch, so a tool
         // whose onCancel re-emits a preview (the polygon tool keeps its placed
@@ -309,6 +318,39 @@ export const useAnnotationCanvasState = (props) => {
                     ],
                 });
             },
+            bindColumn(id, binding) {
+                const c = ctxRef.current;
+                c.commit({
+                    ops: [
+                        {
+                            op: 'updateMeasurement',
+                            id,
+                            patch: { groupId: binding.groupId, columnId: binding.columnId },
+                        },
+                    ],
+                });
+            },
+            placeColumnTileAtCenter(binding) {
+                const c = ctxRef.current;
+                const anchor = c.viewport.screenToWorld({
+                    x: width / 2,
+                    y: height / 2,
+                });
+                const placed = {
+                    id: `measurement-${Date.now().toString(36)}-${Math.floor(Math.random() * 1e9).toString(36)}`,
+                    layerId: c.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
+                    groupId: binding.groupId,
+                    columnId: binding.columnId,
+                    anchor,
+                    showLabel: true,
+                    showValue: true,
+                    createdAt: Date.now(),
+                };
+                c.commit({ ops: [{ op: 'addMeasurement', measurement: placed }] });
+                // Select it so the consumer can immediately move it / open its editor.
+                c.setSelection({ ids: [placed.id] });
+                return placed.id;
+            },
             deleteSelected() {
                 const c = ctxRef.current;
                 const ids = c.selection?.ids;
@@ -376,6 +418,7 @@ export const useAnnotationCanvasState = (props) => {
         dispatchPointerMove,
         dispatchPointerUp,
         dispatchPointerCancel,
+        dispatchLongPress,
         pan,
         zoom,
         setViewport,

package/dist/types/annotation.d.ts

@@ -50,6 +50,7 @@ export interface PlacedMeasurementRef {
     measurementPath?: string;
     measurementId?: string;
     groupId?: string;
+    columnId?: string;
     anchor: Vec2;
     placement?: MeasurementPlacement;
     line?: {

package/package.json

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