@reekon-tools/boldr-utils 1.6.12 → 1.6.13

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

@@ -1,8 +1,8 @@
 import { type CSSProperties, type MutableRefObject } from 'react';
 import type { DecimalTolerance, FractionalTolerance, Measurement, Units } from '../../types/firestore.js';
-import type { AnnotationCanvasState, AnnotationDocumentPatch, Selection } from '../../types/annotation.js';
+import type { AnnotationCanvasState, AnnotationDocumentPatch, PlacedMeasurementRef, Selection } from '../../types/annotation.js';
 import type { MeasurementRef } from './measurementPicker.js';
-import type { Tool } from './Tool.js';
+import type { RequestTextInput, Tool } from './Tool.js';
 import { type AnnotationCanvasHandle } from './useAnnotationCanvasState.js';
 import { type ViewportState } from './viewport.js';
 import type { RenderMeasurementStamp } from './measurementStampOverlay.js';
@@ -20,7 +20,9 @@ export interface AnnotationCanvasInnerProps {
     decimalTolerance?: DecimalTolerance;
     resolveImageUrl?: (storagePath: string) => Promise<string>;
     pickMeasurement?: () => Promise<MeasurementRef | null>;
+    requestTextInput?: RequestTextInput;
     renderMeasurementStamp?: RenderMeasurementStamp;
+    onMeasurementStampPress?: (placed: PlacedMeasurementRef) => void;
     stampFontSource?: unknown;
     stampValueFontSize?: number;
     stampLabelFontSize?: number;

package/dist/annotation/canvas/AnnotationCanvasInner.js

@@ -55,7 +55,10 @@ export const AnnotationCanvasInner = (props) => {
             y: event.clientY - (rect?.top ?? 0),
         };
         if (isPanTriggerDown(event)) {
-            panGestureRef.current = { pointerId: event.pointerId, lastScreen: screen };
+            panGestureRef.current = {
+                pointerId: event.pointerId,
+                lastScreen: screen,
+            };
             event.currentTarget.setPointerCapture(event.pointerId);
             event.preventDefault();
             return;
@@ -75,7 +78,10 @@ export const AnnotationCanvasInner = (props) => {
                 x: screen.x - pan.lastScreen.x,
                 y: screen.y - pan.lastScreen.y,
             });
-            panGestureRef.current = { pointerId: pan.pointerId, lastScreen: screen };
+            panGestureRef.current = {
+                pointerId: pan.pointerId,
+                lastScreen: screen,
+            };
             return;
         }
         state.dispatchPointerMove(toCanvasPointer(event));
@@ -165,7 +171,7 @@ export const AnnotationCanvasInner = (props) => {
         ...style,
     };
     const customPreview = activeTool?.renderPreview?.(state.customPreviewState, state.ctx);
