@reekon-tools/boldr-utils 1.6.12 → 1.6.14

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skia, useFont } from '@shopify/react-native-skia';
-import { useEffect, useMemo, useRef, useState, } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { StyleSheet, TouchableOpacity, View, } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useDerivedValue, useSharedValue, } from 'react-native-reanimated';
+import Animated, { runOnJS, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, } from 'react-native-reanimated';
 import { STAMP_TILE_SIZE } from './stampLayout.js';
 import { DEFAULT_LAYER_ID, } from '../../types/annotation.js';
 import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
-import { buildRemoveMeasurementOps } from './measurementGeometry.js';
+import { buildRemoveMeasurementOps, } from './measurementGeometry.js';
+import { buildShapeFromDrag } from './tools/shapeTool.js';
 import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
 let strokeCounter = 0;
 const makeStrokeId = () => `stroke-${Date.now().toString(36)}-${(strokeCounter++).toString(36)}`;
@@ -53,19 +54,19 @@ export const AnnotationCanvasInner = (props) => {
     // path off it. React state is untouched until the stroke commits on
     // pointer-up — so high-frequency drawing never hits the JS thread.
     const livePoints = useSharedValue([]);
-    // Set on a successful stroke end so onFinalize doesn't clear the live path
-    // out from under the (async) commit — the committed stroke replaces it once
-    // it lands in React state. Cleared paths only flicker if there's a gap, so
-    // we keep the live path until commit, and only onFinalize-clear on cancel.
-    const drawCommitted = useSharedValue(false);
-    // Id of a just-committed stroke whose live preview is still showing. We hold
-    // the preview until that stroke is actually present in `effectiveCanvas`
-    // (i.e. rendered + painted), THEN clear it — so the preview and the committed
-    // <StrokeElement> overlap for one frame instead of leaving a gap. Clearing
-    // synchronously in the commit callback would race the (async) React re-render
-    // and erase the preview a frame or two before the committed stroke paints,
-    // which reads as a flash on release. See the clear-on-paint effect below.
-    const [pendingClearStrokeId, setPendingClearStrokeId] = useState(null);
+    // Finished strokes handed off from `livePoints` but not yet confirmed
+    // painted by React. The draw gesture's onEnd moves the live buffer here IN
+    // THE SAME WORKLET TICK (before the commit hops to JS), so a new stroke's
+    // onBegin can repurpose `livePoints` without ever erasing ink whose
+    // committed <StrokeElement> hasn't rendered yet — the gap that used to read
+    // as the previous line flickering when the JS thread was busy. Entries are
+    // removed (on the UI thread, to never race a concurrent onEnd append) once
+    // their stroke is present in `effectiveCanvas`, by the paint-watch effect
+    // below. A list, not a single slot: several quick strokes can be awaiting
+    // paint at once while JS catches up.
+    const handoffStrokes = useSharedValue([]);
+    // JS mirror of the handoff ids whose commits we're waiting to see painted.
+    const [pendingPaintIds, setPendingPaintIds] = useState([]);
     const livePath = useDerivedValue(() => {
         'worklet';
         const pts = livePoints.value;
@@ -78,26 +79,209 @@ export const AnnotationCanvasInner = (props) => {
         }
         return path;
     });
-    // Clear the freehand preview only once the committed stroke is present in the
-    // canvas (this effect runs after that render has painted), so the preview and
-    // the real <StrokeElement> overlap for a frame rather than leaving a gap —
-    // killing the flash that a synchronous clear caused on release.
+    // Each handed-off stroke renders as its OWN <Path> (a fixed pool of slots,
+    // since hooks can't be dynamic): merging them into one path would rasterize
+    // overlaps as single coverage, which visibly under-darkens translucent
+    // variants (highlighter) relative to their committed per-stroke draws. The
+    // last slot absorbs any overflow — 4+ strokes awaiting paint means a
+    // pathological JS stall, where a transient alpha artifact in the overflow
+    // is acceptable. Slots use the CURRENT freehand paint; entries normally
+    // release within a render, long before a human could restyle the pen.
+    const useHandoffSlotPath = (slot, isLast) => useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        const entries = handoffStrokes.value;
+        const addPolyline = (pts) => {
+            if (pts.length < 2)
+                return;
+            path.moveTo(pts[0], pts[1]);
+            for (let i = 2; i < pts.length; i += 2) {
+                path.lineTo(pts[i], pts[i + 1]);
+            }
+        };
+        if (isLast) {
+            for (let i = slot; i < entries.length; i++) {
+                addPolyline(entries[i].points);
+            }
+        }
+        else if (entries[slot]) {
+            addPolyline(entries[slot].points);
+        }
+        return path;
+    });
+    const handoffPath0 = useHandoffSlotPath(0, false);
+    const handoffPath1 = useHandoffSlotPath(1, false);
+    const handoffPath2 = useHandoffSlotPath(2, false);
+    const handoffPath3 = useHandoffSlotPath(3, true);
+    // Drop handed-off strokes by id, on the UI thread: onEnd appends to
+    // `handoffStrokes` from a worklet, so a read-filter-write from the JS thread
+    // could interleave with an append and lose the newer stroke. Running the
+    // whole filter as one worklet keeps it serialized with the appends.
+    const removeHandoffStrokes = useCallback((ids) => {
+        runOnUI((toRemove) => {
+            'worklet';
+            handoffStrokes.value = handoffStrokes.value.filter((s) => toRemove.indexOf(s.id) === -1);
+        })(ids);
+    }, [handoffStrokes]);
+    // Release each handed-off stroke only once its committed twin is present in
+    // the canvas, and one frame LATER, not in this effect body. RN Skia's sksg
+    // renderer re-records the scene and dispatches the first draw containing
+    // the committed stroke in a MICROTASK after the Canvas's layout effect
+    // (SkiaSGRoot.render is async) — while a shared-value write here goes to
+    // the UI runtime immediately. If the write wins, the still-active mapper
+    // redraws the PREVIOUS picture (no committed stroke) with the handoff
+    // already cleared: the stroke visibly vanishes until the new recording
+    // lands. A rAF callback runs strictly after this task's microtasks, so the
+    // UI queue is guaranteed to receive draw-new-picture before clear-handoff.
+    // The extra frame of preview+committed overlap is invisible at opacity 1
+    // and a one-frame double-blend for translucent variants.
     const placedStrokes = state.effectiveCanvas.strokes;
     useEffect(() => {
-        if (!pendingClearStrokeId)
+        if (pendingPaintIds.length === 0)
             return;
-        if (placedStrokes.some((s) => s.id === pendingClearStrokeId)) {
-            // Guard: only wipe the preview if a NEW stroke hasn't already begun (its
-            // onBegin flips drawCommitted back to false and has already repurposed
-            // livePoints for the new stroke — clearing here would erase it).
-            if (drawCommitted.value)
-                livePoints.value = [];
-            setPendingClearStrokeId(null);
-        }
-    }, [pendingClearStrokeId, placedStrokes, livePoints, drawCommitted]);
+        const painted = pendingPaintIds.filter((id) => placedStrokes.some((s) => s.id === id));
+        if (painted.length === 0)
+            return;
+        const raf = requestAnimationFrame(() => {
+            removeHandoffStrokes(painted);
+            setPendingPaintIds((prev) => prev.filter((id) => !painted.includes(id)));
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [pendingPaintIds, placedStrokes, removeHandoffStrokes]);
     const freehand = state.activeTool?.freehand ?? null;
+    const shapeDraw = state.activeTool?.shapeDraw ?? null;
     const panViewport = !!state.activeTool?.panViewport;
     const dragSelection = state.activeTool?.dragSelection ?? null;
+    // 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
+    // live shape. React is untouched until the single commit on release.
+    const liveShape = useSharedValue({ active: false, ax: 0, ay: 0, bx: 0, by: 0 });
+    // Released shapes awaiting their committed paint — the shape twin of
+    // `handoffStrokes`, with the same lifecycle: appended in the gesture's
+    // onEnd worklet tick, released by the paint-watch effect one rAF after the
+    // committed <ShapeElement> shows up in the effective canvas. Geometry
+    // (kind/cap) rides per entry so a quick sub-tool switch can't morph a
+    // pending shape; paint style comes from the current tool config (entries
+    // release within a render — same accepted caveat as stroke handoffs).
+    const handoffShapes = useSharedValue([]);
+    const [pendingShapePaintIds, setPendingShapePaintIds] = useState([]);
+    // Live mirror of the active shape tool's config for the worklet path
+    // builders (the derived values are created once, so they can't close over
+    // the changing `shapeDraw` prop).
+    const shapeCfg = useSharedValue({ kind: 'line', cap: 'round', width: 2 });
+    useEffect(() => {
+        if (!shapeDraw)
+            return;
+        shapeCfg.value = {
+            kind: shapeDraw.kind,
+            cap: shapeDraw.cap ?? 'round',
+            width: shapeDraw.width,
+        };
+    }, [shapeDraw, shapeCfg]);
+    // Outline of the live rubber-band + every pending handoff shape, as one
+    // stroked path. WORKLET TWIN of shapeGeometry.shapePointsFromDrag +
+    // ShapeElement's per-kind rendering — keep in sync. Merging into one path
+    // is safe here (unlike stroke handoffs): shape outlines draw at opacity 1.
+    const shapeBodyPath = useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        const add = (kind, ax, ay, bx, by) => {
+            const minX = Math.min(ax, bx);
+            const maxX = Math.max(ax, bx);
+            const minY = Math.min(ay, by);
+            const maxY = Math.max(ay, by);
+            if (kind === 'rect') {
+                path.moveTo(minX, minY);
+                path.lineTo(maxX, minY);
+                path.lineTo(maxX, maxY);
+                path.lineTo(minX, maxY);
+                path.close();
+            }
+            else if (kind === 'ellipse') {
+                const r = Math.max(maxX - minX, maxY - minY) / 2;
+                path.addCircle((ax + bx) / 2, (ay + by) / 2, r);
+            }
+            else if (kind === 'triangle') {
+                path.moveTo((minX + maxX) / 2, minY);
+                path.lineTo(maxX, maxY);
+                path.lineTo(minX, maxY);
+                path.close();
+            }
+            else {
+                path.moveTo(ax, ay);
+                path.lineTo(bx, by);
+            }
+        };
+        for (const e of handoffShapes.value) {
+            add(e.kind, e.ax, e.ay, e.bx, e.by);
+        }
+        const s = liveShape.value;
+        if (s.active)
+            add(shapeCfg.value.kind, s.ax, s.ay, s.bx, s.by);
+        return path;
+    });
+    // Filled arrowheads for 'line' shapes drawn with cap === 'arrow' (the body
+    // path is stroked, so heads need their own filled path). WORKLET TWIN of
+    // strokeGeometry.arrowheadTriangle — keep in sync.
+    const shapeHeadPath = useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        const width = shapeCfg.value.width;
+        const addHead = (ax, ay, bx, by) => {
+            const dx = bx - ax;
+            const dy = by - ay;
+            const len = Math.sqrt(dx * dx + dy * dy);
+            if (len < 0.01)
+                return;
+            const ux = dx / len;
+            const uy = dy / len;
+            const px = -uy;
+            const py = ux;
+            const head = Math.max(width * 2, 6);
+            const half = Math.max(width * 0.9, 4);
+            path.moveTo(bx + ux * head, by + uy * head);
+            path.lineTo(bx + px * half, by + py * half);
+            path.lineTo(bx - px * half, by - py * half);
+            path.close();
+        };
+        for (const e of handoffShapes.value) {
+            if (e.kind === 'line' && e.cap === 'arrow') {
+                addHead(e.ax, e.ay, e.bx, e.by);
+            }
+        }
+        const s = liveShape.value;
+        if (s.active &&
+            shapeCfg.value.kind === 'line' &&
+            shapeCfg.value.cap === 'arrow') {
+            addHead(s.ax, s.ay, s.bx, s.by);
+        }
+        return path;
+    });
+    // Shape twin of removeHandoffStrokes — same UI-thread serialization
+    // rationale (onEnd appends from a worklet; filtering must not interleave).
+    const removeHandoffShapes = useCallback((ids) => {
+        runOnUI((toRemove) => {
+            'worklet';
+            handoffShapes.value = handoffShapes.value.filter((s) => toRemove.indexOf(s.id) === -1);
+        })(ids);
+    }, [handoffShapes]);
+    // Shape twin of the stroke paint-watch effect above — release a handed-off
+    // shape one frame AFTER its committed twin appears, for the same
+    // sksg-microtask-vs-shared-value-write race (see that effect's comment).
+    const placedShapes = state.effectiveCanvas.shapes;
+    useEffect(() => {
+        if (pendingShapePaintIds.length === 0)
+            return;
+        const painted = pendingShapePaintIds.filter((id) => placedShapes.some((s) => s.id === id));
+        if (painted.length === 0)
+            return;
+        const raf = requestAnimationFrame(() => {
+            removeHandoffShapes(painted);
+            setPendingShapePaintIds((prev) => prev.filter((id) => !painted.includes(id)));
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [pendingShapePaintIds, placedShapes, removeHandoffShapes]);
     // UI-thread element drag (select tool). `dragX/dragY` is the live world-space
     // translation the gesture worklet writes; `dragTransform` feeds the Skia
     // group around the dragged element. `draggingId` (React state) gates which
@@ -154,6 +338,67 @@ export const AnnotationCanvasInner = (props) => {
         'worklet';
         return HANDLE_RADIUS_PX / zoom.value;
     });
+    // 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
+    // Skia rect + the tile (locked to the live center) are driven on the UI
+    // thread from `dragX`/`dragY`.
+    const [rectDragId, setRectDragId] = useState(null);
+    const rectCtx = useSharedValue({ fx: 0, fy: 0, mx: 0, my: 0 });
+    const rectTargetRef = useRef(null);
+    // Live normalized rect during a corner drag (the grabbed corner follows the
+    // finger, the opposite corner stays put).
+    const liveRectX = useDerivedValue(() => {
+        'worklet';
+        const c = rectCtx.value;
+        return Math.min(c.fx, c.mx + dragX.value);
+    });
+    const liveRectY = useDerivedValue(() => {
+        'worklet';
+        const c = rectCtx.value;
+        return Math.min(c.fy, c.my + dragY.value);
+    });
+    const liveRectW = useDerivedValue(() => {
+        'worklet';
+        const c = rectCtx.value;
+        return Math.abs(c.mx + dragX.value - c.fx);
+    });
+    const liveRectH = useDerivedValue(() => {
+        'worklet';
+        const c = rectCtx.value;
+        return Math.abs(c.my + dragY.value - c.fy);
+    });
+    // Corner-scale resize (text shapes). `resizingId` (React state) gates which
+    // shape gets the live transform; `resizeCtx` carries the pivot (top-left
+    // anchor), the handle's grab-start position and the scale clamps (from
+    // DragSelectionConfig.hitTestResizeHandle) so the preview is a pure
+    // UI-thread scale-about-pivot driven by dragX/dragY. The commit on release
+    // goes through buildResizePatch, which clamps identically.
+    const [resizingId, setResizingId] = useState(null);
+    const resizeCtx = useSharedValue({ px: 0, py: 0, hx: 0, hy: 0, minS: 1, maxS: 1 });
+    const resizeTargetRef = useRef(null);
+    const resizeTransform = useDerivedValue(() => {
+        'worklet';
+        // WORKLET TWIN of textGeometry.resizeScaleFromDrag — keep in sync.
+        const c = resizeCtx.value;
+        const bx = c.hx - c.px;
+        const by = c.hy - c.py;
+        const baseLen = Math.sqrt(bx * bx + by * by);
+        let s = 1;
+        if (baseLen > 0) {
+            const nx = bx + dragX.value;
+            const ny = by + dragY.value;
+            s = Math.sqrt(nx * nx + ny * ny) / baseLen;
+        }
+        s = Math.min(c.maxS, Math.max(c.minS, s));
+        return [
+            { translateX: c.px },
+            { translateY: c.py },
+            { scale: s },
+            { translateX: -c.px },
+            { translateY: -c.py },
+        ];
+    });
     // Per-gesture refs so we always emit a matching down/move/up sequence.
     const pointerIdRef = useRef(1);
     const inFlightRef = useRef(null);
@@ -319,29 +564,30 @@ export const AnnotationCanvasInner = (props) => {
         // hop or React render per sample.
         const buildDrawPan = (fh) => {
             const minDistSq = fh.minSampleDistance * fh.minSampleDistance;
-            const commitFreehand = (worldPoints) => {
+            const commitFreehand = (id, worldPoints) => {
                 // Need at least two distinct samples to make a stroke.
                 if (worldPoints.length >= 4) {
                     const st = stateRef.current;
                     const stroke = {
-                        id: makeStrokeId(),
+                        id,
                         layerId: st.ctx.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
                         tool: fh.variant,
                         color: fh.color,
                         width: fh.width,
                         cap: fh.cap ?? 'round',
+                        ...(fh.dash && { dash: true }),
                         points: worldPoints,
                         createdAt: Date.now(),
                     };
                     st.ctx.commit({ ops: [{ op: 'addStroke', stroke }] });
-                    // Keep the live preview up until this stroke actually paints (handled
-                    // by the clear-on-paint effect), so there's never a gap on release.
-                    setPendingClearStrokeId(stroke.id);
+                    // The handed-off preview stays up until this stroke actually paints
+                    // (the paint-watch effect releases it), so there's no gap on release.
+                    setPendingPaintIds((prev) => [...prev, id]);
                 }
                 else {
-                    // Nothing committed (too few samples) — no stroke to wait for, so drop
-                    // the stray preview immediately.
-                    livePoints.value = [];
+                    // Nothing committed (too few samples) — no paint to wait for, so
+                    // drop the handed-off entry now.
+                    removeHandoffStrokes([id]);
                 }
             };
             return Gesture.Pan()
@@ -349,9 +595,9 @@ export const AnnotationCanvasInner = (props) => {
                 .maxPointers(1)
                 .onBegin((e) => {
                 'worklet';
-                drawCommitted.value = false;
                 // screen → world using the live viewport (single finger, so the
-                // viewport isn't moving here).
+                // viewport isn't moving here). Any previous stroke has already moved
+                // to `handoffStrokes` (see onEnd), so this can't erase its ink.
                 livePoints.value = [
                     e.x / zoom.value + panX.value,
                     e.y / zoom.value + panY.value,
@@ -373,15 +619,112 @@ export const AnnotationCanvasInner = (props) => {
             })
                 .onEnd(() => {
                 'worklet';
-                drawCommitted.value = true;
-                runOnJS(commitFreehand)([...livePoints.value]);
+                const pts = livePoints.value;
+                if (pts.length < 2) {
+                    livePoints.value = [];
+                    return;
+                }
+                // Hand the finished stroke off in THIS worklet tick: both shared
+                // values feed the same merged livePath, so the swap renders
+                // atomically (no flicker), and the buffer is free for the next
+                // stroke before the commit ever reaches the JS thread. The id is
+                // minted here so the committed stroke and its handed-off preview
+                // can be matched up by the paint-watch effect.
+                const id = `stroke-${Date.now().toString(36)}-${Math.floor(Math.random() * 0x100000000).toString(36)}`;
+                handoffStrokes.value = [...handoffStrokes.value, { id, points: pts }];
+                livePoints.value = [];
+                runOnJS(commitFreehand)(id, pts);
             })
                 .onFinalize(() => {
                 'worklet';
-                // Only clear here on cancel (no onEnd). On success, commitFreehand
-                // clears once the stroke is committed, avoiding a flicker.
-                if (!drawCommitted.value)
-                    livePoints.value = [];
+                // Cancel path (no onEnd): drop the in-flight preview. After a normal
+                // end the buffer is already empty, so this is a no-op.
+                livePoints.value = [];
+            });
+        };
+        // Shape rubber-band (line/arrow/rect/triangle/circle tools) — one finger,
+        // UI thread. The drag worklet tracks start/current world points in
+        // `liveShape` (the derived paths above render it live) and commits the
+        // AnnotationShape once, on release, through the same handoff/paint-watch
+        // dance as freehand strokes so the preview can't clear before the
+        // committed shape's first paint.
+        const buildShapeDrawPan = (cfg) => {
+            const minDragSq = 4 * 4; // screen px² — mirrors shapeTool's minDragPx
+            const commitShape = (id, a, b) => {
+                const st = stateRef.current;
+                const shape = buildShapeFromDrag({
+                    kind: cfg.kind,
+                    a,
+                    b,
+                    color: cfg.color,
+                    width: cfg.width,
+                    cap: cfg.cap,
+                    dash: cfg.dash,
+                    layerId: st.ctx.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
+                    id,
+                });
+                st.ctx.commit({ ops: [{ op: 'addShape', shape }] });
+                setPendingShapePaintIds((prev) => [...prev, id]);
+            };
+            return Gesture.Pan()
+                .minPointers(1)
+                .maxPointers(1)
+                .onBegin((e) => {
+                'worklet';
+                const wx = e.x / zoom.value + panX.value;
+                const wy = e.y / zoom.value + panY.value;
+                liveShape.value = { active: true, ax: wx, ay: wy, bx: wx, by: wy };
+            })
+                .onChange((e) => {
+                'worklet';
+                const s = liveShape.value;
+                if (!s.active)
+                    return;
+                liveShape.value = {
+                    active: true,
+                    ax: s.ax,
+                    ay: s.ay,
+                    bx: e.x / zoom.value + panX.value,
+                    by: e.y / zoom.value + panY.value,
+                };
+            })
+                .onEnd(() => {
+                'worklet';
+                const s = liveShape.value;
+                if (!s.active)
+                    return;
+                // Sub-threshold drags are accidental taps — drop them. (A clean tap
+                // normally wins the gesture race and never gets here anyway.)
+                const dxPx = (s.bx - s.ax) * zoom.value;
+                const dyPx = (s.by - s.ay) * zoom.value;
+                if (dxPx * dxPx + dyPx * dyPx < minDragSq) {
+                    liveShape.value = { active: false, ax: 0, ay: 0, bx: 0, by: 0 };
+                    return;
+                }
+                // Hand off in THIS worklet tick (see the stroke onEnd): the live
+                // slot frees atomically with the handoff append, so the preview
+                // never gaps while the commit crosses to the JS thread.
+                const id = `shape-${Date.now().toString(36)}-${Math.floor(Math.random() * 0x100000000).toString(36)}`;
+                handoffShapes.value = [
+                    ...handoffShapes.value,
+                    {
+                        id,
+                        kind: cfg.kind,
+                        cap: cfg.cap ?? 'round',
+                        ax: s.ax,
+                        ay: s.ay,
+                        bx: s.bx,
+                        by: s.by,
+                    },
+                ];
+                liveShape.value = { active: false, ax: 0, ay: 0, bx: 0, by: 0 };
+                runOnJS(commitShape)(id, { x: s.ax, y: s.ay }, { x: s.bx, y: s.by });
+            })
+                .onFinalize(() => {
+                'worklet';
+                // Cancel path (no onEnd): drop the in-flight rubber-band. After a
+                // normal end the slot is already inactive, so this is a no-op.
+                liveShape.value = { active: false, ax: 0, ay: 0, bx: 0, by: 0 };
             });
         };
         // Element drag (select tool) — one finger, UI thread. Hit-tests on the JS
@@ -415,6 +758,34 @@ export const AnnotationCanvasInner = (props) => {
                             return;
                         }
                     }
+                    // Corner resize handle (text shapes) — also selected-element-only.
+                    const resizeGeom = cfg.hitTestResizeHandle?.(st.ctx.document, selId, world, zoomNow);
+                    if (resizeGeom) {
+                        resizeCtx.value = {
+                            px: resizeGeom.pivot.x,
+                            py: resizeGeom.pivot.y,
+                            hx: resizeGeom.handle.x,
+                            hy: resizeGeom.handle.y,
+                            minS: resizeGeom.minScale,
+                            maxS: resizeGeom.maxScale,
+                        };
+                        resizeTargetRef.current = { id: selId };
+                        setResizingId(selId);
+                        return;
+                    }
+                    // Rectangle-annotation corner handle — also selected-element-only.
+                    const rectCornerHit = cfg.hitTestRectCorner?.(st.ctx.document, selId, world, zoomNow);
+                    if (rectCornerHit) {
+                        rectCtx.value = {
+                            fx: rectCornerHit.fixed.x,
+                            fy: rectCornerHit.fixed.y,
+                            mx: rectCornerHit.moving.x,
+                            my: rectCornerHit.moving.y,
+                        };
+                        rectTargetRef.current = { id: selId, corner: rectCornerHit.corner };
+                        setRectDragId(selId);
+                        return;
+                    }
                 }
                 const hit = cfg.hitTest(st.ctx.document, world, zoomNow);
                 if (!hit) {
@@ -447,6 +818,35 @@ export const AnnotationCanvasInner = (props) => {
             };
             const endSelectDrag = (dx, dy) => {
                 const st = stateRef.current;
+                // Resize commit: scale the shape by the final drag (clamped in
+                // buildResizePatch exactly like the live preview).
+                const rT = resizeTargetRef.current;
+                if (rT) {
+                    if (dx !== 0 || dy !== 0) {
+                        const patch = cfg.buildResizePatch?.(st.ctx.document, rT.id, {
+                            x: dx,
+                            y: dy,
+                        });
+                        if (patch)
+                            st.ctx.commit(patch);
+                    }
+                    resizeTargetRef.current = null;
+                    setResizingId(null);
+                    return;
+                }
+                // Rect-corner commit: drag the grabbed corner by the world delta
+                // (opposite corner fixed); anchor re-centers in the same patch.
+                const rectT = rectTargetRef.current;
+                if (rectT) {
+                    if (dx !== 0 || dy !== 0) {
+                        const patch = cfg.buildRectCornerPatch?.(st.ctx.document, rectT.id, rectT.corner, { x: dx, y: dy });
+                        if (patch)
+                            st.ctx.commit(patch);
+                    }
+                    rectTargetRef.current = null;
+                    setRectDragId(null);
+                    return;
+                }
                 // Endpoint commit: move the grabbed endpoint by the world delta.
                 const epT = epTargetRef.current;
                 if (epT) {
@@ -487,13 +887,17 @@ export const AnnotationCanvasInner = (props) => {
                 setDraggingId(null);
             };
             const cancelSelectDrag = () => {
-                // No commit — dropping draggingId/slidingId/epDragId snaps everything back.
+                // No commit — dropping the gating ids snaps everything back.
                 dragTargetRef.current = null;
                 slideTargetRef.current = null;
                 epTargetRef.current = null;
+                resizeTargetRef.current = null;
+                rectTargetRef.current = null;
                 setDraggingId(null);
                 setSlidingId(null);
                 setEpDragId(null);
+                setResizingId(null);
+                setRectDragId(null);
             };
             return Gesture.Pan()
                 .minPointers(1)
@@ -530,16 +934,19 @@ export const AnnotationCanvasInner = (props) => {
         };
         // 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 → pan the viewport on the UI thread (live, no JS round-trip)
         //  - select → drag the hit element on the UI thread
         //  - everything else → dispatch pointer events on the JS thread
         const oneFinger = freehand
             ? buildDrawPan(freehand)
-            : panViewport
-                ? buildViewportPan(1, 1)
-                : dragSelection
-                    ? buildSelectDragPan(dragSelection)
-                    : toolPan;
+            : shapeDraw
+                ? buildShapeDrawPan(shapeDraw)
+                : panViewport
+                    ? buildViewportPan(1, 1)
+                    : dragSelection
+                        ? buildSelectDragPan(dragSelection)
+                        : toolPan;
         return Gesture.Race(tap, Gesture.Simultaneous(viewportPan, pinch), oneFinger);
     }, [
         zoom,
@@ -547,7 +954,12 @@ export const AnnotationCanvasInner = (props) => {
         panY,
         pinchStartZoom,
         livePoints,
+        handoffStrokes,
+        removeHandoffStrokes,
+        liveShape,
+        handoffShapes,
         freehand,
+        shapeDraw,
         panViewport,
         dragSelection,
         dragX,
@@ -555,10 +967,12 @@ export const AnnotationCanvasInner = (props) => {
         dragEnded,
         slideCtx,
         epCtx,
+        resizeCtx,
+        rectCtx,
     ]);
     const activeTool = props.tools.find((t) => t.id === props.activeToolId) ?? null;
     const customPreview = activeTool?.renderPreview?.(state.customPreviewState, state.ctx);
-    const { renderMeasurementStamp, selection } = props;
+    const { renderMeasurementStamp, onMeasurementStampPress, onMeasurementStampLongPress, 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,
@@ -572,30 +986,64 @@ export const AnnotationCanvasInner = (props) => {
                         livePreview: freehand
                             ? {
                                 path: livePath,
+                                handoffPaths: [
+                                    handoffPath0,
+                                    handoffPath1,
+                                    handoffPath2,
+                                    handoffPath3,
+                                ],
                                 color: freehand.color,
                                 width: freehand.width,
                                 cap: freehand.cap ?? 'round',
+                                dash: freehand.dash ?? false,
                                 opacity: freehand.variant === 'highlighter' ? 0.3 : 1,
                             }
                             : null,
+                        // UI-thread shape rubber-band (live + pending handoffs) — only
+                        // while a shape tool is active (handoffs always release within a
+                        // frame or two of the commit, before the tool can change).
+                        shapePreview: shapeDraw
+                            ? {
+                                path: shapeBodyPath,
+                                headPath: shapeHeadPath,
+                                color: shapeDraw.color,
+                                width: shapeDraw.width,
+                                cap: shapeDraw.cap ?? 'round',
+                                dash: shapeDraw.dash ?? false,
+                            }
+                            : null,
                         draggingId,
                         dragTransform,
+                        resizingId,
+                        resizeTransform,
                         selectedId: selection?.ids[0] ?? null,
                         endpointDragId: epDragId,
                         liveLineP1,
                         liveLineP2,
-                        handleRadius,
+                        rectDragId,
+                        liveRect: {
+                            x: liveRectX,
+                            y: liveRectY,
+                            width: liveRectW,
+                            height: liveRectH,
+                        },
+                        // Endpoint/corner handles are drag affordances — only the select
+                        // tool can act on them, so suppress them when the active tool has
+                        // no drag support (e.g. view mode's pan tool, where a selected
+                        // measurement still shows its tile chrome but must not advertise
+                        // draggability).
+                        handleRadius: activeTool?.dragSelection ? handleRadius : undefined,
                         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, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, renderMeasurementStamp: renderMeasurementStamp, onRemove: () => {
+                        ? (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, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, onRemove: () => {
                         const { ops, keepSelection } = buildRemoveMeasurementOps(placed);
                         state.ctx.commit({ ops });
                         if (!keepSelection)
                             state.ctx.setSelection(null);
                     } }, placed.id))) }))] }));
 };
-const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, renderMeasurementStamp, onRemove, }) => {
+const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, onStampPress, onStampLongPress, onRemove, }) => {
     const size = STAMP_TILE_SIZE * (placed.scale ?? 1);
     const half = size / 2;
     const anchorX = placed.anchor.x;
@@ -639,6 +1087,13 @@ const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging,
             worldX = ax + (bx - ax) * c.t0;
             worldY = ay + (by - ay) * c.t0;
         }
+        else if (rectResizing) {
+            // Tile stays at the LIVE rect's center: midpoint of the fixed corner
+            // and the grabbed corner with the drag delta folded in.
+            const c = rectCtx.value;
+            worldX = (c.fx + c.mx + dragX.value) / 2;
+            worldY = (c.fy + c.my + dragY.value) / 2;
+        }
         else if (dragging) {
             worldX = anchorX + dragX.value;
             worldY = anchorY + dragY.value;
@@ -658,7 +1113,7 @@ const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging,
                     selected,
                     size,
                     zoom: zoomSnapshot,
-                }) }), 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", hitSlop: 10, onPress: onRemove, style: {
                     position: 'absolute',
                     top: -8,
                     right: -8,