@fieldnotes/core 0.24.0 → 0.25.0

package/dist/index.cjs

@@ -20,50 +20,30 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  AddElementCommand: () => AddElementCommand,
   ArrowTool: () => ArrowTool,
   AutoSave: () => AutoSave,
-  Background: () => Background,
-  BatchCommand: () => BatchCommand,
   Camera: () => Camera,
-  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,
-  EventBus: () => EventBus,
   HandTool: () => HandTool,
-  HistoryRecorder: () => HistoryRecorder,
   HistoryStack: () => HistoryStack,
   ImageTool: () => ImageTool,
-  InputFilter: () => InputFilter,
-  InputHandler: () => InputHandler,
   LayerManager: () => LayerManager,
   MeasureTool: () => MeasureTool,
-  NoteEditor: () => NoteEditor,
   NoteTool: () => NoteTool,
-  NoteToolbar: () => NoteToolbar,
   PencilTool: () => PencilTool,
-  Quadtree: () => Quadtree,
-  RemoveElementCommand: () => RemoveElementCommand,
-  RemoveLayerCommand: () => RemoveLayerCommand,
   SelectTool: () => SelectTool,
   ShapeTool: () => ShapeTool,
   TemplateTool: () => TemplateTool,
   TextTool: () => TextTool,
   ToolManager: () => ToolManager,
-  UpdateElementCommand: () => UpdateElementCommand,
-  UpdateLayerCommand: () => UpdateLayerCommand,
   VERSION: () => VERSION,
   Viewport: () => Viewport,
   boundsIntersect: () => boundsIntersect,
-  clearStaleBindings: () => clearStaleBindings,
   createArrow: () => createArrow,
   createGrid: () => createGrid,
   createHtmlElement: () => createHtmlElement,
-  createId: () => createId,
   createImage: () => createImage,
   createNote: () => createNote,
   createShape: () => createShape,