-    const { renderMeasurementStamp, selection } = props;
+    const { renderMeasurementStamp, onMeasurementStampPress, selection } = props;
     return (_jsxs("div", { ref: containerRef, style: containerStyle, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, onWheel: handleWheel, onContextMenu: handleContextMenu, children: [AnnotationCanvasSkia({
                 width,
                 height,
@@ -190,7 +196,7 @@ export const AnnotationCanvasInner = (props) => {
                     const cy = (placed.anchor.y - state.viewport.pan.y) * state.viewport.zoom;
                     const isSelected = selection?.ids.includes(placed.id) ?? false;
                     const measurement = placed.measurementId
-                        ? state.measurementsById.get(placed.measurementId) ?? null
+                        ? (state.measurementsById.get(placed.measurementId) ?? null)
                         : null;
                     return (_jsxs("div", { style: {
                             position: 'absolute',
@@ -205,7 +211,15 @@ export const AnnotationCanvasInner = (props) => {
                                 selected: isSelected,
                                 size,
                                 zoom: state.viewport.zoom,
-                            }), isSelected && measurement && (_jsx("div", { role: "button", "aria-label": "Remove measurement", onPointerDown: (e) => {
+                            }), onMeasurementStampPress && (_jsx("button", { "aria-label": "Open measurement", onPointerDown: (e) => e.stopPropagation(), onClick: () => onMeasurementStampPress(placed), style: {
+                                    position: 'absolute',
+                                    inset: 0,
+                                    pointerEvents: 'auto',
+                                    cursor: 'pointer',
+                                    background: 'transparent',
+                                    border: 'none',
+                                    padding: 0,
+                                } })), isSelected && measurement && (_jsx("div", { role: "button", "aria-label": "Remove measurement", onPointerDown: (e) => {
                                     e.stopPropagation();
                                     const { ops, keepSelection } = buildRemoveMeasurementOps(placed);
                                     state.ctx.commit({ ops });

package/dist/annotation/canvas/AnnotationCanvasInner.native.d.ts

@@ -2,9 +2,9 @@ import { type MutableRefObject } from 'react';
 import { type ViewStyle } from 'react-native';
 import type { RenderMeasurementStamp } from './measurementStampOverlay.js';
 import type { DecimalTolerance, FractionalTolerance, Measurement, Units } from '../../types/firestore.js';
-import { type AnnotationCanvasState, type AnnotationDocumentPatch, type Selection } from '../../types/annotation.js';
+import { type AnnotationCanvasState, type AnnotationDocumentPatch, type PlacedMeasurementRef, type Selection } from '../../types/annotation.js';
 import type { MeasurementRef } from './measurementPicker.js';
-import type { Tool } from './Tool.js';
+import type { RequestTextInput, Tool } from './Tool.js';
 import { type AnnotationCanvasHandle } from './useAnnotationCanvasState.js';
 import type { ViewportState } from './viewport.js';
 export type { AnnotationCanvasHandle };
@@ -21,7 +21,9 @@ export interface AnnotationCanvasInnerProps {
     decimalTolerance?: DecimalTolerance;
     resolveImageUrl?: (storagePath: string) => Promise<string>;
     pickMeasurement?: () => Promise<MeasurementRef | null>;
+    requestTextInput?: RequestTextInput;
     renderMeasurementStamp?: RenderMeasurementStamp;
+    onMeasurementStampPress?: (placed: PlacedMeasurementRef) => void;
     stampFontSource?: unknown;
     stampValueFontSize?: number;
     stampLabelFontSize?: number;

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skia, useFont } from '@shopify/react-native-skia';
 import { useEffect, useMemo, useRef, useState, } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedStyle, useDerivedValue, useSharedValue, } from 'react-native-reanimated';
 import { STAMP_TILE_SIZE } from './stampLayout.js';
 import { DEFAULT_LAYER_ID, } from '../../types/annotation.js';
 import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
-import { buildRemoveMeasurementOps } from './measurementGeometry.js';
+import { buildRemoveMeasurementOps, } from './measurementGeometry.js';
 import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
 let strokeCounter = 0;
 const makeStrokeId = () => `stroke-${Date.now().toString(36)}-${(strokeCounter++).toString(36)}`;
@@ -154,6 +154,67 @@ export const AnnotationCanvasInner = (props) => {
         'worklet';
         return HANDLE_RADIUS_PX / zoom.value;
     });
+    // Rectangle-annotation corner drag. `rectDragId` (React state) marks which
+    // annotation's rect renders from the live geometry; `rectCtx` carries the
+    // fixed (opposite) corner and the grabbed corner's start position so the
+    // Skia rect + the tile (locked to the live center) are driven on the UI
+    // thread from `dragX`/`dragY`.
+    const [rectDragId, setRectDragId] = useState(null);
+    const rectCtx = useSharedValue({ fx: 0, fy: 0, mx: 0, my: 0 });
+    const rectTargetRef = useRef(null);
+    // Live normalized rect during a corner drag (the grabbed corner follows the
+    // finger, the opposite corner stays put).
+    const liveRectX = useDerivedValue(() => {
+        'worklet';
+        const c = rectCtx.value;
+        return Math.min(c.fx, c.mx + dragX.value);
+    });
+    const liveRectY = useDerivedValue(() => {
+        'worklet';
+        const c = rectCtx.value;
+        return Math.min(c.fy, c.my + dragY.value);
+    });
+    const liveRectW = useDerivedValue(() => {
+        'worklet';
+        const c = rectCtx.value;
+        return Math.abs(c.mx + dragX.value - c.fx);
+    });
+    const liveRectH = useDerivedValue(() => {
+        'worklet';
+        const c = rectCtx.value;
+        return Math.abs(c.my + dragY.value - c.fy);
+    });
+    // Corner-scale resize (text shapes). `resizingId` (React state) gates which
+    // shape gets the live transform; `resizeCtx` carries the pivot (top-left
+    // anchor), the handle's grab-start position and the scale clamps (from
+    // DragSelectionConfig.hitTestResizeHandle) so the preview is a pure
+    // UI-thread scale-about-pivot driven by dragX/dragY. The commit on release
+    // goes through buildResizePatch, which clamps identically.
+    const [resizingId, setResizingId] = useState(null);
+    const resizeCtx = useSharedValue({ px: 0, py: 0, hx: 0, hy: 0, minS: 1, maxS: 1 });
+    const resizeTargetRef = useRef(null);
+    const resizeTransform = useDerivedValue(() => {
+        'worklet';
+        // WORKLET TWIN of textGeometry.resizeScaleFromDrag — keep in sync.
+        const c = resizeCtx.value;
+        const bx = c.hx - c.px;
+        const by = c.hy - c.py;
+        const baseLen = Math.sqrt(bx * bx + by * by);
+        let s = 1;
+        if (baseLen > 0) {
+            const nx = bx + dragX.value;
+            const ny = by + dragY.value;
+            s = Math.sqrt(nx * nx + ny * ny) / baseLen;
+        }
+        s = Math.min(c.maxS, Math.max(c.minS, s));
+        return [
+            { translateX: c.px },
+            { translateY: c.py },
+            { scale: s },
+            { translateX: -c.px },
+            { translateY: -c.py },
+        ];
+    });
     // Per-gesture refs so we always emit a matching down/move/up sequence.
     const pointerIdRef = useRef(1);
     const inFlightRef = useRef(null);
@@ -330,6 +391,7 @@ export const AnnotationCanvasInner = (props) => {
                         color: fh.color,
                         width: fh.width,
                         cap: fh.cap ?? 'round',
+                        ...(fh.dash && { dash: true }),
                         points: worldPoints,
                         createdAt: Date.now(),
                     };
@@ -415,6 +477,34 @@ export const AnnotationCanvasInner = (props) => {
                             return;
                         }
                     }
+                    // Corner resize handle (text shapes) — also selected-element-only.
+                    const resizeGeom = cfg.hitTestResizeHandle?.(st.ctx.document, selId, world, zoomNow);
+                    if (resizeGeom) {
+                        resizeCtx.value = {
+                            px: resizeGeom.pivot.x,
+                            py: resizeGeom.pivot.y,
+                            hx: resizeGeom.handle.x,
+                            hy: resizeGeom.handle.y,
+                            minS: resizeGeom.minScale,
+                            maxS: resizeGeom.maxScale,
+                        };
+                        resizeTargetRef.current = { id: selId };
+                        setResizingId(selId);
+                        return;
+                    }
+                    // Rectangle-annotation corner handle — also selected-element-only.
+                    const rectCornerHit = cfg.hitTestRectCorner?.(st.ctx.document, selId, world, zoomNow);
+                    if (rectCornerHit) {
+                        rectCtx.value = {
+                            fx: rectCornerHit.fixed.x,
+                            fy: rectCornerHit.fixed.y,
+                            mx: rectCornerHit.moving.x,
+                            my: rectCornerHit.moving.y,
+                        };
+                        rectTargetRef.current = { id: selId, corner: rectCornerHit.corner };
+                        setRectDragId(selId);
+                        return;
+                    }
                 }
                 const hit = cfg.hitTest(st.ctx.document, world, zoomNow);
                 if (!hit) {
@@ -447,6 +537,35 @@ export const AnnotationCanvasInner = (props) => {
             };
             const endSelectDrag = (dx, dy) => {
                 const st = stateRef.current;
+                // Resize commit: scale the shape by the final drag (clamped in
+                // buildResizePatch exactly like the live preview).
+                const rT = resizeTargetRef.current;
+                if (rT) {
+                    if (dx !== 0 || dy !== 0) {
+                        const patch = cfg.buildResizePatch?.(st.ctx.document, rT.id, {
+                            x: dx,
+                            y: dy,
+                        });
+                        if (patch)
+                            st.ctx.commit(patch);
+                    }
+                    resizeTargetRef.current = null;
+                    setResizingId(null);
+                    return;
+                }
+                // Rect-corner commit: drag the grabbed corner by the world delta
+                // (opposite corner fixed); anchor re-centers in the same patch.
+                const rectT = rectTargetRef.current;
+                if (rectT) {
+                    if (dx !== 0 || dy !== 0) {
+                        const patch = cfg.buildRectCornerPatch?.(st.ctx.document, rectT.id, rectT.corner, { x: dx, y: dy });
+                        if (patch)
+                            st.ctx.commit(patch);
+                    }
+                    rectTargetRef.current = null;
+                    setRectDragId(null);
+                    return;
+                }
                 // Endpoint commit: move the grabbed endpoint by the world delta.
                 const epT = epTargetRef.current;
                 if (epT) {
@@ -487,13 +606,17 @@ export const AnnotationCanvasInner = (props) => {
                 setDraggingId(null);
             };
             const cancelSelectDrag = () => {
-                // No commit — dropping draggingId/slidingId/epDragId snaps everything back.
+                // No commit — dropping the gating ids snaps everything back.
                 dragTargetRef.current = null;
                 slideTargetRef.current = null;
                 epTargetRef.current = null;
+                resizeTargetRef.current = null;
+                rectTargetRef.current = null;
                 setDraggingId(null);
                 setSlidingId(null);
                 setEpDragId(null);
+                setResizingId(null);
+                setRectDragId(null);
             };
             return Gesture.Pan()
                 .minPointers(1)
@@ -555,10 +678,12 @@ export const AnnotationCanvasInner = (props) => {
         dragEnded,
         slideCtx,
         epCtx,
+        resizeCtx,
+        rectCtx,
     ]);
     const activeTool = props.tools.find((t) => t.id === props.activeToolId) ?? null;
     const customPreview = activeTool?.renderPreview?.(state.customPreviewState, state.ctx);
-    const { renderMeasurementStamp, selection } = props;
+    const { renderMeasurementStamp, onMeasurementStampPress, selection } = props;
     return (_jsxs(GestureHandlerRootView, { style: [{ width, height }, style], children: [_jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: { width, height }, collapsable: false, children: AnnotationCanvasSkia({
                         width,
                         height,
@@ -575,27 +700,37 @@ export const AnnotationCanvasInner = (props) => {
                                 color: freehand.color,
                                 width: freehand.width,
                                 cap: freehand.cap ?? 'round',
+                                dash: freehand.dash ?? false,
                                 opacity: freehand.variant === 'highlighter' ? 0.3 : 1,
                             }
                             : null,
                         draggingId,
                         dragTransform,
+                        resizingId,
+                        resizeTransform,
                         selectedId: selection?.ids[0] ?? null,
                         endpointDragId: epDragId,
                         liveLineP1,
                         liveLineP2,
+                        rectDragId,
+                        liveRect: {
+                            x: liveRectX,
+                            y: liveRectY,
+                            width: liveRectW,
+                            height: liveRectH,
+                        },
                         handleRadius,
                         customPreview,
                     }) }) }), renderMeasurementStamp && (_jsx(View, { pointerEvents: "box-none", style: StyleSheet.absoluteFill, children: state.effectiveCanvas.placedMeasurements.map((placed) => (_jsx(MeasurementStampOverlayItem, { placed: placed, measurement: placed.measurementId
-                        ? state.measurementsById.get(placed.measurementId) ?? null
-                        : null, selected: selection?.ids.includes(placed.id) ?? false, dragging: draggingId === placed.id, sliding: slidingId === placed.id, endpointDragging: epDragId === placed.id, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, renderMeasurementStamp: renderMeasurementStamp, onRemove: () => {
+                        ? (state.measurementsById.get(placed.measurementId) ?? null)
+                        : null, selected: selection?.ids.includes(placed.id) ?? false, dragging: draggingId === placed.id, sliding: slidingId === placed.id, endpointDragging: epDragId === placed.id, rectResizing: rectDragId === placed.id, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, rectCtx: rectCtx, renderMeasurementStamp: renderMeasurementStamp, onStampPress: onMeasurementStampPress, onRemove: () => {
                         const { ops, keepSelection } = buildRemoveMeasurementOps(placed);
                         state.ctx.commit({ ops });
                         if (!keepSelection)
                             state.ctx.setSelection(null);
                     } }, placed.id))) }))] }));
 };
-const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, renderMeasurementStamp, onRemove, }) => {
+const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, onStampPress, onRemove, }) => {
     const size = STAMP_TILE_SIZE * (placed.scale ?? 1);
     const half = size / 2;
     const anchorX = placed.anchor.x;
@@ -639,6 +774,13 @@ const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging,
             worldX = ax + (bx - ax) * c.t0;
             worldY = ay + (by - ay) * c.t0;
         }
+        else if (rectResizing) {
+            // Tile stays at the LIVE rect's center: midpoint of the fixed corner
+            // and the grabbed corner with the drag delta folded in.
+            const c = rectCtx.value;
+            worldX = (c.fx + c.mx + dragX.value) / 2;
+            worldY = (c.fy + c.my + dragY.value) / 2;
+        }
         else if (dragging) {
             worldX = anchorX + dragX.value;
             worldY = anchorY + dragY.value;
@@ -658,7 +800,7 @@ const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging,
                     selected,
                     size,
                     zoom: zoomSnapshot,
-                }) }), selected && measurement && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Remove measurement", hitSlop: 10, onPress: onRemove, style: {
+                }) }), onStampPress && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Open measurement", onPress: () => onStampPress(placed), style: StyleSheet.absoluteFill })), selected && measurement && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Remove measurement", hitSlop: 10, onPress: onRemove, style: {
                     position: 'absolute',
                     top: -8,
                     right: -8,

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

@@ -10,6 +10,9 @@ type AnimatedPoint = {
         y: number;
     };
 };
