@reekon-tools/boldr-utils 1.6.14 → 1.6.17

package/dist/annotation/canvas/AnnotationCanvasInner.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFont } from '@shopify/react-native-skia';
-import { useCallback, useEffect, useRef, } from 'react';
+import { Skia, useFont, useTypeface } from '@shopify/react-native-skia';
+import { useCallback, useEffect, useMemo, useRef, } from 'react';
 import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
+import { TEXT_FONT_FAMILY } from './elements/ShapeElement.js';
 import { buildRemoveMeasurementOps } from './measurementGeometry.js';
 import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
-import { STAMP_TILE_SIZE } from './stampLayout.js';
+import { stampTileSize } from './stampLayout.js';
 // Screen-px radius of a measurement-annotation endpoint handle (matches the
 // native HANDLE_RADIUS_PX). Divided by zoom for a constant on-screen size.
 const HANDLE_PX = 7;
@@ -17,6 +18,20 @@ export const AnnotationCanvasInner = (props) => {
     const allowMiddlePan = panTriggers.includes('middleMouse');
     const allowRightPan = panTriggers.includes('rightMouse');
     const valueFont = useFont(stampFontSource, stampValueFontSize);
+    // Typeface provider for text-shape Paragraphs. CanvasKit's registerFont
+    // rejects the raw pointer valueFont.getTypeface() returns, and useFonts can't
+    // take a plain URL (its resolveAsset expects a bundled module). So load the
+    // typeface via useTypeface — which fetches the URL and builds a *managed*
+    // typeface (MakeFreeTypeFaceFromData) — then register that. Null until the
+    // async load resolves; ShapeElement renders text only once it's ready.
+    const textTypeface = useTypeface(stampFontSource);
+    const textFontMgr = useMemo(() => {
+        if (!textTypeface)
+            return null;
+        const provider = Skia.TypefaceFontProvider.Make();
+        provider.registerFont(textTypeface, TEXT_FONT_FAMILY);
+        return provider;
+    }, [textTypeface]);
     const state = useAnnotationCanvasState(props);
     const containerRef = useRef(null);
     const panGestureRef = useRef(null);
@@ -179,6 +194,7 @@ export const AnnotationCanvasInner = (props) => {
                 worldTransform: state.worldTransform,
                 resolveImageUrl,
                 valueFont,
+                textFontMgr,
                 penDrawingStroke: state.penDrawingStroke,
                 // Endpoint handles on the selected line annotation. Web drives endpoint
                 // drag through selectTool's pointer handlers (preview patches update the
@@ -196,7 +212,7 @@ export const AnnotationCanvasInner = (props) => {
                     inset: 0,
                     pointerEvents: 'none',
                 }, children: state.effectiveCanvas.placedMeasurements.map((placed) => {
-                    const size = STAMP_TILE_SIZE * (placed.scale ?? 1);
+                    const size = stampTileSize(placed);
                     const cx = (placed.anchor.x - state.viewport.pan.x) * state.viewport.zoom;
                     const cy = (placed.anchor.y - state.viewport.pan.y) * state.viewport.zoom;
                     const isSelected = selection?.ids.includes(placed.id) ?? false;

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

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { StyleSheet, TouchableOpacity, View, } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
 import Animated, { runOnJS, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, } from 'react-native-reanimated';
-import { STAMP_TILE_SIZE } from './stampLayout.js';
+import { stampTileSize } from './stampLayout.js';
 import { DEFAULT_LAYER_ID, } from '../../types/annotation.js';
 import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
 import { buildRemoveMeasurementOps, } from './measurementGeometry.js';
@@ -1044,7 +1044,7 @@ export const AnnotationCanvasInner = (props) => {
                     } }, placed.id))) }))] }));
 };
 const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, onStampPress, onStampLongPress, onRemove, }) => {
-    const size = STAMP_TILE_SIZE * (placed.scale ?? 1);
+    const size = stampTileSize(placed);
     const half = size / 2;
     const anchorX = placed.anchor.x;
     const anchorY = placed.anchor.y;

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

@@ -1,4 +1,4 @@
-import { type SkFont, type SkPath, type Transforms3d } from '@shopify/react-native-skia';
+import { type SkFont, type SkPath, type SkTypefaceFontProvider, type Transforms3d } from '@shopify/react-native-skia';
 import type { ReactNode } from 'react';
 import type { AnnotationCanvasState, AnnotationStroke, StrokeCap } from '../../types/annotation.js';
 type AnimatedPoint = {
@@ -22,6 +22,7 @@ export interface AnnotationCanvasSkiaProps {
     };
     resolveImageUrl?: (storagePath: string) => Promise<string>;
     valueFont: SkFont | null;
+    textFontMgr?: SkTypefaceFontProvider | null;
     penDrawingStroke: AnnotationStroke | null;
     livePreview?: {
         path: SkPath | {
@@ -72,5 +73,5 @@ export interface AnnotationCanvasSkiaProps {
     };
     customPreview?: ReactNode;
 }
-export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/annotation/canvas/AnnotationCanvasSkia.js

@@ -86,7 +86,7 @@ const SelectionBox = ({ bounds, isDragging, transform, }) => (_jsx(DraggableElem
 // since the function-call pattern works identically on native we use it
 // in both Inners for consistency. Don't add hooks here; this is a plain
 // JSX-returning helper, not a component.
-export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, customPreview, }) => (_jsx(Canvas, { style: { width, height }, children: _jsxs(Group, { transform: worldTransform, children: [effectiveCanvas.viewport.backgroundImage && (_jsx(BackgroundImageElement, { image: effectiveCanvas.viewport.backgroundImage, docWidth: effectiveCanvas.viewport.width, docHeight: effectiveCanvas.viewport.height, fit: effectiveCanvas.viewport.backgroundFit ?? 'contain', resolveUrl: resolveImageUrl })), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => (_jsx(DraggableElement, { isDragging: shape.id === draggingId || shape.id === resizingId, transform: shape.id === resizingId ? resizeTransform : dragTransform, children: _jsx(ShapeElement, { shape: shape, font: valueFont }) }, shape.id))), effectiveCanvas.placedMeasurements.map((placed) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, customPreview, }) => (_jsx(Canvas, { style: { width, height }, children: _jsxs(Group, { transform: worldTransform, children: [effectiveCanvas.viewport.backgroundImage && (_jsx(BackgroundImageElement, { image: effectiveCanvas.viewport.backgroundImage, docWidth: effectiveCanvas.viewport.width, docHeight: effectiveCanvas.viewport.height, fit: effectiveCanvas.viewport.backgroundFit ?? 'contain', resolveUrl: resolveImageUrl })), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => (_jsx(DraggableElement, { isDragging: shape.id === draggingId || shape.id === resizingId, transform: shape.id === resizingId ? resizeTransform : dragTransform, children: _jsx(ShapeElement, { shape: shape, font: valueFont, textFontMgr: textFontMgr }) }, shape.id))), effectiveCanvas.placedMeasurements.map((placed) => {
                 // Rectangle annotation: a stroked border whose center carries the
                 // tile. A corner drag renders from the live geometry (outside the
                 // group translate, like an endpoint drag); otherwise the committed

package/dist/annotation/canvas/elements/ShapeElement.d.ts

@@ -1,7 +1,9 @@
-import { type SkFont } from '@shopify/react-native-skia';
+import { type SkFont, type SkTypefaceFontProvider } from '@shopify/react-native-skia';
 import type { AnnotationShape } from '../../../types/annotation.js';
+export declare const TEXT_FONT_FAMILY = "annotation-text";
 export interface ShapeElementProps {
     shape: AnnotationShape;
     font?: SkFont | null;
+    textFontMgr?: SkTypefaceFontProvider | null;
 }
-export declare const ShapeElement: import("react").MemoExoticComponent<({ shape, font }: ShapeElementProps) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const ShapeElement: import("react").MemoExoticComponent<({ shape, font, textFontMgr }: ShapeElementProps) => import("react/jsx-runtime").JSX.Element | null>;

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

@@ -1,12 +1,27 @@
 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 { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } 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;
+import { DEFAULT_TEXT_FONT_SIZE, TEXT_LINE_HEIGHT_FACTOR, } from '../textGeometry.js';
+// Family the loaded annotation typeface is registered under in the
+// TypefaceFontProvider that backs the text Paragraph. Exported so the web
+// canvas can register its font under the same name via useFonts (see below).
+export 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)
@@ -21,7 +36,7 @@ const polygonPath = (points, closed) => {
 };
 // Memoized — see StrokeElement. Unchanged shapes keep their identity across
 // applyPatch, so only the edited shape (and the shared font) re-render.
-export const ShapeElement = memo(({ shape, font }) => {
+export const ShapeElement = memo(({ shape, font, textFontMgr }) => {
     const { kind, geometry, style, text } = shape;
     const stroke = style.stroke ?? '#000000';
     const fill = style.fill;
@@ -58,6 +73,78 @@ export const ShapeElement = memo(({ shape, font }) => {
         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)
+            return null;
+        // Resolve the typeface provider that backs the Paragraph. Web threads one
+        // pre-built via useFonts (managed typeface); native builds one here from
+        // the loaded SkFont. `textFontMgr === undefined` distinguishes "native, no
+        // manager threaded" from "web, manager still loading (null)" — in the
+        // latter we render nothing rather than fall back to the SkFont path, which
+        // throws on CanvasKit (raw pointer to registerFont).
+        let provider;
+        if (textFontMgr !== undefined) {
+            provider = textFontMgr;
+        }
+        else if (font) {
+            const typeface = font.getTypeface();
+            if (!typeface)
+                return null;
+            provider = Skia.TypefaceFontProvider.Make();
+            provider.registerFont(typeface, TEXT_FONT_FAMILY);
+        }
+        else {
+            provider = null;
+        }
+        if (!provider)
+            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 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,
+        textFontMgr,
+        style.fontSize,
+        style.textDecoration,
+        style.stroke,
+    ]);
     const dashEffect = style.dash ? (_jsx(DashPathEffect, { intervals: dashIntervals(strokeWidth) })) : null;
     switch (kind) {
         case 'rect': {
@@ -92,32 +179,14 @@ export const ShapeElement = memo(({ shape, font }) => {
             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.js

@@ -1,13 +1,13 @@
 // Pure geometry for measurement annotations (the `placement: 'line'` variant
-// of PlacedMeasurementRef). Skia-free (its only import is the stampLayout
-// constant) 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 { STAMP_TILE_SIZE } from './stampLayout.js';
+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) => ({
@@ -114,8 +114,9 @@ export const hitPlacedMeasurement = (m, p, zoom = 1) => {
     // anchor, so its doc-space footprint shrinks as you zoom in. Convert the
     // screen-space half-extent (+ padding) back to doc space via the zoom so
     // the hit box always matches what's drawn.
-    const scale = m.scale ?? 1;
-    const half = ((STAMP_TILE_SIZE * scale) / 2 + STAMP_HIT_PADDING) / zoom;
+    // 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)

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;

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

@@ -0,0 +1,133 @@
+import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
+import { DEFAULT_LINE_POS, recomputeAnchor, rectCenter, } 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 measurement annotation for a drag a→b (or a single point for
+// the bare stamp). The payload mirrors useAnnotationCanvasState's
+// placeAnnotationAtCenter so a drawn annotation is identical to a (legacy)
+// center-placed one once committed.
+const buildMeasurement = (opts) => {
+    const { id, layerId, placement, linePos, a, b } = opts;
+    const base = {
+        id,
+        layerId,
+        showLabel: true,
+        showValue: true,
+        createdAt: Date.now(),
+    };
+    if (placement === 'rectangle') {
+        const rect = { a, b };
+        return { ...base, placement: 'rectangle', rect, anchor: rectCenter(rect) };
+    }
+    if (placement === 'none') {
+        // Bare value tile at the tap point — no line/rect geometry.
+        return { ...base, placement: 'none', anchor: b };
+    }
+    const line = { a, b };
+    return {
+        ...base,
+        placement: 'line',
+        line,
+        linePos,
+        // Tile anchored along the line at linePos; recomputeAnchor keeps it in
+        // sync on later edits.
+        anchor: recomputeAnchor(line, 'line', linePos, {
+            x: (a.x + b.x) / 2,
+            y: (a.y + b.y) / 2,
+        }),
+    };
+};
+// Draw-to-add measurement tool. For 'line'/'rectangle' a press-drag rubber-bands
+// the annotation (a line/rect with a blank value tile) and release commits it;
+// for 'none' a tap drops a bare value tile. Mirrors createShapeTool's
+// interaction so measurements are placed the same way as shapes. The annotation
+// stays blank (no measurement associated) until the user fills it via the tile
+// / keypad. Skia-free; renders its live preview through ctx.preview, so it works
+// on web and (via the generic tool-pan dispatch) on native.
+export const createMeasurementTool = (options = {}) => {
+    const placement = options.placement ?? 'line';
+    const linePos = options.linePos ?? DEFAULT_LINE_POS;
+    const minDragPx = options.minDragPx ?? 4;
+    const autoSwitchToSelect = options.autoSwitchToSelect ?? true;
+    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)
+            options.onAutoSwitch?.(selectToolId);
+    };
+    // Bare stamp: tap-to-place, no rubber-band.
+    if (placement === 'none') {
+        return {
+            id: options.id ?? 'measure-bare',
+            label: options.label ?? 'Measurement stamp',
+            cursor: 'copy',
+            onPointerUp(event, ctx) {
+                place(ctx, buildMeasurement({
+                    id: makeId(),
+                    layerId: firstLayerId(ctx.document),
+                    placement: 'none',
+                    linePos,
+                    a: event.world,
+                    b: event.world,
+                }));
+            },
+        };
+    }
+    const defaultId = placement === 'rectangle' ? 'measure-rect' : 'measure-line';
+    const defaultLabel = placement === 'rectangle' ? 'Measurement rectangle' : 'Measurement line';
+    return {
+        id: options.id ?? defaultId,
+        label: options.label ?? defaultLabel,
+        cursor: 'crosshair',
+        onPointerDown(event) {
+            return {
+                kind: 'measurement-drawing',
+                id: makeId(),
+                startWorld: event.world,
+                startScreen: event.screen,
+                moved: false,
+            };
+        },
+        onPointerMove(event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'measurement-drawing')
+                return s;
+            const measurement = buildMeasurement({
+                id: s.id,
+                layerId: firstLayerId(ctx.document),
+                placement,
+                linePos,
+                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-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;
+            }
+            place(ctx, buildMeasurement({
+                id: s.id,
+                layerId: firstLayerId(ctx.document),
+                placement,
+                linePos,
+                a: s.startWorld,
+                b: event.world,
+            }));
+        },
+        onCancel(_state, ctx) {
+            ctx.preview({ ops: [] });
+        },
+    };
+};

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

@@ -1,4 +1,4 @@
-import { STAMP_TILE_SIZE } from '../stampLayout.js';
+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';
@@ -132,8 +132,8 @@ const classifyGrab = (doc, id, world, zoom) => {
     const m = doc.placedMeasurements.find((x) => x.id === id);
     if (!m)
         return 'move';
-    const scale = m.scale ?? 1;
-    const half = ((STAMP_TILE_SIZE * scale) / 2 + HIT_PADDING) / zoom;
+    // Same footprint the tile is drawn at (smaller for unassociated inputs, #6).
+    const half = (stampTileSize(m) / 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';

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

@@ -1,9 +1,11 @@
-import type { AnnotationShape } from '../../../types/annotation.js';
+import type { AnnotationShape, AnnotationTextDecoration } from '../../../types/annotation.js';
 import type { Tool } from '../Tool.js';
 export interface TextToolOptions {
+    id?: string;
     color?: string;
     fontSize?: number;
     dash?: boolean;
+    decoration?: AnnotationTextDecoration;
     autoSwitchToSelect?: boolean;
     onPlaced?: (shape: AnnotationShape) => void;
     onAutoSwitch?: (toToolId: string) => void;

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

@@ -2,6 +2,10 @@ 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)}`;
+// Screen-px a press may travel and still count as a tap. Beyond this the
+// gesture is a drag (e.g. an attempt to pan with the text tool active) and must
+// 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) => {
@@ -22,13 +26,29 @@ export const createTextTool = (options = {}) => {
     const color = options.color ?? '#111827';
     const fontSize = options.fontSize ?? DEFAULT_TEXT_FONT_SIZE;
     const dash = options.dash ?? false;
+    const decoration = options.decoration;
     const autoSwitchToSelect = options.autoSwitchToSelect ?? true;
     const selectToolId = options.selectToolId ?? 'select';
     return {
-        id: 'text',
+        id: options.id ?? 'text',
         label: 'Text',
         cursor: 'text',
-        onPointerUp(event, ctx) {
+        // Arm the press so onPointerUp can tell a tap from a drag. The native tap
+        // gesture and the generic tool-pan both dispatch a down before the up.
+        onPointerDown(event) {
+            return { kind: 'text-armed', startScreen: event.screen };
+        },
+        onPointerUp(event, ctx, state) {
+            // A press that traveled beyond the tap slop is a drag, not a tap — never
+            // open the text sheet for it. (If the press wasn't armed, fall back to
+            // treating it as a tap so the tool still works.)
+            const armed = state;
+            if (armed?.kind === 'text-armed') {
+                const dx = event.screen.x - armed.startScreen.x;
+                const dy = event.screen.y - armed.startScreen.y;
+                if (dx * dx + dy * dy > TAP_SLOP_PX * TAP_SLOP_PX)
+                    return;
+            }
             const existing = findTextShapeAt(ctx.document, event.world);
             if (existing) {
                 void ctx
@@ -63,7 +83,12 @@ export const createTextTool = (options = {}) => {
                     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 }) },
+                    style: {
+                        stroke: color,
+                        fontSize,
+                        ...(dash && { dash: true }),
+                        ...(decoration && { textDecoration: decoration }),
+                    },
                     text,
                     createdAt: Date.now(),
                 };

package/dist/exports.d.ts

@@ -29,6 +29,7 @@ export { createPanTool, type PanToolOptions, } from './annotation/canvas/tools/p
 export { createTextTool, type TextToolOptions, } from './annotation/canvas/tools/textTool.js';
 export { createShapeTool, buildShapeFromDrag, type ShapeToolOptions, } from './annotation/canvas/tools/shapeTool.js';
 export { createPolygonTool, type PolygonToolOptions, } from './annotation/canvas/tools/polygonTool.js';
+export { createMeasurementTool, type MeasurementToolOptions, type MeasurementToolPlacement, } from './annotation/canvas/tools/measurementTool.js';
 export { annotationKindFor, hitShapeOutline, shapePointsFromDrag, type ShapeToolKind, } from './annotation/canvas/shapeGeometry.js';
 export { DEFAULT_TEXT_FONT_SIZE, MIN_TEXT_FONT_SIZE, MAX_TEXT_FONT_SIZE, textShapeBounds, textResizeGeometry, type ResizeGeometry, type TextBounds, } from './annotation/canvas/textGeometry.js';
 export { recomputeAnchor, projectToLinePos, snapLinePos, lerp, lineLength, placementOf, linePosOf, normalizeRect, rectCenter, rectCornerPoint, oppositeRectCorner, hitPlacedMeasurement, DEFAULT_LINE_POS, type NormalizedRect, type RectCorner, } from './annotation/canvas/measurementGeometry.js';

package/dist/exports.js

@@ -29,6 +29,7 @@ export { createPanTool, } from './annotation/canvas/tools/panTool.js';
 export { createTextTool, } from './annotation/canvas/tools/textTool.js';
 export { createShapeTool, buildShapeFromDrag, } from './annotation/canvas/tools/shapeTool.js';
 export { createPolygonTool, } from './annotation/canvas/tools/polygonTool.js';
+export { createMeasurementTool, } from './annotation/canvas/tools/measurementTool.js';
 export { annotationKindFor, hitShapeOutline, shapePointsFromDrag, } from './annotation/canvas/shapeGeometry.js';
 export { DEFAULT_TEXT_FONT_SIZE, MIN_TEXT_FONT_SIZE, MAX_TEXT_FONT_SIZE, textShapeBounds, textResizeGeometry, } from './annotation/canvas/textGeometry.js';
 export { recomputeAnchor, projectToLinePos, snapLinePos, lerp, lineLength, placementOf, linePosOf, normalizeRect, rectCenter, rectCornerPoint, oppositeRectCorner, hitPlacedMeasurement, DEFAULT_LINE_POS, } from './annotation/canvas/measurementGeometry.js';

package/dist/types/annotation.d.ts

@@ -19,6 +19,7 @@ export interface AnnotationStroke {
     createdAt: number;
 }
 export type AnnotationShapeKind = 'rect' | 'ellipse' | 'line' | 'arrow' | 'polygon' | 'text';
+export type AnnotationTextDecoration = 'underline' | 'squiggle' | 'highlight';
 export interface AnnotationShapeStyle {
     stroke?: string;
     fill?: string;
@@ -26,6 +27,7 @@ export interface AnnotationShapeStyle {
     fontSize?: number;
     fontFamily?: string;
     dash?: boolean;
+    textDecoration?: AnnotationTextDecoration;
     cap?: StrokeCap;
 }
 export interface AnnotationShape {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reekon-tools/boldr-utils",
-  "version": "1.6.14",
+  "version": "1.6.17",
   "description": "Shared utilities for formulas and measurement conversion used in Reekon apps",
   "author": "REEKON Tools",
   "license": "MIT",