@reekon-tools/boldr-utils 1.6.18 → 1.6.20

package/dist/annotation/canvas/stampLayout.js

@@ -11,17 +11,80 @@
 export const STAMP_TILE_SIZE = 96;
 // Edge length for an UNASSOCIATED stamp — a measurement annotation with no
 // measurement picked yet, which renders as a compact "+" input placeholder
-// rather than a full readable tile. Smaller than STAMP_TILE_SIZE so empty
-// inputs read as lightweight tap targets; associated tiles keep STAMP_TILE_SIZE
-// so existing saved annotations are visually unchanged. The single knob for #6.
-export const STAMP_INPUT_TILE_SIZE = 56;
+// rather than a full readable tile. Kept noticeably smaller than
+// STAMP_TILE_SIZE so empty inputs read as lightweight tap targets that don't
+// crowd the drawing; associated tiles keep STAMP_TILE_SIZE so existing saved
+// annotations are visually unchanged. Still comfortably tappable once the
+// viewport/tile-scale multipliers (min 1) are folded in. The single knob for #6.
+export const STAMP_INPUT_TILE_SIZE = 44;
+// Document-wide tile scale factor (AnnotationCanvasState.tileScaleFactor): one
+// knob that shrinks/grows EVERY measurement tile on the canvas at once, on top
+// of each tile's own `scale`. Lets a user pull tiles down on a dense drawing
+// where lines crowd together, or bump them up on a sparse one. Like `scale` it
+// is purely a screen-space multiplier — it does NOT change with zoom. Absent ===
+// DEFAULT_TILE_SCALE (visually identical to documents written before the knob
+// existed).
+export const DEFAULT_TILE_SCALE = 1;
+export const TILE_SCALE_MIN = 0.4;
+export const TILE_SCALE_MAX = 2;
+// Clamp a tile-scale-factor candidate to the supported range. The single guard
+// for the value before it lands in the document (slider input, restored docs).
+export const clampTileScale = (v) => v < TILE_SCALE_MIN ? TILE_SCALE_MIN : v > TILE_SCALE_MAX ? TILE_SCALE_MAX : v;
+// --- Viewport-relative tile sizing ------------------------------------------
+// A bare-pixel tile is the same size on every device, but the SAME document is
+// fit into wildly different canvases (a phone window vs a desktop pane), so the
+// drawing renders much larger on desktop and a fixed-px tile reads as a tiny
+// fraction of it. To keep a tile a CONSISTENT fraction of the drawing across
+// platforms — while staying independent of the user's live zoom — the tile
+// footprint is multiplied by `viewportTileScale`, which tracks how large the
+// document renders when fit to the canvas (NOT the live zoom).
+// Rendered document width (screen px) at which a tile uses its unscaled base
+// size. Calibrated to a large phone's width so phone canvases land at scale 1
+// (mobile visually unchanged); larger canvases scale up proportionally.
+const TILE_VIEWPORT_REFERENCE_PX = 430;
+// Clamp so phone-sized canvases never shrink tiles below base (lower = 1) and
+// very large monitors don't produce runaway tiles (upper = 4).
+const TILE_VIEWPORT_SCALE_MIN = 1;
+const TILE_VIEWPORT_SCALE_MAX = 4;
+// Screen-px width the document occupies when fit to the canvas:
+//   docW * fitZoom, fitZoom = min(canvasW/docW, canvasH/docH)
+//            = min(canvasW, docW * canvasH / docH)
+// This — not the raw canvas size — governs the tile's fraction of the drawing,
+// so the same document at the same canvas aspect yields the same value on web
+// and native. Falls back to canvasW when doc dimensions are unknown.
+export const renderedDocWidthAtFit = (canvasW, canvasH, docW, docH) => {
+    if (!(docW > 0) || !(docH > 0) || !(canvasW > 0) || !(canvasH > 0)) {
+        return canvasW > 0 ? canvasW : TILE_VIEWPORT_REFERENCE_PX;
+    }
+    return Math.min(canvasW, (docW * canvasH) / docH);
+};
+// Multiplier folded into the tile footprint so tiles are a consistent fraction
+// of the rendered drawing on any canvas. Zoom-INDEPENDENT (a function of canvas
+// + doc dimensions only), so the tile still never changes size as the user
+// pinches/wheels. Defaults to 1 (callers without canvas dimensions are
+// unaffected — e.g. legacy tests).
+export const viewportTileScale = (canvasW, canvasH, docW, docH) => {
+    const s = renderedDocWidthAtFit(canvasW, canvasH, docW, docH) /
+        TILE_VIEWPORT_REFERENCE_PX;
+    return s < TILE_VIEWPORT_SCALE_MIN
+        ? TILE_VIEWPORT_SCALE_MIN
+        : s > TILE_VIEWPORT_SCALE_MAX
+            ? TILE_VIEWPORT_SCALE_MAX
+            : s;
+};
 // A placed measurement is an unassociated input until a measurement reference
 // is attached (id or path). Such stamps use STAMP_INPUT_TILE_SIZE.
 export const isUnassociatedStamp = (m) => !m.measurementId && !m.measurementPath;
 // Screen-space edge length for a placed stamp: the compact input size while
 // unassociated, full size once a measurement is attached, then scaled by the
