@reekon-tools/boldr-utils 1.6.15 → 1.6.18

package/dist/canvas/AnnotationCanvasSkia.d.ts

@@ -0,0 +1,27 @@
+import { type SkFont } from '@shopify/react-native-skia';
+import type { ReactNode } from 'react';
+import type { AnnotationCanvasState, AnnotationStroke } from '../types/annotation.js';
+import { DecimalTolerance, FractionalTolerance, Units, type Measurement } from '../types/firestore.js';
+export interface AnnotationCanvasSkiaProps {
+    width: number;
+    height: number;
+    effectiveCanvas: AnnotationCanvasState;
+    worldTransform: Array<{
+        scale: number;
+    } | {
+        translateX: number;
+    } | {
+        translateY: number;
+    }>;
+    measurementsById: Map<string, Measurement>;
+    fallbackUnit?: Units;
+    fractionalTolerance?: FractionalTolerance;
+    decimalTolerance?: DecimalTolerance;
+    resolveImageUrl?: (storagePath: string) => Promise<string>;
+    valueFont: SkFont | null;
+    labelFont: SkFont | null;
+    hideMeasurementStamps?: boolean;
+    penDrawingStroke: AnnotationStroke | null;
+    customPreview?: ReactNode;
+}
+export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, measurementsById, fallbackUnit, fractionalTolerance, decimalTolerance, resolveImageUrl, valueFont, labelFont, hideMeasurementStamps, penDrawingStroke, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/AnnotationCanvasSkia.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Canvas, Group } from '@shopify/react-native-skia';
+import { Units, } from '../types/firestore.js';
+import { BackgroundImageElement } from './elements/BackgroundImageElement.js';
+import { MeasurementStampElement } from './elements/MeasurementStampElement.js';
+import { ShapeElement } from './elements/ShapeElement.js';
+import { StrokeElement } from './elements/StrokeElement.js';
+// Platform-agnostic Skia subtree shared by web and native Inners.
+//
+// Call this as a FUNCTION (`AnnotationCanvasSkia({ ... })`), not as a JSX
+// component (`<AnnotationCanvasSkia ... />`). Used as a component, it adds
+// a React component boundary between the parent and Skia's `<Canvas>` that
+// breaks Skia's reconciler when the page first calls `useFont` — the JS
+// thread hangs in `MakeFreeTypeFaceFromData`. Symptoms only appeared on
+// Vite's dev server with a symlinked boldr-utils + React Refresh, but
+// 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, measurementsById, fallbackUnit, fractionalTolerance, decimalTolerance, resolveImageUrl, valueFont, labelFont, hideMeasurementStamps, penDrawingStroke, 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(StrokeElement, { stroke: stroke }, stroke.id))), effectiveCanvas.shapes.map((shape) => (_jsx(ShapeElement, { shape: shape, font: valueFont }, shape.id))), !hideMeasurementStamps &&
+                effectiveCanvas.placedMeasurements.map((placed) => (_jsx(MeasurementStampElement, { placed: placed, measurement: measurementsById.get(placed.measurementId) ?? null, fallbackUnit: fallbackUnit ?? Units.Millimeters, fractionalTolerance: fractionalTolerance, decimalTolerance: decimalTolerance, valueFont: valueFont, labelFont: labelFont }, placed.id))), penDrawingStroke && _jsx(StrokeElement, { stroke: penDrawingStroke }), customPreview] }) }));

package/dist/canvas/Tool.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode, ComponentType } from 'react';
+import type { AnnotationCanvasState, AnnotationDocumentPatch, AnnotationElement, Selection, Vec2 } from '../types/annotation.js';
+import type { MeasurementRef } from './measurementPicker.js';
+import type { ViewportApi } from './viewport.js';
+export interface CanvasPointerEvent {
+    pointerId: number;
+    world: Vec2;
+    screen: Vec2;
+    pressure?: number;
+    shiftKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+}
+export interface ToolContext {
+    document: AnnotationCanvasState;
+    selection: Selection | null;
+    viewport: ViewportApi;
+    preview(patch: AnnotationDocumentPatch): void;
+    commit(patch: AnnotationDocumentPatch): void;
+    setSelection(selection: Selection | null): void;
+    requestPickMeasurement(): Promise<MeasurementRef | null>;
+    applyPan(deltaScreen: Vec2): void;
+    applyZoom(focalScreen: Vec2, nextZoom: number): void;
+}
+export type ToolState = unknown;
+export interface Tool {
+    id: string;
+    label: string;
+    icon?: ComponentType;
+    cursor?: string;
+    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;
+    renderPreview?(state: ToolState, ctx: ToolContext): ReactNode;
+    hitTest?(element: AnnotationElement, worldPoint: Vec2): boolean;
+}

