@reekon-tools/boldr-utils 1.15.2 → 1.15.4

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

@@ -272,6 +272,7 @@ export const AnnotationCanvasInner = (props) => {
     const shapeDraw = state.activeTool?.shapeDraw ?? null;
     const panViewport = !!state.activeTool?.panViewport;
     const dragSelection = state.activeTool?.dragSelection ?? null;
+    const planeEdit = state.activeTool?.planeEdit ?? 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
@@ -476,6 +477,70 @@ export const AnnotationCanvasInner = (props) => {
         'worklet';
         return HANDLE_RING_PX / zoom.value;
     });
+    // ---- Plane-calibration handle drag (UI thread; Tool.planeEdit) ----------
+    // The plane tool's JS preview path re-rendered the whole canvas (and
+    // recomputed the photo-spanning grid) per pointer-move, dropping JS frames
+    // on device. Instead the drag runs like the select tool's: the gesture
+    // begin hit-tests once on JS, the translation lives in shared values
+    // driving a live outline (worklet twin of PlaneElement's outline path), and
+    // the drop commits exactly once. The grid + dimension tiles freeze/hide
+    // until the commit lands.
+    // planeDragMode: 0 idle · 1 handle drag (UI thread) · 2 everything else
+    // (marking / blocked-creation), which streams JS pointer events like
+    // toolPan would have.
+    const planeDragMode = useSharedValue(0);
+    const planeDragEnded = useSharedValue(false);
+    const planeDragTX = useSharedValue(0);
+    const planeDragTY = useSharedValue(0);
+    const planeDragStartX = useSharedValue(0);
+    const planeDragStartY = useSharedValue(0);
+    // React gate for the live render (which plane / which handle); mirrored in
+    // a ref for the gesture's JS handlers, which must read the latest value
+    // without re-building the gesture.
+    const [planeDrag, setPlaneDrag] = useState(null);
+    const planeDragRef = useRef(planeDrag);
+    const planeJsPointerRef = useRef(null);
+    // The dragged handle's live world position: grab-start + screen translation
+    // converted to doc units by the live zoom.
+    const planeDragHandle = useDerivedValue(() => {
+        'worklet';
+        return {
+            x: planeDragStartX.value + planeDragTX.value / zoom.value,
+            y: planeDragStartY.value + planeDragTY.value / zoom.value,
+        };
+    });
+    // WORKLET TWIN of PlaneElement's outline path (quad ring / reference line;
+    // the scale ticks are skipped live and reappear on commit). The committed
+    // plane + dragged index are captured from React state — setPlaneDrag
+    // renders before any movement applies, so the capture is fresh.
+    const planeDragPlane = planeDrag
+        ? ((state.effectiveCanvas.planes ?? []).find((p) => p.id === planeDrag.planeId) ?? null)
+        : null;
+    const planeDragIndexVal = planeDrag?.index ?? -1;
+    const planeDragPath = useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        if (!planeDragPlane || planeDragMode.value !== 1)
+            return path;
+        const lx = planeDragStartX.value + planeDragTX.value / zoom.value;
+        const ly = planeDragStartY.value + planeDragTY.value / zoom.value;
+        if (planeDragPlane.mode === 'perspective') {
+            const c = planeDragPlane.corners;
+            const px = (i) => (i === planeDragIndexVal ? lx : c[i].x);
+            const py = (i) => (i === planeDragIndexVal ? ly : c[i].y);
+            path.moveTo(px(0), py(0));
+            path.lineTo(px(1), py(1));
+            path.lineTo(px(2), py(2));
+            path.lineTo(px(3), py(3));
+            path.close();
+            return path;
+        }
+        const a = planeDragIndexVal === 0 ? { x: lx, y: ly } : planeDragPlane.refLine.a;
+        const b = planeDragIndexVal === 1 ? { x: lx, y: ly } : planeDragPlane.refLine.b;
+        path.moveTo(a.x, a.y);
+        path.lineTo(b.x, b.y);
+        return path;
+    });
     // Rectangle-annotation corner drag. `rectDragId` (React state) marks which
     // annotation's rect renders from the live geometry; `rectCtx` carries the
     // fixed (opposite) corner and the grabbed corner's start position so the
