@fieldnotes/core 0.8.11 → 0.9.0

package/dist/index.d.cts

@@ -112,7 +112,20 @@ interface GridElement extends BaseElement {
     strokeWidth: number;
     opacity: number;
 }
-type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement | GridElement;
+type TemplateShape = 'circle' | 'cone' | 'line' | 'square';
+interface TemplateElement extends BaseElement {
+    type: 'template';
+    templateShape: TemplateShape;
+    radius: number;
+    angle: number;
+    fillColor: string;
+    strokeColor: string;
+    strokeWidth: number;
+    opacity: number;
+    feetPerCell?: number;
+    radiusFeet?: number;
+}
+type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement | GridElement | TemplateElement;
 type ElementType = CanvasElement['type'];
 
 interface Layer {
@@ -139,7 +152,37 @@ declare function exportState(elements: CanvasElement[], camera: {
 }, layers?: Layer[]): CanvasState;
 declare function parseState(json: string): CanvasState;
 
-declare function snapPoint(point: Point, gridSize: number): Point;
+interface CameraOptions {
+    minZoom?: number;
+    maxZoom?: number;
+}
+interface CameraChangeInfo {
+    panned: boolean;
+    zoomed: boolean;
+}
+declare class Camera {
+    private x;
+    private y;
+    private z;
+    private readonly minZoom;
+    private readonly maxZoom;
+    private changeListeners;
+    constructor(options?: CameraOptions);
+    get position(): Point;
+    get zoom(): number;
+    pan(dx: number, dy: number): void;
+    moveTo(x: number, y: number): void;
+    setZoom(level: number): void;
+    zoomAt(level: number, screenPoint: Point): void;
+    screenToWorld(screen: Point): Point;
+    worldToScreen(world: Point): Point;
+    getVisibleRect(canvasWidth: number, canvasHeight: number): Bounds;
+    toCSSTransform(): string;
+    onChange(listener: (info: CameraChangeInfo) => void): () => void;
+    private notifyPan;
+    private notifyZoom;
+    private notifyPanAndZoom;
+}
 
 interface ElementUpdateEvent {
     previous: CanvasElement;
@@ -175,37 +218,44 @@ declare class ElementStore {
     onChange(listener: () => void): () => void;
 }
 
-interface CameraOptions {
-    minZoom?: number;
-    maxZoom?: number;
+interface ToolContext {
+    camera: Camera;
+    store: ElementStore;
+    requestRender: () => void;
+    switchTool?: (name: string) => void;
+    editElement?: (id: string) => void;
+    setCursor?: (cursor: string) => void;
+    snapToGrid?: boolean;
+    gridSize?: number;
+    gridType?: 'square' | 'hex';
+    hexOrientation?: HexOrientation;
+    activeLayerId?: string;
+    isLayerVisible?: (layerId: string) => boolean;
+    isLayerLocked?: (layerId: string) => boolean;
 }
-interface CameraChangeInfo {
-    panned: boolean;
-    zoomed: boolean;
+interface PointerState {
+    x: number;
+    y: number;
+    pressure: number;
 }
-declare class Camera {
-    private x;
-    private y;
-    private z;
-    private readonly minZoom;
-    private readonly maxZoom;
-    private changeListeners;
-    constructor(options?: CameraOptions);
-    get position(): Point;
-    get zoom(): number;
-    pan(dx: number, dy: number): void;
-    moveTo(x: number, y: number): void;
-    setZoom(level: number): void;
-    zoomAt(level: number, screenPoint: Point): void;
-    screenToWorld(screen: Point): Point;
-    worldToScreen(world: Point): Point;
-    getVisibleRect(canvasWidth: number, canvasHeight: number): Bounds;
-    toCSSTransform(): string;
-    onChange(listener: (info: CameraChangeInfo) => void): () => void;
-    private notifyPan;
-    private notifyZoom;
-    private notifyPanAndZoom;
+interface Tool {
+    readonly name: string;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(state: PointerState, ctx: ToolContext): void;
+    onHover?(state: PointerState, ctx: ToolContext): void;
+    onActivate?(ctx: ToolContext): void;
+    onDeactivate?(ctx: ToolContext): void;
+    renderOverlay?(ctx: CanvasRenderingContext2D): void;
+    getOptions?(): object;
+    setOptions?(options: object): void;
+    onOptionsChange?(listener: () => void): () => void;
 }
+type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape' | 'measure' | 'template';
+
+declare function snapPoint(point: Point, gridSize: number): Point;
+declare function snapToHexCenter(point: Point, cellSize: number, orientation: HexOrientation): Point;
+declare function smartSnap(point: Point, ctx: ToolContext): Point;
 
 declare class LayerManager {
     private readonly store;
@@ -290,39 +340,6 @@ declare class Background {
     private renderGrid;
 }
 
-interface ToolContext {
-    camera: Camera;
-    store: ElementStore;
-    requestRender: () => void;
-    switchTool?: (name: string) => void;
-    editElement?: (id: string) => void;
-    setCursor?: (cursor: string) => void;
-    snapToGrid?: boolean;
-    gridSize?: number;
-    activeLayerId?: string;
-    isLayerVisible?: (layerId: string) => boolean;
-    isLayerLocked?: (layerId: string) => boolean;
-}
-interface PointerState {
-    x: number;
-    y: number;
-    pressure: number;
-}
-interface Tool {
-    readonly name: string;
-    onPointerDown(state: PointerState, ctx: ToolContext): void;
-    onPointerMove(state: PointerState, ctx: ToolContext): void;
-    onPointerUp(state: PointerState, ctx: ToolContext): void;
-    onHover?(state: PointerState, ctx: ToolContext): void;
-    onActivate?(ctx: ToolContext): void;
-    onDeactivate?(ctx: ToolContext): void;
-    renderOverlay?(ctx: CanvasRenderingContext2D): void;
-    getOptions?(): object;
-    setOptions?(options: object): void;
-    onOptionsChange?(listener: () => void): () => void;
-}
-type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape';
-
 declare class ToolManager {
     private tools;
     private current;
@@ -529,6 +546,7 @@ declare class Viewport {
     private createDomLayer;
     private applyCameraTransform;
     private syncCanvasSize;
+    private syncGridContext;
     private observeResize;
 }
 
@@ -554,6 +572,10 @@ declare class ElementRenderer {
     private fillShapePath;
     private strokeShapePath;
     private renderGrid;
+    private renderTemplate;
+    private renderGeometricTemplate;
+    private renderHexTemplate;
+    private renderRadiusMarker;
     private renderImage;
     private getHexTile;
     private getImage;
@@ -648,6 +670,19 @@ interface GridInput extends BaseDefaults {
 }
 declare function createGrid(input: GridInput): GridElement;
 declare function createText(input: TextInput): TextElement;
+interface TemplateInput extends BaseDefaults {
+    position: Point;
+    templateShape: TemplateShape;
+    radius: number;
+    angle?: number;
+    fillColor?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    feetPerCell?: number;
+    radiusFeet?: number;
+}
+declare function createTemplate(input: TemplateInput): TemplateElement;
 
 declare function getArrowControlPoint(from: Point, to: Point, bend: number): Point;
 declare function getArrowMidpoint(from: Point, to: Point, bend: number): Point;
@@ -668,6 +703,13 @@ declare function unbindArrow(arrow: ArrowElement, store: ElementStore): Partial<
 declare function getElementBounds(element: CanvasElement): Bounds | null;
 declare function boundsIntersect(a: Bounds, b: Bounds): boolean;
 
+declare function getHexDistance(a: Point, b: Point, cellSize: number, orientation: HexOrientation): number;
+declare function getHexCellsInRadius(center: Point, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function getHexCellsInCone(center: Point, angle: number, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function getHexCellsInLine(center: Point, angle: number, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function getHexCellsInSquare(center: Point, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function drawHexPath(ctx: CanvasRenderingContext2D, cx: number, cy: number, cellSize: number, orientation: HexOrientation): void;
+
 declare class AddElementCommand implements Command {
     private readonly element;
     constructor(element: CanvasElement);
@@ -780,6 +822,8 @@ declare class SelectTool implements Tool {
     private renderMarquee;
     private renderSelectionBoxes;
     private renderBindingHighlights;
+    private hitTestTemplateResizeHandle;
+    private handleTemplateResize;
     private getMarqueeRect;
     private findElementsInRect;
     private rectsOverlap;
@@ -906,6 +950,80 @@ declare class ShapeTool implements Tool {
     private onKeyUp;
 }
 
+interface MeasureToolOptions {
+    feetPerCell?: number;
+}
+interface Measurement {
+    start: Point;
+    end: Point;
+    worldDistance: number;
+    cells: number;
+    feet: number;
+}
+declare class MeasureTool implements Tool {
+    readonly name = "measure";
+    private start;
+    private end;
+    private gridSize;
+    private gridType;
+    private hexOrientation;
+    private feetPerCell;
+    private optionListeners;
+    constructor(options?: MeasureToolOptions);
+    getOptions(): MeasureToolOptions;
+    setOptions(options: MeasureToolOptions): void;
+    onOptionsChange(listener: () => void): () => void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    onDeactivate(_ctx: ToolContext): void;
+    getMeasurement(): Measurement | null;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+    private snapToGrid;
+    private notifyOptionsChange;
+}
+
+interface TemplateToolOptions {
+    templateShape?: TemplateShape;
+    fillColor?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    feetPerCell?: number;
+}
+declare class TemplateTool implements Tool {
+    readonly name = "template";
+    private drawing;
+    private origin;
+    private current;
+    private gridSize;
+    private gridType;
+    private hexOrientation;
+    private snapEnabled;
+    private templateShape;
+    private fillColor;
+    private strokeColor;
+    private strokeWidth;
+    private opacity;
+    private feetPerCell;
+    private optionListeners;
+    constructor(options?: TemplateToolOptions);
+    getOptions(): TemplateToolOptions;
+    setOptions(options: TemplateToolOptions): void;
+    onOptionsChange(listener: () => void): () => void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    onDeactivate(_ctx: ToolContext): void;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+    private renderGeometricOverlay;
+    private renderHexOverlay;
+    private computeRadius;
+    private computeAngle;
+    private snapToGrid;
+    private notifyOptionsChange;
+}
+
 declare class CreateLayerCommand implements Command {
     private readonly manager;
     private readonly layer;
@@ -930,6 +1048,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.8.11";
+declare const VERSION = "0.9.0";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, smartSnap, snapPoint, snapToHexCenter, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -112,7 +112,20 @@ interface GridElement extends BaseElement {
     strokeWidth: number;
     opacity: number;
 }
-type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement | GridElement;
+type TemplateShape = 'circle' | 'cone' | 'line' | 'square';
+interface TemplateElement extends BaseElement {
+    type: 'template';
+    templateShape: TemplateShape;
+    radius: number;
+    angle: number;
+    fillColor: string;
+    strokeColor: string;
+    strokeWidth: number;
+    opacity: number;
+    feetPerCell?: number;
+    radiusFeet?: number;
+}
+type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement | GridElement | TemplateElement;
 type ElementType = CanvasElement['type'];
 
 interface Layer {
@@ -139,7 +152,37 @@ declare function exportState(elements: CanvasElement[], camera: {
 }, layers?: Layer[]): CanvasState;
 declare function parseState(json: string): CanvasState;
 
-declare function snapPoint(point: Point, gridSize: number): Point;
+interface CameraOptions {
+    minZoom?: number;
+    maxZoom?: number;
+}
+interface CameraChangeInfo {
+    panned: boolean;
+    zoomed: boolean;
+}
+declare class Camera {
+    private x;
+    private y;
+    private z;
+    private readonly minZoom;
+    private readonly maxZoom;
+    private changeListeners;
+    constructor(options?: CameraOptions);
+    get position(): Point;
+    get zoom(): number;
+    pan(dx: number, dy: number): void;
+    moveTo(x: number, y: number): void;
+    setZoom(level: number): void;
+    zoomAt(level: number, screenPoint: Point): void;
+    screenToWorld(screen: Point): Point;
+    worldToScreen(world: Point): Point;
+    getVisibleRect(canvasWidth: number, canvasHeight: number): Bounds;
+    toCSSTransform(): string;
+    onChange(listener: (info: CameraChangeInfo) => void): () => void;
+    private notifyPan;
+    private notifyZoom;
+    private notifyPanAndZoom;
+}
 
 interface ElementUpdateEvent {
     previous: CanvasElement;
@@ -175,37 +218,44 @@ declare class ElementStore {
     onChange(listener: () => void): () => void;
 }
 
-interface CameraOptions {
-    minZoom?: number;
-    maxZoom?: number;
+interface ToolContext {
+    camera: Camera;
+    store: ElementStore;
+    requestRender: () => void;
+    switchTool?: (name: string) => void;
+    editElement?: (id: string) => void;
+    setCursor?: (cursor: string) => void;
+    snapToGrid?: boolean;
+    gridSize?: number;
+    gridType?: 'square' | 'hex';
+    hexOrientation?: HexOrientation;
+    activeLayerId?: string;
+    isLayerVisible?: (layerId: string) => boolean;
+    isLayerLocked?: (layerId: string) => boolean;
 }
-interface CameraChangeInfo {
-    panned: boolean;
-    zoomed: boolean;
+interface PointerState {
+    x: number;
+    y: number;
+    pressure: number;
 }
-declare class Camera {
-    private x;
-    private y;
-    private z;
-    private readonly minZoom;
-    private readonly maxZoom;
-    private changeListeners;
-    constructor(options?: CameraOptions);
-    get position(): Point;
-    get zoom(): number;
-    pan(dx: number, dy: number): void;
-    moveTo(x: number, y: number): void;
-    setZoom(level: number): void;
-    zoomAt(level: number, screenPoint: Point): void;
-    screenToWorld(screen: Point): Point;
-    worldToScreen(world: Point): Point;
-    getVisibleRect(canvasWidth: number, canvasHeight: number): Bounds;
-    toCSSTransform(): string;
-    onChange(listener: (info: CameraChangeInfo) => void): () => void;
-    private notifyPan;
-    private notifyZoom;
-    private notifyPanAndZoom;
+interface Tool {
+    readonly name: string;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(state: PointerState, ctx: ToolContext): void;
+    onHover?(state: PointerState, ctx: ToolContext): void;
+    onActivate?(ctx: ToolContext): void;
+    onDeactivate?(ctx: ToolContext): void;
+    renderOverlay?(ctx: CanvasRenderingContext2D): void;
+    getOptions?(): object;
+    setOptions?(options: object): void;
+    onOptionsChange?(listener: () => void): () => void;
 }
+type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape' | 'measure' | 'template';
+
+declare function snapPoint(point: Point, gridSize: number): Point;
+declare function snapToHexCenter(point: Point, cellSize: number, orientation: HexOrientation): Point;
+declare function smartSnap(point: Point, ctx: ToolContext): Point;
 
 declare class LayerManager {
     private readonly store;
@@ -290,39 +340,6 @@ declare class Background {
     private renderGrid;
 }
 
-interface ToolContext {
-    camera: Camera;
-    store: ElementStore;
-    requestRender: () => void;
-    switchTool?: (name: string) => void;
-    editElement?: (id: string) => void;
-    setCursor?: (cursor: string) => void;
-    snapToGrid?: boolean;
-    gridSize?: number;
-    activeLayerId?: string;
-    isLayerVisible?: (layerId: string) => boolean;
-    isLayerLocked?: (layerId: string) => boolean;
-}
-interface PointerState {
-    x: number;
-    y: number;
-    pressure: number;
-}
-interface Tool {
-    readonly name: string;
-    onPointerDown(state: PointerState, ctx: ToolContext): void;
-    onPointerMove(state: PointerState, ctx: ToolContext): void;
-    onPointerUp(state: PointerState, ctx: ToolContext): void;
-    onHover?(state: PointerState, ctx: ToolContext): void;
-    onActivate?(ctx: ToolContext): void;
-    onDeactivate?(ctx: ToolContext): void;
-    renderOverlay?(ctx: CanvasRenderingContext2D): void;
-    getOptions?(): object;
-    setOptions?(options: object): void;
-    onOptionsChange?(listener: () => void): () => void;
-}
-type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape';
-
 declare class ToolManager {
     private tools;
     private current;
@@ -529,6 +546,7 @@ declare class Viewport {
     private createDomLayer;
     private applyCameraTransform;
     private syncCanvasSize;
+    private syncGridContext;
     private observeResize;
 }
 
@@ -554,6 +572,10 @@ declare class ElementRenderer {
     private fillShapePath;
     private strokeShapePath;
     private renderGrid;
+    private renderTemplate;
+    private renderGeometricTemplate;
+    private renderHexTemplate;
+    private renderRadiusMarker;
     private renderImage;
     private getHexTile;
     private getImage;
@@ -648,6 +670,19 @@ interface GridInput extends BaseDefaults {
 }
 declare function createGrid(input: GridInput): GridElement;
 declare function createText(input: TextInput): TextElement;
+interface TemplateInput extends BaseDefaults {
+    position: Point;
+    templateShape: TemplateShape;
+    radius: number;
+    angle?: number;
+    fillColor?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    feetPerCell?: number;
+    radiusFeet?: number;
+}
+declare function createTemplate(input: TemplateInput): TemplateElement;
 
 declare function getArrowControlPoint(from: Point, to: Point, bend: number): Point;
 declare function getArrowMidpoint(from: Point, to: Point, bend: number): Point;
@@ -668,6 +703,13 @@ declare function unbindArrow(arrow: ArrowElement, store: ElementStore): Partial<
 declare function getElementBounds(element: CanvasElement): Bounds | null;
 declare function boundsIntersect(a: Bounds, b: Bounds): boolean;
 
+declare function getHexDistance(a: Point, b: Point, cellSize: number, orientation: HexOrientation): number;
+declare function getHexCellsInRadius(center: Point, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function getHexCellsInCone(center: Point, angle: number, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function getHexCellsInLine(center: Point, angle: number, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function getHexCellsInSquare(center: Point, radiusCells: number, cellSize: number, orientation: HexOrientation): Point[];
+declare function drawHexPath(ctx: CanvasRenderingContext2D, cx: number, cy: number, cellSize: number, orientation: HexOrientation): void;
+
 declare class AddElementCommand implements Command {
     private readonly element;
     constructor(element: CanvasElement);
@@ -780,6 +822,8 @@ declare class SelectTool implements Tool {
     private renderMarquee;
     private renderSelectionBoxes;
     private renderBindingHighlights;
+    private hitTestTemplateResizeHandle;
+    private handleTemplateResize;
     private getMarqueeRect;
     private findElementsInRect;
     private rectsOverlap;
@@ -906,6 +950,80 @@ declare class ShapeTool implements Tool {
     private onKeyUp;
 }
 
+interface MeasureToolOptions {
+    feetPerCell?: number;
+}
+interface Measurement {
+    start: Point;
+    end: Point;
+    worldDistance: number;
+    cells: number;
+    feet: number;
+}
+declare class MeasureTool implements Tool {
+    readonly name = "measure";
+    private start;
+    private end;
+    private gridSize;
+    private gridType;
+    private hexOrientation;
+    private feetPerCell;
+    private optionListeners;
+    constructor(options?: MeasureToolOptions);
+    getOptions(): MeasureToolOptions;
+    setOptions(options: MeasureToolOptions): void;
+    onOptionsChange(listener: () => void): () => void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    onDeactivate(_ctx: ToolContext): void;
+    getMeasurement(): Measurement | null;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+    private snapToGrid;
+    private notifyOptionsChange;
+}
+
+interface TemplateToolOptions {
+    templateShape?: TemplateShape;
+    fillColor?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    feetPerCell?: number;
+}
+declare class TemplateTool implements Tool {
+    readonly name = "template";
+    private drawing;
+    private origin;
+    private current;
+    private gridSize;
+    private gridType;
+    private hexOrientation;
+    private snapEnabled;
+    private templateShape;
+    private fillColor;
+    private strokeColor;
+    private strokeWidth;
+    private opacity;
+    private feetPerCell;
+    private optionListeners;
+    constructor(options?: TemplateToolOptions);
+    getOptions(): TemplateToolOptions;
+    setOptions(options: TemplateToolOptions): void;
+    onOptionsChange(listener: () => void): () => void;
+    onPointerDown(state: PointerState, ctx: ToolContext): void;
+    onPointerMove(state: PointerState, ctx: ToolContext): void;
+    onPointerUp(_state: PointerState, ctx: ToolContext): void;
+    onDeactivate(_ctx: ToolContext): void;
+    renderOverlay(ctx: CanvasRenderingContext2D): void;
+    private renderGeometricOverlay;
+    private renderHexOverlay;
+    private computeRadius;
+    private computeAngle;
+    private snapToGrid;
+    private notifyOptionsChange;
+}
+
 declare class CreateLayerCommand implements Command {
     private readonly manager;
     private readonly layer;
@@ -930,6 +1048,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.8.11";
+declare const VERSION = "0.9.0";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, smartSnap, snapPoint, snapToHexCenter, unbindArrow, updateBoundArrow };