@fieldnotes/core 0.23.0 → 0.25.0

package/dist/index.js

@@ -1,179 +1,34 @@
-// 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"]);
@@ -430,38 +285,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;
@@ -625,143 +448,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;
@@ -923,16 +609,17 @@ var KeyboardActions = class {
     this.pasteCount = 0;
   }
   paste() {
+    if (this.deps.isToolActive()) return;
     this.flushPendingNudge();
-    if (this.clipboard.length === 0 || this.deps.isToolActive()) return;
+    if (this.clipboard.length === 0) return;
     const sel = this.selectTool();
     if (!sel) return;
     this.pasteCount++;
     this.insertClones(this.clipboard, this.pasteCount * 20, sel);
   }
   duplicate() {
-    this.flushPendingNudge();
     if (this.deps.isToolActive()) return;
+    this.flushPendingNudge();
     const sel = this.selectTool();
     if (!sel) return;
     const source = [];
@@ -1116,6 +803,11 @@ function parseBinding(binding) {
         throw new Error(`Invalid shortcut binding "${binding}": unknown modifier "${part}"`);
     }
   }
+  if (parsed.mod && (parsed.ctrl || parsed.meta)) {
+    throw new Error(
+      `Invalid shortcut binding "${binding}": "mod" already means Ctrl or Cmd; don't combine it with ctrl/meta`
+    );
+  }
   return parsed;
 }
 function bindingMatches(p, e, allowShift) {
@@ -1259,6 +951,10 @@ var InputHandler = class {
     this.inputFilter.reset();
     this.deferredDown = null;
     this.lastPointerEvent = null;
+    if (this.scope === "focus") {
+      this.element.removeAttribute("tabindex");
+      this.element.style.outline = "";
+    }
   }
   bind() {
     const opts = { signal: this.abortController.signal };
@@ -1449,145 +1145,433 @@ var InputHandler = class {
         }
         return;
       }
-      default:
-        if (action.startsWith("tool:")) {
-          if (this.isToolActive) return;
-          e.preventDefault();
-          this.toolContext?.switchTool?.(action.slice("tool:".length));
-          return;
-        }
-        console.warn(`[fieldnotes] unknown shortcut action "${action}"`);
+      default:
+        if (action.startsWith("tool:")) {
+          if (this.isToolActive) return;
+          e.preventDefault();
+          this.toolContext?.switchTool?.(action.slice("tool:".length));
+          return;
+        }
+        console.warn(`[fieldnotes] unknown shortcut action "${action}"`);
+    }
+  }
+  startPinch() {
+    this.inputFilter.reset();
+    this.deferredDown = null;
+    this.isPanning = true;
+    const [a, b] = this.getPinchPoints();
+    this.lastPinchDistance = this.distance(a, b);
+    this.lastPinchCenter = this.midpoint(a, b);
+    this.lastPointer = { ...this.lastPinchCenter };
+  }
+  handlePinchMove() {
+    const [a, b] = this.getPinchPoints();
+    const dist = this.distance(a, b);
+    const center = this.midpoint(a, b);
+    if (this.lastPinchDistance > 0) {
+      const scale = dist / this.lastPinchDistance;
+      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);
+  }
+  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();
+    }
+  }
+  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;
   }
-  startPinch() {
-    this.inputFilter.reset();
-    this.deferredDown = null;
-    this.isPanning = true;
-    const [a, b] = this.getPinchPoints();
-    this.lastPinchDistance = this.distance(a, b);
-    this.lastPinchCenter = this.midpoint(a, b);
-    this.lastPointer = { ...this.lastPinchCenter };
-  }
-  handlePinchMove() {
-    const [a, b] = this.getPinchPoints();
-    const dist = this.distance(a, b);
-    const center = this.midpoint(a, b);
-    if (this.lastPinchDistance > 0) {
-      const scale = dist / this.lastPinchDistance;
-      const newZoom = this.camera.zoom * scale;
-      this.camera.zoomAt(newZoom, center);
+  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;
     }
-    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
-    };
+};
+var Quadtree = class {
+  root;
+  _size = 0;
+  worldBounds;
+  constructor(worldBounds) {
+    this.worldBounds = worldBounds;
+    this.root = new QuadNode(worldBounds, 0);
   }
-  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);
+  get size() {
+    return this._size;
   }
