@fieldnotes/core 0.38.1 → 0.38.3

package/dist/index.js

@@ -3974,17 +3974,43 @@ var ContextMenu = class {
   }
 };
 
-// src/elements/translate.ts
-function translateElementPatch(el, dx, dy) {
-  const position = { x: el.position.x + dx, y: el.position.y + dy };
-  if (el.type === "arrow") {
-    return {
-      position,
-      from: { x: el.from.x + dx, y: el.from.y + dy },
-      to: { x: el.to.x + dx, y: el.to.y + dy }
-    };
-  }
-  return { position };
+// src/canvas/viewport-dom.ts
+function createWrapper() {
+  const el = document.createElement("div");
+  Object.assign(el.style, {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    overscrollBehavior: "none",
+    userSelect: "none",
+    webkitUserSelect: "none"
+  });
+  return el;
+}
+function createCanvas() {
+  const el = document.createElement("canvas");
+  Object.assign(el.style, {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%"
+  });
+  return el;
+}
+function createDomLayer() {
+  const el = document.createElement("div");
+  Object.assign(el.style, {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    transformOrigin: "0 0"
+  });
+  return el;
 }
 
 // src/elements/arrow-label-editor.ts
@@ -5608,6 +5634,19 @@ var MarginViewport = class {
   }
 };
 
+// src/elements/translate.ts
+function translateElementPatch(el, dx, dy) {
+  const position = { x: el.position.x + dx, y: el.position.y + dy };
+  if (el.type === "arrow") {
+    return {
+      position,
+      from: { x: el.from.x + dx, y: el.from.y + dy },
+      to: { x: el.to.x + dx, y: el.to.y + dy }
+    };
+  }
+  return { position };
+}
+
 // src/elements/element-style.ts
 function styleToPatch(element, style) {
   const { color, fillColor, strokeWidth, opacity, fontSize } = style;
@@ -5695,7 +5734,7 @@ function getElementStyle(element) {
   }
 }
 
-// src/canvas/viewport.ts
+// src/canvas/selection-ops.ts
 function unionBounds(list) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const b of list) {
@@ -5706,221 +5745,627 @@ function unionBounds(list) {
   }
   return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
 }
-var EMPTY_IDS = [];
-var ARROW_HIT_THRESHOLD = 10;
-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;
-    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.renderLoop.markAllLayersDirty();
-      this.requestRender();
-    });
-    this.renderer.setOnImageError((src, cause) => {
-      const elementIds = [];
-      for (const el of this.store.getAll()) {
-        if (el.type === "image" && el.src === src) elementIds.push(el.id);
-      }
-      if (options.onImageError) {
-        options.onImageError({ src, elementIds, cause });
-      } else {
-        console.warn(`[fieldnotes] image failed to load: ${src}`);
+var SelectionOps = class {
+  constructor(deps) {
+    this.deps = deps;
+  }
+  getStyle() {
+    const ids = this.deps.getSelectedIds();
+    if (ids.length === 0) return null;
+    const styles = [];
+    for (const id of ids) {
+      const el = this.deps.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;
+  }
+  applyStyle(style) {
+    const ids = this.deps.getSelectedIds();
+    if (ids.length === 0) return;
+    this.deps.recorder.begin();
+    for (const id of ids) {
+      const el = this.deps.store.getById(id);
+      if (!el) continue;
+      const patch = styleToPatch(el, style);
+      if (Object.keys(patch).length > 0) {
+        this.deps.store.update(id, patch);
       }
-    });
-    this.noteEditor = new NoteEditor({
-      fontSizePresets: options.fontSizePresets,
-      toolbar: options.toolbar,
-      placeholder: options.placeholder
-    });
-    this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
-    this.arrowLabelEditor = new ArrowLabelEditor();
-    this.noteEditor.setHistoryHooks(
-      () => this.historyRecorder.begin(),
-      () => this.historyRecorder.commit()
-    );
-    this.onHtmlElementMount = options.onHtmlElementMount;
-    this.dropHandler = options.onDrop;
-    this.history = new HistoryStack();
-    this.historyRecorder = new HistoryRecorder(this.store, this.history, this.layerManager);
-    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),
-      fitNoteHeight: (id) => this.fitNoteHeight(id),
-      setCursor: (cursor) => {
-        this.wrapper.style.cursor = cursor;
-      },
-      snapToGrid: false,
-      gridSize: this._gridSize,
-      activeLayerId: this.layerManager.activeLayerId,
-      isLayerVisible: (id) => this.layerManager.isLayerVisible(id),
-      isLayerLocked: (id) => this.layerManager.isLayerLocked(id),
-      smartGuides: false,
-      getVisibleRect: () => this.camera.getVisibleRect(this.canvasEl.clientWidth, this.canvasEl.clientHeight)
-    };
-    this.inputHandler = new InputHandler(this.wrapper, this.camera, {
-      toolManager: this.toolManager,
-      toolContext: this.toolContext,
-      historyRecorder: this.historyRecorder,
-      historyStack: this.history,
-      fitToContent: () => this.fitToContent(),
-      group: () => this.groupSelection(),
-      ungroup: () => this.ungroupSelection(),
-      toggleLock: () => this.toggleLockSelection(),
-      openContextMenu: (screenPos, world) => {
-        this.getSelectTool()?.selectAtPoint(world, this.toolContext);
-        this.openContextMenu(screenPos);
-      },
-      shortcuts: options.shortcuts
-    });
-    if (options.contextMenu !== false) {
-      this.contextMenu = new ContextMenu({
-        onCommand: (action) => this.runAction(action),
-        onClose: noop
-      });
     }
-    this.unsubToolChange = this.toolManager.onChange(() => this.contextMenu?.close());
-    this.domNodeManager = new DomNodeManager({
-      domLayer: this.domLayer,
-      onEditRequest: (id) => this.startEditingElement(id),
-      isEditingElement: (id) => this.noteEditor.isEditing && this.noteEditor.editingElementId === id,
-      getVersion: (id) => this.store.getVersion(id)
-    });
-    this.interactMode = new InteractMode({
-      getNode: (id) => this.domNodeManager.getNode(id)
-    });
-    this.marginViewport = new MarginViewport(options.panBufferMargin ?? 256);
-    this.marginViewport.setViewport(
-      this.canvasEl.clientWidth || 800,
-      this.canvasEl.clientHeight || 600,
-      typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1
-    );
-    const layerCache = new LayerCache(this.marginViewport);
-    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,
-      marginViewport: this.marginViewport
-    });
-    this.unsubCamera = this.camera.onChange(() => {
-      this.applyCameraTransform();
-      this.noteEditor.updateToolbarPosition();
-      this.contextMenu?.close();
-      this.requestRender();
-    });
-    this.unsubStore = [
-      this.store.on("add", (el) => {
-        if (el.type === "grid") this.syncGridContext();
-        this.renderLoop.markLayerDirty(el.layerId);
-        this.requestRender();
-      }),
-      this.store.on("remove", (el) => {
-        if (el.type === "grid") this.syncGridContext();
-        this.unbindArrowsFrom(el);
-        this.domNodeManager.removeDomNode(el.id);
-        this.renderLoop.markLayerDirty(el.layerId);
-        this.requestRender();
-      }),
-      this.store.on("update", ({ previous, current }) => {
-        if (current.type === "grid") this.syncGridContext();
-        this.renderLoop.markLayerDirty(current.layerId);
-        if (previous.layerId !== current.layerId) {
-          this.renderLoop.markLayerDirty(previous.layerId);
-        }
-        this.requestRender();
-      }),
-      this.store.on("clear", () => {
-        this.domNodeManager.clearDomNodes();
-        this.renderLoop.markAllLayersDirty();
-        this.syncGridContext();
-        this.requestRender();
-      })
-    ];
-    this.layerManager.on("change", () => {
-      this.toolContext.activeLayerId = this.layerManager.activeLayerId;
-      this.requestRender();
-    });
-    this.wrapper.addEventListener("pointerdown", this.onTapDown);
-    this.wrapper.addEventListener("pointerup", this.onDoubleTap);
-    this.wrapper.addEventListener("dragover", this.onDragOver);
-    this.wrapper.addEventListener("drop", this.onDrop);
-    this.observeResize();
-    this.syncCanvasSize();
-    this.renderLoop.start();
-    this.syncGridContext();
+    this.deps.recorder.commit();
   }
