@fieldnotes/core 0.8.5 → 0.8.7

package/dist/index.js

@@ -22,6 +22,153 @@ var EventBus = class {
   }
 };
 
+// src/core/quadtree.ts
+var MAX_ITEMS = 8;
+var MAX_DEPTH = 8;
+function intersects(a, b) {
+  return a.x <= b.x + b.w && a.x + a.w >= b.x && a.y <= b.y + b.h && a.y + a.h >= b.y;
+}
+var QuadNode = class _QuadNode {
+  constructor(bounds, depth) {
+    this.bounds = bounds;
+    this.depth = depth;
+  }
+  items = [];
+  children = null;
+  insert(entry) {
+    if (this.children) {
+      const idx = this.getChildIndex(entry.bounds);
+      if (idx !== -1) {
+        const child = this.children[idx];
+        if (child) child.insert(entry);
+        return;
+      }
+      this.items.push(entry);
+      return;
+    }
+    this.items.push(entry);
+    if (this.items.length > MAX_ITEMS && this.depth < MAX_DEPTH) {
+      this.split();
+    }
+  }
+  remove(id) {
+    const idx = this.items.findIndex((e) => e.id === id);
+    if (idx !== -1) {
+      this.items.splice(idx, 1);
+      return true;
+    }
+    if (this.children) {
+      for (const child of this.children) {
+        if (child.remove(id)) {
+          this.collapseIfEmpty();
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  query(rect, result) {
+    if (!intersects(this.bounds, rect)) return;
+    for (const item of this.items) {
+      if (intersects(item.bounds, rect)) {
+        result.push(item.id);
+      }
+    }
+    if (this.children) {
+      for (const child of this.children) {
+        child.query(rect, result);
+      }
+    }
+  }
+  getChildIndex(itemBounds) {
+    const midX = this.bounds.x + this.bounds.w / 2;
+    const midY = this.bounds.y + this.bounds.h / 2;
+    const left = itemBounds.x >= this.bounds.x && itemBounds.x + itemBounds.w <= midX;
+    const right = itemBounds.x >= midX && itemBounds.x + itemBounds.w <= this.bounds.x + this.bounds.w;
+    const top = itemBounds.y >= this.bounds.y && itemBounds.y + itemBounds.h <= midY;
+    const bottom = itemBounds.y >= midY && itemBounds.y + itemBounds.h <= this.bounds.y + this.bounds.h;
+    if (left && top) return 0;
+    if (right && top) return 1;
+    if (left && bottom) return 2;
+    if (right && bottom) return 3;
+    return -1;
+  }
+  split() {
+    const { x, y, w, h } = this.bounds;
+    const halfW = w / 2;
+    const halfH = h / 2;
+    const d = this.depth + 1;
+    this.children = [
+      new _QuadNode({ x, y, w: halfW, h: halfH }, d),
+      new _QuadNode({ x: x + halfW, y, w: halfW, h: halfH }, d),
+      new _QuadNode({ x, y: y + halfH, w: halfW, h: halfH }, d),
+      new _QuadNode({ x: x + halfW, y: y + halfH, w: halfW, h: halfH }, d)
+    ];
+    const remaining = [];
+    for (const item of this.items) {
+      const idx = this.getChildIndex(item.bounds);
+      if (idx !== -1) {
+        const target = this.children[idx];
+        if (target) target.insert(item);
+      } else {
+        remaining.push(item);
+      }
+    }
+    this.items = remaining;
+  }
+  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/state-serializer.ts
 var CURRENT_VERSION = 2;
 function exportState(elements, camera, layers = []) {
@@ -236,16 +383,16 @@ var Camera = class {
   pan(dx, dy) {
     this.x += dx;
     this.y += dy;
-    this.notifyChange();
+    this.notifyPan();
   }
   moveTo(x, y) {
     this.x = x;
     this.y = y;
-    this.notifyChange();
+    this.notifyPan();
   }
   setZoom(level) {
     this.z = Math.min(this.maxZoom, Math.max(this.minZoom, level));
-    this.notifyChange();
+    this.notifyZoom();
   }
   zoomAt(level, screenPoint) {
     const before = this.screenToWorld(screenPoint);
@@ -253,7 +400,7 @@ var Camera = class {
     const after = this.screenToWorld(screenPoint);
     this.x += (after.x - before.x) * this.z;
     this.y += (after.y - before.y) * this.z;
-    this.notifyChange();
+    this.notifyPanAndZoom();
   }
   screenToWorld(screen) {
     return {
@@ -267,6 +414,16 @@ var Camera = class {
       y: world.y * this.z + this.y
     };
   }
+  getVisibleRect(canvasWidth, canvasHeight) {
+    const topLeft = this.screenToWorld({ x: 0, y: 0 });
+    const bottomRight = this.screenToWorld({ x: canvasWidth, y: canvasHeight });
+    return {
+      x: topLeft.x,
+      y: topLeft.y,
+      w: bottomRight.x - topLeft.x,
+      h: bottomRight.y - topLeft.y
+    };
+  }
   toCSSTransform() {
     return `translate3d(${this.x}px, ${this.y}px, 0) scale(${this.z})`;
   }
@@ -274,8 +431,14 @@ var Camera = class {
     this.changeListeners.add(listener);
     return () => this.changeListeners.delete(listener);
   }
-  notifyChange() {
-    this.changeListeners.forEach((fn) => fn());
+  notifyPan() {
+    this.changeListeners.forEach((fn) => fn({ panned: true, zoomed: false }));
+  }
+  notifyZoom() {
+    this.changeListeners.forEach((fn) => fn({ panned: false, zoomed: true }));
+  }
+  notifyPanAndZoom() {
+    this.changeListeners.forEach((fn) => fn({ panned: true, zoomed: true }));
   }
 };
 
@@ -581,68 +744,6 @@ var InputHandler = class {
   }
 };
 
-// src/elements/element-store.ts
-var ElementStore = class {
-  elements = /* @__PURE__ */ new Map();
-  bus = new EventBus();
-  layerOrderMap = /* @__PURE__ */ new Map();
-  get count() {
-    return this.elements.size;
-  }
-  setLayerOrder(order) {
-    this.layerOrderMap = new Map(order);
-  }
-  getAll() {
-    return [...this.elements.values()].sort((a, b) => {
-      const layerA = this.layerOrderMap.get(a.layerId) ?? 0;
-      const layerB = this.layerOrderMap.get(b.layerId) ?? 0;
-      if (layerA !== layerB) return layerA - layerB;
-      return a.zIndex - b.zIndex;
-    });
-  }
-  getById(id) {
-    return this.elements.get(id);
-  }
-  getElementsByType(type) {
-    return this.getAll().filter(
-      (el) => el.type === type
-    );
-  }
-  add(element) {
-    this.elements.set(element.id, element);
-    this.bus.emit("add", element);
-  }
-  update(id, partial) {
-    const existing = this.elements.get(id);
-    if (!existing) return;
-    const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
-    this.elements.set(id, updated);
-    this.bus.emit("update", { previous: existing, current: updated });
-  }
-  remove(id) {
-    const element = this.elements.get(id);
-    if (!element) return;
-    this.elements.delete(id);
-    this.bus.emit("remove", element);
-  }
-  clear() {
-    this.elements.clear();
-    this.bus.emit("clear", null);
-  }
-  snapshot() {
-    return this.getAll().map((el) => ({ ...el }));
-  }
-  loadSnapshot(elements) {
-    this.elements.clear();
-    for (const el of elements) {
-      this.elements.set(el.id, el);
-    }
-  }
-  on(event, listener) {
-    return this.bus.on(event, listener);
-  }
-};
-
 // src/elements/arrow-geometry.ts
 function getArrowControlPoint(from, to, bend) {
   const midX = (from.x + to.x) / 2;
@@ -743,6 +844,185 @@ function isNearLine(point, a, b, threshold) {
   return Math.hypot(point.x - projX, point.y - projY) <= 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);
+  }
+  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 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/element-store.ts
+var ElementStore = class {
+  elements = /* @__PURE__ */ new Map();
+  bus = new EventBus();
+  layerOrderMap = /* @__PURE__ */ new Map();
+  spatialIndex = new Quadtree({ x: -1e5, y: -1e5, w: 2e5, h: 2e5 });
+  get count() {
+    return this.elements.size;
+  }
+  setLayerOrder(order) {
+    this.layerOrderMap = new Map(order);
+  }
+  getAll() {
+    return [...this.elements.values()].sort((a, b) => {
+      const layerA = this.layerOrderMap.get(a.layerId) ?? 0;
+      const layerB = this.layerOrderMap.get(b.layerId) ?? 0;
+      if (layerA !== layerB) return layerA - layerB;
+      return a.zIndex - b.zIndex;
+    });
+  }
+  getById(id) {
+    return this.elements.get(id);
+  }
+  getElementsByType(type) {
+    return this.getAll().filter(
+      (el) => el.type === type
+    );
+  }
+  add(element) {
+    this.elements.set(element.id, element);
+    const bounds = getElementBounds(element);
+    if (bounds) this.spatialIndex.insert(element.id, bounds);
+    this.bus.emit("add", element);
+  }
+  update(id, partial) {
+    const existing = this.elements.get(id);
+    if (!existing) return;
+    const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
+    this.elements.set(id, updated);
+    const newBounds = getElementBounds(updated);
+    if (newBounds) {
+      this.spatialIndex.update(id, newBounds);
+    }
+    this.bus.emit("update", { previous: existing, current: updated });
+  }
+  remove(id) {
+    const element = this.elements.get(id);
+    if (!element) return;
+    this.elements.delete(id);
+    this.spatialIndex.remove(id);
+    this.bus.emit("remove", element);
+  }
+  clear() {
+    this.elements.clear();
+    this.spatialIndex.clear();
+    this.bus.emit("clear", null);
+  }
+  snapshot() {
+    return this.getAll().map((el) => ({ ...el }));
+  }
+  loadSnapshot(elements) {
+    this.elements.clear();
+    this.spatialIndex.clear();
+    for (const el of elements) {
+      this.elements.set(el.id, el);
+      const bounds = getElementBounds(el);
+      if (bounds) this.spatialIndex.insert(el.id, bounds);
+    }
+  }
+  queryRect(rect) {
+    const ids = this.spatialIndex.query(rect);
+    const elements = [];
+    for (const id of ids) {
+      const el = this.elements.get(id);
+      if (el) elements.push(el);
+    }
+    return elements.sort((a, b) => {
+      const layerA = this.layerOrderMap.get(a.layerId) ?? 0;
+      const layerB = this.layerOrderMap.get(b.layerId) ?? 0;
+      if (layerA !== layerB) return layerA - layerB;
+      return a.zIndex - b.zIndex;
+    });
+  }
+  queryPoint(point) {
+    return this.queryRect({ x: point.x, y: point.y, w: 0, h: 0 });
+  }
+  on(event, listener) {
+    return this.bus.on(event, listener);
+  }
+  onChange(listener) {
+    const unsubs = [
+      this.bus.on("add", listener),
+      this.bus.on("remove", listener),
+      this.bus.on("update", listener),
+      this.bus.on("clear", listener)
+    ];
+    return () => unsubs.forEach((fn) => fn());
+  }
+};
+
 // src/elements/arrow-binding.ts
 var BINDABLE_TYPES = /* @__PURE__ */ new Set(["note", "text", "image", "html", "shape"]);
 function isBindable(element) {
@@ -757,15 +1037,6 @@ function getElementCenter(element) {
     y: element.position.y + element.size.h / 2
   };
 }
-function getElementBounds(element) {
-  if (!("size" in element)) return null;
-  return {
-    x: element.position.x,
-    y: element.position.y,
-    w: element.size.w,
-    h: element.size.h
-  };
-}
 function getEdgeIntersection(bounds, outsidePoint) {
   const cx = bounds.x + bounds.w / 2;
   const cy = bounds.y + bounds.h / 2;
@@ -2092,6 +2363,10 @@ var LayerManager = class {
     this.updateLayerDirect(id, { locked });
     return true;
   }
+  setLayerOpacity(id, opacity) {
+    if (!this.layers.has(id)) return;
+    this.updateLayerDirect(id, { opacity: Math.max(0, Math.min(1, opacity)) });
+  }
   setActiveLayer(id) {
     if (!this.layers.has(id)) return;
     this._activeLayerId = id;
@@ -2147,36 +2422,522 @@ var LayerManager = class {
   }
 };
 
-// src/canvas/viewport.ts
-var Viewport = class {
-  constructor(container, options = {}) {
-    this.container = container;
-    this.camera = new Camera(options.camera);
-    this.background = new Background(options.background);
-    this._gridSize = options.background?.spacing ?? 24;
-    this.store = new ElementStore();
-    this.layerManager = new LayerManager(this.store);
-    this.toolManager = new ToolManager();
-    this.renderer = new ElementRenderer();
-    this.renderer.setStore(this.store);
-    this.renderer.setCamera(this.camera);
-    this.renderer.setOnImageLoad(() => this.requestRender());
-    this.noteEditor = new NoteEditor();
-    this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
-    this.history = new HistoryStack();
-    this.historyRecorder = new HistoryRecorder(this.store, this.history);
-    this.wrapper = this.createWrapper();
-    this.canvasEl = this.createCanvas();
-    this.domLayer = this.createDomLayer();
-    this.wrapper.appendChild(this.canvasEl);
-    this.wrapper.appendChild(this.domLayer);
-    this.container.appendChild(this.wrapper);
-    this.toolContext = {
-      camera: this.camera,
-      store: this.store,
-      requestRender: () => this.requestRender(),
-      switchTool: (name) => this.toolManager.setTool(name, this.toolContext),
-      editElement: (id) => this.startEditingElement(id),
+// src/canvas/interact-mode.ts
+var InteractMode = class {
+  interactingElementId = null;
+  getNode;
+  constructor(deps) {
+    this.getNode = deps.getNode;
+  }
+  startInteracting(id) {
+    this.stopInteracting();
+    const node = this.getNode(id);
+    if (!node) return;
+    this.interactingElementId = id;
+    node.style.pointerEvents = "auto";
+    node.addEventListener("pointerdown", this.onNodePointerDown);
+    window.addEventListener("keydown", this.onKeyDown);
+    window.addEventListener("pointerdown", this.onPointerDown);
+  }
+  stopInteracting() {
+    if (!this.interactingElementId) return;
+    const node = this.getNode(this.interactingElementId);
+    if (node) {
+      node.style.pointerEvents = "none";
+      node.removeEventListener("pointerdown", this.onNodePointerDown);
+    }
+    this.interactingElementId = null;
+    window.removeEventListener("keydown", this.onKeyDown);
+    window.removeEventListener("pointerdown", this.onPointerDown);
+  }
+  isInteracting() {
+    return this.interactingElementId !== null;
+  }
+  destroy() {
+    this.stopInteracting();
+  }
+  onNodePointerDown = (e) => {
+    e.stopPropagation();
+  };
+  onKeyDown = (e) => {
+    if (e.key === "Escape") {
+      this.stopInteracting();
+    }
+  };
+  onPointerDown = (e) => {
+    if (!this.interactingElementId) return;
+    const target = e.target;
+    if (!(target instanceof Element)) {
+      this.stopInteracting();
+      return;
+    }
+    const node = this.getNode(this.interactingElementId);
+    if (node && !node.contains(target)) {
+      this.stopInteracting();
+    }
+  };
+};
+
+// src/canvas/dom-node-manager.ts
+var DomNodeManager = class {
+  domNodes = /* @__PURE__ */ new Map();
+  htmlContent = /* @__PURE__ */ new Map();
+  domLayer;
+  onEditRequest;
+  isEditingElement;
+  constructor(deps) {
+    this.domLayer = deps.domLayer;
+    this.onEditRequest = deps.onEditRequest;
+    this.isEditingElement = deps.isEditingElement;
+  }
+  getNode(id) {
+    return this.domNodes.get(id);
+  }
+  storeHtmlContent(elementId, dom) {
+    this.htmlContent.set(elementId, dom);
+  }
+  syncDomNode(element, zIndex = 0) {
+    let node = this.domNodes.get(element.id);
+    if (!node) {
+      node = document.createElement("div");
+      node.dataset["elementId"] = element.id;
+      Object.assign(node.style, {
+        position: "absolute",
+        pointerEvents: "auto"
+      });
+      this.domLayer.appendChild(node);
+      this.domNodes.set(element.id, node);
+    }
+    const size = "size" in element ? element.size : null;
+    Object.assign(node.style, {
+      display: "block",
+      left: `${element.position.x}px`,
+      top: `${element.position.y}px`,
+      width: size ? `${size.w}px` : "auto",
+      height: size ? `${size.h}px` : "auto",
+      zIndex: String(zIndex)
+    });
+    this.renderDomContent(node, element);
+  }
+  hideDomNode(id) {
+    const node = this.domNodes.get(id);
+    if (node) node.style.display = "none";
+  }
+  removeDomNode(id) {
+    this.htmlContent.delete(id);
+    const node = this.domNodes.get(id);
+    if (node) {
+      node.remove();
+      this.domNodes.delete(id);
+    }
+  }
+  clearDomNodes() {
+    this.domNodes.forEach((node) => node.remove());
+    this.domNodes.clear();
+    this.htmlContent.clear();
+  }
+  reattachHtmlContent(store) {
+    for (const el of store.getElementsByType("html")) {
+      if (el.domId) {
+        const dom = document.getElementById(el.domId);
+        if (dom) {
+          this.htmlContent.set(el.id, dom);
+        }
+      }
+    }
+  }
+  renderDomContent(node, element) {
+    if (element.type === "note") {
+      if (!node.dataset["initialized"]) {
+        node.dataset["initialized"] = "true";
+        Object.assign(node.style, {
+          backgroundColor: element.backgroundColor,
+          color: element.textColor,
+          padding: "8px",
+          borderRadius: "4px",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+          fontSize: "14px",
+          overflow: "hidden",
+          cursor: "default",
+          userSelect: "none",
+          wordWrap: "break-word"
+        });
+        node.textContent = element.text || "";
+        node.addEventListener("dblclick", (e) => {
+          e.stopPropagation();
+          const id = node.dataset["elementId"];
+          if (id) this.onEditRequest(id);
+        });
+      }
+      if (!this.isEditingElement(element.id)) {
+        if (node.textContent !== element.text) {
+          node.textContent = element.text || "";
+        }
+        node.style.backgroundColor = element.backgroundColor;
+        node.style.color = element.textColor;
+      }
+    }
+    if (element.type === "html" && !node.dataset["initialized"]) {
+      const content = this.htmlContent.get(element.id);
+      if (content) {
+        node.dataset["initialized"] = "true";
+        Object.assign(node.style, {
+          overflow: "hidden",
+          pointerEvents: "none"
+        });
+        node.appendChild(content);
+      }
+    }
+    if (element.type === "text") {
+      if (!node.dataset["initialized"]) {
+        node.dataset["initialized"] = "true";
+        Object.assign(node.style, {
+          padding: "2px",
+          fontSize: `${element.fontSize}px`,
+          color: element.color,
+          textAlign: element.textAlign,
+          background: "none",
+          border: "none",
+          boxShadow: "none",
+          overflow: "visible",
+          cursor: "default",
+          userSelect: "none",
+          wordWrap: "break-word",
+          whiteSpace: "pre-wrap",
+          lineHeight: "1.4"
+        });
+        node.textContent = element.text || "";
+        node.addEventListener("dblclick", (e) => {
+          e.stopPropagation();
+          const id = node.dataset["elementId"];
+          if (id) this.onEditRequest(id);
+        });
+      }
+      if (!this.isEditingElement(element.id)) {
+        if (node.textContent !== element.text) {
+          node.textContent = element.text || "";
+        }
+        Object.assign(node.style, {
+          fontSize: `${element.fontSize}px`,
+          color: element.color,
+          textAlign: element.textAlign
+        });
+      }
+    }
+  }
+};
+
+// src/canvas/render-stats.ts
+var SAMPLE_SIZE = 60;
+var RenderStats = class {
+  frameTimes = [];
+  frameCount = 0;
+  recordFrame(durationMs) {
+    this.frameCount++;
+    this.frameTimes.push(durationMs);
+    if (this.frameTimes.length > SAMPLE_SIZE) {
+      this.frameTimes.shift();
+    }
+  }
+  getSnapshot() {
+    const times = this.frameTimes;
+    if (times.length === 0) {
+      return { fps: 0, avgFrameMs: 0, p95FrameMs: 0, lastFrameMs: 0, frameCount: 0 };
+    }
+    const avg = times.reduce((a, b) => a + b, 0) / times.length;
+    const sorted = [...times].sort((a, b) => a - b);
+    const p95Index = Math.min(Math.floor(sorted.length * 0.95), sorted.length - 1);
+    const lastFrame = times[times.length - 1] ?? 0;
+    return {
+      fps: avg > 0 ? Math.round(1e3 / avg) : 0,
+      avgFrameMs: Math.round(avg * 100) / 100,
+      p95FrameMs: Math.round((sorted[p95Index] ?? 0) * 100) / 100,
+      lastFrameMs: Math.round(lastFrame * 100) / 100,
+      frameCount: this.frameCount
+    };
+  }
+  reset() {
+    this.frameTimes = [];
+    this.frameCount = 0;
+  }
+};
+
+// src/canvas/render-loop.ts
+var RenderLoop = class {
+  needsRender = false;
+  animFrameId = 0;
+  canvasEl;
+  camera;
+  background;
+  store;
+  renderer;
+  toolManager;
+  layerManager;
+  domNodeManager;
+  layerCache;
+  activeDrawingLayerId = null;
+  lastZoom;
+  lastCamX;
+  lastCamY;
+  stats = new RenderStats();
+  constructor(deps) {
+    this.canvasEl = deps.canvasEl;
+    this.camera = deps.camera;
+    this.background = deps.background;
+    this.store = deps.store;
+    this.renderer = deps.renderer;
+    this.toolManager = deps.toolManager;
+    this.layerManager = deps.layerManager;
+    this.domNodeManager = deps.domNodeManager;
+    this.layerCache = deps.layerCache;
+    this.lastZoom = deps.camera.zoom;
+    this.lastCamX = deps.camera.position.x;
+    this.lastCamY = deps.camera.position.y;
+  }
+  requestRender() {
+    this.needsRender = true;
+  }
+  flush() {
+    if (this.needsRender) {
+      this.render();
+      this.needsRender = false;
+    }
+  }
+  start() {
+    const loop = () => {
+      if (this.needsRender) {
+        this.render();
+        this.needsRender = false;
+      }
+      this.animFrameId = requestAnimationFrame(loop);
+    };
+    this.animFrameId = requestAnimationFrame(loop);
+  }
+  stop() {
+    cancelAnimationFrame(this.animFrameId);
+  }
+  setCanvasSize(width, height) {
+    this.canvasEl.width = width;
+    this.canvasEl.height = height;
+    this.layerCache.resize(this.canvasEl.clientWidth, this.canvasEl.clientHeight);
+  }
+  setActiveDrawingLayer(layerId) {
+    this.activeDrawingLayerId = layerId;
+  }
+  markLayerDirty(layerId) {
+    this.layerCache.markDirty(layerId);
+  }
+  markAllLayersDirty() {
+    this.layerCache.markAllDirty();
+  }
+  getStats() {
+    return this.stats.getSnapshot();
+  }
+  compositeLayerCache(ctx, layerId, dpr) {
+    const cached = this.layerCache.getCanvas(layerId);
+    ctx.save();
+    ctx.scale(1 / this.camera.zoom, 1 / this.camera.zoom);
+    ctx.translate(-this.camera.position.x, -this.camera.position.y);
+    ctx.scale(1 / dpr, 1 / dpr);
+    ctx.drawImage(cached, 0, 0);
+    ctx.restore();
+  }
+  render() {
+    const t0 = performance.now();
+    const ctx = this.canvasEl.getContext("2d");
+    if (!ctx) return;
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    const cssWidth = this.canvasEl.clientWidth;
+    const cssHeight = this.canvasEl.clientHeight;
+    const currentZoom = this.camera.zoom;
+    const currentCamX = this.camera.position.x;
+    const currentCamY = this.camera.position.y;
+    if (currentZoom !== this.lastZoom || currentCamX !== this.lastCamX || currentCamY !== this.lastCamY) {
+      this.layerCache.markAllDirty();
+      this.lastZoom = currentZoom;
+      this.lastCamX = currentCamX;
+      this.lastCamY = currentCamY;
+    }
+    ctx.save();
+    ctx.scale(dpr, dpr);
+    this.renderer.setCanvasSize(cssWidth, cssHeight);
+    this.background.render(ctx, this.camera);
+    ctx.save();
+    ctx.translate(this.camera.position.x, this.camera.position.y);
+    ctx.scale(this.camera.zoom, this.camera.zoom);
+    const visibleRect = this.camera.getVisibleRect(cssWidth, cssHeight);
+    const margin = Math.max(visibleRect.w, visibleRect.h) * 0.1;
+    const cullingRect = {
+      x: visibleRect.x - margin,
+      y: visibleRect.y - margin,
+      w: visibleRect.w + margin * 2,
+      h: visibleRect.h + margin * 2
+    };
+    const allElements = this.store.getAll();
+    const layerElements = /* @__PURE__ */ new Map();
+    const gridElements = [];
+    let domZIndex = 0;
+    for (const element of allElements) {
+      if (!this.layerManager.isLayerVisible(element.layerId)) {
+        if (this.renderer.isDomElement(element)) {
+          this.domNodeManager.hideDomNode(element.id);
+        }
+        continue;
+      }
+      if (this.renderer.isDomElement(element)) {
+        const elBounds = getElementBounds(element);
+        if (elBounds && !boundsIntersect(elBounds, cullingRect)) {
+          this.domNodeManager.hideDomNode(element.id);
+        } else {
+          this.domNodeManager.syncDomNode(element, domZIndex++);
+        }
+        continue;
+      }
+      if (element.type === "grid") {
+        gridElements.push(element);
+        continue;
+      }
+      let group = layerElements.get(element.layerId);
+      if (!group) {
+        group = [];
+        layerElements.set(element.layerId, group);
+      }
+      group.push(element);
+    }
+    for (const grid of gridElements) {
+      this.renderer.renderCanvasElement(ctx, grid);
+    }
+    for (const [layerId, elements] of layerElements) {
+      const isActiveDrawingLayer = layerId === this.activeDrawingLayerId;
+      if (!this.layerCache.isDirty(layerId)) {
+        this.compositeLayerCache(ctx, layerId, dpr);
+        continue;
+      }
+      if (isActiveDrawingLayer) {
+        this.compositeLayerCache(ctx, layerId, dpr);
+        continue;
+      }
+      const offCtx = this.layerCache.getContext(layerId);
+      if (offCtx) {
+        const offCanvas = this.layerCache.getCanvas(layerId);
+        offCtx.clearRect(0, 0, offCanvas.width, offCanvas.height);
+        offCtx.save();
+        offCtx.scale(dpr, dpr);
+        offCtx.translate(this.camera.position.x, this.camera.position.y);
+        offCtx.scale(this.camera.zoom, this.camera.zoom);
+        for (const element of elements) {
+          const elBounds = getElementBounds(element);
+          if (elBounds && !boundsIntersect(elBounds, cullingRect)) continue;
+          this.renderer.renderCanvasElement(offCtx, element);
+        }
+        offCtx.restore();
+        this.layerCache.markClean(layerId);
+        this.compositeLayerCache(ctx, layerId, dpr);
+      }
+    }
+    const activeTool = this.toolManager.activeTool;
+    if (activeTool?.renderOverlay) {
+      activeTool.renderOverlay(ctx);
+    }
+    ctx.restore();
+    ctx.restore();
+    this.stats.recordFrame(performance.now() - t0);
+  }
+};
+
+// src/canvas/layer-cache.ts
+function createOffscreenCanvas(width, height) {
+  if (typeof OffscreenCanvas !== "undefined") {
+    return new OffscreenCanvas(width, height);
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}
+var LayerCache = class {
+  canvases = /* @__PURE__ */ new Map();
+  dirtyFlags = /* @__PURE__ */ new Map();
+  width;
+  height;
+  constructor(width, height) {
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    this.width = Math.round(width * dpr);
+    this.height = Math.round(height * dpr);
+  }
+  isDirty(layerId) {
+    return this.dirtyFlags.get(layerId) !== false;
+  }
+  markDirty(layerId) {
+    this.dirtyFlags.set(layerId, true);
+  }
+  markClean(layerId) {
+    this.dirtyFlags.set(layerId, false);
+  }
+  markAllDirty() {
+    for (const [id] of this.dirtyFlags) {
+      this.dirtyFlags.set(id, true);
+    }
+  }
+  getCanvas(layerId) {
+    let canvas = this.canvases.get(layerId);
+    if (!canvas) {
+      canvas = createOffscreenCanvas(this.width, this.height);
+      this.canvases.set(layerId, canvas);
+      this.dirtyFlags.set(layerId, true);
+    }
+    return canvas;
+  }
+  getContext(layerId) {
+    const canvas = this.getCanvas(layerId);
+    return canvas.getContext("2d");
+  }
+  resize(width, height) {
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    this.width = Math.round(width * dpr);
+    this.height = Math.round(height * dpr);
+    for (const [id, canvas] of this.canvases) {
+      canvas.width = this.width;
+      canvas.height = this.height;
+      this.dirtyFlags.set(id, true);
+    }
+  }
+  clear() {
+    this.canvases.clear();
+    this.dirtyFlags.clear();
+  }
+};
+
+// src/canvas/viewport.ts
+var Viewport = class {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.camera = new Camera(options.camera);
+    this.background = new Background(options.background);
+    this._gridSize = options.background?.spacing ?? 24;
+    this.store = new ElementStore();
+    this.layerManager = new LayerManager(this.store);
+    this.toolManager = new ToolManager();
+    this.renderer = new ElementRenderer();
+    this.renderer.setStore(this.store);
+    this.renderer.setCamera(this.camera);
+    this.renderer.setOnImageLoad(() => this.requestRender());
+    this.noteEditor = new NoteEditor();
+    this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
+    this.history = new HistoryStack();
+    this.historyRecorder = new HistoryRecorder(this.store, this.history);
+    this.wrapper = this.createWrapper();
+    this.canvasEl = this.createCanvas();
+    this.domLayer = this.createDomLayer();
+    this.wrapper.appendChild(this.canvasEl);
+    this.wrapper.appendChild(this.domLayer);
+    this.container.appendChild(this.wrapper);
+    this.toolContext = {
+      camera: this.camera,
+      store: this.store,
+      requestRender: () => this.requestRender(),
+      switchTool: (name) => this.toolManager.setTool(name, this.toolContext),
+      editElement: (id) => this.startEditingElement(id),
       setCursor: (cursor) => {
         this.wrapper.style.cursor = cursor;
       },
@@ -2192,18 +2953,56 @@ var Viewport = class {
       historyRecorder: this.historyRecorder,
       historyStack: this.history
     });
+    this.domNodeManager = new DomNodeManager({
+      domLayer: this.domLayer,
+      onEditRequest: (id) => this.startEditingElement(id),
+      isEditingElement: (id) => this.noteEditor.isEditing && this.noteEditor.editingElementId === id
+    });
+    this.interactMode = new InteractMode({
+      getNode: (id) => this.domNodeManager.getNode(id)
+    });
+    const layerCache = new LayerCache(
+      this.canvasEl.clientWidth || 800,
+      this.canvasEl.clientHeight || 600
+    );
+    this.renderLoop = new RenderLoop({
+      canvasEl: this.canvasEl,
+      camera: this.camera,
+      background: this.background,
+      store: this.store,
+      renderer: this.renderer,
+      toolManager: this.toolManager,
+      layerManager: this.layerManager,
+      domNodeManager: this.domNodeManager,
+      layerCache
+    });
     this.unsubCamera = this.camera.onChange(() => {
       this.applyCameraTransform();
       this.requestRender();
     });
     this.unsubStore = [
-      this.store.on("add", () => this.requestRender()),
+      this.store.on("add", (el) => {
+        this.renderLoop.markLayerDirty(el.layerId);
+        this.requestRender();
+      }),
       this.store.on("remove", (el) => {
         this.unbindArrowsFrom(el);
-        this.removeDomNode(el.id);
+        this.domNodeManager.removeDomNode(el.id);
+        this.renderLoop.markLayerDirty(el.layerId);
+        this.requestRender();
+      }),
+      this.store.on("update", ({ previous, current }) => {
+        this.renderLoop.markLayerDirty(current.layerId);
+        if (previous.layerId !== current.layerId) {
+          this.renderLoop.markLayerDirty(previous.layerId);
+        }
+        this.requestRender();
       }),
-      this.store.on("update", () => this.requestRender()),
-      this.store.on("clear", () => this.clearDomNodes())
+      this.store.on("clear", () => {
+        this.domNodeManager.clearDomNodes();
+        this.renderLoop.markAllLayersDirty();
+        this.requestRender();
+      })
     ];
     this.layerManager.on("change", () => {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
@@ -2214,7 +3013,7 @@ var Viewport = class {
     this.wrapper.addEventListener("drop", this.onDrop);
     this.observeResize();
     this.syncCanvasSize();
-    this.startRenderLoop();
+    this.renderLoop.start();
   }
   camera;
   store;
@@ -2233,13 +3032,11 @@ var Viewport = class {
   historyRecorder;
   toolContext;
   resizeObserver = null;
-  animFrameId = 0;
   _snapToGrid = false;
   _gridSize;
-  needsRender = true;
-  domNodes = /* @__PURE__ */ new Map();
-  htmlContent = /* @__PURE__ */ new Map();
-  interactingElementId = null;
+  renderLoop;
+  domNodeManager;
+  interactMode;
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -2251,7 +3048,7 @@ var Viewport = class {
     this.toolContext.snapToGrid = enabled;
   }
   requestRender() {
-    this.needsRender = true;
+    this.renderLoop.requestRender();
   }
   exportState() {
     return exportState(this.store.snapshot(), this.camera, this.layerManager.snapshot());
@@ -2265,12 +3062,12 @@ var Viewport = class {
   loadState(state) {
     this.historyRecorder.pause();
     this.noteEditor.destroy(this.store);
-    this.clearDomNodes();
+    this.domNodeManager.clearDomNodes();
     this.store.loadSnapshot(state.elements);
     if (state.layers && state.layers.length > 0) {
       this.layerManager.loadSnapshot(state.layers);
     }
-    this.reattachHtmlContent();
+    this.domNodeManager.reattachHtmlContent(this.store);
     this.history.clear();
     this.historyRecorder.resume();
     this.camera.moveTo(state.camera.position.x, state.camera.position.y);
@@ -2309,7 +3106,7 @@ var Viewport = class {
       domId,
       layerId: this.layerManager.activeLayerId
     });
-    this.htmlContent.set(el.id, dom);
+    this.domNodeManager.storeHtmlContent(el.id, dom);
     this.historyRecorder.begin();
     this.store.add(el);
     this.historyRecorder.commit();
@@ -2345,8 +3142,8 @@ var Viewport = class {
     this.requestRender();
   }
   destroy() {
-    cancelAnimationFrame(this.animFrameId);
-    this.stopInteracting();
+    this.renderLoop.stop();
+    this.interactMode.destroy();
     this.noteEditor.destroy(this.store);
     this.historyRecorder.destroy();
     this.wrapper.removeEventListener("dblclick", this.onDblClick);
@@ -2359,54 +3156,11 @@ var Viewport = class {
     this.resizeObserver = null;
     this.wrapper.remove();
   }
-  startRenderLoop() {
-    const loop = () => {
-      if (this.needsRender) {
-        this.render();
-        this.needsRender = false;
-      }
-      this.animFrameId = requestAnimationFrame(loop);
-    };
-    this.animFrameId = requestAnimationFrame(loop);
-  }
-  render() {
-    const ctx = this.ctx;
-    if (!ctx) return;
-    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
-    ctx.save();
-    ctx.scale(dpr, dpr);
-    this.renderer.setCanvasSize(this.canvasEl.clientWidth, this.canvasEl.clientHeight);
-    this.background.render(ctx, this.camera);
-    ctx.save();
-    ctx.translate(this.camera.position.x, this.camera.position.y);
-    ctx.scale(this.camera.zoom, this.camera.zoom);
-    const allElements = this.store.getAll();
-    let domZIndex = 0;
-    for (const element of allElements) {
-      if (!this.layerManager.isLayerVisible(element.layerId)) {
-        if (this.renderer.isDomElement(element)) {
-          this.hideDomNode(element.id);
-        }
-        continue;
-      }
-      if (this.renderer.isDomElement(element)) {
-        this.syncDomNode(element, domZIndex++);
-      } else {
-        this.renderer.renderCanvasElement(ctx, element);
-      }
-    }
-    const activeTool = this.toolManager.activeTool;
-    if (activeTool?.renderOverlay) {
-      activeTool.renderOverlay(ctx);
-    }
-    ctx.restore();
-    ctx.restore();
-  }
   startEditingElement(id) {
     const element = this.store.getById(id);
     if (!element || element.type !== "note" && element.type !== "text") return;
-    this.render();
-    const node = this.domNodes.get(id);
+    this.renderLoop.flush();
+    const node = this.domNodeManager.getNode(id);
     if (node) {
       this.noteEditor.startEditing(node, id, this.store);
     }
@@ -2420,7 +3174,7 @@ var Viewport = class {
       this.historyRecorder.commit();
       return;
     }
-    const node = this.domNodes.get(elementId);
+    const node = this.domNodeManager.getNode(elementId);
     if (node && "size" in element) {
       const measuredHeight = node.scrollHeight;
       if (measuredHeight !== element.size.h) {
@@ -2448,12 +3202,12 @@ var Viewport = class {
     const world = this.camera.screenToWorld(screen);
     const hit = this.hitTestWorld(world);
     if (hit?.type === "html") {
-      this.startInteracting(hit.id);
+      this.interactMode.startInteracting(hit.id);
     }
   };
   hitTestWorld(world) {
-    const elements = this.store.getAll().reverse();
-    for (const el of elements) {
+    const candidates = this.store.queryPoint(world).reverse();
+    for (const el of candidates) {
       if (!("size" in el)) continue;
       const { x, y } = el.position;
       const { w, h } = el.size;
@@ -2463,44 +3217,9 @@ var Viewport = class {
     }
     return null;
   }
-  startInteracting(id) {
-    this.stopInteracting();
-    const node = this.domNodes.get(id);
-    if (!node) return;
-    this.interactingElementId = id;
-    node.style.pointerEvents = "auto";
-    node.addEventListener("pointerdown", this.onInteractNodePointerDown);
-    window.addEventListener("keydown", this.onInteractKeyDown);
-    window.addEventListener("pointerdown", this.onInteractPointerDown);
-  }
   stopInteracting() {
-    if (!this.interactingElementId) return;
-    const node = this.domNodes.get(this.interactingElementId);
-    if (node) {
-      node.style.pointerEvents = "none";
-      node.removeEventListener("pointerdown", this.onInteractNodePointerDown);
-    }
-    this.interactingElementId = null;
-    window.removeEventListener("keydown", this.onInteractKeyDown);
-    window.removeEventListener("pointerdown", this.onInteractPointerDown);
+    this.interactMode.stopInteracting();
   }
-  onInteractNodePointerDown = (e) => {
-    e.stopPropagation();
-  };
-  onInteractKeyDown = (e) => {
-    if (e.key === "Escape") {
-      this.stopInteracting();
-    }
-  };
-  onInteractPointerDown = (e) => {
-    if (!this.interactingElementId) return;
-    const target = e.target;
-    if (!target) return;
-    const node = this.domNodes.get(this.interactingElementId);
-    if (node && !node.contains(target)) {
-      this.stopInteracting();
-    }
-  };
   onDragOver = (e) => {
     e.preventDefault();
   };
@@ -2522,108 +3241,6 @@ var Viewport = class {
       reader.readAsDataURL(file);
     }
   };
-  syncDomNode(element, zIndex = 0) {
-    let node = this.domNodes.get(element.id);
-    if (!node) {
-      node = document.createElement("div");
-      node.dataset["elementId"] = element.id;
-      Object.assign(node.style, {
-        position: "absolute",
-        pointerEvents: "auto"
-      });
-      this.domLayer.appendChild(node);
-      this.domNodes.set(element.id, node);
-    }
-    const size = "size" in element ? element.size : null;
-    Object.assign(node.style, {
-      display: "block",
-      left: `${element.position.x}px`,
-      top: `${element.position.y}px`,
-      width: size ? `${size.w}px` : "auto",
-      height: size ? `${size.h}px` : "auto",
-      zIndex: String(zIndex)
-    });
-    this.renderDomContent(node, element);
-  }
-  renderDomContent(node, element) {
-    if (element.type === "note") {
-      if (!node.dataset["initialized"]) {
-        node.dataset["initialized"] = "true";
-        Object.assign(node.style, {
-          backgroundColor: element.backgroundColor,
-          color: element.textColor,
-          padding: "8px",
-          borderRadius: "4px",
-          boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-          fontSize: "14px",
-          overflow: "hidden",
-          cursor: "default",
-          userSelect: "none",
-          wordWrap: "break-word"
-        });
-        node.textContent = element.text || "";
-        node.addEventListener("dblclick", (e) => {
-          e.stopPropagation();
-          const id = node.dataset["elementId"];
-          if (id) this.startEditingElement(id);
-        });
-      }
-      if (!this.noteEditor.isEditing || this.noteEditor.editingElementId !== element.id) {
-        if (node.textContent !== element.text) {
-          node.textContent = element.text || "";
-        }
-        node.style.backgroundColor = element.backgroundColor;
-        node.style.color = element.textColor;
-      }
-    }
-    if (element.type === "html" && !node.dataset["initialized"]) {
-      const content = this.htmlContent.get(element.id);
-      if (content) {
-        node.dataset["initialized"] = "true";
-        Object.assign(node.style, {
-          overflow: "hidden",
-          pointerEvents: "none"
-        });
-        node.appendChild(content);
-      }
-    }
-    if (element.type === "text") {
-      if (!node.dataset["initialized"]) {
-        node.dataset["initialized"] = "true";
-        Object.assign(node.style, {
-          padding: "2px",
-          fontSize: `${element.fontSize}px`,
-          color: element.color,
-          textAlign: element.textAlign,
-          background: "none",
-          border: "none",
-          boxShadow: "none",
-          overflow: "visible",
-          cursor: "default",
-          userSelect: "none",
-          wordWrap: "break-word",
-          whiteSpace: "pre-wrap",
-          lineHeight: "1.4"
-        });
-        node.textContent = element.text || "";
-        node.addEventListener("dblclick", (e) => {
-          e.stopPropagation();
-          const id = node.dataset["elementId"];
-          if (id) this.startEditingElement(id);
-        });
-      }
-      if (!this.noteEditor.isEditing || this.noteEditor.editingElementId !== element.id) {
-        if (node.textContent !== element.text) {
-          node.textContent = element.text || "";
-        }
-        Object.assign(node.style, {
-          fontSize: `${element.fontSize}px`,
-          color: element.color,
-          textAlign: element.textAlign
-        });
-      }
-    }
-  }
   unbindArrowsFrom(removedElement) {
     const boundArrows = findBoundArrows(removedElement.id, this.store);
     const bounds = getElementBounds(removedElement);
@@ -2658,35 +3275,6 @@ var Viewport = class {
       }
     }
   }
-  hideDomNode(id) {
-    const node = this.domNodes.get(id);
-    if (node) node.style.display = "none";
-  }
-  removeDomNode(id) {
-    this.htmlContent.delete(id);
-    const node = this.domNodes.get(id);
-    if (node) {
-      node.remove();
-      this.domNodes.delete(id);
-    }
-    this.requestRender();
-  }
-  clearDomNodes() {
-    this.domNodes.forEach((node) => node.remove());
-    this.domNodes.clear();
-    this.htmlContent.clear();
-    this.requestRender();
-  }
-  reattachHtmlContent() {
-    for (const el of this.store.getElementsByType("html")) {
-      if (el.domId) {
-        const dom = document.getElementById(el.domId);
-        if (dom) {
-          this.htmlContent.set(el.id, dom);
-        }
-      }
-    }
-  }
   createWrapper() {
     const el = document.createElement("div");
     Object.assign(el.style, {
@@ -2727,8 +3315,7 @@ var Viewport = class {
   syncCanvasSize() {
     const rect = this.container.getBoundingClientRect();
     const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
-    this.canvasEl.width = rect.width * dpr;
-    this.canvasEl.height = rect.height * dpr;
+    this.renderLoop.setCanvasSize(rect.width * dpr, rect.height * dpr);
     this.requestRender();
   }
   observeResize() {
@@ -2771,6 +3358,9 @@ var HandTool = class {
 var MIN_POINTS_FOR_STROKE = 2;
 var DEFAULT_SMOOTHING = 1.5;
 var DEFAULT_PRESSURE = 0.5;
+var DEFAULT_MIN_POINT_DISTANCE = 3;
+var DEFAULT_PROGRESSIVE_THRESHOLD = 200;
+var PROGRESSIVE_HOT_ZONE = 30;
 var PencilTool = class {
   name = "pencil";
   drawing = false;
@@ -2778,10 +3368,17 @@ var PencilTool = class {
   color;
   width;
   smoothing;
+  minPointDistance;
+  progressiveThreshold;
+  nextSimplifyAt;
+  optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.color = options.color ?? "#000000";
     this.width = options.width ?? 2;
     this.smoothing = options.smoothing ?? DEFAULT_SMOOTHING;
+    this.minPointDistance = options.minPointDistance ?? DEFAULT_MIN_POINT_DISTANCE;
+    this.progressiveThreshold = options.progressiveSimplifyThreshold ?? DEFAULT_PROGRESSIVE_THRESHOLD;
+    this.nextSimplifyAt = this.progressiveThreshold;
   }
   onActivate(ctx) {
     ctx.setCursor?.("crosshair");
@@ -2789,22 +3386,53 @@ var PencilTool = class {
   onDeactivate(ctx) {
     ctx.setCursor?.("default");
   }
+  getOptions() {
+    return {
+      color: this.color,
+      width: this.width,
+      smoothing: this.smoothing,
+      minPointDistance: this.minPointDistance,
+      progressiveSimplifyThreshold: this.progressiveThreshold
+    };
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
   setOptions(options) {
     if (options.color !== void 0) this.color = options.color;
     if (options.width !== void 0) this.width = options.width;
     if (options.smoothing !== void 0) this.smoothing = options.smoothing;
+    if (options.minPointDistance !== void 0) this.minPointDistance = options.minPointDistance;
+    if (options.progressiveSimplifyThreshold !== void 0)
+      this.progressiveThreshold = options.progressiveSimplifyThreshold;
+    this.notifyOptionsChange();
   }
   onPointerDown(state, ctx) {
     this.drawing = true;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     const pressure = state.pressure === 0 ? DEFAULT_PRESSURE : state.pressure;
     this.points = [{ x: world.x, y: world.y, pressure }];
+    this.nextSimplifyAt = this.progressiveThreshold;
   }
   onPointerMove(state, ctx) {
     if (!this.drawing) return;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     const pressure = state.pressure === 0 ? DEFAULT_PRESSURE : state.pressure;
+    const last = this.points[this.points.length - 1];
+    if (last) {
+      const dx = world.x - last.x;
+      const dy = world.y - last.y;
+      if (dx * dx + dy * dy < this.minPointDistance * this.minPointDistance) return;
+    }
     this.points.push({ x: world.x, y: world.y, pressure });
+    if (this.points.length > this.nextSimplifyAt) {
+      const hotZone = this.points.slice(-PROGRESSIVE_HOT_ZONE);
+      const coldZone = this.points.slice(0, -PROGRESSIVE_HOT_ZONE);
+      const simplified = simplifyPoints(coldZone, this.smoothing * 2);
+      this.points = [...simplified, ...hotZone];
+      this.nextSimplifyAt = this.points.length + this.progressiveThreshold;
+    }
     ctx.requestRender();
   }
   onPointerUp(_state, ctx) {
@@ -2825,6 +3453,9 @@ var PencilTool = class {
     this.points = [];
     ctx.requestRender();
   }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
+  }
   renderOverlay(ctx) {
     if (!this.drawing || this.points.length < 2) return;
     ctx.save();
@@ -2861,6 +3492,9 @@ var EraserTool = class {
     this.radius = options.radius ?? DEFAULT_RADIUS;
     this.cursor = makeEraserCursor(this.radius);
   }
+  getOptions() {
+    return { radius: this.radius };
+  }
   onActivate(ctx) {
     ctx.setCursor?.(this.cursor);
   }
@@ -2880,13 +3514,20 @@ var EraserTool = class {
   }
   eraseAt(state, ctx) {
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    const strokes = ctx.store.getElementsByType("stroke");
+    const queryBounds = {
+      x: world.x - this.radius,
+      y: world.y - this.radius,
+      w: this.radius * 2,
+      h: this.radius * 2
+    };
+    const candidates = ctx.store.queryRect(queryBounds);
     let erased = false;
-    for (const stroke of strokes) {
-      if (ctx.isLayerVisible && !ctx.isLayerVisible(stroke.layerId)) continue;
-      if (ctx.isLayerLocked && ctx.isLayerLocked(stroke.layerId)) continue;
-      if (this.strokeIntersects(stroke, world)) {
-        ctx.store.remove(stroke.id);
+    for (const el of candidates) {
+      if (el.type !== "stroke") continue;
+      if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
+      if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
+      if (this.strokeIntersects(el, world)) {
+        ctx.store.remove(el.id);
         erased = true;
       }
     }
@@ -3263,7 +3904,7 @@ var SelectTool = class {
     for (const id of this._selectedIds) {
       const el = ctx.store.getById(id);
       if (!el || !("size" in el)) continue;
-      const bounds = this.getElementBounds(el);
+      const bounds = getElementBounds(el);
       if (!bounds) continue;
       const corners = this.getHandlePositions(bounds);
       for (const [handle, pos] of corners) {
@@ -3311,7 +3952,7 @@ var SelectTool = class {
         this.renderBindingHighlights(canvasCtx, el, zoom);
         continue;
       }
-      const bounds = this.getElementBounds(el);
+      const bounds = getElementBounds(el);
       if (!bounds) continue;
       const pad = SELECTION_PAD / zoom;
       canvasCtx.strokeRect(bounds.x - pad, bounds.y - pad, bounds.w + pad * 2, bounds.h + pad * 2);
@@ -3370,12 +4011,13 @@ var SelectTool = class {
     return { x, y, w, h };
   }
   findElementsInRect(marquee, ctx) {
+    const candidates = ctx.store.queryRect(marquee);
     const ids = [];
-    for (const el of ctx.store.getAll()) {
+    for (const el of candidates) {
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
       if (el.type === "grid") continue;
-      const bounds = this.getElementBounds(el);
+      const bounds = getElementBounds(el);
       if (bounds && this.rectsOverlap(marquee, bounds)) {
         ids.push(el.id);
       }
@@ -3385,30 +4027,10 @@ var SelectTool = class {
   rectsOverlap(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;
   }
-  getElementBounds(el) {
-    if ("size" in el) {
-      return { x: el.position.x, y: el.position.y, w: el.size.w, h: el.size.h };
-    }
-    if (el.type === "stroke" && el.points.length > 0) {
-      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-      for (const p of el.points) {
-        const px = p.x + el.position.x;
-        const py = p.y + el.position.y;
-        if (px < minX) minX = px;
-        if (py < minY) minY = py;
-        if (px > maxX) maxX = px;
-        if (py > maxY) maxY = py;
-      }
-      return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
-    }
-    if (el.type === "arrow") {
-      return getArrowBounds(el.from, el.to, el.bend);
-    }
-    return null;
-  }
   hitTest(world, ctx) {
-    const elements = ctx.store.getAll().reverse();
-    for (const el of elements) {
+    const r = 10;
+    const candidates = ctx.store.queryRect({ x: world.x - r, y: world.y - r, w: r * 2, h: r * 2 }).reverse();
+    for (const el of candidates) {
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
       if (el.type === "grid") continue;
@@ -3449,13 +4071,25 @@ var ArrowTool = class {
   fromBinding;
   fromTarget = null;
   toTarget = null;
+  optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.color = options.color ?? "#000000";
     this.width = options.width ?? 2;
   }
+  getOptions() {
+    return { color: this.color, width: this.width };
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
   setOptions(options) {
     if (options.color !== void 0) this.color = options.color;
     if (options.width !== void 0) this.width = options.width;
+    this.notifyOptionsChange();
+  }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
   }
   layerFilter(ctx) {
     const activeLayerId = ctx.activeLayerId;
@@ -3577,15 +4211,31 @@ var NoteTool = class {
   backgroundColor;
   textColor;
   size;
+  optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.backgroundColor = options.backgroundColor ?? "#ffeb3b";
     this.textColor = options.textColor ?? "#000000";
     this.size = options.size ?? { w: 200, h: 100 };
   }
+  getOptions() {
+    return {
+      backgroundColor: this.backgroundColor,
+      textColor: this.textColor,
+      size: { ...this.size }
+    };
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
   setOptions(options) {
     if (options.backgroundColor !== void 0) this.backgroundColor = options.backgroundColor;
     if (options.textColor !== void 0) this.textColor = options.textColor;
     if (options.size !== void 0) this.size = options.size;
+    this.notifyOptionsChange();
+  }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
   }
   onPointerDown(_state, _ctx) {
   }
@@ -3616,15 +4266,27 @@ var TextTool = class {
   fontSize;
   color;
   textAlign;
+  optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.fontSize = options.fontSize ?? 16;
     this.color = options.color ?? "#1a1a1a";
     this.textAlign = options.textAlign ?? "left";
   }
+  getOptions() {
+    return { fontSize: this.fontSize, color: this.color, textAlign: this.textAlign };
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
   setOptions(options) {
     if (options.fontSize !== void 0) this.fontSize = options.fontSize;
     if (options.color !== void 0) this.color = options.color;
     if (options.textAlign !== void 0) this.textAlign = options.textAlign;
+    this.notifyOptionsChange();
+  }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
   }
   onActivate(ctx) {
     ctx.setCursor?.("text");
@@ -3696,17 +4358,31 @@ var ShapeTool = class {
   strokeColor;
   strokeWidth;
   fillColor;
+  optionListeners = /* @__PURE__ */ new Set();
   constructor(options = {}) {
     this.shape = options.shape ?? "rectangle";
     this.strokeColor = options.strokeColor ?? "#000000";
     this.strokeWidth = options.strokeWidth ?? 2;
     this.fillColor = options.fillColor ?? "none";
   }
+  getOptions() {
+    return {
+      shape: this.shape,
+      strokeColor: this.strokeColor,
+      strokeWidth: this.strokeWidth,
+      fillColor: this.fillColor
+    };
+  }
+  onOptionsChange(listener) {
+    this.optionListeners.add(listener);
+    return () => this.optionListeners.delete(listener);
+  }
   setOptions(options) {
     if (options.shape !== void 0) this.shape = options.shape;
     if (options.strokeColor !== void 0) this.strokeColor = options.strokeColor;
     if (options.strokeWidth !== void 0) this.strokeWidth = options.strokeWidth;
     if (options.fillColor !== void 0) this.fillColor = options.fillColor;
+    this.notifyOptionsChange();
   }
   onActivate(_ctx) {
     if (typeof window !== "undefined") {
@@ -3793,6 +4469,9 @@ var ShapeTool = class {
     }
     return { position: { x, y }, size: { w, h } };
   }
+  notifyOptionsChange() {
+    for (const listener of this.optionListeners) listener();
+  }
   snap(point, ctx) {
     return ctx.snapToGrid && ctx.gridSize ? snapPoint(point, ctx.gridSize) : point;
   }
@@ -3845,7 +4524,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.5";
+var VERSION = "0.8.7";
 export {
   AddElementCommand,
   ArrowTool,
@@ -3867,6 +4546,7 @@ export {
   NoteEditor,
   NoteTool,
   PencilTool,
+  Quadtree,
   RemoveElementCommand,
   RemoveLayerCommand,
   SelectTool,
@@ -3877,6 +4557,7 @@ export {
   UpdateLayerCommand,
   VERSION,
   Viewport,
+  boundsIntersect,
   clearStaleBindings,
   createArrow,
   createGrid,