-  dispatchToolMove(e) {
-    if (!this.toolManager || !this.toolContext) return;
-    this.toolManager.handlePointerMove(this.toPointerState(e), this.toolContext);
+  insert(id, bounds) {
+    this.root.insert({ id, bounds });
+    this._size++;
   }
-  dispatchToolHover(e) {
-    if (!this.toolManager?.activeTool || !this.toolContext) return;
-    const tool = this.toolManager.activeTool;
-    if (tool.onHover) {
-      tool.onHover(this.toPointerState(e), this.toolContext);
+  remove(id) {
+    if (this.root.remove(id)) {
+      this._size--;
     }
   }
-  dispatchToolUp(e) {
-    if (!this.toolManager || !this.toolContext) return;
-    this.toolManager.handlePointerUp(this.toPointerState(e), this.toolContext);
-    this.historyRecorder?.commit();
+  update(id, newBounds) {
+    this.remove(id);
+    this.insert(id, newBounds);
   }
-  isInScope() {
-    if (this.scope === "window") return true;
-    const active = document.activeElement;
-    return active === this.element || this.element.contains(active);
+  query(rect) {
+    const result = [];
+    this.root.query(rect, result);
+    return result;
   }
-  focusSelf() {
-    if (this.scope !== "focus" || this.isInScope()) return;
-    this.element.focus({ preventScroll: true });
+  queryPoint(point) {
+    return this.query({ x: point.x, y: point.y, w: 0, h: 0 });
   }
-  cancelToolIfActive(e) {
-    if (this.isToolActive) {
-      this.dispatchToolUp(e);
-      this.isToolActive = false;
-    }
-    this.deferredDown = null;
+  clear() {
+    this.root = new QuadNode(this.worldBounds, 0);
+    this._size = 0;
   }
 };
 
-// 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/core/geometry.ts
+function distSqToSegment(p, a, b) {
+  const abx = b.x - a.x;
+  const aby = b.y - a.y;
+  const apx = p.x - a.x;
+  const apy = p.y - a.y;
+  const lenSq = abx * abx + aby * aby;
+  if (lenSq === 0) {
+    return apx * apx + apy * apy;
   }
-};
+  const t = Math.max(0, Math.min(1, (apx * abx + apy * aby) / lenSq));
+  const dx = p.x - (a.x + t * abx);
+  const dy = p.y - (a.y + t * aby);
+  return dx * dx + dy * dy;
+}
 
 // src/elements/arrow-geometry.ts
 function getArrowControlPoint(from, to, bend) {
@@ -1677,16 +1661,7 @@ function bezierPoint(from, cp, to, t) {
   };
 }
 function isNearLine(point, a, b, threshold) {
-  const dx = b.x - a.x;
-  const dy = b.y - a.y;
-  const lenSq = dx * dx + dy * dy;
-  if (lenSq === 0) {
-    return Math.hypot(point.x - a.x, point.y - a.y) <= threshold;
-  }
-  const t = Math.max(0, Math.min(1, ((point.x - a.x) * dx + (point.y - a.y) * dy) / lenSq));
-  const projX = a.x + t * dx;
-  const projY = a.y + t * dy;
-  return Math.hypot(point.x - projX, point.y - projY) <= threshold;
+  return distSqToSegment(point, a, b) <= threshold * threshold;
 }
 
 // src/elements/element-bounds.ts
@@ -2227,51 +2202,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) {
@@ -3117,9 +3047,9 @@ var ElementRenderer = class {
         });
       }
     };
-    img.onerror = () => {
+    img.onerror = (event) => {
       this.imageCache.set(src, "failed");
-      this.onImageError?.(src);
+      this.onImageError?.(src, event);
       this.onImageLoad?.();
     };
     return null;
@@ -3544,7 +3474,10 @@ var NoteEditor = class {
     this.editingNode.removeAttribute("data-fn-placeholder");
     this.editingNode.removeAttribute("data-fn-empty");
     const text = sanitizeNoteHtml(this.editingNode.innerHTML);
-    store.update(this.editingId, { text });
+    const current = store.getById(this.editingId);
+    if (current && (current.type === "note" || current.type === "text") && current.text !== text) {
+      store.update(this.editingId, { text });
+    }
     this.editingNode.contentEditable = "false";
     Object.assign(this.editingNode.style, {
       userSelect: "none",
@@ -4461,6 +4394,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();
@@ -5141,13 +5116,13 @@ var Viewport = class {
       this.renderLoop.markAllLayersDirty();
       this.requestRender();
     });
-    this.renderer.setOnImageError((src) => {
+    this.renderer.setOnImageError((src, cause) => {
       const elementIds = [];
       for (const el of this.store.getAll()) {
         if (el.type === "image" && el.src === src) elementIds.push(el.id);
       }
       if (options.onImageError) {
-        options.onImageError({ src, elementIds });
+        options.onImageError({ src, elementIds, cause });
       } else {
         console.warn(`[fieldnotes] image failed to load: ${src}`);
       }
@@ -5366,6 +5341,10 @@ var Viewport = class {
     this.loadState(parseState(json));
   }
   setTool(name) {
+    if (!this.toolManager.getTool(name)) {
+      console.warn(`[fieldnotes] setTool: no tool registered as "${name}"`);
+      return;
+    }
     this.toolManager.setTool(name, this.toolContext);
   }
   get shortcuts() {
@@ -5862,20 +5841,6 @@ var PencilTool = class {
 };
 
 // src/elements/stroke-hit.ts
-function distSqToSegment(p, a, b) {
-  const abx = b.x - a.x;
-  const aby = b.y - a.y;
-  const apx = p.x - a.x;
-  const apy = p.y - a.y;
-  const lenSq = abx * abx + aby * aby;
-  if (lenSq === 0) {
-    return apx * apx + apy * apy;
-  }
-  const t = Math.max(0, Math.min(1, (apx * abx + apy * aby) / lenSq));
-  const dx = p.x - (a.x + t * abx);
-  const dy = p.y - (a.y + t * aby);
-  return dx * dx + dy * dy;
-}
 function hitTestStroke(stroke, point, radius) {
   const bounds = getElementBounds(stroke);
   if (!bounds) return false;
@@ -7472,52 +7437,32 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.23.0";
+var VERSION = "0.25.0";
 export {
-  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,
@@ -7526,29 +7471,20 @@ export {
   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,
@@ -7556,8 +7492,6 @@ export {
   toggleBold,
   toggleItalic,
   toggleStrikethrough,
-  toggleUnderline,
-  unbindArrow,
-  updateBoundArrow
+  toggleUnderline
 };
 //# sourceMappingURL=index.js.map