@overtone-art/canvas-editor-core 0.4.0 → 0.5.1

package/dist/index.mjs

@@ -11,7 +11,7 @@ import {
 } from "./chunk-MCBRZQ4M.mjs";
 
 // src/editor.ts
-import { Canvas, FabricImage as FabricImage3, Group, Textbox, filters, loadSVGFromString, util as util3 } from "fabric";
+import { Canvas, FabricImage as FabricImage3, Group as Group6, Textbox, filters, loadSVGFromString, util as util5 } from "fabric";
 
 // src/events.ts
 var EventEmitter = class {
@@ -173,7 +173,13 @@ var LayerManager = class {
     if (layer.renderProxy) this.canvas.remove(layer.renderProxy);
     layer.renderProxy = proxy;
     if (proxy) {
-      proxy.set({ visible: layer.visible, opacity: layer.opacity });
+      proxy._layerId = id;
+      proxy.set({
+        visible: layer.visible,
+        opacity: layer.opacity,
+        selectable: !layer.locked,
+        evented: !layer.locked
+      });
       this.canvas.add(proxy);
       this.syncZOrder();
     }
@@ -212,7 +218,7 @@ var LayerManager = class {
     } else {
       const layer = this.get(id);
       if (layer) {
-        this.canvas.setActiveObject(layer.fabricObject);
+        this.canvas.setActiveObject(layer.renderProxy ?? layer.fabricObject);
       }
     }
     this.canvas.requestRenderAll();
@@ -247,8 +253,9 @@ var LayerManager = class {
     if (!layer) return;
     if (layer.locked === locked) return;
     layer.locked = locked;
-    layer.fabricObject.selectable = !locked;
-    layer.fabricObject.evented = !locked;
+    const target = layer.renderProxy ?? layer.fabricObject;
+    target.selectable = !locked;
+    target.evented = !locked;
     this.canvas.requestRenderAll();
     this.emitChanged();
     this.onPropertyChanged?.();
@@ -846,7 +853,7 @@ var STROKE2 = "#22c55e";
 import { util } from "fabric";
 
 // src/pattern/tiled-pattern-object.ts
-import { FabricObject } from "fabric";
+import { FabricObject, Point } from "fabric";
 
 // src/pattern/tile-geometry.ts
 var MAX_TILES_PER_AXIS = 200;
@@ -879,8 +886,10 @@ function computeTilePositions(config, targetW, targetH, baseW, baseH, origin) {
   }
   return placements;
 }
-function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin) {
+function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin, draw) {
   const anchor = origin ?? { x: targetW / 2, y: targetH / 2 };
+  const drawW = draw && draw.width > 0 ? draw.width : baseW;
+  const drawH = draw && draw.height > 0 ? draw.height : baseH;
   ctx.save();
   ctx.translate(anchor.x, anchor.y);
   ctx.rotate(config.angle * Math.PI / 180);
@@ -888,7 +897,7 @@ function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin) {
     ctx.save();
     ctx.translate(tile.x, tile.y);
     ctx.rotate(tile.rotation);
-    ctx.drawImage(img, -baseW / 2, -baseH / 2, baseW, baseH);
+    ctx.drawImage(img, -drawW / 2, -drawH / 2, drawW, drawH);
     ctx.restore();
   }
   ctx.restore();
@@ -910,46 +919,43 @@ function mod2(n) {
 var MAX_SNAPSHOT_PIXELS = 16e6;
 var MAX_SNAPSHOT_SCALE = 8;
 var SNAPSHOT_SHRINK_FACTOR = 2;
+var TILE_BLEED_DEVICE_PX = 2;
 var TiledPatternObject = class _TiledPatternObject extends FabricObject {
   static type = "TiledPattern";
   /** The layer's real object. Never rendered directly (it is kept at opacity 0). */
   source;
   config;
+  /** The print area this pattern fills, in canvas units. */
+  area;
   snapshotEl = null;
   snapshotScale = 0;
-  constructor(source, config, width, height) {
+  constructor(source, config, area) {
     super({
-      // Explicit origin: fabric v7 defaults to `center`, and a centre-origin
-      // object placed at 0,0 covers a quarter of the canvas. That exact bug is
-      // why the old bake-into-the-layer pattern landed in the top-left corner.
-      originX: "left",
-      originY: "top",
-      left: 0,
-      top: 0,
-      width,
-      height,
-      // Pointer events belong to the source underneath, and fabric's object
-      // cache would freeze the tiling at screen resolution.
-      selectable: false,
-      evented: false,
+      // Centre origin: the box tracks a tile, and a tile is placed by its centre.
+      originX: "center",
+      originY: "center",
       objectCaching: false,
-      hasControls: false,
-      hasBorders: false
+      // Side handles would imply a non-uniform tile scale; the config has one.
+      lockScalingFlip: true
     });
     this.source = source;
     this.config = config;
+    this.area = area;
+    this.setControlsVisibility({ ml: false, mr: false, mt: false, mb: false });
+    this.syncBox();
   }
-  /** Swap in a new config; the next render picks it up. */
+  /** Swap in a new config and re-fit the box to the tile it now describes. */
   setConfig(config) {
     this.config = config;
-    this.dirty = true;
+    this.syncBox();
   }
-  /** Resize to a new print area. */
-  setArea(width, height) {
-    this.set({ width, height });
-    this.setCoords();
+  /** Re-fit to a new print area (canvas resize). */
+  setArea(area) {
+    this.area = area;
+    this.invalidate();
+    this.syncBox();
   }
-  /** Drop the cached source snapshot (e.g. the source was edited). */
+  /** Drop the cached source snapshot (the source was edited). */
   invalidate() {
     this.snapshotEl = null;
     this.snapshotScale = 0;
@@ -960,40 +966,118 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     this.snapshotEl = null;
     this.snapshotScale = 0;
   }
+  /**
+   * Put the box back on the anchor tile: the tile's size, the pattern angle, and
+   * the grid origin displaced by the configured phase shift. Resets any live
+   * gesture scale, so it must run only once that gesture has been folded in.
+   */
+  syncBox() {
+    const { tileW, tileH } = this.baseTile();
+    const origin = this.source.getCenterPoint();
+    const anchor = this.anchorFromOrigin(origin, tileW, tileH, this.config.angle);
+    this.set({
+      left: anchor.x,
+      top: anchor.y,
+      width: tileW,
+      height: tileH,
+      scaleX: 1,
+      scaleY: 1,
+      angle: this.config.angle
+    });
+    this.setCoords();
+    this.dirty = true;
+  }
+  /** Grid rotation in play right now — the live handle during a rotate gesture. */
+  liveAngle() {
+    return this.angle ?? 0;
+  }
+  /** Tile scale in play right now, as a config percentage. */
+  liveScale() {
+    return (this.config.scale ?? 100) * Math.abs(this.scaleX ?? 1);
+  }
+  /**
+   * Where the source's centre would have to sit for the box to stay put — i.e.
+   * the grid origin implied by a drag. `PatternManager` moves the source there.
+   */
+  liveOrigin() {
+    const { tileW, tileH } = this.liveTile();
+    const centre = this.getCenterPoint();
+    const shift = this.shiftVector(tileW, tileH, this.liveAngle());
+    return new Point(centre.x - shift.x, centre.y - shift.y);
+  }
   _render(ctx) {
-    const width = this.width ?? 0;
-    const height = this.height ?? 0;
+    const { width, height } = this.area;
     if (width <= 0 || height <= 0) return;
-    const tileScale = Math.max(1, this.config.scale ?? 100) / 100;
-    const snapshot = this.ensureSnapshot(contextScale(ctx) * tileScale);
+    const { tileW, tileH } = this.liveTile();
+    const scale = contextScale(ctx);
+    const snapshot = this.ensureSnapshot(scale * (tileW / Math.max(1, this.baseW())));
     if (!snapshot) return;
-    const { tileW, tileH } = this.tileSize(snapshot, tileScale, width, height);
+    const centre = this.getCenterPoint();
+    const angle = this.liveAngle();
     ctx.save();
-    ctx.translate(-width / 2, -height / 2);
-    drawTiles(ctx, snapshot, this.config, width, height, tileW, tileH, this.gridOrigin());
+    ctx.scale(1 / (this.scaleX || 1), 1 / (this.scaleY || 1));
+    ctx.rotate(-angle * Math.PI / 180);
+    ctx.translate(-centre.x, -centre.y);
+    const shift = this.shiftVector(tileW, tileH, angle);
+    const origin = { x: centre.x - shift.x, y: centre.y - shift.y };
+    const config = { ...this.config, angle, offsetX: 0, offsetY: 0 };
+    drawTiles(
+      ctx,
+      snapshot,
+      config,
+      width,
+      height,
+      tileW,
+      tileH,
+      origin,
+      this.drawSize(tileW, tileH, TILE_BLEED_DEVICE_PX / scale)
+    );
     ctx.restore();
   }
   /** Raster fallback for SVG export — one `<image>` covering the print area. */
   _toSVG() {
-    const width = this.width ?? 0;
-    const height = this.height ?? 0;
+    const { width, height } = this.area;
     if (width <= 0 || height <= 0) return [];
     const el = document.createElement("canvas");
     el.width = Math.max(1, Math.round(width));
     el.height = Math.max(1, Math.round(height));
     const ctx = el.getContext("2d");
     if (!ctx) return [];
-    const tileScale = Math.max(1, this.config.scale ?? 100) / 100;
-    const snapshot = this.ensureSnapshot(tileScale);
+    const { tileW, tileH } = this.liveTile();
+    const snapshot = this.ensureSnapshot(tileW / Math.max(1, this.baseW()));
     if (!snapshot) return [];
-    const { tileW, tileH } = this.tileSize(snapshot, tileScale, width, height);
-    drawTiles(ctx, snapshot, this.config, width, height, tileW, tileH, this.gridOrigin());
+    const centre = this.getCenterPoint();
+    const angle = this.liveAngle();
+    const shift = this.shiftVector(tileW, tileH, angle);
+    drawTiles(
+      ctx,
+      snapshot,
+      { ...this.config, angle, offsetX: 0, offsetY: 0 },
+      width,
+      height,
+      tileW,
+      tileH,
+      { x: centre.x - shift.x, y: centre.y - shift.y },
+      // The fallback raster is built at 1:1, so a device pixel is a canvas unit.
+      this.drawSize(tileW, tileH, TILE_BLEED_DEVICE_PX)
+    );
     return [
-      `<image x="${-width / 2}" y="${-height / 2}" width="${width}" height="${height}" `,
-      `xlink:href="${el.toDataURL("image/png")}"></image>
+      `<g transform="rotate(${-angle}) translate(${-centre.x} ${-centre.y})">`,
+      `<image x="0" y="0" width="${width}" height="${height}" `,
+      `xlink:href="${el.toDataURL("image/png")}"></image></g>
 `
     ];
   }
+  /**
+   * The proxy holds a live reference to its source, which would make a
+   * serialized canvas circular. Nothing persists this object (only layers are
+   * serialized) — this keeps an accidental `canvas.toObject()` from throwing.
+   */
+  toObject() {
+    const plain = super.toObject();
+    delete plain.source;
+    return plain;
+  }
   /**
    * Fabric's generic clone round-trips through `toObject()` + the class
    * registry, which cannot carry a live source reference. Export paths clone
@@ -1001,46 +1085,110 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
    * tiling. The copy shares the source (it only ever reads from it).
    */
   clone() {
-    const copy = new _TiledPatternObject(
-      this.source,
-      this.config,
-      this.width ?? 0,
-      this.height ?? 0
-    );
+    const copy = new _TiledPatternObject(this.source, this.config, this.area);
     copy.set({
       left: this.left,
       top: this.top,
+      angle: this.angle,
+      scaleX: this.scaleX,
+      scaleY: this.scaleY,
+      width: this.width,
+      height: this.height,
       visible: this.visible,
       opacity: this.opacity
     });
     return Promise.resolve(copy);
   }
   /**
-   * The proxy holds a live reference to its source, which would make a
-   * serialized canvas circular. Nothing persists this object (only layers are
-   * serialized) — this keeps an accidental `canvas.toObject()` from throwing.
+   * The source's tile footprint: its bounding box, minus a stroke it reserves
+   * room for but never paints.
+   *
+   * fabric keeps `strokeWidth` inside an object's box whether or not a `stroke`
+   * colour paints it, and the built-in shapes arrive with `strokeWidth: 1` and no
+   * stroke. Stepping the grid by that box puts a transparent seam between every
+   * pair of neighbours at zero spacing: the artwork is a pixel narrower than the
+   * box it is stepped by.
    */
-  toObject() {
-    const plain = super.toObject();
-    delete plain.source;
-    return plain;
+  sourceBox() {
+    const rect = this.source.getBoundingRect();
+    if (paintsStroke(this.source)) return { width: rect.width, height: rect.height };
+    const dims = this.source._getTransformedDimensions({ strokeWidth: 0 });
+    const radians = (this.source.angle ?? 0) * Math.PI / 180;
+    const cos = Math.abs(Math.cos(radians));
+    const sin = Math.abs(Math.sin(radians));
+    return {
+      width: dims.x * cos + dims.y * sin,
+      height: dims.x * sin + dims.y * cos
+    };
+  }
+  /** The source's on-canvas width, before the tile scale. */
+  baseW() {
+    return Math.max(1, this.sourceBox().width);
+  }
+  /** The source's on-canvas height, before the tile scale. */
+  baseH() {
+    return Math.max(1, this.sourceBox().height);
+  }
+  /**
+   * Size to paint the snapshot at, for a tile of `tileW × tileH`.
+   *
+   * The snapshot is NOT exactly the source's box: `toCanvasElement` rounds the
+   * raster up to whole pixels and pads it further for a shadow. Painting it into
+   * the tile step would squeeze the artwork inside that padding — every tile
+   * shrinks by up to a pixel and the grid shows transparent seams at zero
+   * spacing. So the bitmap is painted at its own footprint, scaled by the same
+   * factor the tile is, and the step stays the source's box.
+   */
+  drawSize(tileW, tileH, bleed = 0) {
+    const snapshot = this.snapshotEl;
+    if (!snapshot || this.snapshotScale <= 0) {
+      return { width: tileW + bleed, height: tileH + bleed };
+    }
+    return {
+      width: snapshot.width / this.snapshotScale * (tileW / this.baseW()) + bleed,
+      height: snapshot.height / this.snapshotScale * (tileH / this.baseH()) + bleed
+    };
+  }
+  /** Tile size from the config alone, ignoring any in-flight gesture. */
+  baseTile() {
+    const box = this.sourceBox();
+    const scale = Math.max(1, this.config.scale ?? 100) / 100;
+    const floor = this.tileFloor();
+    return {
+      tileW: Math.max(floor, box.width * scale),
+      tileH: Math.max(floor, box.height * scale)
+    };
   }
-  /** Tile size in canvas units, floored so a tiny tile can't spawn a huge loop. */
-  tileSize(snapshot, tileScale, width, height) {
-    const floor = Math.max(2, Math.sqrt(width * width + height * height) / 200);
+  /** Tile size as drawn right now, including a live scale gesture. */
+  liveTile() {
+    const base = this.baseTile();
+    const floor = this.tileFloor();
     return {
-      tileW: Math.max(floor, snapshot.width / this.snapshotScale * tileScale),
-      tileH: Math.max(floor, snapshot.height / this.snapshotScale * tileScale)
+      tileW: Math.max(floor, base.tileW * Math.abs(this.scaleX ?? 1)),
+      tileH: Math.max(floor, base.tileH * Math.abs(this.scaleY ?? 1))
     };
   }
-  /** Grid anchor: the source's centre, in this object's coordinates. */
-  gridOrigin() {
-    const centre = this.source.getCenterPoint();
-    return { x: centre.x - (this.left ?? 0), y: centre.y - (this.top ?? 0) };
+  /** Smallest tile the draw loop may use, so a tiny tile can't flood the area. */
+  tileFloor() {
+    const { width, height } = this.area;
+    return Math.max(2, Math.sqrt(width * width + height * height) / 200);
+  }
+  /** Phase shift (`offsetX`/`offsetY`) as a canvas-space vector. */
+  shiftVector(tileW, tileH, angle) {
+    const dx = tileW * (clampPercent(this.config.offsetX) / 100);
+    const dy = tileH * (clampPercent(this.config.offsetY) / 100);
+    const radians = angle * Math.PI / 180;
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
+    return new Point(dx * cos - dy * sin, dx * sin + dy * cos);
+  }
+  anchorFromOrigin(origin, tileW, tileH, angle) {
+    const shift = this.shiftVector(tileW, tileH, angle);
+    return new Point(origin.x + shift.x, origin.y + shift.y);
   }
   /**
-   * Snapshot the source at (at least) `scale`, reusing the cached one when it is
-   * still sharp enough and the source has not changed.
+   * Snapshot the source at (at least) `scale`, reusing the cached one while it
+   * is still sharp enough and the source has not changed.
    */
   ensureSnapshot(scale) {
     const wanted = this.clampScale(scale);
@@ -1071,6 +1219,16 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     return Math.max(0.05, Math.min(requested, budgeted));
   }
 };
+function paintsStroke(object) {
+  if (!object.strokeWidth || object.strokeWidth <= 0) return false;
+  const { stroke } = object;
+  if (typeof stroke === "string") return stroke !== "" && stroke !== "transparent";
+  return stroke !== null && stroke !== void 0;
+}
+function clampPercent(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return 0;
+  return Math.max(-100, Math.min(100, value));
+}
 function contextScale(ctx) {
   if (typeof ctx.getTransform !== "function") return 1;
   try {
@@ -1082,13 +1240,15 @@ function contextScale(ctx) {
 }
 
 // src/pattern/pattern-manager.ts
+var MIN_TILE_SCALE = 10;
+var MAX_TILE_SCALE = 300;
 var PatternManager = class {
   constructor(canvas, layers, history, events) {
     this.canvas = canvas;
     this.layers = layers;
     this.history = history;
     this.events = events;
-    this.canvas.on("object:modified", this.onSourceModified);
+    this.canvas.on("object:modified", this.onObjectModified);
     this.canvas.on("text:changed", this.onSourceModified);
     this.events.on("layer:removed", this.onLayerRemoved);
   }
@@ -1097,6 +1257,11 @@ var PatternManager = class {
   history;
   events;
   proxies = /* @__PURE__ */ new Map();
+  onObjectModified = (event) => {
+    const target = event.target;
+    if (target instanceof TiledPatternObject) this.commitGesture(target);
+    else this.invalidateFor(target);
+  };
   onSourceModified = (event) => {
     this.invalidateFor(event.target);
   };
@@ -1138,7 +1303,11 @@ var PatternManager = class {
     try {
       this.detach(layerId);
       restoreLocks(layer.fabricObject, layer.meta.pattern.originalLocks);
-      layer.fabricObject.set({ opacity: layer.opacity });
+      layer.fabricObject.set({
+        opacity: layer.opacity,
+        selectable: !layer.locked,
+        evented: !layer.locked
+      });
       this.layers.setMeta(layerId, { pattern: void 0 });
       this.canvas.requestRenderAll();
       this.history.save();
@@ -1170,12 +1339,8 @@ var PatternManager = class {
   }
   /** Re-fit every proxy to the print area (canvas resize). */
   syncArea() {
-    const width = this.canvas.getWidth();
-    const height = this.canvas.getHeight();
-    for (const proxy of this.proxies.values()) {
-      proxy.setArea(width, height);
-      proxy.invalidate();
-    }
+    const area = this.area();
+    for (const proxy of this.proxies.values()) proxy.setArea(area);
     if (this.proxies.size > 0) this.canvas.requestRenderAll();
   }
   /** Drop a layer's cached source snapshot (its content changed). */
@@ -1183,6 +1348,7 @@ var PatternManager = class {
     const proxy = this.proxies.get(layerId);
     if (!proxy) return;
     proxy.invalidate();
+    proxy.syncBox();
     this.canvas.requestRenderAll();
   }
   /** Give a freshly cloned layer its own proxy (duplicating a pattern layer). */
@@ -1192,7 +1358,7 @@ var PatternManager = class {
     this.attach(layer, state.config);
   }
   dispose() {
-    this.canvas.off("object:modified", this.onSourceModified);
+    this.canvas.off("object:modified", this.onObjectModified);
     this.canvas.off("text:changed", this.onSourceModified);
     this.events.off("layer:removed", this.onLayerRemoved);
     this.clearProxies();
@@ -1203,17 +1369,38 @@ var PatternManager = class {
     this.proxies.clear();
   }
   attach(layer, config) {
-    const proxy = new TiledPatternObject(
-      layer.fabricObject,
-      config,
-      this.canvas.getWidth(),
-      this.canvas.getHeight()
-    );
-    layer.fabricObject.set({ opacity: 0 });
+    const proxy = new TiledPatternObject(layer.fabricObject, config, this.area());
+    const wasActive = this.canvas.getActiveObject() === layer.fabricObject;
+    layer.fabricObject.set({ opacity: 0, selectable: false, evented: false });
     this.proxies.set(layer.id, proxy);
     this.layers.setRenderProxy(layer.id, proxy);
+    if (wasActive) this.canvas.setActiveObject(proxy);
     this.canvas.requestRenderAll();
   }
+  /**
+   * Fold a finished drag / scale / rotate on the proxy back into the pattern:
+   * position becomes the grid origin (carried by the source), scale becomes the
+   * tile scale, rotation becomes the pattern angle. Read the live transform
+   * first — writing the config re-fits the box and destroys it.
+   */
+  commitGesture(proxy) {
+    const layer = this.layers.findByObject(proxy);
+    const state = layer?.meta.pattern;
+    if (!layer || !state) return;
+    const origin = proxy.liveOrigin();
+    const scale = clamp2(proxy.liveScale(), MIN_TILE_SCALE, MAX_TILE_SCALE);
+    const angle = normalizeAngle(proxy.liveAngle());
+    layer.fabricObject.setPositionByOrigin(origin, "center", "center");
+    layer.fabricObject.setCoords();
+    const config = { ...state.config, scale, angle };
+    this.layers.setMeta(layer.id, { pattern: { ...state, config } });
+    proxy.setConfig(config);
+    this.canvas.requestRenderAll();
+    this.history.save();
+  }
+  area() {
+    return { width: this.canvas.getWidth(), height: this.canvas.getHeight() };
+  }
   detach(layerId) {
     const proxy = this.proxies.get(layerId);
     if (!proxy) {
@@ -1230,6 +1417,15 @@ var PatternManager = class {
     if (layer) this.invalidate(layer.id);
   }
 };
+function clamp2(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return Math.max(min, Math.min(max, value));
+}
+function normalizeAngle(angle) {
+  if (!Number.isFinite(angle)) return 0;
+  const wrapped = (angle % 360 + 360) % 360;
+  return Math.round(wrapped > 180 ? wrapped - 360 : wrapped);
+}
 function isLegacyState(state) {
   return typeof state.originalSrc === "string" && state.originalSrc.length > 0;
 }
@@ -2529,6 +2725,737 @@ var MaskController = class {
   }
 };
 
+// src/masks/manager.ts
+import { Group as Group5 } from "fabric";
+
+// src/masks/compose.ts
+import { Group, Rect as Rect2 } from "fabric";
+var MODE_OPERATION = {
+  add: "source-over",
+  subtract: "destination-out",
+  intersect: "destination-in"
+};
+function neutralize(child) {
+  child.set({ opacity: 0, globalCompositeOperation: "source-over" });
+}
+function baseRect(box) {
+  return new Rect2({
+    left: box.left,
+    top: box.top,
+    width: Math.max(1, box.width),
+    height: Math.max(1, box.height),
+    originX: "left",
+    originY: "top",
+    fill: "#000000",
+    objectCaching: false
+  });
+}
+function composeMaskGroup(children, entries, options) {
+  if (children.length === 0) return void 0;
+  children.forEach((child, index) => {
+    const entry = entries[index];
+    child.set({ objectCaching: false });
+    if (!entry || !entry.visible) {
+      neutralize(child);
+      return;
+    }
+    child.set({
+      opacity: entry.opacity,
+      globalCompositeOperation: MODE_OPERATION[entry.mode] ?? "source-over"
+    });
+  });
+  const first = entries.find((entry) => entry.visible);
+  const withBase = first && first.mode !== "add" ? [baseRect(options.box), ...children] : [...children];
+  return new Group(withBase, {
+    absolutePositioned: options.absolute,
+    // Cached, so the children's compositing operations resolve against each
+    // other instead of against the page underneath the mask.
+    objectCaching: true,
+    subTargetCheck: false,
+    interactive: false
+  });
+}
+function needsAbsoluteSpace(entries) {
+  return entries.some((entry) => !entry.linked);
+}
+
+// src/masks/edit.ts
+import { util as util4 } from "fabric";
+
+// src/masks/space.ts
+import { util as util3 } from "fabric";
+function matrixOf(object) {
+  return object.calcTransformMatrix();
+}
+function applyMatrix(object, matrix) {
+  const decomposed = util3.qrDecompose(matrix);
+  object.set({
+    flipX: false,
+    flipY: false,
+    originX: "center",
+    originY: "center",
+    left: decomposed.translateX,
+    top: decomposed.translateY,
+    scaleX: decomposed.scaleX,
+    scaleY: decomposed.scaleY,
+    angle: decomposed.angle,
+    skewX: decomposed.skewX,
+    skewY: 0
+  });
+  object.setCoords();
+}
+function toCanvasSpace(object, host) {
+  applyMatrix(object, util3.multiplyTransformMatrices(matrixOf(host), matrixOf(object)));
+}
+function toHostSpace(object, host) {
+  applyMatrix(
+    object,
+    util3.multiplyTransformMatrices(util3.invertTransform(matrixOf(host)), matrixOf(object))
+  );
+}
+function relativeMatrix(object, host) {
+  return util3.multiplyTransformMatrices(util3.invertTransform(matrixOf(host)), matrixOf(object));
+}
+function applyRelativeMatrix(object, host, rel) {
+  applyMatrix(object, util3.multiplyTransformMatrices(matrixOf(host), rel));
+}
+function asObject(clip) {
+  return clip;
+}
+function toMatrix(values) {
+  if (!values || values.length !== 6 || values.some((value) => !Number.isFinite(value)))
+    return null;
+  return [values[0], values[1], values[2], values[3], values[4], values[5]];
+}
+function fitToBox(object, box, zoom = 1) {
+  const width = Math.max(1, box.width) * zoom;
+  const height = Math.max(1, box.height) * zoom;
+  object.set({
+    originX: "center",
+    originY: "center",
+    angle: 0,
+    skewX: 0,
+    skewY: 0,
+    left: box.left + box.width / 2,
+    top: box.top + box.height / 2,
+    scaleX: width / Math.max(1, object.width ?? 1),
+    scaleY: height / Math.max(1, object.height ?? 1)
+  });
+  object.setCoords();
+}
+function unwrapGroup(group) {
+  const children = group.removeAll();
+  for (const child of children) child.setCoords();
+  return children;
+}
+
+// src/masks/edit.ts
+var MaskEditController = class {
+  constructor(canvas, onCommit) {
+    this.canvas = canvas;
+    this.onCommit = onCommit;
+  }
+  canvas;
+  onCommit;
+  handle = null;
+  editing = null;
+  child = null;
+  group = null;
+  active() {
+    return this.editing;
+  }
+  /** Put a handle on the canvas for `child`, an object inside `group`. */
+  async begin(edit, group, child) {
+    this.end();
+    const handle = await child.clone();
+    applyMatrix(handle, matrixOf(child));
+    handle.set({
+      // Outline only: the mask's own fill would sit over the artwork it is
+      // supposed to be revealing.
+      fill: "rgba(0,0,0,0.001)",
+      stroke: "#e0b055",
+      strokeWidth: 2,
+      strokeDashArray: [6, 4],
+      strokeUniform: true,
+      opacity: 1,
+      selectable: true,
+      evented: true,
+      hasControls: true,
+      hasBorders: true,
+      objectCaching: false,
+      excludeFromExport: true
+    });
+    this.handle = handle;
+    this.editing = edit;
+    this.child = child;
+    this.group = group;
+    this.canvas.add(handle);
+    this.canvas.setActiveObject(handle);
+    this.canvas.on("object:moving", this.onTransform);
+    this.canvas.on("object:scaling", this.onTransform);
+    this.canvas.on("object:rotating", this.onTransform);
+    this.canvas.on("object:modified", this.onModified);
+    this.canvas.requestRenderAll();
+    return true;
+  }
+  /** Take the handle down. The geometry it wrote is already in the clip. */
+  end() {
+    if (!this.handle) return;
+    this.canvas.off("object:moving", this.onTransform);
+    this.canvas.off("object:scaling", this.onTransform);
+    this.canvas.off("object:rotating", this.onTransform);
+    this.canvas.off("object:modified", this.onModified);
+    if (this.canvas.getActiveObject() === this.handle) this.canvas.discardActiveObject();
+    this.canvas.remove(this.handle);
+    this.handle = null;
+    this.editing = null;
+    this.child = null;
+    this.group = null;
+    this.canvas.requestRenderAll();
+  }
+  dispose() {
+    this.end();
+  }
+  onTransform = (event) => {
+    if (!this.handle || event.target !== this.handle) return;
+    this.write();
+  };
+  onModified = (event) => {
+    if (!this.handle || event.target !== this.handle) return;
+    this.write();
+    this.onCommit();
+  };
+  /** Handle transform (canvas space) → clip child transform (group-relative). */
+  write() {
+    if (!this.handle || !this.child || !this.group) return;
+    applyMatrix(
+      this.child,
+      util4.multiplyTransformMatrices(
+        util4.invertTransform(matrixOf(this.group)),
+        matrixOf(this.handle)
+      )
+    );
+    this.group.dirty = true;
+    this.group.set({ dirty: true });
+    this.canvas.requestRenderAll();
+  }
+};
+
+// src/masks/store.ts
+import { Group as Group4 } from "fabric";
+
+// src/masks/host.ts
+import { Rect as Rect3 } from "fabric";
+function findCanvasHost(layers) {
+  return layers.getAll().find((layer) => layer.meta.canvasMask);
+}
+function createCanvasHost(canvas, layers) {
+  const rect = new Rect3({
+    left: 0,
+    top: 0,
+    width: canvas.getWidth(),
+    height: canvas.getHeight(),
+    originX: "left",
+    originY: "top",
+    fill: "#000000",
+    globalCompositeOperation: "destination-in",
+    // It is edited from the layer list, never on the canvas: a drag box on
+    // something that cannot be dragged only reads as broken.
+    selectable: false,
+    evented: false,
+    hasControls: false,
+    hasBorders: false,
+    objectCaching: false
+  });
+  const layer = layers.add("mask", rect, "Design mask");
+  layer.meta.canvasMask = true;
+  layers.setLocked(layer.id, true);
+  return layer;
+}
+function pinCanvasHost(layers) {
+  const all = layers.getAll();
+  const hostIndex = all.findIndex((layer) => layer.meta.canvasMask);
+  if (hostIndex === -1) return false;
+  let lastContent = -1;
+  all.forEach((layer, index) => {
+    if (layer.type !== "mask") lastContent = index;
+  });
+  if (hostIndex >= lastContent) return false;
+  layers.reorder(all[hostIndex].id, all.length - 1);
+  return true;
+}
+function hostBoxOf(canvas, host, absolute) {
+  if (!host) {
+    return { left: 0, top: 0, width: canvas.getWidth(), height: canvas.getHeight() };
+  }
+  if (absolute) {
+    host.setCoords();
+    const rect = host.getBoundingRect();
+    return { left: rect.left, top: rect.top, width: rect.width, height: rect.height };
+  }
+  const width = Math.max(1, host.width ?? 1);
+  const height = Math.max(1, host.height ?? 1);
+  return { left: -width / 2, top: -height / 2, width, height };
+}
+
+// src/masks/install.ts
+import { Group as Group3 } from "fabric";
+function convertSpace(host, sources, absolute) {
+  const wasAbsolute = host.clipPath instanceof Group3 ? host.clipPath.absolutePositioned : absolute;
+  if (absolute === wasAbsolute) return;
+  for (const source of sources) {
+    if (absolute) toCanvasSpace(source, host);
+    else toHostSpace(source, host);
+  }
+}
+function withRelativeTransforms(entries, sources, host, absolute) {
+  return entries.map((entry, index) => {
+    const source = sources[index];
+    if (absolute && entry.linked && source) {
+      return { ...entry, rel: [...relativeMatrix(source, host)] };
+    }
+    if (!entry.rel) return entry;
+    const rest = { ...entry };
+    delete rest.rel;
+    return rest;
+  });
+}
+function installClip(host, entries, sources, box, absolute) {
+  host.clipPath = composeMaskGroup(sources, entries, { box, absolute });
+  host.dirty = true;
+  host.setCoords();
+}
+
+// src/masks/store.ts
+var CANVAS_MASK_TARGET = "canvas";
+var DEFAULT_ENTRY = {
+  mode: "add",
+  linked: true,
+  visible: true,
+  opacity: 1
+};
+var MaskStackStore = class {
+  constructor(canvas, layers, history, events) {
+    this.canvas = canvas;
+    this.layers = layers;
+    this.history = history;
+    this.events = events;
+  }
+  canvas;
+  layers;
+  history;
+  events;
+  selected = null;
+  pinning = false;
+  list(target) {
+    return this.hostLayer(target)?.meta.maskStack ?? [];
+  }
+  get(target, maskId) {
+    return this.list(target).find((entry) => entry.id === maskId);
+  }
+  /** Every target that currently carries at least one mask. */
+  targets() {
+    return this.layers.getAll().filter((layer) => (layer.meta.maskStack ?? []).length > 0).map((layer) => layer.meta.canvasMask ? CANVAS_MASK_TARGET : layer.id);
+  }
+  /** The box a mask is fitted to, in the space the stack is composed in. */
+  hostBox(target, absolute = target === CANVAS_MASK_TARGET || needsAbsoluteSpace(this.list(target))) {
+    return hostBoxOf(this.canvas, this.host(target), absolute);
+  }
+  /** The host layer of a target, optionally creating the design overlay. */
+  hostLayer(target, create = false) {
+    if (target !== CANVAS_MASK_TARGET) return this.layers.get(target);
+    const existing = findCanvasHost(this.layers);
+    if (existing || !create) return existing;
+    return createCanvasHost(this.canvas, this.layers);
+  }
+  host(target, create = false) {
+    return this.hostLayer(target, create)?.fabricObject ?? null;
+  }
+  /** Re-pin the design overlay, guarding the reorder that re-triggers this. */
+  pin() {
+    if (this.pinning) return;
+    this.pinning = true;
+    try {
+      pinCanvasHost(this.layers);
+    } finally {
+      this.pinning = false;
+    }
+  }
+  /**
+   * Take the current geometry back out of the composed clip, entry-aligned.
+   *
+   * The entry list is the authority on how to read the clip: with no entries the
+   * clip predates the stack (a mask preset, or a single `clipPath` an older host
+   * installed) and is one mask whole — including when it happens to be a group,
+   * which is why this cannot just unwrap anything group-shaped.
+   */
+  unwrap(target, host) {
+    const clip = host.clipPath;
+    if (!clip) return [];
+    const entries = this.list(target);
+    if (entries.length === 0 || !(clip instanceof Group4)) return [asObject(clip)];
+    const children = unwrapGroup(clip);
+    const extra = children.length - entries.length;
+    return extra > 0 ? children.slice(extra) : children;
+  }
+  /**
+   * Entries for a stack, adopting a pre-stack clip as the first one. Without
+   * this, the first `add()` on an already-masked layer would compose a clip it
+   * has no entry for and silently throw that mask away.
+   */
+  entriesFor(target, sources) {
+    const existing = this.list(target);
+    if (existing.length > 0 || sources.length !== 1) return [...existing];
+    const layer = this.hostLayer(target);
+    const preset = layer?.meta.maskPreset;
+    if (layer) {
+      delete layer.meta.maskPreset;
+    }
+    return [
+      {
+        ...DEFAULT_ENTRY,
+        id: generateId(),
+        name: typeof preset === "string" ? preset : "Mask",
+        linked: target === CANVAS_MASK_TARGET ? false : !sources[0].absolutePositioned
+      }
+    ];
+  }
+  /**
+   * Install a stack: convert geometry into the space the stack needs, compose the
+   * clip, store the entries, and commit one history checkpoint for the lot.
+   */
+  commit(target, host, entries, sources, save = true, forceAbsolute = false) {
+    const layer = this.hostLayer(target);
+    if (!layer) return;
+    const absolute = forceAbsolute || target === CANVAS_MASK_TARGET || needsAbsoluteSpace(entries);
+    convertSpace(host, sources, absolute);
+    const next = withRelativeTransforms(entries, sources, host, absolute);
+    installClip(host, next, sources, this.hostBox(target, absolute), absolute);
+    if (next.length === 0) {
+      delete layer.meta.maskStack;
+      if (layer.meta.canvasMask) this.layers.remove(layer.id);
+    } else {
+      layer.meta.maskStack = next;
+    }
+    this.canvas.requestRenderAll();
+    this.events.emit("masks:changed", { target });
+    this.events.emit("layer:modified", { layerId: layer.id });
+    if (save) this.history.save();
+  }
+};
+
+// src/masks/manager.ts
+var LayerMaskManager = class extends MaskStackStore {
+  // Committing mid-drag would recompose the group the handle writes into and
+  // leave it pointing at a discarded object; the geometry is settled on endEdit.
+  edits = new MaskEditController(this.canvas, () => this.history.save());
+  onLayersChanged = () => this.pin();
+  // Selecting a layer means the user has moved on from the mask they had open;
+  // leaving both selected would show mask controls for an unrelated layer.
+  onLayerSelected = () => {
+    if (this.selected) this.select(null, null);
+  };
+  onObjectModified = (event) => {
+    const object = event.target;
+    if (!object) return;
+    const layer = this.layers.findByObject(object);
+    if (layer) this.reflow(layer.id);
+  };
+  constructor(canvas, layers, history, events) {
+    super(canvas, layers, history, events);
+    this.events.on("layers:changed", this.onLayersChanged);
+    this.events.on("layer:selected", this.onLayerSelected);
+    this.canvas.on("object:modified", this.onObjectModified);
+  }
+  dispose() {
+    this.edits.dispose();
+    this.events.off("layers:changed", this.onLayersChanged);
+    this.events.off("layer:selected", this.onLayerSelected);
+    this.canvas.off("object:modified", this.onObjectModified);
+    this.selected = null;
+  }
+  // ─── Geometry editing ────────────────────────────────
+  /** The mask currently being dragged on the canvas, if any. */
+  editing() {
+    return this.edits.active();
+  }
+  /**
+   * Put drag handles on one mask. The stack is composed in canvas space for the
+   * duration — a linked mask would otherwise sit in the host's space, where the
+   * handle's own canvas coordinates mean something else entirely. `endEdit`
+   * returns it to whichever space its entries call for.
+   */
+  async beginEdit(target, maskId) {
+    const host = this.host(target);
+    if (!host) return false;
+    const entries = this.list(target);
+    const index = entries.findIndex((entry) => entry.id === maskId);
+    if (index === -1) return false;
+    this.endEdit(false);
+    this.commit(target, host, [...entries], this.unwrap(target, host), false, true);
+    const group = host.clipPath instanceof Group5 ? host.clipPath : null;
+    if (!group) return false;
+    const children = group.getObjects();
+    const child = children[children.length - entries.length + index];
+    if (!child) return false;
+    this.select(target, maskId);
+    return this.edits.begin({ target, maskId }, group, child);
+  }
+  /** Take the handles down and settle the stack back into its own space. */
+  endEdit(save = true) {
+    const editing = this.edits.active();
+    this.edits.end();
+    if (editing) this.rebuild(editing.target, save);
+  }
+  // ─── Selection ───────────────────────────────────────
+  getSelected() {
+    return this.selected;
+  }
+  select(target, maskId) {
+    this.selected = target && maskId ? { target, maskId } : null;
+    this.events.emit("mask:selected", { target, maskId: this.selected ? maskId : null });
+  }
+  // ─── Mutations ───────────────────────────────────────
+  add(target, object, options = {}) {
+    const host = this.host(target, true);
+    if (!host) return null;
+    const sources = this.unwrap(target, host);
+    const entries = this.entriesFor(target, sources);
+    const entry = {
+      ...DEFAULT_ENTRY,
+      id: generateId(),
+      name: options.name ?? "Mask",
+      ...options.mode ? { mode: options.mode } : {},
+      ...options.linked === void 0 ? {} : { linked: options.linked },
+      ...options.meta ? { meta: options.meta } : {}
+    };
+    if (target === CANVAS_MASK_TARGET) entry.linked = false;
+    if (options.fit !== false) {
+      fitToBox(object, options.box ?? this.hostBox(target), options.fit ?? 1);
+    }
+    sources.push(object);
+    entries.push(entry);
+    this.commit(target, host, entries, sources);
+    return entry;
+  }
+  /** Swap one mask's geometry, keeping its identity, mode and position in the stack. */
+  replaceGeometry(target, maskId, object, options = {}) {
+    const host = this.host(target);
+    if (!host) return false;
+    const entries = [...this.list(target)];
+    const index = entries.findIndex((entry) => entry.id === maskId);
+    if (index === -1) return false;
+    const sources = this.unwrap(target, host);
+    if (options.fit !== false) {
+      fitToBox(object, options.box ?? this.hostBox(target), options.fit ?? 1);
+    }
+    sources[index] = object;
+    entries[index] = {
+      ...entries[index],
+      ...options.name ? { name: options.name } : {},
+      ...options.meta ? { meta: options.meta } : {}
+    };
+    this.commit(target, host, entries, sources);
+    return true;
+  }
+  /**
+   * Re-fit one mask to its host's box (or `box`) at `fit` scale, keeping the
+   * geometry it already has. This is what a zoom control drives: re-picking the
+   * mask would cost another render of a generated alpha map just to resize it.
+   */
+  refit(target, maskId, options = {}) {
+    const host = this.host(target);
+    if (!host) return false;
+    const entries = [...this.list(target)];
+    const index = entries.findIndex((entry) => entry.id === maskId);
+    if (index === -1) return false;
+    const sources = this.unwrap(target, host);
+    const source = sources[index];
+    if (!source) return false;
+    fitToBox(source, options.box ?? this.hostBox(target), options.fit ?? 1);
+    this.commit(target, host, entries, sources, options.save ?? true);
+    return true;
+  }
+  remove(target, maskId) {
+    const host = this.host(target);
+    if (!host) return false;
+    const entries = [...this.list(target)];
+    const index = entries.findIndex((entry) => entry.id === maskId);
+    if (index === -1) return false;
+    const sources = this.unwrap(target, host);
+    entries.splice(index, 1);
+    sources.splice(index, 1);
+    if (this.selected?.maskId === maskId) this.select(null, null);
+    this.commit(target, host, entries, sources);
+    return true;
+  }
+  clear(target) {
+    const host = this.host(target);
+    if (!host) return false;
+    if (this.list(target).length === 0) return false;
+    if (this.selected?.target === target) this.select(null, null);
+    this.commit(target, host, [], []);
+    return true;
+  }
+  reorder(target, maskId, index) {
+    const host = this.host(target);
+    if (!host) return false;
+    const entries = [...this.list(target)];
+    const from = entries.findIndex((entry2) => entry2.id === maskId);
+    if (from === -1) return false;
+    const to = Math.max(0, Math.min(entries.length - 1, Math.round(index)));
+    if (from === to) return false;
+    const sources = this.unwrap(target, host);
+    const [entry] = entries.splice(from, 1);
+    const [source] = sources.splice(from, 1);
+    entries.splice(to, 0, entry);
+    sources.splice(to, 0, source);
+    this.commit(target, host, entries, sources);
+    return true;
+  }
+  /** Replace a mask's host metadata (which preset or generator produced it). */
+  setMeta(target, maskId, meta) {
+    return this.patch(target, maskId, () => ({ meta }));
+  }
+  setMode(target, maskId, mode) {
+    return this.patch(target, maskId, (entry) => entry.mode === mode ? null : { mode });
+  }
+  setVisible(target, maskId, visible) {
+    return this.patch(target, maskId, (entry) => entry.visible === visible ? null : { visible });
+  }
+  setOpacity(target, maskId, opacity) {
+    if (!Number.isFinite(opacity)) return false;
+    const next = Math.max(0, Math.min(1, opacity));
+    return this.patch(
+      target,
+      maskId,
+      (entry) => entry.opacity === next ? null : { opacity: next }
+    );
+  }
+  setName(target, maskId, name) {
+    const trimmed = name.trim();
+    if (!trimmed) return false;
+    return this.patch(
+      target,
+      maskId,
+      (entry) => entry.name === trimmed ? null : { name: trimmed }
+    );
+  }
+  /**
+   * Link or unlink one mask. Unlinking pins it where it currently appears;
+   * re-linking records its position relative to the host so later host moves
+   * carry it along.
+   */
+  setLinked(target, maskId, linked) {
+    if (target === CANVAS_MASK_TARGET) return false;
+    const host = this.host(target);
+    if (!host) return false;
+    const entries = [...this.list(target)];
+    const index = entries.findIndex((entry) => entry.id === maskId);
+    if (index === -1 || entries[index].linked === linked) return false;
+    const sources = this.unwrap(target, host);
+    entries[index] = { ...entries[index], linked };
+    this.commit(target, host, entries, sources);
+    return true;
+  }
+  /**
+   * Consume a layer, turning its artwork into a mask. Without an explicit target
+   * it masks the layer directly beneath it, and the bottom layer masks the whole
+   * design — there is nothing under it to clip.
+   */
+  convertLayer(layerId, target) {
+    const layer = this.layers.get(layerId);
+    if (!layer || layer.meta.canvasMask) return null;
+    const ordered = this.layers.getAll();
+    const index = ordered.findIndex((candidate) => candidate.id === layerId);
+    const below = index > 0 ? ordered[index - 1] : void 0;
+    const resolved = target ?? (below && !below.meta.canvasMask ? below.id : CANVAS_MASK_TARGET);
+    if (resolved === layerId) return null;
+    const object = layer.fabricObject;
+    if (!object.fill && object.type !== "image") object.set({ fill: "#000000" });
+    this.history.beginTransaction();
+    try {
+      if (this.canvas.getActiveObject() === object) this.canvas.discardActiveObject();
+      this.canvas.remove(object);
+      this.layers.remove(layerId);
+      const entry = this.add(resolved, object, { name: layer.name, fit: false });
+      return entry ? { target: resolved, entry } : null;
+    } finally {
+      this.history.endTransaction();
+    }
+  }
+  // ─── Rebuild / restore ───────────────────────────────
+  /** Recompose one stack's clip from the geometry it already holds. */
+  rebuild(target, save = false) {
+    const host = this.host(target);
+    if (!host) return;
+    const sources = this.unwrap(target, host);
+    if (sources.length === 0) return;
+    this.commit(target, host, this.entriesFor(target, sources), sources, save);
+  }
+  /** Re-derive linked masks after the host moved (canvas-space stacks only). */
+  reflow(target) {
+    const host = this.host(target);
+    if (!host) return;
+    const entries = this.list(target);
+    if (entries.length === 0 || !needsAbsoluteSpace(entries)) return;
+    if (!entries.some((entry) => entry.linked && entry.rel)) return;
+    const sources = this.unwrap(target, host);
+    entries.forEach((entry, index) => {
+      const source = sources[index];
+      const rel = toMatrix(entry.rel);
+      if (!source || !entry.linked || !rel) return;
+      applyRelativeMatrix(source, host, rel);
+    });
+    this.commit(target, host, [...entries], sources);
+  }
+  /**
+   * Adopt a clip this manager did not install — a host's own single `clipPath` —
+   * as a one-entry stack, so it shows up in the UI as a mask row before anything
+   * is added to it. A mask preset is left alone unless asked for by name: it is
+   * still owned by `MaskPresetManager` until a stack operation takes it over.
+   */
+  adopt(target, name) {
+    const layer = this.hostLayer(target);
+    const clip = layer?.fabricObject.clipPath;
+    if (!layer || !clip || layer.meta.pattern) return null;
+    if ((layer.meta.maskStack ?? []).length > 0) return null;
+    const entry = {
+      ...DEFAULT_ENTRY,
+      id: generateId(),
+      name: name ?? "Mask",
+      linked: target === CANVAS_MASK_TARGET ? false : !clip.absolutePositioned
+    };
+    layer.meta.maskStack = [entry];
+    delete layer.meta.maskPreset;
+    this.rebuild(target);
+    return entry;
+  }
+  /** After a state restore: re-pin the design overlay and recompose every stack. */
+  refreshAll() {
+    this.selected = null;
+    this.pin();
+    for (const layer of this.layers.getAll()) {
+      if ((layer.meta.maskStack ?? []).length === 0) continue;
+      this.rebuild(layer.meta.canvasMask ? CANVAS_MASK_TARGET : layer.id);
+    }
+  }
+  // ─── Internals ───────────────────────────────────────
+  patch(target, maskId, change) {
+    const host = this.host(target);
+    if (!host) return false;
+    const entries = [...this.list(target)];
+    const index = entries.findIndex((entry) => entry.id === maskId);
+    if (index === -1) return false;
+    const patch = change(entries[index]);
+    if (!patch) return false;
+    const sources = this.unwrap(target, host);
+    entries[index] = { ...entries[index], ...patch };
+    this.commit(target, host, entries, sources);
+    return true;
+  }
+};
+
 // src/editor.ts
 var MIN_ZOOM = 0.1;
 var MAX_ZOOM = 8;
@@ -2546,6 +3473,8 @@ var CanvasEditor = class {
   patterns;
   curves;
   maskPresets;
+  /** Stacked boolean masks, per layer and for the design as a whole. */
+  layerMasks;
   fonts;
   licensing;
   pages;
@@ -2594,6 +3523,7 @@ var CanvasEditor = class {
     this.patterns = new PatternManager(this.canvas, this.layers, this.history, this.events);
     this.curves = new TextCurveManager(this.canvas, this.layers, this.history, this.events);
     this.maskPresets = new MaskPresetManager(this.canvas, this.layers, this.history, this.events);
+    this.layerMasks = new LayerMaskManager(this.canvas, this.layers, this.history, this.events);
     this.setupCanvasEvents();
     this.refreshSelectionStyle();
     this.history.saveImmediate();
@@ -2609,6 +3539,7 @@ var CanvasEditor = class {
         { originX: "left", originY: "top", ...options }
       );
       const layer = this.layers.add("image", img);
+      this.layers.select(layer.id);
       this.history.save();
       return layer;
     } catch (error) {
@@ -2668,12 +3599,14 @@ var CanvasEditor = class {
       ...options
     });
     const layer = this.layers.add("text", textbox);
+    this.layers.select(layer.id);
     this.history.save();
     return layer;
   }
   addShape(plugin, options) {
     const obj = plugin.create(options);
     const layer = this.layers.add("shape", obj, plugin.name);
+    this.layers.select(layer.id);
     this.history.save();
     return layer;
   }
@@ -2699,7 +3632,7 @@ var CanvasEditor = class {
     const { objects, options } = await loadSVGFromString(resolved);
     const validObjects = objects.filter((object) => object !== null);
     if (validObjects.length === 0) throw new Error("Template SVG contains no renderable objects");
-    const group = util3.groupSVGElements(validObjects, options);
+    const group = util5.groupSVGElements(validObjects, options);
     group.set({
       left: this.canvas.getWidth() / 2,
       top: this.canvas.getHeight() / 2,
@@ -2707,6 +3640,7 @@ var CanvasEditor = class {
       originY: "center"
     });
     const layer = this.layers.add("template", group, template.name);
+    this.layers.select(layer.id);
     this.history.save();
     return layer;
   }
@@ -2758,7 +3692,7 @@ var CanvasEditor = class {
       opacity: layer.opacity
     });
     this.patterns.attachTo(copy);
-    this.canvas.setActiveObject(clone);
+    this.layers.select(copy.id);
     this.canvas.requestRenderAll();
     this.history.save();
     return copy;
@@ -2791,7 +3725,7 @@ var CanvasEditor = class {
       const childData = children.map((layer) => structuredClone(layer.toData()));
       const objects = children.map((layer) => layer.fabricObject);
       for (const layer of children) this.layers.remove(layer.id);
-      const group = new Group(objects);
+      const group = new Group6(objects);
       const grouped = this.layers.add("group", group, name);
       grouped.meta.groupChildren = childData;
       this.layers.select(grouped.id);
@@ -2806,11 +3740,9 @@ var CanvasEditor = class {
     if (!grouped || grouped.type !== "group" || !Array.isArray(childData)) return [];
     const group = grouped.fabricObject;
     return this.history.transaction(() => {
-      const transform = group.calcTransformMatrix();
       const objects = group.removeAll();
       this.layers.remove(id);
       const restored = objects.map((object, index) => {
-        util3.addTransformToObject(object, transform);
         object.setCoords();
         const data = childData[index];
         const layer = this.layers.add(data?.type ?? "group", object, data?.name, data?.id);
@@ -2838,6 +3770,7 @@ var CanvasEditor = class {
     try {
       await deserializeEditor(this, state);
       await this.patterns.rehydrateAll();
+      this.layerMasks.refreshAll();
     } catch (error) {
       if (!managedByHistory) {
         this.events.emit("error", { message: "Failed to load editor state", error });
@@ -3410,6 +4343,7 @@ var CanvasEditor = class {
   // ─── Cleanup ────────────────────────────────────────
   dispose() {
     this.masks.dispose();
+    this.layerMasks.dispose();
     this.snapping.dispose();
     this.crop.dispose();
     this.history.dispose();
@@ -3532,6 +4466,7 @@ var AnnotationOverlay = class {
 };
 export {
   AnnotationOverlay,
+  CANVAS_MASK_TARGET,
   CANVAS_SIZE_PRESETS,
   CanvasEditor,
   CropController,
@@ -3544,6 +4479,7 @@ export {
   HistoryManager,
   Layer,
   LayerManager,
+  LayerMaskManager,
   LicenseManager,
   MaskController,
   MaskPresetManager,
@@ -3565,6 +4501,7 @@ export {
   buildCurvePathData,
   clamp,
   clearTextureMaskCache,
+  composeMaskGroup,
   computeCoverPlacement,
   computePrintAreaClip,
   computeTilePositions,
@@ -3577,11 +4514,13 @@ export {
   exportPNG,
   exportPrintArea,
   exportSVG,
+  fitToBox,
   generateId,
   isCssColor,
   isMaskPresetId,
   isShapeMaskId,
   isTextureMaskId,
+  needsAbsoluteSpace,
   readLayerShadow,
   renderTextureMask,
   resetTransform,
@@ -3589,6 +4528,9 @@ export {
   round2,
   sanitizeSvg,
   serializeEditor,
-  shapeMaskPathData
+  shapeMaskPathData,
+  toCanvasSpace,
+  toHostSpace,
+  unwrapGroup
 };
 //# sourceMappingURL=index.mjs.map