+type AnimatedNumber = number | {
+    value: number;
+};
 export interface AnnotationCanvasSkiaProps {
     width: number;
     height: number;
@@ -27,20 +30,32 @@ export interface AnnotationCanvasSkiaProps {
         color: string;
         width: number;
         cap?: StrokeCap;
+        dash?: boolean;
         opacity: number;
     } | null;
     draggingId?: string | null;
     dragTransform?: Transforms3d | {
         value: Transforms3d;
     };
+    resizingId?: string | null;
+    resizeTransform?: Transforms3d | {
+        value: Transforms3d;
+    };
     selectedId?: string | null;
     endpointDragId?: string | null;
     liveLineP1?: AnimatedPoint;
     liveLineP2?: AnimatedPoint;
+    rectDragId?: string | null;
+    liveRect?: {
+        x: AnimatedNumber;
+        y: AnimatedNumber;
+        width: AnimatedNumber;
+        height: AnimatedNumber;
+    };
     handleRadius?: number | {
         value: number;
     };
     customPreview?: ReactNode;
 }
-export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, penDrawingStroke, livePreview, draggingId, dragTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, handleRadius, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, penDrawingStroke, livePreview, 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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Canvas, Circle, Group, Line, Path, Rect, Skia, } from '@shopify/react-native-skia';
-import { placementOf } from './measurementGeometry.js';
-import { arrowheadTriangle, toSkiaStrokeCap } from './strokeGeometry.js';
+import { Canvas, Circle, DashPathEffect, Group, Line, Path, Rect, Skia, } from '@shopify/react-native-skia';
+import { normalizeRect, placementOf } from './measurementGeometry.js';
+import { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } from './strokeGeometry.js';
+import { SELECTION_PAD, textResizeGeometry, textShapeBounds, } from './textGeometry.js';
 import { BackgroundImageElement } from './elements/BackgroundImageElement.js';
 import { ShapeElement } from './elements/ShapeElement.js';
 import { StrokeElement } from './elements/StrokeElement.js';
