@fieldnotes/core 0.25.0 → 0.27.0

package/dist/index.cjs

@@ -59,6 +59,7 @@ __export(index_exports, {
   getArrowTangentAngle: () => getArrowTangentAngle,
   getBendFromPoint: () => getBendFromPoint,
   getElementBounds: () => getElementBounds,
+  getElementStyle: () => getElementStyle,
   getElementsBoundingBox: () => getElementsBoundingBox,
   getHexCellsInCone: () => getHexCellsInCone,
   getHexCellsInLine: () => getHexCellsInLine,
@@ -70,6 +71,7 @@ __export(index_exports, {
   smartSnap: () => smartSnap,
   snapPoint: () => snapPoint,
   snapToHexCenter: () => snapToHexCenter,
+  styleToPatch: () => styleToPatch,
   toggleBold: () => toggleBold,
   toggleItalic: () => toggleItalic,
   toggleStrikethrough: () => toggleStrikethrough,
@@ -588,6 +590,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) {
@@ -693,8 +967,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;
@@ -707,7 +991,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;
@@ -778,11 +1062,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);
@@ -828,6 +1112,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"]],
@@ -964,6 +1251,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],
@@ -985,7 +1273,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";
@@ -1041,11 +1330,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();
@@ -1214,6 +1513,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":
@@ -1271,6 +1582,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 {
@@ -1573,320 +1894,68 @@ var QuadNode = class _QuadNode {
     ];
     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 });
-  }
-  clear() {
-    this.root = new QuadNode(this.worldBounds, 0);
-    this._size = 0;
-  }
-};
-
-// src/core/geometry.ts
-function distSqToSegment(p, a, b) {
-  const abx = b.x - a.x;
-  const aby = b.y - a.y;
-  const apx = p.x - a.x;
-  const apy = p.y - a.y;
-  const lenSq = abx * abx + aby * aby;
-  if (lenSq === 0) {
-    return apx * apx + apy * apy;
-  }
-  const t = Math.max(0, Math.min(1, (apx * abx + apy * aby) / lenSq));
-  const dx = p.x - (a.x + t * abx);
-  const dy = p.y - (a.y + t * aby);
-  return dx * dx + dy * dy;
-}
-
-// src/elements/arrow-geometry.ts
-function getArrowControlPoint(from, to, bend) {
-  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 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;
@@ -3508,6 +3577,8 @@ var NoteEditor = class {
   inputHandler = null;
   pendingEditId = null;
   onStopCallback = null;
+  beginHistory = null;
+  commitHistory = null;
   toolbar;
   placeholder;
   constructor(options) {
@@ -3523,6 +3594,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) {
@@ -3554,18 +3629,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;
@@ -3638,26 +3716,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();
@@ -5178,7 +5236,103 @@ var MarginViewport = class {
   }
 };
 
+// src/elements/element-style.ts
+function styleToPatch(element, style) {
+  const { color, fillColor, strokeWidth, opacity, fontSize } = style;
+  switch (element.type) {
+    case "stroke":
+      return {
+        ...color !== void 0 ? { color } : {},
+        ...strokeWidth !== void 0 ? { width: strokeWidth } : {},
+        ...opacity !== void 0 ? { opacity } : {}
+      };
+    case "arrow":
+      return {
+        ...color !== void 0 ? { color } : {},
+        ...strokeWidth !== void 0 ? { width: strokeWidth } : {}
+      };
+    case "shape":
+      return {
+        ...color !== void 0 ? { strokeColor: color } : {},
+        ...fillColor !== void 0 ? { fillColor } : {},
+        ...strokeWidth !== void 0 ? { strokeWidth } : {}
+      };
+    case "text":
+      return {
+        ...color !== void 0 ? { color } : {},
+        ...fontSize !== void 0 ? { fontSize } : {}
+      };
+    case "note":
+      return {
+        ...color !== void 0 ? { textColor: color } : {},
+        ...fillColor !== void 0 ? { backgroundColor: fillColor } : {},
+        ...fontSize !== void 0 ? { fontSize } : {}
+      };
+    case "grid":
+      return {
+        ...color !== void 0 ? { strokeColor: color } : {},
+        ...strokeWidth !== void 0 ? { strokeWidth } : {},
+        ...opacity !== void 0 ? { opacity } : {}
+      };
+    case "template":
+      return {
+        ...color !== void 0 ? { strokeColor: color } : {},
+        ...fillColor !== void 0 ? { fillColor } : {},
+        ...strokeWidth !== void 0 ? { strokeWidth } : {},
+        ...opacity !== void 0 ? { opacity } : {}
+      };
+    default:
+      return {};
+  }
+}
+function getElementStyle(element) {
+  switch (element.type) {
+    case "stroke":
+      return { color: element.color, strokeWidth: element.width, opacity: element.opacity };
+    case "arrow":
+      return { color: element.color, strokeWidth: element.width };
+    case "shape":
+      return {
+        color: element.strokeColor,
+        fillColor: element.fillColor,
+        strokeWidth: element.strokeWidth
+      };
+    case "text":
+      return { color: element.color, fontSize: element.fontSize };
+    case "note":
+      return {
+        color: element.textColor,
+        fillColor: element.backgroundColor,
+        ...element.fontSize !== void 0 ? { fontSize: element.fontSize } : {}
+      };
+    case "grid":
+      return {
+        color: element.strokeColor,
+        strokeWidth: element.strokeWidth,
+        opacity: element.opacity
+      };
+    case "template":
+      return {
+        color: element.strokeColor,
+        fillColor: element.fillColor,
+        strokeWidth: element.strokeWidth,
+        opacity: element.opacity
+      };
+    default:
+      return {};
+  }
+}
+
 // src/canvas/viewport.ts
+var EMPTY_IDS = [];
+function noop() {
+}
+function sharedValue(values) {
+  const present = values.filter((v) => v !== void 0);
+  if (present.length === 0) return void 0;
+  const first = present[0];
+  return present.every((v) => v === first) ? first : void 0;
+}
 var Viewport = class {
   constructor(container, options = {}) {
     this.container = container;
@@ -5212,6 +5366,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();
@@ -5228,6 +5386,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;
       },
@@ -5525,6 +5684,52 @@ var Viewport = class {
       this.gridChangeListeners.delete(listener);
     };
   }
+  getSelectTool() {
+    return this.toolManager.getTool("select");
+  }
+  getSelectedIds() {
+    return this.getSelectTool()?.selectedIds ?? EMPTY_IDS;
+  }
+  onSelectionChange(listener) {
+    const tool = this.getSelectTool();
+    return tool ? tool.onSelectionChange(listener) : noop;
+  }
+  getSelectionStyle() {
+    const ids = this.getSelectedIds();
+    if (ids.length === 0) return null;
+    const styles = [];
+    for (const id of ids) {
+      const el = this.store.getById(id);
+      if (el) styles.push(getElementStyle(el));
+    }
+    if (styles.length === 0) return null;
+    const result = {};
+    const color = sharedValue(styles.map((s) => s.color));
+    if (color !== void 0) result.color = color;
+    const fillColor = sharedValue(styles.map((s) => s.fillColor));
+    if (fillColor !== void 0) result.fillColor = fillColor;
+    const strokeWidth = sharedValue(styles.map((s) => s.strokeWidth));
+    if (strokeWidth !== void 0) result.strokeWidth = strokeWidth;
+    const opacity = sharedValue(styles.map((s) => s.opacity));
+    if (opacity !== void 0) result.opacity = opacity;
+    const fontSize = sharedValue(styles.map((s) => s.fontSize));
+    if (fontSize !== void 0) result.fontSize = fontSize;
+    return result;
+  }
+  applyStyleToSelection(style) {
+    const ids = this.getSelectedIds();
+    if (ids.length === 0) return;
+    this.historyRecorder.begin();
+    for (const id of ids) {
+      const el = this.store.getById(id);
+      if (!el) continue;
+      const patch = styleToPatch(el, style);
+      if (Object.keys(patch).length > 0) {
+        this.store.update(id, patch);
+      }
+    }
+    this.historyRecorder.commit();
+  }
   getRenderStats() {
     return this.renderLoop.getStats();
   }
@@ -5562,31 +5767,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 } });
       }
     }
   }