-// per-stamp `scale`. The ONE source of truth for tile footprint — render
-// overlay, hit-test, and slide-grab classification all call this so the drawn
-// tile and its touch box always agree.
-export const stampTileSize = (m) => (isUnassociatedStamp(m) ? STAMP_INPUT_TILE_SIZE : STAMP_TILE_SIZE) *
-    (m.scale ?? 1);
+// per-stamp `scale`, the document-wide `tileScaleFactor`, and the
+// `viewportTileScale` (so tiles read at a consistent fraction of the drawing on
+// any canvas). The ONE source of truth for tile footprint — render overlay,
+// hit-test, and slide-grab classification all call this so the drawn tile and
+// its touch box always agree. `tileScaleFactor` is the canvas-level knob
+// (default 1, from `AnnotationCanvasState.tileScaleFactor`); `viewportScale`
+// (default 1) is the per-canvas multiplier from `viewportTileScale`.
+export const stampTileSize = (m, tileScaleFactor = DEFAULT_TILE_SCALE, viewportScale = 1) => (isUnassociatedStamp(m) ? STAMP_INPUT_TILE_SIZE : STAMP_TILE_SIZE) *
+    (m.scale ?? 1) *
+    tileScaleFactor *
+    viewportScale;

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

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

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

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

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

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

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

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

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

@@ -2,6 +2,7 @@ import { stampTileSize } from '../stampLayout.js';
 import { placementOf, linePosOf, snapLinePos, lerp, recomputeAnchor, rectCenter, rectCornerPoint, oppositeRectCorner, hitPlacedMeasurement, } from '../measurementGeometry.js';
 import { hitShapeOutline } from '../shapeGeometry.js';
 import { DEFAULT_TEXT_FONT_SIZE, resizeScaleFromDrag, textResizeGeometry, textShapeBounds, } from '../textGeometry.js';
+import { editTextShape, findTextShapeAt } from './textEditing.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.
@@ -16,8 +17,14 @@ const hitStroke = (stroke, p) => {
     return false;
 };
 // Screen-space grab tolerance (px) added around a geometric shape's outline
-// (line/arrow/rect/ellipse/polygon), converted to doc space via zoom.
-const SHAPE_GRAB_PX = 12;
+// (line/arrow/rect/ellipse/polygon), converted to doc space via zoom. A thin
+// line gives almost nothing to aim at, so the grab corridor is deliberately
+// wider than a fingertip — landing anywhere near the ink grabs it. Kept in sync
+// with measurementGeometry's LINE_GRAB_PX so tap-select and drag-grab agree on
+// what counts as "on the line". (The endpoint-resize handles use their own,
+// tighter HANDLE_GRAB_PX and are checked first on the selected element, so a
+// wider body grab never swallows them.)
+const SHAPE_GRAB_PX = 32;
 // Screen-px radius of the center snap detent when sliding a tile along its line.
 // Converted to t-space per line via (SNAP_PX / zoom) / lineLength. The native
 // slide worklet inlines the same value — keep them in sync.
