@reekon-tools/boldr-utils 1.6.13 → 1.6.15

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

@@ -2,6 +2,7 @@ import type { ReactNode, ComponentType } from 'react';
 import type { AnnotationCanvasState, AnnotationDocumentPatch, AnnotationElement, AnnotationElementId, Selection, StrokeCap, Vec2 } from '../../types/annotation.js';
 import type { MeasurementRef } from './measurementPicker.js';
 import type { RectCorner } from './measurementGeometry.js';
+import type { ShapeToolKind } from './shapeGeometry.js';
 import type { ResizeGeometry } from './textGeometry.js';
 import type { ViewportApi } from './viewport.js';
 export type RequestTextInput = (options?: {
@@ -40,6 +41,13 @@ export interface FreehandConfig {
     dash?: boolean;
     minSampleDistance: number;
 }
+export interface ShapeDrawConfig {
+    kind: ShapeToolKind;
+    color: string;
+    width: number;
+    cap?: StrokeCap;
+    dash?: boolean;
+}
 export type DragElementKind = 'stroke' | 'shape' | 'measurement';
 export interface DragSelectionConfig {
     hitTest(doc: AnnotationCanvasState, world: Vec2, zoom: number): {
@@ -66,12 +74,14 @@ export interface Tool {
     icon?: ComponentType;
     cursor?: string;
     freehand?: FreehandConfig;
+    shapeDraw?: ShapeDrawConfig;
     panViewport?: boolean;
     dragSelection?: DragSelectionConfig;
     onPointerDown?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
     onPointerMove?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
     onPointerUp?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
     onCancel?(state: ToolState, ctx: ToolContext): void;
+    onDeactivate?(ctx: ToolContext): void;
     renderPreview?(state: ToolState, ctx: ToolContext): ReactNode;
     hitTest?(element: AnnotationElement, worldPoint: Vec2): boolean;
 }

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

@@ -1,13 +1,28 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Circle, DashPathEffect, Group, Line, Path, Rect, Skia, Text, } from '@shopify/react-native-skia';
+import { Circle, DashPathEffect, Line, Paragraph, Path, Rect, Skia, TextDecoration, TextDecorationStyle, } from '@shopify/react-native-skia';
 import { memo, useMemo } from 'react';
-import { dashIntervals } from '../strokeGeometry.js';
-import { DEFAULT_TEXT_FONT_SIZE, TEXT_BASELINE_FACTOR, TEXT_LINE_HEIGHT_FACTOR, } from '../textGeometry.js';
-// Outline width of dash-styled text, as a fraction of the base font size.
-// Drawn pre-scale (inside the fontSize/baseSize Group), so the outline — and
-// the dash pattern derived from it — scales with the glyphs.
-const TEXT_OUTLINE_WIDTH_FACTOR = 1 / 16;
-const polygonPath = (points) => {
+import { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } from '../strokeGeometry.js';
+import { DEFAULT_TEXT_FONT_SIZE, TEXT_LINE_HEIGHT_FACTOR, } from '../textGeometry.js';
+// Family the loaded annotation typeface is registered under in the per-shape
+// TypefaceFontProvider that backs the text Paragraph (reusing the same typeface
+// the rest of the canvas draws with).
+const TEXT_FONT_FAMILY = 'annotation-text';
+// A wide layout width so text only breaks on explicit '\n' (never auto-wraps).
+// Left-aligned, so the unused width is never visible.
+const TEXT_LAYOUT_WIDTH = 100000;
+// Readable glyph color for highlighted text: the picked color becomes the
+// highlight band, so the text itself flips to black/white by luminance.
+const highlightTextColor = (hex) => {
+    const h = hex.replace('#', '');
+    if (h.length < 6)
+        return '#1A1A1A';
+    const r = parseInt(h.slice(0, 2), 16);
+    const g = parseInt(h.slice(2, 4), 16);
+    const b = parseInt(h.slice(4, 6), 16);
+    const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return lum > 0.6 ? '#1A1A1A' : '#FFFFFF';
+};
+const polygonPath = (points, closed) => {
     const path = Skia.Path.Make();
     if (points.length === 0)
         return path;
@@ -15,7 +30,8 @@ const polygonPath = (points) => {
     for (let i = 1; i < points.length; i++) {
         path.lineTo(points[i].x, points[i].y);
     }
-    path.close();
+    if (closed)
+        path.close();
     return path;
 };
 // Memoized — see StrokeElement. Unchanged shapes keep their identity across
@@ -25,7 +41,86 @@ export const ShapeElement = memo(({ shape, font }) => {
     const stroke = style.stroke ?? '#000000';
     const fill = style.fill;
     const strokeWidth = style.strokeWidth ?? 2;
-    const polyPath = useMemo(() => (kind === 'polygon' ? polygonPath(geometry.points) : null), [kind, geometry.points]);
+    // Polygons auto-close unless explicitly left open (absent === closed, the
+    // historical behavior).
+    const closed = geometry.closed !== false;
+    const polyPath = useMemo(() => (kind === 'polygon' ? polygonPath(geometry.points, closed) : null), [kind, geometry.points, closed]);
+    // Solid filled-triangle arrowhead at the shape's end point. Drawn for the
+    // legacy 'arrow' kind, for a 'line' with cap === 'arrow' (the arrow tool and
+    // the end-cap editor both produce this), and for an OPEN polygon with cap
+    // === 'arrow' (its last segment has a direction). Mirrors StrokeElement.
+    const arrowHead = useMemo(() => {
+        let from;
+        let end;
+        if ((kind === 'line' || kind === 'arrow') &&
+            (kind === 'arrow' || style.cap === 'arrow')) {
+            [from, end] = geometry.points;
+        }
+        else if (kind === 'polygon' && !closed && style.cap === 'arrow') {
+            const n = geometry.points.length;
+            if (n >= 2) {
+                from = geometry.points[n - 2];
+                end = geometry.points[n - 1];
+            }
+        }
+        if (!from || !end || (from.x === end.x && from.y === end.y))
+            return null;
+        const [apex, baseL, baseR] = arrowheadTriangle(end, from, strokeWidth);
+        const p = Skia.Path.Make();
+        p.moveTo(apex.x, apex.y);
+        p.lineTo(baseL.x, baseL.y);
+        p.lineTo(baseR.x, baseR.y);
+        p.close();
+        return p;
+    }, [kind, geometry.points, closed, style.cap, strokeWidth]);
+    // Text shapes render through the Skia Paragraph API so decorations (solid
+    // underline / wavy squiggle / highlight band) paint natively. The loaded font
+    // is registered into a provider so the Paragraph draws with the same typeface
+    // as the rest of the canvas. Built only for text shapes.
+    const textParagraph = useMemo(() => {
+        if (kind !== 'text' || !text || !font)
+            return null;
+        const typeface = font.getTypeface();
+        if (!typeface)
+            return null;
+        const fontSize = style.fontSize ?? DEFAULT_TEXT_FONT_SIZE;
+        const decoration = style.textDecoration;
+        const colorStr = style.stroke ?? '#000000';
+        const textStyle = {
+            color: Skia.Color(decoration === 'highlight' ? highlightTextColor(colorStr) : colorStr),
+            fontFamilies: [TEXT_FONT_FAMILY],
+            fontSize,
+            // Match textGeometry's line-height factor so the (Skia-free) selection
+            // box keeps bracketing the rendered glyphs vertically.
+            heightMultiplier: TEXT_LINE_HEIGHT_FACTOR,
+        };
+        if (decoration === 'underline' || decoration === 'squiggle') {
+            textStyle.decoration = TextDecoration.Underline;
+            textStyle.decorationStyle =
+                decoration === 'squiggle'
+                    ? TextDecorationStyle.Wavy
+                    : TextDecorationStyle.Solid;
+            textStyle.decorationColor = Skia.Color(colorStr);
+        }
+        else if (decoration === 'highlight') {
+            textStyle.backgroundColor = Skia.Color(colorStr);
+        }
+        const provider = Skia.TypefaceFontProvider.Make();
+        provider.registerFont(typeface, TEXT_FONT_FAMILY);
+        const builder = Skia.ParagraphBuilder.Make({
+            textStyle,
+            strutStyle: {
+                strutEnabled: true,
+                fontSize,
+                heightMultiplier: TEXT_LINE_HEIGHT_FACTOR,
+                forceStrutHeight: true,
+            },
+        }, provider);
+        builder.pushStyle(textStyle);
+        builder.addText(text);
+        return builder.build();
+    }, [kind, text, font, style.fontSize, style.textDecoration, style.stroke]);
+    const dashEffect = style.dash ? (_jsx(DashPathEffect, { intervals: dashIntervals(strokeWidth) })) : null;
     switch (kind) {
         case 'rect': {
             const [a, b] = geometry.points;
@@ -35,7 +130,7 @@ export const ShapeElement = memo(({ shape, font }) => {
             const y = Math.min(a.y, b.y);
             const w = Math.abs(b.x - a.x);
             const h = Math.abs(b.y - a.y);
-            return (_jsxs(_Fragment, { children: [fill && _jsx(Rect, { x: x, y: y, width: w, height: h, color: fill }), _jsx(Rect, { x: x, y: y, width: w, height: h, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+            return (_jsxs(_Fragment, { children: [fill && _jsx(Rect, { x: x, y: y, width: w, height: h, color: fill }), _jsx(Rect, { x: x, y: y, width: w, height: h, color: stroke, style: "stroke", strokeWidth: strokeWidth, children: dashEffect })] }));
         }
         case 'ellipse': {
             const [a, b] = geometry.points;
@@ -44,47 +139,29 @@ export const ShapeElement = memo(({ shape, font }) => {
             const cx = (a.x + b.x) / 2;
             const cy = (a.y + b.y) / 2;
             const r = Math.max(Math.abs(b.x - a.x), Math.abs(b.y - a.y)) / 2;
-            return (_jsxs(_Fragment, { children: [fill && _jsx(Circle, { cx: cx, cy: cy, r: r, color: fill }), _jsx(Circle, { cx: cx, cy: cy, r: r, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+            return (_jsxs(_Fragment, { children: [fill && _jsx(Circle, { cx: cx, cy: cy, r: r, color: fill }), _jsx(Circle, { cx: cx, cy: cy, r: r, color: stroke, style: "stroke", strokeWidth: strokeWidth, children: dashEffect })] }));
         }
         case 'line':
         case 'arrow': {
             const [a, b] = geometry.points;
             if (!a || !b)
                 return null;
-            return (_jsx(Line, { p1: a, p2: b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: "round" }));
+            return (_jsxs(_Fragment, { children: [_jsx(Line, { p1: a, p2: b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(style.cap), children: dashEffect }), arrowHead && _jsx(Path, { path: arrowHead, color: stroke, style: "fill" })] }));
         }
         case 'polygon': {
             if (!polyPath)
                 return null;
-            return (_jsxs(_Fragment, { children: [fill && _jsx(Path, { path: polyPath, color: fill }), _jsx(Path, { path: polyPath, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+            return (_jsxs(_Fragment, { children: [fill && closed && _jsx(Path, { path: polyPath, color: fill }), _jsx(Path, { path: polyPath, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(style.cap), strokeJoin: "round", children: dashEffect }), arrowHead && _jsx(Path, { path: arrowHead, color: stroke, style: "fill" })] }));
         }
         case 'text': {
-            // `origin` is the TOP-LEFT of the text block (textGeometry derives
-            // bounds/hit boxes from the same anchor + factors, so chrome and glyphs
-            // agree). The shared font is loaded at one fixed size; style.fontSize is
-            // honored by scaling the glyph outlines about the anchor — Skia text is
-            // vector, so this is loss-free. Lines are laid out with the textGeometry
-            // factors; Skia <Text> y is the BASELINE, hence the baseline offset.
+            // `origin` is the TOP-LEFT of the text block; textGeometry derives the
+            // selection box from the same anchor + line-height factor used to build
+            // the paragraph, so chrome brackets the glyphs. fontSize is set directly
+            // on the paragraph (world units), so no manual glyph scaling is needed.
             const [origin] = geometry.points;
-            if (!origin || !text)
-                return null;
-            if (!font)
+            if (!origin || !textParagraph)
                 return null;
-            const fontSize = style.fontSize ?? DEFAULT_TEXT_FONT_SIZE;
-            const baseSize = font.getSize();
-            const scale = baseSize > 0 ? fontSize / baseSize : 1;
-            // Dash-styled text strokes the glyph outlines (a dash effect is a path
-            // effect — it needs stroked geometry, so it can't apply to filled
-            // glyphs) and runs the shared dash pattern along them.
-            const outlineWidth = baseSize * TEXT_OUTLINE_WIDTH_FACTOR;
-            return (_jsx(Group, { transform: [
-                    { translateX: origin.x },
-                    { translateY: origin.y },
-                    { scale },
-                ], children: text.split('\n').map((line, i) => (_jsx(Text, { x: 0, y: (i * TEXT_LINE_HEIGHT_FACTOR + TEXT_BASELINE_FACTOR) * baseSize, text: line, font: font, color: stroke, ...(style.dash && {
-                        style: 'stroke',
-                        strokeWidth: outlineWidth,
-                    }), children: style.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(outlineWidth) })) }, i))) }));
+            return (_jsx(Paragraph, { paragraph: textParagraph, x: origin.x, y: origin.y, width: TEXT_LAYOUT_WIDTH }));
         }
     }
 });

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

@@ -36,6 +36,7 @@ export declare const rectCornerPoint: (rect: {
     b: Vec2;
 }, corner: RectCorner) => Vec2;
 export declare const oppositeRectCorner: (corner: RectCorner) => RectCorner;
+export declare const hitPlacedMeasurement: (m: PlacedMeasurementRef, p: Vec2, zoom?: number) => boolean;
 export interface RemoveMeasurementResult {
     ops: AnnotationPatchOp[];
     keepSelection: boolean;

package/dist/annotation/canvas/measurementGeometry.js

@@ -1,12 +1,13 @@
 // Pure geometry for measurement annotations (the `placement: 'line'` variant
-// of PlacedMeasurementRef). Skia-free and dependency-free so it's safe in tools,
-// hit-tests, and unit tests.
+// of PlacedMeasurementRef). Skia-free (its only import is from stampLayout) so
+// it's safe in tools, hit-tests, and unit tests.
 //
 // NOTE: the native overlay's `useAnimatedStyle` and the live-line derived values
 // run on the UI thread and CANNOT call these functions across the worklet
 // boundary, so they inline the same math. Those inlined copies are the "worklet
 // twins" of these helpers — if you change the math here, change them too (they
 // are commented as such in AnnotationCanvasInner.native.tsx).
+import { stampTileSize } from './stampLayout.js';
 // Default position of the tile along its line when `linePos` is absent: center.
 export const DEFAULT_LINE_POS = 0.5;
 export const lerp = (a, b, t) => ({
@@ -85,6 +86,64 @@ export const oppositeRectCorner = (corner) => {
             return 'tl';
     }
 };
+// --- Hit-testing a placed measurement (tile + line/rect body). Shared by the
+// select tool and the pan tool's view-mode tap-select. ---
+// Doc-space padding around hit boxes (matches the select tool's stroke pad).
+const STAMP_HIT_PADDING = 6;
+// Screen-space grab tolerance (px) for a measurement-annotation line or rect
+// border, converted to doc space via zoom (the body is a thin world-space
+// stroke). Matches the select tool's drag-grab tolerance so tap-select and
+// drag-grab agree on what counts as "on the measurement".
+const LINE_GRAB_PX = 12;
+const segmentDistSq = (p, a, b) => {
+    const abx = b.x - a.x;
+    const aby = b.y - a.y;
+    const lenSq = abx * abx + aby * aby;
+    let t = lenSq === 0 ? 0 : ((p.x - a.x) * abx + (p.y - a.y) * aby) / lenSq;
+    t = Math.max(0, Math.min(1, t));
+    const dx = p.x - (a.x + t * abx);
+    const dy = p.y - (a.y + t * aby);
+    return dx * dx + dy * dy;
+};
+// Whether a world-space point hits a placed measurement: the (screen-constant)
+// stamp tile around the anchor, the line body of a line annotation, or the
+// border ring of a rectangle annotation (interiors stay transparent to hits so
+// elements inside remain reachable).
+export const hitPlacedMeasurement = (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.
+    // Unassociated inputs use the smaller input-tile footprint (#6); the helper
+    // folds in scale + the associated/blank size so the hit box matches the draw.
+    const half = (stampTileSize(m) / 2 + STAMP_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 (segmentDistSq(p, m.line.a, m.line.b) <= r * r)
+            return true;
+    }
+    // Rectangle annotation: grab anywhere along the border.
+    if (m.rect && placementOf(m) === 'rectangle') {
+        const n = normalizeRect(m.rect);
+        const r2 = (LINE_GRAB_PX / zoom) ** 2;
+        const tl = { x: n.minX, y: n.minY };
+        const tr = { x: n.maxX, y: n.minY };
+        const br = { x: n.maxX, y: n.maxY };
+        const bl = { x: n.minX, y: n.maxY };
+        if (segmentDistSq(p, tl, tr) <= r2 ||
+            segmentDistSq(p, tr, br) <= r2 ||
+            segmentDistSq(p, br, bl) <= r2 ||
+            segmentDistSq(p, bl, tl) <= r2) {
+            return true;
+        }
+    }
+    return false;
+};
 export const buildRemoveMeasurementOps = (placed) => {
     if (placementOf(placed) !== 'none' && placed.measurementId) {
         return {

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

@@ -0,0 +1,5 @@
+import type { AnnotationShape, AnnotationShapeKind, Vec2 } from '../../types/annotation.js';
+export type ShapeToolKind = 'line' | 'rect' | 'triangle' | 'ellipse';
+export declare const annotationKindFor: (kind: ShapeToolKind) => AnnotationShapeKind;
+export declare const shapePointsFromDrag: (kind: ShapeToolKind, a: Vec2, b: Vec2) => Vec2[];
+export declare const hitShapeOutline: (shape: AnnotationShape, p: Vec2, tol: number) => boolean;

package/dist/annotation/canvas/shapeGeometry.js

@@ -0,0 +1,116 @@
+// Pure geometry for the drag-to-draw shape tools (line/arrow/rect/triangle/
+// circle) and the polygon tool. Skia-free and dependency-free so the tool
+// factories — and the consumer's static import graph — never touch
+// @shopify/react-native-skia, and so the native inner's worklet twins have a
+// single JS source of truth to mirror.
+// Persisted AnnotationShapeKind for a tool kind. Triangles are stored as
+// 3-point closed polygons so they reuse the polygon renderer/hit-testing
+// wholesale (there is no 'triangle' kind in the schema).
+export const annotationKindFor = (kind) => kind === 'triangle' ? 'polygon' : kind;
+// Geometry points for a shape dragged from `a` to `b` (world space).
+//  - line:     the two endpoints (direction preserved — caps/arrowheads point
+//              from a toward b).
+//  - rect:     the two opposite corners (ShapeElement normalizes).
+//  - ellipse:  the two opposite corners of the bounding drag (rendered as a
+//              circle centered on the midpoint — see ShapeElement).
+//  - triangle: isoceles inscribed in the normalized drag rect — apex at the
+//              top-center, base across the bottom.
+export const shapePointsFromDrag = (kind, a, b) => {
+    if (kind === 'triangle') {
+        const minX = Math.min(a.x, b.x);
+        const maxX = Math.max(a.x, b.x);
+        const minY = Math.min(a.y, b.y);
+        const maxY = Math.max(a.y, b.y);
+        return [
+            { x: (minX + maxX) / 2, y: minY },
+            { x: maxX, y: maxY },
+            { x: minX, y: maxY },
+        ];
+    }
+    return [
+        { x: a.x, y: a.y },
+        { x: b.x, y: b.y },
+    ];
+};
+// --- Per-kind hit testing (doc space) -------------------------------------
+// Geometric shapes hit on their painted outline (plus a tolerance), NOT their
+// bounding box — a long diagonal line's box would swallow taps nowhere near
+// the ink, and a rect's interior must stay transparent to hits so elements
+// inside it remain selectable. `tol` is the doc-space grab radius (the caller
+// derives it from stroke width + a screen-constant padding / zoom).
+const segDistSq = (px, py, ax, ay, bx, by) => {
+    const abx = bx - ax;
+    const aby = by - ay;
+    const lenSq = abx * abx + aby * aby;
+    let t = lenSq === 0 ? 0 : ((px - ax) * abx + (py - ay) * aby) / lenSq;
+    t = Math.max(0, Math.min(1, t));
+    const dx = px - (ax + t * abx);
+    const dy = py - (ay + t * aby);
+    return dx * dx + dy * dy;
+};
+// Distance from `p` to the polyline through `pts` (closing edge included when
+// `closed`), squared. Infinity for fewer than 2 points.
+const polylineDistSq = (pts, p, closed) => {
+    if (pts.length < 2)
+        return Infinity;
+    let best = Infinity;
+    const n = closed ? pts.length : pts.length - 1;
+    for (let i = 0; i < n; i++) {
+        const a = pts[i];
+        const b = pts[(i + 1) % pts.length];
+        const d = segDistSq(p.x, p.y, a.x, a.y, b.x, b.y);
+        if (d < best)
+            best = d;
+    }
+    return best;
+};
+// Whether `p` is within `tol` of the shape's painted outline. Returns false
+// for text shapes — their hit box comes from textGeometry (the stored
+// geometry is just an anchor), so callers keep using textShapeBounds.
+export const hitShapeOutline = (shape, p, tol) => {
+    const pts = shape.geometry.points;
+    const tolSq = tol * tol;
+    switch (shape.kind) {
+        case 'line':
+        case 'arrow': {
+            const [a, b] = pts;
+            if (!a || !b)
+                return false;
+            return segDistSq(p.x, p.y, a.x, a.y, b.x, b.y) <= tolSq;
+        }
+        case 'rect': {
+            const [a, b] = pts;
+            if (!a || !b)
+                return false;
+            const minX = Math.min(a.x, b.x);
+            const maxX = Math.max(a.x, b.x);
+            const minY = Math.min(a.y, b.y);
+            const maxY = Math.max(a.y, b.y);
+            const ring = [
+                { x: minX, y: minY },
+                { x: maxX, y: minY },
+                { x: maxX, y: maxY },
+                { x: minX, y: maxY },
+            ];
+            return polylineDistSq(ring, p, true) <= tolSq;
+        }
+        case 'ellipse': {
+            // Rendered as a circle: center = midpoint, r = half the larger extent
+            // (mirror of ShapeElement). Hit when within tol of the ring.
+            const [a, b] = pts;
+            if (!a || !b)
+                return false;
+            const cx = (a.x + b.x) / 2;
+            const cy = (a.y + b.y) / 2;
+            const r = Math.max(Math.abs(b.x - a.x), Math.abs(b.y - a.y)) / 2;
+            const d = Math.hypot(p.x - cx, p.y - cy);
+            return Math.abs(d - r) <= tol;
+        }
+        case 'polygon': {
+            const closed = shape.geometry.closed !== false;
+            return polylineDistSq(pts, p, closed) <= tolSq;
+        }
+        case 'text':
+            return false;
+    }
+};

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

@@ -1 +1,5 @@
+import type { PlacedMeasurementRef } from '../../types/annotation.js';
 export declare const STAMP_TILE_SIZE = 96;
+export declare const STAMP_INPUT_TILE_SIZE = 56;
+export declare const isUnassociatedStamp: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath">) => boolean;
+export declare const stampTileSize: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "scale">) => number;

package/dist/annotation/canvas/stampLayout.js

@@ -1,11 +1,27 @@
-// Shared layout constant for the placed measurement stamp. Lives in a
+// Shared layout constants for the placed measurement stamp. Lives in a
 // Skia-free module so both the render path (the `renderMeasurementStamp`
-// overlay — see measurementStampOverlay.ts) and the hit-test (selectTool)
-// can import it without dragging @shopify/react-native-skia into the
-// consumer's static import graph.
-// Constant SCREEN-space edge length of a placed measurement rendered as a
-// square tile. The tile is a fixed-size pin: its on-screen size is this times
-// `placed.scale` and does NOT change with zoom (only its position tracks the
-// canvas). Also drives the select-tool hit box, which converts it back to doc
-// space via the zoom.
+// overlay — see measurementStampOverlay.ts) and the hit-test (selectTool,
+// measurementGeometry) can import it without dragging
+// @shopify/react-native-skia into the consumer's static import graph.
+// Constant SCREEN-space edge length of a placed measurement that HAS a
+// measurement associated, rendered as a square tile. The tile is a fixed-size
+// pin: its on-screen size is this times `placed.scale` and does NOT change with
+// zoom (only its position tracks the canvas). Also drives the select-tool hit
+// box, which converts it back to doc space via the zoom.
 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;
+// 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);

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.d.ts

@@ -0,0 +1,15 @@
+import type { PlacedMeasurementRef } from '../../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export type MeasurementToolPlacement = 'line' | 'rectangle' | 'none';
+export interface MeasurementToolOptions {
+    id?: string;
+    label?: string;
+    placement?: MeasurementToolPlacement;
+    linePos?: number;
+    minDragPx?: number;
+    autoSwitchToSelect?: boolean;
+    selectToolId?: string;
+    onAutoSwitch?: (toToolId: string) => void;
+    onPlaced?: (measurement: PlacedMeasurementRef) => void;
+}
+export declare const createMeasurementTool: (options?: MeasurementToolOptions) => Tool;