@fieldnotes/core 0.4.1 → 0.6.0

package/dist/index.js

@@ -23,15 +23,16 @@ var EventBus = class {
 };
 
 // src/core/state-serializer.ts
-var CURRENT_VERSION = 1;
-function exportState(elements, camera) {
+var CURRENT_VERSION = 2;
+function exportState(elements, camera, layers = []) {
   return {
     version: CURRENT_VERSION,
     camera: {
       position: { ...camera.position },
       zoom: camera.zoom
     },
-    elements: elements.map((el) => structuredClone(el))
+    elements: elements.map((el) => structuredClone(el)),
+    layers: layers.map((l) => ({ ...l }))
   };
 }
 function parseState(json) {
@@ -69,6 +70,19 @@ function validateState(data) {
     migrateElement(el);
   }
   cleanBindings(obj["elements"]);
+  const layers = obj["layers"];
+  if (!Array.isArray(layers) || layers.length === 0) {
+    obj["layers"] = [
+      {
+        id: "default-layer",
+        name: "Layer 1",
+        visible: true,
+        locked: false,
+        order: 0,
+        opacity: 1
+      }
+    ];
+  }
 }
 var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text", "shape"]);
 function validateElement(el) {
@@ -101,6 +115,9 @@ function cleanBindings(elements) {
   }
 }
 function migrateElement(obj) {
+  if (typeof obj["layerId"] !== "string") {
+    obj["layerId"] = "default-layer";
+  }
   if (obj["type"] === "arrow" && typeof obj["bend"] !== "number") {
     obj["bend"] = 0;
   }
@@ -119,6 +136,14 @@ function migrateElement(obj) {
   }
 }
 
+// src/core/snap.ts
+function snapPoint(point, gridSize) {
+  return {
+    x: Math.round(point.x / gridSize) * gridSize || 0,
+    y: Math.round(point.y / gridSize) * gridSize || 0
+  };
+}
+
 // src/core/auto-save.ts
 var DEFAULT_KEY = "fieldnotes-autosave";
 var DEFAULT_DEBOUNCE_MS = 1e3;
@@ -128,9 +153,11 @@ var AutoSave = class {
     this.camera = camera;
     this.key = options.key ?? DEFAULT_KEY;
     this.debounceMs = options.debounceMs ?? DEFAULT_DEBOUNCE_MS;
+    this.layerManager = options.layerManager;
   }
   key;
   debounceMs;
+  layerManager;
   timerId = null;
   unsubscribers = [];
   start() {
@@ -141,6 +168,9 @@ var AutoSave = class {
       this.store.on("update", schedule),
       this.camera.onChange(schedule)
     ];
+    if (this.layerManager) {
+      this.unsubscribers.push(this.layerManager.on("change", schedule));
+    }
   }
   stop() {
     this.cancelPending();
@@ -173,7 +203,8 @@ var AutoSave = class {
   }
   save() {
     if (typeof localStorage === "undefined") return;
-    const state = exportState(this.store.snapshot(), this.camera);
+    const layers = this.layerManager?.snapshot() ?? [];
+    const state = exportState(this.store.snapshot(), this.camera, layers);
     localStorage.setItem(this.key, JSON.stringify(state));
   }
 };
@@ -550,11 +581,20 @@ var InputHandler = class {
 var ElementStore = class {
   elements = /* @__PURE__ */ new Map();
   bus = new EventBus();
+  layerOrderMap = /* @__PURE__ */ new Map();
   get count() {
     return this.elements.size;
   }
+  setLayerOrder(order) {
+    this.layerOrderMap = new Map(order);
+  }
   getAll() {
-    return [...this.elements.values()].sort((a, b) => a.zIndex - b.zIndex);
+    return [...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;
+    });
   }
   getById(id) {
     return this.elements.get(id);
@@ -738,12 +778,13 @@ function getEdgeIntersection(bounds, outsidePoint) {
     y: cy + dy * scale
   };
 }
-function findBindTarget(point, store, threshold, excludeId) {
+function findBindTarget(point, store, threshold, excludeId, filter) {
   let closest = null;
   let closestDist = Infinity;
   for (const el of store.getAll()) {
     if (!isBindable(el)) continue;
     if (excludeId && el.id === excludeId) continue;
+    if (filter && !filter(el)) continue;
     const bounds = getElementBounds(el);
     if (!bounds) continue;
     const dist = distToBounds(point, bounds);
@@ -901,14 +942,19 @@ function smoothToSegments(points) {
 }
 
 // src/elements/element-renderer.ts
-var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "image", "html", "text"]);
+var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "html", "text"]);
 var ARROWHEAD_LENGTH = 12;
 var ARROWHEAD_ANGLE = Math.PI / 6;
 var ElementRenderer = class {
   store = null;
+  imageCache = /* @__PURE__ */ new Map();
+  onImageLoad = null;
   setStore(store) {
     this.store = store;
   }
+  setOnImageLoad(callback) {
+    this.onImageLoad = callback;
+  }
   isDomElement(element) {
     return DOM_ELEMENT_TYPES.has(element.type);
   }
@@ -923,6 +969,9 @@ var ElementRenderer = class {
       case "shape":
         this.renderShape(ctx, element);
         break;
+      case "image":
+        this.renderImage(ctx, element);
+        break;
     }
   }
   renderStroke(ctx, stroke) {
@@ -1058,6 +1107,20 @@ var ElementRenderer = class {
       }
     }
   }