@@ -17,8 +18,9 @@ const MEASUREMENT_HANDLE_COLOR = '#0066FF';
 // Selection bounding box for strokes/shapes (measurements get handles instead).
 // Padding + stroke width are in doc units (scale with zoom) — simple and clear;
 // the box is only a "this is selected" affordance, not a precise gizmo.
+// SELECTION_PAD lives in textGeometry.ts (Skia-free) so the select tool can
+// hit-test the text resize handle, which sits on the padded box corner.
 const SELECTION_COLOR = '#0066FF';
-const SELECTION_PAD = 6;
 const SELECTION_STROKE = 1.5;
 // Bounds of a flat [x,y,x,y,…] stroke point array, or null if empty.
 const strokeBounds = (points) => {
@@ -84,7 +86,22 @@ 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, draggingId, dragTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, 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, transform: dragTransform, children: _jsx(ShapeElement, { shape: shape, font: valueFont }) }, shape.id))), effectiveCanvas.placedMeasurements.map((placed) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, penDrawingStroke, livePreview, 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) => {
+                // 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
+                // rect + (when selected) four corner handles, wrapped for group move.
+                if (placementOf(placed) === 'rectangle' && placed.rect) {
+                    const isSelected = placed.id === selectedId;
+                    const isRectDrag = placed.id === rectDragId;
+                    const rectColor = placed.lineColor ?? MEASUREMENT_LINE_COLOR;
+                    const rectWidth = placed.lineWidth ?? MEASUREMENT_LINE_WIDTH;
+                    if (isRectDrag && liveRect) {
+                        return (_jsx(Rect, { x: liveRect.x, y: liveRect.y, width: liveRect.width, height: liveRect.height, color: rectColor, style: "stroke", strokeWidth: rectWidth, children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(rectWidth) })) }, placed.id));
+                    }
+                    const n = normalizeRect(placed.rect);
+                    return (_jsxs(DraggableElement, { isDragging: placed.id === draggingId, transform: dragTransform, children: [_jsx(Rect, { x: n.minX, y: n.minY, width: n.maxX - n.minX, height: n.maxY - n.minY, color: rectColor, style: "stroke", strokeWidth: rectWidth, children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(rectWidth) })) }), isSelected && handleRadius != null && (_jsxs(_Fragment, { children: [_jsx(Circle, { c: { x: n.minX, y: n.minY }, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: { x: n.maxX, y: n.minY }, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: { x: n.minX, y: n.maxY }, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: { x: n.maxX, y: n.maxY }, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR })] }))] }, placed.id));
+                }
                 if (placementOf(placed) !== 'line' || !placed.line)
                     return null;
                 const isEndpointDrag = placed.id === endpointDragId;
