@overtone-art/canvas-editor-core 0.2.6 → 0.2.8

package/dist/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,27 +15,26 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AnnotationOverlay: () => AnnotationOverlay,
+  CANVAS_SIZE_PRESETS: () => CANVAS_SIZE_PRESETS,
   CanvasEditor: () => CanvasEditor,
   CropController: () => CropController,
   DEFAULT_PATTERN_CONFIG: () => DEFAULT_PATTERN_CONFIG,
   EventEmitter: () => EventEmitter,
+  FontRegistry: () => FontRegistry,
   HistoryManager: () => HistoryManager,
   Layer: () => Layer,
   LayerManager: () => LayerManager,
+  LicenseManager: () => LicenseManager,
+  MaskController: () => MaskController,
+  MaskRefinementError: () => MaskRefinementError,
   PatternManager: () => PatternManager,
+  ProjectManager: () => ProjectManager,
   SnapManager: () => SnapManager,
   UnitConverter: () => UnitConverter,
   applyPatternLocks: () => applyPatternLocks,
@@ -45,21 +42,29 @@ __export(index_exports, {
   captureLocks: () => captureLocks,
   clamp: () => clamp,
   clearPatternImageCache: () => clearPatternImageCache,
+  computeCoverPlacement: () => computeCoverPlacement,
+  computePrintAreaClip: () => computePrintAreaClip,
   computeTilePositions: () => computeTilePositions,
   deserializeEditor: () => deserializeEditor,
+  displaceRgba: () => displaceRgba,
   drawTiles: () => drawTiles,
+  escapeXml: () => escapeXml,
   exportDataURL: () => exportDataURL,
+  exportMockup: () => exportMockup,
   exportPNG: () => exportPNG,
   exportSVG: () => exportSVG,
   generateId: () => generateId,
+  isCssColor: () => isCssColor,
+  loadPatternImage: () => loadPatternImage,
   restoreLocks: () => restoreLocks,
   round2: () => round2,
+  sanitizeSvg: () => sanitizeSvg,
   serializeEditor: () => serializeEditor
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/editor.ts
-var import_fabric4 = require("fabric");
+var import_fabric6 = require("fabric");
 
 // src/events.ts
 var EventEmitter = class {
@@ -151,6 +156,10 @@ var LayerManager = class {
   canvas;
   events;
   layers = [];
+  onPropertyChanged;
+  setHistoryCallback(callback) {
+    this.onPropertyChanged = callback;
+  }
   add(type, fabricObject, name, id) {
     const layer = new Layer(type, fabricObject, name, id);
     this.layers.push(layer);
@@ -167,12 +176,39 @@ var LayerManager = class {
     this.layers.splice(index, 1);
     this.events.emit("layer:removed", { layerId: id });
     this.emitChanged();
+    this.onPropertyChanged?.();
+    return true;
+  }
+  /** Replace a layer's render object while preserving its immutable ID and panel state. */
+  replaceObject(id, fabricObject) {
+    const layer = this.get(id);
+    if (!layer || layer.fabricObject === fabricObject) return false;
+    const previous = layer.fabricObject;
+    const stackIndex = this.canvas.getObjects().indexOf(previous);
+    const wasActive = this.canvas.getActiveObject() === previous;
+    this.canvas.remove(previous);
+    layer.fabricObject = fabricObject;
+    fabricObject._layerId = id;
+    fabricObject.set({
+      visible: layer.visible,
+      opacity: layer.opacity,
+      selectable: !layer.locked,
+      evented: !layer.locked
+    });
+    this.canvas.insertAt(Math.max(0, stackIndex), fabricObject);
+    if (wasActive) this.canvas.setActiveObject(fabricObject);
+    this.canvas.requestRenderAll();
+    this.events.emit("layer:modified", { layerId: id });
+    this.emitChanged();
+    this.onPropertyChanged?.();
     return true;
   }
   reorder(id, newIndex) {
     const oldIndex = this.layers.findIndex((l) => l.id === id);
     if (oldIndex === -1) return false;
-    const clamped = Math.max(0, Math.min(this.layers.length - 1, newIndex));
+    if (!Number.isFinite(newIndex)) return false;
+    const clamped = Math.max(0, Math.min(this.layers.length - 1, Math.round(newIndex)));
+    if (oldIndex === clamped) return false;
     const [layer] = this.layers.splice(oldIndex, 1);
     this.layers.splice(clamped, 0, layer);
     this.layers.forEach((l, i) => {
@@ -180,6 +216,7 @@ var LayerManager = class {
     });
     this.events.emit("layer:reordered", { layerIds: this.layers.map((l) => l.id) });
     this.emitChanged();
+    this.onPropertyChanged?.();
     return true;
   }
   select(id) {
@@ -210,33 +247,42 @@ var LayerManager = class {
   setVisibility(id, visible) {
     const layer = this.get(id);
     if (!layer) return;
+    if (layer.visible === visible) return;
     layer.visible = visible;
     layer.fabricObject.visible = visible;
     this.canvas.requestRenderAll();
     this.emitChanged();
+    this.onPropertyChanged?.();
   }
   setLocked(id, locked) {
     const layer = this.get(id);
     if (!layer) return;
+    if (layer.locked === locked) return;
     layer.locked = locked;
     layer.fabricObject.selectable = !locked;
     layer.fabricObject.evented = !locked;
     this.canvas.requestRenderAll();
     this.emitChanged();
+    this.onPropertyChanged?.();
   }
   setOpacity(id, opacity) {
     const layer = this.get(id);
-    if (!layer) return;
-    layer.opacity = opacity;
-    layer.fabricObject.opacity = opacity;
+    if (!layer || !Number.isFinite(opacity)) return;
+    const next = Math.max(0, Math.min(1, opacity));
+    if (layer.opacity === next) return;
+    layer.opacity = next;
+    layer.fabricObject.opacity = next;
     this.canvas.requestRenderAll();
     this.emitChanged();
+    this.onPropertyChanged?.();
   }
   setName(id, name) {
     const layer = this.get(id);
     if (!layer) return;
+    if (layer.name === name) return;
     layer.name = name;
     this.emitChanged();
+    this.onPropertyChanged?.();
   }
   clear() {
     for (const layer of this.layers) {
@@ -256,61 +302,133 @@ var LayerManager = class {
 };
 
 // src/history.ts
-var HistoryManager = class {
+var HistoryManager = class _HistoryManager {
+  static ASSET_KEY = "__canvasEditorHistoryAsset";
   undoStack = [];
   redoStack = [];
+  assets = /* @__PURE__ */ new Map();
+  assetIds = /* @__PURE__ */ new Map();
+  nextAssetId = 1;
   maxSize;
+  maxBytes;
   paused = false;
   debounceTimer = null;
   debounceMs;
   getState;
   restoreState;
   events;
+  transactionDepth = 0;
+  transactionDirty = false;
   constructor(opts) {
     this.getState = opts.getState;
     this.restoreState = opts.restoreState;
     this.events = opts.events;
     this.maxSize = opts.maxSize ?? 50;
+    this.maxBytes = opts.maxBytes ?? 50 * 1024 * 1024;
     this.debounceMs = opts.debounceMs ?? 300;
   }
   save() {
     if (this.paused) return;
+    if (this.transactionDepth > 0) {
+      this.transactionDirty = true;
+      return;
+    }
     if (this.debounceTimer) {
       clearTimeout(this.debounceTimer);
     }
     this.debounceTimer = setTimeout(() => {
       this.saveImmediate();
     }, this.debounceMs);
+    this.emitChanged();
   }
   saveImmediate() {
-    if (this.paused) return;
-    const state = this.getState();
+    if (this.paused) {
+      this.cancelPending();
+      return;
+    }
+    if (this.transactionDepth > 0) {
+      this.transactionDirty = true;
+      return;
+    }
+    this.cancelPending();
+    const rawState = this.getState();
+    const state = this.compactState(rawState);
+    if (this.undoStack.at(-1) === state) {
+      this.emitChanged();
+      return;
+    }
     this.undoStack.push(state);
-    if (this.undoStack.length > this.maxSize) {
+    while (this.undoStack.length > this.maxSize) {
       this.undoStack.shift();
     }
     this.redoStack = [];
+    this.trimToBudget();
+    this.events.emit("history:snapshot", {
+      bytes: rawState.length * 2,
+      totalBytes: this.snapshotBytes(),
+      entries: this.undoStack.length
+    });
     this.emitChanged();
   }
+  beginTransaction() {
+    if (this.transactionDepth === 0 && this.debounceTimer) this.saveImmediate();
+    this.transactionDepth += 1;
+  }
+  endTransaction() {
+    if (this.transactionDepth === 0) return;
+    this.transactionDepth -= 1;
+    if (this.transactionDepth === 0 && this.transactionDirty) {
+      this.transactionDirty = false;
+      this.saveImmediate();
+    }
+  }
+  async transaction(operation) {
+    this.beginTransaction();
+    try {
+      return await operation();
+    } finally {
+      this.endTransaction();
+    }
+  }
   async undo() {
     this.cancelPending();
-    const state = this.undoStack.pop();
-    if (!state) return;
-    this.redoStack.push(this.getState());
+    const committed = this.undoStack.at(-1);
+    if (!committed) return;
+    const current = this.compactState(this.getState());
+    const currentIsCommitted = current === committed;
+    if (currentIsCommitted && this.undoStack.length < 2) return;
+    const target = currentIsCommitted ? this.undoStack[this.undoStack.length - 2] : committed;
     this.paused = true;
-    await this.restoreState(state);
-    this.paused = false;
-    this.emitChanged();
+    try {
+      await this.restoreState(this.expandState(target));
+      if (currentIsCommitted) this.undoStack.pop();
+      this.redoStack.push(current);
+      this.trimToBudget();
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to undo the last change", error });
+      throw error;
+    } finally {
+      this.paused = false;
+      this.emitChanged();
+    }
   }
   async redo() {
     this.cancelPending();
-    const state = this.redoStack.pop();
+    const state = this.redoStack.at(-1);
     if (!state) return;
-    this.undoStack.push(this.getState());
     this.paused = true;
-    await this.restoreState(state);
-    this.paused = false;
-    this.emitChanged();
+    try {
+      await this.restoreState(this.expandState(state));
+      this.redoStack.pop();
+      if (this.undoStack.at(-1) !== state) this.undoStack.push(state);
+      this.trimToBudget();
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to redo the last change", error });
+      throw error;
+    } finally {
+      this.paused = false;
+      this.emitChanged();
+    }
   }
   /** True while a restore (undo/redo/deserialize) is in flight. Managers that
    * react to canvas events should skip mutating history during this window. */
@@ -324,16 +442,22 @@ var HistoryManager = class {
     this.paused = false;
   }
   canUndo() {
-    return this.undoStack.length > 0;
+    return this.undoStack.length > 1 || this.debounceTimer !== null;
   }
   canRedo() {
     return this.redoStack.length > 0;
   }
   clear() {
+    this.cancelPending();
     this.undoStack = [];
     this.redoStack = [];
+    this.assets.clear();
+    this.assetIds.clear();
     this.emitChanged();
   }
+  getSnapshotBytes() {
+    return this.snapshotBytes();
+  }
   cancelPending() {
     if (this.debounceTimer) {
       clearTimeout(this.debounceTimer);
@@ -341,9 +465,13 @@ var HistoryManager = class {
     }
   }
   dispose() {
-    if (this.debounceTimer) {
-      clearTimeout(this.debounceTimer);
-    }
+    this.cancelPending();
+    this.transactionDepth = 0;
+    this.transactionDirty = false;
+    this.undoStack = [];
+    this.redoStack = [];
+    this.assets.clear();
+    this.assetIds.clear();
   }
   emitChanged() {
     this.events.emit("history:changed", {
@@ -351,6 +479,94 @@ var HistoryManager = class {
       canRedo: this.canRedo()
     });
   }
+  snapshotBytes() {
+    const stackBytes = [...this.undoStack, ...this.redoStack].reduce(
+      (total, state) => total + state.length * 2,
+      0
+    );
+    const assetBytes = [...this.assets.values()].reduce(
+      (total, asset) => total + asset.length * 2,
+      0
+    );
+    return stackBytes + assetBytes;
+  }
+  trimToBudget() {
+    this.pruneAssets();
+    while (this.undoStack.length > 1 && this.snapshotBytes() > this.maxBytes) {
+      this.undoStack.shift();
+      this.pruneAssets();
+    }
+    while (this.redoStack.length > 1 && this.snapshotBytes() > this.maxBytes) {
+      this.redoStack.shift();
+      this.pruneAssets();
+    }
+  }
+  /**
+   * History is internal and can content-address large raster strings without
+   * changing the public EditorState wire format. Unchanged images are retained
+   * once even when dozens of snapshots reference them.
+   */
+  compactState(state) {
+    let parsed;
+    try {
+      parsed = JSON.parse(state);
+    } catch {
+      return state;
+    }
+    const visit = (value) => {
+      if (typeof value === "string" && /^data:image\/(?:png|jpeg|webp);base64,/i.test(value)) {
+        let id = this.assetIds.get(value);
+        if (!id) {
+          id = `a${this.nextAssetId++}`;
+          this.assetIds.set(value, id);
+          this.assets.set(id, value);
+        }
+        return { [_HistoryManager.ASSET_KEY]: id };
+      }
+      if (Array.isArray(value)) return value.map(visit);
+      if (!value || typeof value !== "object") return value;
+      return Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, visit(entry)]));
+    };
+    return JSON.stringify(visit(parsed));
+  }
+  expandState(state) {
+    let parsed;
+    try {
+      parsed = JSON.parse(state);
+    } catch {
+      return state;
+    }
+    const visit = (value) => {
+      if (Array.isArray(value)) return value.map(visit);
+      if (!value || typeof value !== "object") return value;
+      const record = value;
+      const id = record[_HistoryManager.ASSET_KEY];
+      if (typeof id === "string" && Object.keys(record).length === 1) {
+        const asset = this.assets.get(id);
+        if (!asset) throw new Error(`Missing history raster asset: ${id}`);
+        return asset;
+      }
+      return Object.fromEntries(Object.entries(record).map(([key, entry]) => [key, visit(entry)]));
+    };
+    return JSON.stringify(visit(parsed));
+  }
+  /**
+   * Runs on every commit, so it scans for the serialized reference marker
+   * instead of re-parsing every snapshot — parsing multi-megabyte raster states
+   * per save would cost more than the retention it reclaims. `JSON.stringify`
+   * emits the marker verbatim; the same text inside user data is escaped and
+   * therefore cannot match.
+   */
+  pruneAssets() {
+    if (this.assets.size === 0) return;
+    const states = [...this.undoStack, ...this.redoStack];
+    for (const [id, asset] of this.assets) {
+      const marker = `"${_HistoryManager.ASSET_KEY}":"${id}"`;
+      if (states.some((state) => state.includes(marker))) continue;
+      this.assets.delete(id);
+      this.assetIds.delete(asset);
+    }
+  }
 };
 
 // src/snapping.ts
@@ -570,6 +786,10 @@ var CropController = class {
       top: imgTop + (cropY - (image.cropY ?? 0)) * scaleY
     });
     image.setCoords();
+    if (s.prevAngle) {
+      image.rotate(s.prevAngle);
+      image.setCoords();
+    }
     this.finish();
     this.history.save();
   }
@@ -604,14 +824,18 @@ var STROKE2 = "#22c55e";
 var import_fabric2 = require("fabric");
 var MAX_TILES_PER_AXIS = 200;
 var PatternManager = class {
-  constructor(canvas, layers, history) {
+  constructor(canvas, layers, history, events, sourceResolver) {
     this.canvas = canvas;
     this.layers = layers;
     this.history = history;
+    this.events = events;
+    this.sourceResolver = sourceResolver;
   }
   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
@@ -659,6 +883,9 @@ var PatternManager = class {
         throw err;
       }
       this.history.save();
+    }).catch((error) => {
+      this.events.emit("error", { message: "Failed to apply image pattern", error });
+      throw error;
     });
   }
   /**
@@ -714,6 +941,9 @@ var PatternManager = class {
       delete layer.meta.pattern;
       this.canvas.requestRenderAll();
       this.history.save();
+    }).catch((error) => {
+      this.events.emit("error", { message: "Failed to clear image pattern", error });
+      throw error;
     });
   }
   /** Run `task` after any in-flight work for this layer, regardless of outcome. */
@@ -743,7 +973,8 @@ var PatternManager = class {
       cw,
       ch,
       tileW,
-      tileH
+      tileH,
+      this.sourceResolver
     );
     await image.setSrc(dataUrl);
     image.set({
@@ -814,14 +1045,23 @@ function elementToDataURL(image) {
 }
 var IMAGE_CACHE_MAX = 16;
 var imageCache = /* @__PURE__ */ new Map();
-function loadImage(src) {
+function loadPatternImage(src, resolver) {
   const cached = imageCache.get(src);
   if (cached) {
     imageCache.delete(src);
     imageCache.set(src, cached);
     return cached;
   }
-  const promise = decodeImage(src);
+  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);
   });
@@ -844,8 +1084,8 @@ function decodeImage(src) {
 function clearPatternImageCache() {
   imageCache.clear();
 }
-async function buildPatternDataURL(src, config, targetW, targetH, baseW, baseH) {
-  const img = await loadImage(src);
+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));
@@ -905,16 +1145,18 @@ function mod2(n) {
 // src/utils/units.ts
 var MM_PER_INCH = 25.4;
 var UnitConverter = class {
+  unit;
+  dpi;
   constructor(unit = "px", dpi = 72) {
     this.unit = unit;
-    this.dpi = dpi;
+    this.dpi = 72;
+    this.setDpi(dpi);
   }
-  unit;
-  dpi;
   setUnit(unit) {
     this.unit = unit;
   }
   setDpi(dpi) {
+    if (!Number.isFinite(dpi) || dpi <= 0) throw new Error("DPI must be a positive number");
     this.dpi = dpi;
   }
   getUnit() {
@@ -949,38 +1191,92 @@ var UnitConverter = class {
 
 // src/serialization.ts
 var import_fabric3 = require("fabric");
-var VERSION = "1.0.0";
+
+// src/utils/color.ts
+var CSS_COLOR = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\([\d.%+\-\s,/]+\)|[a-z]+)$/i;
+function isCssColor(value, allowEmpty = false) {
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  if (!trimmed) return allowEmpty;
+  return CSS_COLOR.test(trimmed);
+}
+
+// src/serialization.ts
+var VERSION = "2.0.0";
 function serializeEditor(editor) {
   return {
     version: VERSION,
     canvas: {
       width: editor.canvas.getWidth(),
-      height: editor.canvas.getHeight()
+      height: editor.canvas.getHeight(),
+      unit: editor.units.getUnit(),
+      dpi: editor.units.getDpi()
     },
     layers: editor.layers.getAll().map((layer) => layer.serialize()),
     // The configured design background, not the live canvas value (which is
     // forced transparent while a mockup preview is active).
     background: editor.getDesignBackground(),
+    backgroundImage: editor.getDesignBackgroundImage() ? editor.getDesignBackgroundImage().toObject() : null,
+    backgroundImageOptions: editor.getBackgroundImageOptions(),
     mockup: editor.getMockup()
   };
 }
 async function deserializeEditor(editor, state) {
+  if (!state || !state.canvas || !Array.isArray(state.layers)) {
+    throw new Error("Invalid editor state");
+  }
+  if (!Number.isFinite(state.canvas.width) || !Number.isFinite(state.canvas.height) || state.canvas.width <= 0 || state.canvas.height <= 0 || state.canvas.unit !== void 0 && !["px", "mm", "in"].includes(state.canvas.unit) || state.canvas.dpi !== void 0 && (!Number.isFinite(state.canvas.dpi) || state.canvas.dpi <= 0)) {
+    throw new Error("Invalid editor canvas settings");
+  }
+  const major = Number.parseInt(state.version?.split(".")[0] ?? "1", 10);
+  if (!Number.isFinite(major) || major > 2) {
+    throw new Error(`Unsupported editor state version: ${state.version}`);
+  }
+  if (state.background !== void 0 && !isCssColor(state.background, true)) {
+    throw new Error("Invalid editor background color");
+  }
+  const staged = await Promise.all(
+    state.layers.map(async (serialized) => {
+      const fabricObject = (await import_fabric3.util.enlivenObjects([serialized.fabricObject]))[0];
+      if (!fabricObject) {
+        const source = serialized.fabricObject.src;
+        if (typeof source === "string" && source.startsWith("blob:")) {
+          throw new Error(`Failed to restore expired object URL: ${source}`);
+        }
+        throw new Error(`Failed to restore layer: ${serialized.id}`);
+      }
+      return { serialized, fabricObject };
+    })
+  );
+  const stagedBackground = state.backgroundImage ? (await import_fabric3.util.enlivenObjects([state.backgroundImage]))[0] : null;
+  if (state.backgroundImage && !stagedBackground) {
+    const source = state.backgroundImage.src;
+    if (typeof source === "string" && source.startsWith("blob:")) {
+      throw new Error(`Failed to restore expired background object URL: ${source}`);
+    }
+    throw new Error("Failed to restore background image");
+  }
+  editor.crop.cancel();
+  editor.masks.detach();
   editor.layers.clear();
+  if (state.canvas.unit) editor.units.setUnit(state.canvas.unit);
+  if (state.canvas.dpi !== void 0) editor.units.setDpi(state.canvas.dpi);
   editor.canvas.setDimensions({ width: state.canvas.width, height: state.canvas.height });
-  if (state.background) {
+  if (state.background !== void 0) {
     editor.setBackground(state.background);
   }
-  if (state.mockup !== void 0) {
-    editor.setMockup(state.mockup);
-  }
-  for (const serializedLayer of state.layers) {
-    await restoreLayer(editor, serializedLayer);
+  editor.setBackgroundImageObject(
+    stagedBackground ?? null,
+    false,
+    state.backgroundImageOptions ?? null
+  );
+  editor.setMockup(state.mockup ?? null);
+  for (const item of staged) {
+    restoreLayer(editor, item.serialized, item.fabricObject);
   }
   editor.canvas.requestRenderAll();
 }
-async function restoreLayer(editor, serialized) {
-  const objects = await import_fabric3.util.enlivenObjects([serialized.fabricObject]);
-  const fabricObject = objects[0];
+function restoreLayer(editor, serialized, fabricObject) {
   const layer = editor.layers.add(serialized.type, fabricObject, serialized.name, serialized.id);
   if (serialized.meta) {
     layer.meta = serialized.meta;
@@ -998,15 +1294,216 @@ async function restoreLayer(editor, serialized) {
 }
 
 // src/export.ts
+var import_fabric4 = require("fabric");
+
+// src/displacement.ts
+var CHANNEL_INDEX = {
+  red: 0,
+  green: 1,
+  blue: 2,
+  alpha: 3
+};
+function finiteScale(value, fallback, label) {
+  const resolved = value ?? fallback;
+  if (!Number.isFinite(resolved)) throw new Error(`${label} must be finite`);
+  return resolved;
+}
+function sample(source, width, height, x, y, channel) {
+  const clampedX = Math.max(0, Math.min(width - 1, x));
+  const clampedY = Math.max(0, Math.min(height - 1, y));
+  const x0 = Math.floor(clampedX);
+  const y0 = Math.floor(clampedY);
+  const x1 = Math.min(width - 1, x0 + 1);
+  const y1 = Math.min(height - 1, y0 + 1);
+  const tx = clampedX - x0;
+  const ty = clampedY - y0;
+  const top = source[(y0 * width + x0) * 4 + channel] * (1 - tx) + source[(y0 * width + x1) * 4 + channel] * tx;
+  const bottom = source[(y1 * width + x0) * 4 + channel] * (1 - tx) + source[(y1 * width + x1) * 4 + channel] * tx;
+  return top * (1 - ty) + bottom * ty;
+}
+function displaceRgba(source, map, width, height, options) {
+  if (!Number.isInteger(width) || !Number.isInteger(height) || width <= 0 || height <= 0) {
+    throw new Error("Displacement dimensions must be positive integers");
+  }
+  const expectedLength = width * height * 4;
+  if (source.length !== expectedLength || map.length !== expectedLength) {
+    throw new Error("Displacement source and map must match the requested dimensions");
+  }
+  const scaleX = finiteScale(options.scaleX, 10, "Displacement scaleX");
+  const scaleY = finiteScale(options.scaleY, 10, "Displacement scaleY");
+  const channelX = CHANNEL_INDEX[options.channelX ?? "red"];
+  const channelY = CHANNEL_INDEX[options.channelY ?? "green"];
+  const output = new Uint8ClampedArray(expectedLength);
+  for (let y = 0; y < height; y += 1) {
+    for (let x = 0; x < width; x += 1) {
+      const offset = (y * width + x) * 4;
+      const sourceX = x + (map[offset + channelX] - 128) / 127 * scaleX;
+      const sourceY = y + (map[offset + channelY] - 128) / 127 * scaleY;
+      for (let channel = 0; channel < 4; channel += 1) {
+        output[offset + channel] = Math.round(
+          sample(source, width, height, sourceX, sourceY, channel)
+        );
+      }
+    }
+  }
+  return output;
+}
+
+// src/export.ts
+function computePrintAreaClip(area, scaleX, scaleY, targetWidth, targetHeight) {
+  const left = Math.max(0, Math.min(targetWidth, area.left * scaleX));
+  const top = Math.max(0, Math.min(targetHeight, area.top * scaleY));
+  const right = Math.max(left, Math.min(targetWidth, (area.left + area.width) * scaleX));
+  const bottom = Math.max(top, Math.min(targetHeight, (area.top + area.height) * scaleY));
+  return { left, top, width: right - left, height: bottom - top };
+}
+function computeCoverPlacement(sourceWidth, sourceHeight, targetWidth, targetHeight) {
+  if (sourceWidth <= 0 || sourceHeight <= 0 || targetWidth <= 0 || targetHeight <= 0) {
+    throw new Error("Cover dimensions must be positive");
+  }
+  const scale = Math.max(targetWidth / sourceWidth, targetHeight / sourceHeight);
+  const width = sourceWidth * scale;
+  const height = sourceHeight * scale;
+  return {
+    left: (targetWidth - width) / 2,
+    top: (targetHeight - height) / 2,
+    width,
+    height
+  };
+}
+function canvasElementToBlob(output, format, quality) {
+  const mime = format === "jpeg" ? "image/jpeg" : `image/${format}`;
+  return new Promise((resolve, reject) => {
+    output.toBlob(
+      (blob) => blob ? resolve(blob) : reject(new Error(`Failed to export ${format}`)),
+      mime,
+      quality
+    );
+  });
+}
 async function exportPNG(canvas, options = {}) {
   const { multiplier = 1, format = "png", quality = 1 } = options;
-  const dataUrl = canvas.toDataURL({
-    format,
-    multiplier,
-    quality
+  const output = canvas.toCanvasElement(multiplier);
+  return canvasElementToBlob(output, format, quality);
+}
+async function exportIsolatedPNG(source, objects, options = {}) {
+  const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
+  const canvas = new import_fabric4.StaticCanvas(element, {
+    width: options.width ?? source.getWidth(),
+    height: options.height ?? source.getHeight(),
+    backgroundColor: options.backgroundColor || void 0
   });
-  const response = await fetch(dataUrl);
-  return response.blob();
+  try {
+    const clones = options.cloneObjects === false ? objects : await Promise.all(objects.map((object) => object.clone()));
+    if (clones.length) canvas.add(...clones);
+    if (options.backgroundImage) canvas.backgroundImage = await options.backgroundImage.clone();
+    canvas.requestRenderAll();
+    return await exportPNG(canvas, options);
+  } finally {
+    canvas.dispose();
+  }
+}
+async function exportMockup(canvas, mockup, options = {}) {
+  const { multiplier = 1, format = "png", quality = 1 } = options;
+  const design = canvas.toCanvasElement(multiplier);
+  const output = design.ownerDocument.createElement("canvas");
+  output.width = design.width;
+  output.height = design.height;
+  const context = output.getContext("2d");
+  if (!context) throw new Error("2D canvas context is unavailable");
+  const loadImage = (url) => new Promise((resolve, reject) => {
+    const element = new Image();
+    element.crossOrigin = "anonymous";
+    element.onload = () => resolve(element);
+    element.onerror = () => reject(new Error(`Failed to load mockup image: ${url}`));
+    element.src = url;
+  });
+  const drawCover = (image, targetContext = context) => {
+    const placement = computeCoverPlacement(
+      image.naturalWidth || image.width,
+      image.naturalHeight || image.height,
+      output.width,
+      output.height
+    );
+    targetContext.drawImage(
+      image,
+      placement.left,
+      placement.top,
+      placement.width,
+      placement.height
+    );
+  };
+  const scratch = [design];
+  try {
+    drawCover(await loadImage(mockup.image));
+    let compositedDesign = design;
+    if (mockup.displacement) {
+      const sourceContext = design.getContext("2d");
+      if (!sourceContext) throw new Error("2D design context is unavailable");
+      const mapCanvas = design.ownerDocument.createElement("canvas");
+      scratch.push(mapCanvas);
+      mapCanvas.width = design.width;
+      mapCanvas.height = design.height;
+      const mapContext = mapCanvas.getContext("2d");
+      if (!mapContext) throw new Error("2D displacement-map context is unavailable");
+      drawCover(await loadImage(mockup.displacement.image), mapContext);
+      const warped = design.ownerDocument.createElement("canvas");
+      scratch.push(warped);
+      warped.width = design.width;
+      warped.height = design.height;
+      const warpedContext = warped.getContext("2d");
+      if (!warpedContext) throw new Error("2D displaced-design context is unavailable");
+      let sourcePixels;
+      let mapPixels;
+      try {
+        sourcePixels = sourceContext.getImageData(0, 0, design.width, design.height).data;
+        mapPixels = mapContext.getImageData(0, 0, design.width, design.height).data;
+      } catch (error) {
+        throw new Error("Failed to apply mockup displacement map; verify image CORS access", {
+          cause: error
+        });
+      }
+      const pixels = displaceRgba(sourcePixels, mapPixels, design.width, design.height, {
+        ...mockup.displacement,
+        scaleX: (mockup.displacement.scaleX ?? 10) * multiplier,
+        scaleY: (mockup.displacement.scaleY ?? 10) * multiplier
+      });
+      const imageData = warpedContext.createImageData(design.width, design.height);
+      imageData.data.set(pixels);
+      warpedContext.putImageData(imageData, 0, 0);
+      compositedDesign = warped;
+    }
+    context.save();
+    if (mockup.printArea && mockup.clipToPrintArea !== false) {
+      const clip = computePrintAreaClip(
+        mockup.printArea,
+        output.width / canvas.getWidth(),
+        output.height / canvas.getHeight(),
+        output.width,
+        output.height
+      );
+      context.beginPath();
+      context.rect(clip.left, clip.top, clip.width, clip.height);
+      context.clip();
+    }
+    context.globalAlpha = Math.max(0, Math.min(1, mockup.designOpacity ?? 1));
+    context.globalCompositeOperation = !mockup.designBlendMode || mockup.designBlendMode === "normal" ? "source-over" : mockup.designBlendMode;
+    context.drawImage(compositedDesign, 0, 0);
+    context.restore();
+    if (mockup.overlay) {
+      context.save();
+      context.globalAlpha = Math.max(0, Math.min(1, mockup.overlay.opacity ?? 1));
+      context.globalCompositeOperation = mockup.overlay.blendMode === "normal" ? "source-over" : mockup.overlay.blendMode ?? "multiply";
+      drawCover(await loadImage(mockup.overlay.image));
+      context.restore();
+    }
+    return await canvasElementToBlob(output, format, quality);
+  } finally {
+    for (const element of scratch) {
+      element.width = 0;
+      element.height = 0;
+    }
+  }
 }
 function exportSVG(canvas) {
   return canvas.toSVG();
@@ -1015,9 +1512,583 @@ function exportDataURL(canvas, format = "png", multiplier = 1) {
   return canvas.toDataURL({ format, multiplier });
 }
 
+// src/utils/svg.ts
+function escapeXml(value) {
+  return String(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&apos;");
+}
+function sanitizeSvg(svg) {
+  const document2 = new DOMParser().parseFromString(svg, "image/svg+xml");
+  if (document2.querySelector("parsererror")) throw new Error("Invalid template SVG");
+  document2.querySelectorAll("script, foreignObject, iframe, object, embed, link, style").forEach((node) => node.remove());
+  document2.querySelectorAll("*").forEach((node) => {
+    for (const attribute of [...node.attributes]) {
+      const name = attribute.name.toLowerCase();
+      const value = attribute.value.trim().toLowerCase();
+      const isLink = name === "href" || name === "xlink:href" || name === "src";
+      const safeLink = value.startsWith("#") || /^data:image\/(?:png|jpeg|webp|gif);base64,/.test(value);
+      if (name.startsWith("on") || isLink && !safeLink || /url\s*\(/.test(value) && !/url\s*\(\s*['"]?#/.test(value) || /(?:javascript:|expression\s*\()/.test(value)) {
+        node.removeAttribute(attribute.name);
+      }
+    }
+  });
+  return new XMLSerializer().serializeToString(document2.documentElement);
+}
+
+// src/fonts.ts
+function fontSource(source) {
+  return /^(?:url|local)\(/.test(source.trim()) ? source : `url(${JSON.stringify(source)})`;
+}
+function mimeForSource(source) {
+  const path = source.split(/[?#]/)[0].toLowerCase();
+  if (path.endsWith(".woff2")) return "font/woff2";
+  if (path.endsWith(".woff")) return "font/woff";
+  if (path.endsWith(".otf")) return "font/otf";
+  return "font/ttf";
+}
+function arrayBufferToBase64(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  for (let index = 0; index < bytes.length; index += 32768) {
+    binary += String.fromCharCode(...bytes.subarray(index, index + 32768));
+  }
+  return btoa(binary);
+}
+function cssString(value) {
+  return JSON.stringify(value).replace(/[<>&]/g, (char) => `\\${char.charCodeAt(0).toString(16)} `);
+}
+var SAFE_WEIGHT = /^(?:normal|bold|bolder|lighter|[1-9]\d{0,2}(?:\s+[1-9]\d{0,2})?)$/i;
+var SAFE_STYLE = /^(?:normal|italic|oblique(?:\s+-?\d+(?:\.\d+)?deg)?)$/i;
+var SAFE_DISPLAY = /^(?:auto|block|swap|fallback|optional)$/i;
+function cssKeyword(value, pattern, fallback) {
+  const trimmed = value?.trim();
+  return trimmed && pattern.test(trimmed) ? trimmed : fallback;
+}
+function sourceUrl(source) {
+  const trimmed = source.trim();
+  if (trimmed.startsWith("data:")) return trimmed;
+  const match = trimmed.match(/^url\(\s*(['"]?)(.*?)\1\s*\)/i);
+  if (match) return match[2];
+  if (/^local\(/i.test(trimmed)) return null;
+  return trimmed;
+}
+function localName(source) {
+  const match = source.trim().match(/^local\(\s*(['"]?)([^)"'{};]*)\1\s*\)$/i);
+  return match ? match[2].trim() || null : null;
+}
+var FontRegistry = class {
+  definitions = /* @__PURE__ */ new Map();
+  loads = /* @__PURE__ */ new Map();
+  register(definition) {
+    if (!definition.family.trim() || !definition.source.trim()) {
+      throw new Error("Font family and source are required");
+    }
+    this.definitions.set(definition.family, { ...definition });
+    this.loads.delete(definition.family);
+  }
+  unregister(family) {
+    this.loads.delete(family);
+    return this.definitions.delete(family);
+  }
+  getAll() {
+    return [...this.definitions.values()].map((definition) => ({ ...definition }));
+  }
+  load(family) {
+    const cached = this.loads.get(family);
+    if (cached) return cached;
+    const definition = this.definitions.get(family);
+    if (!definition) return Promise.reject(new Error(`Font is not registered: ${family}`));
+    if (typeof FontFace === "undefined" || typeof document === "undefined") {
+      return Promise.reject(new Error("Font loading requires a browser FontFace API"));
+    }
+    const promise = new FontFace(definition.family, fontSource(definition.source), {
+      weight: definition.weight,
+      style: definition.style,
+      display: definition.display
+    }).load().then((font) => {
+      document.fonts.add(font);
+      return font;
+    });
+    promise.catch(() => {
+      if (this.loads.get(family) === promise) this.loads.delete(family);
+    });
+    this.loads.set(family, promise);
+    return promise;
+  }
+  async ready() {
+    if (this.definitions.size === 0) return;
+    await Promise.all([...this.definitions.keys()].map((family) => this.load(family)));
+    await document.fonts.ready;
+  }
+  async getEmbeddedCss() {
+    const rules = await Promise.all(
+      this.getAll().map(async (definition) => {
+        const url = sourceUrl(definition.source);
+        let cssSource;
+        if (url && !url.startsWith("data:")) {
+          const response = await fetch(url);
+          if (!response.ok) throw new Error(`Failed to fetch font: ${url}`);
+          const data = arrayBufferToBase64(await response.arrayBuffer());
+          const mime = response.headers.get("content-type") || mimeForSource(url);
+          cssSource = `url(${cssString(`data:${mime};base64,${data}`)})`;
+        } else if (url) {
+          cssSource = `url(${cssString(url)})`;
+        } else {
+          const name = localName(definition.source);
+          if (!name) {
+            throw new Error(`Unsupported font source for embedding: ${definition.family}`);
+          }
+          cssSource = `local(${cssString(name)})`;
+        }
+        const weight = cssKeyword(definition.weight, SAFE_WEIGHT, "normal");
+        const style = cssKeyword(definition.style, SAFE_STYLE, "normal");
+        const display = cssKeyword(definition.display, SAFE_DISPLAY, "swap");
+        return `@font-face{font-family:${cssString(definition.family)};src:${cssSource};font-weight:${weight};font-style:${style};font-display:${display}}`;
+      })
+    );
+    return rules.join("\n");
+  }
+};
+
+// src/licensing.ts
+function domainMatches(hostname, pattern) {
+  const host = hostname.toLowerCase();
+  const expected = pattern.toLowerCase();
+  if (expected.startsWith("*.")) {
+    const suffix = expected.slice(1);
+    return host.endsWith(suffix) && host.length > suffix.length;
+  }
+  return host === expected;
+}
+function isLocal(hostname) {
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1" || hostname.endsWith(".localhost");
+}
+var LicenseManager = class {
+  constructor(config = {}) {
+    this.config = config;
+    const hostname = config.hostname ?? globalThis.location?.hostname ?? "localhost";
+    const environment = config.environment ?? "development";
+    if (environment !== "production" || isLocal(hostname)) {
+      this.status = { state: "exempt", payload: null };
+      this.readyPromise = Promise.resolve(this.status);
+    } else if (!config.key) {
+      this.status = { state: "community", payload: null };
+      this.readyPromise = Promise.resolve(this.status);
+    } else {
+      this.status = { state: "checking", payload: null };
+      this.readyPromise = this.validate(config.key, hostname);
+    }
+  }
+  config;
+  status;
+  readyPromise;
+  getStatus() {
+    return this.status;
+  }
+  ready() {
+    return this.readyPromise;
+  }
+  hasFeature(feature) {
+    return this.status.state === "valid" && (this.status.payload.features ?? []).includes(feature);
+  }
+  track(name) {
+    this.config.onUsage?.({
+      name,
+      at: (/* @__PURE__ */ new Date()).toISOString(),
+      licenseId: this.status.state === "valid" ? this.status.payload.id : void 0
+    });
+  }
+  async validate(key, hostname) {
+    const payload = await this.config.verifyOffline?.(key) ?? null;
+    if (!payload) return this.status = { state: "invalid", payload: null };
+    if (payload.expiresAt && Date.parse(payload.expiresAt) < Date.now()) {
+      return this.status = { state: "expired", payload };
+    }
+    if (!payload.domains.some((domain) => domainMatches(hostname, domain))) {
+      return this.status = { state: "domain-mismatch", payload };
+    }
+    return this.status = { state: "valid", payload };
+  }
+};
+
+// src/project.ts
+var ProjectManager = class {
+  constructor(editor) {
+    this.editor = editor;
+    const first = { id: generateId(), name: "Page 1", state: editor.toJSON() };
+    this.pages = [first];
+    this.activePageId = first.id;
+  }
+  editor;
+  pages;
+  activePageId;
+  getAll() {
+    return this.pages.map(({ id, name }) => ({ id, name }));
+  }
+  getActivePageId() {
+    return this.activePageId;
+  }
+  add(name = `Page ${this.pages.length + 1}`, cloneCurrent = false) {
+    this.saveCurrent();
+    const source = structuredClone(this.editor.toJSON());
+    const state = cloneCurrent ? source : this.blankState(source);
+    const page = { id: generateId(), name, state };
+    this.pages.push(page);
+    this.emitChanged();
+    return page.id;
+  }
+  async switchTo(id) {
+    if (id === this.activePageId) return true;
+    const page = this.pages.find((candidate) => candidate.id === id);
+    if (!page) return false;
+    this.saveCurrent();
+    await this.editor.fromJSON(structuredClone(page.state));
+    this.activePageId = id;
+    this.emitChanged();
+    return true;
+  }
+  async duplicate(id) {
+    this.saveCurrent();
+    const source = this.pages.find((page2) => page2.id === id);
+    if (!source) return null;
+    const page = {
+      id: generateId(),
+      name: `${source.name} copy`,
+      state: structuredClone(source.state)
+    };
+    const index = this.pages.indexOf(source);
+    this.pages.splice(index + 1, 0, page);
+    this.emitChanged();
+    return page.id;
+  }
+  async remove(id) {
+    if (this.pages.length === 1) return false;
+    const index = this.pages.findIndex((page) => page.id === id);
+    if (index < 0) return false;
+    if (id === this.activePageId) {
+      const next = this.pages[index + 1] ?? this.pages[index - 1];
+      await this.editor.fromJSON(structuredClone(next.state));
+      this.activePageId = next.id;
+    }
+    this.pages.splice(index, 1);
+    this.emitChanged();
+    return true;
+  }
+  rename(id, name) {
+    const page = this.pages.find((candidate) => candidate.id === id);
+    const trimmed = name.trim();
+    if (!page || !trimmed || page.name === trimmed) return false;
+    page.name = trimmed;
+    this.emitChanged();
+    return true;
+  }
+  reorder(id, newIndex) {
+    const index = this.pages.findIndex((page2) => page2.id === id);
+    if (index < 0 || !Number.isFinite(newIndex)) return false;
+    const target = Math.max(0, Math.min(this.pages.length - 1, Math.round(newIndex)));
+    if (target === index) return false;
+    const [page] = this.pages.splice(index, 1);
+    this.pages.splice(target, 0, page);
+    this.emitChanged();
+    return true;
+  }
+  toJSON() {
+    this.saveCurrent();
+    return {
+      version: "1.0.0",
+      activePageId: this.activePageId,
+      pages: structuredClone(this.pages)
+    };
+  }
+  async fromJSON(project) {
+    if (project?.version !== "1.0.0" || !Array.isArray(project.pages) || project.pages.length === 0 || !project.pages.some((page) => page.id === project.activePageId)) {
+      throw new Error("Invalid project state");
+    }
+    const pages = structuredClone(project.pages);
+    const active = pages.find((page) => page.id === project.activePageId);
+    await this.editor.fromJSON(structuredClone(active.state));
+    this.pages = pages;
+    this.activePageId = active.id;
+    this.emitChanged();
+  }
+  saveCurrent() {
+    const page = this.pages.find((candidate) => candidate.id === this.activePageId);
+    if (page) page.state = structuredClone(this.editor.toJSON());
+  }
+  blankState(source) {
+    return { ...source, layers: [], mockup: null };
+  }
+  emitChanged() {
+    this.editor.events.emit("project:changed", {
+      activePageId: this.activePageId,
+      pages: this.getAll()
+    });
+  }
+};
+
+// src/mask.ts
+var import_fabric5 = require("fabric");
+var MaskRefinementError = class extends Error {
+  constructor(code, message, cause) {
+    super(message);
+    this.code = code;
+    this.cause = cause;
+    this.name = "MaskRefinementError";
+  }
+  code;
+  cause;
+};
+var MaskController = class {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  editor;
+  backing = null;
+  context = null;
+  layerId = null;
+  brush = null;
+  previousPoint = null;
+  strokeBackup = null;
+  strokeStartedAt = null;
+  lastInteractionLatencyMs = 0;
+  refinement = null;
+  disposed = false;
+  async create(width = this.editor.canvas.getWidth(), height = this.editor.canvas.getHeight()) {
+    this.assertActive();
+    if (!Number.isInteger(width) || !Number.isInteger(height) || width <= 0 || height <= 0) {
+      throw new Error("Mask dimensions must be positive integers");
+    }
+    const backing = this.makeCanvas(width, height);
+    const image = new import_fabric5.FabricImage(backing, {
+      left: 0,
+      top: 0,
+      originX: "left",
+      originY: "top",
+      selectable: false
+    });
+    const layer = this.editor.layers.add("mask", image, "Mask");
+    layer.meta.mask = { width, height, revision: 0 };
+    this.editor.history.saveImmediate();
+    this.attachBacking(layer.id, backing);
+    return layer;
+  }
+  attach(layerId) {
+    this.assertActive();
+    this.cancelStroke();
+    const layer = this.requireMask(layerId);
+    const image = layer.fabricObject;
+    const width = layer.meta.mask?.width ?? image.width ?? this.editor.canvas.getWidth();
+    const height = layer.meta.mask?.height ?? image.height ?? this.editor.canvas.getHeight();
+    const backing = this.makeCanvas(width, height);
+    const context = backing.getContext("2d");
+    if (!context) throw new Error("2D mask context is unavailable");
+    const element = image.getElement();
+    if (element) context.drawImage(element, 0, 0, width, height);
+    this.attachBacking(layerId, backing);
+  }
+  beginStroke(options) {
+    this.assertActive();
+    if (!this.context || !this.backing || !this.layerId) throw new Error("Attach a mask first");
+    if (this.brush) throw new Error("A mask stroke is already active");
+    if (!Number.isFinite(options.size) || options.size <= 0) {
+      throw new Error("Mask brush size must be positive");
+    }
+    this.brush = { ...options, hardness: clamp(options.hardness, 0, 1) };
+    this.previousPoint = null;
+    this.strokeBackup = this.context.getImageData(0, 0, this.backing.width, this.backing.height);
+    this.strokeStartedAt = performance.now();
+  }
+  addPoint(point) {
+    if (!this.brush || !this.context || !this.backing || !this.layerId) {
+      throw new Error("No active mask stroke");
+    }
+    if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) return;
+    const previous = this.previousPoint ?? point;
+    const distance = Math.hypot(point.x - previous.x, point.y - previous.y);
+    const step = Math.max(1, this.brush.size / 4);
+    const samples = Math.max(1, Math.ceil(distance / step));
+    for (let index = 0; index <= samples; index += 1) {
+      const ratio = index / samples;
+      this.drawDot({
+        x: previous.x + (point.x - previous.x) * ratio,
+        y: previous.y + (point.y - previous.y) * ratio
+      });
+    }
+    this.previousPoint = point;
+    this.requireMask(this.layerId).fabricObject.setElement(this.backing);
+    this.editor.canvas.requestRenderAll();
+  }
+  async endStroke() {
+    if (!this.brush || !this.backing || !this.layerId) return;
+    const layerId = this.layerId;
+    this.brush = null;
+    this.previousPoint = null;
+    this.strokeBackup = null;
+    const dataUrl = this.backing.toDataURL("image/png");
+    await this.editor.history.transaction(async () => {
+      await this.editor.replaceImageSource(layerId, dataUrl);
+      const layer = this.requireMask(layerId);
+      if (layer.meta.mask) layer.meta.mask.revision += 1;
+    });
+    this.attach(layerId);
+    if (this.strokeStartedAt !== null) {
+      this.lastInteractionLatencyMs = performance.now() - this.strokeStartedAt;
+      this.strokeStartedAt = null;
+    }
+  }
+  cancelStroke() {
+    if (this.strokeBackup && this.context && this.backing && this.layerId) {
+      this.context.putImageData(this.strokeBackup, 0, 0);
+      this.requireMask(this.layerId).fabricObject.setElement(this.backing);
+      this.editor.canvas.requestRenderAll();
+    }
+    this.brush = null;
+    this.previousPoint = null;
+    this.strokeBackup = null;
+    this.strokeStartedAt = null;
+  }
+  isStrokeActive() {
+    return this.brush !== null;
+  }
+  activeLayerId() {
+    return this.layerId;
+  }
+  detach(layerId) {
+    if (layerId && this.layerId !== layerId) return;
+    this.cancelStroke();
+    this.cancelRefinement();
+    this.backing = null;
+    this.context = null;
+    this.layerId = null;
+  }
+  async refine(layerId, provider, prompts, options = {}) {
+    this.assertActive();
+    const layer = this.editor.layers.get(layerId);
+    if (!layer || layer.type !== "mask") {
+      throw new MaskRefinementError("not-found", `Mask layer not found: ${layerId}`);
+    }
+    this.cancelRefinement();
+    const controller = new AbortController();
+    this.refinement = controller;
+    const abort = () => controller.abort(options.signal?.reason);
+    options.signal?.addEventListener("abort", abort, { once: true });
+    if (options.signal?.aborted) abort();
+    try {
+      const image = layer.fabricObject;
+      const result = await provider.refine(
+        {
+          mask: image.getSrc(),
+          width: layer.meta.mask?.width ?? image.width ?? 1,
+          height: layer.meta.mask?.height ?? image.height ?? 1,
+          prompts: structuredClone(prompts)
+        },
+        { signal: controller.signal, onProgress: options.onProgress }
+      );
+      if (controller.signal.aborted)
+        throw new MaskRefinementError("cancelled", "Mask refinement cancelled");
+      if (!/^data:image\/(?:png|jpeg|webp);base64,/i.test(result.dataUrl)) {
+        throw new MaskRefinementError(
+          "invalid-result",
+          "Mask refinement must return a base64 PNG, JPEG, or WebP data URL"
+        );
+      }
+      await this.editor.history.transaction(async () => {
+        await this.editor.replaceImageSource(layerId, result.dataUrl);
+        if (layer.meta.mask) layer.meta.mask.revision += 1;
+      });
+      this.attach(layerId);
+      return result;
+    } catch (error) {
+      if (error instanceof MaskRefinementError) throw error;
+      if (controller.signal.aborted) {
+        throw new MaskRefinementError("cancelled", "Mask refinement cancelled", error);
+      }
+      throw new MaskRefinementError("provider", "Mask refinement provider failed", error);
+    } finally {
+      options.signal?.removeEventListener("abort", abort);
+      if (this.refinement === controller) this.refinement = null;
+    }
+  }
+  cancelRefinement() {
+    this.refinement?.abort(new DOMException("Cancelled", "AbortError"));
+    this.refinement = null;
+  }
+  measure() {
+    if (!this.backing) return null;
+    const started = performance.now();
+    this.context?.getImageData(0, 0, 1, 1);
+    const backingBytes = this.backing.width * this.backing.height * 4;
+    const strokeBackupBytes = this.strokeBackup ? backingBytes : 0;
+    const memory = performance;
+    return {
+      width: this.backing.width,
+      height: this.backing.height,
+      backingBytes,
+      strokeBackupBytes,
+      // The backing store and rollback ImageData dominate interactive mask
+      // memory. Encoded historical rasters are reported separately below.
+      estimatedPeakBytes: backingBytes + strokeBackupBytes,
+      historyBytes: this.editor.history.getSnapshotBytes(),
+      interactionLatencyMs: this.lastInteractionLatencyMs,
+      ...typeof memory.memory?.usedJSHeapSize === "number" ? { usedJsHeapBytes: memory.memory.usedJSHeapSize } : {},
+      elapsedMs: performance.now() - started
+    };
+  }
+  dispose() {
+    this.detach();
+    this.disposed = true;
+  }
+  drawDot(point) {
+    const context = this.context;
+    const brush = this.brush;
+    const radius = brush.size / 2;
+    context.save();
+    context.globalCompositeOperation = brush.mode === "subtract" ? "destination-out" : "source-over";
+    const gradient = context.createRadialGradient(
+      point.x,
+      point.y,
+      radius * brush.hardness,
+      point.x,
+      point.y,
+      radius
+    );
+    const color = brush.mode === "subtract" ? "rgba(0,0,0,1)" : "rgba(255,255,255,1)";
+    gradient.addColorStop(0, color);
+    gradient.addColorStop(1, "rgba(255,255,255,0)");
+    context.fillStyle = gradient;
+    context.beginPath();
+    context.arc(point.x, point.y, radius, 0, Math.PI * 2);
+    context.fill();
+    context.restore();
+  }
+  makeCanvas(width, height) {
+    const canvas = this.editor.canvas.lowerCanvasEl.ownerDocument.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+  }
+  attachBacking(layerId, backing) {
+    const context = backing.getContext("2d");
+    if (!context) throw new Error("2D mask context is unavailable");
+    this.layerId = layerId;
+    this.backing = backing;
+    this.context = context;
+  }
+  requireMask(layerId) {
+    const layer = this.editor.layers.get(layerId);
+    if (!layer || layer.type !== "mask") throw new Error(`Mask layer not found: ${layerId}`);
+    return layer;
+  }
+  assertActive() {
+    if (this.disposed) throw new Error("Mask controller has been disposed");
+  }
+};
+
 // src/editor.ts
 var MIN_ZOOM = 0.1;
 var MAX_ZOOM = 8;
+function isTaintedCanvasError(error) {
+  return error instanceof DOMException && error.name === "SecurityError" || error instanceof Error && /taint|cross-origin|insecure/i.test(error.message);
+}
 var CanvasEditor = class {
   canvas;
   layers;
@@ -1027,6 +2098,10 @@ var CanvasEditor = class {
   snapping;
   crop;
   patterns;
+  fonts;
+  licensing;
+  pages;
+  masks;
   fileAdapter;
   imageProvider;
   zoomLevel = 1;
@@ -1035,13 +2110,18 @@ var CanvasEditor = class {
   // transparent while a mockup preview is shown, so this is the source of truth
   // for serialization and export — not the (possibly transient) canvas value.
   designBackground;
+  designBackgroundImage = null;
+  backgroundImageOptions = null;
   constructor(canvasElement, config) {
     this.events = new EventEmitter();
+    this.fonts = new FontRegistry();
+    config.fonts?.forEach((font) => this.fonts.register(font));
+    this.licensing = new LicenseManager(config.license);
     this.units = new UnitConverter(config.unit ?? "px", config.dpi ?? 72);
     const widthPx = this.units.toPixels(config.width);
     const heightPx = this.units.toPixels(config.height);
     this.designBackground = config.backgroundColor ?? "#ffffff";
-    this.canvas = new import_fabric4.Canvas(canvasElement, {
+    this.canvas = new import_fabric6.Canvas(canvasElement, {
       width: widthPx,
       height: heightPx,
       backgroundColor: this.designBackground,
@@ -1059,21 +2139,79 @@ var CanvasEditor = class {
       },
       events: this.events
     });
+    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.patterns = new PatternManager(
+      this.canvas,
+      this.layers,
+      this.history,
+      this.events,
+      config.patternSourceResolver
+    );
     this.setupCanvasEvents();
     this.history.saveImmediate();
+    this.pages = new ProjectManager(this);
+    this.masks = new MaskController(this);
   }
   // ─── Layer Operations ────────────────────────────────
   async addImage(url, options) {
-    const img = await import_fabric4.FabricImage.fromURL(url, {}, { originX: "left", originY: "top", ...options });
-    const layer = this.layers.add("image", img);
-    this.history.save();
-    return layer;
+    try {
+      const img = await import_fabric6.FabricImage.fromURL(
+        url,
+        {},
+        { originX: "left", originY: "top", ...options }
+      );
+      const layer = this.layers.add("image", img);
+      this.history.save();
+      return layer;
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to add image", error });
+      throw error;
+    }
+  }
+  /** Replace an image source without changing its layer identity or visual transform. */
+  async replaceImageSource(layerId, url) {
+    const layer = this.layers.get(layerId);
+    if (!layer || layer.type !== "image" && layer.type !== "mask") {
+      throw new Error(`Image or mask layer not found: ${layerId}`);
+    }
+    if (layer.meta.pattern) {
+      throw new Error("Clear the pattern before replacing the image source");
+    }
+    if (this.crop.activeLayerId() === layerId) this.crop.cancel();
+    const previous = layer.fabricObject;
+    try {
+      const replacement = await import_fabric6.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
+      replacement.set({
+        left: previous.left,
+        top: previous.top,
+        originX: previous.originX,
+        originY: previous.originY,
+        width: previous.width,
+        height: previous.height,
+        cropX: previous.cropX,
+        cropY: previous.cropY,
+        scaleX: previous.scaleX,
+        scaleY: previous.scaleY,
+        angle: previous.angle,
+        skewX: previous.skewX,
+        skewY: previous.skewY,
+        flipX: previous.flipX,
+        flipY: previous.flipY
+      });
+      replacement.filters = [...previous.filters];
+      replacement.applyFilters();
+      replacement.setCoords();
+      this.layers.replaceObject(layerId, replacement);
+      return layer;
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to replace image source", error });
+      throw error;
+    }
   }
   addText(text, options) {
-    const textbox = new import_fabric4.Textbox(text, {
+    const textbox = new import_fabric6.Textbox(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
@@ -1093,27 +2231,45 @@ var CanvasEditor = class {
     this.history.save();
     return layer;
   }
-  async addTemplate(template, _params) {
-    const { Textbox: TextboxClass } = await import("fabric");
-    const placeholder = new TextboxClass(`[Template: ${template.name}]`, {
-      fontSize: 24,
-      fontFamily: "Arial",
-      fill: "#666666",
-      width: 300,
-      originX: "left",
-      originY: "top"
-    });
-    const layer = this.layers.add(
-      "template",
-      placeholder,
-      template.name
+  async addTemplate(template, params) {
+    const values = {};
+    for (const parameter of template.parameters) {
+      const value = params[parameter.key] ?? parameter.default;
+      if (value === void 0) throw new Error(`Missing template parameter: ${parameter.key}`);
+      if (parameter.type === "number" && !Number.isFinite(Number(value))) {
+        throw new Error(`Invalid number for template parameter: ${parameter.key}`);
+      }
+      if (parameter.type === "color" && !isCssColor(value)) {
+        throw new Error(`Invalid color for template parameter: ${parameter.key}`);
+      }
+      values[parameter.key] = value;
+    }
+    const resolved = sanitizeSvg(
+      template.svg.replace(/\{\{(\w+)(?:[|:]([^}]*))?\}\}/g, (token, key, fallback) => {
+        const value = values[key] ?? fallback;
+        return value === void 0 ? token : escapeXml(value);
+      })
     );
+    const { objects, options } = await (0, import_fabric6.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_fabric6.util.groupSVGElements(validObjects, options);
+    group.set({
+      left: this.canvas.getWidth() / 2,
+      top: this.canvas.getHeight() / 2,
+      originX: "center",
+      originY: "center"
+    });
+    const layer = this.layers.add("template", group, template.name);
     this.history.save();
     return layer;
   }
   removeLayer(id) {
-    this.layers.remove(id);
-    this.history.save();
+    if (this.crop.activeLayerId() === id) this.crop.cancel();
+    if (this.masks.activeLayerId() === id) {
+      this.masks.detach(id);
+    }
+    if (this.layers.remove(id)) this.history.save();
   }
   selectLayer(id) {
     this.layers.select(id);
@@ -1148,35 +2304,220 @@ var CanvasEditor = class {
     clone.setCoords();
     const copy = this.layers.add(layer.type, clone, `${layer.name} copy`);
     copy.meta = structuredClone(layer.meta);
+    copy.visible = layer.visible;
+    copy.locked = layer.locked;
+    copy.opacity = layer.opacity;
+    clone.set({
+      visible: layer.visible,
+      selectable: !layer.locked,
+      evented: !layer.locked,
+      opacity: layer.opacity
+    });
     this.canvas.setActiveObject(clone);
     this.canvas.requestRenderAll();
     this.history.save();
     return copy;
   }
+  applyImageAdjustments(layerId, adjustments) {
+    const layer = this.layers.get(layerId);
+    if (!layer || layer.type !== "image") return false;
+    const image = layer.fabricObject;
+    const previous = layer.meta.imageAdjustments ?? {};
+    const next = { ...previous, ...adjustments };
+    const clampAdjustment = (value, min = -1) => clamp(value ?? 0, min, 1);
+    image.filters = [
+      new import_fabric6.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
+      new import_fabric6.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
+      new import_fabric6.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
+      new import_fabric6.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
+    ];
+    layer.meta.imageAdjustments = next;
+    image.applyFilters();
+    this.canvas.requestRenderAll();
+    this.history.save();
+    return true;
+  }
+  /** Combine two or more layers into a single editable group layer. */
+  async groupLayers(ids, name = "Group") {
+    const uniqueIds = [...new Set(ids)];
+    const children = uniqueIds.map((id) => this.layers.get(id)).filter((layer) => layer !== void 0);
+    if (children.length < 2 || children.length !== uniqueIds.length) return null;
+    return this.history.transaction(() => {
+      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_fabric6.Group(objects);
+      const grouped = this.layers.add("group", group, name);
+      grouped.meta.groupChildren = childData;
+      this.layers.select(grouped.id);
+      this.history.save();
+      return grouped;
+    });
+  }
+  /** Restore a group created by groupLayers back to its original layer records. */
+  async ungroupLayer(id) {
+    const grouped = this.layers.get(id);
+    const childData = grouped?.meta.groupChildren;
+    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_fabric6.util.addTransformToObject(object, transform);
+        object.setCoords();
+        const data = childData[index];
+        const layer = this.layers.add(data?.type ?? "group", object, data?.name, data?.id);
+        if (data?.meta) layer.meta = structuredClone(data.meta);
+        if (data && !data.visible) this.layers.setVisibility(layer.id, false);
+        if (data?.locked) this.layers.setLocked(layer.id, true);
+        if (data && data.opacity !== 1) this.layers.setOpacity(layer.id, data.opacity);
+        return layer;
+      });
+      this.history.save();
+      this.layers.select(restored[0]?.id ?? null);
+      return restored;
+    });
+  }
   // ─── Serialization ──────────────────────────────────
   toJSON() {
     return serializeEditor(this);
   }
   async fromJSON(state) {
-    await deserializeEditor(this, state);
-    this.patterns.repinAll();
+    const managedByHistory = this.history.isRestoring();
+    if (!managedByHistory) {
+      this.history.saveImmediate();
+      this.history.pause();
+    }
+    try {
+      await deserializeEditor(this, state);
+      this.patterns.repinAll();
+    } catch (error) {
+      if (!managedByHistory) {
+        this.events.emit("error", { message: "Failed to load editor state", error });
+      }
+      throw error;
+    } finally {
+      if (!managedByHistory) this.history.resume();
+    }
+    if (!managedByHistory) {
+      this.history.clear();
+      this.history.saveImmediate();
+    }
   }
   // ─── Export ──────────────────────────────────────────
   async toPNG(options) {
-    this.events.emit("export:start", { format: "png" });
-    const blob = await this.withDesignBackground(() => exportPNG(this.canvas, options));
-    this.events.emit("export:complete", { format: "png" });
-    return blob;
+    return this.toRaster(options?.format ?? "png", options);
+  }
+  async toJPEG(options) {
+    return this.toRaster("jpeg", options);
+  }
+  async toWebP(options) {
+    return this.toRaster("webp", options);
+  }
+  /** Export one layer in document coordinates or at its native image resolution. */
+  async exportLayer(id, options = {}) {
+    const layer = this.layers.get(id);
+    if (!layer) throw new Error(`Layer not found: ${id}`);
+    try {
+      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric6.FabricImage) {
+        const image = await layer.fabricObject.clone();
+        image.set({
+          left: 0,
+          top: 0,
+          originX: "left",
+          originY: "top",
+          scaleX: 1,
+          scaleY: 1,
+          angle: 0,
+          flipX: false,
+          flipY: false
+        });
+        return await exportIsolatedPNG(this.canvas, [image], {
+          ...options,
+          width: image.width || 1,
+          height: image.height || 1,
+          cloneObjects: false
+        });
+      }
+      return await exportIsolatedPNG(this.canvas, [layer.fabricObject], options);
+    } catch (error) {
+      this.events.emit("error", { message: `Failed to export layer: ${id}`, error });
+      throw error;
+    }
+  }
+  /** Export only the configured document background, excluding design layers. */
+  async exportBackground(options = {}) {
+    try {
+      return await exportIsolatedPNG(this.canvas, [], {
+        ...options,
+        backgroundColor: this.designBackground,
+        backgroundImage: this.designBackgroundImage
+      });
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to export background", error });
+      throw error;
+    }
+  }
+  async toRaster(format, options) {
+    this.events.emit("export:start", { format });
+    try {
+      await this.fonts.ready();
+      const blob = await this.withDesignBackground(
+        () => exportPNG(this.canvas, { ...options, format })
+      );
+      this.events.emit("export:complete", { format });
+      this.licensing.track(`export:${format}`);
+      return blob;
+    } catch (error) {
+      this.events.emit("error", {
+        message: isTaintedCanvasError(error) ? "Canvas export was blocked by cross-origin image data; load remote images with CORS enabled" : `Failed to export ${format.toUpperCase()}`,
+        error
+      });
+      throw error;
+    }
   }
   toSVG() {
     this.events.emit("export:start", { format: "svg" });
-    const svg = this.withDesignBackground(() => exportSVG(this.canvas));
-    this.events.emit("export:complete", { format: "svg" });
-    return svg;
+    try {
+      const svg = this.withDesignBackground(() => exportSVG(this.canvas));
+      this.events.emit("export:complete", { format: "svg" });
+      this.licensing.track("export:svg");
+      return svg;
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to export SVG", error });
+      throw error;
+    }
+  }
+  async toSVGAsync(options = {}) {
+    await this.fonts.ready();
+    const svg = this.toSVG();
+    if (options.embedFonts === false || this.fonts.getAll().length === 0) return svg;
+    try {
+      const css = await this.fonts.getEmbeddedCss();
+      return svg.replace(/(<svg\b[^>]*>)/i, `$1<defs><style>${css}</style></defs>`);
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to embed fonts in SVG", error });
+      throw error;
+    }
   }
   toDataURL(format = "png", multiplier = 1) {
     return this.withDesignBackground(() => exportDataURL(this.canvas, format, multiplier));
   }
+  /** Export the current product-preview composite. Advanced warping is host-defined. */
+  async toMockupImage(options = {}) {
+    if (!this.mockup) throw new Error("No mockup is configured");
+    await this.fonts.ready();
+    try {
+      const blob = await exportMockup(this.canvas, this.mockup, options);
+      this.licensing.track(`export:mockup:${options.format ?? "png"}`);
+      return blob;
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to export mockup", error });
+      throw error;
+    }
+  }
   /**
    * Run an export with the configured design background applied, even when a
    * mockup preview has forced the live canvas transparent — so exports reflect
@@ -1185,11 +2526,14 @@ var CanvasEditor = class {
   withDesignBackground(fn) {
     if (!this.mockup) return fn();
     const previewBg = this.canvas.backgroundColor;
+    const previewImage = this.canvas.backgroundImage;
     this.canvas.backgroundColor = this.designBackground;
+    this.canvas.backgroundImage = this.designBackgroundImage ?? void 0;
     try {
       return fn();
     } finally {
       this.canvas.backgroundColor = previewBg;
+      this.canvas.backgroundImage = previewImage;
     }
   }
   toPrintifyPositioning() {
@@ -1204,7 +2548,8 @@ var CanvasEditor = class {
     for (const layer of imageLayers) {
       const obj = layer.fabricObject;
       const center = obj.getCenterPoint();
-      result[layer.name] = {
+      const key = result[layer.name] ? `${layer.name}-${layer.id}` : layer.name;
+      result[key] = {
         x: round2(center.x / canvasW),
         y: round2(center.y / canvasH),
         scale: round2(obj.scaleX ?? 1),
@@ -1213,26 +2558,92 @@ var CanvasEditor = class {
     }
     return result;
   }
+  /** Provider-neutral, ID-stable placement data in 0..1 canvas coordinates. */
+  toNormalizedPositioning() {
+    const canvasWidth = this.canvas.getWidth();
+    const canvasHeight = this.canvas.getHeight();
+    return this.layers.getAll().map((layer) => {
+      const object = layer.fabricObject;
+      const center = object.getCenterPoint();
+      const bounds = object.getBoundingRect();
+      return {
+        layerId: layer.id,
+        name: layer.name,
+        type: layer.type,
+        centerX: round2(center.x / canvasWidth),
+        centerY: round2(center.y / canvasHeight),
+        width: round2(bounds.width / canvasWidth),
+        height: round2(bounds.height / canvasHeight),
+        scaleX: round2(object.scaleX ?? 1),
+        scaleY: round2(object.scaleY ?? 1),
+        angle: round2(object.angle ?? 0)
+      };
+    });
+  }
+  toProviderPositioning(adapter) {
+    return adapter.map(this.toNormalizedPositioning(), {
+      width: this.canvas.getWidth(),
+      height: this.canvas.getHeight()
+    });
+  }
   // ─── File Operations ────────────────────────────────
   async save(filename, format) {
     if (!this.fileAdapter) return void 0;
     let data;
     if (format === "png") {
       data = await this.toPNG();
+    } else if (format === "jpeg") {
+      data = await this.toJPEG();
+    } else if (format === "webp") {
+      data = await this.toWebP();
     } else if (format === "svg") {
-      data = this.toSVG();
+      data = await this.toSVGAsync();
     } else {
       data = JSON.stringify(this.toJSON(), null, 2);
     }
-    return this.fileAdapter.save(data, filename, format);
+    try {
+      return await this.fileAdapter.save(data, filename, format);
+    } catch (error) {
+      this.events.emit("error", { message: `Failed to save ${format}`, error });
+      throw error;
+    }
   }
   async uploadImage(file) {
-    if (!this.imageProvider) return void 0;
-    return this.imageProvider.upload(file);
+    if (!this.imageProvider?.upload) return void 0;
+    try {
+      return await this.imageProvider.upload(file);
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to upload image", error });
+      throw error;
+    }
   }
   async browseImages() {
     if (!this.imageProvider?.browse) return null;
-    return this.imageProvider.browse();
+    try {
+      return await this.imageProvider.browse();
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to browse images", error });
+      throw error;
+    }
+  }
+  async searchImages(query, options) {
+    if (!this.imageProvider?.search) return null;
+    try {
+      return await this.imageProvider.search(query, options);
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to search images", error });
+      throw error;
+    }
+  }
+  /** Track provider usage, then insert its hotlinked image as a normal layer. */
+  async addProviderImage(image, options) {
+    try {
+      await this.imageProvider?.trackUse?.(image);
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to record image use", error });
+      throw error;
+    }
+    return this.addImage(image.url, options);
   }
   setFileAdapter(adapter) {
     this.fileAdapter = adapter;
@@ -1248,15 +2659,140 @@ var CanvasEditor = class {
       this.canvas.requestRenderAll();
     }
     this.history.save();
+    this.events.emit("canvas:modified", {});
   }
   getDesignBackground() {
     return this.designBackground;
   }
-  resize(width, height) {
+  getDesignBackgroundImage() {
+    return this.designBackgroundImage;
+  }
+  getBackgroundImageOptions() {
+    return this.backgroundImageOptions ? { ...this.backgroundImageOptions } : null;
+  }
+  async setBackgroundImage(url, options = {}) {
+    if (url === null) {
+      this.setBackgroundImageObject(null);
+      return;
+    }
+    try {
+      const image = await import_fabric6.FabricImage.fromURL(
+        url,
+        { crossOrigin: options.crossOrigin ?? null, signal: options.signal },
+        { originX: "left", originY: "top" }
+      );
+      const width = image.width || 1;
+      const height = image.height || 1;
+      const canvasWidth = this.canvas.getWidth();
+      const canvasHeight = this.canvas.getHeight();
+      const fit = options.fit ?? "cover";
+      const sx = canvasWidth / width;
+      const sy = canvasHeight / height;
+      const scaleX = fit === "stretch" ? sx : fit === "contain" ? Math.min(sx, sy) : Math.max(sx, sy);
+      const scaleY = fit === "stretch" ? sy : scaleX;
+      image.set({
+        left: (canvasWidth - width * scaleX) / 2,
+        top: (canvasHeight - height * scaleY) / 2,
+        scaleX,
+        scaleY,
+        opacity: clamp(options.opacity ?? 1, 0, 1),
+        selectable: false,
+        evented: false
+      });
+      const serializableOptions = { ...options };
+      delete serializableOptions.signal;
+      this.setBackgroundImageObject(image, true, serializableOptions);
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to set background image", error });
+      throw error;
+    }
+  }
+  /** Used by state restoration and advanced integrations with an existing Fabric object. */
+  setBackgroundImageObject(image, save = true, options = null) {
+    this.designBackgroundImage = image;
+    this.backgroundImageOptions = image ? options : null;
+    this.canvas.backgroundImage = this.mockup ? void 0 : image ?? void 0;
+    this.canvas.requestRenderAll();
+    if (save) this.history.save();
+    this.events.emit("canvas:modified", {});
+  }
+  setTransparentBackground() {
+    this.setBackground("");
+  }
+  resize(width, height, options = {}) {
     const widthPx = this.units.toPixels(width);
     const heightPx = this.units.toPixels(height);
+    const oldWidth = this.canvas.getWidth();
+    const oldHeight = this.canvas.getHeight();
+    const scaleContent = options.scaleContent ?? true;
+    if (scaleContent && oldWidth > 0 && oldHeight > 0) {
+      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,
+          top: (object.top ?? 0) * sy,
+          scaleX: (object.scaleX ?? 1) * sx,
+          scaleY: (object.scaleY ?? 1) * sy
+        });
+        object.setCoords();
+      }
+      if (this.designBackgroundImage) {
+        this.designBackgroundImage.set({
+          left: (this.designBackgroundImage.left ?? 0) * sx,
+          top: (this.designBackgroundImage.top ?? 0) * sy,
+          scaleX: (this.designBackgroundImage.scaleX ?? 1) * sx,
+          scaleY: (this.designBackgroundImage.scaleY ?? 1) * sy
+        });
+        this.designBackgroundImage.setCoords();
+      }
+    }
     this.canvas.setDimensions({ width: widthPx, height: heightPx });
+    this.patterns.repinAll();
     this.canvas.requestRenderAll();
+    this.history.save();
+    this.events.emit("canvas:modified", {});
+  }
+  /** Effective source resolution for an image at its current physical size. */
+  getImageDpi(layerId) {
+    const layer = this.layers.get(layerId);
+    if (!layer || layer.type !== "image") return null;
+    const image = layer.fabricObject;
+    const sourcePixels = image.width ?? 0;
+    const displayedPixels = image.getScaledWidth();
+    if (sourcePixels <= 0 || displayedPixels <= 0) return null;
+    return round2(sourcePixels / (displayedPixels / this.units.getDpi()));
+  }
+  validateImageDpi(minimumDpi = 300) {
+    return this.layers.getAll().filter((layer) => layer.type === "image" && !layer.meta.pattern).flatMap((layer) => {
+      const effectiveDpi = this.getImageDpi(layer.id);
+      return effectiveDpi !== null && effectiveDpi < minimumDpi ? [{ layerId: layer.id, layerName: layer.name, effectiveDpi, minimumDpi }] : [];
+    });
+  }
+  /** Render a small data-URL preview without changing document dimensions. */
+  toThumbnail(maxWidth = 320, maxHeight = 320, format = "png") {
+    const multiplier = Math.min(
+      1,
+      maxWidth / this.canvas.getWidth(),
+      maxHeight / this.canvas.getHeight()
+    );
+    return this.toDataURL(format, multiplier);
+  }
+  bringToFront(id) {
+    return this.layers.reorder(id, this.layers.count() - 1);
+  }
+  sendToBack(id) {
+    return this.layers.reorder(id, 0);
+  }
+  bringForward(id) {
+    const index = this.layers.getAll().findIndex((layer) => layer.id === id);
+    return index >= 0 && this.layers.reorder(id, index + 1);
+  }
+  sendBackward(id) {
+    const index = this.layers.getAll().findIndex((layer) => layer.id === id);
+    return index >= 0 && this.layers.reorder(id, index - 1);
   }
   // ─── Zoom ───────────────────────────────────────────
   //
@@ -1294,6 +2830,20 @@ var CanvasEditor = class {
     const sy = (viewportHeight - padding * 2) / h;
     this.setZoom(Math.min(sx, sy));
   }
+  /** Zoom until the current selection fills the artboard viewport. */
+  zoomToSelection(padding = 24) {
+    const active = this.canvas.getActiveObject();
+    if (!active) return;
+    active.setCoords();
+    const bounds = active.getBoundingRect();
+    if (bounds.width <= 0 || bounds.height <= 0) return;
+    this.setZoom(
+      Math.min(
+        (this.canvas.getWidth() - padding * 2) / bounds.width,
+        (this.canvas.getHeight() - padding * 2) / bounds.height
+      )
+    );
+  }
   // ─── Patterns ───────────────────────────────────────
   applyPattern(layerId, config) {
     return this.patterns.apply(layerId, config);
@@ -1305,8 +2855,10 @@ var CanvasEditor = class {
   setMockup(mockup) {
     this.mockup = mockup;
     this.canvas.backgroundColor = mockup ? "" : this.designBackground;
+    this.canvas.backgroundImage = mockup ? void 0 : this.designBackgroundImage ?? void 0;
     this.canvas.requestRenderAll();
     this.events.emit("mockup:changed", { mockup });
+    this.history.save();
   }
   clearMockup() {
     this.setMockup(null);
@@ -1316,9 +2868,11 @@ var CanvasEditor = class {
   }
   // ─── Cleanup ────────────────────────────────────────
   dispose() {
+    this.masks.dispose();
     this.snapping.dispose();
     this.crop.dispose();
     this.history.dispose();
+    clearPatternImageCache();
     this.events.removeAllListeners();
     this.canvas.dispose();
   }
@@ -1359,16 +2913,74 @@ var DEFAULT_PATTERN_CONFIG = {
   rotationStepH: 0,
   rotationStepV: 0
 };
+
+// src/presets.ts
+var CANVAS_SIZE_PRESETS = [
+  { id: "a4-portrait", name: "A4 portrait", width: 210, height: 297, unit: "mm", dpi: 300 },
+  { id: "a4-landscape", name: "A4 landscape", width: 297, height: 210, unit: "mm", dpi: 300 },
+  { id: "us-letter", name: "US Letter", width: 8.5, height: 11, unit: "in", dpi: 300 },
+  { id: "shirt-front", name: "Garment front", width: 12, height: 16, unit: "in", dpi: 300 },
+  { id: "instagram-square", name: "Social square", width: 1080, height: 1080, unit: "px", dpi: 72 },
+  { id: "story", name: "Story", width: 1080, height: 1920, unit: "px", dpi: 72 }
+];
+
+// src/annotations.ts
+var AnnotationOverlay = class {
+  items = /* @__PURE__ */ new Map();
+  transform = { zoom: 1, panX: 0, panY: 0, devicePixelRatio: 1 };
+  set(annotation) {
+    this.items.set(annotation.id, structuredClone(annotation));
+  }
+  remove(id) {
+    return this.items.delete(id);
+  }
+  clear() {
+    this.items.clear();
+  }
+  getAll() {
+    return [...this.items.values()].map((item) => structuredClone(item));
+  }
+  setTransform(transform) {
+    if (!Number.isFinite(transform.zoom) || transform.zoom <= 0) {
+      throw new Error("Annotation zoom must be positive");
+    }
+    this.transform = { ...transform, devicePixelRatio: transform.devicePixelRatio ?? 1 };
+  }
+  documentToViewport(point) {
+    return {
+      x: point.x * this.transform.zoom + this.transform.panX,
+      y: point.y * this.transform.zoom + this.transform.panY
+    };
+  }
+  viewportToDocument(point) {
+    return {
+      x: (point.x - this.transform.panX) / this.transform.zoom,
+      y: (point.y - this.transform.panY) / this.transform.zoom
+    };
+  }
+  documentToDevice(point) {
+    const viewport = this.documentToViewport(point);
+    const ratio = this.transform.devicePixelRatio ?? 1;
+    return { x: viewport.x * ratio, y: viewport.y * ratio };
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnnotationOverlay,
+  CANVAS_SIZE_PRESETS,
   CanvasEditor,
   CropController,
   DEFAULT_PATTERN_CONFIG,
   EventEmitter,
+  FontRegistry,
   HistoryManager,
   Layer,
   LayerManager,
+  LicenseManager,
+  MaskController,
+  MaskRefinementError,
   PatternManager,
+  ProjectManager,
   SnapManager,
   UnitConverter,
   applyPatternLocks,
@@ -1376,15 +2988,23 @@ var DEFAULT_PATTERN_CONFIG = {
   captureLocks,
   clamp,
   clearPatternImageCache,
+  computeCoverPlacement,
+  computePrintAreaClip,
   computeTilePositions,
   deserializeEditor,
+  displaceRgba,
   drawTiles,
+  escapeXml,
   exportDataURL,
+  exportMockup,
   exportPNG,
   exportSVG,
   generateId,
+  isCssColor,
+  loadPatternImage,
   restoreLocks,
   round2,
+  sanitizeSvg,
   serializeEditor
 });
 //# sourceMappingURL=index.js.map