@@ -6133,6 +6345,7 @@ var HANDLE_CURSORS = {
 var SelectTool = class {
   name = "select";
   _selectedIds = [];
+  selectionListeners = /* @__PURE__ */ new Set();
   mode = { type: "idle" };
   lastWorld = { x: 0, y: 0 };
   currentWorld = { x: 0, y: 0 };
@@ -6142,10 +6355,22 @@ var SelectTool = class {
   resizeAspectRatio = 0;
   hoveredId = null;
   get selectedIds() {
-    return [...this._selectedIds];
+    return this._selectedIds;
   }
-  setSelection(ids) {
+  onSelectionChange(listener) {
+    this.selectionListeners.add(listener);
+    return () => {
+      this.selectionListeners.delete(listener);
+    };
+  }
+  setSelectedIds(ids) {
+    const prev = this._selectedIds;
+    if (prev.length === ids.length && prev.every((id, i) => id === ids[i])) return;
     this._selectedIds = ids;
+    for (const listener of this.selectionListeners) listener();
+  }
+  setSelection(ids) {
+    this.setSelectedIds(ids);
     this.ctx?.requestRender();
   }
   get isMarqueeActive() {
@@ -6155,7 +6380,7 @@ var SelectTool = class {
     this.ctx = ctx;
   }
   onDeactivate(ctx) {
-    this._selectedIds = [];
+    this.setSelectedIds([]);
     this.mode = { type: "idle" };
     this.hoveredId = null;
     ctx.setCursor?.("default");
@@ -6206,22 +6431,22 @@ var SelectTool = class {
       const alreadySelected = this._selectedIds.includes(hit.id);
       if (state.shiftKey) {
         if (alreadySelected) {
-          this._selectedIds = this._selectedIds.filter((id) => id !== hit.id);
+          this.setSelectedIds(this._selectedIds.filter((id) => id !== hit.id));
           this.mode = { type: "idle" };
         } else {
-          this._selectedIds = [...this._selectedIds, hit.id];
+          this.setSelectedIds([...this._selectedIds, hit.id]);
           this.mode = hit.locked ? { type: "idle" } : { type: "dragging" };
         }
       } else {
         if (!alreadySelected) {
-          this._selectedIds = [hit.id];
+          this.setSelectedIds([hit.id]);
         } else if (this._selectedIds.length > 1) {
           this.pendingSingleSelectId = hit.id;
         }
         this.mode = hit.locked ? { type: "idle" } : { type: "dragging" };
       }
     } else {
-      this._selectedIds = [];
+      this.setSelectedIds([]);
       this.mode = { type: "marquee", start: world };
     }
     ctx.requestRender();
@@ -6294,17 +6519,22 @@ var SelectTool = class {
     if (this.mode.type === "marquee") {
       const rect = this.getMarqueeRect();
       if (rect) {
-        this._selectedIds = this.findElementsInRect(rect, ctx);
+        this.setSelectedIds(this.findElementsInRect(rect, ctx));
       }
       ctx.requestRender();
     }
     if (!this.hasDragged && this.pendingSingleSelectId !== null) {
-      this._selectedIds = [this.pendingSingleSelectId];
+      this.setSelectedIds([this.pendingSingleSelectId]);
     }
     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 });
@@ -7516,7 +7746,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.25.0";
+var VERSION = "0.27.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,
@@ -7558,6 +7788,7 @@ var VERSION = "0.25.0";
   getArrowTangentAngle,
   getBendFromPoint,
   getElementBounds,
+  getElementStyle,
   getElementsBoundingBox,
   getHexCellsInCone,
   getHexCellsInLine,
@@ -7569,6 +7800,7 @@ var VERSION = "0.25.0";
   smartSnap,
   snapPoint,
   snapToHexCenter,
+  styleToPatch,
   toggleBold,
   toggleItalic,
   toggleStrikethrough,