@@ -109,7 +126,7 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                     p.close();
                     return p;
                 })();
-                const content = (_jsxs(_Fragment, { children: [_jsx(Line, { p1: p1, p2: p2, color: lineColor, style: "stroke", strokeWidth: lineWidth, strokeCap: toSkiaStrokeCap(placed.lineCap) }), arrowPath && (_jsx(Path, { path: arrowPath, color: lineColor, style: "fill" })), isSelected && handleRadius != null && (_jsxs(_Fragment, { children: [_jsx(Circle, { c: p1, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: p2, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR })] }))] }));
+                const content = (_jsxs(_Fragment, { children: [_jsx(Line, { p1: p1, p2: p2, color: lineColor, style: "stroke", strokeWidth: lineWidth, strokeCap: toSkiaStrokeCap(placed.lineCap), children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(lineWidth) })) }), arrowPath && (_jsx(Path, { path: arrowPath, color: lineColor, style: "fill" })), isSelected && handleRadius != null && (_jsxs(_Fragment, { children: [_jsx(Circle, { c: p1, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: p2, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR })] }))] }));
                 return isEndpointDrag ? (_jsx(Group, { children: content }, placed.id)) : (_jsx(DraggableElement, { isDragging: placed.id === draggingId, transform: dragTransform, children: content }, placed.id));
             }), (() => {
                 if (!selectedId)
@@ -122,8 +139,20 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                 }
                 const shape = effectiveCanvas.shapes.find((s) => s.id === selectedId);
                 if (shape) {
-                    const b = pointsBounds(shape.geometry.points);
-                    return b ? (_jsx(SelectionBox, { bounds: b, isDragging: isDragging, transform: dragTransform })) : null;
+                    // Text shapes derive their box from the estimated text bounds (the
+                    // stored geometry is just the top-left anchor) and add a corner
+                    // resize handle; both track the live resize transform so the chrome
+                    // scales with the shape during a native UI-thread resize.
+                    const isText = shape.kind === 'text';
+                    const b = isText
+                        ? textShapeBounds(shape)
+                        : pointsBounds(shape.geometry.points);
+                    if (!b)
+                        return null;
+                    const isResizing = shape.id === resizingId;
+                    const liveTransform = isResizing ? resizeTransform : dragTransform;
+                    const resizeGeom = isText ? textResizeGeometry(shape) : null;
+                    return (_jsxs(_Fragment, { children: [_jsx(SelectionBox, { bounds: b, isDragging: isDragging || isResizing, transform: liveTransform }), resizeGeom && handleRadius != null && (_jsx(DraggableElement, { isDragging: isDragging || isResizing, transform: liveTransform, children: _jsx(Circle, { c: resizeGeom.handle, r: handleRadius, color: SELECTION_COLOR }) }))] }));
                 }
                 return null;
-            })(), penDrawingStroke && _jsx(StrokeElement, { stroke: penDrawingStroke }), livePreview && (_jsx(Path, { path: livePreview.path, color: livePreview.color, style: "stroke", strokeWidth: livePreview.width, strokeCap: toSkiaStrokeCap(livePreview.cap), strokeJoin: "round", opacity: livePreview.opacity })), customPreview] }) }));
+            })(), penDrawingStroke && _jsx(StrokeElement, { stroke: penDrawingStroke }), livePreview && (_jsx(Path, { path: livePreview.path, color: livePreview.color, style: "stroke", strokeWidth: livePreview.width, strokeCap: toSkiaStrokeCap(livePreview.cap), strokeJoin: "round", opacity: livePreview.opacity, children: livePreview.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(livePreview.width) })) })), customPreview] }) }));

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

