@fieldnotes/core 0.25.0 → 0.26.0

package/dist/index.js

@@ -509,6 +509,278 @@ function createId(prefix) {
   return `${prefix}_${Date.now().toString(36)}_${(counter++).toString(36)}`;
 }
 
+// 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) {
+  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;
+  }
+  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)
+    };
+  }
+  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;
+  }
+  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) {
@@ -614,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;
@@ -628,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;
@@ -699,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);
@@ -749,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"]],
@@ -885,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],
@@ -906,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";
@@ -962,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();
@@ -1135,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":
@@ -1192,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 {
@@ -1346,468 +1665,216 @@ var Background = class {
   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;
+      spacing *= 2;
+    }
+    return spacing;
   }
-  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);
+  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);
       }
     }
-    this.items = remaining;
+    ctx.fill();
   }
-  collapseIfEmpty() {
-    if (!this.children) return;
-    let totalItems = this.items.length;
-    for (const child of this.children) {
-      if (child.children) return;
-      totalItems += child.items.length;
+  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);
     }
-    if (totalItems <= MAX_ITEMS) {
-      for (const child of this.children) {
-        this.items.push(...child.items);
-      }
-      this.children = null;
+    for (let y = offsetY; y < height; y += spacing) {
+      ctx.fillRect(0, y, width, lineW);
     }
   }
 };
-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--;
+
+// 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);
   }
-  update(id, newBounds) {
-    this.remove(id);
-    this.insert(id, newBounds);
-  }
-  query(rect) {
-    const result = [];
-    this.root.query(rect, result);
-    return result;
+  off(event, listener) {
+    this.listeners.get(event)?.delete(listener);
   }
-  queryPoint(point) {
-    return this.query({ x: point.x, y: point.y, w: 0, h: 0 });
+  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.root = new QuadNode(this.worldBounds, 0);
-    this._size = 0;
+    this.listeners.clear();
   }
 };
 
-// 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) {
-  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;
-  }
-  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)
-    };
-  }
-  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;
-  }
-  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/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/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
-    };
+var QuadNode = class _QuadNode {
+  constructor(bounds, depth) {
+    this.bounds = bounds;
+    this.depth = depth;
   }
-  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;
+  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 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);
+  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;
   }
-  if (element.type === "template") {
-    return getTemplateBounds(element);
+  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);
+      }
+    }
   }
-  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)
-    };
+  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;
   }
-  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;
+  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;
   }
-  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;
+  collapseIfEmpty() {
+    if (!this.children) return;
+    let totalItems = this.items.length;
+    for (const child of this.children) {
+      if (child.children) return;
+      totalItems += child.items.length;
     }
-  }
-  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;
+    if (totalItems <= MAX_ITEMS) {
+      for (const child of this.children) {
+        this.items.push(...child.items);
       }
-      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+      this.children = null;
     }
-    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 };
+  }
+};
+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--;
     }
   }
-}
-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;
-}
+  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 });
+  }
+  clear() {
+    this.root = new QuadNode(this.worldBounds, 0);
+    this._size = 0;
+  }
+};
 
 // src/elements/stroke-smoothing.ts
 var MIN_PRESSURE_SCALE = 0.2;
@@ -3429,6 +3496,8 @@ var NoteEditor = class {
   inputHandler = null;
   pendingEditId = null;
   onStopCallback = null;
+  beginHistory = null;
+  commitHistory = null;
   toolbar;
   placeholder;
   constructor(options) {
@@ -3444,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) {
@@ -3475,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;
@@ -3559,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();
@@ -5133,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();
@@ -5149,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;
       },
@@ -5483,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 } });
       }
     }
   }
@@ -6224,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 });
@@ -7437,7 +7510,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.25.0";
+var VERSION = "0.26.0";
 export {
   ArrowTool,
   AutoSave,