@reekon-tools/boldr-utils 1.6.17 → 1.6.19

package/dist/annotation/canvas/AnnotationCanvasInner.js

@@ -9,6 +9,9 @@ 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;
+// Screen-px stroke width of the handle's colored ring (matches native
+// HANDLE_RING_PX); the white-disc + ring keeps the knob legible on any line.
+const HANDLE_RING_PX = 2;
 const DEFAULT_PAN_TRIGGERS = ['middleMouse', 'space'];
 export const AnnotationCanvasInner = (props) => {
     const { resolveImageUrl, stampFontSource, stampValueFontSize = 14, gestures, width, height, style, activeToolId, tools, } = props;
@@ -206,13 +209,16 @@ export const AnnotationCanvasInner = (props) => {
                 handleRadius: activeTool?.dragSelection
                     ? HANDLE_PX / state.viewport.zoom
                     : undefined,
+                handleRingWidth: activeTool?.dragSelection
+                    ? HANDLE_RING_PX / state.viewport.zoom
+                    : undefined,
                 customPreview,
             }), renderMeasurementStamp && (_jsx("div", { style: {
                     position: 'absolute',
                     inset: 0,
                     pointerEvents: 'none',
                 }, children: state.effectiveCanvas.placedMeasurements.map((placed) => {
-                    const size = stampTileSize(placed);
+                    const size = stampTileSize(placed, state.effectiveCanvas.tileScaleFactor, state.tileViewportScale);
                     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

@@ -15,6 +15,9 @@ const makeStrokeId = () => `stroke-${Date.now().toString(36)}-${(strokeCounter++
 // Screen-px radius of a measurement-annotation endpoint handle dot. Divided by
 // the live zoom so the handle is a constant on-screen size.
 const HANDLE_RADIUS_PX = 7;
+// Screen-px stroke width of the handle's colored ring (white-disc + ring, so the
+// knob stays legible over a line of any color). Also zoom-divided.
+const HANDLE_RING_PX = 2;
 // Native fingerprint: one finger drives the active tool, two fingers
 // pan/zoom the viewport. Tap counts as a brief pointer down+up so tools
 // like measurement-stamp (which only listen to onPointerUp) work via tap.
@@ -315,6 +318,13 @@ export const AnnotationCanvasInner = (props) => {
     const [epDragId, setEpDragId] = useState(null);
     const epCtx = useSharedValue({ ax: 0, ay: 0, bx: 0, by: 0, t0: 0.5, handle: 0 });
     const epTargetRef = useRef(null);
+    // Endpoint drag of a line/arrow SHAPE (vs. a measurement line above).
+    // `shapeEpDragId` (React state) tells the Skia layer to render that shape's
+    // line from the live endpoints; the live geometry rides the SAME `epCtx` +
+    // `liveLineP1`/`liveLineP2` shared values (only one endpoint drag is ever in
+    // flight). A separate target ref keys the commit to buildShapeEndpointPatch.
+    const [shapeEpDragId, setShapeEpDragId] = useState(null);
+    const shapeEpTargetRef = useRef(null);
     // Live line endpoints during an endpoint drag: the grabbed handle follows the
     // finger (dragX/dragY); the other stays put. Fed to the Skia <Line> for the
     // dragged annotation.
@@ -338,6 +348,10 @@ export const AnnotationCanvasInner = (props) => {
         'worklet';
         return HANDLE_RADIUS_PX / zoom.value;
     });
+    const handleRingWidth = useDerivedValue(() => {
+        'worklet';
+        return HANDLE_RING_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
@@ -758,6 +772,27 @@ export const AnnotationCanvasInner = (props) => {
                             return;
                         }
                     }
+                    // Endpoint handle of a line/arrow shape — selected-element-only, and
+                    // distinct from the measurement-line handle above (different storage).
+                    const shapeHandle = cfg.hitTestShapeHandle?.(st.ctx.document, selId, world, zoomNow);
+                    if (shapeHandle) {
+                        const s = st.ctx.document.shapes.find((x) => x.id === selId);
+                        const a = s?.geometry.points[0];
+                        const b = s?.geometry.points[1];
+                        if (a && b) {
+                            epCtx.value = {
+                                ax: a.x,
+                                ay: a.y,
+                                bx: b.x,
+                                by: b.y,
+                                t0: 0.5,
+                                handle: shapeHandle === 'a' ? 0 : 1,
+                            };
+                            shapeEpTargetRef.current = { id: selId, handle: shapeHandle };
+                            setShapeEpDragId(selId);
+                            return;
+                        }
+                    }
                     // Corner resize handle (text shapes) — also selected-element-only.
                     const resizeGeom = cfg.hitTestResizeHandle?.(st.ctx.document, selId, world, zoomNow);
                     if (resizeGeom) {
@@ -787,7 +822,7 @@ export const AnnotationCanvasInner = (props) => {
                         return;
                     }
                 }
-                const hit = cfg.hitTest(st.ctx.document, world, zoomNow);
+                const hit = cfg.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale);
                 if (!hit) {
                     st.ctx.setSelection(null);
                     dragTargetRef.current = null;
@@ -796,7 +831,7 @@ export const AnnotationCanvasInner = (props) => {
                 st.ctx.setSelection({ ids: [hit.id] });
                 // Grabbing a line annotation's tile slides it; otherwise group-move.
                 const grab = hit.kind === 'measurement'
-                    ? cfg.classifyMeasurementGrab?.(st.ctx.document, hit.id, world, zoomNow)
+                    ? cfg.classifyMeasurementGrab?.(st.ctx.document, hit.id, world, zoomNow, st.ctx.tileViewportScale)
                     : 'move';
                 if (grab === 'slide') {
                     const m = st.ctx.document.placedMeasurements.find((x) => x.id === hit.id);
@@ -859,6 +894,18 @@ export const AnnotationCanvasInner = (props) => {
                     setEpDragId(null);
                     return;
                 }
+                // Shape endpoint commit: move the grabbed endpoint by the world delta.
+                const sepT = shapeEpTargetRef.current;
+                if (sepT) {
+                    if (dx !== 0 || dy !== 0) {
+                        const patch = cfg.buildShapeEndpointPatch?.(st.ctx.document, sepT.id, sepT.handle, { x: dx, y: dy });
+                        if (patch)
+                            st.ctx.commit(patch);
+                    }
+                    shapeEpTargetRef.current = null;
+                    setShapeEpDragId(null);
+                    return;
+                }
                 // Slide commit: map the final world delta to a clamped/snapped linePos.
                 const slideT = slideTargetRef.current;
                 if (slideT) {
@@ -891,11 +938,13 @@ export const AnnotationCanvasInner = (props) => {
                 dragTargetRef.current = null;
                 slideTargetRef.current = null;
                 epTargetRef.current = null;
+                shapeEpTargetRef.current = null;
                 resizeTargetRef.current = null;
                 rectTargetRef.current = null;
                 setDraggingId(null);
                 setSlidingId(null);
                 setEpDragId(null);
+                setShapeEpDragId(null);
                 setResizingId(null);
                 setRectDragId(null);
             };
@@ -1018,6 +1067,7 @@ export const AnnotationCanvasInner = (props) => {
                         resizeTransform,
                         selectedId: selection?.ids[0] ?? null,
                         endpointDragId: epDragId,
+                        shapeEndpointDragId: shapeEpDragId,
                         liveLineP1,
                         liveLineP2,
                         rectDragId,
@@ -1033,18 +1083,21 @@ export const AnnotationCanvasInner = (props) => {
                         // measurement still shows its tile chrome but must not advertise
                         // draggability).
                         handleRadius: activeTool?.dragSelection ? handleRadius : undefined,
+                        handleRingWidth: activeTool?.dragSelection
+                            ? handleRingWidth
+                            : undefined,
                         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, 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, onStampLongPress: onMeasurementStampLongPress, onRemove: () => {
+                        : 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, tileScaleFactor: state.effectiveCanvas.tileScaleFactor, tileViewportScale: state.tileViewportScale, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, 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, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, onStampPress, onStampLongPress, onRemove, }) => {
-    const size = stampTileSize(placed);
+const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, tileScaleFactor, tileViewportScale, onStampPress, onStampLongPress, onRemove, }) => {
+    const size = stampTileSize(placed, tileScaleFactor, tileViewportScale);
     const half = size / 2;
     const anchorX = placed.anchor.x;
     const anchorY = placed.anchor.y;

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

@@ -59,6 +59,7 @@ export interface AnnotationCanvasSkiaProps {
     };
     selectedId?: string | null;
     endpointDragId?: string | null;
+    shapeEndpointDragId?: string | null;
     liveLineP1?: AnimatedPoint;
     liveLineP2?: AnimatedPoint;
     rectDragId?: string | null;
@@ -71,7 +72,10 @@ export interface AnnotationCanvasSkiaProps {
     handleRadius?: number | {
         value: number;
     };
+    handleRingWidth?: number | {
+        value: number;
+    };
     customPreview?: ReactNode;
 }
-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 declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, handleRingWidth, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/annotation/canvas/AnnotationCanvasSkia.js

@@ -22,6 +22,12 @@ const MEASUREMENT_HANDLE_COLOR = '#0066FF';
 // hit-test the text resize handle, which sits on the padded box corner.
 const SELECTION_COLOR = '#0066FF';
 const SELECTION_STROKE = 1.5;
+// A draggable selection handle (line endpoints, rect corners, text resize):
+// a white disc with a colored ring, so it reads as a distinct, grabbable knob
+// over a line of ANY color — including the default measurement-line blue, which
+// a solid-colored handle would camouflage into. `c`/`r`/`ringWidth` may be
+// Reanimated values (native live-drag) or plain numbers (web).
+const Handle = ({ c, r, ringWidth, color = MEASUREMENT_HANDLE_COLOR, }) => (_jsxs(_Fragment, { children: [_jsx(Circle, { c: c, r: r, color: "#FFFFFF" }), _jsx(Circle, { c: c, r: r, color: color, style: "stroke", strokeWidth: ringWidth })] }));
 // Bounds of a flat [x,y,x,y,…] stroke point array, or null if empty.
 const strokeBounds = (points) => {
     if (points.length < 2)
@@ -86,7 +92,46 @@ 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, 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) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, handleRingWidth, 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) => {
+                // Line/arrow shapes support endpoint editing. When selected they show
+                // grab handles at both ends; during an endpoint drag the line renders
+                // from the live endpoints (one following the finger) — the shape twin
+                // of the measurement-line endpoint drag below. Other shapes, and
+                // unselected lines, fall through to the plain ShapeElement render so
+                // their memoization is preserved.
+                if (shape.kind === 'line' || shape.kind === 'arrow') {
+                    const isEndpointDrag = shape.id === shapeEndpointDragId;
+                    const isSelected = shape.id === selectedId;
+                    const [a, b] = shape.geometry.points;
+                    if ((isEndpointDrag || isSelected) && a && b) {
+                        const stroke = shape.style.stroke ?? '#000000';
+                        const strokeWidth = shape.style.strokeWidth ?? 2;
+                        const hasArrow = shape.kind === 'arrow' || shape.style.cap === 'arrow';
+                        const handles = handleRadius != null ? (_jsxs(_Fragment, { children: [_jsx(Handle, { c: isEndpointDrag && liveLineP1 ? liveLineP1 : a, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }), _jsx(Handle, { c: isEndpointDrag && liveLineP2 ? liveLineP2 : b, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR })] })) : null;
+                        // Endpoint drag: render the body live from the moving endpoints
+                        // (outside any group translate), suppressing the static arrowhead
+                        // so it doesn't lag the finger — it reappears on commit. Selected
+                        // but idle: reuse ShapeElement for the body (caps/arrowhead/dash)
+                        // and overlay the handles, both wrapped so a group move tracks.
+                        if (isEndpointDrag) {
+                            const arrowPath = (() => {
+                                if (!hasArrow)
+                                    return null;
+                                const [apex, baseL, baseR] = arrowheadTriangle(b, a, 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;
+                            })();
+                            return (_jsxs(Group, { children: [_jsx(Line, { p1: liveLineP1 ?? a, p2: liveLineP2 ?? b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(shape.style.cap), children: shape.style.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(strokeWidth) })) }), handles, arrowPath && (_jsx(Path, { path: arrowPath, color: stroke, style: "fill" }))] }, shape.id));
+                        }
+                        return (_jsxs(DraggableElement, { isDragging: shape.id === draggingId, transform: dragTransform, children: [_jsx(ShapeElement, { shape: shape, font: valueFont, textFontMgr: textFontMgr }), handles] }, shape.id));
+                    }
+                }
+                return (_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
@@ -100,7 +145,7 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                         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));
+                    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(Handle, { c: { x: n.minX, y: n.minY }, r: handleRadius, ringWidth: handleRingWidth }), _jsx(Handle, { c: { x: n.maxX, y: n.minY }, r: handleRadius, ringWidth: handleRingWidth }), _jsx(Handle, { c: { x: n.minX, y: n.maxY }, r: handleRadius, ringWidth: handleRingWidth }), _jsx(Handle, { c: { x: n.maxX, y: n.maxY }, r: handleRadius, ringWidth: handleRingWidth })] }))] }, placed.id));
                 }
                 if (placementOf(placed) !== 'line' || !placed.line)
                     return null;
@@ -126,7 +171,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), 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 })] }))] }));
+                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(Handle, { c: p1, r: handleRadius, ringWidth: handleRingWidth }), _jsx(Handle, { c: p2, r: handleRadius, ringWidth: handleRingWidth })] }))] }));
                 return isEndpointDrag ? (_jsx(Group, { children: content }, placed.id)) : (_jsx(DraggableElement, { isDragging: placed.id === draggingId, transform: dragTransform, children: content }, placed.id));
             }), (() => {
                 if (!selectedId)
@@ -139,6 +184,10 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                 }
                 const shape = effectiveCanvas.shapes.find((s) => s.id === selectedId);
                 if (shape) {
+                    // Line/arrow shapes show endpoint handles (drawn with the shape
+                    // above), not a bounding box — matching the measurement-line UX.
+                    if (shape.kind === 'line' || shape.kind === 'arrow')
+                        return 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
@@ -152,7 +201,7 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                     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 (_jsxs(_Fragment, { children: [_jsx(SelectionBox, { bounds: b, isDragging: isDragging || isResizing, transform: liveTransform }), resizeGeom && handleRadius != null && (_jsx(DraggableElement, { isDragging: isDragging || isResizing, transform: liveTransform, children: _jsx(Handle, { c: resizeGeom.handle, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }) }))] }));
                 }
                 return null;
             })(), penDrawingStroke && _jsx(StrokeElement, { stroke: penDrawingStroke }), shapePreview && (_jsxs(_Fragment, { children: [_jsx(Path, { path: shapePreview.path, color: shapePreview.color, style: "stroke", strokeWidth: shapePreview.width, strokeCap: toSkiaStrokeCap(shapePreview.cap), strokeJoin: "round", children: shapePreview.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(shapePreview.width) })) }), _jsx(Path, { path: shapePreview.headPath, color: shapePreview.color, style: "fill" })] })), livePreview?.handoffPaths?.map((p, i) => (_jsx(Path, { path: p, 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) })) }, i))), 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

@@ -22,6 +22,7 @@ export interface ToolContext {
     document: AnnotationCanvasState;
     selection: Selection | null;
     viewport: ViewportApi;
+    tileViewportScale: number;
     preview(patch: AnnotationDocumentPatch): void;
     commit(patch: AnnotationDocumentPatch): void;
     setSelection(selection: Selection | null): void;
@@ -50,15 +51,17 @@ export interface ShapeDrawConfig {
 }
 export type DragElementKind = 'stroke' | 'shape' | 'measurement';
 export interface DragSelectionConfig {
-    hitTest(doc: AnnotationCanvasState, world: Vec2, zoom: number): {
+    hitTest(doc: AnnotationCanvasState, world: Vec2, zoom: number, viewportTileScale?: number): {
         id: AnnotationElementId;
         kind: DragElementKind;
     } | null;
     buildTranslatePatch(doc: AnnotationCanvasState, id: AnnotationElementId, kind: DragElementKind, delta: Vec2): AnnotationDocumentPatch | null;
-    classifyMeasurementGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): 'slide' | 'move';
+    classifyMeasurementGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number): 'slide' | 'move';
     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;
+    hitTestShapeHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): 'a' | 'b' | null;
+    buildShapeEndpointPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, handle: 'a' | 'b', delta: Vec2): AnnotationDocumentPatch | null;
     hitTestRectCorner?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): {
         corner: RectCorner;
         moving: Vec2;

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

@@ -36,7 +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 declare const hitPlacedMeasurement: (m: PlacedMeasurementRef, p: Vec2, zoom?: number, tileScaleFactor?: number, viewportScale?: number) => boolean;
 export interface RemoveMeasurementResult {
     ops: AnnotationPatchOp[];
     keepSelection: boolean;

package/dist/annotation/canvas/measurementGeometry.js

@@ -109,14 +109,15 @@ const segmentDistSq = (p, a, b) => {
 // 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) => {
+export const hitPlacedMeasurement = (m, p, zoom = 1, tileScaleFactor = 1, viewportScale = 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 half = (stampTileSize(m, tileScaleFactor, viewportScale) / 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,5 +1,11 @@
 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 DEFAULT_TILE_SCALE = 1;
+export declare const TILE_SCALE_MIN = 0.4;
+export declare const TILE_SCALE_MAX = 2;
+export declare const clampTileScale: (v: number) => number;
+export declare const renderedDocWidthAtFit: (canvasW: number, canvasH: number, docW: number, docH: number) => number;
+export declare const viewportTileScale: (canvasW: number, canvasH: number, docW: number, docH: number) => number;
 export declare const isUnassociatedStamp: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath">) => boolean;
-export declare const stampTileSize: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "scale">) => number;
+export declare const stampTileSize: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "scale">, tileScaleFactor?: number, viewportScale?: number) => number;

package/dist/annotation/canvas/stampLayout.js

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

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

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

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

@@ -37,11 +37,11 @@ const segmentDistanceSq = (px, py, ax, ay, bx, by) => {
     const dy = py - cy;
     return dx * dx + dy * dy;
 };
-const findHit = (doc, world, zoom) => {
+const findHit = (doc, world, zoom, viewportTileScale = 1) => {
     // Hit-test in z-order (top first): measurements > shapes > strokes.
     for (let i = doc.placedMeasurements.length - 1; i >= 0; i--) {
         const m = doc.placedMeasurements[i];
-        if (hitPlacedMeasurement(m, world, zoom)) {
+        if (hitPlacedMeasurement(m, world, zoom, doc.tileScaleFactor, viewportTileScale)) {
             return { id: m.id, kind: 'measurement' };
         }
     }
@@ -128,12 +128,16 @@ const translatePatch = (elementKind, id, doc, delta) => {
 // via DragSelectionConfig AND the web pointer handlers — one source of truth) ---
 // Grabbing the tile of a line annotation slides it along the line; everything
 // else (bare stamps, grabs on the line body) is a group move.
-const classifyGrab = (doc, id, world, zoom) => {
+const classifyGrab = (doc, id, world, zoom, viewportTileScale = 1) => {
     const m = doc.placedMeasurements.find((x) => x.id === id);
     if (!m)
         return 'move';
-    // Same footprint the tile is drawn at (smaller for unassociated inputs, #6).
-    const half = (stampTileSize(m) / 2 + HIT_PADDING) / zoom;
+    // Same footprint the tile is drawn at (smaller for unassociated inputs, #6;
+    // folds in the document-wide tile scale + viewport scale so slide-grab
+    // matches the draw).
+    const half = (stampTileSize(m, doc.tileScaleFactor, viewportTileScale) / 2 +
+        HIT_PADDING) /
+        zoom;
     const onTile = Math.abs(world.x - m.anchor.x) <= half &&
         Math.abs(world.y - m.anchor.y) <= half;
     return onTile && placementOf(m) === 'line' && m.line ? 'slide' : 'move';
@@ -190,6 +194,48 @@ const endpointPatch = (doc, id, handle, delta) => {
     const anchor = recomputeAnchor(line, 'line', linePosOf(m), m.anchor);
     return { ops: [{ op: 'updateMeasurement', id, patch: { line, anchor } }] };
 };
+// Which endpoint handle of a (selected) line/arrow SHAPE is under `world`.
+// Shape lines store their endpoints as geometry.points[0]/[1] (unlike
+// measurement lines, which carry them on `line.a/b` alongside a tile). Prefers
+// the nearer endpoint when both are within range.
+const findShapeHandleHit = (doc, id, world, zoom) => {
+    const s = doc.shapes.find((x) => x.id === id);
+    if (!s || (s.kind !== 'line' && s.kind !== 'arrow'))
+        return null;
+    const [a, b] = s.geometry.points;
+    if (!a || !b)
+        return null;
+    const r2 = (HANDLE_GRAB_PX / zoom) ** 2;
+    const da = (world.x - a.x) ** 2 + (world.y - a.y) ** 2;
+    const db = (world.x - b.x) ** 2 + (world.y - b.y) ** 2;
+    if (da <= r2 && da <= db)
+        return 'a';
+    if (db <= r2)
+        return 'b';
+    return null;
+};
+// Move one endpoint of a line/arrow shape by a world delta (resize/rotate).
+// Rewrites the whole geometry (updateShape merges shallowly at the top level,
+// so `closed` and any other geometry fields must be carried through).
+const shapeEndpointPatch = (doc, id, handle, delta) => {
+    const s = doc.shapes.find((x) => x.id === id);
+    if (!s || (s.kind !== 'line' && s.kind !== 'arrow'))
+        return null;
+    const [a, b] = s.geometry.points;
+    if (!a || !b)
+        return null;
+    const na = handle === 'a' ? { x: a.x + delta.x, y: a.y + delta.y } : a;
+    const nb = handle === 'b' ? { x: b.x + delta.x, y: b.y + delta.y } : b;
+    return {
+        ops: [
+            {
+                op: 'updateShape',
+                id,
+                patch: { geometry: { ...s.geometry, points: [na, nb] } },
+            },
+        ],
+    };
+};
 // Which corner handle of a (selected) rectangle annotation is under `world`.
 // Prefers the nearest corner when several are within range (small rects).
 const findRectCornerHit = (doc, id, world, zoom) => {
@@ -272,7 +318,11 @@ const resizePatch = (doc, id, delta) => {
 // Patch for the current drag mode (web pointer path), from a world-space delta.
 const dragPatch = (s, doc, delta, zoom) => {
     if (s.mode === 'endpoint' && s.handle) {
-        return endpointPatch(doc, s.id, s.handle, delta);
+        // Shape lines and measurement lines store endpoints differently, so the
+        // patch builder is keyed on which kind is being dragged.
+        return s.elementKind === 'shape'
+            ? shapeEndpointPatch(doc, s.id, s.handle, delta)
+            : endpointPatch(doc, s.id, s.handle, delta);
     }
     if (s.mode === 'slide')
         return slidePatch(doc, s.id, delta, zoom);
@@ -292,7 +342,7 @@ export const createSelectTool = () => ({
     // reusing the same hit-test and translate logic the pointer handlers below
     // use for web — one source of truth.
     dragSelection: {
-        hitTest: (doc, world, zoom) => findHit(doc, world, zoom),
+        hitTest: (doc, world, zoom, viewportTileScale) => findHit(doc, world, zoom, viewportTileScale),
         buildTranslatePatch: (doc, id, kind, delta) => {
             const op = translatePatch(kind, id, doc, delta);
             return op ? { ops: [op] } : null;
@@ -301,6 +351,8 @@ export const createSelectTool = () => ({
         buildSlidePatch: slidePatch,
         hitTestHandle: findHandleHit,
         buildEndpointPatch: endpointPatch,
+        hitTestShapeHandle: findShapeHandleHit,
+        buildShapeEndpointPatch: shapeEndpointPatch,
         hitTestResizeHandle: findResizeHandleHit,
         buildResizePatch: resizePatch,
         hitTestRectCorner: findRectCornerHit,
@@ -328,6 +380,19 @@ export const createSelectTool = () => ({
                     delta: { x: 0, y: 0 },
                 };
             }
+            const shapeHandle = findShapeHandleHit(ctx.document, selId, world, zoom);
+            if (shapeHandle) {
+                ctx.setSelection({ ids: [selId] });
+                return {
+                    kind: 'dragging',
+                    id: selId,
+                    elementKind: 'shape',
+                    mode: 'endpoint',
+                    handle: shapeHandle,
+                    start: world,
+                    delta: { x: 0, y: 0 },
+                };
+            }
             if (findResizeHandleHit(ctx.document, selId, world, zoom)) {
                 return {
                     kind: 'dragging',
@@ -352,14 +417,15 @@ export const createSelectTool = () => ({
                 };
             }
         }
-        const hit = findHit(ctx.document, world, zoom);
+        const hit = findHit(ctx.document, world, zoom, ctx.tileViewportScale);
         if (!hit) {
             ctx.setSelection(null);
             return { kind: 'idle' };
         }
         ctx.setSelection({ ids: [hit.id] });
         const mode = hit.kind === 'measurement' &&
-            classifyGrab(ctx.document, hit.id, world, zoom) === 'slide'
+            classifyGrab(ctx.document, hit.id, world, zoom, ctx.tileViewportScale) ===
+                'slide'
             ? 'slide'
             : 'move';
         return {

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

@@ -49,6 +49,7 @@ export interface AnnotationCanvasStateApi {
     activeTool: Tool | null;
     toolState: ToolState;
     ctx: ToolContext;
+    tileViewportScale: number;
     penDrawingStroke: AnnotationStroke | null;
     customPreviewState: ToolState;
     dispatchPointerDown(event: CanvasPointerEvent): void;

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { applyPatch, invertPatch, DEFAULT_LAYER_ID, } from '../../types/annotation.js';
 import { createViewportApi, panBy, zoomAt, DEFAULT_VIEWPORT, } from './viewport.js';
 import { recomputeAnchor, rectCenter, DEFAULT_LINE_POS, } from './measurementGeometry.js';
+import { viewportTileScale } from './stampLayout.js';
 // Platform-agnostic state machine for the annotation canvas. Web and native
 // inners share this hook; each wraps it with platform-specific event
 // capture and JSX (div + DOM events vs. GestureDetector + RN Views).
@@ -21,10 +22,16 @@ export const useAnnotationCanvasState = (props) => {
         return map;
     }, [measurements]);
     const viewportApi = useMemo(() => createViewportApi(viewport), [viewport]);
+    // How large the document renders when fit to this canvas, as a tile-footprint
+    // multiplier (zoom-independent). Keeps tiles a consistent fraction of the
+    // drawing on a phone vs a desktop pane. Used by the overlays (drawn size) and
+    // the tools (hit box) so both agree.
+    const tileViewportScale = useMemo(() => viewportTileScale(width, height, canvas.viewport.width, canvas.viewport.height), [width, height, canvas.viewport.width, canvas.viewport.height]);
     const ctx = useMemo(() => ({
         document: canvas,
         selection,
         viewport: viewportApi,
+        tileViewportScale,
         preview(patch) {
             setPreviewPatch(patch);
         },
@@ -56,6 +63,7 @@ export const useAnnotationCanvasState = (props) => {
         canvas,
         selection,
         viewportApi,
+        tileViewportScale,
         onCommit,
         onSelectionChange,
         pickMeasurement,
@@ -361,6 +369,7 @@ export const useAnnotationCanvasState = (props) => {
         activeTool,
         toolState,
         ctx,
+        tileViewportScale,
         penDrawingStroke,
         customPreviewState: toolState,
         dispatchPointerDown,

package/dist/exports.d.ts

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

package/dist/exports.js

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

package/dist/types/annotation.d.ts

@@ -103,6 +103,7 @@ export interface AnnotationCanvasState {
     strokes: AnnotationStroke[];
     shapes: AnnotationShape[];
     placedMeasurements: PlacedMeasurementRef[];
+    tileScaleFactor?: number;
     externalPayloadPath?: string;
 }
 export type AnnotationElement = (AnnotationStroke & {
@@ -148,6 +149,9 @@ export type AnnotationPatchOp = {
 } | {
     op: 'setViewport';
     patch: Partial<AnnotationViewport>;
+} | {
+    op: 'setTileScaleFactor';
+    value: number;
 } | {
     op: 'setLayers';
     layers: AnnotationLayer[];

package/dist/types/annotation.js

@@ -67,6 +67,8 @@ const applyOp = (state, op) => {
             };
         case 'setViewport':
             return { ...state, viewport: { ...state.viewport, ...op.patch } };
+        case 'setTileScaleFactor':
+            return { ...state, tileScaleFactor: op.value };
         case 'setLayers':
             return { ...state, layers: op.layers };
     }
@@ -141,6 +143,10 @@ const invertOp = (before, op) => {
             }
             return { op: 'setViewport', patch: inversePatch };
         }
+        case 'setTileScaleFactor':
+            // Restore the prior factor; absent → an explicit 1 (visually identical to
+            // absent), keeping the op's `value: number` contract.
+            return { op: 'setTileScaleFactor', value: before.tileScaleFactor ?? 1 };
         case 'setLayers':
             return { op: 'setLayers', layers: before.layers };
     }

package/dist/types/firestore.d.ts

@@ -217,6 +217,7 @@ export interface Job extends FirestoreDoc, Timestamps {
     address?: string;
     description?: string;
     starred?: boolean;
+    lastModified: Date;
 }
 export interface Section extends Timestamps {
     id: string;
@@ -426,6 +427,53 @@ export declare enum DecimalTolerance {
     Hundredth = "0.01",
     Thousandth = "0.001"
 }
+/**
+ * Trade/industry a user works in. Collected during registration to personalize
+ * the experience. String values are stable identifiers safe for persistence and
+ * analytics; they double as i18n key suffixes (e.g. `trades.iron_worker`).
+ */
+export declare enum UserTrades {
+    Woodworking = "woodworking",
+    Plumbing = "plumbing",
+    Electrical = "electrical",
+    Structural = "structural",
+    Framing = "framing",
+    Carpenter = "carpenter",
+    IronWorker = "iron_worker",
+    Joiners = "joiners",
+    HVAC = "hvac",
+    Painting = "painting",
+    GC = "gc",
+    IT = "it",
+    Surveying = "surveying",
+    Pipefitter = "pipe_fitter",
+    Drywall = "drywall",
+    Welding = "welding",
+    Flooring = "flooring",
+    Decking = "decking",
+    Tile = "tile",
+    DIY = "diy",
+    Other = "other"
+}
+/**
+ * Role a user holds within their trade. Collected during registration. String
+ * values double as i18n key suffixes (e.g. `roles.project_manager`).
+ */
+export declare enum UserRoles {
+    Apprentice = "apprentice",
+    Journeyman = "journeyman",
+    Owner = "owner",
+    ProjectManager = "project_manager",
+    Supervisor = "supervisor",
+    Foreman = "foreman",
+    Superintendent = "superintendent",
+    Estimator = "estimator",
+    OfficeManager = "office_manager",
+    Operator = "operator",
+    Laborer = "laborer",
+    Engineer = "engineer",
+    Safety = "safety"
+}
 export interface UserDocument extends FirestoreDoc, Timestamps {
     defaultOrganization: string;
     displayName: string;
@@ -439,6 +487,12 @@ export interface UserDocument extends FirestoreDoc, Timestamps {
     printLabelSize: string;
     printLogoFileId: string;
     devices?: Record<string, string>;
+    /** Four-digit birth year. Optional — not required during registration. */
+    birthYear?: number;
+    /** The trade/industry the user works in. Captured during registration. */
+    industry?: UserTrades;
+    /** The user's role within their trade. Optional. */
+    role?: UserRoles;
 }
 export interface UserComment extends FirestoreDoc, Timestamps {
     comment: string;

package/dist/types/firestore.js

@@ -123,3 +123,52 @@ export var DecimalTolerance;
     DecimalTolerance["Hundredth"] = "0.01";
     DecimalTolerance["Thousandth"] = "0.001";
 })(DecimalTolerance || (DecimalTolerance = {}));
+/**
+ * Trade/industry a user works in. Collected during registration to personalize
+ * the experience. String values are stable identifiers safe for persistence and
+ * analytics; they double as i18n key suffixes (e.g. `trades.iron_worker`).
+ */
+export var UserTrades;
+(function (UserTrades) {
+    UserTrades["Woodworking"] = "woodworking";
+    UserTrades["Plumbing"] = "plumbing";
+    UserTrades["Electrical"] = "electrical";
+    UserTrades["Structural"] = "structural";
+    UserTrades["Framing"] = "framing";
+    UserTrades["Carpenter"] = "carpenter";
+    UserTrades["IronWorker"] = "iron_worker";
+    UserTrades["Joiners"] = "joiners";
+    UserTrades["HVAC"] = "hvac";
+    UserTrades["Painting"] = "painting";
+    UserTrades["GC"] = "gc";
+    UserTrades["IT"] = "it";
+    UserTrades["Surveying"] = "surveying";
+    UserTrades["Pipefitter"] = "pipe_fitter";
+    UserTrades["Drywall"] = "drywall";
+    UserTrades["Welding"] = "welding";
+    UserTrades["Flooring"] = "flooring";
+    UserTrades["Decking"] = "decking";
+    UserTrades["Tile"] = "tile";
+    UserTrades["DIY"] = "diy";
+    UserTrades["Other"] = "other";
+})(UserTrades || (UserTrades = {}));
+/**
+ * Role a user holds within their trade. Collected during registration. String
+ * values double as i18n key suffixes (e.g. `roles.project_manager`).
+ */
+export var UserRoles;
+(function (UserRoles) {
+    UserRoles["Apprentice"] = "apprentice";
+    UserRoles["Journeyman"] = "journeyman";
+    UserRoles["Owner"] = "owner";
+    UserRoles["ProjectManager"] = "project_manager";
+    UserRoles["Supervisor"] = "supervisor";
+    UserRoles["Foreman"] = "foreman";
+    UserRoles["Superintendent"] = "superintendent";
+    UserRoles["Estimator"] = "estimator";
+    UserRoles["OfficeManager"] = "office_manager";
+    UserRoles["Operator"] = "operator";
+    UserRoles["Laborer"] = "laborer";
+    UserRoles["Engineer"] = "engineer";
+    UserRoles["Safety"] = "safety";
+})(UserRoles || (UserRoles = {}));

package/package.json

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