@reekon-tools/boldr-utils 1.6.13 → 1.6.14

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

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

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Circle, DashPathEffect, Group, Line, Path, Rect, Skia, Text, } from '@shopify/react-native-skia';
 import { memo, useMemo } from 'react';
-import { dashIntervals } from '../strokeGeometry.js';
+import { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } from '../strokeGeometry.js';
 import { DEFAULT_TEXT_FONT_SIZE, TEXT_BASELINE_FACTOR, TEXT_LINE_HEIGHT_FACTOR, } from '../textGeometry.js';
 // Outline width of dash-styled text, as a fraction of the base font size.
 // Drawn pre-scale (inside the fontSize/baseSize Group), so the outline — and
 // the dash pattern derived from it — scales with the glyphs.
 const TEXT_OUTLINE_WIDTH_FACTOR = 1 / 16;
-const polygonPath = (points) => {
+const polygonPath = (points, closed) => {
     const path = Skia.Path.Make();
     if (points.length === 0)
         return path;
@@ -15,7 +15,8 @@ const polygonPath = (points) => {
     for (let i = 1; i < points.length; i++) {
         path.lineTo(points[i].x, points[i].y);
     }
-    path.close();
+    if (closed)
+        path.close();
     return path;
 };
 // Memoized — see StrokeElement. Unchanged shapes keep their identity across
@@ -25,7 +26,39 @@ export const ShapeElement = memo(({ shape, font }) => {
     const stroke = style.stroke ?? '#000000';
     const fill = style.fill;
     const strokeWidth = style.strokeWidth ?? 2;
-    const polyPath = useMemo(() => (kind === 'polygon' ? polygonPath(geometry.points) : null), [kind, geometry.points]);
+    // Polygons auto-close unless explicitly left open (absent === closed, the
+    // historical behavior).
+    const closed = geometry.closed !== false;
+    const polyPath = useMemo(() => (kind === 'polygon' ? polygonPath(geometry.points, closed) : null), [kind, geometry.points, closed]);
+    // Solid filled-triangle arrowhead at the shape's end point. Drawn for the
+    // legacy 'arrow' kind, for a 'line' with cap === 'arrow' (the arrow tool and
+    // the end-cap editor both produce this), and for an OPEN polygon with cap
+    // === 'arrow' (its last segment has a direction). Mirrors StrokeElement.
+    const arrowHead = useMemo(() => {
+        let from;
+        let end;
+        if ((kind === 'line' || kind === 'arrow') &&
+            (kind === 'arrow' || style.cap === 'arrow')) {
+            [from, end] = geometry.points;
+        }
+        else if (kind === 'polygon' && !closed && style.cap === 'arrow') {
+            const n = geometry.points.length;
+            if (n >= 2) {
+                from = geometry.points[n - 2];
+                end = geometry.points[n - 1];
+            }
+        }
+        if (!from || !end || (from.x === end.x && from.y === end.y))
+            return null;
+        const [apex, baseL, baseR] = arrowheadTriangle(end, from, strokeWidth);
+        const p = Skia.Path.Make();
+        p.moveTo(apex.x, apex.y);
+        p.lineTo(baseL.x, baseL.y);
+        p.lineTo(baseR.x, baseR.y);
+        p.close();
+        return p;
+    }, [kind, geometry.points, closed, style.cap, strokeWidth]);
+    const dashEffect = style.dash ? (_jsx(DashPathEffect, { intervals: dashIntervals(strokeWidth) })) : null;
     switch (kind) {
         case 'rect': {
             const [a, b] = geometry.points;
@@ -35,7 +68,7 @@ export const ShapeElement = memo(({ shape, font }) => {
             const y = Math.min(a.y, b.y);
             const w = Math.abs(b.x - a.x);
             const h = Math.abs(b.y - a.y);
-            return (_jsxs(_Fragment, { children: [fill && _jsx(Rect, { x: x, y: y, width: w, height: h, color: fill }), _jsx(Rect, { x: x, y: y, width: w, height: h, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+            return (_jsxs(_Fragment, { children: [fill && _jsx(Rect, { x: x, y: y, width: w, height: h, color: fill }), _jsx(Rect, { x: x, y: y, width: w, height: h, color: stroke, style: "stroke", strokeWidth: strokeWidth, children: dashEffect })] }));
         }
         case 'ellipse': {
             const [a, b] = geometry.points;
@@ -44,19 +77,19 @@ export const ShapeElement = memo(({ shape, font }) => {
             const cx = (a.x + b.x) / 2;
             const cy = (a.y + b.y) / 2;
             const r = Math.max(Math.abs(b.x - a.x), Math.abs(b.y - a.y)) / 2;
-            return (_jsxs(_Fragment, { children: [fill && _jsx(Circle, { cx: cx, cy: cy, r: r, color: fill }), _jsx(Circle, { cx: cx, cy: cy, r: r, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+            return (_jsxs(_Fragment, { children: [fill && _jsx(Circle, { cx: cx, cy: cy, r: r, color: fill }), _jsx(Circle, { cx: cx, cy: cy, r: r, color: stroke, style: "stroke", strokeWidth: strokeWidth, children: dashEffect })] }));
         }
         case 'line':
         case 'arrow': {
             const [a, b] = geometry.points;
             if (!a || !b)
                 return null;
-            return (_jsx(Line, { p1: a, p2: b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: "round" }));
+            return (_jsxs(_Fragment, { children: [_jsx(Line, { p1: a, p2: b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(style.cap), children: dashEffect }), arrowHead && _jsx(Path, { path: arrowHead, color: stroke, style: "fill" })] }));
         }
         case 'polygon': {
             if (!polyPath)
                 return null;
-            return (_jsxs(_Fragment, { children: [fill && _jsx(Path, { path: polyPath, color: fill }), _jsx(Path, { path: polyPath, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+            return (_jsxs(_Fragment, { children: [fill && closed && _jsx(Path, { path: polyPath, color: fill }), _jsx(Path, { path: polyPath, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(style.cap), strokeJoin: "round", children: dashEffect }), arrowHead && _jsx(Path, { path: arrowHead, color: stroke, style: "fill" })] }));
         }
         case 'text': {
             // `origin` is the TOP-LEFT of the text block (textGeometry derives

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

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

package/dist/annotation/canvas/measurementGeometry.js

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

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

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

package/dist/annotation/canvas/shapeGeometry.js

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

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

@@ -1,5 +1,6 @@
 import type { Tool } from '../Tool.js';
 export interface PanToolOptions {
     cursor?: string;
+    selectMeasurementsOnTap?: boolean;
 }
 export declare const createPanTool: (options?: PanToolOptions) => Tool;

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

@@ -1,3 +1,8 @@
+import { hitPlacedMeasurement } from '../measurementGeometry.js';
+// Screen-px movement beyond which a gesture counts as a pan, not a tap. The
+// native canvas never dispatches pans to JS handlers (they run on the UI
+// thread), so this only guards web's down→jitter→up clicks.
+const TAP_SLOP_PX = 6;
 // Built-in "Hand" tool. When active, any drag pans the viewport. Tools that
 // want one-off pan triggers (middle-mouse, space-drag) get those via the
 // AnnotationCanvas `gestures` prop without needing to switch tools.
@@ -6,10 +11,16 @@ export const createPanTool = (options = {}) => ({
     label: 'Hand',
     cursor: options.cursor ?? 'grab',
     // Native pans the viewport on the UI thread (see Tool.panViewport). The
-    // onPointer* handlers below remain the web/parity implementation.
+    // onPointer* handlers below remain the web/parity implementation; taps
+    // still reach them on native via the synthesized down+up dispatch.
     panViewport: true,
     onPointerDown(event, _ctx, _state) {
-        return { kind: 'panning', lastScreen: event.screen };
+        return {
+            kind: 'panning',
+            startScreen: event.screen,
+            lastScreen: event.screen,
+            moved: false,
+        };
     },
     onPointerMove(event, ctx, state) {
         const s = state;
@@ -20,9 +31,31 @@ export const createPanTool = (options = {}) => ({
             y: event.screen.y - s.lastScreen.y,
         };
         ctx.applyPan(delta);
-        return { kind: 'panning', lastScreen: event.screen };
+        const dx = event.screen.x - s.startScreen.x;
+        const dy = event.screen.y - s.startScreen.y;
+        return {
+            ...s,
+            lastScreen: event.screen,
+            moved: s.moved || dx * dx + dy * dy > TAP_SLOP_PX * TAP_SLOP_PX,
+        };
     },
-    onPointerUp(_event, _ctx, _state) {
-        // No commit — viewport state is canvas-internal, not persisted.
+    onPointerUp(event, ctx, state) {
+        // No commit — viewport state is canvas-internal, not persisted. A clean
+        // tap optionally selects the measurement under it (see options).
+        const s = state;
+        if (!options.selectMeasurementsOnTap)
+            return;
+        if (s?.kind === 'panning' && s.moved)
+            return;
+        const zoom = ctx.viewport.state.zoom;
+        const measurements = ctx.document.placedMeasurements;
+        for (let i = measurements.length - 1; i >= 0; i--) {
+            const m = measurements[i];
+            if (hitPlacedMeasurement(m, event.world, zoom)) {
+                ctx.setSelection({ ids: [m.id] });
+                return;
+            }
+        }
+        ctx.setSelection(null);
     },
 });

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

@@ -20,7 +20,11 @@ export const createPenTool = (options = {}) => {
     const dotCap = cap === 'butt' || cap === 'arrow' ? 'round' : cap;
     return {
         id: variant,
-        label: variant === 'pen' ? 'Pen' : variant === 'marker' ? 'Marker' : 'Highlighter',
+        label: variant === 'pen'
+            ? 'Pen'
+            : variant === 'marker'
+                ? 'Marker'
+                : 'Highlighter',
         cursor: 'crosshair',
         // Drives UI-thread drawing on native (see FreehandConfig). The
         // onPointerDown/Move/Up below remain the web/parity implementation.

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

@@ -0,0 +1,11 @@
+import type { AnnotationShape } from '../../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export interface PolygonToolOptions {
+    id?: string;
+    label?: string;
+    color?: string;
+    width?: number;
+    dash?: boolean;
+    onPlaced?: (shape: AnnotationShape) => void;
+}
+export declare const createPolygonTool: (options?: PolygonToolOptions) => Tool;

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

@@ -0,0 +1,162 @@
+import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
+// Screen-px radius for "tapped an existing vertex": the first vertex closes
+// the polygon, the last vertex finishes it open. Converted to doc space via
+// the live zoom so the target is a constant on-screen size.
+const VERTEX_TAP_PX = 18;
+// Screen-px radius of the placed-vertex dots drawn while building (the first
+// vertex grows once the polygon is closable, to advertise the close target).
+const VERTEX_DOT_PX = 5;
+const CLOSE_TARGET_DOT_PX = 8;
+let counter = 0;
+const makeId = () => `polygon-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
+const distSq = (a, b) => {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+    return dx * dx + dy * dy;
+};
+// Tap-to-place polygon tool. Each tap (or drag-release) adds a vertex;
+// tapping the FIRST vertex closes the ring and commits; tapping the LAST
+// vertex again (a double-tap, in practice) commits it as an open polyline.
+// Switching tools mid-build commits the open polyline too (work is never
+// silently discarded) via onDeactivate. In-progress geometry renders through
+// preview patches — the polyline plus a dot per placed vertex — so it needs
+// no platform-specific preview plumbing. Skia-free, like every tool factory.
+export const createPolygonTool = (options = {}) => {
+    const color = options.color ?? '#111827';
+    const width = options.width ?? 2;
+    const dash = options.dash ?? false;
+    // In-progress polygon (spans gestures — see PolygonGestureState).
+    let vertices = [];
+    let shapeId = null;
+    const buildShape = (doc, points, closed) => ({
+        id: shapeId ?? makeId(),
+        layerId: firstLayerId(doc),
+        kind: 'polygon',
+        // Snapshot the array: `points` is usually the live `vertices` buffer, and
+        // downstream memoization (ShapeElement keys its Skia path on
+        // geometry.points IDENTITY) must see a new array per emit — handing out
+        // the shared reference froze the preview polyline at its first segment.
+        geometry: { points: [...points], ...(closed ? {} : { closed: false }) },
+        style: { stroke: color, strokeWidth: width, ...(dash && { dash: true }) },
+        createdAt: Date.now(),
+    });
+    // Preview = the open polyline so far (+ the in-drag rubber point) plus a
+    // dot per placed vertex. Dots are preview-only ellipse shapes — they ride
+    // the same patch and never get committed. Sized in doc units from the live
+    // zoom at emit time (close enough; the preview re-emits on every event).
+    const previewOps = (doc, zoom, rubber) => {
+        if (vertices.length === 0)
+            return [];
+        const pts = rubber ? [...vertices, rubber] : vertices;
+        const ops = [];
+        if (pts.length >= 2) {
+            ops.push({
+                op: 'addShape',
+                shape: { ...buildShape(doc, pts, false), id: `${shapeId}-draft` },
+            });
+        }
+        const closable = vertices.length >= 3;
+        vertices.forEach((v, i) => {
+            const px = i === 0 && closable ? CLOSE_TARGET_DOT_PX : VERTEX_DOT_PX;
+            const r = px / zoom;
+            ops.push({
+                op: 'addShape',
+                shape: {
+                    id: `${shapeId}-v${i}`,
+                    layerId: firstLayerId(doc),
+                    kind: 'ellipse',
+                    geometry: {
+                        points: [
+                            { x: v.x - r, y: v.y - r },
+                            { x: v.x + r, y: v.y + r },
+                        ],
+                    },
+                    style: { fill: color, stroke: '#FFFFFF', strokeWidth: r / 3 },
+                    createdAt: 0,
+                },
+            });
+        });
+        return ops;
+    };
+    const reset = () => {
+        vertices = [];
+        shapeId = null;
+    };
+    const commit = (ctx, closed) => {
+        const shape = buildShape(ctx.document, vertices, closed);
+        ctx.commit({ ops: [{ op: 'addShape', shape }] });
+        reset();
+        options.onPlaced?.(shape);
+    };
+    return {
+        id: options.id ?? 'polygon',
+        label: options.label ?? 'Polygon',
+        cursor: 'crosshair',
+        onPointerDown() {
+            return { kind: 'polygon-pointing' };
+        },
+        onPointerMove(event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'polygon-pointing')
+                return s;
+            if (vertices.length === 0)
+                return s;
+            ctx.preview({
+                ops: previewOps(ctx.document, ctx.viewport.state.zoom, event.world),
+            });
+            return s;
+        },
+        onPointerUp(event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'polygon-pointing')
+                return;
+            const zoom = ctx.viewport.state.zoom;
+            const tol = VERTEX_TAP_PX / zoom;
+            const tolSq = tol * tol;
+            const p = event.world;
+            // Tap on the first vertex → close the ring and commit.
+            if (vertices.length >= 3 && distSq(p, vertices[0]) <= tolSq) {
+                commit(ctx, true);
+                return;
+            }
+            // Tap on the last vertex (tap-again / double-tap) → finish open.
+            if (vertices.length >= 1 &&
+                distSq(p, vertices[vertices.length - 1]) <= tolSq) {
+                if (vertices.length >= 2) {
+                    commit(ctx, false);
+                }
+                else {
+                    // Re-tapped the only vertex — treat as "never mind".
+                    reset();
+                    ctx.preview({ ops: [] });
+                }
+                return;
+            }
+            if (!shapeId)
+                shapeId = makeId();
+            // Immutable append (defense in depth alongside buildShape's snapshot):
+            // nothing downstream can ever observe this buffer mutating.
+            vertices = [...vertices, { x: p.x, y: p.y }];
+            ctx.preview({ ops: previewOps(ctx.document, zoom) });
+        },
+        // Gesture interrupted (e.g. a second finger landed and the viewport pan
+        // took over). Keep the placed vertices and re-establish the preview — the
+        // canvas clears the preview patch before calling this.
+        onCancel(_state, ctx) {
+            if (vertices.length === 0)
+                return;
+            ctx.preview({ ops: previewOps(ctx.document, ctx.viewport.state.zoom) });
+        },
+        // Switching tools mid-build: commit what exists as an open polyline (two
+        // or more vertices make a real shape; a lone vertex is discarded).
+        onDeactivate(ctx) {
+            if (vertices.length >= 2) {
+                commit(ctx, false);
+            }
+            else {
+                reset();
+            }
+        },
+    };
+};