package/dist/canvas/Tool.js

@@ -0,0 +1 @@
+export {};

package/dist/canvas/elements/BackgroundImageElement.d.ts

@@ -0,0 +1,9 @@
+import type { AnnotationBackgroundImage, BackgroundFit } from '../../types/annotation.js';
+export interface BackgroundImageElementProps {
+    image: AnnotationBackgroundImage;
+    docWidth: number;
+    docHeight: number;
+    fit?: BackgroundFit;
+    resolveUrl?: (path: string) => Promise<string>;
+}
+export declare const BackgroundImageElement: ({ image, docWidth, docHeight, fit, resolveUrl, }: BackgroundImageElementProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/canvas/elements/BackgroundImageElement.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image, useImage } from '@shopify/react-native-skia';
+import { useEffect, useState } from 'react';
+const computeFit = (imgW, imgH, docW, docH, fit) => {
+    if (fit === 'stretch') {
+        return { x: 0, y: 0, width: docW, height: docH };
+    }
+    const scale = fit === 'cover'
+        ? Math.max(docW / imgW, docH / imgH)
+        : Math.min(docW / imgW, docH / imgH);
+    const w = imgW * scale;
+    const h = imgH * scale;
+    return { x: (docW - w) / 2, y: (docH - h) / 2, width: w, height: h };
+};
+export const BackgroundImageElement = ({ image, docWidth, docHeight, fit = 'contain', resolveUrl, }) => {
+    const [url, setUrl] = useState(image.downloadUrl);
+    useEffect(() => {
+        let cancelled = false;
+        if (resolveUrl) {
+            resolveUrl(image.storagePath).then((next) => {
+                if (!cancelled)
+                    setUrl(next);
+            });
+        }
+        else {
+            setUrl(image.downloadUrl);
+        }
+        return () => {
+            cancelled = true;
+        };
+    }, [image.downloadUrl, image.storagePath, resolveUrl]);
+    const skImage = useImage(url);
+    if (!skImage)
+        return null;
+    const dims = computeFit(image.widthPx, image.heightPx, docWidth, docHeight, fit);
+    return (_jsx(Image, { image: skImage, x: dims.x, y: dims.y, width: dims.width, height: dims.height, fit: "fill" }));
+};

package/dist/canvas/elements/MeasurementStampElement.d.ts

@@ -0,0 +1,13 @@
+import { type SkFont } from '@shopify/react-native-skia';
+import type { PlacedMeasurementRef } from '../../types/annotation.js';
+import { DecimalTolerance, FractionalTolerance, type Measurement, type Units } from '../../types/firestore.js';
+export interface MeasurementStampElementProps {
+    placed: PlacedMeasurementRef;
+    measurement: Measurement | null;
+    fallbackUnit: Units;
+    fractionalTolerance?: FractionalTolerance;
+    decimalTolerance?: DecimalTolerance;
+    valueFont?: SkFont | null;
+    labelFont?: SkFont | null;
+}
+export declare const MeasurementStampElement: ({ placed, measurement, fallbackUnit, fractionalTolerance, decimalTolerance, valueFont, labelFont, }: MeasurementStampElementProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/elements/MeasurementStampElement.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Group, Line, RoundedRect, Text, } from '@shopify/react-native-skia';
+import { DecimalTolerance, FractionalTolerance, } from '../../types/firestore.js';
+import { convertMicrometers } from '../../utils/micrometersToUnit.js';
+import { STAMP_HEIGHT, STAMP_PADDING_X, STAMP_PADDING_Y, STAMP_WIDTH, } from '../stampLayout.js';
+const VALUE_FONT_BASELINE_OFFSET = 14;
+const LABEL_FONT_BASELINE_OFFSET = 24;
+const formatValue = (measurement, unit, fractionalTolerance, decimalTolerance) => {
+    if (!measurement)
+        return '—';
+    const result = convertMicrometers(measurement.value, unit, fractionalTolerance, decimalTolerance);
+    return `${result.value}${result.unit ? ` ${result.unit}` : ''}`;
+};
+export const MeasurementStampElement = ({ placed, measurement, fallbackUnit, fractionalTolerance = FractionalTolerance.Sixteenth, decimalTolerance = DecimalTolerance.Hundredth, valueFont, labelFont, }) => {
+    const unit = placed.unitOverride ?? measurement?.unit ?? fallbackUnit;
+    const valueText = formatValue(measurement, unit, fractionalTolerance, decimalTolerance);
+    const label = placed.labelOverride ??
+        measurement?.label ??
+        (measurement
+            ? `M${measurement.measurementIndex ?? ''}`
+            : '');
+    const showLabel = placed.showLabel !== false && !!label;
+    const showValue = placed.showValue !== false;
+    const scale = placed.scale ?? 1;
+    // Fixed-size stamp — no measureText calls. Keeps rendering deterministic
+    // even when no font is loaded (browser/native both).
+    const baseX = placed.anchor.x - (STAMP_WIDTH * scale) / 2;
+    const baseY = placed.anchor.y - (STAMP_HEIGHT * scale) / 2;
+    return (_jsxs(Group, { transform: [{ translateX: baseX }, { translateY: baseY }, { scale }], children: [placed.leader && (_jsx(Line, { p1: placed.leader.from, p2: placed.leader.to, color: "#3B82F6", style: "stroke", strokeWidth: 1.5 })), _jsx(RoundedRect, { x: 0, y: 0, width: STAMP_WIDTH, height: STAMP_HEIGHT, r: 6, color: "#FFFFFFEE" }), _jsx(RoundedRect, { x: 0, y: 0, width: STAMP_WIDTH, height: STAMP_HEIGHT, r: 6, color: "#3B82F6", style: "stroke", strokeWidth: 1.25 }), showValue && valueFont && (_jsx(Text, { x: STAMP_PADDING_X, y: STAMP_PADDING_Y + VALUE_FONT_BASELINE_OFFSET, text: valueText, font: valueFont, color: "#111827" })), showLabel && labelFont && (_jsx(Text, { x: STAMP_PADDING_X, y: STAMP_PADDING_Y + LABEL_FONT_BASELINE_OFFSET, text: label, font: labelFont, color: "#6B7280" }))] }));
+};

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

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

