@fieldnotes/core 0.11.2 → 0.12.0

package/dist/index.cjs

@@ -898,6 +898,12 @@ var InputFilter = class _InputFilter {
   }
 };
 
+// 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;
@@ -927,6 +933,8 @@ var InputHandler = class {
   inputFilter = new InputFilter();
   deferredDown = null;
   abortController = new AbortController();
+  clipboard = [];
+  pasteCount = 0;
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
     this.toolContext = toolContext;
@@ -1050,6 +1058,14 @@ 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();
+    }
   };
   onKeyUp = (e) => {
     if (e.key === " ") {
@@ -1106,7 +1122,8 @@ var InputHandler = class {
       x: e.clientX - rect.left,
       y: e.clientY - rect.top,
       pressure: e.pressure,
-      pointerType: e.pointerType === "touch" || e.pointerType === "pen" ? e.pointerType : "mouse"
+      pointerType: e.pointerType === "touch" || e.pointerType === "pen" ? e.pointerType : "mouse",
+      shiftKey: e.shiftKey
     };
   }
   dispatchToolDown(e) {
@@ -1159,6 +1176,72 @@ 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();
+  }
   cancelToolIfActive(e) {
     if (this.isToolActive) {
       this.dispatchToolUp(e);
@@ -1412,19 +1495,23 @@ var ElementStore = class {
   bus = new EventBus();
   layerOrderMap = /* @__PURE__ */ new Map();
   spatialIndex = new Quadtree({ x: -1e5, y: -1e5, w: 2e5, h: 2e5 });
+  sortedCache = null;
   get count() {
     return this.elements.size;
   }
   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);
@@ -1435,6 +1522,7 @@ var ElementStore = class {
     );
   }
   add(element) {
+    this.sortedCache = null;
     this.elements.set(element.id, element);
     const bounds = getElementBounds(element);
     if (bounds) this.spatialIndex.insert(element.id, bounds);
@@ -1443,11 +1531,15 @@ var ElementStore = class {
   update(id, partial) {
     const existing = this.elements.get(id);
     if (!existing) return;
+    this.sortedCache = null;
     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) {
@@ -1458,11 +1550,13 @@ var ElementStore = class {
   remove(id) {
     const element = this.elements.get(id);
     if (!element) return;
+    this.sortedCache = null;
     this.elements.delete(id);
     this.spatialIndex.remove(id);
     this.bus.emit("remove", element);
   }
   clear() {
+    this.sortedCache = null;
     this.elements.clear();
     this.spatialIndex.clear();
     this.bus.emit("clear", null);
@@ -1471,6 +1565,7 @@ var ElementStore = class {
     return this.getAll().map((el) => ({ ...el }));
   }
   loadSnapshot(elements) {
+    this.sortedCache = null;
     this.elements.clear();
     this.spatialIndex.clear();
     for (const el of elements) {
@@ -1478,6 +1573,10 @@ var ElementStore = class {
       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);
+    }
   }
   queryRect(rect) {
     const ids = this.spatialIndex.query(rect);
@@ -2527,12 +2626,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) {
@@ -2558,7 +2651,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
@@ -5083,9 +5176,15 @@ var SelectTool = class {
   lastWorld = { x: 0, y: 0 };
   currentWorld = { x: 0, y: 0 };
   ctx = null;
+  pendingSingleSelectId = null;
+  hasDragged = false;
   get selectedIds() {
     return [...this._selectedIds];
   }
+  setSelection(ids) {
+    this._selectedIds = ids;
+    this.ctx?.requestRender();
+  }
   get isMarqueeActive() {
     return this.mode.type === "marquee";
   }
@@ -5134,13 +5233,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 };
@@ -5166,6 +5279,7 @@ var SelectTool = class {
       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;
@@ -5234,6 +5348,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");
   }
@@ -6414,7 +6533,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.11.2";
+var VERSION = "0.12.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,

package/dist/index.d.cts

@@ -200,6 +200,7 @@ declare class ElementStore {
     private bus;
     private layerOrderMap;
     private spatialIndex;
+    private sortedCache;
     get count(): number;
     setLayerOrder(order: Map<string, number>): void;
     getAll(): CanvasElement[];
@@ -239,6 +240,7 @@ interface PointerState {
     y: number;
     pressure: number;
     pointerType: 'mouse' | 'touch' | 'pen';
+    shiftKey: boolean;
 }
 interface Tool {
     readonly name: string;
@@ -428,6 +430,8 @@ declare class InputHandler {
     private readonly inputFilter;
     private deferredDown;
     private readonly abortController;
+    private clipboard;
+    private pasteCount;
     constructor(element: HTMLElement, camera: Camera, options?: InputHandlerOptions);
     setToolManager(toolManager: ToolManager, toolContext: ToolContext): void;
     destroy(): void;
@@ -451,6 +455,8 @@ declare class InputHandler {
     private deleteSelected;
     private handleUndo;
     private handleRedo;
+    private handleCopy;
+    private handlePaste;
     private cancelToolIfActive;
 }
 
@@ -899,7 +905,10 @@ declare class SelectTool implements Tool {
     private lastWorld;
     private currentWorld;
     private ctx;
+    private pendingSingleSelectId;
+    private hasDragged;
     get selectedIds(): string[];
+    setSelection(ids: string[]): void;
     get isMarqueeActive(): boolean;
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
@@ -1144,6 +1153,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.11.2";
+declare const VERSION = "0.12.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, 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, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -200,6 +200,7 @@ declare class ElementStore {
     private bus;
     private layerOrderMap;
     private spatialIndex;
+    private sortedCache;
     get count(): number;
     setLayerOrder(order: Map<string, number>): void;
     getAll(): CanvasElement[];
@@ -239,6 +240,7 @@ interface PointerState {
     y: number;
     pressure: number;
     pointerType: 'mouse' | 'touch' | 'pen';
+    shiftKey: boolean;
 }
 interface Tool {
     readonly name: string;
@@ -428,6 +430,8 @@ declare class InputHandler {
     private readonly inputFilter;
     private deferredDown;
     private readonly abortController;
+    private clipboard;
+    private pasteCount;
     constructor(element: HTMLElement, camera: Camera, options?: InputHandlerOptions);
     setToolManager(toolManager: ToolManager, toolContext: ToolContext): void;
     destroy(): void;
@@ -451,6 +455,8 @@ declare class InputHandler {
     private deleteSelected;
     private handleUndo;
     private handleRedo;
+    private handleCopy;
+    private handlePaste;
     private cancelToolIfActive;
 }
 
@@ -899,7 +905,10 @@ declare class SelectTool implements Tool {
     private lastWorld;
     private currentWorld;
     private ctx;
+    private pendingSingleSelectId;
+    private hasDragged;
     get selectedIds(): string[];
+    setSelection(ids: string[]): void;
     get isMarqueeActive(): boolean;
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
@@ -1144,6 +1153,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.11.2";
+declare const VERSION = "0.12.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, 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, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.js

@@ -791,6 +791,12 @@ var InputFilter = class _InputFilter {
   }
 };
 
+// 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;
@@ -820,6 +826,8 @@ var InputHandler = class {
   inputFilter = new InputFilter();
   deferredDown = null;
   abortController = new AbortController();
+  clipboard = [];
+  pasteCount = 0;
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
     this.toolContext = toolContext;
@@ -943,6 +951,14 @@ 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();
+    }
   };
   onKeyUp = (e) => {
     if (e.key === " ") {
@@ -999,7 +1015,8 @@ var InputHandler = class {
       x: e.clientX - rect.left,
       y: e.clientY - rect.top,
       pressure: e.pressure,
-      pointerType: e.pointerType === "touch" || e.pointerType === "pen" ? e.pointerType : "mouse"
+      pointerType: e.pointerType === "touch" || e.pointerType === "pen" ? e.pointerType : "mouse",
+      shiftKey: e.shiftKey
     };
   }
   dispatchToolDown(e) {
@@ -1052,6 +1069,72 @@ 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();
+  }
   cancelToolIfActive(e) {
     if (this.isToolActive) {
       this.dispatchToolUp(e);
@@ -1305,19 +1388,23 @@ var ElementStore = class {
   bus = new EventBus();
   layerOrderMap = /* @__PURE__ */ new Map();
   spatialIndex = new Quadtree({ x: -1e5, y: -1e5, w: 2e5, h: 2e5 });
+  sortedCache = null;
   get count() {
     return this.elements.size;
   }
   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);
@@ -1328,6 +1415,7 @@ var ElementStore = class {
     );
   }
   add(element) {
+    this.sortedCache = null;
     this.elements.set(element.id, element);
     const bounds = getElementBounds(element);
     if (bounds) this.spatialIndex.insert(element.id, bounds);
@@ -1336,11 +1424,15 @@ var ElementStore = class {
   update(id, partial) {
     const existing = this.elements.get(id);
     if (!existing) return;
+    this.sortedCache = null;
     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) {
@@ -1351,11 +1443,13 @@ var ElementStore = class {
   remove(id) {
     const element = this.elements.get(id);
     if (!element) return;
+    this.sortedCache = null;
     this.elements.delete(id);
     this.spatialIndex.remove(id);
     this.bus.emit("remove", element);
   }
   clear() {
+    this.sortedCache = null;
     this.elements.clear();
     this.spatialIndex.clear();
     this.bus.emit("clear", null);
@@ -1364,6 +1458,7 @@ var ElementStore = class {
     return this.getAll().map((el) => ({ ...el }));
   }
   loadSnapshot(elements) {
+    this.sortedCache = null;
     this.elements.clear();
     this.spatialIndex.clear();
     for (const el of elements) {
@@ -1371,6 +1466,10 @@ var ElementStore = class {
       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);
+    }
   }
   queryRect(rect) {
     const ids = this.spatialIndex.query(rect);
@@ -2420,12 +2519,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) {
@@ -2451,7 +2544,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
@@ -4976,9 +5069,15 @@ var SelectTool = class {
   lastWorld = { x: 0, y: 0 };
   currentWorld = { x: 0, y: 0 };
   ctx = null;
+  pendingSingleSelectId = null;
+  hasDragged = false;
   get selectedIds() {
     return [...this._selectedIds];
   }
+  setSelection(ids) {
+    this._selectedIds = ids;
+    this.ctx?.requestRender();
+  }
   get isMarqueeActive() {
     return this.mode.type === "marquee";
   }
@@ -5027,13 +5126,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 };
@@ -5059,6 +5172,7 @@ var SelectTool = class {
       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;
@@ -5127,6 +5241,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");
   }
@@ -6307,7 +6426,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.11.2";
+var VERSION = "0.12.0";
 export {
   AddElementCommand,
   ArrowTool,

package/package.json

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