@fieldnotes/core 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -26,6 +26,7 @@ __export(index_exports, {
   Background: () => Background,
   BatchCommand: () => BatchCommand,
   Camera: () => Camera,
+  CreateLayerCommand: () => CreateLayerCommand,
   ElementRenderer: () => ElementRenderer,
   ElementStore: () => ElementStore,
   EraserTool: () => EraserTool,
@@ -35,15 +36,18 @@ __export(index_exports, {
   HistoryStack: () => HistoryStack,
   ImageTool: () => ImageTool,
   InputHandler: () => InputHandler,
+  LayerManager: () => LayerManager,
   NoteEditor: () => NoteEditor,
   NoteTool: () => NoteTool,
   PencilTool: () => PencilTool,
   RemoveElementCommand: () => RemoveElementCommand,
+  RemoveLayerCommand: () => RemoveLayerCommand,
   SelectTool: () => SelectTool,
   ShapeTool: () => ShapeTool,
   TextTool: () => TextTool,
   ToolManager: () => ToolManager,
   UpdateElementCommand: () => UpdateElementCommand,
+  UpdateLayerCommand: () => UpdateLayerCommand,
   VERSION: () => VERSION,
   Viewport: () => Viewport,
   clearStaleBindings: () => clearStaleBindings,
@@ -100,15 +104,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) {
@@ -146,6 +151,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) {
@@ -178,6 +196,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;
   }
@@ -213,9 +234,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() {
@@ -226,6 +249,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();
@@ -258,7 +284,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));
   }
 };
@@ -635,11 +662,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);
@@ -823,12 +859,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);
@@ -986,14 +1023,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);
   }
@@ -1008,6 +1050,9 @@ var ElementRenderer = class {
       case "shape":
         this.renderShape(ctx, element);
         break;
+      case "image":
+        this.renderImage(ctx, element);
+        break;
     }
   }
   renderStroke(ctx, stroke) {
@@ -1143,6 +1188,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
@@ -1494,6 +1553,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,
@@ -1507,6 +1567,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",
@@ -1520,6 +1581,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,
@@ -1537,6 +1599,7 @@ function createImage(input) {
     position: input.position,
     zIndex: input.zIndex ?? 0,
     locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
     size: input.size,
     src: input.src
   };
@@ -1548,6 +1611,7 @@ function createHtmlElement(input) {
     position: input.position,
     zIndex: input.zIndex ?? 0,
     locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
     size: input.size
   };
 }
@@ -1558,6 +1622,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",
@@ -1572,6 +1637,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,
@@ -1580,6 +1646,155 @@ 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 = {}) {
@@ -1588,9 +1803,11 @@ var Viewport = class {
     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();
@@ -1611,7 +1828,10 @@ var Viewport = class {
         this.wrapper.style.cursor = cursor;
       },
       snapToGrid: false,
-      gridSize: this._gridSize
+      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,
@@ -1632,6 +1852,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);
@@ -1641,6 +1865,7 @@ var Viewport = class {
   }
   camera;
   store;
+  layerManager;
   toolManager;
   history;
   domLayer;
@@ -1676,7 +1901,7 @@ var Viewport = class {
     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());
@@ -1686,6 +1911,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);
@@ -1709,7 +1937,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();
@@ -1717,7 +1945,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);
@@ -1760,9 +1988,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);
       }
@@ -1894,7 +2130,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");
@@ -1908,10 +2144,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);
   }
@@ -1946,26 +2184,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) {
@@ -2048,6 +2266,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);
@@ -2194,7 +2416,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 = [];
@@ -2258,6 +2481,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;
@@ -2743,6 +2968,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);
@@ -2777,6 +3004,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;
@@ -2821,11 +3050,20 @@ 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 };
@@ -2843,7 +3081,8 @@ 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;
@@ -2864,7 +3103,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;
@@ -2951,7 +3191,8 @@ var NoteTool = class {
       position: world,
       size: { ...this.size },
       backgroundColor: this.backgroundColor,
-      textColor: this.textColor
+      textColor: this.textColor,
+      layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(note);
     ctx.requestRender();
@@ -2995,7 +3236,8 @@ var TextTool = class {
       position: world,
       fontSize: this.fontSize,
       color: this.color,
-      textAlign: this.textAlign
+      textAlign: this.textAlign,
+      layerId: ctx.activeLayerId ?? ""
     });
     ctx.store.add(textEl);
     ctx.requestRender();
@@ -3091,7 +3333,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();
@@ -3152,8 +3395,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.5.0";
+var VERSION = "0.6.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -3162,6 +3445,7 @@ var VERSION = "0.5.0";
   Background,
   BatchCommand,
   Camera,
+  CreateLayerCommand,
   ElementRenderer,
   ElementStore,
   EraserTool,
@@ -3171,15 +3455,18 @@ var VERSION = "0.5.0";
   HistoryStack,
   ImageTool,
   InputHandler,
+  LayerManager,
   NoteEditor,
   NoteTool,
   PencilTool,
   RemoveElementCommand,
+  RemoveLayerCommand,
   SelectTool,
   ShapeTool,
   TextTool,
   ToolManager,
   UpdateElementCommand,
+  UpdateLayerCommand,
   VERSION,
   Viewport,
   clearStaleBindings,