@@ -1487,12 +1552,119 @@ export const AnnotationCanvasInner = (props) => {
                     runOnJS(cancelSelectDrag)();
             });
         };
+        // Plane tool: a hybrid pan. Handle drags run on the UI thread (shared
+        // values → live outline; single commit on release — see the planeDrag*
+        // values above); everything else (scale-mode marking, blocked-creation
+        // taps) falls back to streaming JS pointer events exactly like toolPan.
+        // The begin hit-test runs once on JS and decides the mode.
+        const buildPlaneEditPan = (cfg) => {
+            const beginPlaneDrag = (origin) => {
+                const st = stateRef.current;
+                const world = st.ctx.viewport.screenToWorld(origin);
+                const index = cfg.hitHandle(st.ctx.document, world, st.viewport.zoom);
+                const planeId = st.ctx.document.planes?.[0]?.id ?? null;
+                if (index != null && planeId != null) {
+                    const start = cfg.handlePoints(st.ctx.document)[index];
+                    if (start) {
+                        planeDragStartX.value = start.x;
+                        planeDragStartY.value = start.y;
+                        planeDragMode.value = 1;
+                        const drag = { planeId, index };
+                        planeDragRef.current = drag;
+                        setPlaneDrag(drag);
+                        // Precision drop — the loupe follows the finger like the select
+                        // tool's sub-drags.
+                        setMagnifying(true);
+                        return;
+                    }
+                }
+                planeDragMode.value = 2;
+                const id = pointerIdRef.current++;
+                planeJsPointerRef.current = { id };
+                st.dispatchPointerDown(buildEvent(id, origin));
+            };
+            const movePlaneDragJs = (screen) => {
+                const f = planeJsPointerRef.current;
+                if (f)
+                    stateRef.current.dispatchPointerMove(buildEvent(f.id, screen));
+            };
+            const endPlaneDrag = (screen) => {
+                const st = stateRef.current;
+                if (planeDragMode.value === 2) {
+                    const f = planeJsPointerRef.current;
+                    if (f)
+                        st.dispatchPointerUp(buildEvent(f.id, screen));
+                }
+                else if (planeDragMode.value === 1 && planeDragRef.current) {
+                    const world = st.ctx.viewport.screenToWorld(screen);
+                    const patch = cfg.buildHandleDropPatch(st.ctx.document, planeDragRef.current.index, world);
+                    // Null = invalid drop (non-convex) — clearing the drag state below
+                    // snaps the outline back to the committed plane.
+                    if (patch)
+                        st.ctx.commit(patch);
+                }
+                planeDragMode.value = 0;
+                planeDragRef.current = null;
+                planeJsPointerRef.current = null;
+                setPlaneDrag(null);
+                setMagnifying(false);
+            };
+            const cancelPlaneDrag = () => {
+                if (planeDragMode.value === 2 && planeJsPointerRef.current) {
+                    stateRef.current.dispatchPointerCancel();
+                }
+                planeDragMode.value = 0;
+                planeDragRef.current = null;
+                planeJsPointerRef.current = null;
+                setPlaneDrag(null);
+                setMagnifying(false);
+            };
+            return Gesture.Pan()
+                .minPointers(1)
+                .maxPointers(1)
+                .onStart((e) => {
+                'worklet';
+                planeDragEnded.value = false;
+                planeDragMode.value = 0;
+                planeDragTX.value = e.translationX;
+                planeDragTY.value = e.translationY;
+                magTouchX.value = e.x;
+                magTouchY.value = e.y;
+                // Hit-test at the touch-down point — onStart fires only after the
+                // pan threshold, so back out the accumulated translation.
+                runOnJS(beginPlaneDrag)({
+                    x: e.x - e.translationX,
+                    y: e.y - e.translationY,
+                });
+            })
+                .onChange((e) => {
+                'worklet';
+                planeDragTX.value = e.translationX;
+                planeDragTY.value = e.translationY;
+                magTouchX.value = e.x;
+                magTouchY.value = e.y;
+                if (planeDragMode.value === 2) {
+                    runOnJS(movePlaneDragJs)({ x: e.x, y: e.y });
+                }
+            })
+                .onEnd((e) => {
+                'worklet';
+                planeDragEnded.value = true;
+                runOnJS(endPlaneDrag)({ x: e.x, y: e.y });
+            })
+                .onFinalize(() => {
+                'worklet';
+                if (!planeDragEnded.value)
+                    runOnJS(cancelPlaneDrag)();
+            });
+        };
         // One finger, by active tool:
         //  - freehand (pen/marker/highlighter) → draw on the UI thread
         //  - shape tools (line/rect/…) → rubber-band on the UI thread
         //  - Hand → no separate gesture: viewportPan above already spans one
         //    finger (min 1), so panning and pinching stay one uncancelled stream
         //  - select → drag the hit element on the UI thread