-  camera;
-  store;
-  layerManager;
-  toolManager;
-  history;
-  domLayer;
-  canvasEl;
-  wrapper;
-  unsubCamera;
-  unsubToolChange;
-  unsubStore;
-  inputHandler;
-  background;
-  renderer;
-  noteEditor;
-  arrowLabelEditor;
-  historyRecorder;
-  toolContext;
-  marginViewport;
-  resizeObserver = null;
-  _snapToGrid = false;
-  _smartGuides = false;
-  _gridSize;
-  renderLoop;
-  domNodeManager;
-  interactMode;
-  onHtmlElementMount;
-  dropHandler;
-  gridChangeListeners = /* @__PURE__ */ new Set();
-  doubleTapDetector = new DoubleTapDetector();
-  tapDownX = 0;
-  tapDownY = 0;
-  contextMenu = null;
-  get ctx() {
-    return this.canvasEl.getContext("2d");
+  group() {
+    const ids = this.deps.getSelectedIds();
+    if (ids.length < 2) return;
+    const groupId = createId("group");
+    this.deps.recorder.begin();
+    for (const id of ids) {
+      if (this.deps.store.getById(id)) this.deps.store.update(id, { groupId });
+    }
+    this.deps.recorder.commit();
   }
-  get snapToGrid() {
-    return this._snapToGrid;
+  ungroup() {
+    const ids = this.deps.getSelectedIds();
+    if (ids.length === 0) return;
+    this.deps.recorder.begin();
+    for (const id of ids) {
+      const el = this.deps.store.getById(id);
+      if (el && el.groupId !== void 0) this.deps.store.update(id, { groupId: void 0 });
+    }
+    this.deps.recorder.commit();
   }
-  setSnapToGrid(enabled) {
-    this._snapToGrid = enabled;
-    this.toolContext.snapToGrid = enabled;
+  toggleLock() {
+    const ids = this.deps.getSelectedIds();
+    if (ids.length === 0) return;
+    const anyUnlocked = ids.some((id) => {
+      const el = this.deps.store.getById(id);
+      return el ? !el.locked : false;
+    });
+    this.deps.recorder.begin();
+    for (const id of ids) {
+      const el = this.deps.store.getById(id);
+      if (el && el.locked !== anyUnlocked) this.deps.store.update(id, { locked: anyUnlocked });
+    }
+    this.deps.recorder.commit();
+  }
+  align(edge) {
+    const bounded = this.boundedSelection();
+    if (bounded.length < 2) return;
+    const B = unionBounds(bounded.map((e) => e.bounds));
+    this.deps.recorder.begin();
+    const moved = [];
+    for (const { id, el, bounds: b } of bounded) {
+      if (!this.isMovable(el)) continue;
+      let dx = 0;
+      let dy = 0;
+      switch (edge) {
+        case "left":
+          dx = B.x - b.x;
+          break;
+        case "right":
+          dx = B.x + B.w - (b.x + b.w);
+          break;
+        case "center-x":
+          dx = B.x + B.w / 2 - (b.x + b.w / 2);
+          break;
+        case "top":
+          dy = B.y - b.y;
+          break;
+        case "bottom":
+          dy = B.y + B.h - (b.y + b.h);
+          break;
+        case "middle":
+          dy = B.y + B.h / 2 - (b.y + b.h / 2);
+          break;
+      }
+      if (dx === 0 && dy === 0) continue;
+      this.deps.store.update(id, translateElementPatch(el, dx, dy));
+      moved.push(id);
+    }
+    updateArrowsBoundToElements(moved, this.deps.store);
+    this.deps.recorder.commit();
+    this.deps.requestRender();
+  }
+  distribute(axis) {
+    const bounded = this.boundedSelection();
+    if (bounded.length < 3) return;
+    const center2 = (b) => axis === "horizontal" ? b.x + b.w / 2 : b.y + b.h / 2;
+    const sorted = [...bounded].sort((p, q) => center2(p.bounds) - center2(q.bounds));
+    const first = sorted[0];
+    const last = sorted[sorted.length - 1];
+    if (!first || !last) return;
+    const c0 = center2(first.bounds);
+    const cN = center2(last.bounds);
+    const n = sorted.length;
+    this.deps.recorder.begin();
+    const moved = [];
+    for (let i = 1; i < n - 1; i++) {
+      const item = sorted[i];
+      if (!item || !this.isMovable(item.el)) continue;
+      const target = c0 + i * (cN - c0) / (n - 1);
+      const delta = target - center2(item.bounds);
+      if (delta === 0) continue;
+      const [dx, dy] = axis === "horizontal" ? [delta, 0] : [0, delta];
+      this.deps.store.update(item.id, translateElementPatch(item.el, dx, dy));
+      moved.push(item.id);
+    }
+    updateArrowsBoundToElements(moved, this.deps.store);
+    this.deps.recorder.commit();
+    this.deps.requestRender();
+  }
+  boundedSelection() {
+    const out = [];
+    for (const id of this.deps.getSelectedIds()) {
+      const el = this.deps.store.getById(id);
+      if (!el) continue;
+      const bounds = getElementBounds(el);
+      if (bounds) out.push({ id, el, bounds });
+    }
+    return out;
+  }
+  isMovable(el) {
+    if (el.locked) return false;
+    if (el.type === "arrow" && (el.fromBinding ?? el.toBinding)) return false;
+    return true;
+  }
+};
+
+// src/canvas/grid-controller.ts
+var GridController = class {
+  constructor(deps) {
+    this.deps = deps;
+  }
+  listeners = /* @__PURE__ */ new Set();
+  add(input) {
+    const existing = this.deps.store.getElementsByType("grid")[0];
+    this.deps.recorder.begin();
+    if (existing) {
+      this.deps.store.remove(existing.id);
+    }
+    const grid = createGrid({ ...input, layerId: this.deps.getActiveLayerId() });
+    this.deps.store.add(grid);
+    this.deps.recorder.commit();
+    this.deps.requestRender();
+    return grid.id;
+  }
+  update(updates) {
+    const grid = this.deps.store.getElementsByType("grid")[0];
+    if (!grid) return;
+    this.deps.recorder.begin();
+    this.deps.store.update(grid.id, updates);
+    this.deps.recorder.commit();
+    this.deps.requestRender();
+  }
+  remove() {
+    const grid = this.deps.store.getElementsByType("grid")[0];
+    if (!grid) return;
+    this.deps.recorder.begin();
+    this.deps.store.remove(grid.id);
+    this.deps.recorder.commit();
+    this.deps.requestRender();
+  }
+  getInfo() {
+    const grid = this.deps.store.getElementsByType("grid")[0];
+    if (!grid) return null;
+    return {
+      gridType: grid.gridType,
+      hexOrientation: grid.hexOrientation,
+      cellSize: grid.cellSize,
+      cellRadius: grid.gridType === "hex" ? grid.cellSize : grid.cellSize / 2
+    };
+  }
+  onChange(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  syncContext() {
+    const grid = this.deps.store.getElementsByType("grid")[0];
+    if (grid) {
+      this.deps.toolContext.gridSize = grid.cellSize;
+      this.deps.toolContext.gridType = grid.gridType;
+      this.deps.toolContext.hexOrientation = grid.hexOrientation;
+    } else {
+      this.deps.toolContext.gridSize = this.deps.defaultGridSize;
+      this.deps.toolContext.gridType = void 0;
+      this.deps.toolContext.hexOrientation = void 0;
+    }
+    this.notify();
+  }
+  notify() {
+    const info = this.getInfo();
+    for (const listener of this.listeners) {
+      listener(info);
+    }
+  }
+};
+
+// src/canvas/viewport-interactions.ts
+var ARROW_HIT_THRESHOLD = 10;
+var ViewportInteractions = class {
+  constructor(deps) {
+    this.deps = deps;
+  }
+  doubleTapDetector = new DoubleTapDetector();
+  tapDownX = 0;
+  tapDownY = 0;
+  startEditingElement(id) {
+    const element = this.deps.store.getById(id);
+    if (!element || element.type !== "note" && element.type !== "text") return;
+    this.deps.renderLoop.flush();
+    const node = this.deps.domNodeManager.getNode(id);
+    if (node) {
+      this.deps.noteEditor.startEditing(node, id, this.deps.store);
+    }
+  }
+  fitNoteHeight(elementId) {
+    const element = this.deps.store.getById(elementId);
+    if (!element || element.type !== "note") return;
+    if (isNoteContentEmpty(element.text)) return;
+    const node = this.deps.domNodeManager.getNode(elementId);
+    if (!node) return;
+    const measured = node.scrollHeight;
+    if (measured > element.size.h) {
+      this.deps.store.update(elementId, { size: { w: element.size.w, h: measured } });
+    }
+  }
+  onTextEditStop(elementId) {
+    const element = this.deps.store.getById(elementId);
+    if (!element) return;
+    if (element.type === "note") {
+      if (isNoteContentEmpty(element.text)) {
+        this.deps.store.remove(elementId);
+        return;
+      }
+      this.fitNoteHeight(elementId);
+      return;
+    }
+    if (element.type !== "text") return;
+    if (!element.text || element.text.trim() === "") {
+      this.deps.store.remove(elementId);
+      return;
+    }
+    const node = this.deps.domNodeManager.getNode(elementId);
+    if (node && "size" in element) {
+      const measured = node.scrollHeight;
+      if (measured !== element.size.h) {
+        this.deps.store.update(elementId, { size: { w: element.size.w, h: measured } });
+      }
+    }
+  }
+  onTapDown = (e) => {
+    this.tapDownX = e.clientX;
+    this.tapDownY = e.clientY;
+  };
+  onDoubleTap = (e) => {
+    const dx = e.clientX - this.tapDownX;
+    const dy = e.clientY - this.tapDownY;
+    const moved = Math.sqrt(dx * dx + dy * dy);
+    if (moved > 10) return;
+    if (!this.doubleTapDetector.feed(e)) return;
+    if (typeof document.elementFromPoint !== "function") return;
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    const nodeEl = el?.closest("[data-element-id]");
+    if (nodeEl) {
+      const elementId = nodeEl.dataset["elementId"];
+      if (elementId) {
+        const element = this.deps.store.getById(elementId);
+        if (element?.type === "note" || element?.type === "text") {
+          this.startEditingElement(elementId);
+          return;
+        }
+      }
+    }
+    const rect = this.deps.wrapper.getBoundingClientRect();
+    const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    const world = this.deps.camera.screenToWorld(screen);
+    const hit = this.hitTestWorld(world);
+    if (hit?.type === "html") {
+      this.deps.interactMode.startInteracting(hit.id);
+      return;
+    }
+    const arrow = this.findArrowAt(world);
+    if (arrow) {
+      this.startArrowLabelEdit(arrow);
+    }
+  };
+  findArrowAt(world) {
+    const candidates = this.deps.store.queryPoint(world).reverse();
+    for (const el of candidates) {
+      if (el.type === "arrow" && isNearBezier(world, el.from, el.to, el.bend, ARROW_HIT_THRESHOLD)) {
+        return el;
+      }
+    }
+    return void 0;
+  }
+  startArrowLabelEdit(arrow) {
+    this.deps.arrowLabelEditor.startEditing({
+      arrow,
+      layer: this.deps.domLayer,
+      store: this.deps.store,
+      recorder: this.deps.recorder,
+      onDone: () => {
+        this.deps.renderer.setLabelEditingId(null);
+        this.deps.requestRender();
+      }
+    });
+    this.deps.renderer.setLabelEditingId(arrow.id);
+  }
+  hitTestWorld(world) {
+    const candidates = this.deps.store.queryPoint(world).reverse();
+    for (const el of candidates) {
+      if (!("size" in el)) continue;
+      const { x, y } = el.position;
+      const { w, h } = el.size;
+      if (world.x >= x && world.x <= x + w && world.y >= y && world.y <= y + h) {
+        return el;
+      }
+    }
+    return null;
+  }
+  onDragOver = (e) => {
+    e.preventDefault();
+  };
+  onDrop = (e) => {
+    e.preventDefault();
+    const rect = this.deps.wrapper.getBoundingClientRect();
+    const screenPos = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    const worldPos = this.deps.camera.screenToWorld(screenPos);
+    if (this.deps.dropHandler) {
+      this.deps.dropHandler(e, worldPos);
+      return;
+    }
+    const files = e.dataTransfer?.files;
+    if (!files) return;
+    for (const file of files) {
+      if (!file.type.startsWith("image/")) continue;
+      const reader = new FileReader();
+      reader.onload = () => {
+        const src = reader.result;
+        if (typeof src !== "string") return;
+        this.deps.addImage(src, worldPos);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+};
+
+// src/canvas/viewport.ts
+var EMPTY_IDS = [];
+function noop() {
+}
+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.renderLoop.markAllLayersDirty();
+      this.requestRender();
+    });
+    this.renderer.setOnImageError((src, cause) => {
+      const elementIds = [];
+      for (const el of this.store.getAll()) {
+        if (el.type === "image" && el.src === src) elementIds.push(el.id);
+      }
+      if (options.onImageError) {
+        options.onImageError({ src, elementIds, cause });
+      } else {
+        console.warn(`[fieldnotes] image failed to load: ${src}`);
+      }
+    });
+    this.noteEditor = new NoteEditor({
+      fontSizePresets: options.fontSizePresets,
+      toolbar: options.toolbar,
+      placeholder: options.placeholder
+    });
+    this.noteEditor.setOnStop((id) => this.interactions.onTextEditStop(id));
+    this.arrowLabelEditor = new ArrowLabelEditor();
+    this.noteEditor.setHistoryHooks(
+      () => this.historyRecorder.begin(),
+      () => this.historyRecorder.commit()
+    );
+    this.onHtmlElementMount = options.onHtmlElementMount;
+    this.dropHandler = options.onDrop;
+    this.history = new HistoryStack();
+    this.historyRecorder = new HistoryRecorder(this.store, this.history, this.layerManager);
+    this.selectionOps = new SelectionOps({
+      store: this.store,
+      recorder: this.historyRecorder,
+      getSelectedIds: () => this.getSelectedIds(),
+      requestRender: () => this.requestRender()
+    });
+    this.wrapper = createWrapper();
+    this.canvasEl = createCanvas();
+    this.domLayer = 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.interactions.startEditingElement(id),
+      fitNoteHeight: (id) => this.interactions.fitNoteHeight(id),
+      setCursor: (cursor) => {
+        this.wrapper.style.cursor = cursor;
+      },
+      snapToGrid: false,
+      gridSize: this._gridSize,
+      activeLayerId: this.layerManager.activeLayerId,
+      isLayerVisible: (id) => this.layerManager.isLayerVisible(id),
+      isLayerLocked: (id) => this.layerManager.isLayerLocked(id),
+      smartGuides: false,
+      getVisibleRect: () => this.camera.getVisibleRect(this.canvasEl.clientWidth, this.canvasEl.clientHeight)
+    };
+    this.inputHandler = new InputHandler(this.wrapper, this.camera, {
+      toolManager: this.toolManager,
+      toolContext: this.toolContext,
+      historyRecorder: this.historyRecorder,
+      historyStack: this.history,
+      fitToContent: () => this.fitToContent(),
+      group: () => this.groupSelection(),
+      ungroup: () => this.ungroupSelection(),
+      toggleLock: () => this.toggleLockSelection(),
+      openContextMenu: (screenPos, world) => {
+        this.getSelectTool()?.selectAtPoint(world, this.toolContext);
+        this.openContextMenu(screenPos);
+      },
+      shortcuts: options.shortcuts
+    });
+    if (options.contextMenu !== false) {
+      this.contextMenu = new ContextMenu({
+        onCommand: (action) => this.runAction(action),
+        onClose: noop
+      });
+    }
+    this.unsubToolChange = this.toolManager.onChange(() => this.contextMenu?.close());
+    this.domNodeManager = new DomNodeManager({
+      domLayer: this.domLayer,
+      onEditRequest: (id) => this.interactions.startEditingElement(id),
+      isEditingElement: (id) => this.noteEditor.isEditing && this.noteEditor.editingElementId === id,
+      getVersion: (id) => this.store.getVersion(id)
+    });
+    this.interactMode = new InteractMode({
+      getNode: (id) => this.domNodeManager.getNode(id)
+    });
+    this.marginViewport = new MarginViewport(options.panBufferMargin ?? 256);
+    this.marginViewport.setViewport(
+      this.canvasEl.clientWidth || 800,
+      this.canvasEl.clientHeight || 600,
+      typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1
+    );
+    const layerCache = new LayerCache(this.marginViewport);
+    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,
+      marginViewport: this.marginViewport
+    });
+    this.unsubCamera = this.camera.onChange(() => {
+      this.applyCameraTransform();
+      this.noteEditor.updateToolbarPosition();
+      this.contextMenu?.close();
+      this.requestRender();
+    });
+    this.gridController = new GridController({
+      store: this.store,
+      recorder: this.historyRecorder,
+      requestRender: () => this.requestRender(),
+      getActiveLayerId: () => this.layerManager.activeLayerId,
+      toolContext: this.toolContext,
+      defaultGridSize: this._gridSize
+    });
+    this.unsubStore = [
+      this.store.on("add", (el) => {
+        if (el.type === "grid") this.gridController.syncContext();
+        this.renderLoop.markLayerDirty(el.layerId);
+        this.requestRender();
+      }),
+      this.store.on("remove", (el) => {
+        if (el.type === "grid") this.gridController.syncContext();
+        this.unbindArrowsFrom(el);
+        this.domNodeManager.removeDomNode(el.id);
+        this.renderLoop.markLayerDirty(el.layerId);
+        this.requestRender();
+      }),
+      this.store.on("update", ({ previous, current }) => {
+        if (current.type === "grid") this.gridController.syncContext();
+        this.renderLoop.markLayerDirty(current.layerId);
+        if (previous.layerId !== current.layerId) {
+          this.renderLoop.markLayerDirty(previous.layerId);
+        }
+        this.requestRender();
+      }),
+      this.store.on("clear", () => {
+        this.domNodeManager.clearDomNodes();
+        this.renderLoop.markAllLayersDirty();
+        this.gridController.syncContext();
+        this.requestRender();
+      })
+    ];
+    this.layerManager.on("change", () => {
+      this.toolContext.activeLayerId = this.layerManager.activeLayerId;
+      this.requestRender();
+    });
+    this.interactions = new ViewportInteractions({
+      store: this.store,
+      camera: this.camera,
+      wrapper: this.wrapper,
+      domLayer: this.domLayer,
+      renderLoop: this.renderLoop,
+      domNodeManager: this.domNodeManager,
+      noteEditor: this.noteEditor,
+      arrowLabelEditor: this.arrowLabelEditor,
+      interactMode: this.interactMode,
+      renderer: this.renderer,
+      recorder: this.historyRecorder,
+      requestRender: () => this.requestRender(),
+      addImage: (src, position) => this.addImage(src, position),
+      dropHandler: this.dropHandler
+    });
+    this.wrapper.addEventListener("pointerdown", this.interactions.onTapDown);
+    this.wrapper.addEventListener("pointerup", this.interactions.onDoubleTap);
+    this.wrapper.addEventListener("dragover", this.interactions.onDragOver);
+    this.wrapper.addEventListener("drop", this.interactions.onDrop);
+    this.observeResize();
+    this.syncCanvasSize();
+    this.renderLoop.start();
+    this.gridController.syncContext();
+  }
+  camera;
+  store;
+  layerManager;
+  toolManager;
+  history;
+  domLayer;
+  canvasEl;
+  wrapper;
+  unsubCamera;
+  unsubToolChange;
+  unsubStore;
+  inputHandler;
+  background;
+  renderer;
+  noteEditor;
+  arrowLabelEditor;
+  historyRecorder;
+  selectionOps;
+  toolContext;
+  marginViewport;
+  resizeObserver = null;
+  _snapToGrid = false;
+  _smartGuides = false;
+  _gridSize;
+  renderLoop;
+  domNodeManager;
+  interactMode;
+  onHtmlElementMount;
+  dropHandler;
+  gridController;
+  interactions;
+  contextMenu = null;
+  get ctx() {
+    return this.canvasEl.getContext("2d");
+  }
+  get snapToGrid() {
+    return this._snapToGrid;
+  }
+  setSnapToGrid(enabled) {
+    this._snapToGrid = enabled;
+    this.toolContext.snapToGrid = enabled;
   }
   get smartGuides() {
     return this._smartGuides;
@@ -6079,48 +6524,19 @@ var Viewport = class {
     this.requestRender();
   }
   addGrid(input) {
-    const existing = this.store.getElementsByType("grid")[0];
-    this.historyRecorder.begin();
-    if (existing) {
-      this.store.remove(existing.id);
-    }
-    const grid = createGrid({ ...input, layerId: this.layerManager.activeLayerId });
-    this.store.add(grid);
-    this.historyRecorder.commit();
-    this.requestRender();
-    return grid.id;
+    return this.gridController.add(input);
   }
   updateGrid(updates) {
-    const grid = this.store.getElementsByType("grid")[0];
-    if (!grid) return;
-    this.historyRecorder.begin();
-    this.store.update(grid.id, updates);
-    this.historyRecorder.commit();
-    this.requestRender();
+    this.gridController.update(updates);
   }
   removeGrid() {
-    const grid = this.store.getElementsByType("grid")[0];
-    if (!grid) return;
-    this.historyRecorder.begin();
-    this.store.remove(grid.id);
-    this.historyRecorder.commit();
-    this.requestRender();
+    this.gridController.remove();
   }
   getGridInfo() {
-    const grid = this.store.getElementsByType("grid")[0];
-    if (!grid) return null;
-    return {
-      gridType: grid.gridType,
-      hexOrientation: grid.hexOrientation,
-      cellSize: grid.cellSize,
-      cellRadius: grid.gridType === "hex" ? grid.cellSize : grid.cellSize / 2
-    };
+    return this.gridController.getInfo();
   }
-  onGridChange(listener) {
-    this.gridChangeListeners.add(listener);
-    return () => {
-      this.gridChangeListeners.delete(listener);
-    };
+  onGridChange(listener) {
+    return this.gridController.onChange(listener);
   }
   getSelectTool() {
     return this.toolManager.getTool("select");
@@ -6161,154 +6577,25 @@ var Viewport = class {
     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;
+    return this.selectionOps.getStyle();
   }
   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();
+    this.selectionOps.applyStyle(style);
   }
   groupSelection() {
-    const ids = this.getSelectedIds();
-    if (ids.length < 2) return;
-    const groupId = createId("group");
-    this.historyRecorder.begin();
-    for (const id of ids) {
-      if (this.store.getById(id)) this.store.update(id, { groupId });
-    }
-    this.historyRecorder.commit();
+    this.selectionOps.group();
   }
   ungroupSelection() {
-    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 && el.groupId !== void 0) this.store.update(id, { groupId: void 0 });
-    }
-    this.historyRecorder.commit();
+    this.selectionOps.ungroup();
   }
   toggleLockSelection() {
-    const ids = this.getSelectedIds();
-    if (ids.length === 0) return;
-    const anyUnlocked = ids.some((id) => {
-      const el = this.store.getById(id);
-      return el ? !el.locked : false;
-    });
-    this.historyRecorder.begin();
-    for (const id of ids) {
-      const el = this.store.getById(id);
-      if (el && el.locked !== anyUnlocked) this.store.update(id, { locked: anyUnlocked });
-    }
-    this.historyRecorder.commit();
+    this.selectionOps.toggleLock();
   }
   alignSelection(edge) {
-    const bounded = this.boundedSelection();
-    if (bounded.length < 2) return;
-    const B = unionBounds(bounded.map((e) => e.bounds));
-    this.historyRecorder.begin();
-    const moved = [];
-    for (const { id, el, bounds: b } of bounded) {
-      if (!this.isMovable(el)) continue;
-      let dx = 0;
-      let dy = 0;
-      switch (edge) {
-        case "left":
-          dx = B.x - b.x;
-          break;
-        case "right":
-          dx = B.x + B.w - (b.x + b.w);
-          break;
-        case "center-x":
-          dx = B.x + B.w / 2 - (b.x + b.w / 2);
-          break;
-        case "top":
-          dy = B.y - b.y;
-          break;
-        case "bottom":
-          dy = B.y + B.h - (b.y + b.h);
-          break;
-        case "middle":
-          dy = B.y + B.h / 2 - (b.y + b.h / 2);
-          break;
-      }
-      if (dx === 0 && dy === 0) continue;
-      this.store.update(id, translateElementPatch(el, dx, dy));
-      moved.push(id);
-    }
-    updateArrowsBoundToElements(moved, this.store);
-    this.historyRecorder.commit();
-    this.requestRender();
+    this.selectionOps.align(edge);
   }
   distributeSelection(axis) {
-    const bounded = this.boundedSelection();
-    if (bounded.length < 3) return;
-    const center2 = (b) => axis === "horizontal" ? b.x + b.w / 2 : b.y + b.h / 2;
-    const sorted = [...bounded].sort((p, q) => center2(p.bounds) - center2(q.bounds));
-    const first = sorted[0];
-    const last = sorted[sorted.length - 1];
-    if (!first || !last) return;
-    const c0 = center2(first.bounds);
-    const cN = center2(last.bounds);
-    const n = sorted.length;
-    this.historyRecorder.begin();
-    const moved = [];
-    for (let i = 1; i < n - 1; i++) {
-      const item = sorted[i];
-      if (!item || !this.isMovable(item.el)) continue;
-      const target = c0 + i * (cN - c0) / (n - 1);
-      const delta = target - center2(item.bounds);
-      if (delta === 0) continue;
-      const [dx, dy] = axis === "horizontal" ? [delta, 0] : [0, delta];
-      this.store.update(item.id, translateElementPatch(item.el, dx, dy));
-      moved.push(item.id);
-    }
-    updateArrowsBoundToElements(moved, this.store);
-    this.historyRecorder.commit();
-    this.requestRender();
-  }
-  boundedSelection() {
-    const out = [];
-    for (const id of this.getSelectedIds()) {
-      const el = this.store.getById(id);
-      if (!el) continue;
-      const bounds = getElementBounds(el);
-      if (bounds) out.push({ id, el, bounds });
-    }
-    return out;
-  }
-  isMovable(el) {
-    if (el.locked) return false;
-    if (el.type === "arrow" && (el.fromBinding ?? el.toBinding)) return false;
-    return true;
+    this.selectionOps.distribute(axis);
   }
   getRenderStats() {
     return this.renderLoop.getStats();
@@ -6329,10 +6616,10 @@ var Viewport = class {
     this.arrowLabelEditor.cancel();
     this.historyRecorder.destroy();
     this.contextMenu?.dispose();
-    this.wrapper.removeEventListener("pointerdown", this.onTapDown);
-    this.wrapper.removeEventListener("pointerup", this.onDoubleTap);
-    this.wrapper.removeEventListener("dragover", this.onDragOver);
-    this.wrapper.removeEventListener("drop", this.onDrop);
+    this.wrapper.removeEventListener("pointerdown", this.interactions.onTapDown);
+    this.wrapper.removeEventListener("pointerup", this.interactions.onDoubleTap);
+    this.wrapper.removeEventListener("dragover", this.interactions.onDragOver);
+    this.wrapper.removeEventListener("drop", this.interactions.onDrop);
     this.inputHandler.destroy();
     this.unsubCamera();
     this.unsubToolChange();
@@ -6341,148 +6628,9 @@ var Viewport = class {
     this.resizeObserver = null;
     this.wrapper.remove();
   }
-  startEditingElement(id) {
-    const element = this.store.getById(id);
-    if (!element || element.type !== "note" && element.type !== "text") return;
-    this.renderLoop.flush();
-    const node = this.domNodeManager.getNode(id);
-    if (node) {
-      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.store.remove(elementId);
-        return;
-      }
-      this.fitNoteHeight(elementId);
-      return;
-    }
-    if (element.type !== "text") return;
-    if (!element.text || element.text.trim() === "") {
-      this.store.remove(elementId);
-      return;
-    }
-    const node = this.domNodeManager.getNode(elementId);
-    if (node && "size" in element) {
-      const measured = node.scrollHeight;
-      if (measured !== element.size.h) {
-        this.store.update(elementId, { size: { w: element.size.w, h: measured } });
-      }
-    }
-  }
-  onTapDown = (e) => {
-    this.tapDownX = e.clientX;
-    this.tapDownY = e.clientY;
-  };
-  onDoubleTap = (e) => {
-    const dx = e.clientX - this.tapDownX;
-    const dy = e.clientY - this.tapDownY;
-    const moved = Math.sqrt(dx * dx + dy * dy);
-    if (moved > 10) return;
-    if (!this.doubleTapDetector.feed(e)) return;
-    if (typeof document.elementFromPoint !== "function") return;
-    const el = document.elementFromPoint(e.clientX, e.clientY);
-    const nodeEl = el?.closest("[data-element-id]");
-    if (nodeEl) {
-      const elementId = nodeEl.dataset["elementId"];
-      if (elementId) {
-        const element = this.store.getById(elementId);
-        if (element?.type === "note" || element?.type === "text") {
-          this.startEditingElement(elementId);
-          return;
-        }
-      }
-    }
-    const rect = this.wrapper.getBoundingClientRect();
-    const screen = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-    const world = this.camera.screenToWorld(screen);
-    const hit = this.hitTestWorld(world);
-    if (hit?.type === "html") {
-      this.interactMode.startInteracting(hit.id);
-      return;
-    }
-    const arrow = this.findArrowAt(world);
-    if (arrow) {
-      this.startArrowLabelEdit(arrow);
-    }
-  };
-  findArrowAt(world) {
-    const candidates = this.store.queryPoint(world).reverse();
-    for (const el of candidates) {
-      if (el.type === "arrow" && isNearBezier(world, el.from, el.to, el.bend, ARROW_HIT_THRESHOLD)) {
-        return el;
-      }
-    }
-    return void 0;
-  }
-  startArrowLabelEdit(arrow) {
-    this.arrowLabelEditor.startEditing({
-      arrow,
-      layer: this.domLayer,
-      store: this.store,
-      recorder: this.historyRecorder,
-      onDone: () => {
-        this.renderer.setLabelEditingId(null);
-        this.requestRender();
-      }
-    });
-    this.renderer.setLabelEditingId(arrow.id);
-  }
-  hitTestWorld(world) {
-    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;
-      if (world.x >= x && world.x <= x + w && world.y >= y && world.y <= y + h) {
-        return el;
-      }
-    }
-    return null;
-  }
   stopInteracting() {
     this.interactMode.stopInteracting();
   }
