@fieldnotes/core 0.24.0 → 0.26.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;
@@ -823,62 +509,334 @@ function createId(prefix) {
   return `${prefix}_${Date.now().toString(36)}_${(counter++).toString(36)}`;
 }
 
-// src/canvas/keyboard-actions.ts
-var KeyboardActions = class {
-  constructor(deps) {
-    this.deps = deps;
-  }
-  clipboard = [];
-  pasteCount = 0;
-  nudgeTimer = null;
-  nudgeTxId = null;
-  dispose() {
-    this.flushPendingNudge();
+// 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;
   }
-  selectTool() {
-    const tm = this.deps.getToolManager();
-    const ctx = this.deps.getToolContext();
-    if (!tm || !ctx) return null;
-    const tool = tm.activeTool;
-    if (tool?.name !== "select") return null;
-    return { tool, ctx };
+  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) {
+  const midX = (from.x + to.x) / 2;
+  const midY = (from.y + to.y) / 2;
+  if (bend === 0) return { x: midX, y: midY };
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) return { x: midX, y: midY };
+  const perpX = -dy / len;
+  const perpY = dx / len;
+  return {
+    x: midX + perpX * bend,
+    y: midY + perpY * bend
+  };
+}
+function getArrowMidpoint(from, to, bend) {
+  const cp = getArrowControlPoint(from, to, bend);
+  return {
+    x: 0.25 * from.x + 0.5 * cp.x + 0.25 * to.x,
+    y: 0.25 * from.y + 0.5 * cp.y + 0.25 * to.y
+  };
+}
+function getBendFromPoint(from, to, dragPoint) {
+  const midX = (from.x + to.x) / 2;
+  const midY = (from.y + to.y) / 2;
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) return 0;
+  const perpX = -dy / len;
+  const perpY = dx / len;
+  return (dragPoint.x - midX) * perpX + (dragPoint.y - midY) * perpY;
+}
+function getArrowTangentAngle(from, to, bend, t) {
+  const cp = getArrowControlPoint(from, to, bend);
+  const tangentX = 2 * (1 - t) * (cp.x - from.x) + 2 * t * (to.x - cp.x);
+  const tangentY = 2 * (1 - t) * (cp.y - from.y) + 2 * t * (to.y - cp.y);
+  return Math.atan2(tangentY, tangentX);
+}
+function isNearBezier(point, from, to, bend, threshold) {
+  if (bend === 0) return isNearLine(point, from, to, threshold);
+  const cp = getArrowControlPoint(from, to, bend);
+  const segments = 20;
+  for (let i = 0; i < segments; i++) {
+    const t0 = i / segments;
+    const t1 = (i + 1) / segments;
+    const a = bezierPoint(from, cp, to, t0);
+    const b = bezierPoint(from, cp, to, t1);
+    if (isNearLine(point, a, b, threshold)) return true;
   }
-  nudge(dx, dy, byCell) {
-    if (this.deps.isToolActive()) return false;
-    const sel = this.selectTool();
-    if (!sel) return false;
-    if (sel.tool.selectedIds.length === 0) return false;
-    const step = byCell ? sel.ctx.gridSize ?? 10 : 1;
-    if (this.nudgeTimer === null) {
-      const recorder = this.deps.getHistoryRecorder();
-      recorder?.begin();
-      this.nudgeTxId = recorder?.currentTransactionId ?? null;
-    } else {
-      clearTimeout(this.nudgeTimer);
-    }
-    const moved = sel.tool.nudgeSelection(dx * step, dy * step, sel.ctx);
-    this.nudgeTimer = setTimeout(() => this.flushPendingNudge(), 400);
-    return moved;
+  return false;
+}
+function getArrowBounds(from, to, bend) {
+  if (bend === 0) {
+    const minX2 = Math.min(from.x, to.x);
+    const minY2 = Math.min(from.y, to.y);
+    return {
+      x: minX2,
+      y: minY2,
+      w: Math.abs(to.x - from.x),
+      h: Math.abs(to.y - from.y)
+    };
   }
-  flushPendingNudge() {
-    if (this.nudgeTimer === null) return;
-    clearTimeout(this.nudgeTimer);
-    this.nudgeTimer = null;
-    const recorder = this.deps.getHistoryRecorder();
-    if (this.nudgeTxId === null || recorder?.currentTransactionId === this.nudgeTxId) {
-      recorder?.commit();
-    }
-    this.nudgeTxId = null;
+  const cp = getArrowControlPoint(from, to, bend);
+  const steps = 20;
+  let minX = Math.min(from.x, to.x);
+  let minY = Math.min(from.y, to.y);
+  let maxX = Math.max(from.x, to.x);
+  let maxY = Math.max(from.y, to.y);
+  for (let i = 1; i < steps; i++) {
+    const t = i / steps;
+    const p = bezierPoint(from, cp, to, t);
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y > maxY) maxY = p.y;
   }
-  deleteSelected() {
-    if (this.deps.isToolActive()) return;
-    this.flushPendingNudge();
-    const sel = this.selectTool();
-    if (!sel) return;
-    const ids = sel.tool.selectedIds;
-    if (ids.length === 0) return;
-    const recorder = this.deps.getHistoryRecorder();
-    recorder?.begin();
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function bezierPoint(from, cp, to, t) {
+  const mt = 1 - t;
+  return {
+    x: mt * mt * from.x + 2 * mt * t * cp.x + t * t * to.x,
+    y: mt * mt * from.y + 2 * mt * t * cp.y + t * t * to.y
+  };
+}
+function isNearLine(point, a, b, threshold) {
+  return distSqToSegment(point, a, b) <= threshold * threshold;
+}
+
+// src/elements/element-bounds.ts
+var strokeBoundsCache = /* @__PURE__ */ new WeakMap();
+function getElementBounds(element) {
+  if (element.type === "grid") return null;
+  if ("size" in element) {
+    return {
+      x: element.position.x,
+      y: element.position.y,
+      w: element.size.w,
+      h: element.size.h
+    };
+  }
+  if (element.type === "stroke") {
+    if (element.points.length === 0) return null;
+    const cached = strokeBoundsCache.get(element);
+    if (cached) return cached;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const p of element.points) {
+      const px = p.x + element.position.x;
+      const py = p.y + element.position.y;
+      if (px < minX) minX = px;
+      if (py < minY) minY = py;
+      if (px > maxX) maxX = px;
+      if (py > maxY) maxY = py;
+    }
+    const bounds = { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    strokeBoundsCache.set(element, bounds);
+    return bounds;
+  }
+  if (element.type === "arrow") {
+    return getArrowBoundsAnalytical(element.from, element.to, element.bend);
+  }
+  if (element.type === "template") {
+    return getTemplateBounds(element);
+  }
+  return null;
+}
+function getArrowBoundsAnalytical(from, to, bend) {
+  if (bend === 0) {
+    const minX2 = Math.min(from.x, to.x);
+    const minY2 = Math.min(from.y, to.y);
+    return {
+      x: minX2,
+      y: minY2,
+      w: Math.abs(to.x - from.x),
+      h: Math.abs(to.y - from.y)
+    };
+  }
+  const cp = getArrowControlPoint(from, to, bend);
+  let minX = Math.min(from.x, to.x);
+  let maxX = Math.max(from.x, to.x);
+  let minY = Math.min(from.y, to.y);
+  let maxY = Math.max(from.y, to.y);
+  const tx = from.x - 2 * cp.x + to.x;
+  if (tx !== 0) {
+    const t = (from.x - cp.x) / tx;
+    if (t > 0 && t < 1) {
+      const mt = 1 - t;
+      const x = mt * mt * from.x + 2 * mt * t * cp.x + t * t * to.x;
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+    }
+  }
+  const ty = from.y - 2 * cp.y + to.y;
+  if (ty !== 0) {
+    const t = (from.y - cp.y) / ty;
+    if (t > 0 && t < 1) {
+      const mt = 1 - t;
+      const y = mt * mt * from.y + 2 * mt * t * cp.y + t * t * to.y;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    }
+  }
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function getTemplateBounds(el) {
+  const { x: cx, y: cy } = el.position;
+  const r = el.radius;
+  switch (el.templateShape) {
+    case "circle":
+      return { x: cx - r, y: cy - r, w: 2 * r, h: 2 * r };
+    case "square":
+      return { x: cx - r / 2, y: cy - r / 2, w: r, h: r };
+    case "cone": {
+      const halfAngle = Math.atan(0.5);
+      const tipX = cx;
+      const tipY = cy;
+      const leftX = cx + r * Math.cos(el.angle - halfAngle);
+      const leftY = cy + r * Math.sin(el.angle - halfAngle);
+      const rightX = cx + r * Math.cos(el.angle + halfAngle);
+      const rightY = cy + r * Math.sin(el.angle + halfAngle);
+      const farX = cx + r * Math.cos(el.angle);
+      const farY = cy + r * Math.sin(el.angle);
+      const xs = [tipX, leftX, rightX, farX];
+      const ys = [tipY, leftY, rightY, farY];
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      for (let i = 0; i < xs.length; i++) {
+        const px = xs[i];
+        const py = ys[i];
+        if (px !== void 0 && px < minX) minX = px;
+        if (px !== void 0 && px > maxX) maxX = px;
+        if (py !== void 0 && py < minY) minY = py;
+        if (py !== void 0 && py > maxY) maxY = py;
+      }
+      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    }
+    case "line": {
+      const halfW = r / 12;
+      const cos = Math.cos(el.angle);
+      const sin = Math.sin(el.angle);
+      const perpX = -sin * halfW;
+      const perpY = cos * halfW;
+      const x0 = cx + perpX;
+      const y0 = cy + perpY;
+      const x1 = cx + r * cos + perpX;
+      const y1 = cy + r * sin + perpY;
+      const x2 = cx + r * cos - perpX;
+      const y2 = cy + r * sin - perpY;
+      const x3 = cx - perpX;
+      const y3 = cy - perpY;
+      const minX = Math.min(x0, x1, x2, x3);
+      const minY = Math.min(y0, y1, y2, y3);
+      const maxX = Math.max(x0, x1, x2, x3);
+      const maxY = Math.max(y0, y1, y2, y3);
+      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    }
+  }
+}
+function transferStrokeBounds(prev, next) {
+  if (prev.type !== "stroke" || next.type !== "stroke") return;
+  if (prev.points !== next.points) return;
+  if (prev.position.x !== next.position.x || prev.position.y !== next.position.y) return;
+  const bounds = strokeBoundsCache.get(prev);
+  if (bounds) strokeBoundsCache.set(next, bounds);
+}
+function boundsIntersect(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/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/canvas/keyboard-actions.ts
+var KeyboardActions = class {
+  constructor(deps) {
+    this.deps = deps;
+  }
+  clipboard = [];
+  pasteCount = 0;
+  nudgeTimer = null;
+  nudgeTxId = null;
+  dispose() {
+    this.flushPendingNudge();
+  }
+  selectTool() {
+    const tm = this.deps.getToolManager();
+    const ctx = this.deps.getToolContext();
+    if (!tm || !ctx) return null;
+    const tool = tm.activeTool;
+    if (tool?.name !== "select") return null;
+    return { tool, ctx };
+  }
+  nudge(dx, dy, byCell) {
+    if (this.deps.isToolActive()) return false;
+    const sel = this.selectTool();
+    if (!sel) return false;
+    if (sel.tool.selectedIds.length === 0) return false;
+    const step = byCell ? sel.ctx.gridSize ?? 10 : 1;
+    if (this.nudgeTimer === null) {
+      const recorder = this.deps.getHistoryRecorder();
+      recorder?.begin();
+      this.nudgeTxId = recorder?.currentTransactionId ?? null;
+    } else {
+      clearTimeout(this.nudgeTimer);
+    }
+    const moved = sel.tool.nudgeSelection(dx * step, dy * step, sel.ctx);
+    this.nudgeTimer = setTimeout(() => this.flushPendingNudge(), 400);
+    return moved;
+  }
+  flushPendingNudge() {
+    if (this.nudgeTimer === null) return;
+    clearTimeout(this.nudgeTimer);
+    this.nudgeTimer = null;
+    const recorder = this.deps.getHistoryRecorder();
+    if (this.nudgeTxId === null || recorder?.currentTransactionId === this.nudgeTxId) {
+      recorder?.commit();
+    }
+    this.nudgeTxId = null;
+  }
+  deleteSelected() {
+    if (this.deps.isToolActive()) return;
+    this.flushPendingNudge();
+    const sel = this.selectTool();
+    if (!sel) return;
+    const ids = sel.tool.selectedIds;
+    if (ids.length === 0) return;
+    const recorder = this.deps.getHistoryRecorder();
+    recorder?.begin();
     for (const id of ids) {
       sel.ctx.store.remove(id);
     }
@@ -928,8 +886,18 @@ var KeyboardActions = class {
     if (this.clipboard.length === 0) return;
     const sel = this.selectTool();
     if (!sel) return;
+    const cursor = this.deps.getLastPointerWorld?.() ?? null;
+    if (cursor) {
+      const bbox = getElementsBoundingBox(this.clipboard);
+      if (bbox) {
+        const centerX = bbox.x + bbox.w / 2;
+        const centerY = bbox.y + bbox.h / 2;
+        this.insertClones(this.clipboard, { x: cursor.x - centerX, y: cursor.y - centerY }, sel);
+        return;
+      }
+    }
     this.pasteCount++;
-    this.insertClones(this.clipboard, this.pasteCount * 20, sel);
+    this.insertClones(this.clipboard, { x: this.pasteCount * 20, y: this.pasteCount * 20 }, sel);
   }
   duplicate() {
     if (this.deps.isToolActive()) return;
@@ -942,7 +910,7 @@ var KeyboardActions = class {
       if (el) source.push(el);
     }
     if (source.length === 0) return;
-    this.insertClones(source, 20, sel);
+    this.insertClones(source, { x: 20, y: 20 }, sel);
   }
   deselect() {
     if (this.deps.isToolActive()) return;
@@ -1013,11 +981,11 @@ var KeyboardActions = class {
       const newId = idMap.get(el.id);
       if (!newId) continue;
       clone.id = newId;
-      clone.position = { x: clone.position.x + offset, y: clone.position.y + offset };
+      clone.position = { x: clone.position.x + offset.x, y: clone.position.y + offset.y };
       if (clone.type === "arrow") {
         const arrow = clone;
-        arrow.from = { x: arrow.from.x + offset, y: arrow.from.y + offset };
-        arrow.to = { x: arrow.to.x + offset, y: arrow.to.y + offset };
+        arrow.from = { x: arrow.from.x + offset.x, y: arrow.from.y + offset.y };
+        arrow.to = { x: arrow.to.x + offset.x, y: arrow.to.y + offset.y };
         delete arrow.cachedControlPoint;
         if (arrow.fromBinding) {
           const newTarget = idMap.get(arrow.fromBinding.elementId);
@@ -1063,6 +1031,9 @@ var DEFAULT_BINDINGS = [
   ["z-front", ["mod+]"]],
   ["z-back", ["mod+["]],
   ["zoom-fit", ["shift+1"]],
+  ["zoom-in", ["mod+="]],
+  ["zoom-out", ["mod+-"]],
+  ["zoom-reset", ["mod+0"]],
   ["nudge-left", ["arrowleft"]],
   ["nudge-right", ["arrowright"]],
   ["nudge-up", ["arrowup"]],
@@ -1199,6 +1170,7 @@ var ShortcutMap = class {
 
 // src/canvas/input-handler.ts
 var ZOOM_SENSITIVITY = 1e-3;
+var ZOOM_STEP = 1.2;
 var MIDDLE_BUTTON = 1;
 var NUDGE_DELTAS = {
   "nudge-left": [-1, 0],
@@ -1220,7 +1192,8 @@ var InputHandler = class {
       getHistoryRecorder: () => this.historyRecorder,
       getHistoryStack: () => this.historyStack,
       isToolActive: () => this.isToolActive,
-      fitToContent: options.fitToContent
+      fitToContent: options.fitToContent,
+      getLastPointerWorld: () => this.lastPointerWorld()
     });
     this.shortcutMap = new ShortcutMap(options.shortcuts?.bindings);
     this.scope = options.shortcuts?.scope ?? "focus";
@@ -1276,11 +1249,21 @@ var InputHandler = class {
     this.element.addEventListener("pointerdown", this.onPointerDown, opts);
     this.element.addEventListener("pointermove", this.onPointerMove, opts);
     this.element.addEventListener("pointerup", this.onPointerUp, opts);
-    this.element.addEventListener("pointerleave", this.onPointerUp, opts);
+    this.element.addEventListener("pointerleave", this.onPointerLeave, opts);
     this.element.addEventListener("pointercancel", this.onPointerUp, opts);
     window.addEventListener("keydown", this.onKeyDown, opts);
     window.addEventListener("keyup", this.onKeyUp, opts);
   }
+  viewportCenter() {
+    const rect = this.element.getBoundingClientRect();
+    return { x: rect.width / 2, y: rect.height / 2 };
+  }
+  zoomByFactor(factor) {
+    this.camera.zoomAt(this.camera.zoom * factor, this.viewportCenter());
+  }
+  zoomToLevel(level) {
+    this.camera.zoomAt(level, this.viewportCenter());
+  }
   onWheel = (e) => {
     e.preventDefault();
     const rect = this.element.getBoundingClientRect();
@@ -1449,6 +1432,18 @@ var InputHandler = class {
         e.preventDefault();
         this.actions.zoomToFit();
         return;
+      case "zoom-in":
+        e.preventDefault();
+        this.zoomByFactor(ZOOM_STEP);
+        return;
+      case "zoom-out":
+        e.preventDefault();
+        this.zoomByFactor(1 / ZOOM_STEP);
+        return;
+      case "zoom-reset":
+        e.preventDefault();
+        this.zoomToLevel(1);
+        return;
       case "nudge-left":
       case "nudge-right":
       case "nudge-up":
@@ -1506,6 +1501,16 @@ var InputHandler = class {
   midpoint(a, b) {
     return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
   }
+  lastPointerWorld() {
+    const e = this.lastPointerEvent;
+    if (!e) return null;
+    const rect = this.element.getBoundingClientRect();
+    return this.camera.screenToWorld({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  }
+  onPointerLeave = (e) => {
+    this.lastPointerEvent = null;
+    this.onPointerUp(e);
+  };
   toPointerState(e) {
     const rect = this.element.getBoundingClientRect();
     return {
@@ -1557,299 +1562,319 @@ 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;
+// 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;
   }
-  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;
+  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;
     }
-    this.lastTapTime = now;
-    this.lastTapX = x;
-    this.lastTapY = y;
-    this.hasPendingTap = true;
-    return false;
+    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();
   }
-  reset() {
-    this.hasPendingTap = false;
-    this.lastTapTime = 0;
-    this.lastTapX = 0;
-    this.lastTapY = 0;
+  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/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;
+// 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);
   }
-  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;
-}
+  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/elements/arrow-geometry.ts
-function getArrowControlPoint(from, to, bend) {
-  const midX = (from.x + to.x) / 2;
-  const midY = (from.y + to.y) / 2;
-  if (bend === 0) return { x: midX, y: midY };
-  const dx = to.x - from.x;
-  const dy = to.y - from.y;
-  const len = Math.sqrt(dx * dx + dy * dy);
-  if (len === 0) return { x: midX, y: midY };
-  const perpX = -dy / len;
-  const perpY = dx / len;
-  return {
-    x: midX + perpX * bend,
-    y: midY + perpY * bend
-  };
-}
-function getArrowMidpoint(from, to, bend) {
-  const cp = getArrowControlPoint(from, to, bend);
-  return {
-    x: 0.25 * from.x + 0.5 * cp.x + 0.25 * to.x,
-    y: 0.25 * from.y + 0.5 * cp.y + 0.25 * to.y
-  };
-}
-function getBendFromPoint(from, to, dragPoint) {
-  const midX = (from.x + to.x) / 2;
-  const midY = (from.y + to.y) / 2;
-  const dx = to.x - from.x;
-  const dy = to.y - from.y;
-  const len = Math.sqrt(dx * dx + dy * dy);
-  if (len === 0) return 0;
-  const perpX = -dy / len;
-  const perpY = dx / len;
-  return (dragPoint.x - midX) * perpX + (dragPoint.y - midY) * perpY;
-}
-function getArrowTangentAngle(from, to, bend, t) {
-  const cp = getArrowControlPoint(from, to, bend);
-  const tangentX = 2 * (1 - t) * (cp.x - from.x) + 2 * t * (to.x - cp.x);
-  const tangentY = 2 * (1 - t) * (cp.y - from.y) + 2 * t * (to.y - cp.y);
-  return Math.atan2(tangentY, tangentX);
+// 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;
 }
-function isNearBezier(point, from, to, bend, threshold) {
-  if (bend === 0) return isNearLine(point, from, to, threshold);
-  const cp = getArrowControlPoint(from, to, bend);
-  const segments = 20;
-  for (let i = 0; i < segments; i++) {
-    const t0 = i / segments;
-    const t1 = (i + 1) / segments;
-    const a = bezierPoint(from, cp, to, t0);
-    const b = bezierPoint(from, cp, to, t1);
-    if (isNearLine(point, a, b, threshold)) return true;
+var QuadNode = class _QuadNode {
+  constructor(bounds, depth) {
+    this.bounds = bounds;
+    this.depth = depth;
   }
-  return false;
-}
-function getArrowBounds(from, to, bend) {
-  if (bend === 0) {
-    const minX2 = Math.min(from.x, to.x);
-    const minY2 = Math.min(from.y, to.y);
-    return {
-      x: minX2,
-      y: minY2,
-      w: Math.abs(to.x - from.x),
-      h: Math.abs(to.y - from.y)
-    };
+  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();
+    }
   }
-  const cp = getArrowControlPoint(from, to, bend);
-  const steps = 20;
-  let minX = Math.min(from.x, to.x);
-  let minY = Math.min(from.y, to.y);
-  let maxX = Math.max(from.x, to.x);
-  let maxY = Math.max(from.y, to.y);
-  for (let i = 1; i < steps; i++) {
-    const t = i / steps;
-    const p = bezierPoint(from, cp, to, t);
-    if (p.x < minX) minX = p.x;
-    if (p.y < minY) minY = p.y;
-    if (p.x > maxX) maxX = p.x;
-    if (p.y > maxY) maxY = p.y;
+  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;
   }
-  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
-}
-function bezierPoint(from, cp, to, t) {
-  const mt = 1 - t;
-  return {
-    x: mt * mt * from.x + 2 * mt * t * cp.x + t * t * to.x,
-    y: mt * mt * from.y + 2 * mt * t * cp.y + t * t * to.y
-  };
-}
-function isNearLine(point, a, b, threshold) {
-  return distSqToSegment(point, a, b) <= threshold * threshold;
-}
-
-// src/elements/element-bounds.ts
-var strokeBoundsCache = /* @__PURE__ */ new WeakMap();
-function getElementBounds(element) {
-  if (element.type === "grid") return null;
-  if ("size" in element) {
-    return {
-      x: element.position.x,
-      y: element.position.y,
-      w: element.size.w,
-      h: element.size.h
-    };
+  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);
+      }
+    }
   }
-  if (element.type === "stroke") {
-    if (element.points.length === 0) return null;
-    const cached = strokeBoundsCache.get(element);
-    if (cached) return cached;
-    let minX = Infinity;
-    let minY = Infinity;
-    let maxX = -Infinity;
-    let maxY = -Infinity;
-    for (const p of element.points) {
-      const px = p.x + element.position.x;
-      const py = p.y + element.position.y;
-      if (px < minX) minX = px;
-      if (py < minY) minY = py;
-      if (px > maxX) maxX = px;
-      if (py > maxY) maxY = py;
+  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);
+      }
     }
-    const bounds = { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
-    strokeBoundsCache.set(element, bounds);
-    return bounds;
+    this.items = remaining;
   }
-  if (element.type === "arrow") {
-    return getArrowBoundsAnalytical(element.from, element.to, element.bend);
+  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;
+    }
   }
-  if (element.type === "template") {
-    return getTemplateBounds(element);
+};
+var Quadtree = class {
+  root;
+  _size = 0;
+  worldBounds;
+  constructor(worldBounds) {
+    this.worldBounds = worldBounds;
+    this.root = new QuadNode(worldBounds, 0);
   }
-  return null;
-}
-function getArrowBoundsAnalytical(from, to, bend) {
-  if (bend === 0) {
-    const minX2 = Math.min(from.x, to.x);
-    const minY2 = Math.min(from.y, to.y);
-    return {
-      x: minX2,
-      y: minY2,
-      w: Math.abs(to.x - from.x),
-      h: Math.abs(to.y - from.y)
-    };
+  get size() {
+    return this._size;
   }
-  const cp = getArrowControlPoint(from, to, bend);
-  let minX = Math.min(from.x, to.x);
-  let maxX = Math.max(from.x, to.x);
-  let minY = Math.min(from.y, to.y);
-  let maxY = Math.max(from.y, to.y);
-  const tx = from.x - 2 * cp.x + to.x;
-  if (tx !== 0) {
-    const t = (from.x - cp.x) / tx;
-    if (t > 0 && t < 1) {
-      const mt = 1 - t;
-      const x = mt * mt * from.x + 2 * mt * t * cp.x + t * t * to.x;
-      if (x < minX) minX = x;
-      if (x > maxX) maxX = x;
-    }
+  insert(id, bounds) {
+    this.root.insert({ id, bounds });
+    this._size++;
   }
-  const ty = from.y - 2 * cp.y + to.y;
-  if (ty !== 0) {
-    const t = (from.y - cp.y) / ty;
-    if (t > 0 && t < 1) {
-      const mt = 1 - t;
-      const y = mt * mt * from.y + 2 * mt * t * cp.y + t * t * to.y;
-      if (y < minY) minY = y;
-      if (y > maxY) maxY = y;
+  remove(id) {
+    if (this.root.remove(id)) {
+      this._size--;
     }
   }
-  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
-}
-function getTemplateBounds(el) {
-  const { x: cx, y: cy } = el.position;
-  const r = el.radius;
-  switch (el.templateShape) {
-    case "circle":
-      return { x: cx - r, y: cy - r, w: 2 * r, h: 2 * r };
-    case "square":
-      return { x: cx - r / 2, y: cy - r / 2, w: r, h: r };
-    case "cone": {
-      const halfAngle = Math.atan(0.5);
-      const tipX = cx;
-      const tipY = cy;
-      const leftX = cx + r * Math.cos(el.angle - halfAngle);
-      const leftY = cy + r * Math.sin(el.angle - halfAngle);
-      const rightX = cx + r * Math.cos(el.angle + halfAngle);
-      const rightY = cy + r * Math.sin(el.angle + halfAngle);
-      const farX = cx + r * Math.cos(el.angle);
-      const farY = cy + r * Math.sin(el.angle);
-      const xs = [tipX, leftX, rightX, farX];
-      const ys = [tipY, leftY, rightY, farY];
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      for (let i = 0; i < xs.length; i++) {
-        const px = xs[i];
-        const py = ys[i];
-        if (px !== void 0 && px < minX) minX = px;
-        if (px !== void 0 && px > maxX) maxX = px;
-        if (py !== void 0 && py < minY) minY = py;
-        if (py !== void 0 && py > maxY) maxY = py;
-      }
-      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
-    }
-    case "line": {
-      const halfW = r / 12;
-      const cos = Math.cos(el.angle);
-      const sin = Math.sin(el.angle);
-      const perpX = -sin * halfW;
-      const perpY = cos * halfW;
-      const x0 = cx + perpX;
-      const y0 = cy + perpY;
-      const x1 = cx + r * cos + perpX;
-      const y1 = cy + r * sin + perpY;
-      const x2 = cx + r * cos - perpX;
-      const y2 = cy + r * sin - perpY;
-      const x3 = cx - perpX;
-      const y3 = cy - perpY;
-      const minX = Math.min(x0, x1, x2, x3);
-      const minY = Math.min(y0, y1, y2, y3);
-      const maxX = Math.max(x0, x1, x2, x3);
-      const maxY = Math.max(y0, y1, y2, y3);
-      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
-    }
+  update(id, newBounds) {
+    this.remove(id);
+    this.insert(id, newBounds);
   }
-}
-function transferStrokeBounds(prev, next) {
-  if (prev.type !== "stroke" || next.type !== "stroke") return;
-  if (prev.points !== next.points) return;
-  if (prev.position.x !== next.position.x || prev.position.y !== next.position.y) return;
-  const bounds = strokeBoundsCache.get(prev);
-  if (bounds) strokeBoundsCache.set(next, bounds);
-}
-function boundsIntersect(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;
-}
+  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 });
+  }
+  clear() {
+    this.root = new QuadNode(this.worldBounds, 0);
+    this._size = 0;
+  }
+};
 
 // src/elements/stroke-smoothing.ts
 var MIN_PRESSURE_SCALE = 0.2;
@@ -2244,51 +2269,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) {
@@ -3516,6 +3496,8 @@ var NoteEditor = class {
   inputHandler = null;
   pendingEditId = null;
   onStopCallback = null;
+  beginHistory = null;
+  commitHistory = null;
   toolbar;
   placeholder;
   constructor(options) {
@@ -3531,6 +3513,10 @@ var NoteEditor = class {
   setOnStop(callback) {
     this.onStopCallback = callback;
   }
+  setHistoryHooks(begin, commit) {
+    this.beginHistory = begin;
+    this.commitHistory = commit;
+  }
   startEditing(node, elementId, store) {
     if (this.editingId === elementId) return;
     if (this.editingId) {
@@ -3562,18 +3548,21 @@ var NoteEditor = class {
     this.editingNode.removeAttribute("data-fn-empty");
     const text = sanitizeNoteHtml(this.editingNode.innerHTML);
     const current = store.getById(this.editingId);
-    if (current && (current.type === "note" || current.type === "text") && current.text !== text) {
-      store.update(this.editingId, { text });
-    }
+    const textChanged = !!current && (current.type === "note" || current.type === "text") && current.text !== text;
     this.editingNode.contentEditable = "false";
     Object.assign(this.editingNode.style, {
       userSelect: "none",
       cursor: "default"
     });
     this.toolbar?.hide();
+    this.beginHistory?.();
+    if (textChanged) {
+      store.update(this.editingId, { text });
+    }
     if (this.editingId && this.onStopCallback) {
       this.onStopCallback(this.editingId);
     }
+    this.commitHistory?.();
     this.editingId = null;
     this.editingNode = null;
     this.blurHandler = null;
@@ -3646,26 +3635,6 @@ var NoteEditor = 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/tool-manager.ts
 var ToolManager = class {
   tools = /* @__PURE__ */ new Map();
@@ -4481,6 +4450,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();
@@ -5178,6 +5189,10 @@ var Viewport = class {
       placeholder: options.placeholder
     });
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
+    this.noteEditor.setHistoryHooks(
+      () => this.historyRecorder.begin(),
+      () => this.historyRecorder.commit()
+    );
     this.onHtmlElementMount = options.onHtmlElementMount;
     this.dropHandler = options.onDrop;
     this.history = new HistoryStack();
@@ -5194,6 +5209,7 @@ var Viewport = class {
       requestRender: () => this.requestRender(),
       switchTool: (name) => this.toolManager.setTool(name, this.toolContext),
       editElement: (id) => this.startEditingElement(id),
+      fitNoteHeight: (id) => this.fitNoteHeight(id),
       setCursor: (cursor) => {
         this.wrapper.style.cursor = cursor;
       },
@@ -5528,31 +5544,38 @@ var Viewport = class {
       this.noteEditor.startEditing(node, id, this.store);
     }
   }
+  fitNoteHeight(elementId) {
+    const element = this.store.getById(elementId);
+    if (!element || element.type !== "note") return;
+    if (isNoteContentEmpty(element.text)) return;
+    const node = this.domNodeManager.getNode(elementId);
+    if (!node) return;
+    const measured = node.scrollHeight;
+    if (measured > element.size.h) {
+      this.store.update(elementId, { size: { w: element.size.w, h: measured } });
+    }
+  }
   onTextEditStop(elementId) {
     const element = this.store.getById(elementId);
     if (!element) return;
     if (element.type === "note") {
       if (isNoteContentEmpty(element.text)) {
-        this.historyRecorder.begin();
         this.store.remove(elementId);
-        this.historyRecorder.commit();
+        return;
       }
+      this.fitNoteHeight(elementId);
       return;
     }
     if (element.type !== "text") return;
     if (!element.text || element.text.trim() === "") {
-      this.historyRecorder.begin();
       this.store.remove(elementId);
-      this.historyRecorder.commit();
       return;
     }
     const node = this.domNodeManager.getNode(elementId);
     if (node && "size" in element) {
-      const measuredHeight = node.scrollHeight;
-      if (measuredHeight !== element.size.h) {
-        this.store.update(elementId, {
-          size: { w: element.size.w, h: measuredHeight }
-        });
+      const measured = node.scrollHeight;
+      if (measured !== element.size.h) {
+        this.store.update(elementId, { size: { w: element.size.w, h: measured } });
       }
     }
   }
@@ -6269,8 +6292,13 @@ var SelectTool = class {
     }
     this.pendingSingleSelectId = null;
     this.hasDragged = false;
+    const resizedNoteId = this.mode.type === "resizing" ? this.mode.elementId : null;
     this.mode = { type: "idle" };
     ctx.setCursor?.("default");
+    if (resizedNoteId !== null) {
+      const el = ctx.store.getById(resizedNoteId);
+      if (el?.type === "note") ctx.fitNoteHeight?.(resizedNoteId);
+    }
   }
   onHover(state, ctx) {
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
@@ -7482,52 +7510,32 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.24.0";
+var VERSION = "0.26.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,
@@ -7536,29 +7544,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,
@@ -7566,8 +7565,6 @@ export {
   toggleBold,
   toggleItalic,
   toggleStrikethrough,
-  toggleUnderline,
-  unbindArrow,
-  updateBoundArrow
+  toggleUnderline
 };
 //# sourceMappingURL=index.js.map