+        //  - plane tool → handle drags on the UI thread, marking on the JS thread
         //  - everything else → dispatch pointer events on the JS thread
         const oneFinger = freehand
             ? buildDrawPan(freehand)
@@ -1500,9 +1672,11 @@ export const AnnotationCanvasInner = (props) => {
                 ? buildShapeDrawPan(shapeDraw)
                 : panViewport
                     ? null
-                    : dragSelection
-                        ? buildSelectDragPan(dragSelection)
-                        : toolPan;
+                    : planeEdit
+                        ? buildPlaneEditPan(planeEdit)
+                        : dragSelection
+                            ? buildSelectDragPan(dragSelection)
+                            : toolPan;
         // 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 ? [oneFinger] : []));
@@ -1520,6 +1694,13 @@ export const AnnotationCanvasInner = (props) => {
         shapeDraw,
         panViewport,
         dragSelection,
+        planeEdit,
+        planeDragMode,
+        planeDragEnded,
+        planeDragTX,
+        planeDragTY,
+        planeDragStartX,
+        planeDragStartY,
         longPressEnabled,
         dragX,
         dragY,
@@ -1613,6 +1794,12 @@ export const AnnotationCanvasInner = (props) => {
             ? handleRingWidth
             : undefined,
         showPlaneHandles: activeTool?.planeEditing === true,
+        // UI-thread plane handle drag: while set, the Skia tree swaps the plane's
+        // static element for the live outline + handles (see AnnotationCanvasSkia).
+        planeDragId: planeDrag?.planeId ?? null,
+        planeDragIndex: planeDrag?.index ?? null,
+        planeDragPath,
+        planeDragHandle,
         customPreview,
     };
     // Lens window for the loupe: an opaque white base + the magnified scene

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

@@ -89,9 +89,15 @@ export interface AnnotationCanvasSkiaProps {
         value: number;
     };
     showPlaneHandles?: boolean;
+    planeDragId?: string | null;
+    planeDragIndex?: number | null;
+    planeDragPath?: SkPath | {
+        value: SkPath;
+    };
+    planeDragHandle?: AnimatedPoint;
     customPreview?: ReactNode;
     wrapContent?: (content: ReactNode) => ReactNode;
     canvasRef?: RefObject<CanvasRef | null>;
 }
-export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, showPlaneHandles, customPreview, wrapContent, canvasRef, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, showPlaneHandles, planeDragId, planeDragIndex, planeDragPath, planeDragHandle, customPreview, wrapContent, canvasRef, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/annotation/canvas/AnnotationCanvasSkia.js

@@ -6,7 +6,7 @@ import { SELECTION_PAD, textResizeGeometry, textShapeBounds, } from './textGeome
 import { visualShapeBounds } from './shapeGeometry.js';
 import { backgroundLayerDocRect, backgroundLayersOf, } from './backgroundLayers.js';
 import { BackgroundLayerElement } from './elements/BackgroundImageElement.js';
-import { PlaneElement } from './elements/PlaneElement.js';
+import { PlaneElement, PLANE_CHROME_COLOR, PLANE_OUTLINE_WIDTH, } from './elements/PlaneElement.js';
 import { ShapeElement } from './elements/ShapeElement.js';
 import { StrokeElement } from './elements/StrokeElement.js';
 // Default visual constants for the measurement-annotation line (the tile itself
@@ -80,7 +80,7 @@ const SelectionBox = ({ bounds, isDragging, transform, }) => (_jsx(DraggableElem
 // since the function-call pattern works identically on native we use it
 // in both Inners for consistency. Don't add hooks here; this is a plain
 // JSX-returning helper, not a component.
-export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, showPlaneHandles, customPreview, wrapContent, canvasRef, }) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, showPlaneHandles, planeDragId, planeDragIndex, planeDragPath, planeDragHandle, customPreview, wrapContent, canvasRef, }) => {
     // Doc rect a SCALE-mode plane grid covers: the first background layer (the
     // photo being calibrated), else the document rect. Pinned to layer 0 like
     // the tile-sizing reference — adding a second image must not re-span the
@@ -94,7 +94,16 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
             width: effectiveCanvas.viewport.width,
             height: effectiveCanvas.viewport.height,
         };