@@ -1,7 +1,12 @@
 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 { ResizeGeometry } from './textGeometry.js';
 import type { ViewportApi } from './viewport.js';
+export type RequestTextInput = (options?: {
+    initialText?: string;
+}) => Promise<string | null>;
 export interface CanvasPointerEvent {
     pointerId: number;
     world: Vec2;
@@ -20,6 +25,9 @@ export interface ToolContext {
     commit(patch: AnnotationDocumentPatch): void;
     setSelection(selection: Selection | null): void;
     requestPickMeasurement(): Promise<MeasurementRef | null>;
+    requestTextInput(options?: {
+        initialText?: string;
+    }): Promise<string | null>;
     applyPan(deltaScreen: Vec2): void;
     applyZoom(focalScreen: Vec2, nextZoom: number): void;
 }
@@ -29,6 +37,7 @@ export interface FreehandConfig {
     color: string;
     width: number;
     cap?: StrokeCap;
+    dash?: boolean;
     minSampleDistance: number;
 }
 export type DragElementKind = 'stroke' | 'shape' | 'measurement';
@@ -42,6 +51,14 @@ export interface DragSelectionConfig {
     buildSlidePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2, zoom: number): AnnotationDocumentPatch | null;
     hitTestHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): 'a' | 'b' | null;
     buildEndpointPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, handle: 'a' | 'b', delta: Vec2): AnnotationDocumentPatch | null;