@@ -72,29 +52,20 @@ __export(index_exports, {
   createText: () => createText,
   drawHexPath: () => drawHexPath,
   exportImage: () => exportImage,
-  exportState: () => exportState,
-  findBindTarget: () => findBindTarget,
-  findBoundArrows: () => findBoundArrows,
   getActiveFormats: () => getActiveFormats,
   getArrowBounds: () => getArrowBounds,
   getArrowControlPoint: () => getArrowControlPoint,
   getArrowMidpoint: () => getArrowMidpoint,
   getArrowTangentAngle: () => getArrowTangentAngle,
   getBendFromPoint: () => getBendFromPoint,
-  getEdgeIntersection: () => getEdgeIntersection,
   getElementBounds: () => getElementBounds,
-  getElementCenter: () => getElementCenter,
   getElementsBoundingBox: () => getElementsBoundingBox,
   getHexCellsInCone: () => getHexCellsInCone,
   getHexCellsInLine: () => getHexCellsInLine,
   getHexCellsInRadius: () => getHexCellsInRadius,
   getHexCellsInSquare: () => getHexCellsInSquare,
   getHexDistance: () => getHexDistance,
-  isBindable: () => isBindable,
   isNearBezier: () => isNearBezier,
-  isNoteContentEmpty: () => isNoteContentEmpty,
-  parseState: () => parseState,
-  sanitizeNoteHtml: () => sanitizeNoteHtml,
   setFontSize: () => setFontSize,
   smartSnap: () => smartSnap,
   snapPoint: () => snapPoint,
@@ -102,188 +73,41 @@ __export(index_exports, {
   toggleBold: () => toggleBold,
   toggleItalic: () => toggleItalic,
   toggleStrikethrough: () => toggleStrikethrough,
-  toggleUnderline: () => toggleUnderline,
-  unbindArrow: () => unbindArrow,
-  updateBoundArrow: () => updateBoundArrow
+  toggleUnderline: () => toggleUnderline
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/core/event-bus.ts
-var EventBus = class {
-  listeners = /* @__PURE__ */ new Map();
-  on(event, listener) {
-    const existing = this.listeners.get(event);
-    if (existing) {
-      existing.add(listener);
-    } else {
-      const set = /* @__PURE__ */ new Set([listener]);
-      this.listeners.set(event, set);
-    }
-    return () => this.off(event, listener);
-  }
-  off(event, listener) {
-    this.listeners.get(event)?.delete(listener);
-  }
-  emit(event, data) {
-    this.listeners.get(event)?.forEach((listener) => {
-      try {
-        listener(data);
-      } catch (err) {
-        console.error(`[fieldnotes] listener error for "${String(event)}"`, err);
-      }
-    });
-  }
-  clear() {
-    this.listeners.clear();
-  }
-};
-
-// src/core/quadtree.ts
-var MAX_ITEMS = 8;
-var MAX_DEPTH = 8;
-function intersects(a, b) {
-  return a.x <= b.x + b.w && a.x + a.w >= b.x && a.y <= b.y + b.h && a.y + a.h >= b.y;
+// src/core/snap.ts
+function snapPoint(point, gridSize) {
+  return {
+    x: Math.round(point.x / gridSize) * gridSize || 0,
+    y: Math.round(point.y / gridSize) * gridSize || 0
+  };
 }
-var QuadNode = class _QuadNode {
-  constructor(bounds, depth) {
-    this.bounds = bounds;
-    this.depth = depth;
-  }
-  items = [];
-  children = null;
-  insert(entry) {
-    if (this.children) {
-      const idx = this.getChildIndex(entry.bounds);
-      if (idx !== -1) {
-        const child = this.children[idx];
-        if (child) child.insert(entry);
-        return;
-      }
-      this.items.push(entry);
-      return;
-    }
-    this.items.push(entry);
-    if (this.items.length > MAX_ITEMS && this.depth < MAX_DEPTH) {
-      this.split();
-    }
-  }
-  remove(id) {
-    const idx = this.items.findIndex((e) => e.id === id);
-    if (idx !== -1) {
-      this.items.splice(idx, 1);
-      return true;
-    }
-    if (this.children) {
-      for (const child of this.children) {
-        if (child.remove(id)) {
-          this.collapseIfEmpty();
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-  query(rect, result) {
-    if (!intersects(this.bounds, rect)) return;
-    for (const item of this.items) {
-      if (intersects(item.bounds, rect)) {
-        result.push(item.id);
-      }
-    }
-    if (this.children) {
-      for (const child of this.children) {
-        child.query(rect, result);
-      }
-    }
-  }
-  getChildIndex(itemBounds) {
-    const midX = this.bounds.x + this.bounds.w / 2;
-    const midY = this.bounds.y + this.bounds.h / 2;
-    const left = itemBounds.x >= this.bounds.x && itemBounds.x + itemBounds.w <= midX;
-    const right = itemBounds.x >= midX && itemBounds.x + itemBounds.w <= this.bounds.x + this.bounds.w;
-    const top = itemBounds.y >= this.bounds.y && itemBounds.y + itemBounds.h <= midY;
-    const bottom = itemBounds.y >= midY && itemBounds.y + itemBounds.h <= this.bounds.y + this.bounds.h;
-    if (left && top) return 0;
-    if (right && top) return 1;
-    if (left && bottom) return 2;
-    if (right && bottom) return 3;
-    return -1;
-  }
-  split() {
-    const { x, y, w, h } = this.bounds;
-    const halfW = w / 2;
-    const halfH = h / 2;
-    const d = this.depth + 1;
-    this.children = [
-      new _QuadNode({ x, y, w: halfW, h: halfH }, d),
-      new _QuadNode({ x: x + halfW, y, w: halfW, h: halfH }, d),
-      new _QuadNode({ x, y: y + halfH, w: halfW, h: halfH }, d),
-      new _QuadNode({ x: x + halfW, y: y + halfH, w: halfW, h: halfH }, d)
-    ];
-    const remaining = [];
-    for (const item of this.items) {
-      const idx = this.getChildIndex(item.bounds);
-      if (idx !== -1) {
-        const target = this.children[idx];
-        if (target) target.insert(item);
-      } else {
-        remaining.push(item);
-      }
-    }
-    this.items = remaining;
-  }
-  collapseIfEmpty() {
-    if (!this.children) return;
-    let totalItems = this.items.length;
-    for (const child of this.children) {
-      if (child.children) return;
-      totalItems += child.items.length;
-    }
-    if (totalItems <= MAX_ITEMS) {
-      for (const child of this.children) {
-        this.items.push(...child.items);
-      }
-      this.children = null;
-    }
-  }
-};
-var Quadtree = class {
-  root;
-  _size = 0;
-  worldBounds;
-  constructor(worldBounds) {
-    this.worldBounds = worldBounds;
-    this.root = new QuadNode(worldBounds, 0);
-  }
-  get size() {
-    return this._size;
-  }
-  insert(id, bounds) {
-    this.root.insert({ id, bounds });
-    this._size++;
-  }
-  remove(id) {
-    if (this.root.remove(id)) {
-      this._size--;
-    }
-  }
-  update(id, newBounds) {
-    this.remove(id);
-    this.insert(id, newBounds);
-  }
-  query(rect) {
-    const result = [];
-    this.root.query(rect, result);
-    return result;
-  }
-  queryPoint(point) {
-    return this.query({ x: point.x, y: point.y, w: 0, h: 0 });
+function snapToHexCenter(point, cellSize, orientation) {
+  if (orientation === "pointy") {
+    const hexW = Math.sqrt(3) * cellSize;
+    const rowH = 1.5 * cellSize;
+    const row = Math.round(point.y / rowH);
+    const offsetX = row % 2 !== 0 ? hexW / 2 : 0;
+    const col = Math.round((point.x - offsetX) / hexW);
+    return { x: col * hexW + offsetX || 0, y: row * rowH || 0 };
+  } else {
+    const hexH = Math.sqrt(3) * cellSize;
+    const colW = 1.5 * cellSize;
+    const col = Math.round(point.x / colW);
+    const offsetY = col % 2 !== 0 ? hexH / 2 : 0;
+    const row = Math.round((point.y - offsetY) / hexH);
+    return { x: col * colW || 0, y: row * hexH + offsetY || 0 };
   }
-  clear() {
-    this.root = new QuadNode(this.worldBounds, 0);
-    this._size = 0;
+}
+function smartSnap(point, ctx) {
+  if (!ctx.snapToGrid || !ctx.gridSize) return point;
+  if (ctx.gridType === "hex" && ctx.hexOrientation) {
+    return snapToHexCenter(point, ctx.gridSize, ctx.hexOrientation);
   }
-};
+  return snapPoint(point, ctx.gridSize);
+}
 
 // src/elements/note-sanitizer.ts
 var BOLD_TAGS = /* @__PURE__ */ new Set(["b", "strong"]);
@@ -540,38 +364,6 @@ function migrateElement(obj) {
   }
 }
 
-// src/core/snap.ts
-function snapPoint(point, gridSize) {
-  return {
-    x: Math.round(point.x / gridSize) * gridSize || 0,
-    y: Math.round(point.y / gridSize) * gridSize || 0
-  };
-}
-function snapToHexCenter(point, cellSize, orientation) {
-  if (orientation === "pointy") {
-    const hexW = Math.sqrt(3) * cellSize;
-    const rowH = 1.5 * cellSize;
-    const row = Math.round(point.y / rowH);
-    const offsetX = row % 2 !== 0 ? hexW / 2 : 0;
-    const col = Math.round((point.x - offsetX) / hexW);
-    return { x: col * hexW + offsetX || 0, y: row * rowH || 0 };
-  } else {
-    const hexH = Math.sqrt(3) * cellSize;
-    const colW = 1.5 * cellSize;
-    const col = Math.round(point.x / colW);
-    const offsetY = col % 2 !== 0 ? hexH / 2 : 0;
-    const row = Math.round((point.y - offsetY) / hexH);
-    return { x: col * colW || 0, y: row * hexH + offsetY || 0 };
-  }
-}
-function smartSnap(point, ctx) {
-  if (!ctx.snapToGrid || !ctx.gridSize) return point;
-  if (ctx.gridType === "hex" && ctx.hexOrientation) {
-    return snapToHexCenter(point, ctx.gridSize, ctx.hexOrientation);
-  }
-  return snapPoint(point, ctx.gridSize);
-}
-
 // src/core/auto-save.ts
 var DEFAULT_KEY = "fieldnotes-autosave";
 var DEFAULT_DEBOUNCE_MS = 1e3;
@@ -735,143 +527,6 @@ var Camera = class {
   }
 };
 
-// src/canvas/background.ts
-var MIN_PATTERN_SPACING = 16;
-var DEFAULTS = {
-  pattern: "dots",
-  spacing: 24,
-  color: "#d0d0d0",
-  dotRadius: 1,
-  lineWidth: 0.5
-};
-var Background = class {
-  pattern;
-  spacing;
-  color;
-  dotRadius;
-  lineWidth;
-  cachedCanvas = null;
-  cachedCtx = null;
-  lastZoom = -1;
-  lastOffsetX = -Infinity;
-  lastOffsetY = -Infinity;
-  lastWidth = 0;
-  lastHeight = 0;
-  constructor(options = {}) {
-    this.pattern = options.pattern ?? DEFAULTS.pattern;
-    this.spacing = options.spacing ?? DEFAULTS.spacing;
-    this.color = options.color ?? DEFAULTS.color;
-    this.dotRadius = options.dotRadius ?? DEFAULTS.dotRadius;
-    this.lineWidth = options.lineWidth ?? DEFAULTS.lineWidth;
-  }
-  render(ctx, camera) {
-    const { width, height } = ctx.canvas;
-    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
-    const cssWidth = width / dpr;
-    const cssHeight = height / dpr;
-    ctx.save();
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    ctx.clearRect(0, 0, cssWidth, cssHeight);
-    if (this.pattern === "none") {
-      ctx.restore();
-      return;
-    }
-    const spacing = this.adaptSpacing(this.spacing, camera.zoom);
-    const keyZoom = camera.zoom;
-    const keyX = Math.floor(camera.position.x % spacing);
-    const keyY = Math.floor(camera.position.y % spacing);
-    if (this.cachedCanvas !== null && keyZoom === this.lastZoom && keyX === this.lastOffsetX && keyY === this.lastOffsetY && cssWidth === this.lastWidth && cssHeight === this.lastHeight) {
-      ctx.drawImage(this.cachedCanvas, 0, 0);
-      ctx.restore();
-      return;
-    }
-    this.ensureCachedCanvas(cssWidth, cssHeight, dpr);
-    if (this.cachedCtx === null) {
-      if (this.pattern === "dots") {
-        this.renderDots(ctx, camera, cssWidth, cssHeight);
-      } else if (this.pattern === "grid") {
-        this.renderGrid(ctx, camera, cssWidth, cssHeight);
-      }
-      ctx.restore();
-      return;
-    }
-    const offCtx = this.cachedCtx;
-    offCtx.clearRect(0, 0, cssWidth, cssHeight);
-    if (this.pattern === "dots") {
-      this.renderDots(offCtx, camera, cssWidth, cssHeight);
-    } else if (this.pattern === "grid") {
-      this.renderGrid(offCtx, camera, cssWidth, cssHeight);
-    }
-    this.lastZoom = keyZoom;
-    this.lastOffsetX = keyX;
-    this.lastOffsetY = keyY;
-    this.lastWidth = cssWidth;
-    this.lastHeight = cssHeight;
-    ctx.drawImage(this.cachedCanvas, 0, 0);
-    ctx.restore();
-  }
-  ensureCachedCanvas(cssWidth, cssHeight, dpr) {
-    if (this.cachedCanvas !== null && this.lastWidth === cssWidth && this.lastHeight === cssHeight) {
-      return;
-    }
-    const physWidth = Math.round(cssWidth * dpr);
-    const physHeight = Math.round(cssHeight * dpr);
-    if (typeof OffscreenCanvas !== "undefined") {
-      this.cachedCanvas = new OffscreenCanvas(physWidth, physHeight);
-    } else if (typeof document !== "undefined") {
-      const el = document.createElement("canvas");
-      el.width = physWidth;
-      el.height = physHeight;
-      this.cachedCanvas = el;
-    } else {
-      this.cachedCanvas = null;
-      this.cachedCtx = null;
-      return;
-    }
-    const offCtx = this.cachedCanvas.getContext("2d");
-    if (offCtx !== null) {
-      offCtx.scale(dpr, dpr);
-    }
-    this.cachedCtx = offCtx;
-    this.lastZoom = -1;
-  }
-  adaptSpacing(baseSpacing, zoom) {
-    let spacing = baseSpacing * zoom;
-    while (spacing < MIN_PATTERN_SPACING) {
-      spacing *= 2;
-    }
-    return spacing;
-  }
-  renderDots(ctx, camera, width, height) {
-    const spacing = this.adaptSpacing(this.spacing, camera.zoom);
-    const offsetX = camera.position.x % spacing;
-    const offsetY = camera.position.y % spacing;
-    const radius = this.dotRadius * Math.min(camera.zoom, 2);
-    ctx.fillStyle = this.color;
-    ctx.beginPath();
-    for (let x = offsetX; x < width; x += spacing) {
-      for (let y = offsetY; y < height; y += spacing) {
-        ctx.moveTo(x + radius, y);
-        ctx.arc(x, y, radius, 0, Math.PI * 2);
-      }
-    }
-    ctx.fill();
-  }
-  renderGrid(ctx, camera, width, height) {
-    const spacing = this.adaptSpacing(this.spacing, camera.zoom);
-    const offsetX = camera.position.x % spacing;
-    const offsetY = camera.position.y % spacing;
-    const lineW = this.lineWidth * Math.min(camera.zoom, 2);
-    ctx.fillStyle = this.color;
-    for (let x = offsetX; x < width; x += spacing) {
-      ctx.fillRect(x, 0, lineW, height);
-    }
-    for (let y = offsetY; y < height; y += spacing) {
-      ctx.fillRect(0, y, width, lineW);
-    }
-  }
-};
-
 // src/canvas/input-filter.ts
 var InputFilter = class _InputFilter {
   activePenId = null;
@@ -1597,115 +1252,387 @@ var InputHandler = class {
       const newZoom = this.camera.zoom * scale;
       this.camera.zoomAt(newZoom, center);
     }
-    const dx = center.x - this.lastPointer.x;
-    const dy = center.y - this.lastPointer.y;
-    this.camera.pan(dx, dy);
-    this.lastPinchDistance = dist;
-    this.lastPinchCenter = center;
-    this.lastPointer = { ...center };
-  }
-  getPinchPoints() {
-    const pts = [...this.activePointers.values()];
-    return [pts[0] ?? { x: 0, y: 0 }, pts[1] ?? { x: 0, y: 0 }];
-  }
-  distance(a, b) {
-    const dx = a.x - b.x;
-    const dy = a.y - b.y;
-    return Math.sqrt(dx * dx + dy * dy);
+    const dx = center.x - this.lastPointer.x;
+    const dy = center.y - this.lastPointer.y;
+    this.camera.pan(dx, dy);
+    this.lastPinchDistance = dist;
+    this.lastPinchCenter = center;
+    this.lastPointer = { ...center };
+  }
+  getPinchPoints() {
+    const pts = [...this.activePointers.values()];
+    return [pts[0] ?? { x: 0, y: 0 }, pts[1] ?? { x: 0, y: 0 }];
+  }
+  distance(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+  midpoint(a, b) {
+    return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+  }
+  toPointerState(e) {
+    const rect = this.element.getBoundingClientRect();
+    return {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+      pressure: e.pressure,
+      pointerType: e.pointerType === "touch" || e.pointerType === "pen" ? e.pointerType : "mouse",
+      shiftKey: e.shiftKey
+    };
+  }
+  dispatchToolDown(e) {
+    if (!this.toolManager || !this.toolContext) return;
+    this.actions.flushPendingNudge();
+    this.historyRecorder?.begin();
+    this.isToolActive = true;
+    this.toolManager.handlePointerDown(this.toPointerState(e), this.toolContext);
+  }
+  dispatchToolMove(e) {
+    if (!this.toolManager || !this.toolContext) return;
+    this.toolManager.handlePointerMove(this.toPointerState(e), this.toolContext);
+  }
+  dispatchToolHover(e) {
+    if (!this.toolManager?.activeTool || !this.toolContext) return;
+    const tool = this.toolManager.activeTool;
+    if (tool.onHover) {
+      tool.onHover(this.toPointerState(e), this.toolContext);
+    }
+  }
+  dispatchToolUp(e) {
+    if (!this.toolManager || !this.toolContext) return;
+    this.toolManager.handlePointerUp(this.toPointerState(e), this.toolContext);
+    this.historyRecorder?.commit();
+  }
+  isInScope() {
+    if (this.scope === "window") return true;
+    const active = document.activeElement;
+    return active === this.element || this.element.contains(active);
+  }
+  focusSelf() {
+    if (this.scope !== "focus" || this.isInScope()) return;
+    this.element.focus({ preventScroll: true });
+  }
+  cancelToolIfActive(e) {
+    if (this.isToolActive) {
+      this.dispatchToolUp(e);
+      this.isToolActive = false;
+    }
+    this.deferredDown = null;
+  }
+};
+
+// src/canvas/background.ts
+var MIN_PATTERN_SPACING = 16;
+var DEFAULTS = {
+  pattern: "dots",
+  spacing: 24,
+  color: "#d0d0d0",
+  dotRadius: 1,
+  lineWidth: 0.5
+};
+var Background = class {
+  pattern;
+  spacing;
+  color;
+  dotRadius;
+  lineWidth;
+  cachedCanvas = null;
+  cachedCtx = null;
+  lastZoom = -1;
+  lastOffsetX = -Infinity;
+  lastOffsetY = -Infinity;
+  lastWidth = 0;
+  lastHeight = 0;
+  constructor(options = {}) {
+    this.pattern = options.pattern ?? DEFAULTS.pattern;
+    this.spacing = options.spacing ?? DEFAULTS.spacing;
+    this.color = options.color ?? DEFAULTS.color;
+    this.dotRadius = options.dotRadius ?? DEFAULTS.dotRadius;
+    this.lineWidth = options.lineWidth ?? DEFAULTS.lineWidth;
+  }
+  render(ctx, camera) {
+    const { width, height } = ctx.canvas;
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    const cssWidth = width / dpr;
+    const cssHeight = height / dpr;
+    ctx.save();
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, cssWidth, cssHeight);
+    if (this.pattern === "none") {
+      ctx.restore();
+      return;
+    }
+    const spacing = this.adaptSpacing(this.spacing, camera.zoom);
+    const keyZoom = camera.zoom;
+    const keyX = Math.floor(camera.position.x % spacing);
+    const keyY = Math.floor(camera.position.y % spacing);
+    if (this.cachedCanvas !== null && keyZoom === this.lastZoom && keyX === this.lastOffsetX && keyY === this.lastOffsetY && cssWidth === this.lastWidth && cssHeight === this.lastHeight) {
+      ctx.drawImage(this.cachedCanvas, 0, 0);
+      ctx.restore();
+      return;
+    }
+    this.ensureCachedCanvas(cssWidth, cssHeight, dpr);
+    if (this.cachedCtx === null) {
+      if (this.pattern === "dots") {
+        this.renderDots(ctx, camera, cssWidth, cssHeight);
+      } else if (this.pattern === "grid") {
+        this.renderGrid(ctx, camera, cssWidth, cssHeight);
+      }
+      ctx.restore();
+      return;
+    }
+    const offCtx = this.cachedCtx;
+    offCtx.clearRect(0, 0, cssWidth, cssHeight);
+    if (this.pattern === "dots") {
+      this.renderDots(offCtx, camera, cssWidth, cssHeight);
+    } else if (this.pattern === "grid") {
+      this.renderGrid(offCtx, camera, cssWidth, cssHeight);
+    }
+    this.lastZoom = keyZoom;
+    this.lastOffsetX = keyX;
+    this.lastOffsetY = keyY;
+    this.lastWidth = cssWidth;
+    this.lastHeight = cssHeight;
+    ctx.drawImage(this.cachedCanvas, 0, 0);
+    ctx.restore();
+  }
+  ensureCachedCanvas(cssWidth, cssHeight, dpr) {
+    if (this.cachedCanvas !== null && this.lastWidth === cssWidth && this.lastHeight === cssHeight) {
+      return;
+    }
+    const physWidth = Math.round(cssWidth * dpr);
+    const physHeight = Math.round(cssHeight * dpr);
+    if (typeof OffscreenCanvas !== "undefined") {
+      this.cachedCanvas = new OffscreenCanvas(physWidth, physHeight);
+    } else if (typeof document !== "undefined") {
+      const el = document.createElement("canvas");
+      el.width = physWidth;
+      el.height = physHeight;
+      this.cachedCanvas = el;
+    } else {
+      this.cachedCanvas = null;
+      this.cachedCtx = null;
+      return;
+    }
+    const offCtx = this.cachedCanvas.getContext("2d");
+    if (offCtx !== null) {
+      offCtx.scale(dpr, dpr);
+    }
+    this.cachedCtx = offCtx;
+    this.lastZoom = -1;
+  }
+  adaptSpacing(baseSpacing, zoom) {
+    let spacing = baseSpacing * zoom;
+    while (spacing < MIN_PATTERN_SPACING) {
+      spacing *= 2;
+    }
+    return spacing;
+  }
+  renderDots(ctx, camera, width, height) {
+    const spacing = this.adaptSpacing(this.spacing, camera.zoom);
+    const offsetX = camera.position.x % spacing;
+    const offsetY = camera.position.y % spacing;
+    const radius = this.dotRadius * Math.min(camera.zoom, 2);
+    ctx.fillStyle = this.color;
+    ctx.beginPath();
+    for (let x = offsetX; x < width; x += spacing) {
+      for (let y = offsetY; y < height; y += spacing) {
+        ctx.moveTo(x + radius, y);
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
+      }
+    }
+    ctx.fill();
+  }
+  renderGrid(ctx, camera, width, height) {
+    const spacing = this.adaptSpacing(this.spacing, camera.zoom);
+    const offsetX = camera.position.x % spacing;
+    const offsetY = camera.position.y % spacing;
+    const lineW = this.lineWidth * Math.min(camera.zoom, 2);
+    ctx.fillStyle = this.color;
+    for (let x = offsetX; x < width; x += spacing) {
+      ctx.fillRect(x, 0, lineW, height);
+    }
+    for (let y = offsetY; y < height; y += spacing) {
+      ctx.fillRect(0, y, width, lineW);
+    }
+  }
+};
+
+// src/core/event-bus.ts
+var EventBus = class {
+  listeners = /* @__PURE__ */ new Map();
+  on(event, listener) {
+    const existing = this.listeners.get(event);
+    if (existing) {
+      existing.add(listener);
+    } else {
+      const set = /* @__PURE__ */ new Set([listener]);
+      this.listeners.set(event, set);
+    }
+    return () => this.off(event, listener);
+  }
+  off(event, listener) {
+    this.listeners.get(event)?.delete(listener);
+  }
+  emit(event, data) {
+    this.listeners.get(event)?.forEach((listener) => {
+      try {
+        listener(data);
+      } catch (err) {
+        console.error(`[fieldnotes] listener error for "${String(event)}"`, err);
+      }
+    });
+  }
+  clear() {
+    this.listeners.clear();
+  }
+};
+
+// src/core/quadtree.ts
+var MAX_ITEMS = 8;
+var MAX_DEPTH = 8;
+function intersects(a, b) {
+  return a.x <= b.x + b.w && a.x + a.w >= b.x && a.y <= b.y + b.h && a.y + a.h >= b.y;
+}
+var QuadNode = class _QuadNode {
+  constructor(bounds, depth) {
+    this.bounds = bounds;
+    this.depth = depth;
+  }
+  items = [];
+  children = null;
+  insert(entry) {
+    if (this.children) {
+      const idx = this.getChildIndex(entry.bounds);
+      if (idx !== -1) {
+        const child = this.children[idx];
+        if (child) child.insert(entry);
+        return;
+      }
+      this.items.push(entry);
+      return;
+    }
+    this.items.push(entry);
+    if (this.items.length > MAX_ITEMS && this.depth < MAX_DEPTH) {
+      this.split();
+    }
   }
-  midpoint(a, b) {
-    return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+  remove(id) {
+    const idx = this.items.findIndex((e) => e.id === id);
+    if (idx !== -1) {
+      this.items.splice(idx, 1);
+      return true;
+    }
+    if (this.children) {
+      for (const child of this.children) {
+        if (child.remove(id)) {
+          this.collapseIfEmpty();
+          return true;
+        }
+      }
+    }
+    return false;
   }
-  toPointerState(e) {
-    const rect = this.element.getBoundingClientRect();
-    return {
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top,
-      pressure: e.pressure,
-      pointerType: e.pointerType === "touch" || e.pointerType === "pen" ? e.pointerType : "mouse",
-      shiftKey: e.shiftKey
-    };
+  query(rect, result) {
+    if (!intersects(this.bounds, rect)) return;
+    for (const item of this.items) {
+      if (intersects(item.bounds, rect)) {
+        result.push(item.id);
+      }
+    }
+    if (this.children) {
+      for (const child of this.children) {
+        child.query(rect, result);
+      }
+    }
   }
-  dispatchToolDown(e) {
-    if (!this.toolManager || !this.toolContext) return;
-    this.actions.flushPendingNudge();
-    this.historyRecorder?.begin();
-    this.isToolActive = true;
-    this.toolManager.handlePointerDown(this.toPointerState(e), this.toolContext);
+  getChildIndex(itemBounds) {
+    const midX = this.bounds.x + this.bounds.w / 2;
+    const midY = this.bounds.y + this.bounds.h / 2;
+    const left = itemBounds.x >= this.bounds.x && itemBounds.x + itemBounds.w <= midX;
+    const right = itemBounds.x >= midX && itemBounds.x + itemBounds.w <= this.bounds.x + this.bounds.w;
+    const top = itemBounds.y >= this.bounds.y && itemBounds.y + itemBounds.h <= midY;
+    const bottom = itemBounds.y >= midY && itemBounds.y + itemBounds.h <= this.bounds.y + this.bounds.h;
+    if (left && top) return 0;
+    if (right && top) return 1;
+    if (left && bottom) return 2;
+    if (right && bottom) return 3;
+    return -1;
   }
-  dispatchToolMove(e) {
-    if (!this.toolManager || !this.toolContext) return;
-    this.toolManager.handlePointerMove(this.toPointerState(e), this.toolContext);
+  split() {
+    const { x, y, w, h } = this.bounds;
+    const halfW = w / 2;
+    const halfH = h / 2;
+    const d = this.depth + 1;
+    this.children = [
+      new _QuadNode({ x, y, w: halfW, h: halfH }, d),
+      new _QuadNode({ x: x + halfW, y, w: halfW, h: halfH }, d),
+      new _QuadNode({ x, y: y + halfH, w: halfW, h: halfH }, d),
+      new _QuadNode({ x: x + halfW, y: y + halfH, w: halfW, h: halfH }, d)
+    ];
+    const remaining = [];
+    for (const item of this.items) {
+      const idx = this.getChildIndex(item.bounds);
+      if (idx !== -1) {
+        const target = this.children[idx];
+        if (target) target.insert(item);
+      } else {
+        remaining.push(item);
+      }
+    }
+    this.items = remaining;
   }
-  dispatchToolHover(e) {
-    if (!this.toolManager?.activeTool || !this.toolContext) return;
-    const tool = this.toolManager.activeTool;
-    if (tool.onHover) {
-      tool.onHover(this.toPointerState(e), this.toolContext);
+  collapseIfEmpty() {
+    if (!this.children) return;
+    let totalItems = this.items.length;
+    for (const child of this.children) {
+      if (child.children) return;
+      totalItems += child.items.length;
+    }
+    if (totalItems <= MAX_ITEMS) {
+      for (const child of this.children) {
+        this.items.push(...child.items);
+      }
+      this.children = null;
     }
   }
-  dispatchToolUp(e) {
-    if (!this.toolManager || !this.toolContext) return;
-    this.toolManager.handlePointerUp(this.toPointerState(e), this.toolContext);
-    this.historyRecorder?.commit();
+};
+var Quadtree = class {
+  root;
+  _size = 0;
+  worldBounds;
+  constructor(worldBounds) {
+    this.worldBounds = worldBounds;
+    this.root = new QuadNode(worldBounds, 0);
   }
-  isInScope() {
-    if (this.scope === "window") return true;
-    const active = document.activeElement;
-    return active === this.element || this.element.contains(active);
+  get size() {
+    return this._size;
   }
-  focusSelf() {
-    if (this.scope !== "focus" || this.isInScope()) return;
-    this.element.focus({ preventScroll: true });
+  insert(id, bounds) {
+    this.root.insert({ id, bounds });
+    this._size++;
   }
-  cancelToolIfActive(e) {
-    if (this.isToolActive) {
-      this.dispatchToolUp(e);
-      this.isToolActive = false;
+  remove(id) {
+    if (this.root.remove(id)) {
+      this._size--;
     }
-    this.deferredDown = null;
   }
-};
-
-// 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;
+  update(id, newBounds) {
+    this.remove(id);
+    this.insert(id, newBounds);
   }
-  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;
+  query(rect) {
+    const result = [];
+    this.root.query(rect, result);
+    return result;
   }
-  reset() {
-    this.hasPendingTap = false;
-    this.lastTapTime = 0;
-    this.lastTapX = 0;
-    this.lastTapY = 0;
+  queryPoint(point) {
+    return this.query({ x: point.x, y: point.y, w: 0, h: 0 });
+  }
+  clear() {
+    this.root = new QuadNode(this.worldBounds, 0);
+    this._size = 0;
   }
 };
 
@@ -2354,51 +2281,6 @@ function updateBoundArrow(arrow, store) {
   }
   return Object.keys(updates).length > 0 ? updates : null;
 }
-function clearStaleBindings(arrow, store) {
-  const updates = {};
-  let hasUpdates = false;
-  if (arrow.fromBinding && !store.getById(arrow.fromBinding.elementId)) {
-    updates.fromBinding = void 0;
-    hasUpdates = true;
-  }
-  if (arrow.toBinding && !store.getById(arrow.toBinding.elementId)) {
-    updates.toBinding = void 0;
-    hasUpdates = true;
-  }
-  return hasUpdates ? updates : null;
-}
-function unbindArrow(arrow, store) {
-  const updates = {};
-  if (arrow.fromBinding) {
-    const el = store.getById(arrow.fromBinding.elementId);
-    const bounds = el ? getElementBounds(el) : null;
-    if (bounds) {
-      const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 0);
-      const rayTarget = {
-        x: arrow.from.x + Math.cos(angle) * 1e3,
-        y: arrow.from.y + Math.sin(angle) * 1e3
-      };
-      const edge = getEdgeIntersection(bounds, rayTarget);
-      updates.from = edge;
-      updates.position = edge;
-    }
-    updates.fromBinding = void 0;
-  }
-  if (arrow.toBinding) {
-    const el = store.getById(arrow.toBinding.elementId);
-    const bounds = el ? getElementBounds(el) : null;
-    if (bounds) {
-      const angle = getArrowTangentAngle(arrow.from, arrow.to, arrow.bend, 1);
-      const rayTarget = {
-        x: arrow.to.x - Math.cos(angle) * 1e3,
-        y: arrow.to.y - Math.sin(angle) * 1e3
-      };
-      updates.to = getEdgeIntersection(bounds, rayTarget);
-    }
-    updates.toBinding = void 0;
-  }
-  return updates;
-}
 
 // src/elements/grid-renderer.ts
 function getSquareGridLines(bounds, cellSize) {
@@ -4591,6 +4473,48 @@ var InteractMode = 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/canvas/dom-node-manager.ts
 var DomNodeManager = class {
   domNodes = /* @__PURE__ */ new Map();
@@ -7592,53 +7516,33 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.24.0";
+var VERSION = "0.25.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AddElementCommand,
   ArrowTool,
   AutoSave,
-  Background,
-  BatchCommand,
   Camera,
-  CreateLayerCommand,
-  DEFAULT_FONT_SIZE_PRESETS,
   DEFAULT_NOTE_FONT_SIZE,
-  DoubleTapDetector,
-  ElementRenderer,
   ElementStore,
   EraserTool,
-  EventBus,
   HandTool,
-  HistoryRecorder,
   HistoryStack,
   ImageTool,
-  InputFilter,
-  InputHandler,
   LayerManager,
   MeasureTool,
-  NoteEditor,
   NoteTool,
-  NoteToolbar,
   PencilTool,
-  Quadtree,
-  RemoveElementCommand,
-  RemoveLayerCommand,
   SelectTool,
   ShapeTool,
   TemplateTool,
   TextTool,
   ToolManager,
-  UpdateElementCommand,
-  UpdateLayerCommand,
   VERSION,
   Viewport,
   boundsIntersect,
-  clearStaleBindings,
   createArrow,
   createGrid,
   createHtmlElement,
-  createId,
   createImage,
   createNote,
   createShape,
@@ -7647,29 +7551,20 @@ var VERSION = "0.24.0";
   createText,
   drawHexPath,
   exportImage,
-  exportState,
-  findBindTarget,
-  findBoundArrows,
   getActiveFormats,
   getArrowBounds,
   getArrowControlPoint,
   getArrowMidpoint,
   getArrowTangentAngle,
   getBendFromPoint,
-  getEdgeIntersection,
   getElementBounds,
-  getElementCenter,
   getElementsBoundingBox,
   getHexCellsInCone,
   getHexCellsInLine,
   getHexCellsInRadius,
   getHexCellsInSquare,
   getHexDistance,
-  isBindable,
   isNearBezier,
-  isNoteContentEmpty,
-  parseState,
-  sanitizeNoteHtml,
   setFontSize,
   smartSnap,
   snapPoint,
@@ -7677,8 +7572,6 @@ var VERSION = "0.24.0";
   toggleBold,
   toggleItalic,
   toggleStrikethrough,
-  toggleUnderline,
-  unbindArrow,
-  updateBoundArrow
+  toggleUnderline
 });
 //# sourceMappingURL=index.cjs.map