-  onDragOver = (e) => {
-    e.preventDefault();
-  };
-  onDrop = (e) => {
-    e.preventDefault();
-    const rect = this.wrapper.getBoundingClientRect();
-    const screenPos = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-    const worldPos = this.camera.screenToWorld(screenPos);
-    if (this.dropHandler) {
-      this.dropHandler(e, worldPos);
-      return;
-    }
-    const files = e.dataTransfer?.files;
-    if (!files) return;
-    for (const file of files) {
-      if (!file.type.startsWith("image/")) continue;
-      const reader = new FileReader();
-      reader.onload = () => {
-        const src = reader.result;
-        if (typeof src !== "string") return;
-        this.addImage(src, worldPos);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
   unbindArrowsFrom(removedElement) {
     const boundArrows = findBoundArrows(removedElement.id, this.store);
     const bounds = getElementBounds(removedElement);
@@ -6517,43 +6665,6 @@ var Viewport = class {
       }
     }
   }
-  createWrapper() {
-    const el = document.createElement("div");
-    Object.assign(el.style, {
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      overscrollBehavior: "none",
-      userSelect: "none",
-      webkitUserSelect: "none"
-    });
-    return el;
-  }
-  createCanvas() {
-    const el = document.createElement("canvas");
-    Object.assign(el.style, {
-      position: "absolute",
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%"
-    });
-    return el;
-  }
-  createDomLayer() {
-    const el = document.createElement("div");
-    Object.assign(el.style, {
-      position: "absolute",
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
-      pointerEvents: "none",
-      transformOrigin: "0 0"
-    });
-    return el;
-  }
   applyCameraTransform() {
     this.domLayer.style.transform = this.camera.toCSSTransform();
   }
@@ -6563,25 +6674,6 @@ var Viewport = class {
     this.renderLoop.setCanvasSize(rect.width * dpr, rect.height * dpr);
     this.requestRender();
   }
-  syncGridContext() {
-    const grid = this.store.getElementsByType("grid")[0];
-    if (grid) {
-      this.toolContext.gridSize = grid.cellSize;
-      this.toolContext.gridType = grid.gridType;
-      this.toolContext.hexOrientation = grid.hexOrientation;
-    } else {
-      this.toolContext.gridSize = this._gridSize;
-      this.toolContext.gridType = void 0;
-      this.toolContext.hexOrientation = void 0;
-    }
-    this.notifyGridChangeListeners();
-  }
-  notifyGridChangeListeners() {
-    const info = this.getGridInfo();
-    for (const listener of this.gridChangeListeners) {
-      listener(info);
-    }
-  }
   observeResize() {
     if (typeof ResizeObserver === "undefined") return;
     this.resizeObserver = new ResizeObserver(() => this.syncCanvasSize());
@@ -8895,7 +8987,7 @@ var TemplateTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.38.0";
+var VERSION = "0.38.3";
 export {
   ArrowTool,
   AutoSave,