@fieldnotes/core 0.12.0 → 0.14.0

package/dist/index.cjs

@@ -29,6 +29,7 @@ __export(index_exports, {
   CreateLayerCommand: () => CreateLayerCommand,
   DEFAULT_FONT_SIZE_PRESETS: () => DEFAULT_FONT_SIZE_PRESETS,
   DEFAULT_NOTE_FONT_SIZE: () => DEFAULT_NOTE_FONT_SIZE,
+  DoubleTapDetector: () => DoubleTapDetector,
   ElementRenderer: () => ElementRenderer,
   ElementStore: () => ElementStore,
   EraserTool: () => EraserTool,
@@ -83,6 +84,7 @@ __export(index_exports, {
   getEdgeIntersection: () => getEdgeIntersection,
   getElementBounds: () => getElementBounds,
   getElementCenter: () => getElementCenter,
+  getElementsBoundingBox: () => getElementsBoundingBox,
   getHexCellsInCone: () => getHexCellsInCone,
   getHexCellsInLine: () => getHexCellsInLine,
   getHexCellsInRadius: () => getHexCellsInRadius,
@@ -392,8 +394,8 @@ function sanitizeAttributes(el, tag) {
 
 // src/core/state-serializer.ts
 var CURRENT_VERSION = 2;
-function exportState(elements, camera, layers = []) {
-  return {
+function exportState(elements, camera, layers = [], activeLayerId) {
+  const state = {
     version: CURRENT_VERSION,
     camera: {
       position: { ...camera.position },
@@ -408,6 +410,8 @@ function exportState(elements, camera, layers = []) {
     }),
     layers: layers.map((l) => ({ ...l }))
   };
+  if (activeLayerId) state.activeLayerId = activeLayerId;
+  return state;
 }
 function parseState(json) {
   const data = JSON.parse(json);
@@ -565,12 +569,14 @@ var AutoSave = class {
     this.key = options.key ?? DEFAULT_KEY;
     this.debounceMs = options.debounceMs ?? DEFAULT_DEBOUNCE_MS;
     this.layerManager = options.layerManager;
+    this.onError = options.onError;
   }
   key;
   debounceMs;
   layerManager;
   timerId = null;
   unsubscribers = [];
+  onError;
   start() {
     const schedule = () => this.scheduleSave();
     this.unsubscribers = [
@@ -618,8 +624,9 @@ var AutoSave = class {
     const state = exportState(this.store.snapshot(), this.camera, layers);
     try {
       localStorage.setItem(this.key, JSON.stringify(state));
-    } catch {
+    } catch (e) {
       console.warn("Auto-save failed: storage quota exceeded. State too large for localStorage.");
+      this.onError?.(e instanceof Error ? e : new Error(String(e)));
     }
   }
 };
@@ -688,6 +695,15 @@ var Camera = class {
       h: bottomRight.y - topLeft.y
     };
   }
+  fitToContent(boundingBox, canvasWidth, canvasHeight, padding = 40) {
+    if (boundingBox.w === 0 && boundingBox.h === 0) return;
+    const scaleX = canvasWidth / (boundingBox.w + 2 * padding);
+    const scaleY = canvasHeight / (boundingBox.h + 2 * padding);
+    this.z = Math.min(this.maxZoom, Math.max(this.minZoom, Math.min(scaleX, scaleY)));
+    this.x = (canvasWidth - boundingBox.w * this.z) / 2 - boundingBox.x * this.z;
+    this.y = (canvasHeight - boundingBox.h * this.z) / 2 - boundingBox.y * this.z;
+    this.notifyPanAndZoom();
+  }
   toCSSTransform() {
     return `translate3d(${this.x}px, ${this.y}px, 0) scale(${this.z})`;
   }
@@ -1005,7 +1021,9 @@ var InputHandler = class {
       this.camera.pan(dx, dy);
       return;
     }
-    if (this.isToolActive) {
+    if (e.pointerType === "pen" && !this.activePointers.has(e.pointerId)) {
+      this.dispatchToolHover(e);
+    } else if (this.isToolActive) {
       this.dispatchToolMove(e);
     } else if (this.deferredDown) {
       const result = this.inputFilter.filterMove(e);
@@ -1251,6 +1269,48 @@ var InputHandler = class {
   }
 };
 
+// src/canvas/double-tap-detector.ts
+var DEFAULT_TIMEOUT = 300;
+var DEFAULT_MAX_DISTANCE = 20;
+var DoubleTapDetector = class {
+  timeout;
+  maxDistance;
+  lastTapTime = 0;
+  lastTapX = 0;
+  lastTapY = 0;
+  hasPendingTap = false;
+  constructor(options) {
+    this.timeout = options?.timeout ?? DEFAULT_TIMEOUT;
+    this.maxDistance = options?.maxDistance ?? DEFAULT_MAX_DISTANCE;
+  }
+  feed(e) {
+    const now = Date.now();
+    const x = e.clientX;
+    const y = e.clientY;
+    if (this.hasPendingTap) {
+      const elapsed = now - this.lastTapTime;
+      const dx = x - this.lastTapX;
+      const dy = y - this.lastTapY;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (elapsed <= this.timeout && dist <= this.maxDistance) {
+        this.reset();
+        return true;
+      }
+    }
+    this.lastTapTime = now;
+    this.lastTapX = x;
+    this.lastTapY = y;
+    this.hasPendingTap = true;
+    return false;
+  }
+  reset() {
+    this.hasPendingTap = false;
+    this.lastTapTime = 0;
+    this.lastTapX = 0;
+    this.lastTapY = 0;
+  }
+};
+
 // src/elements/arrow-geometry.ts
 function getArrowControlPoint(from, to, bend) {
   const midX = (from.x + to.x) / 2;
@@ -2700,6 +2760,7 @@ function createHtmlElement(input) {
     size: input.size
   };
   if (input.domId) el.domId = input.domId;
+  if (input.interactive) el.interactive = input.interactive;
   return el;
 }
 function createShape(input) {
@@ -2812,7 +2873,7 @@ function getActiveFormats() {
 }
 
 // src/elements/note-toolbar.ts
-var TOOLBAR_HEIGHT = 32;
+var TOOLBAR_HEIGHT = 52;
 var TOOLBAR_GAP = 4;
 var FORMAT_BUTTONS = [
   { label: "B", format: "bold", command: "bold" },
@@ -2899,9 +2960,9 @@ var NoteToolbar = class {
       fontWeight: config.format === "bold" ? "bold" : "normal",
       fontStyle: config.format === "italic" ? "italic" : "normal",
       textDecoration: config.format === "underline" ? "underline" : config.format === "strikethrough" ? "line-through" : "none",
-      minWidth: "24px",
-      height: "24px",
-      lineHeight: "24px"
+      minWidth: "44px",
+      height: "44px",
+      lineHeight: "44px"
     });
     btn.addEventListener("pointerdown", (e) => {
       e.preventDefault();
@@ -2919,7 +2980,7 @@ var NoteToolbar = class {
       cursor: "pointer",
       padding: "2px",
       fontSize: "12px",
-      height: "24px",
+      height: "44px",
       marginLeft: "4px"
     });
     for (const preset of this.fontSizePresets) {
@@ -3917,10 +3978,13 @@ var DomNodeManager = class {
           wordWrap: "break-word"
         });
         node.innerHTML = element.text || "";
-        node.addEventListener("dblclick", (e) => {
-          e.stopPropagation();
-          const id = node.dataset["elementId"];
-          if (id) this.onEditRequest(id);
+        const detector = new DoubleTapDetector();
+        node.addEventListener("pointerup", (e) => {
+          if (detector.feed(e)) {
+            e.stopPropagation();
+            const id = node.dataset["elementId"];
+            if (id) this.onEditRequest(id);
+          }
         });
       }
       if (!this.isEditingElement(element.id)) {
@@ -3933,15 +3997,19 @@ var DomNodeManager = class {
         node.style.fontSize = `${element.fontSize ?? DEFAULT_NOTE_FONT_SIZE}px`;
       }
     }
-    if (element.type === "html" && !node.dataset["initialized"]) {
-      const content = this.htmlContent.get(element.id);
-      if (content) {
-        node.dataset["initialized"] = "true";
-        Object.assign(node.style, {
-          overflow: "hidden",
-          pointerEvents: "none"
-        });
-        node.appendChild(content);
+    if (element.type === "html") {
+      if (!node.dataset["initialized"]) {
+        const content = this.htmlContent.get(element.id);
+        if (content) {
+          node.dataset["initialized"] = "true";
+          Object.assign(node.style, {
+            overflow: "hidden",
+            pointerEvents: element.interactive ? "auto" : "none"
+          });
+          node.appendChild(content);
+        }
+      } else {
+        node.style.pointerEvents = element.interactive ? "auto" : "none";
       }
     }
     if (element.type === "text") {
@@ -3963,10 +4031,13 @@ var DomNodeManager = class {
           lineHeight: "1.4"
         });
         node.textContent = element.text || "";
-        node.addEventListener("dblclick", (e) => {
-          e.stopPropagation();
-          const id = node.dataset["elementId"];
-          if (id) this.onEditRequest(id);
+        const detector = new DoubleTapDetector();
+        node.addEventListener("pointerup", (e) => {
+          if (detector.feed(e)) {
+            e.stopPropagation();
+            const id = node.dataset["elementId"];
+            if (id) this.onEditRequest(id);
+          }
         });
       }
       if (!this.isEditingElement(element.id)) {
@@ -4455,7 +4526,8 @@ var Viewport = class {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
       this.requestRender();
     });
-    this.wrapper.addEventListener("dblclick", this.onDblClick);
+    this.wrapper.addEventListener("pointerdown", this.onTapDown);
+    this.wrapper.addEventListener("pointerup", this.onDoubleTap);
     this.wrapper.addEventListener("dragover", this.onDragOver);
     this.wrapper.addEventListener("drop", this.onDrop);
     this.observeResize();
@@ -4486,6 +4558,9 @@ var Viewport = class {
   domNodeManager;
   interactMode;
   gridChangeListeners = /* @__PURE__ */ new Set();
+  doubleTapDetector = new DoubleTapDetector();
+  tapDownX = 0;
+  tapDownY = 0;
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -4500,7 +4575,12 @@ var Viewport = class {
     this.renderLoop.requestRender();
   }
   exportState() {
-    return exportState(this.store.snapshot(), this.camera, this.layerManager.snapshot());
+    return exportState(
+      this.store.snapshot(),
+      this.camera,
+      this.layerManager.snapshot(),
+      this.layerManager.activeLayerId
+    );
   }
   exportJSON() {
     return JSON.stringify(this.exportState());
@@ -4516,6 +4596,9 @@ var Viewport = class {
     if (state.layers && state.layers.length > 0) {
       this.layerManager.loadSnapshot(state.layers);
     }
+    if (state.activeLayerId) {
+      this.layerManager.setActiveLayer(state.activeLayerId);
+    }
     this.domNodeManager.reattachHtmlContent(this.store);
     this.history.clear();
     this.historyRecorder.resume();
@@ -4623,7 +4706,8 @@ var Viewport = class {
     this.interactMode.destroy();
     this.noteEditor.destroy(this.store);
     this.historyRecorder.destroy();
-    this.wrapper.removeEventListener("dblclick", this.onDblClick);
+    this.wrapper.removeEventListener("pointerdown", this.onTapDown);
+    this.wrapper.removeEventListener("pointerup", this.onDoubleTap);
     this.wrapper.removeEventListener("dragover", this.onDragOver);
     this.wrapper.removeEventListener("drop", this.onDrop);
     this.inputHandler.destroy();
@@ -4661,7 +4745,17 @@ var Viewport = class {
       }
     }
   }
-  onDblClick = (e) => {
+  onTapDown = (e) => {
+    this.tapDownX = e.clientX;
+    this.tapDownY = e.clientY;
+  };
+  onDoubleTap = (e) => {
+    const dx = e.clientX - this.tapDownX;
+    const dy = e.clientY - this.tapDownY;
+    const moved = Math.sqrt(dx * dx + dy * dy);
+    if (moved > 10) return;
+    if (!this.doubleTapDetector.feed(e)) return;
+    if (typeof document.elementFromPoint !== "function") return;
     const el = document.elementFromPoint(e.clientX, e.clientY);
     const nodeEl = el?.closest("[data-element-id]");
     if (nodeEl) {
@@ -4824,6 +4918,26 @@ var Viewport = class {
   }
 };
 
+// src/elements/bounds.ts
+function getElementsBoundingBox(elements) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let found = false;
+  for (const el of elements) {
+    const b = getElementBounds(el);
+    if (!b) continue;
+    found = true;
+    if (b.x < minX) minX = b.x;
+    if (b.y < minY) minY = b.y;
+    if (b.x + b.w > maxX) maxX = b.x + b.w;
+    if (b.y + b.h > maxY) maxY = b.y + b.h;
+  }
+  if (!found) return null;
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+
 // src/tools/hand-tool.ts
 var HandTool = class {
   name = "hand";
@@ -6533,7 +6647,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.12.0";
+var VERSION = "0.14.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -6545,6 +6659,7 @@ var VERSION = "0.12.0";
   CreateLayerCommand,
   DEFAULT_FONT_SIZE_PRESETS,
   DEFAULT_NOTE_FONT_SIZE,
+  DoubleTapDetector,
   ElementRenderer,
   ElementStore,
   EraserTool,
@@ -6599,6 +6714,7 @@ var VERSION = "0.12.0";
   getEdgeIntersection,
   getElementBounds,
   getElementCenter,
+  getElementsBoundingBox,
   getHexCellsInCone,
   getHexCellsInLine,
   getHexCellsInRadius,

package/dist/index.d.cts

@@ -85,6 +85,7 @@ interface HtmlElement extends BaseElement {
     type: 'html';
     size: Size;
     domId?: string;
+    interactive?: boolean;
 }
 interface TextElement extends BaseElement {
     type: 'text';
@@ -146,11 +147,12 @@ interface CanvasState {
     };
     elements: CanvasElement[];
     layers?: Layer[];
+    activeLayerId?: string;
 }
 declare function exportState(elements: CanvasElement[], camera: {
     position: Point;
     zoom: number;
-}, layers?: Layer[]): CanvasState;
+}, layers?: Layer[], activeLayerId?: string): CanvasState;
 declare function parseState(json: string): CanvasState;
 
 interface CameraOptions {
@@ -178,6 +180,7 @@ declare class Camera {
     screenToWorld(screen: Point): Point;
     worldToScreen(world: Point): Point;
     getVisibleRect(canvasWidth: number, canvasHeight: number): Bounds;
+    fitToContent(boundingBox: Bounds, canvasWidth: number, canvasHeight: number, padding?: number): void;
     toCSSTransform(): string;
     onChange(listener: (info: CameraChangeInfo) => void): () => void;
     private notifyPan;
@@ -296,6 +299,7 @@ interface AutoSaveOptions {
     key?: string;
     debounceMs?: number;
     layerManager?: LayerManager;
+    onError?: (error: Error) => void;
 }
 declare class AutoSave {
     private readonly store;
@@ -305,6 +309,7 @@ declare class AutoSave {
     private readonly layerManager?;
     private timerId;
     private unsubscribers;
+    private readonly onError?;
     constructor(store: ElementStore, camera: Camera, options?: AutoSaveOptions);
     start(): void;
     stop(): void;
@@ -481,6 +486,22 @@ declare class InputFilter {
     reset(): void;
 }
 
+interface DoubleTapDetectorOptions {
+    timeout?: number;
+    maxDistance?: number;
+}
+declare class DoubleTapDetector {
+    private readonly timeout;
+    private readonly maxDistance;
+    private lastTapTime;
+    private lastTapX;
+    private lastTapY;
+    private hasPendingTap;
+    constructor(options?: DoubleTapDetectorOptions);
+    feed(e: PointerEvent): boolean;
+    reset(): void;
+}
+
 interface FontSizePreset {
     label: string;
     size: number;
@@ -557,6 +578,9 @@ declare class Viewport {
     private readonly domNodeManager;
     private readonly interactMode;
     private readonly gridChangeListeners;
+    private readonly doubleTapDetector;
+    private tapDownX;
+    private tapDownY;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
     get snapToGrid(): boolean;
@@ -600,7 +624,8 @@ declare class Viewport {
     destroy(): void;
     private startEditingElement;
     private onTextEditStop;
-    private onDblClick;
+    private onTapDown;
+    private onDoubleTap;
     private hitTestWorld;
     stopInteracting(): void;
     private onDragOver;
@@ -737,6 +762,7 @@ interface HtmlInput extends BaseDefaults {
     position: Point;
     size: Size;
     domId?: string;
+    interactive?: boolean;
 }
 interface TextInput extends BaseDefaults {
     position: Point;
@@ -803,6 +829,8 @@ 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 getElementsBoundingBox(elements: CanvasElement[]): Bounds | null;
+
 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[];
@@ -1153,6 +1181,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.12.0";
+declare const VERSION = "0.14.0";
 
-export { type ActiveFormats, 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, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, 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 StyledRun, 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, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };
+export { type ActiveFormats, 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, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, DoubleTapDetector, type DoubleTapDetectorOptions, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, 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 StyledRun, 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, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -85,6 +85,7 @@ interface HtmlElement extends BaseElement {
     type: 'html';
     size: Size;
     domId?: string;
+    interactive?: boolean;
 }
 interface TextElement extends BaseElement {
     type: 'text';
@@ -146,11 +147,12 @@ interface CanvasState {
     };
     elements: CanvasElement[];
     layers?: Layer[];
+    activeLayerId?: string;
 }
 declare function exportState(elements: CanvasElement[], camera: {
     position: Point;
     zoom: number;
-}, layers?: Layer[]): CanvasState;
+}, layers?: Layer[], activeLayerId?: string): CanvasState;
 declare function parseState(json: string): CanvasState;
 
 interface CameraOptions {
@@ -178,6 +180,7 @@ declare class Camera {
     screenToWorld(screen: Point): Point;
     worldToScreen(world: Point): Point;
     getVisibleRect(canvasWidth: number, canvasHeight: number): Bounds;
+    fitToContent(boundingBox: Bounds, canvasWidth: number, canvasHeight: number, padding?: number): void;
     toCSSTransform(): string;
     onChange(listener: (info: CameraChangeInfo) => void): () => void;
     private notifyPan;
@@ -296,6 +299,7 @@ interface AutoSaveOptions {
     key?: string;
     debounceMs?: number;
     layerManager?: LayerManager;
+    onError?: (error: Error) => void;
 }
 declare class AutoSave {
     private readonly store;
@@ -305,6 +309,7 @@ declare class AutoSave {
     private readonly layerManager?;
     private timerId;
     private unsubscribers;
+    private readonly onError?;
     constructor(store: ElementStore, camera: Camera, options?: AutoSaveOptions);
     start(): void;
     stop(): void;
@@ -481,6 +486,22 @@ declare class InputFilter {
     reset(): void;
 }
 
+interface DoubleTapDetectorOptions {
+    timeout?: number;
+    maxDistance?: number;
+}
+declare class DoubleTapDetector {
+    private readonly timeout;
+    private readonly maxDistance;
+    private lastTapTime;
+    private lastTapX;
+    private lastTapY;
+    private hasPendingTap;
+    constructor(options?: DoubleTapDetectorOptions);
+    feed(e: PointerEvent): boolean;
+    reset(): void;
+}
+
 interface FontSizePreset {
     label: string;
     size: number;
@@ -557,6 +578,9 @@ declare class Viewport {
     private readonly domNodeManager;
     private readonly interactMode;
     private readonly gridChangeListeners;
+    private readonly doubleTapDetector;
+    private tapDownX;
+    private tapDownY;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
     get snapToGrid(): boolean;
@@ -600,7 +624,8 @@ declare class Viewport {
     destroy(): void;
     private startEditingElement;
     private onTextEditStop;
-    private onDblClick;
+    private onTapDown;
+    private onDoubleTap;
     private hitTestWorld;
     stopInteracting(): void;
     private onDragOver;
@@ -737,6 +762,7 @@ interface HtmlInput extends BaseDefaults {
     position: Point;
     size: Size;
     domId?: string;
+    interactive?: boolean;
 }
 interface TextInput extends BaseDefaults {
     position: Point;
@@ -803,6 +829,8 @@ 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 getElementsBoundingBox(elements: CanvasElement[]): Bounds | null;
+
 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[];
@@ -1153,6 +1181,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.12.0";
+declare const VERSION = "0.14.0";
 
-export { type ActiveFormats, 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, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, 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 StyledRun, 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, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };
+export { type ActiveFormats, 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, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, DoubleTapDetector, type DoubleTapDetectorOptions, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, 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 StyledRun, 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, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.js

@@ -285,8 +285,8 @@ function sanitizeAttributes(el, tag) {
 
 // src/core/state-serializer.ts
 var CURRENT_VERSION = 2;
-function exportState(elements, camera, layers = []) {
-  return {
+function exportState(elements, camera, layers = [], activeLayerId) {
+  const state = {
     version: CURRENT_VERSION,
     camera: {
       position: { ...camera.position },
@@ -301,6 +301,8 @@ function exportState(elements, camera, layers = []) {
     }),
     layers: layers.map((l) => ({ ...l }))
   };
+  if (activeLayerId) state.activeLayerId = activeLayerId;
+  return state;
 }
 function parseState(json) {
   const data = JSON.parse(json);
@@ -458,12 +460,14 @@ var AutoSave = class {
     this.key = options.key ?? DEFAULT_KEY;
     this.debounceMs = options.debounceMs ?? DEFAULT_DEBOUNCE_MS;
     this.layerManager = options.layerManager;
+    this.onError = options.onError;
   }
   key;
   debounceMs;
   layerManager;
   timerId = null;
   unsubscribers = [];
+  onError;
   start() {
     const schedule = () => this.scheduleSave();
     this.unsubscribers = [
@@ -511,8 +515,9 @@ var AutoSave = class {
     const state = exportState(this.store.snapshot(), this.camera, layers);
     try {
       localStorage.setItem(this.key, JSON.stringify(state));
-    } catch {
+    } catch (e) {
       console.warn("Auto-save failed: storage quota exceeded. State too large for localStorage.");
+      this.onError?.(e instanceof Error ? e : new Error(String(e)));
     }
   }
 };
@@ -581,6 +586,15 @@ var Camera = class {
       h: bottomRight.y - topLeft.y
     };
   }
+  fitToContent(boundingBox, canvasWidth, canvasHeight, padding = 40) {
+    if (boundingBox.w === 0 && boundingBox.h === 0) return;
+    const scaleX = canvasWidth / (boundingBox.w + 2 * padding);
+    const scaleY = canvasHeight / (boundingBox.h + 2 * padding);
+    this.z = Math.min(this.maxZoom, Math.max(this.minZoom, Math.min(scaleX, scaleY)));
+    this.x = (canvasWidth - boundingBox.w * this.z) / 2 - boundingBox.x * this.z;
+    this.y = (canvasHeight - boundingBox.h * this.z) / 2 - boundingBox.y * this.z;
+    this.notifyPanAndZoom();
+  }
   toCSSTransform() {
     return `translate3d(${this.x}px, ${this.y}px, 0) scale(${this.z})`;
   }
@@ -898,7 +912,9 @@ var InputHandler = class {
       this.camera.pan(dx, dy);
       return;
     }
-    if (this.isToolActive) {
+    if (e.pointerType === "pen" && !this.activePointers.has(e.pointerId)) {
+      this.dispatchToolHover(e);
+    } else if (this.isToolActive) {
       this.dispatchToolMove(e);
     } else if (this.deferredDown) {
       const result = this.inputFilter.filterMove(e);
@@ -1144,6 +1160,48 @@ var InputHandler = class {
   }
 };
 
+// src/canvas/double-tap-detector.ts
+var DEFAULT_TIMEOUT = 300;
+var DEFAULT_MAX_DISTANCE = 20;
+var DoubleTapDetector = class {
+  timeout;
+  maxDistance;
+  lastTapTime = 0;
+  lastTapX = 0;
+  lastTapY = 0;
+  hasPendingTap = false;
+  constructor(options) {
+    this.timeout = options?.timeout ?? DEFAULT_TIMEOUT;
+    this.maxDistance = options?.maxDistance ?? DEFAULT_MAX_DISTANCE;
+  }
+  feed(e) {
+    const now = Date.now();
+    const x = e.clientX;
+    const y = e.clientY;
+    if (this.hasPendingTap) {
+      const elapsed = now - this.lastTapTime;
+      const dx = x - this.lastTapX;
+      const dy = y - this.lastTapY;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (elapsed <= this.timeout && dist <= this.maxDistance) {
+        this.reset();
+        return true;
+      }
+    }
+    this.lastTapTime = now;
+    this.lastTapX = x;
+    this.lastTapY = y;
+    this.hasPendingTap = true;
+    return false;
+  }
+  reset() {
+    this.hasPendingTap = false;
+    this.lastTapTime = 0;
+    this.lastTapX = 0;
+    this.lastTapY = 0;
+  }
+};
+
 // src/elements/arrow-geometry.ts
 function getArrowControlPoint(from, to, bend) {
   const midX = (from.x + to.x) / 2;
@@ -2593,6 +2651,7 @@ function createHtmlElement(input) {
     size: input.size
   };
   if (input.domId) el.domId = input.domId;
+  if (input.interactive) el.interactive = input.interactive;
   return el;
 }
 function createShape(input) {
@@ -2705,7 +2764,7 @@ function getActiveFormats() {
 }
 
 // src/elements/note-toolbar.ts
-var TOOLBAR_HEIGHT = 32;
+var TOOLBAR_HEIGHT = 52;
 var TOOLBAR_GAP = 4;
 var FORMAT_BUTTONS = [
   { label: "B", format: "bold", command: "bold" },
@@ -2792,9 +2851,9 @@ var NoteToolbar = class {
       fontWeight: config.format === "bold" ? "bold" : "normal",
       fontStyle: config.format === "italic" ? "italic" : "normal",
       textDecoration: config.format === "underline" ? "underline" : config.format === "strikethrough" ? "line-through" : "none",
-      minWidth: "24px",
-      height: "24px",
-      lineHeight: "24px"
+      minWidth: "44px",
+      height: "44px",
+      lineHeight: "44px"
     });
     btn.addEventListener("pointerdown", (e) => {
       e.preventDefault();
@@ -2812,7 +2871,7 @@ var NoteToolbar = class {
       cursor: "pointer",
       padding: "2px",
       fontSize: "12px",
-      height: "24px",
+      height: "44px",
       marginLeft: "4px"
     });
     for (const preset of this.fontSizePresets) {
@@ -3810,10 +3869,13 @@ var DomNodeManager = class {
           wordWrap: "break-word"
         });
         node.innerHTML = element.text || "";
-        node.addEventListener("dblclick", (e) => {
-          e.stopPropagation();
-          const id = node.dataset["elementId"];
-          if (id) this.onEditRequest(id);
+        const detector = new DoubleTapDetector();
+        node.addEventListener("pointerup", (e) => {
+          if (detector.feed(e)) {
+            e.stopPropagation();
+            const id = node.dataset["elementId"];
+            if (id) this.onEditRequest(id);
+          }
         });
       }
       if (!this.isEditingElement(element.id)) {
@@ -3826,15 +3888,19 @@ var DomNodeManager = class {
         node.style.fontSize = `${element.fontSize ?? DEFAULT_NOTE_FONT_SIZE}px`;
       }
     }
-    if (element.type === "html" && !node.dataset["initialized"]) {
-      const content = this.htmlContent.get(element.id);
-      if (content) {
-        node.dataset["initialized"] = "true";
-        Object.assign(node.style, {
-          overflow: "hidden",
-          pointerEvents: "none"
-        });
-        node.appendChild(content);
+    if (element.type === "html") {
+      if (!node.dataset["initialized"]) {
+        const content = this.htmlContent.get(element.id);
+        if (content) {
+          node.dataset["initialized"] = "true";
+          Object.assign(node.style, {
+            overflow: "hidden",
+            pointerEvents: element.interactive ? "auto" : "none"
+          });
+          node.appendChild(content);
+        }
+      } else {
+        node.style.pointerEvents = element.interactive ? "auto" : "none";
       }
     }
     if (element.type === "text") {
@@ -3856,10 +3922,13 @@ var DomNodeManager = class {
           lineHeight: "1.4"
         });
         node.textContent = element.text || "";
-        node.addEventListener("dblclick", (e) => {
-          e.stopPropagation();
-          const id = node.dataset["elementId"];
-          if (id) this.onEditRequest(id);
+        const detector = new DoubleTapDetector();
+        node.addEventListener("pointerup", (e) => {
+          if (detector.feed(e)) {
+            e.stopPropagation();
+            const id = node.dataset["elementId"];
+            if (id) this.onEditRequest(id);
+          }
         });
       }
       if (!this.isEditingElement(element.id)) {
@@ -4348,7 +4417,8 @@ var Viewport = class {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
       this.requestRender();
     });
-    this.wrapper.addEventListener("dblclick", this.onDblClick);
+    this.wrapper.addEventListener("pointerdown", this.onTapDown);
+    this.wrapper.addEventListener("pointerup", this.onDoubleTap);
     this.wrapper.addEventListener("dragover", this.onDragOver);
     this.wrapper.addEventListener("drop", this.onDrop);
     this.observeResize();
@@ -4379,6 +4449,9 @@ var Viewport = class {
   domNodeManager;
   interactMode;
   gridChangeListeners = /* @__PURE__ */ new Set();
+  doubleTapDetector = new DoubleTapDetector();
+  tapDownX = 0;
+  tapDownY = 0;
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -4393,7 +4466,12 @@ var Viewport = class {
     this.renderLoop.requestRender();
   }
   exportState() {
-    return exportState(this.store.snapshot(), this.camera, this.layerManager.snapshot());
+    return exportState(
+      this.store.snapshot(),
+      this.camera,
+      this.layerManager.snapshot(),
+      this.layerManager.activeLayerId
+    );
   }
   exportJSON() {
     return JSON.stringify(this.exportState());
@@ -4409,6 +4487,9 @@ var Viewport = class {
     if (state.layers && state.layers.length > 0) {
       this.layerManager.loadSnapshot(state.layers);
     }
+    if (state.activeLayerId) {
+      this.layerManager.setActiveLayer(state.activeLayerId);
+    }
     this.domNodeManager.reattachHtmlContent(this.store);
     this.history.clear();
     this.historyRecorder.resume();
@@ -4516,7 +4597,8 @@ var Viewport = class {
     this.interactMode.destroy();
     this.noteEditor.destroy(this.store);
     this.historyRecorder.destroy();
-    this.wrapper.removeEventListener("dblclick", this.onDblClick);
+    this.wrapper.removeEventListener("pointerdown", this.onTapDown);
+    this.wrapper.removeEventListener("pointerup", this.onDoubleTap);
     this.wrapper.removeEventListener("dragover", this.onDragOver);
     this.wrapper.removeEventListener("drop", this.onDrop);
     this.inputHandler.destroy();
@@ -4554,7 +4636,17 @@ var Viewport = class {
       }
     }
   }
-  onDblClick = (e) => {
+  onTapDown = (e) => {
+    this.tapDownX = e.clientX;
+    this.tapDownY = e.clientY;
+  };
+  onDoubleTap = (e) => {
+    const dx = e.clientX - this.tapDownX;
+    const dy = e.clientY - this.tapDownY;
+    const moved = Math.sqrt(dx * dx + dy * dy);
+    if (moved > 10) return;
+    if (!this.doubleTapDetector.feed(e)) return;
+    if (typeof document.elementFromPoint !== "function") return;
     const el = document.elementFromPoint(e.clientX, e.clientY);
     const nodeEl = el?.closest("[data-element-id]");
     if (nodeEl) {
@@ -4717,6 +4809,26 @@ var Viewport = class {
   }
 };
 
+// src/elements/bounds.ts
+function getElementsBoundingBox(elements) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let found = false;
+  for (const el of elements) {
+    const b = getElementBounds(el);
+    if (!b) continue;
+    found = true;
+    if (b.x < minX) minX = b.x;
+    if (b.y < minY) minY = b.y;
+    if (b.x + b.w > maxX) maxX = b.x + b.w;
+    if (b.y + b.h > maxY) maxY = b.y + b.h;
+  }
+  if (!found) return null;
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+
 // src/tools/hand-tool.ts
 var HandTool = class {
   name = "hand";
@@ -6426,7 +6538,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.12.0";
+var VERSION = "0.14.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -6437,6 +6549,7 @@ export {
   CreateLayerCommand,
   DEFAULT_FONT_SIZE_PRESETS,
   DEFAULT_NOTE_FONT_SIZE,
+  DoubleTapDetector,
   ElementRenderer,
   ElementStore,
   EraserTool,
@@ -6491,6 +6604,7 @@ export {
   getEdgeIntersection,
   getElementBounds,
   getElementCenter,
+  getElementsBoundingBox,
   getHexCellsInCone,
   getHexCellsInLine,
   getHexCellsInRadius,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldnotes/core",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Vanilla TypeScript infinite canvas engine",
   "type": "module",
   "main": "./dist/index.cjs",