-    const world = (_jsxs(Group, { transform: worldTransform, children: [backgroundLayersOf(effectiveCanvas.viewport).map((layer) => (_jsx(DraggableElement, { isDragging: layer.id === draggingId || layer.id === resizingId, transform: layer.id === resizingId ? resizeTransform : dragTransform, children: _jsx(BackgroundLayerElement, { layer: layer, resolveUrl: resolveImageUrl, skImage: backgroundSkImages?.[layer.id], viewport: viewport, screenWidth: width, screenHeight: height }) }, layer.id))), (effectiveCanvas.planes ?? []).map((plane) => (_jsx(PlaneElement, { plane: plane, scaleBounds: planeScaleBounds, showHandles: showPlaneHandles === true, handleRadius: showPlaneHandles ? handleRadius : undefined, handleRingWidth: showPlaneHandles ? handleRingWidth : undefined }, plane.id))), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => {
+    const world = (_jsxs(Group, { transform: worldTransform, children: [backgroundLayersOf(effectiveCanvas.viewport).map((layer) => (_jsx(DraggableElement, { isDragging: layer.id === draggingId || layer.id === resizingId, transform: layer.id === resizingId ? resizeTransform : dragTransform, children: _jsx(BackgroundLayerElement, { layer: layer, resolveUrl: resolveImageUrl, skImage: backgroundSkImages?.[layer.id], viewport: viewport, screenWidth: width, screenHeight: height }) }, layer.id))), (effectiveCanvas.planes ?? []).map((plane) => {
+                if (plane.id === planeDragId && planeDragPath) {
+                    const statics = plane.mode === 'perspective'
+                        ? plane.corners
+                        : [plane.refLine.a, plane.refLine.b];
+                    return (_jsxs(Group, { children: [_jsx(Path, { path: planeDragPath, color: PLANE_CHROME_COLOR, style: "stroke", strokeWidth: PLANE_OUTLINE_WIDTH, strokeJoin: "round" }), handleRadius != null &&
+                                statics.map((p, i) => i === planeDragIndex ? null : (_jsxs(Group, { children: [_jsx(Circle, { c: p, r: handleRadius, color: PLANE_CHROME_COLOR }), _jsx(Circle, { c: p, r: handleRadius, color: "#FFFFFF", style: "stroke", strokeWidth: handleRingWidth })] }, i))), handleRadius != null && planeDragHandle && (_jsxs(_Fragment, { children: [_jsx(Circle, { c: planeDragHandle, r: handleRadius, color: PLANE_CHROME_COLOR }), _jsx(Circle, { c: planeDragHandle, r: handleRadius, color: "#FFFFFF", style: "stroke", strokeWidth: handleRingWidth })] }))] }, plane.id));
+                }
+                return (_jsx(PlaneElement, { plane: plane, scaleBounds: planeScaleBounds, showHandles: showPlaneHandles === true, handleRadius: showPlaneHandles ? handleRadius : undefined, handleRingWidth: showPlaneHandles ? handleRingWidth : undefined }, plane.id));
+            }), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => {
                 // Line/arrow shapes support endpoint editing. When selected they show
                 // grab handles at both ends; during an endpoint drag the line renders
                 // from the live endpoints (one following the finger) — the shape twin
@@ -162,6 +171,11 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                 }
                 if (placementOf(placed) !== 'line' || !placed.line)
                     return null;
+                // A dimension tile's line IS its calibration edge: while that plane's
+                // handle is being live-dragged, the stale committed edge would linger
+                // under the moving live outline — hide it until the drop commits.
+                if (placed.planeId && placed.planeId === planeDragId)
+                    return null;
                 const isEndpointDrag = placed.id === endpointDragId;
                 const isSelected = placed.id === selectedId;
                 const p1 = isEndpointDrag && liveLineP1 ? liveLineP1 : placed.line.a;

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

@@ -90,6 +90,11 @@ export interface DragSelectionConfig {
     hitTestResizeHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): ResizeGeometry | null;
     buildResizePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2): AnnotationDocumentPatch | null;
 }
+export interface PlaneEditConfig {
+    hitHandle(doc: AnnotationCanvasState, world: Vec2, zoom: number): number | null;
+    handlePoints(doc: AnnotationCanvasState): Vec2[];
+    buildHandleDropPatch(doc: AnnotationCanvasState, index: number, world: Vec2): AnnotationDocumentPatch | null;
+}
 export interface Tool {
     id: string;
     label: string;
@@ -100,6 +105,7 @@ export interface Tool {
     panViewport?: boolean;
     dragSelection?: DragSelectionConfig;
     planeEditing?: boolean;
+    planeEdit?: PlaneEditConfig;
     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;

package/dist/annotation/canvas/elements/PlaneElement.d.ts

@@ -1,4 +1,6 @@
 import type { PlaneCalibration } from '../../../types/annotation.js';
+export declare const PLANE_CHROME_COLOR: "#BD30A8";
+export declare const PLANE_OUTLINE_WIDTH = 14;
 type AnimatedNumber = number | {
     value: number;
 };

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

@@ -8,12 +8,15 @@ import { FormulaColors } from '../../../theme/colors.js';
 // information: the formula purple outlines the calibrated quad / reference
 // line (and inks its handles and dimension-tile lines — see planeTool), while
 // the grid it casts gets its own pale pink so the two never blur.
-const PLANE_COLOR = FormulaColors.purple;
+// Exported for the live UI-thread handle drag, which redraws the outline in
+// AnnotationCanvasSkia while this element is hidden.
+export const PLANE_CHROME_COLOR = FormulaColors.purple;
+export const PLANE_OUTLINE_WIDTH = 14;
+const PLANE_COLOR = PLANE_CHROME_COLOR;
 const PLANE_GRID_COLOR = '#FFD1F8';
 const PLANE_GRID_OPACITY = 0.9;
 // Doc-space stroke widths (scale with zoom, like the drawn shapes).
 const PLANE_GRID_WIDTH = 2.5;
-const PLANE_OUTLINE_WIDTH = 4;
 // Cross-tick half-length (doc units) marking the ends of a scale-mode
 // reference line, so it reads as "a measured span", not just a line.
 const REF_TICK_LEN = 18;

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

@@ -1,4 +1,4 @@
-import type { PlaneCalibration, PlaneCalibrationMode } from '../../../types/annotation.js';
+import type { PlacedMeasurementRef, PlaneCalibration, PlaneCalibrationMode } from '../../../types/annotation.js';
 import type { Tool } from '../Tool.js';
 export interface PlaneToolOptions {
     id?: string;
@@ -7,6 +7,7 @@ export interface PlaneToolOptions {
     onPlaced?(plane: PlaneCalibration): void;
     onInvalidQuad?(): void;
     onExistingPlane?(): void;
+    onDimensionTileTap?(tile: PlacedMeasurementRef): void;
     minDragPx?: number;
 }
 export declare const createPlaneTool: (options: PlaneToolOptions) => Tool;

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

@@ -1,6 +1,7 @@
 import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
 import { isQuadConvexNonDegenerate, normalizeQuadOrder, planeEdgeLine, } from '../planeGeometry.js';
 import { linePosOf, recomputeAnchor, DEFAULT_LINE_POS, } from '../measurementGeometry.js';
+import { stampTileDims } from '../stampLayout.js';
 import { FormulaColors } from '../../../theme/colors.js';
 // Screen-px grab radius for an existing plane's corner/endpoint handles while
 // the tool is active (matches the drawn handle affordance scale).
@@ -24,6 +25,22 @@ const committedPlane = (doc) => doc.planes?.[0] ?? null;
 const planeHandles = (plane) => plane.mode === 'perspective'
     ? plane.corners
     : [plane.refLine.a, plane.refLine.b];
+// Index of the committed calibration's handle under `world`, or null —
+// shared by the tool's JS pointer path and the native UI-thread drag
+// (Tool.planeEdit.hitHandle).
+const hitHandleAt = (doc, world, zoom) => {
+    const plane = committedPlane(doc);
+    if (!plane)
+        return null;
+    const tol = HANDLE_GRAB_PX / zoom;
+    const tolSq = tol * tol;
+    const handles = planeHandles(plane);
+    for (let i = 0; i < handles.length; i++) {
+        if (distSq(world, handles[i]) <= tolSq)
+            return i;
+    }
+    return null;
+};
 // The committed plane with one handle moved to `p`.
 const withHandleMoved = (plane, index, p) => {
     if (plane.mode === 'perspective') {
@@ -53,10 +70,10 @@ const buildDimensionTile = (doc, plane, edge) => {
         planeId: plane.id,
         planeEdge: edge,
         // The tile's line IS the plane edge PlaneElement already draws — style it
-        // as the same cyan stroke so it disappears into the outline instead of
-        // painting the default measurement blue on top of it.
+        // as the same purple stroke (and width) so it disappears into the outline
+        // instead of painting the default measurement blue on top of it.
         lineColor: PLANE_COLOR,
-        lineWidth: 4,
+        lineWidth: 14,
         showLabel: true,
         showValue: true,
         createdAt: Date.now(),
@@ -192,26 +209,68 @@ export const createPlaneTool = (options) => {
         ctx.commit({ ops });
         options.onPlaced?.(plane);
     };
-    // Which committed-plane handle a press landed on, if any.
-    const hitHandle = (ctx, world) => {
+    // Which committed-plane DIMENSION tile a tap landed on, if any — the tile
+    // BOX only (deliberately not the edge line, which spans the whole side and
+    // would turn every edge tap into value entry). Same footprint the overlay
+    // draws and the select tool grabs (stampTileDims + the ctx scale factors).
+    const hitDimensionTile = (ctx, world) => {
         const plane = committedPlane(ctx.document);
         if (!plane)
             return null;
-        const tol = HANDLE_GRAB_PX / ctx.viewport.state.zoom;
-        const tolSq = tol * tol;
-        const handles = planeHandles(plane);
-        for (let i = 0; i < handles.length; i++) {
-            if (distSq(world, handles[i]) <= tolSq)
-                return i;
+        const zoom = ctx.viewport.state.zoom;
+        for (let i = ctx.document.placedMeasurements.length - 1; i >= 0; i--) {
+            const m = ctx.document.placedMeasurements[i];
+            if (m.planeId !== plane.id || !m.planeEdge)
+                continue;
+            const dims = stampTileDims(m, ctx.tileScaleFactor, ctx.tileViewportScale, ctx.headerTileScaleFactor, ctx.fileTileScaleFactor);
+            const halfW = (dims.width / 2 + 6) / zoom;
+            const halfH = (dims.height / 2 + 6) / zoom;
+            if (Math.abs(world.x - m.anchor.x) <= halfW &&
+                Math.abs(world.y - m.anchor.y) <= halfH) {
+                return m;
+            }
         }
         return null;
     };
+    // Which committed-plane handle a press landed on, if any.
+    const hitHandle = (ctx, world) => hitHandleAt(ctx.document, world, ctx.viewport.state.zoom);
+    // Drop patch for a handle drag — shared by the JS pointer path below and
+    // the native UI-thread drag (Tool.planeEdit). Null (snap back, host
+    // toasted) when the drop would break the quad.
+    const handleDropPatch = (doc, index, world) => {
+        const plane = committedPlane(doc);
+        if (!plane)
+            return null;
+        const next = withHandleMoved(plane, index, world);
+        if (next.mode === 'perspective' &&
+            !isQuadConvexNonDegenerate(next.corners)) {
+            options.onInvalidQuad?.();
+            return null;
+        }
+        return {
+            ops: [
+                { op: 'setPlane', plane: next },
+                ...syncDimensionTileOps(doc, next),
+            ],
+        };
+    };
     return {
         id: options.id ?? `plane-${mode}`,
         label: options.label ??
             (mode === 'perspective' ? 'Perspective plane' : 'Scale reference'),
         cursor: 'crosshair',
         planeEditing: true,
+        // UI-thread handle drags on native (see PlaneEditConfig in Tool.ts): the
+        // same pure hit-test and drop-patch the JS pointer path below uses, so
+        // both platforms share one source of truth.
+        planeEdit: {
+            hitHandle: hitHandleAt,
+            handlePoints: (doc) => {
+                const plane = committedPlane(doc);
+                return plane ? planeHandles(plane) : [];
+            },
+            buildHandleDropPatch: handleDropPatch,
+        },
         onPointerDown(event, ctx) {
             // Editing an existing plane wins over starting new geometry — but only
             // when nothing is mid-mark (a quad in progress keeps collecting taps).
@@ -281,28 +340,27 @@ export const createPlaneTool = (options) => {
                 ctx.preview({ ops: [] });
                 if (!s.moved)
                     return;
-                const plane = committedPlane(ctx.document);
-                if (!plane)
-                    return;
-                const next = withHandleMoved(plane, s.handleIndex, event.world);
-                // A corner drag that breaks the quad snaps back instead of committing
-                // a plane the homography can't invert.
-                if (next.mode === 'perspective' &&
-                    !isQuadConvexNonDegenerate(next.corners)) {
-                    options.onInvalidQuad?.();
-                    return;
-                }
-                ctx.commit({
-                    ops: [
-                        { op: 'setPlane', plane: next },
-                        ...syncDimensionTileOps(ctx.document, next),
-                    ],
-                });
+                // A drop that breaks the quad snaps back (handleDropPatch returns
+                // null and raises onInvalidQuad) instead of committing a plane the
+                // homography can't invert.
+                const patch = handleDropPatch(ctx.document, s.handleIndex, event.world);
+                if (patch)
+                    ctx.commit(patch);
                 return;
             }
-            // Creation is blocked while a calibration exists (only its handles are
-            // editable) — the user deletes it first to re-mark.
+            // While a calibration exists, a TAP on one of its dimension tiles
+            // selects it and opens value entry (the host's onDimensionTileTap) —
+            // dimensions stay editable without leaving calibration mode. Any other
+            // attempt to mark new geometry is blocked: delete the plane first.
+            // (A real drag — scale mode with `moved` — is never a tile tap.)
             if (committedPlane(ctx.document)) {
+                const isTap = s.kind !== 'plane-scale-drawing' || !s.moved;
+                const tile = isTap ? hitDimensionTile(ctx, event.world) : null;
+                if (tile) {
+                    ctx.setSelection({ ids: [tile.id] });
+                    options.onDimensionTileTap?.(tile);
+                    return;
+                }
                 options.onExistingPlane?.();
                 return;
             }

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -105,6 +105,18 @@ export const useAnnotationCanvasState = (props) => {
     const { canvas, onCommit, tools, activeToolId, selection, onSelectionChange, measurements, pickMeasurement, requestTextInput, width, height, initialViewport, tileScalePlatform, animateViewport, imperativeRef, } = props;
     const [viewport, setViewport] = useState(initialViewport ?? DEFAULT_VIEWPORT);
     const [toolState, setToolState] = useState(undefined);
+    // Synchronous mirror for the DISPATCHERS. The native tap gesture
+    // synthesizes pointerDown + pointerUp inside one JS task, so the up runs
+    // before React re-renders — a dispatcher reading the state closure would
+    // hand onPointerUp the PRE-tap state (undefined) and tap-driven tools
+    // (quad corners, dimension-tile taps) silently no-op. React state remains
+    // the render-side source (renderPreview / penDrawingStroke); every write
+    // goes through updateToolState so the two never drift.
+    const toolStateRef = useRef(undefined);
+    const updateToolState = (next) => {
+        toolStateRef.current = next;
+        setToolState(next);
+    };
     const [previewPatch, setPreviewPatch] = useState(null);
     const undoStackRef = useRef([]);
     const redoStackRef = useRef([]);
@@ -317,17 +329,22 @@ export const useAnnotationCanvasState = (props) => {
             return;
         prev.onDeactivate?.(ctxRef.current);
         activePointerIdRef.current = null;
-        setToolState(undefined);
+        updateToolState(undefined);
         setPreviewPatch(null);
+        // updateToolState is a stable-in-effect helper (ref + setState); the
+        // effect only re-runs on a tool identity change.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeTool]);
     const dispatchPointerDown = useCallback((event) => {
         if (!activeTool)
             return;
         activePointerIdRef.current = event.pointerId;
-        const next = activeTool.onPointerDown?.(event, ctx, toolState);
+        const next = activeTool.onPointerDown?.(event, ctx, toolStateRef.current);
         if (next !== undefined)
-            setToolState(next);
-    }, [activeTool, ctx, toolState]);
+            updateToolState(next);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [activeTool, ctx]);
     const dispatchPointerMove = useCallback((event) => {
         if (!activeTool)
             return;
@@ -335,10 +352,12 @@ export const useAnnotationCanvasState = (props) => {
             event.pointerId !== activePointerIdRef.current) {
             return;
         }
-        const next = activeTool.onPointerMove?.(event, ctx, toolState);
+        const next = activeTool.onPointerMove?.(event, ctx, toolStateRef.current);
         if (next !== undefined)
-            setToolState(next);
-    }, [activeTool, ctx, toolState]);
+            updateToolState(next);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [activeTool, ctx]);
     const dispatchPointerUp = useCallback((event) => {
         if (!activeTool)
             return;
@@ -346,10 +365,12 @@ export const useAnnotationCanvasState = (props) => {
             event.pointerId !== activePointerIdRef.current) {
             return;
         }
-        activeTool.onPointerUp?.(event, ctx, toolState);
+        activeTool.onPointerUp?.(event, ctx, toolStateRef.current);
         activePointerIdRef.current = null;
-        setToolState(undefined);
-    }, [activeTool, ctx, toolState]);
+        updateToolState(undefined);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [activeTool, ctx]);
     const dispatchLongPress = useCallback((event) => {
         if (!activeTool)
             return;
@@ -364,11 +385,13 @@ export const useAnnotationCanvasState = (props) => {
         // vertices visible across an interrupting two-finger pan) wins over the
         // clear instead of being clobbered by it.
         activePointerIdRef.current = null;
-        setToolState(undefined);
+        const prevToolState = toolStateRef.current;
+        updateToolState(undefined);
         setPreviewPatch(null);
         if (activeTool)
-            activeTool.onCancel?.(toolState, ctx);
-    }, [activeTool, ctx, toolState]);
+            activeTool.onCancel?.(prevToolState, ctx);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeTool, ctx]);
     const pan = useCallback((deltaScreen) => {
         setViewport((v) => panBy(v, deltaScreen));
     }, []);
@@ -772,6 +795,10 @@ export const useAnnotationCanvasState = (props) => {
                 // Build one remove op per selected element, dispatched by which
                 // collection owns the id. A single multi-op commit makes the whole
                 // deletion one undo step (inverse re-adds each element).
+                // Plane DIMENSION tiles (planeEdge) are exempt: they are the
+                // calibration's entry affordances and live and die with it
+                // (removePlane / the plane tool's replace flow) — their value is
+                // replaced by re-entering it, never by deleting the tile.
                 const ops = [
                     ...doc.strokes
                         .filter((s) => idSet.has(s.id))
@@ -780,7 +807,7 @@ export const useAnnotationCanvasState = (props) => {
                         .filter((s) => idSet.has(s.id))
                         .map((s) => ({ op: 'removeShape', id: s.id })),
                     ...doc.placedMeasurements
-                        .filter((m) => idSet.has(m.id))
+                        .filter((m) => idSet.has(m.id) && !m.planeEdge)
                         .map((m) => ({ op: 'removeMeasurement', id: m.id })),
                 ];
                 if (ops.length === 0)

package/package.json

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