@reekon-tools/boldr-utils 1.6.12 → 1.6.13

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

@@ -16,6 +16,26 @@ export declare const lineLength: (line: {
     a: Vec2;
     b: Vec2;
 }) => number;
+export interface NormalizedRect {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+export declare const normalizeRect: (rect: {
+    a: Vec2;
+    b: Vec2;
+}) => NormalizedRect;
+export declare const rectCenter: (rect: {
+    a: Vec2;
+    b: Vec2;
+}) => Vec2;
+export type RectCorner = 'tl' | 'tr' | 'bl' | 'br';
+export declare const rectCornerPoint: (rect: {
+    a: Vec2;
+    b: Vec2;
+}, corner: RectCorner) => Vec2;
+export declare const oppositeRectCorner: (corner: RectCorner) => RectCorner;
 export interface RemoveMeasurementResult {
     ops: AnnotationPatchOp[];
     keepSelection: boolean;

package/dist/annotation/canvas/measurementGeometry.js

@@ -48,8 +48,45 @@ export const lineLength = (line) => {
     const dy = line.b.y - line.a.y;
     return Math.sqrt(dx * dx + dy * dy);
 };
+export const normalizeRect = (rect) => ({
+    minX: Math.min(rect.a.x, rect.b.x),
+    minY: Math.min(rect.a.y, rect.b.y),
+    maxX: Math.max(rect.a.x, rect.b.x),
+    maxY: Math.max(rect.a.y, rect.b.y),
+});
+// The tile anchor for a rectangle annotation: always the center. Any op that
+// changes `rect` must write this into `anchor` in the same patch.
+export const rectCenter = (rect) => ({
+    x: (rect.a.x + rect.b.x) / 2,
+    y: (rect.a.y + rect.b.y) / 2,
+});
+export const rectCornerPoint = (rect, corner) => {
+    const n = normalizeRect(rect);
+    switch (corner) {
+        case 'tl':
+            return { x: n.minX, y: n.minY };
+        case 'tr':
+            return { x: n.maxX, y: n.minY };
+        case 'bl':
+            return { x: n.minX, y: n.maxY };
+        case 'br':
+            return { x: n.maxX, y: n.maxY };
+    }
+};
+export const oppositeRectCorner = (corner) => {
+    switch (corner) {
+        case 'tl':
+            return 'br';
+        case 'tr':
+            return 'bl';
+        case 'bl':
+            return 'tr';
+        case 'br':
+            return 'tl';
+    }
+};
 export const buildRemoveMeasurementOps = (placed) => {
-    if (placementOf(placed) === 'line' && placed.measurementId) {
+    if (placementOf(placed) !== 'none' && placed.measurementId) {
         return {
             ops: [
                 {

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

@@ -1,4 +1,5 @@
 import type { StrokeCap, Vec2 } from '../../types/annotation.js';
 export declare const toSkiaStrokeCap: (cap: StrokeCap | undefined) => "butt" | "round" | "square";
+export declare const dashIntervals: (width: number) => [number, number];
 export declare const arrowheadLength: (width: number) => number;
 export declare const arrowheadTriangle: (end: Vec2, from: Vec2, width: number) => [Vec2, Vec2, Vec2];

package/dist/annotation/canvas/strokeGeometry.js

@@ -4,6 +4,14 @@
 // (we draw an arrowhead separately), so the base line uses a 'round' cap.
 // Absent === 'round'.
 export const toSkiaStrokeCap = (cap) => cap === 'butt' || cap === 'square' ? cap : 'round';
+// Dash pattern ([on, off], doc units) for dashed strokes/lines/rect borders.
+// Scales with the stroke width so thick strokes read as dashed rather than
+// dotted, floored so thin strokes still show distinct dashes. Single source
+// for every dashed paint in the canvas — keep all platforms identical.
+export const dashIntervals = (width) => [
+    Math.max(width * 3, 6),
+    Math.max(width * 2, 4),
+];
 // Forward length of the arrowhead (line end → apex), as a multiple of stroke
 // width (clamped to a minimum so thin strokes still get a visible head). Doc
 // units. Kept small since the head is a solid filled triangle.

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

@@ -0,0 +1,24 @@
+import type { AnnotationShape, Vec2 } from '../../types/annotation.js';
+export declare const DEFAULT_TEXT_FONT_SIZE = 24;
+export declare const MIN_TEXT_FONT_SIZE = 8;
+export declare const MAX_TEXT_FONT_SIZE = 200;
+export declare const TEXT_LINE_HEIGHT_FACTOR = 1.2;
+export declare const TEXT_BASELINE_FACTOR = 0.8;
+export declare const SELECTION_PAD = 6;
+export declare const estimateLineWidth: (line: string, fontSize: number) => number;
+export interface TextBounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+export declare const textShapeBounds: (shape: AnnotationShape) => TextBounds | null;
+export declare const hitTestTextShape: (shape: AnnotationShape, p: Vec2, padding?: number) => boolean;
+export interface ResizeGeometry {
+    pivot: Vec2;
+    handle: Vec2;
+    minScale: number;
+    maxScale: number;
+}
+export declare const textResizeGeometry: (shape: AnnotationShape) => ResizeGeometry | null;
+export declare const resizeScaleFromDrag: (geom: ResizeGeometry, delta: Vec2) => number;

package/dist/annotation/canvas/textGeometry.js

@@ -0,0 +1,110 @@
+// Geometry for `kind: 'text'` shapes. A text shape stores only its TOP-LEFT
+// anchor (`geometry.points[0]`), its content (`text`, '\n'-separated lines) and
+// its size (`style.fontSize`, doc units); everything else — bounds, hit boxes,
+// the resize handle, line layout — derives from those through this module.
+//
+// This module is deliberately Skia-free: tools (selectTool, textTool) need the
+// same bounds the renderer uses, and tools must stay importable without
+// touching @shopify/react-native-skia (see penTool.ts). So bounds are
+// ESTIMATED from per-character advance-width factors rather than measured with
+// a real SkFont. The renderer (ShapeElement) lays glyphs out with the same
+// line-height/baseline factors, so boxes and glyphs agree vertically; widths
+// are approximate, which is fine for selection chrome and hit-testing.
+export const DEFAULT_TEXT_FONT_SIZE = 24;
+export const MIN_TEXT_FONT_SIZE = 8;
+export const MAX_TEXT_FONT_SIZE = 200;
+// Line height and baseline offset (from the line top), as multiples of
+// fontSize. The renderer uses the same factors so the estimated box always
+// brackets the drawn glyphs vertically.
+export const TEXT_LINE_HEIGHT_FACTOR = 1.2;
+export const TEXT_BASELINE_FACTOR = 0.8;
+// Selection-box padding in doc units. Lives here (Skia-free) rather than in
+// AnnotationCanvasSkia so tools can hit-test selection chrome — the text
+// resize handle sits on the padded box corner — without importing the Skia
+// tree. AnnotationCanvasSkia imports this for every selection box.
+export const SELECTION_PAD = 6;
+// Advance width / fontSize per character class, tuned for a bold geometric
+// sans (the app font is Metropolis Bold). Estimates, not measurements — see
+// the module comment.
+const NARROW = new Set("ijl!|.,:;'`".split(''));
+const SLIM = new Set('ftr()[]{}"- '.split(''));
+const WIDE = new Set('mwMW@%'.split(''));
+const charWidthFactor = (ch) => {
+    if (NARROW.has(ch))
+        return 0.3;
+    if (SLIM.has(ch))
+        return 0.42;
+    if (WIDE.has(ch))
+        return 0.92;
+    if (ch >= 'A' && ch <= 'Z')
+        return 0.72;
+    return 0.6;
+};
+export const estimateLineWidth = (line, fontSize) => {
+    let w = 0;
+    for (const ch of line)
+        w += charWidthFactor(ch);
+    return w * fontSize;
+};
+const textFontSize = (shape) => shape.style.fontSize ?? DEFAULT_TEXT_FONT_SIZE;
+// Estimated bounds of a text shape, or null when it isn't a renderable text
+// shape (wrong kind, no anchor, no text).
+export const textShapeBounds = (shape) => {
+    if (shape.kind !== 'text')
+        return null;
+    const origin = shape.geometry.points[0];
+    if (!origin || !shape.text)
+        return null;
+    const fontSize = textFontSize(shape);
+    const lines = shape.text.split('\n');
+    let width = 0;
+    for (const line of lines) {
+        const w = estimateLineWidth(line, fontSize);
+        if (w > width)
+            width = w;
+    }
+    return {
+        minX: origin.x,
+        minY: origin.y,
+        maxX: origin.x + width,
+        maxY: origin.y + lines.length * TEXT_LINE_HEIGHT_FACTOR * fontSize,
+    };
+};
+// Whether a world point is on a text shape (its estimated box + padding).
+export const hitTestTextShape = (shape, p, padding = SELECTION_PAD) => {
+    const b = textShapeBounds(shape);
+    if (!b)
+        return false;
+    return (p.x >= b.minX - padding &&
+        p.x <= b.maxX + padding &&
+        p.y >= b.minY - padding &&
+        p.y <= b.maxY + padding);
+};
+export const textResizeGeometry = (shape) => {
+    const b = textShapeBounds(shape);
+    if (!b)
+        return null;
+    const fontSize = textFontSize(shape);
+    return {
+        pivot: { x: b.minX, y: b.minY },
+        handle: { x: b.maxX + SELECTION_PAD, y: b.maxY + SELECTION_PAD },
+        minScale: MIN_TEXT_FONT_SIZE / fontSize,
+        maxScale: MAX_TEXT_FONT_SIZE / fontSize,
+    };
+};
+// Uniform scale for a resize drag: how far the handle has moved from the
+// pivot, relative to where it started, clamped to the geometry's scale range.
+// The native resize preview worklet in AnnotationCanvasInner.native.tsx is a
+// WORKLET TWIN of this math — keep them in sync.
+export const resizeScaleFromDrag = (geom, delta) => {
+    const bx = geom.handle.x - geom.pivot.x;
+    const by = geom.handle.y - geom.pivot.y;
+    const baseLen = Math.sqrt(bx * bx + by * by);
+    let s = 1;
+    if (baseLen > 0) {
+        const nx = bx + delta.x;
+        const ny = by + delta.y;
+        s = Math.sqrt(nx * nx + ny * ny) / baseLen;
+    }
+    return Math.min(geom.maxScale, Math.max(geom.minScale, s));
+};

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

@@ -4,6 +4,7 @@ export interface PenToolOptions {
     color?: string;
     width?: number;
     cap?: StrokeCap;
+    dash?: boolean;
     minSampleDistance?: number;
     variant?: 'pen' | 'marker' | 'highlighter';
 }

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

@@ -10,6 +10,7 @@ export const createPenTool = (options = {}) => {
     const color = options.color ?? '#111827';
     const width = options.width ?? 2;
     const cap = options.cap ?? 'round';
+    const dash = options.dash ?? false;
     const variant = options.variant ?? 'pen';
     const minSampleDistance = options.minSampleDistance ?? 1.5;
     const minSampleDistanceSq = minSampleDistance * minSampleDistance;
@@ -23,7 +24,7 @@ export const createPenTool = (options = {}) => {
         cursor: 'crosshair',
         // Drives UI-thread drawing on native (see FreehandConfig). The
         // onPointerDown/Move/Up below remain the web/parity implementation.
-        freehand: { variant, color, width, cap, minSampleDistance },
+        freehand: { variant, color, width, cap, dash, minSampleDistance },
         onPointerDown(event, ctx) {
             const stroke = {
                 id: makeId('stroke'),
@@ -32,6 +33,7 @@ export const createPenTool = (options = {}) => {
                 color,
                 width,
                 cap,
+                ...(dash && { dash }),
                 points: [event.world.x, event.world.y],
                 pressure: event.pressure !== undefined ? [event.pressure] : undefined,
                 createdAt: Date.now(),

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

@@ -1,5 +1,6 @@
 import { STAMP_TILE_SIZE } from '../stampLayout.js';
-import { placementOf, linePosOf, snapLinePos, lerp, recomputeAnchor, } from '../measurementGeometry.js';
+import { placementOf, linePosOf, snapLinePos, lerp, recomputeAnchor, normalizeRect, rectCenter, rectCornerPoint, oppositeRectCorner, } from '../measurementGeometry.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.
@@ -42,6 +43,18 @@ const hitMeasurement = (m, p, zoom = 1) => {
             return true;
         }
     }
+    // Rectangle annotation: grab anywhere along the border (the interior stays
+    // transparent to hits so elements behind the rect remain selectable).
+    if (m.rect && placementOf(m) === 'rectangle') {
+        const n = normalizeRect(m.rect);
+        const r2 = (LINE_GRAB_PX / zoom) ** 2;
+        if (segmentDistanceSq(p.x, p.y, n.minX, n.minY, n.maxX, n.minY) <= r2 ||
+            segmentDistanceSq(p.x, p.y, n.maxX, n.minY, n.maxX, n.maxY) <= r2 ||
+            segmentDistanceSq(p.x, p.y, n.maxX, n.maxY, n.minX, n.maxY) <= r2 ||
+            segmentDistanceSq(p.x, p.y, n.minX, n.maxY, n.minX, n.minY) <= r2) {
+            return true;
+        }
+    }
     return false;
 };
 const segmentDistanceSq = (px, py, ax, ay, bx, by) => {
@@ -65,24 +78,38 @@ const findHit = (doc, world, zoom) => {
     }
     for (let i = doc.shapes.length - 1; i >= 0; i--) {
         // Default shape hit test: bounding box of the shape's points + padding.
+        // Text shapes store only their top-left anchor, so their box comes from
+        // the estimated text bounds instead.
         const s = doc.shapes[i];
-        const pts = s.geometry.points;
-        if (pts.length === 0)
-            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;
+        let minX;
+        let maxX;
+        let minY;
+        let maxY;
+        if (s.kind === 'text') {
+            const b = textShapeBounds(s);
+            if (!b)
+                continue;
+            ({ minX, maxX, minY, maxY } = b);
+        }
+        else {
+            const pts = s.geometry.points;
+            if (pts.length === 0)
+                continue;
+            minX = pts[0].x;
+            maxX = pts[0].x;
+            minY = pts[0].y;
+            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 &&
@@ -111,6 +138,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 };
@@ -207,6 +236,81 @@ 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 +318,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 +343,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 +354,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 +370,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) {

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;