package/dist/canvas/elements/ShapeElement.js

@@ -0,0 +1,62 @@
+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 { useMemo } from 'react';
+const polygonPath = (points) => {
+    const path = Skia.Path.Make();
+    if (points.length === 0)
+        return path;
+    path.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+        path.lineTo(points[i].x, points[i].y);
+    }
+    path.close();
+    return path;
+};
+export const ShapeElement = ({ shape, font }) => {
+    const { kind, geometry, style, text } = shape;
+    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]);
+    switch (kind) {
+        case 'rect': {
+            const [a, b] = geometry.points;
+            if (!a || !b)
+                return null;
+            const x = Math.min(a.x, b.x);
+            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 })] }));
+        }
+        case 'ellipse': {
+            const [a, b] = geometry.points;
+            if (!a || !b)
+                return null;
+            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 })] }));
+        }
+        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" }));
+        }
+        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 })] }));
+        }
+        case 'text': {
+            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 }));
+        }
+    }
+};

package/dist/canvas/elements/StrokeElement.d.ts

@@ -0,0 +1,7 @@
+import { type SkPath } from '@shopify/react-native-skia';
+import type { AnnotationStroke } from '../../types/annotation.js';
+export declare const pointsToSkPath: (points: number[]) => SkPath;
+export interface StrokeElementProps {
+    stroke: AnnotationStroke;
+}
+export declare const StrokeElement: ({ stroke }: StrokeElementProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/elements/StrokeElement.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Path, Skia } from '@shopify/react-native-skia';
+import { useMemo } from 'react';
+export const pointsToSkPath = (points) => {
+    const path = Skia.Path.Make();
+    if (points.length < 2)
+        return path;
+    path.moveTo(points[0], points[1]);
+    for (let i = 2; i < points.length; i += 2) {
+        path.lineTo(points[i], points[i + 1]);
+    }
+    return path;
+};
+export const StrokeElement = ({ stroke }) => {
+    const path = useMemo(() => pointsToSkPath(stroke.points), [stroke.points]);
+    const opacity = stroke.tool === 'highlighter' ? 0.3 : 1;
+    return (_jsx(Path, { path: path, color: stroke.color, style: "stroke", strokeWidth: stroke.width, strokeCap: "round", strokeJoin: "round", opacity: opacity }));
+};

package/dist/canvas/measurementPicker.d.ts

@@ -0,0 +1,10 @@
+import type { Units } from '../types/firestore.js';
+export interface MeasurementRef {
+    measurementId: string;
+    measurementPath: string;
+    groupId: string;
+    label?: string;
+    value?: number;
+    unit?: Units;
+}
+export type PickMeasurement = () => Promise<MeasurementRef | null>;

package/dist/canvas/measurementPicker.js

