@fieldnotes/core 0.15.0 → 0.17.0

package/dist/index.cjs

@@ -920,9 +920,228 @@ function createId(prefix) {
   return `${prefix}_${Date.now().toString(36)}_${(counter++).toString(36)}`;
 }
 
+// src/canvas/keyboard-actions.ts
+var KeyboardActions = class {
+  constructor(deps) {
+    this.deps = deps;
+  }
+  clipboard = [];
+  pasteCount = 0;
+  nudgeTimer = null;
+  dispose() {
+    this.flushPendingNudge();
+  }
+  selectTool() {
+    const tm = this.deps.getToolManager();
+    const ctx = this.deps.getToolContext();
+    if (!tm || !ctx) return null;
+    const tool = tm.activeTool;
+    if (tool?.name !== "select") return null;
+    return { tool, ctx };
+  }
+  nudge(dx, dy, byCell) {
+    if (this.deps.isToolActive()) return false;
+    const sel = this.selectTool();
+    if (!sel) return false;
+    if (sel.tool.selectedIds.length === 0) return false;
+    const step = byCell ? sel.ctx.gridSize ?? 10 : 1;
+    if (this.nudgeTimer === null) {
+      this.deps.getHistoryRecorder()?.begin();
+    } else {
+      clearTimeout(this.nudgeTimer);
+    }
+    const moved = sel.tool.nudgeSelection(dx * step, dy * step, sel.ctx);
+    this.nudgeTimer = setTimeout(() => this.flushPendingNudge(), 400);
+    return moved;
+  }
+  flushPendingNudge() {
+    if (this.nudgeTimer === null) return;
+    clearTimeout(this.nudgeTimer);
+    this.nudgeTimer = null;
+    this.deps.getHistoryRecorder()?.commit();
+  }
+  deleteSelected() {
+    this.flushPendingNudge();
+    const sel = this.selectTool();
+    if (!sel) return;
+    const ids = sel.tool.selectedIds;
+    if (ids.length === 0) return;
+    const recorder = this.deps.getHistoryRecorder();
+    recorder?.begin();
+    for (const id of ids) {
+      sel.ctx.store.remove(id);
+    }
+    recorder?.commit();
+    sel.ctx.requestRender();
+  }
+  undo() {
+    this.flushPendingNudge();
+    const ctx = this.deps.getToolContext();
+    const stack = this.deps.getHistoryStack();
+    if (!stack || !ctx) return;
+    const recorder = this.deps.getHistoryRecorder();
+    recorder?.pause();
+    stack.undo(ctx.store);
+    recorder?.resume();
+    ctx.requestRender();
+  }
+  redo() {
+    this.flushPendingNudge();
+    const ctx = this.deps.getToolContext();
+    const stack = this.deps.getHistoryStack();
+    if (!stack || !ctx) return;
+    const recorder = this.deps.getHistoryRecorder();
+    recorder?.pause();
+    stack.redo(ctx.store);
+    recorder?.resume();
+    ctx.requestRender();
+  }
+  copy() {
+    if (this.deps.isToolActive()) return;
+    const sel = this.selectTool();
+    if (!sel) return;
+    const ids = sel.tool.selectedIds;
+    if (ids.length === 0) return;
+    this.clipboard = [];
+    for (const id of ids) {
+      const el = sel.ctx.store.getById(id);
+      if (el) this.clipboard.push(structuredClone(el));
+    }
+    this.pasteCount = 0;
+  }
+  paste() {
+    this.flushPendingNudge();
+    if (this.clipboard.length === 0 || this.deps.isToolActive()) return;
+    const sel = this.selectTool();
+    if (!sel) return;
+    this.pasteCount++;
+    this.insertClones(this.clipboard, this.pasteCount * 20, sel);
+  }
+  duplicate() {
+    this.flushPendingNudge();
+    if (this.deps.isToolActive()) return;
+    const sel = this.selectTool();
+    if (!sel) return;
+    const source = [];
+    for (const id of sel.tool.selectedIds) {
+      const el = sel.ctx.store.getById(id);
+      if (el) source.push(el);
+    }
+    if (source.length === 0) return;
+    this.insertClones(source, 20, sel);
+  }
+  deselect() {
+    if (this.deps.isToolActive()) return;
+    const sel = this.selectTool();
+    if (!sel) return;
+    if (sel.tool.selectedIds.length === 0) return;
+    sel.tool.setSelection([]);
+    sel.ctx.requestRender();
+  }
+  selectAll() {
+    if (this.deps.isToolActive()) return;
+    const tm = this.deps.getToolManager();
+    const ctx = this.deps.getToolContext();
+    if (!tm || !ctx) return;
+    if (tm.activeTool?.name !== "select") {
+      ctx.switchTool?.("select");
+    }
+    const sel = this.selectTool();
+    if (!sel) return;
+    const ids = sel.ctx.store.getAll().filter(
+      (el) => !el.locked && (sel.ctx.isLayerVisible?.(el.layerId) ?? true) && !(sel.ctx.isLayerLocked?.(el.layerId) ?? false)
+    ).map((el) => el.id);
+    sel.tool.setSelection(ids);
+    sel.ctx.requestRender();
+  }
+  zoomToFit() {
+    if (this.deps.isToolActive()) return;
+    this.deps.fitToContent?.();
+  }
+  zOrder(operation) {
+    this.flushPendingNudge();
+    const sel = this.selectTool();
+    if (!sel) return;
+    const ids = sel.tool.selectedIds;
+    if (ids.length === 0) return;
+    const recorder = this.deps.getHistoryRecorder();
+    recorder?.begin();
+    for (const id of ids) {
+      switch (operation) {
+        case "forward":
+          sel.ctx.store.bringForward(id);
+          break;
+        case "backward":
+          sel.ctx.store.sendBackward(id);
+          break;
+        case "front":
+          sel.ctx.store.bringToFront(id);
+          break;
+        case "back":
+          sel.ctx.store.sendToBack(id);
+          break;
+      }
+    }
+    recorder?.commit();
+    sel.ctx.requestRender();
+  }
+  insertClones(source, offset, sel) {
+    const idMap = /* @__PURE__ */ new Map();
+    for (const el of source) {
+      idMap.set(el.id, createId(el.type));
+    }
+    const newIds = [];
+    const recorder = this.deps.getHistoryRecorder();
+    recorder?.begin();
+    for (const el of source) {
+      const clone = structuredClone(el);
+      const newId = idMap.get(el.id);
+      if (!newId) continue;
+      clone.id = newId;
+      clone.position = { x: clone.position.x + offset, y: clone.position.y + offset };
+      if (clone.type === "arrow") {
+        const arrow = clone;
+        arrow.from = { x: arrow.from.x + offset, y: arrow.from.y + offset };
+        arrow.to = { x: arrow.to.x + offset, y: arrow.to.y + offset };
+        delete arrow.cachedControlPoint;
+        if (arrow.fromBinding) {
+          const newTarget = idMap.get(arrow.fromBinding.elementId);
+          if (newTarget) {
+            arrow.fromBinding = { elementId: newTarget };
+          } else {
+            delete arrow.fromBinding;
+          }
+        }
+        if (arrow.toBinding) {
+          const newTarget = idMap.get(arrow.toBinding.elementId);
+          if (newTarget) {
+            arrow.toBinding = { elementId: newTarget };
+          } else {
+            delete arrow.toBinding;
+          }
+        }
+      }
+      if (sel.ctx.activeLayerId) {
+        clone.layerId = sel.ctx.activeLayerId;
+      }
+      sel.ctx.store.add(clone);
+      newIds.push(clone.id);
+    }
+    recorder?.commit();
+    sel.tool.setSelection(newIds);
+    sel.ctx.requestRender();
+  }
+};
+
 // src/canvas/input-handler.ts
 var ZOOM_SENSITIVITY = 1e-3;
 var MIDDLE_BUTTON = 1;