@@ -37,11 +44,11 @@ const segmentDistanceSq = (px, py, ax, ay, bx, by) => {
     const dy = py - cy;
     return dx * dx + dy * dy;
 };
-const findHit = (doc, world, zoom) => {
+const findHit = (doc, world, zoom, viewportTileScale = 1) => {
     // Hit-test in z-order (top first): measurements > shapes > strokes.
     for (let i = doc.placedMeasurements.length - 1; i >= 0; i--) {
         const m = doc.placedMeasurements[i];
-        if (hitPlacedMeasurement(m, world, zoom)) {
+        if (hitPlacedMeasurement(m, world, zoom, doc.tileScaleFactor, viewportTileScale)) {
             return { id: m.id, kind: 'measurement' };
         }
     }
@@ -124,16 +131,37 @@ const translatePatch = (elementKind, id, doc, delta) => {
     }
     return { op: 'updateStroke', id, patch: { points } };
 };
+// Whether a world point lands on a measurement's tile (its screen-constant
+// anchor box, converted back to doc space via zoom — the same footprint
+// classifyGrab uses). The tile is the move/slide affordance, so a grab here
+// must win over the endpoint/corner/resize handles that appear once an element
+// is selected; without this, a handle sitting under the tile (a rectangle
+// tile at the rect center, a line tile slid onto an endpoint) hijacks the grab
+// and the tile becomes unmovable until deselected.
+const isOnMeasurementTile = (doc, id, world, zoom, viewportTileScale = 1) => {
+    const m = doc.placedMeasurements.find((x) => x.id === id);
+    if (!m)
+        return false;
+    const half = (stampTileSize(m, doc.tileScaleFactor, viewportTileScale) / 2 +
+        HIT_PADDING) /
+        zoom;
+    return (Math.abs(world.x - m.anchor.x) <= half &&
+        Math.abs(world.y - m.anchor.y) <= half);
+};
 // --- Measurement-annotation grab logic (shared by the native UI-thread drag
 // via DragSelectionConfig AND the web pointer handlers — one source of truth) ---
 // Grabbing the tile of a line annotation slides it along the line; everything
 // else (bare stamps, grabs on the line body) is a group move.
-const classifyGrab = (doc, id, world, zoom) => {
+const classifyGrab = (doc, id, world, zoom, viewportTileScale = 1) => {
     const m = doc.placedMeasurements.find((x) => x.id === id);
     if (!m)
         return 'move';
-    // Same footprint the tile is drawn at (smaller for unassociated inputs, #6).
-    const half = (stampTileSize(m) / 2 + HIT_PADDING) / zoom;
+    // Same footprint the tile is drawn at (smaller for unassociated inputs, #6;
+    // folds in the document-wide tile scale + viewport scale so slide-grab
+    // matches the draw).
+    const half = (stampTileSize(m, doc.tileScaleFactor, viewportTileScale) / 2 +
+        HIT_PADDING) /
+        zoom;
     const onTile = Math.abs(world.x - m.anchor.x) <= half &&
         Math.abs(world.y - m.anchor.y) <= half;
     return onTile && placementOf(m) === 'line' && m.line ? 'slide' : 'move';
@@ -190,6 +218,48 @@ const endpointPatch = (doc, id, handle, delta) => {
     const anchor = recomputeAnchor(line, 'line', linePosOf(m), m.anchor);
     return { ops: [{ op: 'updateMeasurement', id, patch: { line, anchor } }] };
 };
+// Which endpoint handle of a (selected) line/arrow SHAPE is under `world`.
+// Shape lines store their endpoints as geometry.points[0]/[1] (unlike
+// measurement lines, which carry them on `line.a/b` alongside a tile). Prefers
+// the nearer endpoint when both are within range.
+const findShapeHandleHit = (doc, id, world, zoom) => {
+    const s = doc.shapes.find((x) => x.id === id);
+    if (!s || (s.kind !== 'line' && s.kind !== 'arrow'))
+        return null;
+    const [a, b] = s.geometry.points;
+    if (!a || !b)
+        return null;
+    const r2 = (HANDLE_GRAB_PX / zoom) ** 2;
+    const da = (world.x - a.x) ** 2 + (world.y - a.y) ** 2;
+    const db = (world.x - b.x) ** 2 + (world.y - b.y) ** 2;
+    if (da <= r2 && da <= db)
+        return 'a';
+    if (db <= r2)
+        return 'b';
+    return null;
+};
+// Move one endpoint of a line/arrow shape by a world delta (resize/rotate).
+// Rewrites the whole geometry (updateShape merges shallowly at the top level,
+// so `closed` and any other geometry fields must be carried through).
+const shapeEndpointPatch = (doc, id, handle, delta) => {
+    const s = doc.shapes.find((x) => x.id === id);
+    if (!s || (s.kind !== 'line' && s.kind !== 'arrow'))
+        return null;
+    const [a, b] = s.geometry.points;
+    if (!a || !b)
+        return null;
+    const na = handle === 'a' ? { x: a.x + delta.x, y: a.y + delta.y } : a;
+    const nb = handle === 'b' ? { x: b.x + delta.x, y: b.y + delta.y } : b;
+    return {
+        ops: [
+            {
+                op: 'updateShape',
+                id,
+                patch: { geometry: { ...s.geometry, points: [na, nb] } },
+            },
+        ],
+    };
+};
 // 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) => {
@@ -272,7 +342,11 @@ const resizePatch = (doc, id, delta) => {
 // 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) {
-        return endpointPatch(doc, s.id, s.handle, delta);
+        // Shape lines and measurement lines store endpoints differently, so the
+        // patch builder is keyed on which kind is being dragged.
+        return s.elementKind === 'shape'
+            ? shapeEndpointPatch(doc, s.id, s.handle, delta)
+            : endpointPatch(doc, s.id, s.handle, delta);
     }
     if (s.mode === 'slide')
         return slidePatch(doc, s.id, delta, zoom);
@@ -292,15 +366,18 @@ export const createSelectTool = () => ({
     // reusing the same hit-test and translate logic the pointer handlers below
     // use for web — one source of truth.
     dragSelection: {
-        hitTest: (doc, world, zoom) => findHit(doc, world, zoom),
+        hitTest: (doc, world, zoom, viewportTileScale) => findHit(doc, world, zoom, viewportTileScale),
         buildTranslatePatch: (doc, id, kind, delta) => {
             const op = translatePatch(kind, id, doc, delta);
             return op ? { ops: [op] } : null;
         },
         classifyMeasurementGrab: classifyGrab,
+        isSelectedTileGrab: isOnMeasurementTile,
         buildSlidePatch: slidePatch,
         hitTestHandle: findHandleHit,
         buildEndpointPatch: endpointPatch,
+        hitTestShapeHandle: findShapeHandleHit,
+        buildShapeEndpointPatch: shapeEndpointPatch,
         hitTestResizeHandle: findResizeHandleHit,
         buildResizePatch: resizePatch,
         hitTestRectCorner: findRectCornerHit,
@@ -312,9 +389,13 @@ export const createSelectTool = () => ({
     onPointerDown(event, ctx) {
         const { world } = event;
         const zoom = ctx.viewport.state.zoom;
-        // Endpoint/resize handles show only on the selected element — check first.
+        // Endpoint/resize handles show only on the selected element — check first,
+        // UNLESS the grab is on that element's tile: the tile is the move/slide
+        // affordance and must win over a handle sitting under it, so a selected
+        // tile stays draggable (otherwise it can only be moved after deselecting).
         const selId = ctx.selection?.ids[0];
-        if (selId) {
+        if (selId &&
+            !isOnMeasurementTile(ctx.document, selId, world, zoom, ctx.tileViewportScale)) {
             const handle = findHandleHit(ctx.document, selId, world, zoom);
             if (handle) {
                 ctx.setSelection({ ids: [selId] });
@@ -328,6 +409,19 @@ export const createSelectTool = () => ({
                     delta: { x: 0, y: 0 },
                 };
             }
+            const shapeHandle = findShapeHandleHit(ctx.document, selId, world, zoom);
+            if (shapeHandle) {
+                ctx.setSelection({ ids: [selId] });
+                return {
+                    kind: 'dragging',
+                    id: selId,
+                    elementKind: 'shape',
+                    mode: 'endpoint',
+                    handle: shapeHandle,
+                    start: world,
+                    delta: { x: 0, y: 0 },
+                };
+            }
             if (findResizeHandleHit(ctx.document, selId, world, zoom)) {
                 return {
                     kind: 'dragging',
@@ -352,14 +446,15 @@ export const createSelectTool = () => ({
                 };
             }
         }
-        const hit = findHit(ctx.document, world, zoom);
+        const hit = findHit(ctx.document, world, zoom, ctx.tileViewportScale);
         if (!hit) {
             ctx.setSelection(null);
             return { kind: 'idle' };
         }
         ctx.setSelection({ ids: [hit.id] });
         const mode = hit.kind === 'measurement' &&
-            classifyGrab(ctx.document, hit.id, world, zoom) === 'slide'
+            classifyGrab(ctx.document, hit.id, world, zoom, ctx.tileViewportScale) ===
+                'slide'
             ? 'slide'
             : 'move';
         return {
@@ -397,6 +492,14 @@ export const createSelectTool = () => ({
     onCancel(_state, ctx) {
         ctx.preview({ ops: [] });
     },
+    // Long-pressing a placed text shape re-opens the editor (the same edit flow
+    // as tapping it with the text tool, via the shared editTextShape). A hold on
+    // any other element — or empty canvas — is ignored.
+    onLongPress(event, ctx) {
+        const shape = findTextShapeAt(ctx.document, event.world);
+        if (shape)
+            editTextShape(ctx, shape);
+    },
     hitTest(element, p) {
         if (element.kind === 'measurement')
             return hitPlacedMeasurement(element, p);

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

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

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

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

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

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

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

@@ -49,12 +49,14 @@ export interface AnnotationCanvasStateApi {
     activeTool: Tool | null;
     toolState: ToolState;
     ctx: ToolContext;
+    tileViewportScale: number;
     penDrawingStroke: AnnotationStroke | null;
     customPreviewState: ToolState;
     dispatchPointerDown(event: CanvasPointerEvent): void;
     dispatchPointerMove(event: CanvasPointerEvent): void;
     dispatchPointerUp(event: CanvasPointerEvent): void;
     dispatchPointerCancel(): void;
+    dispatchLongPress(event: CanvasPointerEvent): void;
     pan(deltaScreen: Vec2): void;
     zoom(focalScreen: Vec2, nextZoom: number): void;
     setViewport(next: ViewportState): void;

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { applyPatch, invertPatch, DEFAULT_LAYER_ID, } from '../../types/annotation.js';
 import { createViewportApi, panBy, zoomAt, DEFAULT_VIEWPORT, } from './viewport.js';
 import { recomputeAnchor, rectCenter, DEFAULT_LINE_POS, } from './measurementGeometry.js';
+import { viewportTileScale } from './stampLayout.js';
 // Platform-agnostic state machine for the annotation canvas. Web and native
 // inners share this hook; each wraps it with platform-specific event
 // capture and JSX (div + DOM events vs. GestureDetector + RN Views).
@@ -21,10 +22,16 @@ export const useAnnotationCanvasState = (props) => {
         return map;
     }, [measurements]);
     const viewportApi = useMemo(() => createViewportApi(viewport), [viewport]);
+    // How large the document renders when fit to this canvas, as a tile-footprint
+    // multiplier (zoom-independent). Keeps tiles a consistent fraction of the
+    // drawing on a phone vs a desktop pane. Used by the overlays (drawn size) and
+    // the tools (hit box) so both agree.
+    const tileViewportScale = useMemo(() => viewportTileScale(width, height, canvas.viewport.width, canvas.viewport.height), [width, height, canvas.viewport.width, canvas.viewport.height]);
     const ctx = useMemo(() => ({
         document: canvas,
         selection,
         viewport: viewportApi,
+        tileViewportScale,
         preview(patch) {
             setPreviewPatch(patch);
         },
@@ -56,6 +63,7 @@ export const useAnnotationCanvasState = (props) => {
         canvas,
         selection,
         viewportApi,
+        tileViewportScale,
         onCommit,
         onSelectionChange,
         pickMeasurement,
@@ -113,6 +121,14 @@ export const useAnnotationCanvasState = (props) => {
         activePointerIdRef.current = null;
         setToolState(undefined);
     }, [activeTool, ctx, toolState]);
+    const dispatchLongPress = useCallback((event) => {
+        if (!activeTool)
+            return;
+        // Fire-and-forget: onLongPress is a discrete action (it opens the text
+        // editor), so it neither reads nor writes the gesture's tool state — the
+        // in-flight drag/select state on web stays intact underneath it.
+        activeTool.onLongPress?.(event, ctx);
+    }, [activeTool, ctx]);
     const dispatchPointerCancel = useCallback(() => {
         // Clear FIRST, then let the tool react: state updates batch, so a tool
         // whose onCancel re-emits a preview (the polygon tool keeps its placed
@@ -361,12 +377,14 @@ export const useAnnotationCanvasState = (props) => {
         activeTool,
         toolState,
         ctx,
+        tileViewportScale,
         penDrawingStroke,
         customPreviewState: toolState,
         dispatchPointerDown,
         dispatchPointerMove,
         dispatchPointerUp,
         dispatchPointerCancel,
+        dispatchLongPress,
         pan,
         zoom,
         setViewport,

package/dist/exports.d.ts

@@ -21,6 +21,7 @@ export type { GestureConfig, PanTrigger, AnnotationCanvasInnerProps, } from './a
 export type { CanvasPointerEvent, RequestTextInput, ShapeDrawConfig, Tool, ToolContext, ToolState, } from './annotation/canvas/Tool.js';
 export type { MeasurementRef, PickMeasurement, } from './annotation/canvas/measurementPicker.js';
 export type { MeasurementStampRenderArgs, RenderMeasurementStamp, } from './annotation/canvas/measurementStampOverlay.js';
+export { STAMP_TILE_SIZE, STAMP_INPUT_TILE_SIZE, DEFAULT_TILE_SCALE, TILE_SCALE_MIN, TILE_SCALE_MAX, clampTileScale, stampTileSize, isUnassociatedStamp, } from './annotation/canvas/stampLayout.js';
 export { createViewportApi, fitToScreen, panBy, zoomAt, DEFAULT_VIEWPORT, type ViewportApi, type ViewportState, } from './annotation/canvas/viewport.js';
 export { createPenTool, type PenToolOptions, } from './annotation/canvas/tools/penTool.js';
 export { createSelectTool } from './annotation/canvas/tools/selectTool.js';

package/dist/exports.js

@@ -21,6 +21,7 @@ export { useAnnotationMutations, } from './annotation/data/hooks/useAnnotationMu
 export { useAnnotationCanvasDoc, } from './annotation/data/hooks/useAnnotationCanvasDoc.js';
 export { hydrateCanvasState } from './annotation/data/canvasPersistence.js';
 export { InMemoryAnnotationProvider } from './annotation/data/InMemoryAnnotationProvider.js';
+export { STAMP_TILE_SIZE, STAMP_INPUT_TILE_SIZE, DEFAULT_TILE_SCALE, TILE_SCALE_MIN, TILE_SCALE_MAX, clampTileScale, stampTileSize, isUnassociatedStamp, } from './annotation/canvas/stampLayout.js';
 export { createViewportApi, fitToScreen, panBy, zoomAt, DEFAULT_VIEWPORT, } from './annotation/canvas/viewport.js';
 export { createPenTool, } from './annotation/canvas/tools/penTool.js';
 export { createSelectTool } from './annotation/canvas/tools/selectTool.js';