+  renderImage(ctx, image) {
+    const img = this.getImage(image.src);
+    if (!img) return;
+    ctx.drawImage(img, image.position.x, image.position.y, image.size.w, image.size.h);
+  }
+  getImage(src) {
+    const cached = this.imageCache.get(src);
+    if (cached) return cached.complete ? cached : null;
+    const img = new Image();
+    img.src = src;
+    this.imageCache.set(src, img);
+    img.onload = () => this.onImageLoad?.();
+    return null;
+  }
 };
 
 // src/elements/note-editor.ts
@@ -1409,6 +1472,7 @@ function createStroke(input) {
     position: input.position ?? { x: 0, y: 0 },
     zIndex: input.zIndex ?? 0,
     locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
     points: input.points,
     color: input.color ?? "#000000",
     width: input.width ?? 2,
@@ -1422,6 +1486,7 @@ function createNote(input) {
     position: input.position,
     zIndex: input.zIndex ?? 0,
     locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
     size: input.size ?? { w: 200, h: 100 },
     text: input.text ?? "",
     backgroundColor: input.backgroundColor ?? "#ffeb3b",
@@ -1435,6 +1500,7 @@ function createArrow(input) {
     position: input.position ?? { x: 0, y: 0 },
     zIndex: input.zIndex ?? 0,
     locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
     from: input.from,
     to: input.to,
     bend: input.bend ?? 0,
@@ -1452,6 +1518,7 @@ function createImage(input) {
     position: input.position,
     zIndex: input.zIndex ?? 0,
     locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
     size: input.size,
     src: input.src
   };
@@ -1463,6 +1530,7 @@ function createHtmlElement(input) {
     position: input.position,
     zIndex: input.zIndex ?? 0,
     locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
     size: input.size
   };
 }
@@ -1473,6 +1541,7 @@ function createShape(input) {
     position: input.position,
     zIndex: input.zIndex ?? 0,
     locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
     shape: input.shape ?? "rectangle",
     size: input.size,
     strokeColor: input.strokeColor ?? "#000000",
@@ -1487,6 +1556,7 @@ function createText(input) {
     position: input.position,
     zIndex: input.zIndex ?? 0,
     locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
     size: input.size ?? { w: 200, h: 28 },
     text: input.text ?? "",
     fontSize: input.fontSize ?? 16,
@@ -1495,16 +1565,168 @@ function createText(input) {
   };
 }
 
+// src/layers/layer-manager.ts
+var LayerManager = class {
+  constructor(store) {
+    this.store = store;
+    const defaultLayer = {
+      id: createId("layer"),
+      name: "Layer 1",
+      visible: true,
+      locked: false,
+      order: 0,
+      opacity: 1
+    };
+    this.layers.set(defaultLayer.id, defaultLayer);
+    this._activeLayerId = defaultLayer.id;
+    this.syncLayerOrder();
+  }
+  layers = /* @__PURE__ */ new Map();
+  _activeLayerId;
+  bus = new EventBus();
+  get activeLayer() {
+    const layer = this.layers.get(this._activeLayerId);
+    if (!layer) throw new Error("Active layer not found");
+    return { ...layer };
+  }
+  get activeLayerId() {
+    return this._activeLayerId;
+  }
+  getLayers() {
+    return [...this.layers.values()].sort((a, b) => a.order - b.order).map((l) => ({ ...l }));
+  }
+  getLayer(id) {
+    const layer = this.layers.get(id);
+    return layer ? { ...layer } : void 0;
+  }
+  isLayerVisible(id) {
+    return this.layers.get(id)?.visible ?? true;
+  }
+  isLayerLocked(id) {
+    return this.layers.get(id)?.locked ?? false;
+  }
+  createLayer(name) {
+    const maxOrder = Math.max(...[...this.layers.values()].map((l) => l.order), -1);
+    const autoName = name ?? `Layer ${this.layers.size + 1}`;
+    const layer = {
+      id: createId("layer"),
+      name: autoName,
+      visible: true,
+      locked: false,
+      order: maxOrder + 1,
+      opacity: 1
+    };
+    this.addLayerDirect(layer);
+    return { ...layer };
+  }
+  removeLayer(id) {
+    if (this.layers.size <= 1) {
+      throw new Error("Cannot remove the last layer");
+    }
+    if (this._activeLayerId === id) {
+      const remaining = [...this.layers.values()].filter((l) => l.id !== id).sort((a, b) => b.order - a.order);
+      const fallback = remaining[0];
+      if (fallback) this._activeLayerId = fallback.id;
+    }
+    const elements = this.store.getAll().filter((el) => el.layerId === id);
+    for (const el of elements) {
+      this.store.update(el.id, { layerId: this._activeLayerId });
+    }
+    this.removeLayerDirect(id);
+  }
+  renameLayer(id, name) {
+    this.updateLayerDirect(id, { name });
+  }
+  reorderLayer(id, newOrder) {
+    if (!this.layers.has(id)) return;
+    this.updateLayerDirect(id, { order: newOrder });
+  }
+  setLayerVisible(id, visible) {
+    if (!visible && id === this._activeLayerId) {
+      const fallback = this.findFallbackLayer(id);
+      if (!fallback) return false;
+      this._activeLayerId = fallback.id;
+    }
+    this.updateLayerDirect(id, { visible });
+    return true;
+  }
+  setLayerLocked(id, locked) {
+    if (locked && id === this._activeLayerId) {
+      const fallback = this.findFallbackLayer(id);
+      if (!fallback) return false;
+      this._activeLayerId = fallback.id;
+    }
+    this.updateLayerDirect(id, { locked });
+    return true;
+  }
+  setActiveLayer(id) {
+    if (!this.layers.has(id)) return;
+    this._activeLayerId = id;
+    this.bus.emit("change", null);
+  }
+  moveElementToLayer(elementId, layerId) {
+    if (!this.layers.has(layerId)) return;
+    this.store.update(elementId, { layerId });
+    this.bus.emit("change", null);
+  }
+  snapshot() {
+    return this.getLayers();
+  }
+  loadSnapshot(layers) {
+    this.layers.clear();
+    for (const layer of layers) {
+      this.layers.set(layer.id, { ...layer });
+    }
+    const first = this.getLayers()[0];
+    if (first) this._activeLayerId = first.id;
+    this.syncLayerOrder();
+    this.bus.emit("change", null);
+  }
+  on(event, callback) {
+    return this.bus.on(event, callback);
+  }
+  addLayerDirect(layer) {
+    this.layers.set(layer.id, { ...layer });
+    this.syncLayerOrder();
+    this.bus.emit("change", null);
+  }
+  removeLayerDirect(id) {
+    this.layers.delete(id);
+    this.syncLayerOrder();
+    this.bus.emit("change", null);
+  }
+  updateLayerDirect(id, props) {
+    const layer = this.layers.get(id);
+    if (!layer) return;
+    Object.assign(layer, props);
+    if ("order" in props) this.syncLayerOrder();
+    this.bus.emit("change", null);
+  }
+  syncLayerOrder() {
+    const order = /* @__PURE__ */ new Map();
+    for (const layer of this.layers.values()) {
+      order.set(layer.id, layer.order);
+    }
+    this.store.setLayerOrder(order);
+  }
+  findFallbackLayer(excludeId) {
+    return [...this.layers.values()].filter((l) => l.id !== excludeId && l.visible && !l.locked).sort((a, b) => b.order - a.order)[0];
+  }
+};
+
 // src/canvas/viewport.ts
 var Viewport = class {
   constructor(container, options = {}) {
     this.container = container;
     this.camera = new Camera(options.camera);
     this.background = new Background(options.background);
+    this._gridSize = options.background?.spacing ?? 24;
     this.store = new ElementStore();
+    this.layerManager = new LayerManager(this.store);
     this.toolManager = new ToolManager();
     this.renderer = new ElementRenderer();
     this.renderer.setStore(this.store);
+    this.renderer.setOnImageLoad(() => this.requestRender());
     this.noteEditor = new NoteEditor();
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
     this.history = new HistoryStack();
@@ -1523,7 +1745,12 @@ var Viewport = class {
       editElement: (id) => this.startEditingElement(id),
       setCursor: (cursor) => {
         this.wrapper.style.cursor = cursor;
-      }
+      },
+      snapToGrid: false,
+      gridSize: this._gridSize,
+      activeLayerId: this.layerManager.activeLayerId,
+      isLayerVisible: (id) => this.layerManager.isLayerVisible(id),
+      isLayerLocked: (id) => this.layerManager.isLayerLocked(id)
     };
     this.inputHandler = new InputHandler(this.wrapper, this.camera, {
       toolManager: this.toolManager,
@@ -1544,6 +1771,10 @@ var Viewport = class {
       this.store.on("update", () => this.requestRender()),
       this.store.on("clear", () => this.clearDomNodes())
     ];
+    this.layerManager.on("change", () => {
+      this.toolContext.activeLayerId = this.layerManager.activeLayerId;
+      this.requestRender();
+    });
     this.wrapper.addEventListener("dblclick", this.onDblClick);
     this.wrapper.addEventListener("dragover", this.onDragOver);
     this.wrapper.addEventListener("drop", this.onDrop);
@@ -1553,6 +1784,7 @@ var Viewport = class {
   }
   camera;
   store;
+  layerManager;
   toolManager;
   history;
   domLayer;
@@ -1568,6 +1800,8 @@ var Viewport = class {
   toolContext;
   resizeObserver = null;
   animFrameId = 0;
+  _snapToGrid = false;
+  _gridSize;
   needsRender = true;
   domNodes = /* @__PURE__ */ new Map();
   htmlContent = /* @__PURE__ */ new Map();
@@ -1575,11 +1809,18 @@ var Viewport = class {
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
+  get snapToGrid() {
+    return this._snapToGrid;
+  }
+  setSnapToGrid(enabled) {
+    this._snapToGrid = enabled;
+    this.toolContext.snapToGrid = enabled;
+  }
   requestRender() {
     this.needsRender = true;
   }
   exportState() {
-    return exportState(this.store.snapshot(), this.camera);
+    return exportState(this.store.snapshot(), this.camera, this.layerManager.snapshot());
   }
   exportJSON() {
     return JSON.stringify(this.exportState());
@@ -1589,6 +1830,9 @@ var Viewport = class {
     this.noteEditor.destroy(this.store);
     this.clearDomNodes();
     this.store.loadSnapshot(state.elements);
+    if (state.layers && state.layers.length > 0) {
+      this.layerManager.loadSnapshot(state.layers);
+    }
     this.history.clear();
     this.historyRecorder.resume();
     this.camera.moveTo(state.camera.position.x, state.camera.position.y);
@@ -1612,7 +1856,7 @@ var Viewport = class {
     return result;
   }
   addImage(src, position, size = { w: 300, h: 200 }) {
-    const image = createImage({ position, size, src });
+    const image = createImage({ position, size, src, layerId: this.layerManager.activeLayerId });
     this.historyRecorder.begin();
     this.store.add(image);
     this.historyRecorder.commit();
@@ -1620,7 +1864,7 @@ var Viewport = class {
     return image.id;
   }
   addHtmlElement(dom, position, size = { w: 200, h: 150 }) {
-    const el = createHtmlElement({ position, size });
+    const el = createHtmlElement({ position, size, layerId: this.layerManager.activeLayerId });
     this.htmlContent.set(el.id, dom);
     this.historyRecorder.begin();
     this.store.add(el);
@@ -1663,9 +1907,17 @@ var Viewport = class {
     ctx.save();
     ctx.translate(this.camera.position.x, this.camera.position.y);
     ctx.scale(this.camera.zoom, this.camera.zoom);
-    for (const element of this.store.getAll()) {
+    const allElements = this.store.getAll();
+    let domZIndex = 0;
+    for (const element of allElements) {
+      if (!this.layerManager.isLayerVisible(element.layerId)) {
+        if (this.renderer.isDomElement(element)) {
+          this.hideDomNode(element.id);
+        }
+        continue;
+      }
       if (this.renderer.isDomElement(element)) {
-        this.syncDomNode(element);
+        this.syncDomNode(element, domZIndex++);
       } else {
         this.renderer.renderCanvasElement(ctx, element);
       }
@@ -1797,7 +2049,7 @@ var Viewport = class {
       reader.readAsDataURL(file);
     }
   };
-  syncDomNode(element) {
+  syncDomNode(element, zIndex = 0) {
     let node = this.domNodes.get(element.id);
     if (!node) {
       node = document.createElement("div");
@@ -1811,10 +2063,12 @@ var Viewport = class {
     }
     const size = "size" in element ? element.size : null;
     Object.assign(node.style, {
+      display: "block",
       left: `${element.position.x}px`,
       top: `${element.position.y}px`,
       width: size ? `${size.w}px` : "auto",
-      height: size ? `${size.h}px` : "auto"
+      height: size ? `${size.h}px` : "auto",
+      zIndex: String(zIndex)
     });
     this.renderDomContent(node, element);
   }
@@ -1849,26 +2103,6 @@ var Viewport = class {
         node.style.color = element.textColor;
       }
     }
-    if (element.type === "image") {
-      if (!node.dataset["initialized"]) {
-        node.dataset["initialized"] = "true";
-        const img = document.createElement("img");
-        img.src = element.src;
-        Object.assign(img.style, {
-          width: "100%",
-          height: "100%",
-          objectFit: "contain",
-          pointerEvents: "none"
-        });
-        img.draggable = false;
-        node.appendChild(img);
-      } else {
-        const img = node.querySelector("img");
-        if (img && img.src !== element.src) {
-          img.src = element.src;
-        }
-      }
-    }
     if (element.type === "html" && !node.dataset["initialized"]) {
       const content = this.htmlContent.get(element.id);
       if (content) {
@@ -1951,6 +2185,10 @@ var Viewport = class {
       }
     }
   }
+  hideDomNode(id) {
+    const node = this.domNodes.get(id);
+    if (node) node.style.display = "none";
+  }
   removeDomNode(id) {
     this.htmlContent.delete(id);
     const node = this.domNodes.get(id);
@@ -2097,7 +2335,8 @@ var PencilTool = class {
     const stroke = createStroke({
       points: simplified,
       color: this.color,
-      width: this.width
+      width: this.width,
+      layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(stroke);
     this.points = [];
@@ -2161,6 +2400,8 @@ var EraserTool = class {
     const strokes = ctx.store.getElementsByType("stroke");
     let erased = false;
     for (const stroke of strokes) {
+      if (ctx.isLayerVisible && !ctx.isLayerVisible(stroke.layerId)) continue;
+      if (ctx.isLayerLocked && ctx.isLayerLocked(stroke.layerId)) continue;
       if (this.strokeIntersects(stroke, world)) {
         ctx.store.remove(stroke.id);
         erased = true;
@@ -2323,10 +2564,13 @@ var SelectTool = class {
     this.mode = { type: "idle" };
     ctx.setCursor?.("default");
   }
+  snap(point, ctx) {
+    return ctx.snapToGrid && ctx.gridSize ? snapPoint(point, ctx.gridSize) : point;
+  }
   onPointerDown(state, ctx) {
     this.ctx = ctx;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    this.lastWorld = world;
+    this.lastWorld = this.snap(world, ctx);
     this.currentWorld = world;
     const arrowHit = hitTestArrowHandles(world, this._selectedIds, ctx);
     if (arrowHit) {
@@ -2379,9 +2623,10 @@ var SelectTool = class {
     }
     if (this.mode.type === "dragging" && this._selectedIds.length > 0) {
       ctx.setCursor?.("move");
-      const dx = world.x - this.lastWorld.x;
-      const dy = world.y - this.lastWorld.y;
-      this.lastWorld = world;
+      const snapped = this.snap(world, ctx);
+      const dx = snapped.x - this.lastWorld.x;
+      const dy = snapped.y - this.lastWorld.y;
+      this.lastWorld = snapped;
       for (const id of this._selectedIds) {
         const el = ctx.store.getById(id);
         if (!el || el.locked) continue;
@@ -2642,6 +2887,8 @@ var SelectTool = class {
   findElementsInRect(marquee, ctx) {
     const ids = [];
     for (const el of ctx.store.getAll()) {
+      if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
+      if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
       const bounds = this.getElementBounds(el);
       if (bounds && this.rectsOverlap(marquee, bounds)) {
         ids.push(el.id);
@@ -2676,6 +2923,8 @@ var SelectTool = class {
   hitTest(world, ctx) {
     const elements = ctx.store.getAll().reverse();
     for (const el of elements) {
+      if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
+      if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
       if (this.isInsideBounds(world, el)) return el;
     }
     return null;
@@ -2720,17 +2969,26 @@ var ArrowTool = class {
     if (options.color !== void 0) this.color = options.color;
     if (options.width !== void 0) this.width = options.width;
   }
+  layerFilter(ctx) {
+    if (!ctx.isLayerVisible && !ctx.isLayerLocked) return void 0;
+    return (el) => {
+      if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) return false;
+      if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) return false;
+      return true;
+    };
+  }
   onPointerDown(state, ctx) {
     this.drawing = true;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     const threshold = BIND_THRESHOLD2 / ctx.camera.zoom;
-    const target = findBindTarget(world, ctx.store, threshold);
+    const filter = this.layerFilter(ctx);
+    const target = findBindTarget(world, ctx.store, threshold, void 0, filter);
     if (target) {
       this.start = getElementCenter(target);
       this.fromBinding = { elementId: target.id };
       this.fromTarget = target;
     } else {
-      this.start = world;
+      this.start = ctx.snapToGrid && ctx.gridSize ? snapPoint(world, ctx.gridSize) : world;
       this.fromBinding = void 0;
       this.fromTarget = null;
     }
@@ -2742,12 +3000,13 @@ var ArrowTool = class {
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
     const threshold = BIND_THRESHOLD2 / ctx.camera.zoom;
     const excludeId = this.fromBinding?.elementId;
-    const target = findBindTarget(world, ctx.store, threshold, excludeId);
+    const filter = this.layerFilter(ctx);
+    const target = findBindTarget(world, ctx.store, threshold, excludeId, filter);
     if (target) {
       this.end = getElementCenter(target);
       this.toTarget = target;
     } else {
-      this.end = world;
+      this.end = ctx.snapToGrid && ctx.gridSize ? snapPoint(world, ctx.gridSize) : world;
       this.toTarget = null;
     }
     ctx.requestRender();
@@ -2763,7 +3022,8 @@ var ArrowTool = class {
       color: this.color,
       width: this.width,
       fromBinding: this.fromBinding,
-      toBinding: this.toTarget ? { elementId: this.toTarget.id } : void 0
+      toBinding: this.toTarget ? { elementId: this.toTarget.id } : void 0,
+      layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(arrow);
     this.fromTarget = null;
@@ -2842,12 +3102,16 @@ var NoteTool = class {
   onPointerMove(_state, _ctx) {
   }
   onPointerUp(state, ctx) {
-    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    let world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    if (ctx.snapToGrid && ctx.gridSize) {
+      world = snapPoint(world, ctx.gridSize);
+    }
     const note = createNote({
       position: world,
       size: { ...this.size },
       backgroundColor: this.backgroundColor,
-      textColor: this.textColor
+      textColor: this.textColor,
+      layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(note);
     ctx.requestRender();
@@ -2883,12 +3147,16 @@ var TextTool = class {
   onPointerMove(_state, _ctx) {
   }
   onPointerUp(state, ctx) {
-    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    let world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    if (ctx.snapToGrid && ctx.gridSize) {
+      world = snapPoint(world, ctx.gridSize);
+    }
     const textEl = createText({
       position: world,
       fontSize: this.fontSize,
       color: this.color,
-      textAlign: this.textAlign
+      textAlign: this.textAlign,
+      layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(textEl);
     ctx.requestRender();
@@ -2965,12 +3233,12 @@ var ShapeTool = class {
   }
   onPointerDown(state, ctx) {
     this.drawing = true;
-    this.start = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.start = this.snap(ctx.camera.screenToWorld({ x: state.x, y: state.y }), ctx);
     this.end = { ...this.start };
   }
   onPointerMove(state, ctx) {
     if (!this.drawing) return;
-    this.end = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.end = this.snap(ctx.camera.screenToWorld({ x: state.x, y: state.y }), ctx);
     ctx.requestRender();
   }
   onPointerUp(_state, ctx) {
@@ -2984,7 +3252,8 @@ var ShapeTool = class {
       shape: this.shape,
       strokeColor: this.strokeColor,
       strokeWidth: this.strokeWidth,
-      fillColor: this.fillColor
+      fillColor: this.fillColor,
+      layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(shape);
     ctx.requestRender();
@@ -3034,6 +3303,9 @@ var ShapeTool = class {
     }
     return { position: { x, y }, size: { w, h } };
   }
+  snap(point, ctx) {
+    return ctx.snapToGrid && ctx.gridSize ? snapPoint(point, ctx.gridSize) : point;
+  }
   onKeyDown = (e) => {
     if (e.key === "Shift") this.shiftHeld = true;
   };
@@ -3042,8 +3314,48 @@ var ShapeTool = 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.4.1";
+var VERSION = "0.6.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -3051,6 +3363,7 @@ export {
   Background,
   BatchCommand,
   Camera,
+  CreateLayerCommand,
   ElementRenderer,
   ElementStore,
   EraserTool,
@@ -3060,15 +3373,18 @@ export {
   HistoryStack,
   ImageTool,
   InputHandler,
+  LayerManager,
   NoteEditor,
   NoteTool,
   PencilTool,
   RemoveElementCommand,
+  RemoveLayerCommand,
   SelectTool,
   ShapeTool,
   TextTool,
   ToolManager,
   UpdateElementCommand,
+  UpdateLayerCommand,
   VERSION,
   Viewport,
   clearStaleBindings,
@@ -3094,6 +3410,7 @@ export {
   isBindable,
   isNearBezier,
   parseState,
+  snapPoint,
   unbindArrow,
   updateBoundArrow
 };