+var NUDGE_KEYS = {
+  ArrowLeft: [-1, 0],
+  ArrowRight: [1, 0],
+  ArrowUp: [0, -1],
+  ArrowDown: [0, 1]
+};
 var InputHandler = class {
   constructor(element, camera, options = {}) {
     this.element = element;
@@ -931,6 +1150,14 @@ var InputHandler = class {
     this.toolContext = options.toolContext ?? null;
     this.historyRecorder = options.historyRecorder ?? null;
     this.historyStack = options.historyStack ?? null;
+    this.actions = new KeyboardActions({
+      getToolManager: () => this.toolManager,
+      getToolContext: () => this.toolContext,
+      getHistoryRecorder: () => this.historyRecorder,
+      getHistoryStack: () => this.historyStack,
+      isToolActive: () => this.isToolActive,
+      fitToContent: options.fitToContent
+    });
     this.element.style.touchAction = "none";
     this.bind();
   }
@@ -949,13 +1176,16 @@ var InputHandler = class {
   inputFilter = new InputFilter();
   deferredDown = null;
   abortController = new AbortController();
-  clipboard = [];
-  pasteCount = 0;
+  actions;
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
     this.toolContext = toolContext;
   }
+  flushPendingHistory() {
+    this.actions.flushPendingNudge();
+  }
   destroy() {
+    this.actions.dispose();
     this.abortController.abort();
     this.inputFilter.reset();
     this.deferredDown = null;
@@ -1061,36 +1291,61 @@ var InputHandler = class {
     }
   };
   onKeyDown = (e) => {
-    if (e.target?.isContentEditable) return;
+    const target = e.target;
+    if (target?.isContentEditable) return;
+    const tag = target?.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
     if (e.key === " ") {
       this.spaceHeld = true;
     }
     if (e.key === "Delete" || e.key === "Backspace") {
-      this.deleteSelected();
+      this.actions.deleteSelected();
+    }
+    if (e.key === "Escape") {
+      this.actions.deselect();
     }
     if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
       e.preventDefault();
-      this.handleUndo();
+      this.actions.undo();
     }
     if ((e.ctrlKey || e.metaKey) && (e.key === "y" || e.key === "z" && e.shiftKey)) {
       e.preventDefault();
-      this.handleRedo();
+      this.actions.redo();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "a") {
+      e.preventDefault();
+      this.actions.selectAll();
     }
     if ((e.ctrlKey || e.metaKey) && e.key === "c") {
       e.preventDefault();
-      this.handleCopy();
+      this.actions.copy();
     }
     if ((e.ctrlKey || e.metaKey) && e.key === "v") {
       e.preventDefault();
-      this.handlePaste();
+      this.actions.paste();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "d") {
+      e.preventDefault();
+      this.actions.duplicate();
     }
     if (e.key === "]") {
       e.preventDefault();
-      this.handleZOrder(e.ctrlKey || e.metaKey ? "front" : "forward");
+      this.actions.zOrder(e.ctrlKey || e.metaKey ? "front" : "forward");
     }
     if (e.key === "[") {
       e.preventDefault();
-      this.handleZOrder(e.ctrlKey || e.metaKey ? "back" : "backward");
+      this.actions.zOrder(e.ctrlKey || e.metaKey ? "back" : "backward");
+    }
+    if (e.shiftKey && e.code === "Digit1" && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      e.preventDefault();
+      this.actions.zoomToFit();
+    }
+    const nudgeDelta = NUDGE_KEYS[e.key];
+    if (nudgeDelta) {
+      const [dx, dy] = nudgeDelta;
+      if (this.actions.nudge(dx, dy, e.shiftKey)) {
+        e.preventDefault();
+      }
     }
   };
   onKeyUp = (e) => {
@@ -1154,6 +1409,7 @@ var InputHandler = class {
   }
   dispatchToolDown(e) {
     if (!this.toolManager || !this.toolContext) return;
+    this.actions.flushPendingNudge();
     this.historyRecorder?.begin();
     this.isToolActive = true;
     this.toolManager.handlePointerDown(this.toPointerState(e), this.toolContext);
@@ -1174,127 +1430,6 @@ var InputHandler = class {
     this.toolManager.handlePointerUp(this.toPointerState(e), this.toolContext);
     this.historyRecorder?.commit();
   }
-  deleteSelected() {
-    if (!this.toolManager || !this.toolContext) return;
-    const tool = this.toolManager.activeTool;
-    if (tool?.name !== "select") return;
-    const selectTool = tool;
-    const ids = selectTool.selectedIds;
-    if (ids.length === 0) return;
-    this.historyRecorder?.begin();
-    for (const id of ids) {
-      this.toolContext.store.remove(id);
-    }
-    this.historyRecorder?.commit();
-    this.toolContext.requestRender();
-  }
-  handleUndo() {
-    if (!this.historyStack || !this.toolContext) return;
-    this.historyRecorder?.pause();
-    this.historyStack.undo(this.toolContext.store);
-    this.historyRecorder?.resume();
-    this.toolContext.requestRender();
-  }
-  handleRedo() {
-    if (!this.historyStack || !this.toolContext) return;
-    this.historyRecorder?.pause();
-    this.historyStack.redo(this.toolContext.store);
-    this.historyRecorder?.resume();
-    this.toolContext.requestRender();
-  }
-  handleCopy() {
-    if (!this.toolManager || !this.toolContext || this.isToolActive) return;
-    const tool = this.toolManager.activeTool;
-    if (tool?.name !== "select") return;
-    const selectTool = tool;
-    const ids = selectTool.selectedIds;
-    if (ids.length === 0) return;
-    this.clipboard = [];
-    for (const id of ids) {
-      const el = this.toolContext.store.getById(id);
-      if (el) this.clipboard.push(structuredClone(el));
-    }
-    this.pasteCount = 0;
-  }
-  handlePaste() {
-    if (!this.toolManager || !this.toolContext || this.clipboard.length === 0 || this.isToolActive)
-      return;
-    const tool = this.toolManager.activeTool;
-    if (tool?.name !== "select") return;
-    const selectTool = tool;
-    this.pasteCount++;
-    const offset = this.pasteCount * 20;
-    const idMap = /* @__PURE__ */ new Map();
-    for (const el of this.clipboard) {
-      idMap.set(el.id, createId(el.type));
-    }
-    const newIds = [];
-    this.historyRecorder?.begin();
-    for (const el of this.clipboard) {
-      const clone = structuredClone(el);
-      const newId = idMap.get(el.id);
-      if (!newId) continue;
-      clone.id = newId;
-      clone.position = { x: clone.position.x + offset, y: clone.position.y + offset };
-      if (clone.type === "arrow") {
-        const arrow = clone;
-        arrow.from = { x: arrow.from.x + offset, y: arrow.from.y + offset };
-        arrow.to = { x: arrow.to.x + offset, y: arrow.to.y + offset };
-        delete arrow.cachedControlPoint;
-        if (arrow.fromBinding) {
-          const newTarget = idMap.get(arrow.fromBinding.elementId);
-          if (newTarget) {
-            arrow.fromBinding = { elementId: newTarget };
-          } else {
-            delete arrow.fromBinding;
-          }
-        }
-        if (arrow.toBinding) {
-          const newTarget = idMap.get(arrow.toBinding.elementId);
-          if (newTarget) {
-            arrow.toBinding = { elementId: newTarget };
-          } else {
-            delete arrow.toBinding;
-          }
-        }
-      }
-      if (this.toolContext.activeLayerId) {
-        clone.layerId = this.toolContext.activeLayerId;
-      }
-      this.toolContext.store.add(clone);
-      newIds.push(clone.id);
-    }
-    this.historyRecorder?.commit();
-    selectTool.setSelection(newIds);
-    this.toolContext.requestRender();
-  }
-  handleZOrder(operation) {
-    if (!this.toolManager || !this.toolContext) return;
-    const tool = this.toolManager.activeTool;
-    if (tool?.name !== "select") return;
-    const selectTool = tool;
-    const ids = selectTool.selectedIds;
-    if (ids.length === 0) return;
-    this.historyRecorder?.begin();
-    for (const id of ids) {
-      switch (operation) {
-        case "forward":
-          this.toolContext.store.bringForward(id);
-          break;
-        case "backward":
-          this.toolContext.store.sendBackward(id);
-          break;
-        case "front":
-          this.toolContext.store.bringToFront(id);
-          break;
-        case "back":
-          this.toolContext.store.sendToBack(id);
-          break;
-      }
-    }
-    this.historyRecorder?.commit();
-    this.toolContext.requestRender();
-  }
   cancelToolIfActive(e) {
     if (this.isToolActive) {
       this.dispatchToolUp(e);
@@ -3247,6 +3382,26 @@ var NoteEditor = class {
   }
 };
 
+// src/elements/bounds.ts
+function getElementsBoundingBox(elements) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let found = false;
+  for (const el of elements) {
+    const b = getElementBounds(el);
+    if (!b) continue;
+    found = true;
+    if (b.x < minX) minX = b.x;
+    if (b.y < minY) minY = b.y;
+    if (b.x + b.w > maxX) maxX = b.x + b.w;
+    if (b.y + b.h > maxY) maxY = b.y + b.h;
+  }
+  if (!found) return null;
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+
 // src/tools/tool-manager.ts
 var ToolManager = class {
   tools = /* @__PURE__ */ new Map();
@@ -3402,16 +3557,64 @@ var BatchCommand = class {
   }
 };
 
+// src/history/layer-commands.ts
+var CreateLayerCommand = class {
+  constructor(manager, layer) {
+    this.manager = manager;
+    this.layer = layer;
+  }
+  execute(_store) {
+    this.manager.addLayerDirect(this.layer);
+  }
+  undo(_store) {
+    this.manager.removeLayerDirect(this.layer.id);
+  }
+};
+var RemoveLayerCommand = class {
+  constructor(manager, layer) {
+    this.manager = manager;
+    this.layer = layer;
+  }
+  execute(_store) {
+    this.manager.removeLayerDirect(this.layer.id);
+  }
+  undo(_store) {
+    this.manager.addLayerDirect(this.layer);
+  }
+};
+var UpdateLayerCommand = class {
+  constructor(manager, layerId, previous, current) {
+    this.manager = manager;
+    this.layerId = layerId;
+    this.previous = previous;
+    this.current = current;
+  }
+  execute(_store) {
+    this.manager.updateLayerDirect(this.layerId, { ...this.current });
+  }
+  undo(_store) {
+    this.manager.updateLayerDirect(this.layerId, { ...this.previous });
+  }
+};
+
 // src/history/history-recorder.ts
 var HistoryRecorder = class {
-  constructor(store, stack) {
+  constructor(store, stack, layerManager) {
     this.store = store;
     this.stack = stack;
+    this.layerManager = layerManager;
     this.unsubscribers = [
       store.on("add", (el) => this.onAdd(el)),
       store.on("remove", (el) => this.onRemove(el)),
       store.on("update", ({ previous, current }) => this.onUpdate(previous, current))
     ];
+    if (layerManager) {
+      this.unsubscribers.push(
+        layerManager.on("create", (layer) => this.onLayerCreate(layer)),
+        layerManager.on("remove", (layer) => this.onLayerRemove(layer)),
+        layerManager.on("update", ({ previous, current }) => this.onLayerUpdate(previous, current))
+      );
+    }
   }
   recording = true;
   transaction = null;
@@ -3424,6 +3627,9 @@ var HistoryRecorder = class {
     this.recording = true;
   }
   begin() {
+    if (this.transaction !== null) {
+      this.commit();
+    }
     this.transaction = [];
     this.updateSnapshots.clear();
   }
@@ -3472,6 +3678,21 @@ var HistoryRecorder = class {
       this.stack.push(new UpdateElementCommand(current.id, previous, current));
     }
   }
+  onLayerCreate(layer) {
+    if (!this.recording) return;
+    if (!this.layerManager) return;
+    this.record(new CreateLayerCommand(this.layerManager, layer));
+  }
+  onLayerRemove(layer) {
+    if (!this.recording) return;
+    if (!this.layerManager) return;
+    this.record(new RemoveLayerCommand(this.layerManager, layer));
+  }
+  onLayerUpdate(previous, current) {
+    if (!this.recording) return;
+    if (!this.layerManager) return;
+    this.record(new UpdateLayerCommand(this.layerManager, current.id, previous, current));
+  }
   flushUpdateSnapshots() {
     const commands = [];
     for (const [id, previous] of this.updateSnapshots) {
@@ -3904,18 +4125,23 @@ var LayerManager = class {
   addLayerDirect(layer) {
     this.layers.set(layer.id, { ...layer });
     this.syncLayerOrder();
+    this.bus.emit("create", { ...layer });
     this.bus.emit("change", null);
   }
   removeLayerDirect(id) {
+    const layer = this.layers.get(id);
     this.layers.delete(id);
     this.syncLayerOrder();
+    if (layer) this.bus.emit("remove", { ...layer });
     this.bus.emit("change", null);
   }
   updateLayerDirect(id, props) {
     const layer = this.layers.get(id);
     if (!layer) return;
+    const previous = { ...layer };
     Object.assign(layer, props);
     if ("order" in props) this.syncLayerOrder();
+    this.bus.emit("update", { previous, current: { ...layer } });
     this.bus.emit("change", null);
   }
   syncLayerOrder() {
@@ -4008,6 +4234,20 @@ var DomNodeManager = class {
   storeHtmlContent(elementId, dom) {
     this.htmlContent.set(elementId, dom);
   }
+  hasContent(elementId) {
+    return this.htmlContent.has(elementId);
+  }
+  resetHtmlContent(elementId) {
+    this.htmlContent.delete(elementId);
+    this.lastSyncedVersion.delete(elementId);
+    this.lastSyncedZIndex.delete(elementId);
+    const node = this.domNodes.get(elementId);
+    if (!node) return;
+    while (node.firstChild) {
+      node.removeChild(node.firstChild);
+    }
+    delete node.dataset["initialized"];
+  }
   syncDomNode(element, zIndex = 0) {
     let node = this.domNodes.get(element.id);
     if (!node) {
@@ -4549,8 +4789,10 @@ var Viewport = class {
       toolbar: options.toolbar
     });
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
+    this.onHtmlElementMount = options.onHtmlElementMount;
+    this.dropHandler = options.onDrop;
     this.history = new HistoryStack();
-    this.historyRecorder = new HistoryRecorder(this.store, this.history);
+    this.historyRecorder = new HistoryRecorder(this.store, this.history, this.layerManager);
     this.wrapper = this.createWrapper();
     this.canvasEl = this.createCanvas();
     this.domLayer = this.createDomLayer();
@@ -4576,7 +4818,8 @@ var Viewport = class {
       toolManager: this.toolManager,
       toolContext: this.toolContext,
       historyRecorder: this.historyRecorder,
-      historyStack: this.history
+      historyStack: this.history,
+      fitToContent: () => this.fitToContent()
     });
     this.domNodeManager = new DomNodeManager({
       domLayer: this.domLayer,
@@ -4670,6 +4913,8 @@ var Viewport = class {
   renderLoop;
   domNodeManager;
   interactMode;
+  onHtmlElementMount;
+  dropHandler;
   gridChangeListeners = /* @__PURE__ */ new Set();
   doubleTapDetector = new DoubleTapDetector();
   tapDownX = 0;
@@ -4684,6 +4929,13 @@ var Viewport = class {
     this._snapToGrid = enabled;
     this.toolContext.snapToGrid = enabled;
   }
+  fitToContent(padding = 40) {
+    if (this.wrapper.clientWidth === 0 || this.wrapper.clientHeight === 0) return;
+    const visibleElements = this.store.getAll().filter((el) => this.layerManager.isLayerVisible(el.layerId));
+    const bbox = getElementsBoundingBox(visibleElements);
+    if (!bbox) return;
+    this.camera.fitToContent(bbox, this.wrapper.clientWidth, this.wrapper.clientHeight, padding);
+  }
   requestRender() {
     this.renderLoop.requestRender();
   }
@@ -4702,6 +4954,7 @@ var Viewport = class {
     return exportImage(this.store, options, this.layerManager);
   }
   loadState(state) {
+    this.inputHandler.flushPendingHistory();
     this.historyRecorder.pause();
     this.noteEditor.destroy(this.store);
     this.domNodeManager.clearDomNodes();
@@ -4713,6 +4966,22 @@ var Viewport = class {
       this.layerManager.setActiveLayer(state.activeLayerId);
     }
     this.domNodeManager.reattachHtmlContent(this.store);
+    if (this.onHtmlElementMount) {
+      for (const el of this.store.getElementsByType("html")) {
+        if (!this.domNodeManager.hasContent(el.id)) {
+          this.domNodeManager.syncDomNode(el);
+          const node = this.domNodeManager.getNode(el.id);
+          if (node) {
+            this.onHtmlElementMount(el.id, el.domId, node);
+            node.dataset["initialized"] = "true";
+            Object.assign(node.style, {
+              overflow: "hidden",
+              pointerEvents: el.interactive ? "auto" : "none"
+            });
+          }
+        }
+      }
+    }
     this.history.clear();
     this.historyRecorder.resume();
     this.camera.moveTo(state.camera.position.x, state.camera.position.y);
@@ -4722,6 +4991,7 @@ var Viewport = class {
     this.loadState(parseState(json));
   }
   undo() {
+    this.inputHandler.flushPendingHistory();
     this.historyRecorder.pause();
     const result = this.history.undo(this.store);
     this.historyRecorder.resume();
@@ -4729,6 +4999,7 @@ var Viewport = class {
     return result;
   }
   redo() {
+    this.inputHandler.flushPendingHistory();
     this.historyRecorder.pause();
     const result = this.history.redo(this.store);
     this.historyRecorder.resume();
@@ -4758,6 +5029,19 @@ var Viewport = class {
     this.requestRender();
     return el.id;
   }
+  removeLayer(id) {
+    this.historyRecorder.begin();
+    this.layerManager.removeLayer(id);
+    this.historyRecorder.commit();
+  }
+  updateHtmlElement(id, newContent) {
+    const el = this.store.getById(id);
+    if (!el) throw new Error(`Element not found: ${id}`);
+    if (el.type !== "html") throw new Error(`Element ${id} is not an HTML element`);
+    this.domNodeManager.resetHtmlContent(id);
+    this.domNodeManager.storeHtmlContent(id, newContent);
+    this.requestRender();
+  }
   addGrid(input) {
     const existing = this.store.getElementsByType("grid")[0];
     this.historyRecorder.begin();
@@ -4909,17 +5193,21 @@ var Viewport = class {
   };
   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;
-    const rect = this.wrapper.getBoundingClientRect();
     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;
-        const screenPos = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-        const worldPos = this.camera.screenToWorld(screenPos);
         this.addImage(src, worldPos);
       };
       reader.readAsDataURL(file);
@@ -5031,26 +5319,6 @@ var Viewport = class {
   }
 };
 
-// src/elements/bounds.ts
-function getElementsBoundingBox(elements) {
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  let found = false;
-  for (const el of elements) {
-    const b = getElementBounds(el);
-    if (!b) continue;
-    found = true;
-    if (b.x < minX) minX = b.x;
-    if (b.y < minY) minY = b.y;
-    if (b.x + b.w > maxX) maxX = b.x + b.w;
-    if (b.y + b.h > maxY) maxY = b.y + b.h;
-  }
-  if (!found) return null;
-  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
-}
-
 // src/tools/hand-tool.ts
 var HandTool = class {
   name = "hand";
@@ -5542,23 +5810,7 @@ var SelectTool = class {
           });
         }
       }
-      const movedNonArrowIds = /* @__PURE__ */ new Set();
-      for (const id of this._selectedIds) {
-        const el = ctx.store.getById(id);
-        if (el && el.type !== "arrow") movedNonArrowIds.add(id);
-      }
-      if (movedNonArrowIds.size > 0) {
-        const updatedArrows = /* @__PURE__ */ new Set();
-        for (const id of movedNonArrowIds) {
-          const boundArrows = findBoundArrows(id, ctx.store);
-          for (const ba of boundArrows) {
-            if (updatedArrows.has(ba.id)) continue;
-            updatedArrows.add(ba.id);
-            const updates = updateBoundArrow(ba, ctx.store);
-            if (updates) ctx.store.update(ba.id, updates);
-          }
-        }
-      }
+      this.updateArrowsBoundTo(this._selectedIds, ctx);
       ctx.requestRender();
       return;
     }
@@ -5609,6 +5861,49 @@ var SelectTool = class {
       }
     }
   }
+  updateArrowsBoundTo(ids, ctx) {
+    const movedNonArrowIds = /* @__PURE__ */ new Set();
+    for (const id of ids) {
+      const el = ctx.store.getById(id);
+      if (el && el.type !== "arrow") movedNonArrowIds.add(id);
+    }
+    if (movedNonArrowIds.size === 0) return;
+    const updatedArrows = /* @__PURE__ */ new Set();
+    for (const id of movedNonArrowIds) {
+      const boundArrows = findBoundArrows(id, ctx.store);
+      for (const ba of boundArrows) {
+        if (updatedArrows.has(ba.id)) continue;
+        updatedArrows.add(ba.id);
+        const updates = updateBoundArrow(ba, ctx.store);
+        if (updates) ctx.store.update(ba.id, updates);
+      }
+    }
+  }
+  nudgeSelection(dx, dy, ctx) {
+    let moved = false;
+    for (const id of this._selectedIds) {
+      const el = ctx.store.getById(id);
+      if (!el || el.locked) continue;
+      if (el.type === "arrow") {
+        if (el.fromBinding || el.toBinding) continue;
+        ctx.store.update(id, {
+          position: { x: el.position.x + dx, y: el.position.y + dy },
+          from: { x: el.from.x + dx, y: el.from.y + dy },
+          to: { x: el.to.x + dx, y: el.to.y + dy }
+        });
+      } else {
+        ctx.store.update(id, {
+          position: { x: el.position.x + dx, y: el.position.y + dy }
+        });
+      }
+      moved = true;
+    }
+    if (moved) {
+      this.updateArrowsBoundTo(this._selectedIds, ctx);
+      ctx.requestRender();
+    }
+    return moved;
+  }
   updateHoverCursor(world, ctx) {
     const arrowHit = hitTestArrowHandles(world, this._selectedIds, ctx);
     if (arrowHit) {
@@ -5686,11 +5981,7 @@ var SelectTool = class {
       position: { x, y },
       size: { w, h }
     });
-    const boundArrows = findBoundArrows(this.mode.elementId, ctx.store);
-    for (const ba of boundArrows) {
-      const updates = updateBoundArrow(ba, ctx.store);
-      if (updates) ctx.store.update(ba.id, updates);
-    }
+    this.updateArrowsBoundTo([this.mode.elementId], ctx);
     ctx.requestRender();
   }
   hitTestResizeHandle(world, ctx) {
@@ -6736,48 +7027,8 @@ var TemplateTool = class {
   }
 };
 
-// src/history/layer-commands.ts
-var CreateLayerCommand = class {
-  constructor(manager, layer) {
-    this.manager = manager;
-    this.layer = layer;
-  }
-  execute(_store) {
-    this.manager.addLayerDirect(this.layer);
-  }
-  undo(_store) {
-    this.manager.removeLayerDirect(this.layer.id);
-  }
-};
-var RemoveLayerCommand = class {
-  constructor(manager, layer) {
-    this.manager = manager;
-    this.layer = layer;
-  }
-  execute(_store) {
-    this.manager.removeLayerDirect(this.layer.id);
-  }
-  undo(_store) {
-    this.manager.addLayerDirect(this.layer);
-  }
-};
-var UpdateLayerCommand = class {
-  constructor(manager, layerId, previous, current) {
-    this.manager = manager;
-    this.layerId = layerId;
-    this.previous = previous;
-    this.current = current;
-  }
-  execute(_store) {
-    this.manager.updateLayerDirect(this.layerId, { ...this.current });
-  }
-  undo(_store) {
-    this.manager.updateLayerDirect(this.layerId, { ...this.previous });
-  }
-};
-
 // src/index.ts
-var VERSION = "0.15.0";
+var VERSION = "0.17.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,