@reekon-tools/boldr-utils 1.6.12 → 1.6.14

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

@@ -1,5 +1,7 @@
 import { STAMP_TILE_SIZE } from '../stampLayout.js';
-import { placementOf, linePosOf, snapLinePos, lerp, recomputeAnchor, } from '../measurementGeometry.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';
 const HIT_PADDING = 6;
 // Hit-test in doc-space. Crude but fast — good enough for v1; tools can
 // override via `hitTest` for more precision later.
@@ -13,9 +15,9 @@ const hitStroke = (stroke, p) => {
     }
     return false;
 };
-// Screen-space grab tolerance (px) for a measurement-annotation line, converted
-// to doc space via zoom (the line itself is a thin world-space stroke).
-const LINE_GRAB_PX = 12;
+// 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;
 // 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.
@@ -23,27 +25,6 @@ const SLIDE_SNAP_PX = 12;
 // Screen-px grab radius for a line-annotation endpoint handle (converted to doc
 // space via zoom). A bit larger than the drawn handle so it's easy to grab.
 const HANDLE_GRAB_PX = 22;
-const hitMeasurement = (m, p, zoom = 1) => {
-    // The stamp renders as a constant *screen*-size square centered on the
-    // anchor, so its doc-space footprint shrinks as you zoom in. Convert the
-    // screen-space half-extent (+ padding) back to doc space via the zoom so
-    // the hit box always matches what's drawn.
-    const scale = m.scale ?? 1;
-    const half = ((STAMP_TILE_SIZE * scale) / 2 + HIT_PADDING) / zoom;
-    const dx = Math.abs(p.x - m.anchor.x);
-    const dy = Math.abs(p.y - m.anchor.y);
-    if (dx <= half && dy <= half)
-        return true;
-    // Measurement annotation: also grab anywhere along the line body.
-    if (m.line) {
-        const r = LINE_GRAB_PX / zoom;
-        if (segmentDistanceSq(p.x, p.y, m.line.a.x, m.line.a.y, m.line.b.x, m.line.b.y) <=
-            r * r) {
-            return true;
-        }
-    }
-    return false;
-};
 const segmentDistanceSq = (px, py, ax, ay, bx, by) => {
     const abx = bx - ax;
     const aby = by - ay;
@@ -60,34 +41,32 @@ const findHit = (doc, world, zoom) => {
     // Hit-test in z-order (top first): measurements > shapes > strokes.
     for (let i = doc.placedMeasurements.length - 1; i >= 0; i--) {
         const m = doc.placedMeasurements[i];
-        if (hitMeasurement(m, world, zoom))
+        if (hitPlacedMeasurement(m, world, zoom)) {
             return { id: m.id, kind: 'measurement' };
+        }
     }
     for (let i = doc.shapes.length - 1; i >= 0; i--) {
-        // Default shape hit test: bounding box of the shape's points + padding.
         const s = doc.shapes[i];
-        const pts = s.geometry.points;
-        if (pts.length === 0)
+        if (s.kind === 'text') {
+            // Text shapes store only their top-left anchor, so their hit box comes
+            // from the estimated text bounds.
+            const b = textShapeBounds(s);
+            if (!b)
+                continue;
+            if (world.x >= b.minX - HIT_PADDING &&
+                world.x <= b.maxX + HIT_PADDING &&
+                world.y >= b.minY - HIT_PADDING &&
+                world.y <= b.maxY + HIT_PADDING) {
+                return { id: s.id, kind: 'shape' };
+            }
             continue;
-        let minX = pts[0].x;
-        let maxX = pts[0].x;
-        let minY = pts[0].y;
-        let maxY = pts[0].y;
-        for (let j = 1; j < pts.length; j++) {
-            const p = pts[j];
-            if (p.x < minX)
-                minX = p.x;
-            if (p.x > maxX)
-                maxX = p.x;
-            if (p.y < minY)
-                minY = p.y;
-            if (p.y > maxY)
-                maxY = p.y;
         }
-        if (world.x >= minX - HIT_PADDING &&
-            world.x <= maxX + HIT_PADDING &&
-            world.y >= minY - HIT_PADDING &&
-            world.y <= maxY + HIT_PADDING) {
+        // Geometric shapes hit on their painted outline, not their bounding box —
+        // a long diagonal line's box would swallow taps nowhere near the ink, and
+        // a shape's interior stays transparent to hits so elements inside remain
+        // selectable. Grab radius = half the stroke + a screen-constant pad.
+        const tol = (s.style.strokeWidth ?? 2) / 2 + SHAPE_GRAB_PX / zoom;
+        if (hitShapeOutline(s, world, tol)) {
             return { id: s.id, kind: 'shape' };
         }
     }
@@ -111,6 +90,8 @@ const translatePatch = (elementKind, id, doc, delta) => {
         const patch = { anchor: tx(m.anchor) };
         if (m.line)
             patch.line = { a: tx(m.line.a), b: tx(m.line.b) };
+        if (m.rect)
+            patch.rect = { a: tx(m.rect.a), b: tx(m.rect.b) };
         if (m.leader)
             patch.leader = { from: tx(m.leader.from), to: tx(m.leader.to) };
         return { op: 'updateMeasurement', id, patch };
@@ -174,7 +155,9 @@ const slidePatch = (doc, id, delta, zoom) => {
     const snapT = SLIDE_SNAP_PX / zoom / Math.sqrt(lenSq);
     t = snapLinePos(t, snapT);
     const anchor = lerp(m.line.a, m.line.b, t);
-    return { ops: [{ op: 'updateMeasurement', id, patch: { linePos: t, anchor } }] };
+    return {
+        ops: [{ op: 'updateMeasurement', id, patch: { linePos: t, anchor } }],
+    };
 };
 // Which endpoint handle of a (selected) line annotation is under `world`.
 // Prefers the nearer endpoint when both are within range.
@@ -207,6 +190,85 @@ const endpointPatch = (doc, id, handle, delta) => {
     const anchor = recomputeAnchor(line, 'line', linePosOf(m), m.anchor);
     return { ops: [{ op: 'updateMeasurement', id, patch: { line, anchor } }] };
 };
+// Which corner handle of a (selected) rectangle annotation is under `world`.
+// Prefers the nearest corner when several are within range (small rects).
+const findRectCornerHit = (doc, id, world, zoom) => {
+    const m = doc.placedMeasurements.find((x) => x.id === id);
+    if (!m || !m.rect || placementOf(m) !== 'rectangle')
+        return null;
+    const r2 = (HANDLE_GRAB_PX / zoom) ** 2;
+    let best = null;
+    for (const corner of ['tl', 'tr', 'bl', 'br']) {
+        const p = rectCornerPoint(m.rect, corner);
+        const d = (world.x - p.x) ** 2 + (world.y - p.y) ** 2;
+        if (d <= r2 && (!best || d < best.d))
+            best = { corner, d };
+    }
+    if (!best)
+        return null;
+    return {
+        corner: best.corner,
+        moving: rectCornerPoint(m.rect, best.corner),
+        fixed: rectCornerPoint(m.rect, oppositeRectCorner(best.corner)),
+    };
+};
+// Drag one rect corner by a world delta (opposite corner fixed) and re-center
+// the anchor, keeping the tile locked to the rect's center.
+const rectCornerPatch = (doc, id, corner, delta) => {
+    const m = doc.placedMeasurements.find((x) => x.id === id);
+    if (!m || !m.rect || placementOf(m) !== 'rectangle')
+        return null;
+    const moving = rectCornerPoint(m.rect, corner);
+    const rect = {
+        a: rectCornerPoint(m.rect, oppositeRectCorner(corner)),
+        b: { x: moving.x + delta.x, y: moving.y + delta.y },
+    };
+    return {
+        ops: [
+            {
+                op: 'updateMeasurement',
+                id,
+                patch: { rect, anchor: rectCenter(rect) },
+            },
+        ],
+    };
+};
+// --- Text-shape resize (corner-scale about the top-left anchor; shared by the
+// native UI-thread drag via DragSelectionConfig AND the web pointer handlers) ---
+// Resize geometry when the (selected) text shape's corner handle is under
+// `world`, else null. The handle is drawn on the padded selection box's
+// bottom-right corner (see AnnotationCanvasSkia); grab radius matches the
+// measurement endpoint handles.
+const findResizeHandleHit = (doc, id, world, zoom) => {
+    const s = doc.shapes.find((x) => x.id === id);
+    if (!s)
+        return null;
+    const geom = textResizeGeometry(s);
+    if (!geom)
+        return null;
+    const r2 = (HANDLE_GRAB_PX / zoom) ** 2;
+    const dx = world.x - geom.handle.x;
+    const dy = world.y - geom.handle.y;
+    return dx * dx + dy * dy <= r2 ? geom : null;
+};
+// Scale the text shape's fontSize by the drag (clamped to the geometry's
+// scale range, so it matches the native live preview exactly). The anchor —
+// the scale pivot — is untouched.
+const resizePatch = (doc, id, delta) => {
+    const s = doc.shapes.find((x) => x.id === id);
+    if (!s)
+        return null;
+    const geom = textResizeGeometry(s);
+    if (!geom)
+        return null;
+    const scale = resizeScaleFromDrag(geom, delta);
+    const fontSize = Math.round((s.style.fontSize ?? DEFAULT_TEXT_FONT_SIZE) * scale * 10) / 10;
+    return {
+        ops: [
+            { op: 'updateShape', id, patch: { style: { ...s.style, fontSize } } },
+        ],
+    };
+};
 // Patch for the current drag mode (web pointer path), from a world-space delta.
 const dragPatch = (s, doc, delta, zoom) => {
     if (s.mode === 'endpoint' && s.handle) {
@@ -214,6 +276,11 @@ const dragPatch = (s, doc, delta, zoom) => {
     }
     if (s.mode === 'slide')
         return slidePatch(doc, s.id, delta, zoom);
+    if (s.mode === 'resize')
+        return resizePatch(doc, s.id, delta);
+    if (s.mode === 'rect-corner' && s.corner) {
+        return rectCornerPatch(doc, s.id, s.corner, delta);
+    }
     const op = translatePatch(s.elementKind, s.id, doc, delta);
     return op ? { ops: [op] } : null;
 };
@@ -234,6 +301,10 @@ export const createSelectTool = () => ({
         buildSlidePatch: slidePatch,
         hitTestHandle: findHandleHit,
         buildEndpointPatch: endpointPatch,
+        hitTestResizeHandle: findResizeHandleHit,
+        buildResizePatch: resizePatch,
+        hitTestRectCorner: findRectCornerHit,
+        buildRectCornerPatch: rectCornerPatch,
     },
     // Web pointer path. Mirrors the native UI-thread drag using the same shared
     // helpers: an endpoint handle on the selected annotation resizes the line;
@@ -241,7 +312,7 @@ export const createSelectTool = () => ({
     onPointerDown(event, ctx) {
         const { world } = event;
         const zoom = ctx.viewport.state.zoom;
-        // Endpoint handles show only on the selected annotation — check first.
+        // Endpoint/resize handles show only on the selected element — check first.
         const selId = ctx.selection?.ids[0];
         if (selId) {
             const handle = findHandleHit(ctx.document, selId, world, zoom);
@@ -257,6 +328,29 @@ export const createSelectTool = () => ({
                     delta: { x: 0, y: 0 },
                 };
             }
+            if (findResizeHandleHit(ctx.document, selId, world, zoom)) {
+                return {
+                    kind: 'dragging',
+                    id: selId,
+                    elementKind: 'shape',
+                    mode: 'resize',
+                    start: world,
+                    delta: { x: 0, y: 0 },
+                };
+            }
+            const rectCorner = findRectCornerHit(ctx.document, selId, world, zoom);
+            if (rectCorner) {
+                ctx.setSelection({ ids: [selId] });
+                return {
+                    kind: 'dragging',
+                    id: selId,
+                    elementKind: 'measurement',
+                    mode: 'rect-corner',
+                    corner: rectCorner.corner,
+                    start: world,
+                    delta: { x: 0, y: 0 },
+                };
+            }
         }
         const hit = findHit(ctx.document, world, zoom);
         if (!hit) {
@@ -281,7 +375,10 @@ export const createSelectTool = () => ({
         const s = state;
         if (s?.kind !== 'dragging')
             return s;
-        const delta = { x: event.world.x - s.start.x, y: event.world.y - s.start.y };
+        const delta = {
+            x: event.world.x - s.start.x,
+            y: event.world.y - s.start.y,
+        };
         const patch = dragPatch(s, ctx.document, delta, ctx.viewport.state.zoom);
         if (patch)
             ctx.preview(patch);
@@ -302,7 +399,7 @@ export const createSelectTool = () => ({
     },
     hitTest(element, p) {
         if (element.kind === 'measurement')
-            return hitMeasurement(element, p);
+            return hitPlacedMeasurement(element, p);
         if (element.kind === 'stroke')
             return hitStroke(element, p);
         return false;

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

@@ -0,0 +1,25 @@
+import type { AnnotationShape, StrokeCap, Vec2 } from '../../../types/annotation.js';
+import { type ShapeToolKind } from '../shapeGeometry.js';
+import type { Tool } from '../Tool.js';
+export interface ShapeToolOptions {
+    kind?: ShapeToolKind;
+    id?: string;
+    label?: string;
+    color?: string;
+    width?: number;
+    cap?: StrokeCap;
+    dash?: boolean;
+    minDragPx?: number;
+}
+export declare const buildShapeFromDrag: (opts: {
+    kind: ShapeToolKind;
+    a: Vec2;
+    b: Vec2;
+    color: string;
+    width: number;
+    cap?: StrokeCap;
+    dash?: boolean;
+    layerId: string;
+    id?: string;
+}) => AnnotationShape;
+export declare const createShapeTool: (options?: ShapeToolOptions) => Tool;

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

@@ -0,0 +1,111 @@
+import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
+import { annotationKindFor, shapePointsFromDrag, } from '../shapeGeometry.js';
+let counter = 0;
+const makeId = (prefix) => `${prefix}-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+const DEFAULT_LABELS = {
+    line: 'Line',
+    rect: 'Rectangle',
+    triangle: 'Triangle',
+    ellipse: 'Circle',
+};
+// Assemble the committed AnnotationShape for a drag from `a` to `b`. Shared
+// by the web pointer handlers below AND the native UI-thread gesture (which
+// rubber-bands on shared values and calls this once on release) — one source
+// of truth for kind mapping, styling, and the no-undefined-keys rule
+// (Firestore rejects undefined values, so optional style keys are spread in
+// only when set).
+export const buildShapeFromDrag = (opts) => ({
+    id: opts.id ?? makeId('shape'),
+    layerId: opts.layerId,
+    kind: annotationKindFor(opts.kind),
+    geometry: { points: shapePointsFromDrag(opts.kind, opts.a, opts.b) },
+    style: {
+        stroke: opts.color,
+        strokeWidth: opts.width,
+        ...(opts.dash && { dash: true }),
+        // Caps only mean something on an open line; 'round' is the implicit
+        // default so it stays un-persisted.
+        ...(opts.kind === 'line' &&
+            opts.cap &&
+            opts.cap !== 'round' && { cap: opts.cap }),
+    },
+    createdAt: Date.now(),
+});
+const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
+// Drag-to-draw shape tool (line/arrow/rect/triangle/circle). Press-drag
+// rubber-bands the shape from the press point; release commits it as an
+// AnnotationShape. On native the drag runs on the UI thread via the
+// `shapeDraw` config; the pointer handlers below are the web/parity
+// implementation. Skia-free, like every tool factory.
+export const createShapeTool = (options = {}) => {
+    const kind = options.kind ?? 'line';
+    const color = options.color ?? '#111827';
+    const width = options.width ?? 2;
+    const cap = options.cap;
+    const dash = options.dash ?? false;
+    const minDragPx = options.minDragPx ?? 4;
+    return {
+        id: options.id ?? kind,
+        label: options.label ?? DEFAULT_LABELS[kind],
+        cursor: 'crosshair',
+        // Drives UI-thread rubber-banding on native (see ShapeDrawConfig).
+        shapeDraw: { kind, color, width, ...(cap && { cap }), dash },
+        onPointerDown(event, ctx) {
+            return {
+                kind: 'shape-drawing',
+                shape: buildShapeFromDrag({
+                    kind,
+                    a: event.world,
+                    b: event.world,
+                    color,
+                    width,
+                    cap,
+                    dash,
+                    layerId: firstLayerId(ctx.document),
+                }),
+                startWorld: event.world,
+                startScreen: event.screen,
+                moved: false,
+            };
+        },
+        onPointerMove(event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'shape-drawing')
+                return s;
+            const next = {
+                ...s,
+                moved: true,
+                shape: {
+                    ...s.shape,
+                    geometry: {
+                        points: shapePointsFromDrag(kind, s.startWorld, event.world),
+                    },
+                },
+            };
+            ctx.preview({ ops: [{ op: 'addShape', shape: next.shape }] });
+            return next;
+        },
+        onPointerUp(event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'shape-drawing')
+                return;
+            const dx = event.screen.x - s.startScreen.x;
+            const dy = event.screen.y - s.startScreen.y;
+            if (!s.moved || dx * dx + dy * dy < minDragPx * minDragPx) {
+                // Accidental tap — discard the rubber-band, commit nothing.
+                ctx.preview({ ops: [] });
+                return;
+            }
+            const shape = {
+                ...s.shape,
+                geometry: {
+                    points: shapePointsFromDrag(kind, s.startWorld, event.world),
+                },
+            };
+            ctx.commit({ ops: [{ op: 'addShape', shape }] });
+        },
+        onCancel(_state, ctx) {
+            ctx.preview({ ops: [] });
+        },
+    };
+};

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

@@ -0,0 +1,12 @@
+import type { AnnotationShape } from '../../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export interface TextToolOptions {
+    color?: string;
+    fontSize?: number;
+    dash?: boolean;
+    autoSwitchToSelect?: boolean;
+    onPlaced?: (shape: AnnotationShape) => void;
+    onAutoSwitch?: (toToolId: string) => void;
+    selectToolId?: string;
+}
+export declare const createTextTool: (options?: TextToolOptions) => Tool;

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

@@ -0,0 +1,78 @@
+import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
+import { DEFAULT_TEXT_FONT_SIZE, hitTestTextShape } from '../textGeometry.js';
+let counter = 0;
+const makeId = () => `text-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+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
+// text deletes the shape). Both paths leave the shape selected and (by
+// default) switch back to select so it can be dragged/resized immediately —
+// the same flow as the measurement stamp tool. Skia-free, like every tool.
+export const createTextTool = (options = {}) => {
+    const color = options.color ?? '#111827';
+    const fontSize = options.fontSize ?? DEFAULT_TEXT_FONT_SIZE;
+    const dash = options.dash ?? false;
+    const autoSwitchToSelect = options.autoSwitchToSelect ?? true;
+    const selectToolId = options.selectToolId ?? 'select';
+    return {
+        id: 'text',
+        label: 'Text',
+        cursor: 'text',
+        onPointerUp(event, ctx) {
+            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] });
+                    if (autoSwitchToSelect)
+                        options.onAutoSwitch?.(selectToolId);
+                });
+                return;
+            }
+            const anchor = event.world;
+            void ctx.requestTextInput().then((text) => {
+                if (!text)
+                    return;
+                const shape = {
+                    id: makeId(),
+                    layerId: firstLayerId(ctx.document),
+                    kind: 'text',
+                    geometry: { points: [anchor] },
+                    // `...(dash && ...)` keeps the key absent (not `false`) for solid
+                    // text, matching the stroke convention (absent === solid).
+                    style: { stroke: color, fontSize, ...(dash && { dash: true }) },
+                    text,
+                    createdAt: Date.now(),
+                };
+                ctx.commit({ ops: [{ op: 'addShape', shape }] });
+                ctx.setSelection({ ids: [shape.id] });
+                options.onPlaced?.(shape);
+                if (autoSwitchToSelect)
+                    options.onAutoSwitch?.(selectToolId);
+            });
+        },
+    };
+};

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

@@ -1,7 +1,7 @@
 import type { Measurement } from '../../types/firestore.js';
 import { type AnnotationCanvasState, type AnnotationDocumentPatch, type AnnotationElementId, type AnnotationStroke, type MeasurementPlacement, type Selection, type Vec2 } from '../../types/annotation.js';
 import type { MeasurementRef } from './measurementPicker.js';
-import type { CanvasPointerEvent, Tool, ToolContext, ToolState } from './Tool.js';
+import type { CanvasPointerEvent, RequestTextInput, Tool, ToolContext, ToolState } from './Tool.js';
 import { type ViewportState } from './viewport.js';
 export interface AnnotationCanvasHandle {
     undo(): void;
@@ -27,6 +27,7 @@ export interface UseAnnotationCanvasStateProps {
     onSelectionChange(selection: Selection | null): void;
     measurements?: Measurement[];
     pickMeasurement?: () => Promise<MeasurementRef | null>;
+    requestTextInput?: RequestTextInput;
     width: number;
     height: number;
     initialViewport?: ViewportState;

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -1,12 +1,12 @@
 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, DEFAULT_LINE_POS } from './measurementGeometry.js';
+import { recomputeAnchor, rectCenter, DEFAULT_LINE_POS, } from './measurementGeometry.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).
 export const useAnnotationCanvasState = (props) => {
-    const { canvas, onCommit, tools, activeToolId, selection, onSelectionChange, measurements, pickMeasurement, width, height, initialViewport, imperativeRef, } = props;
+    const { canvas, onCommit, tools, activeToolId, selection, onSelectionChange, measurements, pickMeasurement, requestTextInput, width, height, initialViewport, imperativeRef, } = props;
     const [viewport, setViewport] = useState(initialViewport ?? DEFAULT_VIEWPORT);
     const [toolState, setToolState] = useState(undefined);
     const [previewPatch, setPreviewPatch] = useState(null);
@@ -41,6 +41,11 @@ export const useAnnotationCanvasState = (props) => {
         requestPickMeasurement() {
             return pickMeasurement ? pickMeasurement() : Promise.resolve(null);
         },
+        requestTextInput(options) {
+            return requestTextInput
+                ? requestTextInput(options)
+                : Promise.resolve(null);
+        },
         applyPan(deltaScreen) {
             setViewport((v) => panBy(v, deltaScreen));
         },
@@ -54,11 +59,30 @@ export const useAnnotationCanvasState = (props) => {
         onCommit,
         onSelectionChange,
         pickMeasurement,
+        requestTextInput,
     ]);
     // Live ctx for imperative handle methods (which are created in an effect and
     // would otherwise capture a stale ctx/viewport).
     const ctxRef = useRef(ctx);
     ctxRef.current = ctx;
+    // Tool hand-over. When the active tool's identity changes — a real tool
+    // switch OR the consumer rebuilding the tools array (e.g. a style change
+    // recreates every factory) — give the outgoing instance a chance to wind
+    // down multi-gesture work (the polygon tool commits its in-progress
+    // vertices), then drop any leftover gesture state/preview so the incoming
+    // tool starts clean. Keyed on object identity, not id: a rebuilt instance
+    // has fresh closure state, so the old instance must still wind down.
+    const prevToolRef = useRef(null);
+    useEffect(() => {
+        const prev = prevToolRef.current;
+        prevToolRef.current = activeTool;
+        if (!prev || prev === activeTool)
+            return;
+        prev.onDeactivate?.(ctxRef.current);
+        activePointerIdRef.current = null;
+        setToolState(undefined);
+        setPreviewPatch(null);
+    }, [activeTool]);
     const dispatchPointerDown = useCallback((event) => {
         if (!activeTool)
             return;
@@ -90,11 +114,15 @@ export const useAnnotationCanvasState = (props) => {
         setToolState(undefined);
     }, [activeTool, ctx, toolState]);
     const dispatchPointerCancel = useCallback(() => {
-        if (activeTool)
-            activeTool.onCancel?.(toolState, ctx);
+        // 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
+        // vertices visible across an interrupting two-finger pan) wins over the
+        // clear instead of being clobbered by it.
         activePointerIdRef.current = null;
         setToolState(undefined);
         setPreviewPatch(null);
+        if (activeTool)
+            activeTool.onCancel?.(toolState, ctx);
     }, [activeTool, ctx, toolState]);
     const pan = useCallback((deltaScreen) => {
         setViewport((v) => panBy(v, deltaScreen));
@@ -199,8 +227,30 @@ export const useAnnotationCanvasState = (props) => {
                 const m = c.document.placedMeasurements.find((x) => x.id === id);
                 if (!m)
                     return;
-                if (type === 'rectangle')
-                    return; // not supported in v1
+                if (type === 'rectangle') {
+                    // Reuse the existing rect if the annotation had one; otherwise
+                    // synthesize a square centered on the anchor (same size clamp as
+                    // the default line) so the tile doesn't jump.
+                    const side = Math.min(400, Math.max(120, canvas.viewport.width * 0.25));
+                    const rect = m.rect ?? {
+                        a: { x: m.anchor.x - side / 2, y: m.anchor.y - side / 2 },
+                        b: { x: m.anchor.x + side / 2, y: m.anchor.y + side / 2 },
+                    };
+                    c.commit({
+                        ops: [
+                            {
+                                op: 'updateMeasurement',
+                                id,
+                                patch: {
+                                    placement: 'rectangle',
+                                    rect,
+                                    anchor: rectCenter(rect),
+                                },
+                            },
+                        ],
+                    });
+                    return;
+                }
                 if (type === 'line') {
                     let line = m.line;
                     if (!line) {

package/dist/annotation/data/coalescedRunner.d.ts

@@ -0,0 +1 @@
+export declare const createCoalescedRunner: (task: () => Promise<void>) => (() => Promise<void>);