+    hitTestRectCorner?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): {
+        corner: RectCorner;
+        moving: Vec2;
+        fixed: Vec2;
+    } | null;
+    buildRectCornerPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, corner: RectCorner, delta: Vec2): AnnotationDocumentPatch | null;
+    hitTestResizeHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): ResizeGeometry | null;
+    buildResizePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2): AnnotationDocumentPatch | null;
 }
 export interface Tool {
     id: string;

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

@@ -2,7 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Image, useImage } from '@shopify/react-native-skia';
 import { memo, useEffect, useRef, useState } from 'react';
 const computeFit = (imgW, imgH, docW, docH, fit) => {
-    if (fit === 'stretch') {
+    // Guard against unknown/zero image dimensions: dividing by them yields
+    // Infinity → NaN geometry, and a <Image> with NaN bounds renders nothing
+    // (a silent "background never appears"). Fall back to filling the doc.
+    if (!(imgW > 0) || !(imgH > 0) || fit === 'stretch') {
         return { x: 0, y: 0, width: docW, height: docH };
     }
     const scale = fit === 'cover'

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

@@ -1,6 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Circle, Line, Path, Rect, Skia, Text, } from '@shopify/react-native-skia';
+import { Circle, DashPathEffect, Group, Line, Path, Rect, Skia, Text, } 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) => {
     const path = Skia.Path.Make();
     if (points.length === 0)
@@ -53,12 +59,32 @@ export const ShapeElement = memo(({ shape, font }) => {
             return (_jsxs(_Fragment, { children: [fill && _jsx(Path, { path: polyPath, color: fill }), _jsx(Path, { path: polyPath, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
         }
         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.
             const [origin] = geometry.points;
             if (!origin || !text)
                 return null;
             if (!font)
                 return null;
-            return (_jsx(Text, { x: origin.x, y: origin.y, text: text, font: font, color: stroke }));
+            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))) }));
         }
     }
 });

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Path, Skia } from '@shopify/react-native-skia';
+import { DashPathEffect, Path, Skia, } from '@shopify/react-native-skia';
 import { memo, useMemo } from 'react';