@@ -0,0 +1 @@
+export {};

package/dist/canvas/measurementStampOverlay.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { PlacedMeasurementRef } from '../types/annotation.js';
+import type { Measurement } from '../types/firestore.js';
+export interface MeasurementStampRenderArgs {
+    placed: PlacedMeasurementRef;
+    measurement: Measurement | null;
+    selected: boolean;
+    size: number;
+    zoom: number;
+}
+export type RenderMeasurementStamp = (args: MeasurementStampRenderArgs) => ReactNode;

package/dist/canvas/measurementStampOverlay.js

@@ -0,0 +1 @@
+export {};

package/dist/canvas/pointerAdapter.d.ts

@@ -0,0 +1,3 @@
+import type { CanvasPointerEvent } from './Tool.js';
+import type { ViewportApi } from './viewport.js';
+export declare const domEventToCanvasPointerEvent: (event: PointerEvent, canvas: HTMLElement, viewport: ViewportApi) => CanvasPointerEvent;

package/dist/canvas/pointerAdapter.js

@@ -0,0 +1,19 @@
+// Web DOM PointerEvent → CanvasPointerEvent. The native variant will live
+// in pointerAdapter.native.ts and will translate gesture-handler events.
+export const domEventToCanvasPointerEvent = (event, canvas, viewport) => {
+    const rect = canvas.getBoundingClientRect();
+    const screen = {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+    };
+    return {
+        pointerId: event.pointerId,
+        screen,
+        world: viewport.screenToWorld(screen),
+        pressure: event.pressure || undefined,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey,
+        ctrlKey: event.ctrlKey,
+    };
+};

package/dist/canvas/stampLayout.d.ts

@@ -0,0 +1,5 @@
+export declare const STAMP_WIDTH = 120;
+export declare const STAMP_HEIGHT = 44;
+export declare const STAMP_PADDING_X = 10;
+export declare const STAMP_PADDING_Y = 6;
+export declare const STAMP_TILE_SIZE = 120;

package/dist/canvas/stampLayout.js

@@ -0,0 +1,14 @@
+// Shared layout constants for the placed measurement stamp. Lives in a
+// Skia-free module so both render (MeasurementStampElement) and hit-test
+// (selectTool) can import it without dragging @shopify/react-native-skia
+// into the consumer's static import graph.
+export const STAMP_WIDTH = 120;
+export const STAMP_HEIGHT = 44;
+export const STAMP_PADDING_X = 10;
+export const STAMP_PADDING_Y = 6;
+// Constant SCREEN-space edge length of a placed measurement rendered as a
+// square tile (the overlay path — see measurementStampOverlay.ts). The tile
+// is a fixed-size pin: its on-screen size is this times `placed.scale` and
+// does NOT change with zoom (only its position tracks the canvas). Also drives
+// the select-tool hit box, which converts it back to doc space via the zoom.
+export const STAMP_TILE_SIZE = 120;

package/dist/canvas/tools/measurementStampTool.d.ts

@@ -0,0 +1,9 @@
+import type { PlacedMeasurementRef } from '../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export interface MeasurementStampToolOptions {
+    autoSwitchToSelect?: boolean;
+    onPlaced?: (ref: PlacedMeasurementRef) => void;
+    onAutoSwitch?: (toToolId: string) => void;
+    selectToolId?: string;
+}
+export declare const createMeasurementStampTool: (options?: MeasurementStampToolOptions) => Tool;

package/dist/canvas/tools/measurementStampTool.js

