@fieldnotes/core 0.13.0 → 0.15.0

package/dist/index.js

@@ -285,16 +285,24 @@ function sanitizeAttributes(el, tag) {
 
 // src/core/state-serializer.ts
 var CURRENT_VERSION = 2;
-function exportState(elements, camera, layers = []) {
-  return {
+function exportState(elements, camera, layers = [], activeLayerId) {
+  const state = {
     version: CURRENT_VERSION,
     camera: {
       position: { ...camera.position },
       zoom: camera.zoom
     },
-    elements: elements.map((el) => structuredClone(el)),
+    elements: elements.map((el) => {
+      const clone = structuredClone(el);
+      if (clone.type === "arrow") {
+        delete clone.cachedControlPoint;
+      }
+      return clone;
+    }),
     layers: layers.map((l) => ({ ...l }))
   };
+  if (activeLayerId) state.activeLayerId = activeLayerId;
+  return state;
 }
 function parseState(json) {
   const data = JSON.parse(json);
@@ -452,12 +460,14 @@ var AutoSave = class {
     this.key = options.key ?? DEFAULT_KEY;
     this.debounceMs = options.debounceMs ?? DEFAULT_DEBOUNCE_MS;
     this.layerManager = options.layerManager;
+    this.onError = options.onError;
   }
   key;
   debounceMs;
   layerManager;
   timerId = null;
   unsubscribers = [];
+  onError;
   start() {
     const schedule = () => this.scheduleSave();
     this.unsubscribers = [
@@ -505,8 +515,9 @@ var AutoSave = class {
     const state = exportState(this.store.snapshot(), this.camera, layers);
     try {
       localStorage.setItem(this.key, JSON.stringify(state));
-    } catch {
+    } catch (e) {
       console.warn("Auto-save failed: storage quota exceeded. State too large for localStorage.");
+      this.onError?.(e instanceof Error ? e : new Error(String(e)));
     }
   }
 };
@@ -575,6 +586,15 @@ var Camera = class {
       h: bottomRight.y - topLeft.y
     };
   }
+  fitToContent(boundingBox, canvasWidth, canvasHeight, padding = 40) {
+    if (boundingBox.w === 0 && boundingBox.h === 0) return;
+    const scaleX = canvasWidth / (boundingBox.w + 2 * padding);
+    const scaleY = canvasHeight / (boundingBox.h + 2 * padding);
+    this.z = Math.min(this.maxZoom, Math.max(this.minZoom, Math.min(scaleX, scaleY)));
+    this.x = (canvasWidth - boundingBox.w * this.z) / 2 - boundingBox.x * this.z;
+    this.y = (canvasHeight - boundingBox.h * this.z) / 2 - boundingBox.y * this.z;
+    this.notifyPanAndZoom();
+  }
   toCSSTransform() {
     return `translate3d(${this.x}px, ${this.y}px, 0) scale(${this.z})`;
   }
@@ -730,6 +750,67 @@ var Background = class {
   }
 };
 
+// src/canvas/input-filter.ts
+var InputFilter = class _InputFilter {
+  activePenId = null;
+  pendingTap = null;
+  static MIN_MOVE_DISTANCE = 3;
+  filterDown(e) {
+    if (e.pointerType === "pen") {
+      this.activePenId = e.pointerId;
+      return { event: e, action: "dispatch" };
+    }
+    if (e.pointerType === "touch" && this.activePenId !== null) {
+      return { event: e, action: "suppress" };
+    }
+    if (e.pointerType === "touch") {
+      this.pendingTap = { pointerId: e.pointerId, x: e.clientX, y: e.clientY };
+      return { event: e, action: "defer" };
+    }
+    return { event: e, action: "dispatch" };
+  }
+  filterMove(e) {
+    if (e.pointerType === "touch" && this.activePenId !== null) {
+      return { event: e, action: "suppress" };
+    }
+    if (this.pendingTap && e.pointerId === this.pendingTap.pointerId) {
+      const dx = e.clientX - this.pendingTap.x;
+      const dy = e.clientY - this.pendingTap.y;
+      if (dx * dx + dy * dy > _InputFilter.MIN_MOVE_DISTANCE * _InputFilter.MIN_MOVE_DISTANCE) {
+        this.pendingTap = null;
+        return { event: e, action: "dispatch" };
+      }
+      return { event: e, action: "suppress" };
+    }
+    return { event: e, action: "dispatch" };
+  }
+  filterUp(e) {
+    if (e.pointerId === this.activePenId) {
+      this.activePenId = null;
+      return { event: e, action: "dispatch" };
+    }
+    if (e.pointerType === "touch" && this.activePenId !== null) {
+      return { event: e, action: "suppress" };
+    }
+    if (this.pendingTap && e.pointerId === this.pendingTap.pointerId) {
+      const tap = { x: this.pendingTap.x, y: this.pendingTap.y };
+      this.pendingTap = null;
+      return { event: e, action: "dispatch", pendingTap: tap };
+    }
+    return { event: e, action: "dispatch" };
+  }
+  reset() {
+    this.activePenId = null;
+    this.pendingTap = null;
+  }
+};
+
+// src/elements/create-id.ts
+var counter = 0;
+function createId(prefix) {
+  return `${prefix}_${Date.now().toString(36)}_${(counter++).toString(36)}`;
+}
+
 // src/canvas/input-handler.ts
 var ZOOM_SENSITIVITY = 1e-3;
 var MIDDLE_BUTTON = 1;
@@ -755,13 +836,21 @@ var InputHandler = class {
   historyRecorder;
   historyStack;
   isToolActive = false;
+  lastPointerEvent = null;
+  inputFilter = new InputFilter();
+  deferredDown = null;
   abortController = new AbortController();
+  clipboard = [];
+  pasteCount = 0;
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
     this.toolContext = toolContext;
   }
   destroy() {
     this.abortController.abort();
+    this.inputFilter.reset();
+    this.deferredDown = null;
+    this.lastPointerEvent = null;
   }
   bind() {
     const opts = { signal: this.abortController.signal };
@@ -797,11 +886,18 @@ var InputHandler = class {
       this.lastPointer = { x: e.clientX, y: e.clientY };
       return;
     }
-    if (this.activePointers.size === 1 && e.button === 0) {
+    if (this.activePointers.size === 1 && (e.button === 0 || e.pointerType === "touch" || e.pointerType === "pen")) {
+      const result = this.inputFilter.filterDown(e);
+      if (result.action === "suppress") return;
+      if (result.action === "defer") {
+        this.deferredDown = e;
+        return;
+      }
       this.dispatchToolDown(e);
     }
   };
   onPointerMove = (e) => {
+    this.lastPointerEvent = e;
     if (this.activePointers.has(e.pointerId)) {
       this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
     }
@@ -816,13 +912,26 @@ var InputHandler = class {
       this.camera.pan(dx, dy);
       return;
     }
-    if (this.isToolActive) {
+    if (e.pointerType === "pen" && !this.activePointers.has(e.pointerId)) {
+      this.dispatchToolHover(e);
+    } else if (this.isToolActive) {
       this.dispatchToolMove(e);
+    } else if (this.deferredDown) {
+      const result = this.inputFilter.filterMove(e);
+      if (result.action === "dispatch") {
+        this.dispatchToolDown(this.deferredDown);
+        this.deferredDown = null;
+        this.dispatchToolMove(e);
+      }
     } else if (this.activePointers.size === 0) {
       this.dispatchToolHover(e);
     }
   };
   onPointerUp = (e) => {
+    try {
+      this.element.releasePointerCapture(e.pointerId);
+    } catch {
+    }
     this.activePointers.delete(e.pointerId);
     if (this.activePointers.size < 2) {
       this.lastPinchDistance = 0;
@@ -830,9 +939,16 @@ var InputHandler = class {
     if (this.isPanning && this.activePointers.size === 0) {
       this.isPanning = false;
     }
+    const upResult = this.inputFilter.filterUp(e);
     if (this.isToolActive) {
       this.dispatchToolUp(e);
       this.isToolActive = false;
+    } else if (this.deferredDown && upResult.pendingTap) {
+      this.dispatchToolDown(this.deferredDown);
+      this.dispatchToolUp(e);
+      this.deferredDown = null;
+    } else {
+      this.deferredDown = null;
     }
   };
   onKeyDown = (e) => {
@@ -851,13 +967,38 @@ var InputHandler = class {
       e.preventDefault();
       this.handleRedo();
     }
+    if ((e.ctrlKey || e.metaKey) && e.key === "c") {
+      e.preventDefault();
+      this.handleCopy();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "v") {
+      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 === " ") {
       this.spaceHeld = false;
+      if (this.activePointers.size === 0) {
+        if (this.lastPointerEvent) {
+          this.dispatchToolHover(this.lastPointerEvent);
+        } else {
+          this.toolContext?.setCursor?.("default");
+        }
+      }
     }
   };
   startPinch() {
+    this.inputFilter.reset();
+    this.deferredDown = null;
     this.isPanning = true;
     const [a, b] = this.getPinchPoints();
     this.lastPinchDistance = this.distance(a, b);
@@ -897,7 +1038,9 @@ var InputHandler = class {
     return {
       x: e.clientX - rect.left,
       y: e.clientY - rect.top,
-      pressure: e.pressure
+      pressure: e.pressure,
+      pointerType: e.pointerType === "touch" || e.pointerType === "pen" ? e.pointerType : "mouse",
+      shiftKey: e.shiftKey
     };
   }
   dispatchToolDown(e) {
@@ -950,11 +1093,147 @@ var InputHandler = class {
     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);
       this.isToolActive = false;
     }
+    this.deferredDown = null;
+  }
+};
+
+// src/canvas/double-tap-detector.ts
+var DEFAULT_TIMEOUT = 300;
+var DEFAULT_MAX_DISTANCE = 20;
+var DoubleTapDetector = class {
+  timeout;
+  maxDistance;
+  lastTapTime = 0;
+  lastTapX = 0;
+  lastTapY = 0;
+  hasPendingTap = false;
+  constructor(options) {
+    this.timeout = options?.timeout ?? DEFAULT_TIMEOUT;
+    this.maxDistance = options?.maxDistance ?? DEFAULT_MAX_DISTANCE;
+  }
+  feed(e) {
+    const now = Date.now();
+    const x = e.clientX;
+    const y = e.clientY;
+    if (this.hasPendingTap) {
+      const elapsed = now - this.lastTapTime;
+      const dx = x - this.lastTapX;
+      const dy = y - this.lastTapY;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (elapsed <= this.timeout && dist <= this.maxDistance) {
+        this.reset();
+        return true;
+      }
+    }
+    this.lastTapTime = now;
+    this.lastTapX = x;
+    this.lastTapY = y;
+    this.hasPendingTap = true;
+    return false;
+  }
+  reset() {
+    this.hasPendingTap = false;
+    this.lastTapTime = 0;
+    this.lastTapX = 0;
+    this.lastTapY = 0;
   }
 };
 
@@ -1202,19 +1481,27 @@ var ElementStore = class {
   bus = new EventBus();
   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;
   }
   getAll() {
-    return [...this.elements.values()].sort((a, b) => {
+    if (this.sortedCache) return this.sortedCache;
+    this.sortedCache = [...this.elements.values()].sort((a, b) => {
       const layerA = this.layerOrderMap.get(a.layerId) ?? 0;
       const layerB = this.layerOrderMap.get(b.layerId) ?? 0;
       if (layerA !== layerB) return layerA - layerB;
       return a.zIndex - b.zIndex;
     });
+    return this.sortedCache;
   }
   getById(id) {
     return this.elements.get(id);
@@ -1225,6 +1512,8 @@ 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);
@@ -1233,11 +1522,16 @@ var ElementStore = class {
   update(id, partial) {
     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;
       arrow.cachedControlPoint = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
     }
+    if (updated.type === "note" && "text" in partial) {
+      updated.text = sanitizeNoteHtml(updated.text);
+    }
     this.elements.set(id, updated);
     const newBounds = getElementBounds(updated);
     if (newBounds) {
@@ -1248,11 +1542,15 @@ var ElementStore = class {
   remove(id) {
     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);
@@ -1261,13 +1559,68 @@ var ElementStore = class {
     return this.getAll().map((el) => ({ ...el }));
   }
   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);
     }
+    this.bus.emit("clear", null);
+    for (const el of elements) {
+      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);
@@ -2317,12 +2670,6 @@ var ElementRenderer = class {
   }
 };
 
-// src/elements/create-id.ts
-var counter = 0;
-function createId(prefix) {
-  return `${prefix}_${Date.now().toString(36)}_${(counter++).toString(36)}`;
-}
-
 // src/elements/element-factory.ts
 var DEFAULT_NOTE_FONT_SIZE = 18;
 function createStroke(input) {
@@ -2348,7 +2695,7 @@ function createNote(input) {
     locked: input.locked ?? false,
     layerId: input.layerId ?? "",
     size: input.size ?? { w: 200, h: 100 },
-    text: input.text ?? "",
+    text: sanitizeNoteHtml(input.text ?? ""),
     backgroundColor: input.backgroundColor ?? "#ffeb3b",
     textColor: input.textColor ?? "#000000",
     fontSize: input.fontSize ?? DEFAULT_NOTE_FONT_SIZE
@@ -2397,6 +2744,7 @@ function createHtmlElement(input) {
     size: input.size
   };
   if (input.domId) el.domId = input.domId;
+  if (input.interactive) el.interactive = input.interactive;
   return el;
 }
 function createShape(input) {
@@ -2509,7 +2857,7 @@ function getActiveFormats() {
 }
 
 // src/elements/note-toolbar.ts
-var TOOLBAR_HEIGHT = 32;
+var TOOLBAR_HEIGHT = 52;
 var TOOLBAR_GAP = 4;
 var FORMAT_BUTTONS = [
   { label: "B", format: "bold", command: "bold" },
@@ -2596,9 +2944,9 @@ var NoteToolbar = class {
       fontWeight: config.format === "bold" ? "bold" : "normal",
       fontStyle: config.format === "italic" ? "italic" : "normal",
       textDecoration: config.format === "underline" ? "underline" : config.format === "strikethrough" ? "line-through" : "none",
-      minWidth: "24px",
-      height: "24px",
-      lineHeight: "24px"
+      minWidth: "44px",
+      height: "44px",
+      lineHeight: "44px"
     });
     btn.addEventListener("pointerdown", (e) => {
       e.preventDefault();
@@ -2616,7 +2964,7 @@ var NoteToolbar = class {
       cursor: "pointer",
       padding: "2px",
       fontSize: "12px",
-      height: "24px",
+      height: "44px",
       marginLeft: "4px"
     });
     for (const preset of this.fontSizePresets) {
@@ -3536,10 +3884,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);
@@ -3558,6 +3910,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, {
@@ -3576,6 +3939,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();
@@ -3586,6 +3951,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")) {
@@ -3614,10 +3981,13 @@ var DomNodeManager = class {
           wordWrap: "break-word"
         });
         node.innerHTML = element.text || "";
-        node.addEventListener("dblclick", (e) => {
-          e.stopPropagation();
-          const id = node.dataset["elementId"];
-          if (id) this.onEditRequest(id);
+        const detector = new DoubleTapDetector();
+        node.addEventListener("pointerup", (e) => {
+          if (detector.feed(e)) {
+            e.stopPropagation();
+            const id = node.dataset["elementId"];
+            if (id) this.onEditRequest(id);
+          }
         });
       }
       if (!this.isEditingElement(element.id)) {
@@ -3630,15 +4000,19 @@ var DomNodeManager = class {
         node.style.fontSize = `${element.fontSize ?? DEFAULT_NOTE_FONT_SIZE}px`;
       }
     }
-    if (element.type === "html" && !node.dataset["initialized"]) {
-      const content = this.htmlContent.get(element.id);
-      if (content) {
-        node.dataset["initialized"] = "true";
-        Object.assign(node.style, {
-          overflow: "hidden",
-          pointerEvents: "none"
-        });
-        node.appendChild(content);
+    if (element.type === "html") {
+      if (!node.dataset["initialized"]) {
+        const content = this.htmlContent.get(element.id);
+        if (content) {
+          node.dataset["initialized"] = "true";
+          Object.assign(node.style, {
+            overflow: "hidden",
+            pointerEvents: element.interactive ? "auto" : "none"
+          });
+          node.appendChild(content);
+        }
+      } else {
+        node.style.pointerEvents = element.interactive ? "auto" : "none";
       }
     }
     if (element.type === "text") {
@@ -3660,10 +4034,13 @@ var DomNodeManager = class {
           lineHeight: "1.4"
         });
         node.textContent = element.text || "";
-        node.addEventListener("dblclick", (e) => {
-          e.stopPropagation();
-          const id = node.dataset["elementId"];
-          if (id) this.onEditRequest(id);
+        const detector = new DoubleTapDetector();
+        node.addEventListener("pointerup", (e) => {
+          if (detector.feed(e)) {
+            e.stopPropagation();
+            const id = node.dataset["elementId"];
+            if (id) this.onEditRequest(id);
+          }
         });
       }
       if (!this.isEditingElement(element.id)) {
@@ -4095,7 +4472,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)
@@ -4152,7 +4530,8 @@ var Viewport = class {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
       this.requestRender();
     });
-    this.wrapper.addEventListener("dblclick", this.onDblClick);
+    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();
@@ -4183,6 +4562,9 @@ var Viewport = class {
   domNodeManager;
   interactMode;
   gridChangeListeners = /* @__PURE__ */ new Set();
+  doubleTapDetector = new DoubleTapDetector();
+  tapDownX = 0;
+  tapDownY = 0;
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -4197,7 +4579,12 @@ var Viewport = class {
     this.renderLoop.requestRender();
   }
   exportState() {
-    return exportState(this.store.snapshot(), this.camera, this.layerManager.snapshot());
+    return exportState(
+      this.store.snapshot(),
+      this.camera,
+      this.layerManager.snapshot(),
+      this.layerManager.activeLayerId
+    );
   }
   exportJSON() {
     return JSON.stringify(this.exportState());
@@ -4213,6 +4600,9 @@ var Viewport = class {
     if (state.layers && state.layers.length > 0) {
       this.layerManager.loadSnapshot(state.layers);
     }
+    if (state.activeLayerId) {
+      this.layerManager.setActiveLayer(state.activeLayerId);
+    }
     this.domNodeManager.reattachHtmlContent(this.store);
     this.history.clear();
     this.historyRecorder.resume();
@@ -4320,7 +4710,8 @@ var Viewport = class {
     this.interactMode.destroy();
     this.noteEditor.destroy(this.store);
     this.historyRecorder.destroy();
-    this.wrapper.removeEventListener("dblclick", this.onDblClick);
+    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.inputHandler.destroy();
@@ -4358,7 +4749,17 @@ var Viewport = class {
       }
     }
   }
-  onDblClick = (e) => {
+  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) {
@@ -4455,7 +4856,10 @@ var Viewport = class {
       position: "relative",
       width: "100%",
       height: "100%",
-      overflow: "hidden"
+      overflow: "hidden",
+      overscrollBehavior: "none",
+      userSelect: "none",
+      webkitUserSelect: "none"
     });
     return el;
   }
@@ -4518,6 +4922,26 @@ 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";
@@ -4870,9 +5294,16 @@ var SelectTool = class {
   lastWorld = { x: 0, y: 0 };
   currentWorld = { x: 0, y: 0 };
   ctx = null;
+  pendingSingleSelectId = null;
+  hasDragged = false;
+  resizeAspectRatio = 0;
   get selectedIds() {
     return [...this._selectedIds];
   }
+  setSelection(ids) {
+    this._selectedIds = ids;
+    this.ctx?.requestRender();
+  }
   get isMarqueeActive() {
     return this.mode.type === "marquee";
   }
@@ -4911,7 +5342,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,
@@ -4921,13 +5353,27 @@ var SelectTool = class {
         return;
       }
     }
+    this.pendingSingleSelectId = null;
+    this.hasDragged = false;
     const hit = this.hitTest(world, ctx);
     if (hit) {
       const alreadySelected = this._selectedIds.includes(hit.id);
-      if (!alreadySelected) {
-        this._selectedIds = [hit.id];
+      if (state.shiftKey) {
+        if (alreadySelected) {
+          this._selectedIds = this._selectedIds.filter((id) => id !== hit.id);
+          this.mode = { type: "idle" };
+        } else {
+          this._selectedIds = [...this._selectedIds, hit.id];
+          this.mode = hit.locked ? { type: "idle" } : { type: "dragging" };
+        }
+      } else {
+        if (!alreadySelected) {
+          this._selectedIds = [hit.id];
+        } else if (this._selectedIds.length > 1) {
+          this.pendingSingleSelectId = hit.id;
+        }
+        this.mode = hit.locked ? { type: "idle" } : { type: "dragging" };
       }
-      this.mode = hit.locked ? { type: "idle" } : { type: "dragging" };
     } else {
       this._selectedIds = [];
       this.mode = { type: "marquee", start: world };
@@ -4949,10 +5395,11 @@ 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) {
+      this.hasDragged = true;
       ctx.setCursor?.("move");
       const snapped = this.snap(world, ctx);
       const dx = snapped.x - this.lastWorld.x;
@@ -5021,6 +5468,11 @@ var SelectTool = class {
       }
       ctx.requestRender();
     }
+    if (!this.hasDragged && this.pendingSingleSelectId !== null) {
+      this._selectedIds = [this.pendingSingleSelectId];
+    }
+    this.pendingSingleSelectId = null;
+    this.hasDragged = false;
     this.mode = { type: "idle" };
     ctx.setCursor?.("default");
   }
@@ -5067,7 +5519,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;
@@ -5098,6 +5550,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;
@@ -6201,7 +6668,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.11.0";
+var VERSION = "0.15.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -6212,6 +6679,7 @@ export {
   CreateLayerCommand,
   DEFAULT_FONT_SIZE_PRESETS,
   DEFAULT_NOTE_FONT_SIZE,
+  DoubleTapDetector,
   ElementRenderer,
   ElementStore,
   EraserTool,
@@ -6220,6 +6688,7 @@ export {
   HistoryRecorder,
   HistoryStack,
   ImageTool,
+  InputFilter,
   InputHandler,
   LayerManager,
   MeasureTool,
@@ -6265,6 +6734,7 @@ export {
   getEdgeIntersection,
   getElementBounds,
   getElementCenter,
+  getElementsBoundingBox,
   getHexCellsInCone,
   getHexCellsInLine,
   getHexCellsInRadius,