-import { arrowheadTriangle, toSkiaStrokeCap } from '../strokeGeometry.js';
+import { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } from '../strokeGeometry.js';
 export const pointsToSkPath = (points) => {
     const path = Skia.Path.Make();
     if (points.length < 2)
@@ -36,5 +36,10 @@ export const StrokeElement = memo(({ stroke }) => {
     const path = useMemo(() => pointsToSkPath(stroke.points), [stroke.points]);
     const arrow = useMemo(() => arrowheadPath(stroke), [stroke.points, stroke.cap, stroke.width]);
     const opacity = stroke.tool === 'highlighter' ? 0.3 : 1;
-    return (_jsxs(_Fragment, { children: [_jsx(Path, { path: path, color: stroke.color, style: "stroke", strokeWidth: stroke.width, strokeCap: toSkiaStrokeCap(stroke.cap), strokeJoin: "round", opacity: opacity }), arrow && (_jsx(Path, { path: arrow, color: stroke.color, style: "fill", opacity: opacity }))] }));
+    // A tap-dot is a zero-length two-point path; a dash effect would erase it
+    // (the contour has no length to dash), so dots always render solid.
+    const isDot = stroke.points.length === 4 &&
+        stroke.points[0] === stroke.points[2] &&
+        stroke.points[1] === stroke.points[3];
+    return (_jsxs(_Fragment, { children: [_jsx(Path, { path: path, color: stroke.color, style: "stroke", strokeWidth: stroke.width, strokeCap: toSkiaStrokeCap(stroke.cap), strokeJoin: "round", opacity: opacity, children: stroke.dash && !isDot && (_jsx(DashPathEffect, { intervals: dashIntervals(stroke.width) })) }), arrow && (_jsx(Path, { path: arrow, color: stroke.color, style: "fill", opacity: opacity }))] }));
 });