leaflet-tual 0.0.0 → 0.1.0

package/dist/react.d.ts

@@ -0,0 +1,823 @@
+import * as React from 'react';
+import React__default from 'react';
+import L from 'leaflet';
+
+type GeoPoint = {
+    lat: number;
+    lng: number;
+};
+type ScreenPoint = {
+    x: number;
+    y: number;
+};
+type ArrowStyle = 'linear' | 'curved' | 'bi' | 'elbow' | 's-curve';
+type ShapeKind = 'square' | 'circle' | 'star' | 'actor' | 'triangle' | 'diamond' | 'hexagon' | 'marker';
+type CanvasTool = 'select' | 'freedraw' | 'arrow-linear' | 'arrow-curved' | 'arrow-bi' | 'arrow-elbow' | 'arrow-s-curve' | 'shape' | 'ruler' | 'note' | 'text';
+type ToolbarToolGroupId = 'select' | 'freedraw' | 'arrow' | 'shape' | 'ruler' | 'note' | 'text';
+type ArrowHeadStyle = 'triangle' | 'open' | 'both' | 'none';
+interface ArrowItem {
+    id: string;
+    type: 'arrow';
+    arrowStyle: ArrowStyle;
+    start: GeoPoint;
+    end: GeoPoint;
+    controlPoint?: GeoPoint;
+    color: string;
+    strokeWidth: number;
+    dashed?: boolean;
+    headStyle?: ArrowHeadStyle;
+    label?: string;
+    labelMode?: boolean;
+    hasLabelMode?: boolean;
+    createdAt: number;
+}
+interface FreeDrawItem {
+    id: string;
+    type: 'freedraw';
+    points: GeoPoint[];
+    color: string;
+    strokeWidth: number;
+    dashed?: boolean;
+    createdAt: number;
+}
+interface ShapeItem {
+    id: string;
+    type: 'shape';
+    shape: ShapeKind;
+    start: GeoPoint;
+    end: GeoPoint;
+    color: string;
+    fillColor?: string;
+    filled?: boolean;
+    strokeWidth: number;
+    dashed?: boolean;
+    label?: string;
+    labelMode?: boolean;
+    hasLabelMode?: boolean;
+    createdAt: number;
+}
+type NoteCollapseState = 'expanded' | 'collapsed' | 'compact';
+interface NoteItem {
+    id: string;
+    type: 'note';
+    position: GeoPoint;
+    title?: string;
+    text: string;
+    backgroundColor: string;
+    textColor: string;
+    width?: number;
+    height?: number;
+    minimized?: boolean | 'compact';
+    collapseState?: NoteCollapseState;
+    createdAt: number;
+}
+interface TextItem {
+    id: string;
+    type: 'text';
+    position: GeoPoint;
+    text: string;
+    color: string;
+    initialFontSize?: number;
+    baseZoom?: number;
+    fontWeight?: 'normal' | 'bold';
+    backgroundColor?: string;
+    createdAt: number;
+}
+interface RulerItem {
+    id: string;
+    type: 'ruler';
+    start: GeoPoint;
+    end: GeoPoint;
+    color: string;
+    strokeWidth: number;
+    dashed?: boolean;
+    label?: string;
+    unit?: 'metric' | 'imperial';
+    createdAt: number;
+}
+type CanvasItem = ArrowItem | FreeDrawItem | ShapeItem | NoteItem | TextItem | RulerItem;
+
+type ToolbarPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-center' | 'bottom-center' | 'left-center' | 'right-center';
+type ToolbarOrientation = 'horizontal' | 'vertical';
+interface CanvasLabels {
+    select?: string;
+    freedraw?: string;
+    arrowGroup?: string;
+    arrowLinear?: string;
+    arrowCurved?: string;
+    arrowBi?: string;
+    arrowElbow?: string;
+    arrowSCurve?: string;
+    shapesGroup?: string;
+    shapesModalTitle?: string;
+    shapeSquare?: string;
+    shapeCircle?: string;
+    shapeStar?: string;
+    shapeActor?: string;
+    shapeTriangle?: string;
+    shapeDiamond?: string;
+    shapeHexagon?: string;
+    shapeMarker?: string;
+    ruler?: string;
+    note?: string;
+    text?: string;
+    undo?: string;
+    redo?: string;
+    delete?: string;
+    clear?: string;
+    color?: string;
+    width?: string;
+    dashed?: string;
+    filled?: string;
+    arrowStylePrefix?: string;
+    arrowLabelPlaceholder?: string;
+    shapeLabelPlaceholder?: string;
+    noteTheme?: string;
+    noteDefaultTitle?: string;
+    noteTitlePlaceholder?: string;
+    noteTextPlaceholder?: string;
+    noteExpand?: string;
+    noteCollapse?: string;
+    noteCompact?: string;
+    noteDelete?: string;
+    noteResize?: string;
+    fontSize?: string;
+    textPlaceholder?: string;
+    textEmptyFallback?: string;
+    textEdit?: string;
+    textDone?: string;
+    textBold?: string;
+    textDecreaseSize?: string;
+    textIncreaseSize?: string;
+    textDelete?: string;
+    collapseToolbar?: string;
+    expandToolbar?: string;
+}
+interface CanvasAnnotationTheme {
+    selectionGlowColor?: string;
+    selectionGlowWidth?: number;
+    guideLineDash?: readonly number[];
+    guideLineColor?: string;
+    guideLineWidth?: number;
+    endpointHandleColor?: string;
+    controlHandleColor?: string;
+    handleFillColor?: string;
+    handleRadius?: number;
+    handleStrokeWidth?: number;
+    shadowColor?: string;
+    shadowBlur?: number;
+    shadowOffsetY?: number;
+    labelBackgroundColor?: string;
+    labelTextColor?: string;
+    labelFont?: string;
+    labelBorderColor?: string;
+    labelBorderWidth?: number;
+    labelBorderRadius?: number;
+    labelPaddingX?: number;
+    labelPaddingY?: number;
+    labelShadowColor?: string;
+    labelShadowBlur?: number;
+    shapeDefaultFillOpacity?: number;
+    shapeBorderRadius?: number;
+    labelMinShapeSize?: number;
+    labelMaxTextWidth?: number;
+    fitLabelsToShape?: boolean;
+}
+type ArrowRenderTheme = CanvasAnnotationTheme;
+interface LeafletCanvasClassNames {
+    overlay?: string;
+    canvas?: string;
+    drawingSurface?: string;
+    itemsContainer?: string;
+    toolbar?: string;
+    toolbarPrimary?: string;
+    toolbarSecondary?: string;
+    toolButton?: string;
+    toolButtonActive?: string;
+    arrowGroupWrapper?: string;
+    arrowDropdownMenu?: string;
+    arrowDropdownItem?: string;
+    arrowDropdownItemActive?: string;
+    shapesGroupWrapper?: string;
+    shapesModal?: string;
+    shapesModalHeader?: string;
+    shapesModalGrid?: string;
+    shapesModalItem?: string;
+    shapesModalItemActive?: string;
+    toolbarDivider?: string;
+    toolbarCollapseButton?: string;
+    toolbarCollapsed?: string;
+    actionButton?: string;
+    actionButtonDisabled?: string;
+    deleteButton?: string;
+    swatchButton?: string;
+    swatchButtonActive?: string;
+    toolbarInput?: string;
+    toolbarSelect?: string;
+    noteCard?: string;
+    noteCardSelected?: string;
+    noteCollapsed?: string;
+    noteCompact?: string;
+    noteHeader?: string;
+    noteTitleInput?: string;
+    noteHeaderActions?: string;
+    noteHeaderButton?: string;
+    noteDeleteButton?: string;
+    noteBody?: string;
+    noteTextarea?: string;
+    noteResizeHandle?: string;
+    textWrapper?: string;
+    textWrapperSelected?: string;
+    textCompact?: string;
+    textControls?: string;
+    textControlButton?: string;
+    textControlButtonActive?: string;
+    textInput?: string;
+    textDisplay?: string;
+}
+
+interface DraftArrowState {
+    arrowStyle: ArrowStyle;
+    startGeo: GeoPoint;
+    currentGeo: GeoPoint;
+}
+interface DraftShapeState {
+    shape: ShapeKind;
+    startGeo: GeoPoint;
+    currentGeo: GeoPoint;
+}
+interface DraftRulerState {
+    startGeo: GeoPoint;
+    currentGeo: GeoPoint;
+}
+interface CanvasOverlayOptions {
+    interactive?: boolean;
+    readOnly?: boolean;
+    zIndex?: number;
+    defaultColor?: string;
+    defaultStrokeWidth?: number;
+    defaultNoteColor?: string;
+    defaultFontSize?: number;
+    defaultShape?: ShapeKind;
+}
+interface UseLeafletCanvasOptions extends CanvasOverlayOptions {
+    initialItems?: CanvasItem[];
+    items?: CanvasItem[];
+    maxHistory?: number;
+    onItemsChange?: (items: CanvasItem[]) => void;
+    onChange?: (items: CanvasItem[]) => void;
+    onChangeComplete?: (items: CanvasItem[], targetItem?: CanvasItem | null) => void;
+    onItemsChangeComplete?: (items: CanvasItem[], targetItem?: CanvasItem | null) => void;
+    onEditEnd?: (items: CanvasItem[], targetItem?: CanvasItem | null) => void;
+    onEditComplete?: (items: CanvasItem[], targetItem?: CanvasItem | null) => void;
+    onItemSelect?: (item: CanvasItem | null) => void;
+    onItemCreate?: (item: CanvasItem) => void;
+    onItemChange?: (item: CanvasItem) => void;
+    onItemDelete?: (id: string) => void;
+    onItemChangeComplete?: (item: CanvasItem) => void;
+    initialTool?: CanvasTool;
+    onToolChange?: (tool: CanvasTool) => void;
+}
+type LeafletCanvasOptions = UseLeafletCanvasOptions;
+interface LeafletCanvasController {
+    items: CanvasItem[];
+    activeTool: CanvasTool;
+    setActiveTool: (tool: CanvasTool) => void;
+    readOnly: boolean;
+    setReadOnly: (readOnly: boolean) => void;
+    activeShape: ShapeKind;
+    setActiveShape: (shape: ShapeKind) => void;
+    shapeFilled: boolean;
+    setShapeFilled: (filled: boolean) => void;
+    selectedId: string | null;
+    setSelectedId: (id: string | null) => void;
+    selectedItem: CanvasItem | null;
+    isEditingLabel?: boolean;
+    setEditingLabel?: (editing: boolean) => void;
+    labelEditMode?: boolean;
+    setLabelEditMode?: (editing: boolean) => void;
+    activeColor: string;
+    setActiveColor: (color: string) => void;
+    strokeWidth: number;
+    setStrokeWidth: (width: number) => void;
+    dashed: boolean;
+    setDashed: (dashed: boolean) => void;
+    noteColor: string;
+    setNoteColor: (color: string) => void;
+    fontSize: number;
+    setFontSize: (size: number) => void;
+    fontWeight: 'normal' | 'bold';
+    setFontWeight: (weight: 'normal' | 'bold') => void;
+    addItem: (item: CanvasItem) => void;
+    updateItem: (id: string, patch: Partial<CanvasItem>) => void;
+    removeItem: (id: string) => void;
+    deleteSelected: () => void;
+    clearAll: () => void;
+    clear: () => void;
+    deleteItem: (id: string) => void;
+    setTool: (tool: CanvasTool) => void;
+    selectItem: (id: string | null) => void;
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    notifyChangeComplete: (targetItem?: CanvasItem | null) => void;
+    exportJSON: () => string;
+    importJSON: (json: string) => boolean;
+}
+
+declare const TOOL_TO_ARROW_STYLE: Record<string, ArrowStyle | undefined>;
+declare const STROKE_COLORS: readonly ["#000000", "#4b5563", "#2563eb", "#dc2626", "#16a34a", "#d97706", "#9333ea", "#0891b2"];
+interface NoteColorTheme {
+    name: string;
+    bg: string;
+    border: string;
+    header: string;
+    text: string;
+}
+declare const NOTE_COLOR_THEMES: readonly NoteColorTheme[];
+declare const DEFAULT_STROKE_COLOR = "#000000";
+declare const DEFAULT_STROKE_WIDTH = 2;
+declare const DEFAULT_STROKE_WIDTH_OPTIONS: readonly number[];
+declare const STROKE_WIDTH_OPTIONS: readonly number[];
+declare const DEFAULT_NOTE_BG = "#fef9c3";
+declare const DEFAULT_NOTE_TEXT = "#422006";
+declare const DEFAULT_FONT_SIZE = 16;
+declare const DEFAULT_FONT_SIZE_OPTIONS: readonly number[];
+declare const FONT_SIZE_OPTIONS: readonly number[];
+/**
+ * Super simple unified annotation default theme matching basic HTML element appearance.
+ */
+declare const DEFAULT_ANNOTATION_THEME: Readonly<CanvasAnnotationTheme>;
+
+declare function createId(prefix?: string): string;
+declare function geoToScreen(map: L.Map, point: GeoPoint): ScreenPoint;
+declare function screenToGeo(map: L.Map, point: ScreenPoint): GeoPoint;
+declare function constrainToAspectRatio(anchor: ScreenPoint, target: ScreenPoint, aspectRatio?: number): ScreenPoint;
+declare function constrainAngleTo45Degrees(anchor: ScreenPoint, target: ScreenPoint): ScreenPoint;
+declare function computeDefaultControlGeoPoint(start: GeoPoint, end: GeoPoint, curvature?: number): GeoPoint;
+declare function getQuadraticBezierPoint(p0: ScreenPoint, p1: ScreenPoint, p2: ScreenPoint, t: number): ScreenPoint;
+declare function getQuadraticEndAngle(p0: ScreenPoint, p1: ScreenPoint, p2: ScreenPoint): number;
+declare function distanceToSegment(p: ScreenPoint, v: ScreenPoint, w: ScreenPoint): number;
+declare function distanceToQuadraticBezier(p: ScreenPoint, p0: ScreenPoint, p1: ScreenPoint, p2: ScreenPoint, steps?: number): number;
+declare function getMapDimensions(map: L.Map | null | undefined): {
+    width: number;
+    height: number;
+} | null;
+declare function truncateCanvasText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string;
+declare function calculateZoomFontSize(initialFontSize: number | undefined, currentZoom: number | null, baseZoom?: number, options?: {
+    min?: number;
+    max?: number;
+    scaleFactor?: number;
+}): number;
+declare function calculateGeodesicDistance(p1: GeoPoint, p2: GeoPoint): number;
+declare function formatRealWorldDistance(meters: number, unit?: 'metric' | 'imperial'): string;
+declare function calculateLineDistance(points: GeoPoint[]): number;
+
+declare function drawCanvasHandle(ctx: CanvasRenderingContext2D, pt: ScreenPoint, strokeColor: string, fillColor: string, radius: number, strokeWidth?: number): void;
+declare function drawCanvasLabelPill(ctx: CanvasRenderingContext2D, label: string, midX: number, midY: number, strokeColor: string, maxAllowedBoxWidth: number, theme?: CanvasAnnotationTheme): void;
+
+type ArrowHandleType = 'start' | 'end' | 'control';
+interface ProjectedArrow {
+    start: ScreenPoint;
+    end: ScreenPoint;
+    control: ScreenPoint;
+}
+declare function projectArrow(map: L.Map, arrow: ArrowItem): ProjectedArrow;
+declare function renderArrowOnCanvas(ctx: CanvasRenderingContext2D, projected: ProjectedArrow, arrow: Pick<ArrowItem, 'arrowStyle' | 'color' | 'strokeWidth' | 'dashed' | 'headStyle' | 'label'>, options?: {
+    isSelected?: boolean;
+    isPreview?: boolean;
+    theme?: ArrowRenderTheme;
+}): void;
+declare function hitTestArrowHandle(point: ScreenPoint, projected: ProjectedArrow, arrow: ArrowItem, tolerance?: number): ArrowHandleType | null;
+declare function hitTestArrow(point: ScreenPoint, projected: ProjectedArrow, arrow: ArrowItem, tolerance?: number): boolean;
+
+declare function drawArrowHead(ctx: CanvasRenderingContext2D, tip: ScreenPoint, angle: number, size: number, color: string, filled?: boolean): void;
+declare function traceArrowPath(ctx: CanvasRenderingContext2D, projected: ProjectedArrow, arrowStyle: ArrowItem['arrowStyle']): void;
+
+declare function projectFreeDraw(map: L.Map, item: Pick<FreeDrawItem, 'points'>): ScreenPoint[];
+declare function renderFreeDrawOnCanvas(ctx: CanvasRenderingContext2D, screenPoints: ScreenPoint[], item: Pick<FreeDrawItem, 'color' | 'strokeWidth' | 'dashed'>, options?: {
+    isSelected?: boolean;
+    isPreview?: boolean;
+    theme?: CanvasAnnotationTheme;
+}): void;
+declare function hitTestFreeDraw(point: ScreenPoint, screenPoints: ScreenPoint[], item: FreeDrawItem, tolerance?: number): boolean;
+
+type ShapeHandleType = 'start' | 'end';
+interface ProjectedShape {
+    start: ScreenPoint;
+    end: ScreenPoint;
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+    width: number;
+    height: number;
+    cx: number;
+    cy: number;
+}
+declare function projectShape(map: L.Map, shape: ShapeItem): ProjectedShape;
+declare function renderShapeOnCanvas(ctx: CanvasRenderingContext2D, projected: ProjectedShape, shape: Pick<ShapeItem, 'shape' | 'color' | 'fillColor' | 'filled' | 'strokeWidth' | 'dashed' | 'label'>, options?: {
+    isSelected?: boolean;
+    isPreview?: boolean;
+    theme?: CanvasAnnotationTheme;
+}): void;
+declare function hitTestShapeHandle(point: ScreenPoint, projected: ProjectedShape, tolerance?: number): ShapeHandleType | null;
+declare function hitTestShape(point: ScreenPoint, projected: ProjectedShape, tolerance?: number): boolean;
+
+declare function tracePolygonShape(ctx: CanvasRenderingContext2D, proj: ProjectedShape, kind: ShapeKind, theme?: CanvasAnnotationTheme): void;
+
+type RulerHandleType = 'start' | 'end';
+interface ProjectedRuler {
+    start: ScreenPoint;
+    end: ScreenPoint;
+    mid: ScreenPoint;
+    lengthPx: number;
+    angle: number;
+}
+declare function projectRuler(map: L.Map, ruler: Pick<RulerItem, 'start' | 'end'>): ProjectedRuler;
+declare function renderRulerOnCanvas(ctx: CanvasRenderingContext2D, projected: ProjectedRuler, ruler: Pick<RulerItem, 'start' | 'end' | 'color' | 'strokeWidth' | 'dashed' | 'label' | 'unit'>, options?: {
+    isSelected?: boolean;
+    isPreview?: boolean;
+    theme?: CanvasAnnotationTheme;
+}): void;
+declare function hitTestRulerHandle(point: ScreenPoint, projected: ProjectedRuler, tolerance?: number): RulerHandleType | null;
+declare function hitTestRuler(point: ScreenPoint, projected: ProjectedRuler, ruler: RulerItem, tolerance?: number): boolean;
+
+interface ResolvedNoteTheme {
+    name: string;
+    bg: string;
+    border: string;
+    header: string;
+    text: string;
+}
+declare function resolveNoteTheme(backgroundColor: string): ResolvedNoteTheme;
+declare function clampNotePosition(map: L.Map, screenPos: ScreenPoint, item: NoteItem, isCompact: boolean, isDragging: boolean, clampToViewport?: boolean): ScreenPoint;
+
+declare function clampTextPosition(map: L.Map, screenPos: ScreenPoint, item: TextItem, dynamicFontSize: number, isCompact: boolean, isDragging: boolean, clampToViewport?: boolean): ScreenPoint;
+
+declare function startFreeDrawDrag(map: L.Map, mapContainer: HTMLElement, pt: ScreenPoint, geo: GeoPoint, activeColor: string, strokeWidth: number, dashed: boolean, draftFreeDrawRef: {
+    current: {
+        screenPoints: ScreenPoint[];
+        geoPoints: GeoPoint[];
+    } | null;
+}, rafIdRef: {
+    current: number | null;
+}, paintCanvas: () => void, addItem: (item: FreeDrawItem) => void, setActiveTool: (tool: 'select') => void): void;
+
+declare function createDraftNote(geo: GeoPoint, noteColor: string, defaultTitle?: string): NoteItem;
+declare function createDraftText(geo: GeoPoint, activeColor: string, fontSize: number, fontWeight: 'normal' | 'bold', currentZoom: number): TextItem;
+
+declare function startShapeDrag(map: L.Map, mapContainer: HTMLElement, startScreen: ScreenPoint, startGeo: GeoPoint, activeShape: ShapeKind, activeColor: string, shapeFilled: boolean, strokeWidth: number, dashed: boolean, setDraftShape: (draft: DraftShapeState | null) => void, addItem: (item: ShapeItem) => void, setActiveTool: (tool: 'select') => void): void;
+declare function buildArrowItem(arrowStyle: ArrowStyle, startGeo: GeoPoint, endGeo: GeoPoint, activeColor: string, strokeWidth: number, dashed: boolean): ArrowItem;
+declare function startArrowDrag(map: L.Map, mapContainer: HTMLElement, startScreen: ScreenPoint, startGeo: GeoPoint, arrowStyle: ArrowStyle, activeColor: string, strokeWidth: number, dashed: boolean, setDraftArrow: (draft: DraftArrowState | null) => void, addItem: (item: ArrowItem) => void, setActiveTool: (tool: 'select') => void): void;
+declare function buildRulerItem(startGeo: GeoPoint, endGeo: GeoPoint, activeColor: string, strokeWidth: number, dashed: boolean): RulerItem;
+declare function startRulerDrag(map: L.Map, mapContainer: HTMLElement, startScreen: ScreenPoint, startGeo: GeoPoint, activeColor: string, strokeWidth: number, dashed: boolean, setDraftRuler: (draft: DraftRulerState | null) => void, addItem: (item: RulerItem) => void, setActiveTool: (tool: 'select') => void): void;
+
+declare function startArrowHandleDrag(map: L.Map, arrow: ArrowItem, projected: ProjectedArrow, handle: ArrowHandleType, getLocalPoint: (e: PointerEvent) => ScreenPoint, updateItem: (id: string, patch: Partial<ArrowItem>) => void): void;
+declare function startShapeHandleDrag(map: L.Map, shape: ShapeItem, projected: ProjectedShape, handle: ShapeHandleType, getLocalPoint: (e: PointerEvent) => ScreenPoint, updateItem: (id: string, patch: Partial<ShapeItem>) => void): void;
+declare function startArrowBodyDrag(map: L.Map, arrow: ArrowItem, projected: ProjectedArrow, originPt: ScreenPoint, getLocalPoint: (e: PointerEvent) => ScreenPoint, updateItem: (id: string, patch: Partial<ArrowItem>) => void): void;
+declare function startShapeBodyDrag(map: L.Map, shape: ShapeItem, projected: ProjectedShape, originPt: ScreenPoint, getLocalPoint: (e: PointerEvent) => ScreenPoint, updateItem: (id: string, patch: Partial<ShapeItem>) => void): void;
+declare function startFreeDrawBodyDrag(map: L.Map, fd: FreeDrawItem, initialScreenPts: ScreenPoint[], originPt: ScreenPoint, getLocalPoint: (e: PointerEvent) => ScreenPoint, updateItem: (id: string, patch: Partial<FreeDrawItem>) => void): void;
+declare function startRulerHandleDrag(map: L.Map, ruler: RulerItem, projected: ProjectedRuler, handle: RulerHandleType, getLocalPoint: (e: PointerEvent) => ScreenPoint, updateItem: (id: string, patch: Partial<RulerItem>) => void): void;
+declare function startRulerBodyDrag(map: L.Map, ruler: RulerItem, projected: ProjectedRuler, originPt: ScreenPoint, getLocalPoint: (e: PointerEvent) => ScreenPoint, updateItem: (id: string, patch: Partial<RulerItem>) => void): void;
+
+interface PaintLeafletCanvasOptions {
+    map: L.Map | null;
+    canvas: HTMLCanvasElement | null;
+    width: number;
+    height: number;
+    arrowItems: ArrowItem[];
+    shapeItems: ShapeItem[];
+    freeDrawItems: FreeDrawItem[];
+    rulerItems: RulerItem[];
+    selectedId: string | null;
+    draftShape: DraftShapeState | null;
+    draftArrow: DraftArrowState | null;
+    draftRuler?: DraftRulerState | null;
+    draftFreeDraw?: {
+        screenPoints: ScreenPoint[];
+        geoPoints: GeoPoint[];
+    } | null;
+    activeColor: string;
+    strokeWidth: number;
+    dashed: boolean;
+    shapeFilled: boolean;
+    annotationTheme?: CanvasAnnotationTheme;
+    arrowTheme?: ArrowRenderTheme;
+    isReadOnly: boolean;
+}
+declare function paintLeafletCanvas({ map, canvas, width, height, arrowItems, shapeItems, freeDrawItems, rulerItems, selectedId, draftShape, draftArrow, draftRuler, draftFreeDraw, activeColor, strokeWidth, dashed, shapeFilled, annotationTheme, arrowTheme, isReadOnly, }: PaintLeafletCanvasOptions): void;
+
+interface MapViewportDimensions {
+    width: number;
+    height: number;
+}
+declare function bindLeafletSync(map: L.Map, onSync: (dimensions: MapViewportDimensions) => void): () => void;
+declare function bindBlockMapDblClick(map: L.Map): () => void;
+
+interface LeafletCanvasStore extends LeafletCanvasController {
+    subscribe: (listener: (controller: LeafletCanvasController) => void) => () => void;
+    getState: () => LeafletCanvasController;
+    destroy: () => void;
+}
+declare function createLeafletCanvasController(options?: UseLeafletCanvasOptions): LeafletCanvasStore;
+declare const createLeafletTualController: typeof createLeafletCanvasController;
+
+interface CreateLeafletCanvasOptions extends UseLeafletCanvasOptions {
+    controller?: LeafletCanvasStore;
+    annotationTheme?: CanvasAnnotationTheme;
+    arrowTheme?: ArrowRenderTheme;
+    labels?: CanvasLabels;
+}
+interface LeafletCanvasInstance {
+    controller: LeafletCanvasStore;
+    container: HTMLDivElement;
+    canvas: HTMLCanvasElement;
+    repaint: () => void;
+    destroy: () => void;
+}
+declare function createLeafletCanvas(map: L.Map, options?: CreateLeafletCanvasOptions): LeafletCanvasInstance;
+declare const createLeafletTual: typeof createLeafletCanvas;
+
+/**
+ * leaflet-tual — core (framework-agnostic)
+ *
+ * Interactive canvas and annotation toolkit for Leaflet maps — draw vector
+ * arrows, geometric shapes, freehand sketches, rulers, sticky notes, and text
+ * overlays that stay geographically synchronized with Leaflet across panning
+ * and zooming.
+ *
+ * This module is the entire framework-agnostic public surface. It has zero
+ * dependency on React or any UI framework, so it can be used directly from
+ * vanilla JavaScript, TypeScript, Vue, Svelte, Angular, or a plain `<script>` tag.
+ *
+ * React users: see `leaflet-tual/react` for `<LeafletCanvas>`, `<CanvasToolbar>`,
+ * `useLeafletCanvas`, and `useLeafletSync`.
+ */
+
+declare const VERSION: string;
+
+interface CanvasIcons {
+    select?: React__default.ReactNode;
+    freedraw?: React__default.ReactNode;
+    arrowGroup?: React__default.ReactNode;
+    arrowLinear?: React__default.ReactNode;
+    arrowCurved?: React__default.ReactNode;
+    arrowBi?: React__default.ReactNode;
+    arrowElbow?: React__default.ReactNode;
+    arrowSCurve?: React__default.ReactNode;
+    shapesGroup?: React__default.ReactNode;
+    shapeSquare?: React__default.ReactNode;
+    shapeCircle?: React__default.ReactNode;
+    shapeStar?: React__default.ReactNode;
+    shapeActor?: React__default.ReactNode;
+    shapeTriangle?: React__default.ReactNode;
+    shapeDiamond?: React__default.ReactNode;
+    shapeHexagon?: React__default.ReactNode;
+    shapeMarker?: React__default.ReactNode;
+    dropdownChevron?: React__default.ReactNode;
+    ruler?: React__default.ReactNode;
+    note?: React__default.ReactNode;
+    text?: React__default.ReactNode;
+    undo?: React__default.ReactNode;
+    redo?: React__default.ReactNode;
+    delete?: React__default.ReactNode;
+    clear?: React__default.ReactNode;
+    noteExpand?: React__default.ReactNode;
+    noteCollapse?: React__default.ReactNode;
+    noteCompact?: React__default.ReactNode;
+    noteDelete?: React__default.ReactNode;
+    noteResize?: React__default.ReactNode;
+    textEdit?: React__default.ReactNode;
+    textDone?: React__default.ReactNode;
+    textBold?: React__default.ReactNode;
+    textDecreaseSize?: React__default.ReactNode;
+    textIncreaseSize?: React__default.ReactNode;
+    textDelete?: React__default.ReactNode;
+    collapseToolbar?: React__default.ReactNode;
+    expandToolbar?: React__default.ReactNode;
+}
+type LeafletCanvasStyles = {
+    [K in keyof LeafletCanvasClassNames]?: React__default.CSSProperties;
+};
+
+interface CustomToolbarItem {
+    id: string;
+    label?: string;
+    title?: string;
+    icon?: React__default.ReactNode;
+    isActive?: boolean;
+    disabled?: boolean;
+    onClick?: (controller: LeafletCanvasController) => void;
+    render?: (controller: LeafletCanvasController) => React__default.ReactNode;
+}
+interface DragHandleTriggerProps {
+    onPointerDown: (e: React__default.PointerEvent<HTMLElement>) => void;
+    style: React__default.CSSProperties;
+}
+interface RenderNoteProps {
+    item: NoteItem;
+    screenPos: ScreenPoint;
+    isSelected: boolean;
+    isDragging: boolean;
+    readOnly?: boolean;
+    isCompact?: boolean;
+    dragHandleProps: DragHandleTriggerProps;
+    resizeHandleProps?: DragHandleTriggerProps;
+    onSelect: () => void;
+    onUpdate: (patch: Partial<NoteItem>) => void;
+    onDelete: () => void;
+}
+interface RenderTextProps {
+    item: TextItem;
+    screenPos: ScreenPoint;
+    isSelected: boolean;
+    isEditing: boolean;
+    isDragging: boolean;
+    readOnly?: boolean;
+    isCompact?: boolean;
+    dynamicFontSize?: number;
+    setIsEditing: (editing: boolean) => void;
+    dragHandleProps: DragHandleTriggerProps;
+    onSelect: () => void;
+    onUpdate: (patch: Partial<TextItem>) => void;
+    onDelete: () => void;
+}
+interface LeafletCanvasProps extends UseLeafletCanvasOptions {
+    map?: L.Map | null;
+    controller?: LeafletCanvasController;
+    readOnly?: boolean;
+    showToolbar?: boolean;
+    toolbarPosition?: ToolbarPosition;
+    toolbarOrientation?: ToolbarOrientation;
+    orientation?: ToolbarOrientation;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    showCollapseButton?: boolean;
+    enabledTools?: readonly ToolbarToolGroupId[];
+    customTools?: readonly CustomToolbarItem[];
+    showHistoryControls?: boolean;
+    showDeleteButton?: boolean;
+    showClearButton?: boolean;
+    showToolLabels?: boolean;
+    labels?: CanvasLabels;
+    icons?: CanvasIcons;
+    unstyled?: boolean;
+    classNames?: LeafletCanvasClassNames;
+    styles?: LeafletCanvasStyles;
+    annotationTheme?: CanvasAnnotationTheme;
+    arrowTheme?: ArrowRenderTheme;
+    strokeColors?: readonly string[];
+    strokeWidthOptions?: readonly number[];
+    fontSizeOptions?: readonly number[];
+    renderToolbar?: (controller: LeafletCanvasController) => React__default.ReactNode;
+    renderNote?: (props: RenderNoteProps) => React__default.ReactNode;
+    renderText?: (props: RenderTextProps) => React__default.ReactNode;
+    clampOverlaysToViewport?: boolean;
+    autoMinimizeNotesZoom?: number;
+    autoMinimizeTextZoom?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+
+interface InlineShapeLabelEditorProps {
+    shape: ShapeItem;
+    map: L.Map;
+    labels?: CanvasLabels;
+    onUpdate: (id: string, patch: Partial<ShapeItem>) => void;
+    onClose: () => void;
+}
+declare function InlineShapeLabelEditor({ shape, map, labels, onUpdate, onClose, }: InlineShapeLabelEditorProps): React.JSX.Element;
+
+interface NoteOverlayProps {
+    item: NoteItem;
+    screenPos: ScreenPoint;
+    isSelected: boolean;
+    map: L.Map;
+    readOnly?: boolean;
+    labels?: CanvasLabels;
+    icons?: CanvasIcons;
+    unstyled?: boolean;
+    classNames?: LeafletCanvasClassNames;
+    styles?: LeafletCanvasStyles;
+    clampToViewport?: boolean;
+    autoMinimizeZoomThreshold?: number;
+    renderNote?: (props: RenderNoteProps) => React__default.ReactNode;
+    onSelect: (id: string) => void;
+    onUpdate: (id: string, patch: Partial<NoteItem>) => void;
+    onDelete: (id: string) => void;
+    onComplete?: () => void;
+}
+
+declare const NoteOverlay: React__default.NamedExoticComponent<NoteOverlayProps>;
+
+interface TextOverlayProps {
+    item: TextItem;
+    screenPos: ScreenPoint;
+    isSelected: boolean;
+    isEditingLabel?: boolean;
+    map: L.Map;
+    readOnly?: boolean;
+    labels?: CanvasLabels;
+    icons?: CanvasIcons;
+    unstyled?: boolean;
+    classNames?: LeafletCanvasClassNames;
+    styles?: LeafletCanvasStyles;
+    clampToViewport?: boolean;
+    autoMinimizeZoomThreshold?: number;
+    renderText?: (props: RenderTextProps) => React__default.ReactNode;
+    onSelect: (id: string) => void;
+    onUpdate: (id: string, patch: Partial<TextItem>) => void;
+    onDelete: (id: string) => void;
+    onComplete?: () => void;
+}
+
+declare const TextOverlay: React__default.NamedExoticComponent<TextOverlayProps>;
+
+interface MapViewportState {
+    width: number;
+    height: number;
+    tick: number;
+}
+/**
+ * Synchronizes React state and canvas redraws with a Leaflet map's pan, zoom, and resize events.
+ */
+declare function useLeafletSync(map: L.Map | null): MapViewportState;
+
+declare function useLeafletCanvas(options?: UseLeafletCanvasOptions): LeafletCanvasController;
+declare const useLeafletTual: typeof useLeafletCanvas;
+
+interface CanvasToolbarProps {
+    controller: LeafletCanvasController;
+    position?: ToolbarPosition;
+    orientation?: ToolbarOrientation;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    showCollapseButton?: boolean;
+    readOnly?: boolean;
+    enabledTools?: readonly ToolbarToolGroupId[];
+    customTools?: readonly CustomToolbarItem[];
+    showHistoryControls?: boolean;
+    showDeleteButton?: boolean;
+    showClearButton?: boolean;
+    showToolLabels?: boolean;
+    labels?: CanvasLabels;
+    icons?: CanvasIcons;
+    unstyled?: boolean;
+    classNames?: LeafletCanvasClassNames;
+    styles?: LeafletCanvasStyles;
+    strokeColors?: readonly string[];
+    strokeWidthOptions?: readonly number[];
+    fontSizeOptions?: readonly number[];
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+
+declare function CanvasToolbar({ controller, position, orientation: propOrientation, collapsible, defaultCollapsed, collapsed: propCollapsed, onCollapsedChange, showCollapseButton, readOnly: propReadOnly, enabledTools, customTools, showHistoryControls, showDeleteButton, showClearButton, showToolLabels: explicitShowToolLabels, labels, icons, unstyled, classNames, styles, strokeColors, strokeWidthOptions, fontSizeOptions, className, style, }: CanvasToolbarProps): React.JSX.Element;
+
+interface PixelSelectProps {
+    /** Visible label and accessible name. */
+    label: string;
+    /** Currently applied value in pixels. */
+    value: number;
+    /** Preset pixel values. The current value is merged in if missing. */
+    options: readonly number[];
+    onChange: (value: number) => void;
+    /** Optional data attribute to distinguish multiple selects. */
+    control?: string;
+    unstyled?: boolean;
+    classNames?: LeafletCanvasClassNames;
+    styles?: LeafletCanvasStyles;
+    icons?: CanvasIcons;
+}
+/**
+ * Labeled `<select>` listing pixel values (e.g. `1px`, `2px`, ...).
+ * Styled via the `toolbarSelect` slot and `rlc-toolbar-select` class.
+ */
+declare function PixelSelect({ label, value, options, onChange, control, unstyled, classNames, styles, icons, }: PixelSelectProps): React.JSX.Element;
+
+/**
+ * Returns rotation transform for dropdown indicator chevron (base shape: points down `v`).
+ * When closed: points towards the opening direction.
+ * When open: flips 180 degrees.
+ */
+declare function getDropdownChevronRotation(isOpen: boolean, position?: ToolbarPosition, orientation?: ToolbarOrientation): string;
+/**
+ * Returns rotation transform for collapse button chevron (base shape: points up `^`).
+ * Points towards the screen edge the toolbar collapses into.
+ */
+declare function getCollapseChevronRotation(position?: ToolbarPosition, orientation?: ToolbarOrientation): string;
+/**
+ * Returns rotation transform for expand button chevron (base shape: points down `v`).
+ * Points towards the map interior where the toolbar will expand into.
+ */
+declare function getExpandChevronRotation(position?: ToolbarPosition, orientation?: ToolbarOrientation): string;
+
+declare function LeafletCanvas(props: LeafletCanvasProps): React.JSX.Element;
+
+export { type ArrowHandleType, type ArrowHeadStyle, type ArrowItem, type ArrowRenderTheme, type ArrowStyle, type CanvasAnnotationTheme, type CanvasIcons, type CanvasItem, type CanvasLabels, type CanvasOverlayOptions, type CanvasTool, CanvasToolbar, type CanvasToolbarProps, type CreateLeafletCanvasOptions, type CustomToolbarItem, DEFAULT_ANNOTATION_THEME, DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE_OPTIONS, DEFAULT_NOTE_BG, DEFAULT_NOTE_TEXT, DEFAULT_STROKE_COLOR, DEFAULT_STROKE_WIDTH, DEFAULT_STROKE_WIDTH_OPTIONS, type DraftArrowState, type DraftRulerState, type DraftShapeState, type DragHandleTriggerProps, FONT_SIZE_OPTIONS, type FreeDrawItem, type GeoPoint, InlineShapeLabelEditor, type InlineShapeLabelEditorProps, LeafletCanvas, type LeafletCanvasClassNames, type LeafletCanvasController, type LeafletCanvasInstance, type LeafletCanvasOptions, type LeafletCanvasProps, type LeafletCanvasStore, type LeafletCanvasStyles, type MapViewportDimensions, type MapViewportState, NOTE_COLOR_THEMES, type NoteCollapseState, type NoteColorTheme, type NoteItem, NoteOverlay, type NoteOverlayProps, type PaintLeafletCanvasOptions, PixelSelect, type PixelSelectProps, type ProjectedArrow, type ProjectedRuler, type ProjectedShape, type RenderNoteProps, type RenderTextProps, type ResolvedNoteTheme, type RulerHandleType, type RulerItem, STROKE_COLORS, STROKE_WIDTH_OPTIONS, type ScreenPoint, type ShapeHandleType, type ShapeItem, type ShapeKind, TOOL_TO_ARROW_STYLE, type TextItem, TextOverlay, type TextOverlayProps, type ToolbarOrientation, type ToolbarPosition, type ToolbarToolGroupId, type UseLeafletCanvasOptions, VERSION, bindBlockMapDblClick, bindLeafletSync, buildArrowItem, buildRulerItem, calculateGeodesicDistance, calculateLineDistance, calculateZoomFontSize, clampNotePosition, clampTextPosition, computeDefaultControlGeoPoint, constrainAngleTo45Degrees, constrainToAspectRatio, createDraftNote, createDraftText, createId, createLeafletCanvas, createLeafletCanvasController, createLeafletTual, createLeafletTualController, distanceToQuadraticBezier, distanceToSegment, drawArrowHead, drawCanvasHandle, drawCanvasLabelPill, formatRealWorldDistance, geoToScreen, getCollapseChevronRotation, getDropdownChevronRotation, getExpandChevronRotation, getMapDimensions, getQuadraticBezierPoint, getQuadraticEndAngle, hitTestArrow, hitTestArrowHandle, hitTestFreeDraw, hitTestRuler, hitTestRulerHandle, hitTestShape, hitTestShapeHandle, paintLeafletCanvas, projectArrow, projectFreeDraw, projectRuler, projectShape, renderArrowOnCanvas, renderFreeDrawOnCanvas, renderRulerOnCanvas, renderShapeOnCanvas, resolveNoteTheme, screenToGeo, startArrowBodyDrag, startArrowDrag, startArrowHandleDrag, startFreeDrawBodyDrag, startFreeDrawDrag, startRulerBodyDrag, startRulerDrag, startRulerHandleDrag, startShapeBodyDrag, startShapeDrag, startShapeHandleDrag, traceArrowPath, tracePolygonShape, truncateCanvasText, useLeafletCanvas, useLeafletSync, useLeafletTual };