@overtone-art/canvas-editor-core 0.3.2 → 0.5.0

package/dist/index.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AnnotationOverlay: () => AnnotationOverlay,
+  CANVAS_MASK_TARGET: () => CANVAS_MASK_TARGET,
   CANVAS_SIZE_PRESETS: () => CANVAS_SIZE_PRESETS,
   CanvasEditor: () => CanvasEditor,
   CropController: () => CropController,
@@ -33,6 +34,7 @@ __export(index_exports, {
   HistoryManager: () => HistoryManager,
   Layer: () => Layer,
   LayerManager: () => LayerManager,
+  LayerMaskManager: () => LayerMaskManager,
   LicenseManager: () => LicenseManager,
   MaskController: () => MaskController,
   MaskPresetManager: () => MaskPresetManager,
@@ -45,18 +47,16 @@ __export(index_exports, {
   TEXTURE_MASK_IDS: () => TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE: () => TEXTURE_MASK_SIZE,
   TextCurveManager: () => TextCurveManager,
+  TiledPatternObject: () => TiledPatternObject,
   UnitConverter: () => UnitConverter,
   applyAspectLock: () => applyAspectLock,
   applyLayerShadow: () => applyLayerShadow,
   applyObjectSelectionStyle: () => applyObjectSelectionStyle,
-  applyPatternLocks: () => applyPatternLocks,
   applySelectionStyle: () => applySelectionStyle,
   buildCurvePathData: () => buildCurvePathData,
-  buildPatternDataURL: () => buildPatternDataURL,
-  captureLocks: () => captureLocks,
   clamp: () => clamp,
-  clearPatternImageCache: () => clearPatternImageCache,
   clearTextureMaskCache: () => clearTextureMaskCache,
+  composeMaskGroup: () => composeMaskGroup,
   computeCoverPlacement: () => computeCoverPlacement,
   computePrintAreaClip: () => computePrintAreaClip,
   computeTilePositions: () => computeTilePositions,
@@ -69,12 +69,13 @@ __export(index_exports, {
   exportPNG: () => exportPNG,
   exportPrintArea: () => exportPrintArea,
   exportSVG: () => exportSVG,
+  fitToBox: () => fitToBox,
   generateId: () => generateId,
   isCssColor: () => isCssColor,
   isMaskPresetId: () => isMaskPresetId,
   isShapeMaskId: () => isShapeMaskId,
   isTextureMaskId: () => isTextureMaskId,
-  loadPatternImage: () => loadPatternImage,
+  needsAbsoluteSpace: () => needsAbsoluteSpace,
   readLayerShadow: () => readLayerShadow,
   renderTextureMask: () => renderTextureMask,
   resetTransform: () => resetTransform,
@@ -82,12 +83,15 @@ __export(index_exports, {
   round2: () => round2,
   sanitizeSvg: () => sanitizeSvg,
   serializeEditor: () => serializeEditor,
-  shapeMaskPathData: () => shapeMaskPathData
+  shapeMaskPathData: () => shapeMaskPathData,
+  toCanvasSpace: () => toCanvasSpace,
+  toHostSpace: () => toHostSpace,
+  unwrapGroup: () => unwrapGroup
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/editor.ts
-var import_fabric9 = require("fabric");
+var import_fabric17 = require("fabric");
 
 // src/events.ts
 var EventEmitter = class {
@@ -139,6 +143,12 @@ var Layer = class {
   /** Non-fabric data (e.g. pattern config) that must persist with the layer. */
   meta;
   fabricObject;
+  /**
+   * Stand-in object drawn in place of `fabricObject` (the tiled pattern). It is
+   * part of the canvas but never part of the document: it is not serialized, and
+   * the layer's real object stays the one every editor API talks to.
+   */
+  renderProxy;
   constructor(type, fabricObject, name, id) {
     this.id = id ?? generateId();
     this.type = type;
@@ -148,6 +158,7 @@ var Layer = class {
     this.opacity = 1;
     this.meta = {};
     this.fabricObject = fabricObject;
+    this.renderProxy = null;
     this.fabricObject._layerId = this.id;
   }
   hasMeta() {
@@ -196,6 +207,7 @@ var LayerManager = class {
     if (index === -1) return false;
     const layer = this.layers[index];
     this.canvas.remove(layer.fabricObject);
+    if (layer.renderProxy) this.canvas.remove(layer.renderProxy);
     this.layers.splice(index, 1);
     this.events.emit("layer:removed", { layerId: id });
     this.emitChanged();
@@ -219,6 +231,10 @@ var LayerManager = class {
       evented: !layer.locked
     });
     this.canvas.insertAt(Math.max(0, stackIndex), fabricObject);
+    if (layer.renderProxy) {
+      fabricObject.set({ opacity: 0 });
+      this.syncZOrder();
+    }
     if (wasActive) this.canvas.setActiveObject(fabricObject);
     this.canvas.requestRenderAll();
     this.events.emit("layer:modified", { layerId: id });
@@ -226,6 +242,42 @@ var LayerManager = class {
     this.onPropertyChanged?.();
     return true;
   }
+  /**
+   * Attach (or clear) the object drawn in place of a layer's own object. The
+   * proxy tracks the layer's stacking position, visibility and opacity, and is
+   * removed with the layer — it must never outlive or drift from its source.
+   */
+  setRenderProxy(id, proxy) {
+    const layer = this.get(id);
+    if (!layer || layer.renderProxy === proxy) return;
+    if (layer.renderProxy) this.canvas.remove(layer.renderProxy);
+    layer.renderProxy = proxy;
+    if (proxy) {
+      proxy._layerId = id;
+      proxy.set({
+        visible: layer.visible,
+        opacity: layer.opacity,
+        selectable: !layer.locked,
+        evented: !layer.locked
+      });
+      this.canvas.add(proxy);
+      this.syncZOrder();
+    }
+    this.canvas.requestRenderAll();
+    this.emitChanged();
+  }
+  /**
+   * Re-stack every canvas object to match layer order, keeping each proxy
+   * directly above the source it stands in for. Canvas indices can't be derived
+   * from layer indices once proxies are in the array, so the order is rebuilt
+   * front-to-back instead of computed.
+   */
+  syncZOrder() {
+    for (const layer of this.layers) {
+      this.canvas.bringObjectToFront(layer.fabricObject);
+      if (layer.renderProxy) this.canvas.bringObjectToFront(layer.renderProxy);
+    }
+  }
   reorder(id, newIndex) {
     const oldIndex = this.layers.findIndex((l) => l.id === id);
     if (oldIndex === -1) return false;
@@ -234,9 +286,7 @@ var LayerManager = class {
     if (oldIndex === clamped) return false;
     const [layer] = this.layers.splice(oldIndex, 1);
     this.layers.splice(clamped, 0, layer);
-    this.layers.forEach((l, i) => {
-      this.canvas.moveObjectTo(l.fabricObject, i);
-    });
+    this.syncZOrder();
     this.events.emit("layer:reordered", { layerIds: this.layers.map((l) => l.id) });
     this.emitChanged();
     this.onPropertyChanged?.();
@@ -248,7 +298,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();
@@ -273,6 +323,7 @@ var LayerManager = class {
     if (layer.visible === visible) return;
     layer.visible = visible;
     layer.fabricObject.visible = visible;
+    if (layer.renderProxy) layer.renderProxy.visible = visible;
     this.canvas.requestRenderAll();
     this.emitChanged();
     this.onPropertyChanged?.();
@@ -282,8 +333,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?.();
@@ -294,7 +346,8 @@ var LayerManager = class {
     const next = Math.max(0, Math.min(1, opacity));
     if (layer.opacity === next) return;
     layer.opacity = next;
-    layer.fabricObject.opacity = next;
+    if (layer.renderProxy) layer.renderProxy.opacity = next;
+    else layer.fabricObject.opacity = next;
     this.canvas.requestRenderAll();
     this.emitChanged();
     this.onPropertyChanged?.();
@@ -342,6 +395,7 @@ var LayerManager = class {
   clear() {
     for (const layer of this.layers) {
       this.canvas.remove(layer.fabricObject);
+      if (layer.renderProxy) this.canvas.remove(layer.renderProxy);
     }
     this.layers = [];
     this.emitChanged();
@@ -875,199 +929,536 @@ var CropController = class {
 };
 var STROKE2 = "#22c55e";
 
-// src/pattern.ts
+// src/pattern/pattern-manager.ts
+var import_fabric3 = require("fabric");
+
+// src/pattern/tiled-pattern-object.ts
 var import_fabric2 = require("fabric");
+
+// src/pattern/tile-geometry.ts
 var MAX_TILES_PER_AXIS = 200;
+function computeTilePositions(config, targetW, targetH, baseW, baseH, origin) {
+  const anchor = origin ?? { x: targetW / 2, y: targetH / 2 };
+  const radius = cornerRadius(anchor, targetW, targetH);
+  const span = radius * 2;
+  const minTile = Math.max(1, span / MAX_TILES_PER_AXIS);
+  const tileW = Math.max(minTile, baseW * (1 + config.horizontalSpacing / 100));
+  const tileH = Math.max(minTile, baseH * (1 + config.verticalSpacing / 100));
+  const cols = Math.ceil(span / tileW) + 2;
+  const rows = Math.ceil(span / tileH) + 2;
+  const halfCols = Math.ceil(cols / 2);
+  const halfRows = Math.ceil(rows / 2);
+  const shiftX = tileW * (clampOffset(config.offsetX) / 100);
+  const shiftY = tileH * (clampOffset(config.offsetY) / 100);
+  const placements = [];
+  for (let j = -halfRows; j <= halfRows; j++) {
+    for (let i = -halfCols; i <= halfCols; i++) {
+      let x = i * tileW + shiftX;
+      let y = j * tileH + shiftY;
+      if (config.mode === "brick-horizontal" && mod2(j) === 1) {
+        x += tileW * (config.horizontalOffset / 100);
+      } else if (config.mode === "brick-vertical" && mod2(i) === 1) {
+        y += tileH * (config.horizontalOffset / 100);
+      }
+      const rotation = (i * config.rotationStepH + j * config.rotationStepV) * Math.PI / 180;
+      placements.push({ x, y, rotation });
+    }
+  }
+  return placements;
+}
+function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin) {
+  const anchor = origin ?? { x: targetW / 2, y: targetH / 2 };
+  ctx.save();
+  ctx.translate(anchor.x, anchor.y);
+  ctx.rotate(config.angle * Math.PI / 180);
+  for (const tile of computeTilePositions(config, targetW, targetH, baseW, baseH, anchor)) {
+    ctx.save();
+    ctx.translate(tile.x, tile.y);
+    ctx.rotate(tile.rotation);
+    ctx.drawImage(img, -baseW / 2, -baseH / 2, baseW, baseH);
+    ctx.restore();
+  }
+  ctx.restore();
+}
+function cornerRadius(origin, w, h) {
+  const dx = Math.max(Math.abs(origin.x), Math.abs(w - origin.x));
+  const dy = Math.max(Math.abs(origin.y), Math.abs(h - origin.y));
+  return Math.sqrt(dx * dx + dy * dy);
+}
+function clampOffset(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return 0;
+  return Math.max(-100, Math.min(100, value));
+}
+function mod2(n) {
+  return (n % 2 + 2) % 2;
+}
+
+// src/pattern/tiled-pattern-object.ts
+var MAX_SNAPSHOT_PIXELS = 16e6;
+var MAX_SNAPSHOT_SCALE = 8;
+var SNAPSHOT_SHRINK_FACTOR = 2;
+var TiledPatternObject = class _TiledPatternObject extends import_fabric2.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, area) {
+    super({
+      // Centre origin: the box tracks a tile, and a tile is placed by its centre.
+      originX: "center",
+      originY: "center",
+      objectCaching: 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 and re-fit the box to the tile it now describes. */
+  setConfig(config) {
+    this.config = config;
+    this.syncBox();
+  }
+  /** Re-fit to a new print area (canvas resize). */
+  setArea(area) {
+    this.area = area;
+    this.invalidate();
+    this.syncBox();
+  }
+  /** Drop the cached source snapshot (the source was edited). */
+  invalidate() {
+    this.snapshotEl = null;
+    this.snapshotScale = 0;
+    this.dirty = true;
+  }
+  /** Free the offscreen snapshot. */
+  dispose() {
+    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 import_fabric2.Point(centre.x - shift.x, centre.y - shift.y);
+  }
+  _render(ctx) {
+    const { width, height } = this.area;
+    if (width <= 0 || height <= 0) return;
+    const { tileW, tileH } = this.liveTile();
+    const snapshot = this.ensureSnapshot(contextScale(ctx) * (tileW / Math.max(1, this.baseW())));
+    if (!snapshot) return;
+    const centre = this.getCenterPoint();
+    const angle = this.liveAngle();
+    ctx.save();
+    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);
+    ctx.restore();
+  }
+  /** Raster fallback for SVG export — one `<image>` covering the print area. */
+  _toSVG() {
+    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 { tileW, tileH } = this.liveTile();
+    const snapshot = this.ensureSnapshot(tileW / Math.max(1, this.baseW()));
+    if (!snapshot) return [];
+    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 }
+    );
+    return [
+      `<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
+   * every canvas object, so without this a print export would silently lose the
+   * tiling. The copy shares the source (it only ever reads from it).
+   */
+  clone() {
+    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 source's on-canvas width, before the tile scale. */
+  baseW() {
+    return Math.max(1, this.source.getBoundingRect().width);
+  }
+  /** Tile size from the config alone, ignoring any in-flight gesture. */
+  baseTile() {
+    const rect = this.source.getBoundingRect();
+    const scale = Math.max(1, this.config.scale ?? 100) / 100;
+    const floor = this.tileFloor();
+    return {
+      tileW: Math.max(floor, rect.width * scale),
+      tileH: Math.max(floor, rect.height * scale)
+    };
+  }
+  /** 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, base.tileW * Math.abs(this.scaleX ?? 1)),
+      tileH: Math.max(floor, base.tileH * Math.abs(this.scaleY ?? 1))
+    };
+  }
+  /** 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 import_fabric2.Point(dx * cos - dy * sin, dx * sin + dy * cos);
+  }
+  anchorFromOrigin(origin, tileW, tileH, angle) {
+    const shift = this.shiftVector(tileW, tileH, angle);
+    return new import_fabric2.Point(origin.x + shift.x, origin.y + shift.y);
+  }
+  /**
+   * 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);
+    const stale = this.source.dirty || !this.snapshotEl || this.snapshotScale < wanted || this.snapshotScale > wanted * SNAPSHOT_SHRINK_FACTOR;
+    if (!stale) return this.snapshotEl;
+    const source = this.source;
+    const opacity = source.opacity;
+    source.opacity = 1;
+    try {
+      const el = source.toCanvasElement({ multiplier: wanted, enableRetinaScaling: false });
+      if (!el.width || !el.height) return null;
+      this.snapshotEl = el;
+      this.snapshotScale = wanted;
+    } catch {
+      return this.snapshotEl;
+    } finally {
+      source.opacity = opacity;
+      source.dirty = false;
+    }
+    return this.snapshotEl;
+  }
+  /** Bound the snapshot by both a linear scale and a total pixel budget. */
+  clampScale(scale) {
+    const requested = Math.min(MAX_SNAPSHOT_SCALE, Math.max(0.05, scale));
+    const rect = this.source.getBoundingRect();
+    const area = Math.max(1, rect.width * rect.height);
+    const budgeted = Math.sqrt(MAX_SNAPSHOT_PIXELS / area);
+    return Math.max(0.05, Math.min(requested, budgeted));
+  }
+};
+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 {
+    const t = ctx.getTransform();
+    return Math.max(Math.hypot(t.a, t.b), Math.hypot(t.c, t.d), 0.05);
+  } catch {
+    return 1;
+  }
+}
+
+// src/pattern/pattern-manager.ts
+var MIN_TILE_SCALE = 10;
+var MAX_TILE_SCALE = 300;
 var PatternManager = class {
-  constructor(canvas, layers, history, events, sourceResolver) {
+  constructor(canvas, layers, history, events) {
     this.canvas = canvas;
     this.layers = layers;
     this.history = history;
     this.events = events;
-    this.sourceResolver = sourceResolver;
+    this.canvas.on("object:modified", this.onObjectModified);
+    this.canvas.on("text:changed", this.onSourceModified);
+    this.events.on("layer:removed", this.onLayerRemoved);
   }
   canvas;
   layers;
   history;
   events;
-  sourceResolver;
-  // Per-layer task chain. apply()/disable() both await an async setSrc on the
-  // same fabric image; running two concurrently lets their setSrc resolutions
-  // interleave (wrong image installed, original lost). Serialising per layer
-  // guarantees the last-requested operation wins and state stays consistent.
-  chains = /* @__PURE__ */ new Map();
+  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);
+  };
+  onLayerRemoved = ({ layerId }) => {
+    const proxy = this.proxies.get(layerId);
+    if (!proxy) return;
+    proxy.dispose();
+    this.proxies.delete(layerId);
+  };
   isPattern(layerId) {
     return !!this.layers.get(layerId)?.meta.pattern;
   }
   getConfig(layerId) {
     return this.layers.get(layerId)?.meta.pattern?.config ?? null;
   }
-  /** Turn a plain image layer into a pattern, or update an existing one. */
-  apply(layerId, config) {
-    return this.enqueue(layerId, async () => {
-      const layer = this.layers.get(layerId);
-      if (!layer || layer.type !== "image") return;
-      const image = layer.fabricObject;
-      const firstEnable = !layer.meta.pattern;
-      if (!layer.meta.pattern) {
-        const clip = image.clipPath;
-        layer.meta.pattern = {
-          config,
-          originalSrc: elementToDataURL(image) ?? image.getSrc(),
-          originalClip: clip ? clip.toObject() : null,
-          originalLocks: captureLocks(image),
-          original: {
-            left: image.left ?? 0,
-            top: image.top ?? 0,
-            scaleX: image.scaleX ?? 1,
-            scaleY: image.scaleY ?? 1,
-            width: image.width ?? 0,
-            height: image.height ?? 0,
-            angle: image.angle ?? 0,
-            cropX: image.cropX ?? 0,
-            cropY: image.cropY ?? 0
-          }
-        };
+  /** Turn a layer into a repeating pattern, or update an existing one. */
+  async apply(layerId, config) {
+    const layer = this.layers.get(layerId);
+    if (!layer) return;
+    try {
+      this.layers.setMeta(layerId, { pattern: { config } });
+      const proxy = this.proxies.get(layerId);
+      if (proxy) {
+        proxy.setConfig(config);
+        this.canvas.requestRenderAll();
       } else {
-        layer.meta.pattern.config = config;
-      }
-      try {
-        await this.renderLayer(layer);
-      } catch (err) {
-        if (firstEnable) delete layer.meta.pattern;
-        throw err;
+        this.attach(layer, config);
       }
       this.history.save();
-    }).catch((error) => {
-      this.events.emit("error", { message: "Failed to apply image pattern", error });
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to apply pattern", error });
       throw error;
-    });
-  }
-  /**
-   * Stretch every restored pattern layer back over the full print area and
-   * re-freeze it, without re-rasterising: the baked bitmap keeps whatever size
-   * it was saved at, so it is scaled (not re-tiled) to the current canvas. Used
-   * after a state restore, where the canvas may be a different display size
-   * than when the pattern was baked — and to repair states saved while a
-   * pattern could still be dragged out of the print area.
-   */
-  repinAll() {
-    const cw = this.canvas.getWidth();
-    const ch = this.canvas.getHeight();
-    let changed = false;
-    for (const layer of this.layers.getAll()) {
-      if (!layer.meta.pattern || layer.type !== "image") continue;
-      const image = layer.fabricObject;
-      image.set({
-        left: 0,
-        top: 0,
-        angle: 0,
-        scaleX: cw / (image.width || cw),
-        scaleY: ch / (image.height || ch)
-      });
-      applyPatternLocks(image);
-      image.setCoords();
-      changed = true;
     }
-    if (changed) this.canvas.requestRenderAll();
   }
-  /** Restore the original image and drop the pattern. */
-  disable(layerId) {
-    return this.enqueue(layerId, async () => {
-      const layer = this.layers.get(layerId);
-      const state = layer?.meta.pattern;
-      if (!layer || !state) return;
-      const image = layer.fabricObject;
-      await image.setSrc(state.originalSrc);
-      image.set({
-        left: state.original.left,
-        top: state.original.top,
-        scaleX: state.original.scaleX,
-        scaleY: state.original.scaleY,
-        width: state.original.width,
-        height: state.original.height,
-        cropX: state.original.cropX,
-        cropY: state.original.cropY,
-        angle: state.original.angle
+  /** Drop the tiling and show the source again. */
+  async disable(layerId) {
+    const layer = this.layers.get(layerId);
+    if (!layer?.meta.pattern) return;
+    try {
+      this.detach(layerId);
+      restoreLocks(layer.fabricObject, layer.meta.pattern.originalLocks);
+      layer.fabricObject.set({
+        opacity: layer.opacity,
+        selectable: !layer.locked,
+        evented: !layer.locked
       });
-      image.clipPath = state.originalClip ? (await import_fabric2.util.enlivenObjects([state.originalClip]))[0] : void 0;
-      restoreLocks(image, state.originalLocks);
-      image.setCoords();
-      delete layer.meta.pattern;
+      this.layers.setMeta(layerId, { pattern: void 0 });
       this.canvas.requestRenderAll();
       this.history.save();
-    }).catch((error) => {
-      this.events.emit("error", { message: "Failed to clear image pattern", error });
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to clear pattern", error });
       throw error;
-    });
+    }
   }
-  /** Run `task` after any in-flight work for this layer, regardless of outcome. */
-  enqueue(layerId, task) {
-    const prev = this.chains.get(layerId) ?? Promise.resolve();
-    const next = prev.then(task, task);
-    this.chains.set(
-      layerId,
-      next.catch(() => void 0)
-    );
-    return next;
+  /**
+   * Rebuild every proxy after a state restore, migrating any layer that was
+   * saved by the old bake-into-the-layer engine.
+   */
+  async rehydrateAll() {
+    this.clearProxies();
+    for (const layer of this.layers.getAll()) {
+      const state = layer.meta.pattern;
+      if (!state) continue;
+      try {
+        if (isLegacyState(state)) {
+          await unbakeLegacyLayer(layer, state);
+          this.layers.setMeta(layer.id, { pattern: { config: state.config } });
+        }
+        this.attach(layer, state.config);
+      } catch (error) {
+        this.events.emit("error", { message: "Failed to restore pattern layer", error });
+      }
+    }
+    this.canvas.requestRenderAll();
+  }
+  /** Re-fit every proxy to the print area (canvas resize). */
+  syncArea() {
+    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). */
+  invalidate(layerId) {
+    const proxy = this.proxies.get(layerId);
+    if (!proxy) return;
+    proxy.invalidate();
+    proxy.syncBox();
+    this.canvas.requestRenderAll();
   }
-  async renderLayer(layer) {
+  /** Give a freshly cloned layer its own proxy (duplicating a pattern layer). */
+  attachTo(layer) {
     const state = layer.meta.pattern;
-    if (!state) return;
-    const image = layer.fabricObject;
-    const cw = this.canvas.getWidth();
-    const ch = this.canvas.getHeight();
-    const scale = Math.max(1, state.config.scale ?? 100) / 100;
-    const diag = Math.sqrt(cw * cw + ch * ch);
-    const minTile = Math.max(2, diag / MAX_TILES_PER_AXIS);
-    const tileW = Math.max(minTile, state.original.width * state.original.scaleX * scale);
-    const tileH = Math.max(minTile, state.original.height * state.original.scaleY * scale);
-    const dataUrl = await buildPatternDataURL(
-      state.originalSrc,
-      state.config,
-      cw,
-      ch,
-      tileW,
-      tileH,
-      this.sourceResolver
-    );
-    await image.setSrc(dataUrl);
-    image.set({
-      left: 0,
-      top: 0,
-      scaleX: 1,
-      scaleY: 1,
-      width: cw,
-      height: ch,
-      cropX: 0,
-      cropY: 0,
-      angle: 0
-    });
-    image.clipPath = void 0;
-    applyPatternLocks(image);
-    image.setCoords();
+    if (!state || this.proxies.has(layer.id)) return;
+    this.attach(layer, state.config);
+  }
+  dispose() {
+    this.canvas.off("object:modified", this.onObjectModified);
+    this.canvas.off("text:changed", this.onSourceModified);
+    this.events.off("layer:removed", this.onLayerRemoved);
+    this.clearProxies();
+  }
+  /** Release every proxy and the offscreen snapshot it holds. */
+  clearProxies() {
+    for (const proxy of this.proxies.values()) proxy.dispose();
+    this.proxies.clear();
+  }
+  attach(layer, config) {
+    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) {
+      this.layers.setRenderProxy(layerId, null);
+      return;
+    }
+    this.layers.setRenderProxy(layerId, null);
+    proxy.dispose();
+    this.proxies.delete(layerId);
+  }
+  invalidateFor(target) {
+    if (!target) return;
+    const layer = this.layers.findByObject(target);
+    if (layer) this.invalidate(layer.id);
   }
 };
-function captureLocks(obj) {
-  return {
-    lockMovementX: obj.lockMovementX ?? false,
-    lockMovementY: obj.lockMovementY ?? false,
-    lockScalingX: obj.lockScalingX ?? false,
-    lockScalingY: obj.lockScalingY ?? false,
-    lockRotation: obj.lockRotation ?? false,
-    hasControls: obj.hasControls ?? true
-  };
+function clamp2(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return Math.max(min, Math.min(max, value));
 }
-function applyPatternLocks(obj) {
-  obj.set({
-    lockMovementX: true,
-    lockMovementY: true,
-    lockScalingX: true,
-    lockScalingY: true,
-    lockRotation: true,
-    hasControls: false
+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;
+}
+async function unbakeLegacyLayer(layer, state) {
+  const image = layer.fabricObject;
+  if (typeof image.setSrc !== "function" || !state.original) return;
+  await image.setSrc(state.originalSrc);
+  image.set({
+    left: state.original.left,
+    top: state.original.top,
+    scaleX: state.original.scaleX,
+    scaleY: state.original.scaleY,
+    width: state.original.width,
+    height: state.original.height,
+    cropX: state.original.cropX,
+    cropY: state.original.cropY,
+    angle: state.original.angle
   });
+  image.clipPath = state.originalClip ? (await import_fabric3.util.enlivenObjects([state.originalClip]))[0] : void 0;
+  restoreLocks(image, state.originalLocks);
+  image.setCoords();
 }
 function restoreLocks(obj, locks) {
   obj.set(
@@ -1081,124 +1472,9 @@ function restoreLocks(obj, locks) {
     }
   );
 }
-function elementToDataURL(image) {
-  try {
-    const el = image.getElement();
-    const w = el.naturalWidth || el.width;
-    const h = el.naturalHeight || el.height;
-    if (!w || !h) return null;
-    const off = document.createElement("canvas");
-    off.width = w;
-    off.height = h;
-    const ctx = off.getContext("2d");
-    if (!ctx) return null;
-    ctx.drawImage(el, 0, 0);
-    return off.toDataURL("image/png");
-  } catch {
-    return null;
-  }
-}
-var IMAGE_CACHE_MAX = 16;
-var imageCache = /* @__PURE__ */ new Map();
-function loadPatternImage(src, resolver) {
-  const cached = imageCache.get(src);
-  if (cached) {
-    imageCache.delete(src);
-    imageCache.set(src, cached);
-    return cached;
-  }
-  const promise = decodeImage(src).catch(async (originalError) => {
-    if (!resolver) throw originalError;
-    const resolved = await resolver(src);
-    if (!resolved || resolved === src) {
-      throw new Error("Pattern source resolver did not return a usable alternate URL", {
-        cause: originalError
-      });
-    }
-    return decodeImage(resolved);
-  });
-  promise.catch(() => {
-    if (imageCache.get(src) === promise) imageCache.delete(src);
-  });
-  imageCache.set(src, promise);
-  if (imageCache.size > IMAGE_CACHE_MAX) {
-    const oldest = imageCache.keys().next().value;
-    if (oldest !== void 0) imageCache.delete(oldest);
-  }
-  return promise;
-}
-function decodeImage(src) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => resolve(img);
-    img.onerror = () => reject(new Error(`Failed to load pattern source: ${src}`));
-    img.src = src;
-  });
-}
-function clearPatternImageCache() {
-  imageCache.clear();
-}
-async function buildPatternDataURL(src, config, targetW, targetH, baseW, baseH, sourceResolver) {
-  const img = await loadPatternImage(src, sourceResolver);
-  const off = document.createElement("canvas");
-  off.width = Math.max(1, Math.round(targetW));
-  off.height = Math.max(1, Math.round(targetH));
-  const ctx = off.getContext("2d");
-  if (!ctx) return off.toDataURL("image/png");
-  drawTiles(ctx, img, config, targetW, targetH, baseW, baseH);
-  return off.toDataURL("image/png");
-}
-function computeTilePositions(config, targetW, targetH, baseW, baseH) {
-  const diag = Math.sqrt(targetW * targetW + targetH * targetH);
-  const minTile = Math.max(1, diag / MAX_TILES_PER_AXIS);
-  const tileW = Math.max(minTile, baseW * (1 + config.horizontalSpacing / 100));
-  const tileH = Math.max(minTile, baseH * (1 + config.verticalSpacing / 100));
-  const cols = Math.ceil(diag / tileW) + 2;
-  const rows = Math.ceil(diag / tileH) + 2;
-  const halfCols = Math.ceil(cols / 2);
-  const halfRows = Math.ceil(rows / 2);
-  const shiftX = tileW * (clampOffset(config.offsetX) / 100);
-  const shiftY = tileH * (clampOffset(config.offsetY) / 100);
-  const placements = [];
-  for (let j = -halfRows; j <= halfRows; j++) {
-    for (let i = -halfCols; i <= halfCols; i++) {
-      let x = i * tileW + shiftX;
-      let y = j * tileH + shiftY;
-      if (config.mode === "brick-horizontal" && mod2(j) === 1) {
-        x += tileW * (config.horizontalOffset / 100);
-      } else if (config.mode === "brick-vertical" && mod2(i) === 1) {
-        y += tileH * (config.horizontalOffset / 100);
-      }
-      const rotation = (i * config.rotationStepH + j * config.rotationStepV) * Math.PI / 180;
-      placements.push({ x, y, rotation });
-    }
-  }
-  return placements;
-}
-function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH) {
-  ctx.save();
-  ctx.translate(targetW / 2, targetH / 2);
-  ctx.rotate(config.angle * Math.PI / 180);
-  for (const tile of computeTilePositions(config, targetW, targetH, baseW, baseH)) {
-    ctx.save();
-    ctx.translate(tile.x, tile.y);
-    ctx.rotate(tile.rotation);
-    ctx.drawImage(img, -baseW / 2, -baseH / 2, baseW, baseH);
-    ctx.restore();
-  }
-  ctx.restore();
-}
-function clampOffset(value) {
-  if (typeof value !== "number" || !Number.isFinite(value)) return 0;
-  return Math.max(-100, Math.min(100, value));
-}
-function mod2(n) {
-  return (n % 2 + 2) % 2;
-}
 
 // src/text-curve.ts
-var import_fabric3 = require("fabric");
+var import_fabric4 = require("fabric");
 var DEFAULT_TEXT_CURVE = { arc: 0, wave: 0 };
 var MIN_ARC = 0.5;
 var FULL_CIRCLE_ARC = 99.5;
@@ -1321,7 +1597,7 @@ var TextCurveManager = class {
       if (layer.meta.curveWidth === void 0) layer.meta.curveWidth = text.width ?? 0;
       text.set({ width: Math.max(layer.meta.curveWidth, run + 2) });
       text.set({
-        path: new import_fabric3.Path(curve.data, { visible: false, objectCaching: false }),
+        path: new import_fabric4.Path(curve.data, { visible: false, objectCaching: false }),
         pathAlign: "center",
         pathSide: "left",
         pathStartOffset: Math.max(0, (curve.length - run) / 2)
@@ -1363,7 +1639,7 @@ var TextCurveManager = class {
 };
 
 // src/mask-presets/manager.ts
-var import_fabric4 = require("fabric");
+var import_fabric5 = require("fabric");
 
 // src/mask-presets/shapes.ts
 var SHAPE_MASK_IDS = [
@@ -1630,13 +1906,13 @@ var MaskPresetManager = class {
       objectCaching: false
     };
     if (isShapeMaskId(id)) {
-      return new import_fabric4.Path(shapeMaskPathData(id), {
+      return new import_fabric5.Path(shapeMaskPathData(id), {
         ...shared,
         scaleX: width / SHAPE_MASK_BOX,
         scaleY: height / SHAPE_MASK_BOX
       });
     }
-    return new import_fabric4.FabricImage(renderTextureMask(id), {
+    return new import_fabric5.FabricImage(renderTextureMask(id), {
       ...shared,
       scaleX: width / TEXTURE_MASK_SIZE,
       scaleY: height / TEXTURE_MASK_SIZE
@@ -1645,7 +1921,7 @@ var MaskPresetManager = class {
 };
 
 // src/shadow.ts
-var import_fabric5 = require("fabric");
+var import_fabric6 = require("fabric");
 
 // src/utils/color.ts
 var CSS_COLOR = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\([\d.%+\-\s,/]+\)|[a-z]+)$/i;
@@ -1683,7 +1959,7 @@ function applyLayerShadow(object, config) {
   }
   const color = isCssColor(next.color) ? next.color : DEFAULT_LAYER_SHADOW.color;
   object.set({
-    shadow: new import_fabric5.Shadow({
+    shadow: new import_fabric6.Shadow({
       color,
       blur: Math.max(0, next.blur),
       offsetX: next.offsetX,
@@ -1797,7 +2073,7 @@ var UnitConverter = class {
 };
 
 // src/serialization.ts
-var import_fabric6 = require("fabric");
+var import_fabric7 = require("fabric");
 var VERSION = "2.0.0";
 function serializeEditor(editor) {
   return {
@@ -1833,7 +2109,7 @@ async function deserializeEditor(editor, state) {
   }
   const staged = await Promise.all(
     state.layers.map(async (serialized) => {
-      const fabricObject = (await import_fabric6.util.enlivenObjects([serialized.fabricObject]))[0];
+      const fabricObject = (await import_fabric7.util.enlivenObjects([serialized.fabricObject]))[0];
       if (!fabricObject) {
         const source = serialized.fabricObject.src;
         if (typeof source === "string" && source.startsWith("blob:")) {
@@ -1844,7 +2120,7 @@ async function deserializeEditor(editor, state) {
       return { serialized, fabricObject };
     })
   );
-  const stagedBackground = state.backgroundImage ? (await import_fabric6.util.enlivenObjects([state.backgroundImage]))[0] : null;
+  const stagedBackground = state.backgroundImage ? (await import_fabric7.util.enlivenObjects([state.backgroundImage]))[0] : null;
   if (state.backgroundImage && !stagedBackground) {
     const source = state.backgroundImage.src;
     if (typeof source === "string" && source.startsWith("blob:")) {
@@ -1891,7 +2167,7 @@ function restoreLayer(editor, serialized, fabricObject) {
 }
 
 // src/export.ts
-var import_fabric7 = require("fabric");
+var import_fabric8 = require("fabric");
 
 // src/displacement.ts
 var CHANNEL_INDEX = {
@@ -1985,7 +2261,7 @@ async function exportPNG(canvas, options = {}) {
 }
 async function exportIsolatedPNG(source, objects, options = {}) {
   const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
-  const canvas = new import_fabric7.StaticCanvas(element, {
+  const canvas = new import_fabric8.StaticCanvas(element, {
     width: options.width ?? source.getWidth(),
     height: options.height ?? source.getHeight(),
     backgroundColor: options.backgroundColor || void 0
@@ -2015,7 +2291,7 @@ async function exportPrintArea(source, area, options = {}) {
     throw new Error("Print area does not overlap the canvas");
   }
   const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
-  const canvas = new import_fabric7.StaticCanvas(element, { width, height });
+  const canvas = new import_fabric8.StaticCanvas(element, { width, height });
   try {
     const clones = await Promise.all(source.getObjects().map((object) => object.clone()));
     if (clones.length) canvas.add(...clones);
@@ -2455,7 +2731,7 @@ var ProjectManager = class {
 };
 
 // src/mask.ts
-var import_fabric8 = require("fabric");
+var import_fabric9 = require("fabric");
 var MaskRefinementError = class extends Error {
   constructor(code, message, cause) {
     super(message);
@@ -2487,7 +2763,7 @@ var MaskController = class {
       throw new Error("Mask dimensions must be positive integers");
     }
     const backing = this.makeCanvas(width, height);
-    const image = new import_fabric8.FabricImage(backing, {
+    const image = new import_fabric9.FabricImage(backing, {
       left: 0,
       top: 0,
       originX: "left",
@@ -2712,6 +2988,737 @@ var MaskController = class {
   }
 };
 
+// src/masks/manager.ts
+var import_fabric16 = require("fabric");
+
+// src/masks/compose.ts
+var import_fabric10 = require("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 import_fabric10.Rect({
+    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 import_fabric10.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
+var import_fabric12 = require("fabric");
+
+// src/masks/space.ts
+var import_fabric11 = require("fabric");
+function matrixOf(object) {
+  return object.calcTransformMatrix();
+}
+function applyMatrix(object, matrix) {
+  const decomposed = import_fabric11.util.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, import_fabric11.util.multiplyTransformMatrices(matrixOf(host), matrixOf(object)));
+}
+function toHostSpace(object, host) {
+  applyMatrix(
+    object,
+    import_fabric11.util.multiplyTransformMatrices(import_fabric11.util.invertTransform(matrixOf(host)), matrixOf(object))
+  );
+}
+function relativeMatrix(object, host) {
+  return import_fabric11.util.multiplyTransformMatrices(import_fabric11.util.invertTransform(matrixOf(host)), matrixOf(object));
+}
+function applyRelativeMatrix(object, host, rel) {
+  applyMatrix(object, import_fabric11.util.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,
+      import_fabric12.util.multiplyTransformMatrices(
+        import_fabric12.util.invertTransform(matrixOf(this.group)),
+        matrixOf(this.handle)
+      )
+    );
+    this.group.dirty = true;
+    this.group.set({ dirty: true });
+    this.canvas.requestRenderAll();
+  }
+};
+
+// src/masks/store.ts
+var import_fabric15 = require("fabric");
+
+// src/masks/host.ts
+var import_fabric13 = require("fabric");
+function findCanvasHost(layers) {
+  return layers.getAll().find((layer) => layer.meta.canvasMask);
+}
+function createCanvasHost(canvas, layers) {
+  const rect = new import_fabric13.Rect({
+    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
+var import_fabric14 = require("fabric");
+function convertSpace(host, sources, absolute) {
+  const wasAbsolute = host.clipPath instanceof import_fabric14.Group ? 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 import_fabric15.Group)) 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 import_fabric16.Group ? 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;
@@ -2729,6 +3736,8 @@ var CanvasEditor = class {
   patterns;
   curves;
   maskPresets;
+  /** Stacked boolean masks, per layer and for the design as a whole. */
+  layerMasks;
   fonts;
   licensing;
   pages;
@@ -2753,7 +3762,7 @@ var CanvasEditor = class {
     const widthPx = this.units.toPixels(config.width);
     const heightPx = this.units.toPixels(config.height);
     this.designBackground = config.backgroundColor ?? "#ffffff";
-    this.canvas = new import_fabric9.Canvas(canvasElement, {
+    this.canvas = new import_fabric17.Canvas(canvasElement, {
       width: widthPx,
       height: heightPx,
       backgroundColor: this.designBackground,
@@ -2774,15 +3783,10 @@ var CanvasEditor = class {
     this.layers.setHistoryCallback(() => this.history.save());
     this.snapping = new SnapManager(this.canvas, this.events);
     this.crop = new CropController(this.canvas, this.history, this.events);
-    this.patterns = new PatternManager(
-      this.canvas,
-      this.layers,
-      this.history,
-      this.events,
-      config.patternSourceResolver
-    );
+    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();
@@ -2792,12 +3796,13 @@ var CanvasEditor = class {
   // ─── Layer Operations ────────────────────────────────
   async addImage(url, options) {
     try {
-      const img = await import_fabric9.FabricImage.fromURL(
+      const img = await import_fabric17.FabricImage.fromURL(
         url,
         {},
         { originX: "left", originY: "top", ...options }
       );
       const layer = this.layers.add("image", img);
+      this.layers.select(layer.id);
       this.history.save();
       return layer;
     } catch (error) {
@@ -2817,7 +3822,7 @@ var CanvasEditor = class {
     if (this.crop.activeLayerId() === layerId) this.crop.cancel();
     const previous = layer.fabricObject;
     try {
-      const replacement = await import_fabric9.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
+      const replacement = await import_fabric17.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
       replacement.set({
         left: previous.left,
         top: previous.top,
@@ -2846,7 +3851,7 @@ var CanvasEditor = class {
     }
   }
   addText(text, options) {
-    const textbox = new import_fabric9.Textbox(text, {
+    const textbox = new import_fabric17.Textbox(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
@@ -2857,12 +3862,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;
   }
@@ -2885,10 +3892,10 @@ var CanvasEditor = class {
         return value === void 0 ? token : escapeXml(value);
       })
     );
-    const { objects, options } = await (0, import_fabric9.loadSVGFromString)(resolved);
+    const { objects, options } = await (0, import_fabric17.loadSVGFromString)(resolved);
     const validObjects = objects.filter((object) => object !== null);
     if (validObjects.length === 0) throw new Error("Template SVG contains no renderable objects");
-    const group = import_fabric9.util.groupSVGElements(validObjects, options);
+    const group = import_fabric17.util.groupSVGElements(validObjects, options);
     group.set({
       left: this.canvas.getWidth() / 2,
       top: this.canvas.getHeight() / 2,
@@ -2896,6 +3903,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;
   }
@@ -2933,9 +3941,7 @@ var CanvasEditor = class {
     const layer = this.layers.get(id);
     if (!layer) return null;
     const clone = await layer.fabricObject.clone();
-    if (!layer.meta.pattern) {
-      clone.set({ left: (clone.left ?? 0) + 15, top: (clone.top ?? 0) + 15 });
-    }
+    clone.set({ left: (clone.left ?? 0) + 15, top: (clone.top ?? 0) + 15 });
     clone.setCoords();
     const copy = this.layers.add(layer.type, clone, `${layer.name} copy`);
     copy.meta = structuredClone(layer.meta);
@@ -2948,7 +3954,8 @@ var CanvasEditor = class {
       evented: !layer.locked,
       opacity: layer.opacity
     });
-    this.canvas.setActiveObject(clone);
+    this.patterns.attachTo(copy);
+    this.layers.select(copy.id);
     this.canvas.requestRenderAll();
     this.history.save();
     return copy;
@@ -2961,10 +3968,10 @@ var CanvasEditor = class {
     const next = { ...previous, ...adjustments };
     const clampAdjustment = (value, min = -1) => clamp(value ?? 0, min, 1);
     image.filters = [
-      new import_fabric9.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
-      new import_fabric9.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
-      new import_fabric9.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
-      new import_fabric9.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
+      new import_fabric17.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
+      new import_fabric17.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
+      new import_fabric17.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
+      new import_fabric17.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
     ];
     layer.meta.imageAdjustments = next;
     image.applyFilters();
@@ -2981,7 +3988,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 import_fabric9.Group(objects);
+      const group = new import_fabric17.Group(objects);
       const grouped = this.layers.add("group", group, name);
       grouped.meta.groupChildren = childData;
       this.layers.select(grouped.id);
@@ -2996,11 +4003,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) => {
-        import_fabric9.util.addTransformToObject(object, transform);
         object.setCoords();
         const data = childData[index];
         const layer = this.layers.add(data?.type ?? "group", object, data?.name, data?.id);
@@ -3027,7 +4032,8 @@ var CanvasEditor = class {
     }
     try {
       await deserializeEditor(this, state);
-      this.patterns.repinAll();
+      await this.patterns.rehydrateAll();
+      this.layerMasks.refreshAll();
     } catch (error) {
       if (!managedByHistory) {
         this.events.emit("error", { message: "Failed to load editor state", error });
@@ -3056,7 +4062,7 @@ var CanvasEditor = class {
     const layer = this.layers.get(id);
     if (!layer) throw new Error(`Layer not found: ${id}`);
     try {
-      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric9.FabricImage) {
+      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric17.FabricImage) {
         const image = await layer.fabricObject.clone();
         image.set({
           left: 0,
@@ -3076,7 +4082,11 @@ var CanvasEditor = class {
           cloneObjects: false
         });
       }
-      return await exportIsolatedPNG(this.canvas, [layer.fabricObject], options);
+      return await exportIsolatedPNG(
+        this.canvas,
+        [layer.renderProxy ?? layer.fabricObject],
+        options
+      );
     } catch (error) {
       this.events.emit("error", { message: `Failed to export layer: ${id}`, error });
       throw error;
@@ -3328,7 +4338,7 @@ var CanvasEditor = class {
       return;
     }
     try {
-      const image = await import_fabric9.FabricImage.fromURL(
+      const image = await import_fabric17.FabricImage.fromURL(
         url,
         { crossOrigin: options.crossOrigin ?? null, signal: options.signal },
         { originX: "left", originY: "top" }
@@ -3381,7 +4391,6 @@ var CanvasEditor = class {
       const sx = widthPx / oldWidth;
       const sy = heightPx / oldHeight;
       for (const layer of this.layers.getAll()) {
-        if (layer.meta.pattern) continue;
         const object = layer.fabricObject;
         object.set({
           left: (object.left ?? 0) * sx,
@@ -3402,7 +4411,7 @@ var CanvasEditor = class {
       }
     }
     this.canvas.setDimensions({ width: widthPx, height: heightPx });
-    this.patterns.repinAll();
+    this.patterns.syncArea();
     this.canvas.requestRenderAll();
     this.history.save();
     this.events.emit("canvas:modified", {});
@@ -3597,10 +4606,11 @@ var CanvasEditor = class {
   // ─── Cleanup ────────────────────────────────────────
   dispose() {
     this.masks.dispose();
+    this.layerMasks.dispose();
     this.snapping.dispose();
     this.crop.dispose();
     this.history.dispose();
-    clearPatternImageCache();
+    this.patterns.dispose();
     this.events.removeAllListeners();
     this.canvas.dispose();
   }
@@ -3720,6 +4730,7 @@ var AnnotationOverlay = class {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnnotationOverlay,
+  CANVAS_MASK_TARGET,
   CANVAS_SIZE_PRESETS,
   CanvasEditor,
   CropController,
@@ -3732,6 +4743,7 @@ var AnnotationOverlay = class {
   HistoryManager,
   Layer,
   LayerManager,
+  LayerMaskManager,
   LicenseManager,
   MaskController,
   MaskPresetManager,
@@ -3744,18 +4756,16 @@ var AnnotationOverlay = class {
   TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE,
   TextCurveManager,
+  TiledPatternObject,
   UnitConverter,
   applyAspectLock,
   applyLayerShadow,
   applyObjectSelectionStyle,
-  applyPatternLocks,
   applySelectionStyle,
   buildCurvePathData,
-  buildPatternDataURL,
-  captureLocks,
   clamp,
-  clearPatternImageCache,
   clearTextureMaskCache,
+  composeMaskGroup,
   computeCoverPlacement,
   computePrintAreaClip,
   computeTilePositions,
@@ -3768,12 +4778,13 @@ var AnnotationOverlay = class {
   exportPNG,
   exportPrintArea,
   exportSVG,
+  fitToBox,
   generateId,
   isCssColor,
   isMaskPresetId,
   isShapeMaskId,
   isTextureMaskId,
-  loadPatternImage,
+  needsAbsoluteSpace,
   readLayerShadow,
   renderTextureMask,
   resetTransform,
@@ -3781,6 +4792,9 @@ var AnnotationOverlay = class {
   round2,
   sanitizeSvg,
   serializeEditor,
-  shapeMaskPathData
+  shapeMaskPathData,
+  toCanvasSpace,
+  toHostSpace,
+  unwrapGroup
 });
 //# sourceMappingURL=index.js.map