@@ -0,0 +1,37 @@
+import { DEFAULT_LAYER_ID } from '../../types/annotation.js';
+let counter = 0;
+const makeId = () => `measurement-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
+export const createMeasurementStampTool = (options = {}) => {
+    const autoSwitchToSelect = options.autoSwitchToSelect ?? true;
+    const selectToolId = options.selectToolId ?? 'select';
+    return {
+        id: 'measurement',
+        label: 'Place measurement',
+        cursor: 'copy',
+        onPointerUp(event, ctx) {
+            // Tap-to-place. Open the consumer's picker and commit on selection.
+            void ctx.requestPickMeasurement().then((ref) => {
+                if (!ref)
+                    return;
+                const placed = {
+                    id: makeId(),
+                    layerId: firstLayerId(ctx.document),
+                    measurementPath: ref.measurementPath,
+                    measurementId: ref.measurementId,
+                    groupId: ref.groupId,
+                    anchor: event.world,
+                    labelOverride: ref.label,
+                    unitOverride: ref.unit,
+                    showLabel: true,
+                    showValue: true,
+                    createdAt: Date.now(),
+                };
+                ctx.commit({ ops: [{ op: 'addMeasurement', measurement: placed }] });
+                options.onPlaced?.(placed);
+                if (autoSwitchToSelect)
+                    options.onAutoSwitch?.(selectToolId);
+            });
+        },
+    };
+};

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

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

package/dist/canvas/tools/panTool.js

@@ -0,0 +1,25 @@
+// 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.
+export const createPanTool = (options = {}) => ({
+    id: 'pan',
+    label: 'Hand',
+    cursor: options.cursor ?? 'grab',
+    onPointerDown(event, _ctx, _state) {
+        return { kind: 'panning', lastScreen: event.screen };
+    },
+    onPointerMove(event, ctx, state) {
+        const s = state;
+        if (s?.kind !== 'panning')
+            return s;
+        const delta = {
+            x: event.screen.x - s.lastScreen.x,
+            y: event.screen.y - s.lastScreen.y,
+        };
+        ctx.applyPan(delta);
+        return { kind: 'panning', lastScreen: event.screen };
+    },
+    onPointerUp(_event, _ctx, _state) {
+        // No commit — viewport state is canvas-internal, not persisted.
+    },
+});

package/dist/canvas/tools/penTool.d.ts

@@ -0,0 +1,13 @@
+import type { AnnotationStroke } from '../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export interface PenToolOptions {
+    color?: string;
+    width?: number;
+    minSampleDistance?: number;
+    variant?: 'pen' | 'marker' | 'highlighter';
+}
+export interface PenDrawingState {
+    kind: 'pen-drawing';
+    stroke: AnnotationStroke;
+}
+export declare const createPenTool: (options?: PenToolOptions) => Tool;

package/dist/canvas/tools/penTool.js

@@ -0,0 +1,68 @@
+import { DEFAULT_LAYER_ID } from '../../types/annotation.js';
+const distSq = (ax, ay, bx, by) => {
+    const dx = ax - bx;
+    const dy = ay - by;
+    return dx * dx + dy * dy;
+};
+let counter = 0;
+const makeId = (prefix) => `${prefix}-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+export const createPenTool = (options = {}) => {
+    const color = options.color ?? '#111827';
+    const width = options.width ?? 2;
+    const variant = options.variant ?? 'pen';
+    const minSampleDistance = options.minSampleDistance ?? 1.5;
+    const minSampleDistanceSq = minSampleDistance * minSampleDistance;
+    return {
+        id: variant,
+        label: variant === 'pen' ? 'Pen' : variant === 'marker' ? 'Marker' : 'Highlighter',
+        cursor: 'crosshair',
+        onPointerDown(event, ctx) {
+            const stroke = {
+                id: makeId('stroke'),
+                layerId: ctx.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
+                tool: variant,
+                color,
+                width,
+                points: [event.world.x, event.world.y],
+                pressure: event.pressure !== undefined ? [event.pressure] : undefined,
+                createdAt: Date.now(),
+            };
+            return { kind: 'pen-drawing', stroke };
+        },
+        onPointerMove(event, _ctx, state) {
+            const s = state;
+            if (s?.kind !== 'pen-drawing')
+                return s;
+            const len = s.stroke.points.length;
+            const lastX = s.stroke.points[len - 2];
+            const lastY = s.stroke.points[len - 1];
+            if (distSq(lastX, lastY, event.world.x, event.world.y) < minSampleDistanceSq) {
+                return s;
+            }
+            return {
+                kind: 'pen-drawing',
+                stroke: {
+                    ...s.stroke,
+                    points: [...s.stroke.points, event.world.x, event.world.y],
+                    pressure: s.stroke.pressure && event.pressure !== undefined
+                        ? [...s.stroke.pressure, event.pressure]
+                        : s.stroke.pressure,
+                },
+            };
+        },
+        onPointerUp(_event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'pen-drawing')
+                return;
+            // Need at least two distinct samples to be a stroke.
+            if (s.stroke.points.length < 4)
+                return;
+            ctx.commit({ ops: [{ op: 'addStroke', stroke: s.stroke }] });
+        },
+        // No renderPreview. The canvas inner detects PenDrawingState in
+        // toolState and renders the in-flight stroke directly with its own
+        // (Skia-aware) StrokeElement. Keeping tools Skia-free is what lets
+        // consumers import them statically without breaking WithSkiaWeb's
+        // lazy-load ordering on web.
+    };
+};

package/dist/canvas/tools/selectTool.d.ts

@@ -0,0 +1,2 @@
+import type { Tool } from '../Tool.js';
+export declare const createSelectTool: () => Tool;