@fieldnotes/core 0.14.0 → 0.16.0

package/dist/index.cjs

@@ -1084,6 +1084,14 @@ var InputHandler = class {
       e.preventDefault();
       this.handlePaste();
     }
+    if (e.key === "]") {
+      e.preventDefault();
+      this.handleZOrder(e.ctrlKey || e.metaKey ? "front" : "forward");
+    }
+    if (e.key === "[") {
+      e.preventDefault();
+      this.handleZOrder(e.ctrlKey || e.metaKey ? "back" : "backward");
+    }
   };
   onKeyUp = (e) => {
     if (e.key === " ") {
@@ -1260,6 +1268,33 @@ var InputHandler = class {
     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);
@@ -1556,9 +1591,13 @@ var ElementStore = class {
   layerOrderMap = /* @__PURE__ */ new Map();
   spatialIndex = new Quadtree({ x: -1e5, y: -1e5, w: 2e5, h: 2e5 });
   sortedCache = null;
+  _versions = /* @__PURE__ */ new Map();
   get count() {
     return this.elements.size;
   }
+  getVersion(id) {
+    return this._versions.get(id) ?? -1;
+  }
   setLayerOrder(order) {
     this.layerOrderMap = new Map(order);
     this.sortedCache = null;
@@ -1583,6 +1622,7 @@ var ElementStore = class {
   }
   add(element) {
     this.sortedCache = null;
+    this._versions.set(element.id, 0);
     this.elements.set(element.id, element);
     const bounds = getElementBounds(element);
     if (bounds) this.spatialIndex.insert(element.id, bounds);
@@ -1592,6 +1632,7 @@ var ElementStore = class {
     const existing = this.elements.get(id);
     if (!existing) return;
     this.sortedCache = null;
+    this._versions.set(id, (this._versions.get(id) ?? 0) + 1);
     const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
     if (updated.type === "arrow") {
       const arrow = updated;
@@ -1611,12 +1652,14 @@ var ElementStore = class {
     const element = this.elements.get(id);
     if (!element) return;
     this.sortedCache = null;
+    this._versions.delete(id);
     this.elements.delete(id);
     this.spatialIndex.remove(id);
     this.bus.emit("remove", element);
   }
   clear() {
     this.sortedCache = null;
+    this._versions.clear();
     this.elements.clear();
     this.spatialIndex.clear();
     this.bus.emit("clear", null);
@@ -1626,10 +1669,12 @@ var ElementStore = class {
   }
   loadSnapshot(elements) {
     this.sortedCache = null;
+    this._versions.clear();
     this.elements.clear();
     this.spatialIndex.clear();
     for (const el of elements) {
       this.elements.set(el.id, el);
+      this._versions.set(el.id, 0);
       const bounds = getElementBounds(el);
       if (bounds) this.spatialIndex.insert(el.id, bounds);
     }
@@ -1638,6 +1683,54 @@ var ElementStore = class {
       this.bus.emit("add", el);
     }
   }
+  bringToFront(id) {
+    const el = this.elements.get(id);
+    if (!el) return;
+    const siblings = [...this.elements.values()].filter(
+      (e) => e.layerId === el.layerId && e.id !== id
+    );
+    if (siblings.length === 0) return;
+    const maxZ = Math.max(...siblings.map((e) => e.zIndex));
+    if (el.zIndex >= maxZ) return;
+    this.update(id, { zIndex: maxZ + 1 });
+  }
+  sendToBack(id) {
+    const el = this.elements.get(id);
+    if (!el) return;
+    const siblings = [...this.elements.values()].filter(
+      (e) => e.layerId === el.layerId && e.id !== id
+    );
+    if (siblings.length === 0) return;
+    const minZ = Math.min(...siblings.map((e) => e.zIndex));
+    if (el.zIndex <= minZ) return;
+    this.update(id, { zIndex: minZ - 1 });
+  }
+  bringForward(id) {
+    const el = this.elements.get(id);
+    if (!el) return;
+    const sorted = [...this.elements.values()].filter((e) => e.layerId === el.layerId).sort((a, b) => a.zIndex - b.zIndex);
+    const idx = sorted.findIndex((e) => e.id === id);
+    if (idx < 0 || idx >= sorted.length - 1) return;
+    const next = sorted[idx + 1];
+    if (!next) return;
+    const myZ = el.zIndex;
+    const nextZ = next.zIndex;
+    this.update(id, { zIndex: nextZ });
+    this.update(next.id, { zIndex: myZ });
+  }
+  sendBackward(id) {
+    const el = this.elements.get(id);
+    if (!el) return;
+    const sorted = [...this.elements.values()].filter((e) => e.layerId === el.layerId).sort((a, b) => a.zIndex - b.zIndex);
+    const idx = sorted.findIndex((e) => e.id === id);
+    if (idx <= 0) return;
+    const prev = sorted[idx - 1];
+    if (!prev) return;
+    const myZ = el.zIndex;
+    const prevZ = prev.zIndex;
+    this.update(id, { zIndex: prevZ });
+    this.update(prev.id, { zIndex: myZ });
+  }
   queryRect(rect) {
     const ids = this.spatialIndex.query(rect);
     const elements = [];
@@ -3309,16 +3402,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;
@@ -3379,6 +3520,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) {
@@ -3811,18 +3967,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() {
@@ -3900,10 +4061,14 @@ var DomNodeManager = class {
   domLayer;
   onEditRequest;
   isEditingElement;
+  getVersion;
+  lastSyncedVersion = /* @__PURE__ */ new Map();
+  lastSyncedZIndex = /* @__PURE__ */ new Map();
   constructor(deps) {
     this.domLayer = deps.domLayer;
     this.onEditRequest = deps.onEditRequest;
     this.isEditingElement = deps.isEditingElement;
+    this.getVersion = deps.getVersion ?? null;
   }
   getNode(id) {
     return this.domNodes.get(id);
@@ -3911,6 +4076,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) {
@@ -3922,6 +4101,17 @@ var DomNodeManager = class {
       });
       this.domLayer.appendChild(node);
       this.domNodes.set(element.id, node);
+    } else if (this.getVersion) {
+      const currentVersion = this.getVersion(element.id);
+      const lastVersion = this.lastSyncedVersion.get(element.id);
+      const lastZ = this.lastSyncedZIndex.get(element.id);
+      if (lastVersion === currentVersion && lastZ === zIndex) {
+        return;
+      }
+    }
+    if (this.getVersion) {
+      this.lastSyncedVersion.set(element.id, this.getVersion(element.id));
+      this.lastSyncedZIndex.set(element.id, zIndex);
     }
     const size = "size" in element ? element.size : null;
     Object.assign(node.style, {
@@ -3940,6 +4130,8 @@ var DomNodeManager = class {
   }
   removeDomNode(id) {
     this.htmlContent.delete(id);
+    this.lastSyncedVersion.delete(id);
+    this.lastSyncedZIndex.delete(id);
     const node = this.domNodes.get(id);
     if (node) {
       node.remove();
@@ -3950,6 +4142,8 @@ var DomNodeManager = class {
     this.domNodes.forEach((node) => node.remove());
     this.domNodes.clear();
     this.htmlContent.clear();
+    this.lastSyncedVersion.clear();
+    this.lastSyncedZIndex.clear();
   }
   reattachHtmlContent(store) {
     for (const el of store.getElementsByType("html")) {
@@ -4437,8 +4631,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();
@@ -4469,7 +4665,8 @@ var Viewport = class {
     this.domNodeManager = new DomNodeManager({
       domLayer: this.domLayer,
       onEditRequest: (id) => this.startEditingElement(id),
-      isEditingElement: (id) => this.noteEditor.isEditing && this.noteEditor.editingElementId === 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)
@@ -4557,6 +4754,8 @@ var Viewport = class {
   renderLoop;
   domNodeManager;
   interactMode;
+  onHtmlElementMount;
+  dropHandler;
   gridChangeListeners = /* @__PURE__ */ new Set();
   doubleTapDetector = new DoubleTapDetector();
   tapDownX = 0;
@@ -4600,6 +4799,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);
@@ -4645,6 +4860,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();
@@ -4796,17 +5024,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);
@@ -5292,6 +5524,7 @@ var SelectTool = class {
   ctx = null;
   pendingSingleSelectId = null;
   hasDragged = false;
+  resizeAspectRatio = 0;
   get selectedIds() {
     return [...this._selectedIds];
   }
@@ -5337,7 +5570,8 @@ var SelectTool = class {
     const resizeHit = this.hitTestResizeHandle(world, ctx);
     if (resizeHit) {
       const el = ctx.store.getById(resizeHit.elementId);
-      if (el) {
+      if (el && "size" in el) {
+        this.resizeAspectRatio = el.size.h > 0 ? el.size.w / el.size.h : 0;
         this.mode = {
           type: "resizing",
           elementId: resizeHit.elementId,
@@ -5389,7 +5623,7 @@ var SelectTool = class {
     }
     if (this.mode.type === "resizing") {
       ctx.setCursor?.(HANDLE_CURSORS[this.mode.handle]);
-      this.handleResize(world, ctx);
+      this.handleResize(world, ctx, state.shiftKey);
       return;
     }
     if (this.mode.type === "dragging" && this._selectedIds.length > 0) {
@@ -5513,7 +5747,7 @@ var SelectTool = class {
     const hit = this.hitTest(world, ctx);
     ctx.setCursor?.(hit ? "move" : "default");
   }
-  handleResize(world, ctx) {
+  handleResize(world, ctx, shiftKey = false) {
     if (this.mode.type !== "resizing") return;
     const el = ctx.store.getById(this.mode.elementId);
     if (!el || !("size" in el) || el.locked) return;
@@ -5544,6 +5778,21 @@ var SelectTool = class {
         h -= dy;
         break;
     }
+    if (shiftKey && this.resizeAspectRatio > 0) {
+      const absDw = Math.abs(w - el.size.w);
+      const absDh = Math.abs(h - el.size.h);
+      if (absDw >= absDh) {
+        h = w / this.resizeAspectRatio;
+      } else {
+        w = h * this.resizeAspectRatio;
+      }
+      if (handle === "nw" || handle === "sw") {
+        x = el.position.x + el.size.w - w;
+      }
+      if (handle === "nw" || handle === "ne") {
+        y = el.position.y + el.size.h - h;
+      }
+    }
     if (w < MIN_ELEMENT_SIZE) {
       if (handle === "nw" || handle === "sw") x = el.position.x + el.size.w - MIN_ELEMENT_SIZE;
       w = MIN_ELEMENT_SIZE;
@@ -6606,48 +6855,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.14.0";
+var VERSION = "0.16.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,

package/dist/index.d.cts

@@ -204,7 +204,9 @@ declare class ElementStore {
     private layerOrderMap;
     private spatialIndex;
     private sortedCache;
+    private _versions;
     get count(): number;
+    getVersion(id: string): number;
     setLayerOrder(order: Map<string, number>): void;
     getAll(): CanvasElement[];
     getById(id: string): CanvasElement | undefined;
@@ -217,6 +219,10 @@ declare class ElementStore {
     clear(): void;
     snapshot(): CanvasElement[];
     loadSnapshot(elements: CanvasElement[]): void;
+    bringToFront(id: string): void;
+    sendToBack(id: string): void;
+    bringForward(id: string): void;
+    sendBackward(id: string): void;
     queryRect(rect: Bounds): CanvasElement[];
     queryPoint(point: Point): CanvasElement[];
     on<K extends keyof ElementStoreEvents>(event: K, listener: (data: ElementStoreEvents[K]) => void): () => void;
@@ -264,6 +270,15 @@ declare function snapPoint(point: Point, gridSize: number): Point;
 declare function snapToHexCenter(point: Point, cellSize: number, orientation: HexOrientation): Point;
 declare function smartSnap(point: Point, ctx: ToolContext): Point;
 
+interface LayerManagerEvents {
+    change: null;
+    create: Layer;
+    remove: Layer;
+    update: {
+        previous: Layer;
+        current: Layer;
+    };
+}
 declare class LayerManager {
     private readonly store;
     private layers;
@@ -287,7 +302,7 @@ declare class LayerManager {
     moveElementToLayer(elementId: string, layerId: string): void;
     snapshot(): Layer[];
     loadSnapshot(layers: Layer[]): void;
-    on(event: 'change', callback: () => void): () => void;
+    on<K extends keyof LayerManagerEvents>(event: K, callback: (data: LayerManagerEvents[K]) => void): () => void;
     addLayerDirect(layer: Layer): void;
     removeLayerDirect(id: string): void;
     updateLayerDirect(id: string, props: Omit<Partial<Layer>, 'id'>): void;
@@ -393,11 +408,12 @@ declare class HistoryStack {
 declare class HistoryRecorder {
     private readonly store;
     private readonly stack;
+    private readonly layerManager?;
     private recording;
     private transaction;
     private updateSnapshots;
     private unsubscribers;
-    constructor(store: ElementStore, stack: HistoryStack);
+    constructor(store: ElementStore, stack: HistoryStack, layerManager?: LayerManager | undefined);
     pause(): void;
     resume(): void;
     begin(): void;
@@ -408,6 +424,9 @@ declare class HistoryRecorder {
     private onAdd;
     private onRemove;
     private onUpdate;
+    private onLayerCreate;
+    private onLayerRemove;
+    private onLayerUpdate;
     private flushUpdateSnapshots;
 }
 
@@ -462,6 +481,7 @@ declare class InputHandler {
     private handleRedo;
     private handleCopy;
     private handlePaste;
+    private handleZOrder;
     private cancelToolIfActive;
 }
 
@@ -552,6 +572,11 @@ interface ViewportOptions {
     background?: BackgroundOptions;
     fontSizePresets?: FontSizePreset[];
     toolbar?: boolean;
+    onHtmlElementMount?: (elementId: string, domId: string | undefined, container: HTMLDivElement) => void;
+    onDrop?: (event: DragEvent, worldPosition: {
+        x: number;
+        y: number;
+    }) => void;
 }
 declare class Viewport {
     private readonly container;
@@ -577,6 +602,8 @@ declare class Viewport {
     private readonly renderLoop;
     private readonly domNodeManager;
     private readonly interactMode;
+    private readonly onHtmlElementMount?;
+    private readonly dropHandler?;
     private readonly gridChangeListeners;
     private readonly doubleTapDetector;
     private tapDownX;
@@ -607,6 +634,8 @@ declare class Viewport {
         w: number;
         h: number;
     }): string;
+    removeLayer(id: string): void;
+    updateHtmlElement(id: string, newContent: HTMLElement): void;
     addGrid(input: {
         gridType?: 'square' | 'hex';
         hexOrientation?: 'pointy' | 'flat';
@@ -935,6 +964,7 @@ declare class SelectTool implements Tool {
     private ctx;
     private pendingSingleSelectId;
     private hasDragged;
+    private resizeAspectRatio;
     get selectedIds(): string[];
     setSelection(ids: string[]): void;
     get isMarqueeActive(): boolean;
@@ -1181,6 +1211,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.14.0";
+declare const VERSION = "0.16.0";
 
 export { type ActiveFormats, AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, DoubleTapDetector, type DoubleTapDetectorOptions, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, PencilTool, type PencilToolOptions, type Point, type PointerState, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type StyledRun, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -204,7 +204,9 @@ declare class ElementStore {
     private layerOrderMap;
     private spatialIndex;
     private sortedCache;
+    private _versions;
     get count(): number;
+    getVersion(id: string): number;
     setLayerOrder(order: Map<string, number>): void;
     getAll(): CanvasElement[];
     getById(id: string): CanvasElement | undefined;
@@ -217,6 +219,10 @@ declare class ElementStore {
     clear(): void;
     snapshot(): CanvasElement[];
     loadSnapshot(elements: CanvasElement[]): void;
+    bringToFront(id: string): void;
+    sendToBack(id: string): void;
+    bringForward(id: string): void;
+    sendBackward(id: string): void;
     queryRect(rect: Bounds): CanvasElement[];
     queryPoint(point: Point): CanvasElement[];
     on<K extends keyof ElementStoreEvents>(event: K, listener: (data: ElementStoreEvents[K]) => void): () => void;
@@ -264,6 +270,15 @@ declare function snapPoint(point: Point, gridSize: number): Point;
 declare function snapToHexCenter(point: Point, cellSize: number, orientation: HexOrientation): Point;
 declare function smartSnap(point: Point, ctx: ToolContext): Point;
 
+interface LayerManagerEvents {
+    change: null;
+    create: Layer;
+    remove: Layer;
+    update: {
+        previous: Layer;
+        current: Layer;
+    };
+}
 declare class LayerManager {
     private readonly store;
     private layers;
@@ -287,7 +302,7 @@ declare class LayerManager {
     moveElementToLayer(elementId: string, layerId: string): void;
     snapshot(): Layer[];
     loadSnapshot(layers: Layer[]): void;
-    on(event: 'change', callback: () => void): () => void;
+    on<K extends keyof LayerManagerEvents>(event: K, callback: (data: LayerManagerEvents[K]) => void): () => void;
     addLayerDirect(layer: Layer): void;
     removeLayerDirect(id: string): void;
     updateLayerDirect(id: string, props: Omit<Partial<Layer>, 'id'>): void;
@@ -393,11 +408,12 @@ declare class HistoryStack {
 declare class HistoryRecorder {
     private readonly store;
     private readonly stack;
+    private readonly layerManager?;
     private recording;
     private transaction;
     private updateSnapshots;
     private unsubscribers;
-    constructor(store: ElementStore, stack: HistoryStack);
+    constructor(store: ElementStore, stack: HistoryStack, layerManager?: LayerManager | undefined);
     pause(): void;
     resume(): void;
     begin(): void;
@@ -408,6 +424,9 @@ declare class HistoryRecorder {
     private onAdd;
     private onRemove;
     private onUpdate;
+    private onLayerCreate;
+    private onLayerRemove;
+    private onLayerUpdate;
     private flushUpdateSnapshots;
 }
 
@@ -462,6 +481,7 @@ declare class InputHandler {
     private handleRedo;
     private handleCopy;
     private handlePaste;
+    private handleZOrder;
     private cancelToolIfActive;
 }
 
@@ -552,6 +572,11 @@ interface ViewportOptions {
     background?: BackgroundOptions;
     fontSizePresets?: FontSizePreset[];
     toolbar?: boolean;
+    onHtmlElementMount?: (elementId: string, domId: string | undefined, container: HTMLDivElement) => void;
+    onDrop?: (event: DragEvent, worldPosition: {
+        x: number;
+        y: number;
+    }) => void;
 }
 declare class Viewport {
     private readonly container;
@@ -577,6 +602,8 @@ declare class Viewport {
     private readonly renderLoop;
     private readonly domNodeManager;
     private readonly interactMode;
+    private readonly onHtmlElementMount?;
+    private readonly dropHandler?;
     private readonly gridChangeListeners;
     private readonly doubleTapDetector;
     private tapDownX;
@@ -607,6 +634,8 @@ declare class Viewport {
         w: number;
         h: number;
     }): string;
+    removeLayer(id: string): void;
+    updateHtmlElement(id: string, newContent: HTMLElement): void;
     addGrid(input: {
         gridType?: 'square' | 'hex';
         hexOrientation?: 'pointy' | 'flat';
@@ -935,6 +964,7 @@ declare class SelectTool implements Tool {
     private ctx;
     private pendingSingleSelectId;
     private hasDragged;
+    private resizeAspectRatio;
     get selectedIds(): string[];
     setSelection(ids: string[]): void;
     get isMarqueeActive(): boolean;
@@ -1181,6 +1211,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.14.0";
+declare const VERSION = "0.16.0";
 
 export { type ActiveFormats, AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, DoubleTapDetector, type DoubleTapDetectorOptions, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FilterAction, type FilteredEvent, type FilteredUpEvent, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputFilter, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, PencilTool, type PencilToolOptions, type Point, type PointerState, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type StyledRun, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, boundsIntersect, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.js

@@ -975,6 +975,14 @@ var InputHandler = class {
       e.preventDefault();
       this.handlePaste();
     }
+    if (e.key === "]") {
+      e.preventDefault();
+      this.handleZOrder(e.ctrlKey || e.metaKey ? "front" : "forward");
+    }
+    if (e.key === "[") {
+      e.preventDefault();
+      this.handleZOrder(e.ctrlKey || e.metaKey ? "back" : "backward");
+    }
   };
   onKeyUp = (e) => {
     if (e.key === " ") {
@@ -1151,6 +1159,33 @@ var InputHandler = class {
     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);
@@ -1447,9 +1482,13 @@ var ElementStore = class {
   layerOrderMap = /* @__PURE__ */ new Map();
   spatialIndex = new Quadtree({ x: -1e5, y: -1e5, w: 2e5, h: 2e5 });
   sortedCache = null;
+  _versions = /* @__PURE__ */ new Map();
   get count() {
     return this.elements.size;
   }
+  getVersion(id) {
+    return this._versions.get(id) ?? -1;
+  }
   setLayerOrder(order) {
     this.layerOrderMap = new Map(order);
     this.sortedCache = null;
@@ -1474,6 +1513,7 @@ var ElementStore = class {
   }
   add(element) {
     this.sortedCache = null;
+    this._versions.set(element.id, 0);
     this.elements.set(element.id, element);
     const bounds = getElementBounds(element);
     if (bounds) this.spatialIndex.insert(element.id, bounds);
@@ -1483,6 +1523,7 @@ var ElementStore = class {
     const existing = this.elements.get(id);
     if (!existing) return;
     this.sortedCache = null;
+    this._versions.set(id, (this._versions.get(id) ?? 0) + 1);
     const updated = { ...existing, ...partial, id: existing.id, type: existing.type };
     if (updated.type === "arrow") {
       const arrow = updated;
@@ -1502,12 +1543,14 @@ var ElementStore = class {
     const element = this.elements.get(id);
     if (!element) return;
     this.sortedCache = null;
+    this._versions.delete(id);
     this.elements.delete(id);
     this.spatialIndex.remove(id);
     this.bus.emit("remove", element);
   }
   clear() {
     this.sortedCache = null;
+    this._versions.clear();
     this.elements.clear();
     this.spatialIndex.clear();
     this.bus.emit("clear", null);
@@ -1517,10 +1560,12 @@ var ElementStore = class {
   }
   loadSnapshot(elements) {
     this.sortedCache = null;
+    this._versions.clear();
     this.elements.clear();
     this.spatialIndex.clear();
     for (const el of elements) {
       this.elements.set(el.id, el);
+      this._versions.set(el.id, 0);
       const bounds = getElementBounds(el);
       if (bounds) this.spatialIndex.insert(el.id, bounds);
     }
@@ -1529,6 +1574,54 @@ var ElementStore = class {
       this.bus.emit("add", el);
     }
   }
+  bringToFront(id) {
+    const el = this.elements.get(id);
+    if (!el) return;
+    const siblings = [...this.elements.values()].filter(
+      (e) => e.layerId === el.layerId && e.id !== id
+    );
+    if (siblings.length === 0) return;
+    const maxZ = Math.max(...siblings.map((e) => e.zIndex));
+    if (el.zIndex >= maxZ) return;
+    this.update(id, { zIndex: maxZ + 1 });
+  }
+  sendToBack(id) {
+    const el = this.elements.get(id);
+    if (!el) return;
+    const siblings = [...this.elements.values()].filter(
+      (e) => e.layerId === el.layerId && e.id !== id
+    );
+    if (siblings.length === 0) return;
+    const minZ = Math.min(...siblings.map((e) => e.zIndex));
+    if (el.zIndex <= minZ) return;
+    this.update(id, { zIndex: minZ - 1 });
+  }
+  bringForward(id) {
+    const el = this.elements.get(id);
+    if (!el) return;
+    const sorted = [...this.elements.values()].filter((e) => e.layerId === el.layerId).sort((a, b) => a.zIndex - b.zIndex);
+    const idx = sorted.findIndex((e) => e.id === id);
+    if (idx < 0 || idx >= sorted.length - 1) return;
+    const next = sorted[idx + 1];
+    if (!next) return;
+    const myZ = el.zIndex;
+    const nextZ = next.zIndex;
+    this.update(id, { zIndex: nextZ });
+    this.update(next.id, { zIndex: myZ });
+  }
+  sendBackward(id) {
+    const el = this.elements.get(id);
+    if (!el) return;
+    const sorted = [...this.elements.values()].filter((e) => e.layerId === el.layerId).sort((a, b) => a.zIndex - b.zIndex);
+    const idx = sorted.findIndex((e) => e.id === id);
+    if (idx <= 0) return;
+    const prev = sorted[idx - 1];
+    if (!prev) return;
+    const myZ = el.zIndex;
+    const prevZ = prev.zIndex;
+    this.update(id, { zIndex: prevZ });
+    this.update(prev.id, { zIndex: myZ });
+  }
   queryRect(rect) {
     const ids = this.spatialIndex.query(rect);
     const elements = [];
@@ -3200,16 +3293,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;
@@ -3270,6 +3411,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) {
@@ -3702,18 +3858,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() {
@@ -3791,10 +3952,14 @@ var DomNodeManager = class {
   domLayer;
   onEditRequest;
   isEditingElement;
+  getVersion;
+  lastSyncedVersion = /* @__PURE__ */ new Map();
+  lastSyncedZIndex = /* @__PURE__ */ new Map();
   constructor(deps) {
     this.domLayer = deps.domLayer;
     this.onEditRequest = deps.onEditRequest;
     this.isEditingElement = deps.isEditingElement;
+    this.getVersion = deps.getVersion ?? null;
   }
   getNode(id) {
     return this.domNodes.get(id);
@@ -3802,6 +3967,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) {
@@ -3813,6 +3992,17 @@ var DomNodeManager = class {
       });
       this.domLayer.appendChild(node);
       this.domNodes.set(element.id, node);
+    } else if (this.getVersion) {
+      const currentVersion = this.getVersion(element.id);
+      const lastVersion = this.lastSyncedVersion.get(element.id);
+      const lastZ = this.lastSyncedZIndex.get(element.id);
+      if (lastVersion === currentVersion && lastZ === zIndex) {
+        return;
+      }
+    }
+    if (this.getVersion) {
+      this.lastSyncedVersion.set(element.id, this.getVersion(element.id));
+      this.lastSyncedZIndex.set(element.id, zIndex);
     }
     const size = "size" in element ? element.size : null;
     Object.assign(node.style, {
@@ -3831,6 +4021,8 @@ var DomNodeManager = class {
   }
   removeDomNode(id) {
     this.htmlContent.delete(id);
+    this.lastSyncedVersion.delete(id);
+    this.lastSyncedZIndex.delete(id);
     const node = this.domNodes.get(id);
     if (node) {
       node.remove();
@@ -3841,6 +4033,8 @@ var DomNodeManager = class {
     this.domNodes.forEach((node) => node.remove());
     this.domNodes.clear();
     this.htmlContent.clear();
+    this.lastSyncedVersion.clear();
+    this.lastSyncedZIndex.clear();
   }
   reattachHtmlContent(store) {
     for (const el of store.getElementsByType("html")) {
@@ -4328,8 +4522,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();
@@ -4360,7 +4556,8 @@ var Viewport = class {
     this.domNodeManager = new DomNodeManager({
       domLayer: this.domLayer,
       onEditRequest: (id) => this.startEditingElement(id),
-      isEditingElement: (id) => this.noteEditor.isEditing && this.noteEditor.editingElementId === 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)
@@ -4448,6 +4645,8 @@ var Viewport = class {
   renderLoop;
   domNodeManager;
   interactMode;
+  onHtmlElementMount;
+  dropHandler;
   gridChangeListeners = /* @__PURE__ */ new Set();
   doubleTapDetector = new DoubleTapDetector();
   tapDownX = 0;
@@ -4491,6 +4690,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);
@@ -4536,6 +4751,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();
@@ -4687,17 +4915,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);
@@ -5183,6 +5415,7 @@ var SelectTool = class {
   ctx = null;
   pendingSingleSelectId = null;
   hasDragged = false;
+  resizeAspectRatio = 0;
   get selectedIds() {
     return [...this._selectedIds];
   }
@@ -5228,7 +5461,8 @@ var SelectTool = class {
     const resizeHit = this.hitTestResizeHandle(world, ctx);
     if (resizeHit) {
       const el = ctx.store.getById(resizeHit.elementId);
-      if (el) {
+      if (el && "size" in el) {
+        this.resizeAspectRatio = el.size.h > 0 ? el.size.w / el.size.h : 0;
         this.mode = {
           type: "resizing",
           elementId: resizeHit.elementId,
@@ -5280,7 +5514,7 @@ var SelectTool = class {
     }
     if (this.mode.type === "resizing") {
       ctx.setCursor?.(HANDLE_CURSORS[this.mode.handle]);
-      this.handleResize(world, ctx);
+      this.handleResize(world, ctx, state.shiftKey);
       return;
     }
     if (this.mode.type === "dragging" && this._selectedIds.length > 0) {
@@ -5404,7 +5638,7 @@ var SelectTool = class {
     const hit = this.hitTest(world, ctx);
     ctx.setCursor?.(hit ? "move" : "default");
   }
-  handleResize(world, ctx) {
+  handleResize(world, ctx, shiftKey = false) {
     if (this.mode.type !== "resizing") return;
     const el = ctx.store.getById(this.mode.elementId);
     if (!el || !("size" in el) || el.locked) return;
@@ -5435,6 +5669,21 @@ var SelectTool = class {
         h -= dy;
         break;
     }
+    if (shiftKey && this.resizeAspectRatio > 0) {
+      const absDw = Math.abs(w - el.size.w);
+      const absDh = Math.abs(h - el.size.h);
+      if (absDw >= absDh) {
+        h = w / this.resizeAspectRatio;
+      } else {
+        w = h * this.resizeAspectRatio;
+      }
+      if (handle === "nw" || handle === "sw") {
+        x = el.position.x + el.size.w - w;
+      }
+      if (handle === "nw" || handle === "ne") {
+        y = el.position.y + el.size.h - h;
+      }
+    }
     if (w < MIN_ELEMENT_SIZE) {
       if (handle === "nw" || handle === "sw") x = el.position.x + el.size.w - MIN_ELEMENT_SIZE;
       w = MIN_ELEMENT_SIZE;
@@ -6497,48 +6746,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.14.0";
+var VERSION = "0.16.0";
 export {
   AddElementCommand,
   ArrowTool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldnotes/core",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Vanilla TypeScript infinite canvas engine",
   "type": "module",
   "main": "./dist/index.cjs",