@overtone-art/canvas-editor-core 0.1.0 → 0.2.1

package/dist/index.js

@@ -31,13 +31,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CanvasEditor: () => CanvasEditor,
+  CropController: () => CropController,
+  DEFAULT_PATTERN_CONFIG: () => DEFAULT_PATTERN_CONFIG,
   EventEmitter: () => EventEmitter,
   HistoryManager: () => HistoryManager,
   Layer: () => Layer,
   LayerManager: () => LayerManager,
+  PatternManager: () => PatternManager,
+  SnapManager: () => SnapManager,
   UnitConverter: () => UnitConverter,
+  buildPatternDataURL: () => buildPatternDataURL,
   clamp: () => clamp,
+  clearPatternImageCache: () => clearPatternImageCache,
+  computeTilePositions: () => computeTilePositions,
   deserializeEditor: () => deserializeEditor,
+  drawTiles: () => drawTiles,
   exportDataURL: () => exportDataURL,
   exportPNG: () => exportPNG,
   exportSVG: () => exportSVG,
@@ -48,7 +56,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/editor.ts
-var import_fabric2 = require("fabric");
+var import_fabric3 = require("fabric");
 
 // src/events.ts
 var EventEmitter = class {
@@ -97,6 +105,8 @@ var Layer = class {
   visible;
   locked;
   opacity;
+  /** Non-fabric data (e.g. pattern config) that must persist with the layer. */
+  meta;
   fabricObject;
   constructor(type, fabricObject, name, id) {
     this.id = id ?? generateId();
@@ -105,9 +115,13 @@ var Layer = class {
     this.visible = true;
     this.locked = false;
     this.opacity = 1;
+    this.meta = {};
     this.fabricObject = fabricObject;
     this.fabricObject._layerId = this.id;
   }
+  hasMeta() {
+    return Object.keys(this.meta).length > 0;
+  }
   toData() {
     return {
       id: this.id,
@@ -115,7 +129,8 @@ var Layer = class {
       name: this.name,
       visible: this.visible,
       locked: this.locked,
-      opacity: this.opacity
+      opacity: this.opacity,
+      ...this.hasMeta() ? { meta: this.meta } : {}
     };
   }
   serialize() {
@@ -275,6 +290,7 @@ var HistoryManager = class {
     this.emitChanged();
   }
   async undo() {
+    this.cancelPending();
     const state = this.undoStack.pop();
     if (!state) return;
     this.redoStack.push(this.getState());
@@ -284,6 +300,7 @@ var HistoryManager = class {
     this.emitChanged();
   }
   async redo() {
+    this.cancelPending();
     const state = this.redoStack.pop();
     if (!state) return;
     this.undoStack.push(this.getState());
@@ -292,6 +309,11 @@ var HistoryManager = class {
     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. */
+  isRestoring() {
+    return this.paused;
+  }
   pause() {
     this.paused = true;
   }
@@ -309,6 +331,12 @@ var HistoryManager = class {
     this.redoStack = [];
     this.emitChanged();
   }
+  cancelPending() {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+      this.debounceTimer = null;
+    }
+  }
   dispose() {
     if (this.debounceTimer) {
       clearTimeout(this.debounceTimer);
@@ -322,6 +350,466 @@ var HistoryManager = class {
   }
 };
 
+// src/snapping.ts
+var STROKE = "#22c55e";
+var SnapManager = class {
+  constructor(canvas, events) {
+    this.canvas = canvas;
+    this.events = events;
+    this.onMoving = (e) => this.handleMoving(e.target);
+    this.onAfterRender = () => this.drawGuides();
+    this.onModified = () => this.clearGuides();
+    this.canvas.on("object:moving", this.onMoving);
+    this.canvas.on("after:render", this.onAfterRender);
+    this.canvas.on("mouse:up", this.onModified);
+    this.canvas.on("selection:cleared", this.onModified);
+  }
+  canvas;
+  events;
+  enabled = false;
+  threshold = 8;
+  guides = [];
+  onMoving;
+  onAfterRender;
+  onModified;
+  setEnabled(enabled) {
+    if (this.enabled === enabled) return;
+    this.enabled = enabled;
+    if (!enabled) this.clearGuides();
+    this.events.emit("snap:changed", { enabled });
+  }
+  isEnabled() {
+    return this.enabled;
+  }
+  setThreshold(px) {
+    this.threshold = Math.max(0, px);
+  }
+  dispose() {
+    this.canvas.off("object:moving", this.onMoving);
+    this.canvas.off("after:render", this.onAfterRender);
+    this.canvas.off("mouse:up", this.onModified);
+    this.canvas.off("selection:cleared", this.onModified);
+    this.guides = [];
+  }
+  handleMoving(target) {
+    if (!this.enabled || !target) return;
+    target.setCoords();
+    const r = target.getBoundingRect();
+    const cw = this.canvas.getWidth();
+    const ch = this.canvas.getHeight();
+    const { xs, ys } = collectCandidates(this.canvas, target, cw, ch);
+    this.guides = [];
+    const dx = bestSnap([r.left, r.left + r.width / 2, r.left + r.width], xs, this.threshold);
+    if (dx !== null) {
+      target.set("left", (target.left ?? 0) + dx.delta);
+      this.guides.push({ x: dx.line });
+    }
+    const dy = bestSnap([r.top, r.top + r.height / 2, r.top + r.height], ys, this.threshold);
+    if (dy !== null) {
+      target.set("top", (target.top ?? 0) + dy.delta);
+      this.guides.push({ y: dy.line });
+    }
+    target.setCoords();
+  }
+  drawGuides() {
+    if (!this.enabled || this.guides.length === 0) return;
+    const ctx = this.canvas.contextTop;
+    if (!ctx) return;
+    const retina = this.canvas.getRetinaScaling();
+    const cw = this.canvas.getWidth();
+    const ch = this.canvas.getHeight();
+    ctx.save();
+    ctx.setTransform(retina, 0, 0, retina, 0, 0);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = STROKE;
+    ctx.setLineDash([4, 4]);
+    ctx.beginPath();
+    for (const g of this.guides) {
+      if (g.x !== void 0) {
+        ctx.moveTo(g.x, 0);
+        ctx.lineTo(g.x, ch);
+      }
+      if (g.y !== void 0) {
+        ctx.moveTo(0, g.y);
+        ctx.lineTo(cw, g.y);
+      }
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
+  clearGuides() {
+    if (this.guides.length === 0) return;
+    this.guides = [];
+    this.canvas.clearContext(this.canvas.contextTop);
+  }
+};
+function collectCandidates(canvas, moving, cw, ch) {
+  const xs = [0, cw / 2, cw];
+  const ys = [0, ch / 2, ch];
+  for (const obj of canvas.getObjects()) {
+    if (obj === moving || !obj.visible) continue;
+    obj.setCoords();
+    const r = obj.getBoundingRect();
+    xs.push(r.left, r.left + r.width / 2, r.left + r.width);
+    ys.push(r.top, r.top + r.height / 2, r.top + r.height);
+  }
+  return { xs, ys };
+}
+function bestSnap(edges, candidates, threshold) {
+  let best = null;
+  for (const edge of edges) {
+    for (const c of candidates) {
+      const dist = Math.abs(edge - c);
+      if (dist <= threshold && (best === null || dist < best.dist)) {
+        best = { delta: c - edge, line: c, dist };
+      }
+    }
+  }
+  return best ? { delta: best.delta, line: best.line } : null;
+}
+
+// src/crop.ts
+var import_fabric = require("fabric");
+
+// src/utils/clamp.ts
+function clamp(v, min, max) {
+  return Math.min(max, Math.max(min, v));
+}
+function round2(v) {
+  return Math.round(v * 100) / 100;
+}
+
+// src/crop.ts
+var CropController = class {
+  constructor(canvas, history, events) {
+    this.canvas = canvas;
+    this.history = history;
+    this.events = events;
+    this.onSelectionCleared = () => {
+      if (this.session) this.cancel();
+    };
+    this.canvas.on("selection:cleared", this.onSelectionCleared);
+  }
+  canvas;
+  history;
+  events;
+  session = null;
+  onSelectionCleared;
+  isActive() {
+    return this.session !== null;
+  }
+  activeLayerId() {
+    return this.session?.layerId ?? null;
+  }
+  start(layer) {
+    if (layer.type !== "image") return;
+    if (this.session) this.cancel();
+    const image = layer.fabricObject;
+    const prevAngle = image.angle ?? 0;
+    if (prevAngle) image.rotate(0);
+    image.setCoords();
+    const b = image.getBoundingRect();
+    const rect = new import_fabric.Rect({
+      left: b.left,
+      top: b.top,
+      width: b.width,
+      height: b.height,
+      originX: "left",
+      originY: "top",
+      fill: "rgba(34,197,94,0.12)",
+      stroke: STROKE2,
+      strokeWidth: 1,
+      strokeDashArray: [4, 4],
+      strokeUniform: true,
+      lockRotation: true,
+      cornerColor: STROKE2,
+      transparentCorners: false
+    });
+    rect.setControlsVisibility({ mtr: false });
+    const prevSelectable = image.selectable ?? true;
+    const prevEvented = image.evented ?? true;
+    image.selectable = false;
+    image.evented = false;
+    this.canvas.add(rect);
+    this.canvas.setActiveObject(rect);
+    this.canvas.requestRenderAll();
+    this.session = { layerId: layer.id, image, rect, prevSelectable, prevEvented, prevAngle };
+    this.events.emit("crop:changed", { active: true, layerId: layer.id });
+  }
+  apply() {
+    const s = this.session;
+    if (!s) return;
+    const { image, rect } = s;
+    rect.setCoords();
+    image.setCoords();
+    const scaleX = image.scaleX ?? 1;
+    const scaleY = image.scaleY ?? 1;
+    const imgLeft = image.left ?? 0;
+    const imgTop = image.top ?? 0;
+    const el = image.getElement();
+    const naturalW = el.naturalWidth || image.width || 0;
+    const naturalH = el.naturalHeight || image.height || 0;
+    let cropX = (image.cropX ?? 0) + (rect.left - imgLeft) / scaleX;
+    let cropY = (image.cropY ?? 0) + (rect.top - imgTop) / scaleY;
+    let cropW = rect.getScaledWidth() / scaleX;
+    let cropH = rect.getScaledHeight() / scaleY;
+    cropX = clamp(cropX, 0, Math.max(0, naturalW - 1));
+    cropY = clamp(cropY, 0, Math.max(0, naturalH - 1));
+    cropW = clamp(cropW, 1, naturalW - cropX);
+    cropH = clamp(cropH, 1, naturalH - cropY);
+    image.set({
+      cropX,
+      cropY,
+      width: cropW,
+      height: cropH,
+      // Anchor the displayed result where the rect sits.
+      left: imgLeft + (cropX - (image.cropX ?? 0)) * scaleX,
+      top: imgTop + (cropY - (image.cropY ?? 0)) * scaleY
+    });
+    image.setCoords();
+    this.finish();
+    this.history.save();
+  }
+  cancel() {
+    const s = this.session;
+    if (!s) return;
+    if (s.prevAngle) {
+      s.image.rotate(s.prevAngle);
+      s.image.setCoords();
+    }
+    this.finish();
+  }
+  dispose() {
+    this.cancel();
+    this.canvas.off("selection:cleared", this.onSelectionCleared);
+  }
+  finish() {
+    const s = this.session;
+    if (!s) return;
+    this.session = null;
+    this.canvas.remove(s.rect);
+    s.image.selectable = s.prevSelectable;
+    s.image.evented = s.prevEvented;
+    this.canvas.setActiveObject(s.image);
+    this.canvas.requestRenderAll();
+    this.events.emit("crop:changed", { active: false, layerId: null });
+  }
+};
+var STROKE2 = "#22c55e";
+
+// src/pattern.ts
+var PatternManager = class {
+  constructor(canvas, layers, history) {
+    this.canvas = canvas;
+    this.layers = layers;
+    this.history = history;
+  }
+  canvas;
+  layers;
+  history;
+  // 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();
+  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) {
+        layer.meta.pattern = {
+          config,
+          originalSrc: elementToDataURL(image) ?? image.getSrc(),
+          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
+          }
+        };
+      } else {
+        layer.meta.pattern.config = config;
+      }
+      try {
+        await this.renderLayer(layer);
+      } catch (err) {
+        if (firstEnable) delete layer.meta.pattern;
+        throw err;
+      }
+      this.history.save();
+    });
+  }
+  /** 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
+      });
+      image.setCoords();
+      delete layer.meta.pattern;
+      this.canvas.requestRenderAll();
+      this.history.save();
+    });
+  }
+  /** 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;
+  }
+  async renderLayer(layer) {
+    const state = layer.meta.pattern;
+    if (!state) return;
+    const image = layer.fabricObject;
+    const cw = this.canvas.getWidth();
+    const ch = this.canvas.getHeight();
+    const tileW = state.original.width * state.original.scaleX;
+    const tileH = state.original.height * state.original.scaleY;
+    const dataUrl = await buildPatternDataURL(
+      state.originalSrc,
+      state.config,
+      cw,
+      ch,
+      tileW,
+      tileH
+    );
+    await image.setSrc(dataUrl);
+    image.set({ left: 0, top: 0, scaleX: 1, scaleY: 1, cropX: 0, cropY: 0, angle: 0 });
+    image.setCoords();
+    this.canvas.requestRenderAll();
+  }
+};
+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 loadImage(src) {
+  const cached = imageCache.get(src);
+  if (cached) {
+    imageCache.delete(src);
+    imageCache.set(src, cached);
+    return cached;
+  }
+  const promise = decodeImage(src);
+  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) {
+  const img = await loadImage(src);
+  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 tileW = Math.max(1, baseW * (1 + config.horizontalSpacing / 100));
+  const tileH = Math.max(1, baseH * (1 + config.verticalSpacing / 100));
+  const diag = Math.sqrt(targetW * targetW + targetH * targetH);
+  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 placements = [];
+  for (let j = -halfRows; j <= halfRows; j++) {
+    for (let i = -halfCols; i <= halfCols; i++) {
+      let x = i * tileW;
+      let y = j * tileH;
+      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 mod2(n) {
+  return (n % 2 + 2) % 2;
+}
+
 // src/utils/units.ts
 var MM_PER_INCH = 25.4;
 var UnitConverter = class {
@@ -368,7 +856,7 @@ var UnitConverter = class {
 };
 
 // src/serialization.ts
-var import_fabric = require("fabric");
+var import_fabric2 = require("fabric");
 var VERSION = "1.0.0";
 function serializeEditor(editor) {
   return {
@@ -378,14 +866,20 @@ function serializeEditor(editor) {
       height: editor.canvas.getHeight()
     },
     layers: editor.layers.getAll().map((layer) => layer.serialize()),
-    background: editor.canvas.backgroundColor
+    // The configured design background, not the live canvas value (which is
+    // forced transparent while a mockup preview is active).
+    background: editor.getDesignBackground(),
+    mockup: editor.getMockup()
   };
 }
 async function deserializeEditor(editor, state) {
   editor.layers.clear();
   editor.canvas.setDimensions({ width: state.canvas.width, height: state.canvas.height });
   if (state.background) {
-    editor.canvas.backgroundColor = state.background;
+    editor.setBackground(state.background);
+  }
+  if (state.mockup !== void 0) {
+    editor.setMockup(state.mockup);
   }
   for (const serializedLayer of state.layers) {
     await restoreLayer(editor, serializedLayer);
@@ -393,14 +887,12 @@ async function deserializeEditor(editor, state) {
   editor.canvas.requestRenderAll();
 }
 async function restoreLayer(editor, serialized) {
-  const objects = await import_fabric.util.enlivenObjects([serialized.fabricObject]);
+  const objects = await import_fabric2.util.enlivenObjects([serialized.fabricObject]);
   const fabricObject = objects[0];
-  const layer = editor.layers.add(
-    serialized.type,
-    fabricObject,
-    serialized.name,
-    serialized.id
-  );
+  const layer = editor.layers.add(serialized.type, fabricObject, serialized.name, serialized.id);
+  if (serialized.meta) {
+    layer.meta = serialized.meta;
+  }
   if (!serialized.visible) {
     editor.layers.setVisibility(layer.id, false);
   }
@@ -431,32 +923,36 @@ function exportDataURL(canvas, format = "png", multiplier = 1) {
   return canvas.toDataURL({ format, multiplier });
 }
 
-// src/utils/clamp.ts
-function clamp(v, min, max) {
-  return Math.min(max, Math.max(min, v));
-}
-function round2(v) {
-  return Math.round(v * 100) / 100;
-}
-
 // src/editor.ts
+var MIN_ZOOM = 0.1;
+var MAX_ZOOM = 8;
 var CanvasEditor = class {
   canvas;
   layers;
   history;
   events;
   units;
+  snapping;
+  crop;
+  patterns;
   fileAdapter;
   imageProvider;
+  zoomLevel = 1;
+  mockup = null;
+  // The design's configured background. The live canvas background is forced
+  // 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;
   constructor(canvasElement, config) {
     this.events = new EventEmitter();
     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.canvas = new import_fabric2.Canvas(canvasElement, {
+    this.designBackground = config.backgroundColor ?? "#ffffff";
+    this.canvas = new import_fabric3.Canvas(canvasElement, {
       width: widthPx,
       height: heightPx,
-      backgroundColor: config.backgroundColor ?? "#ffffff",
+      backgroundColor: this.designBackground,
       preserveObjectStacking: config.preserveObjectStacking ?? true,
       selection: true
     });
@@ -471,22 +967,28 @@ var CanvasEditor = class {
       },
       events: this.events
     });
+    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.setupCanvasEvents();
     this.history.saveImmediate();
   }
   // ─── Layer Operations ────────────────────────────────
   async addImage(url, options) {
-    const img = await import_fabric2.FabricImage.fromURL(url, {}, options);
+    const img = await import_fabric3.FabricImage.fromURL(url, {}, { originX: "left", originY: "top", ...options });
     const layer = this.layers.add("image", img);
     this.history.save();
     return layer;
   }
   addText(text, options) {
-    const textbox = new import_fabric2.Textbox(text, {
+    const textbox = new import_fabric3.Textbox(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
       width: 200,
+      // v7 defaults origin to center; keep top-left placement.
+      originX: "left",
+      originY: "top",
       ...options
     });
     const layer = this.layers.add("text", textbox);
@@ -505,9 +1007,15 @@ var CanvasEditor = class {
       fontSize: 24,
       fontFamily: "Arial",
       fill: "#666666",
-      width: 300
+      width: 300,
+      originX: "left",
+      originY: "top"
     });
-    const layer = this.layers.add("template", placeholder, template.name);
+    const layer = this.layers.add(
+      "template",
+      placeholder,
+      template.name
+    );
     this.history.save();
     return layer;
   }
@@ -523,6 +1031,36 @@ var CanvasEditor = class {
     if (!active) return null;
     return this.layers.findByObject(active) ?? null;
   }
+  /** Mirror a layer along the given axis. */
+  flipLayer(id, axis) {
+    const layer = this.layers.get(id);
+    if (!layer) return;
+    const obj = layer.fabricObject;
+    if (axis === "horizontal") {
+      obj.set("flipX", !obj.flipX);
+    } else {
+      obj.set("flipY", !obj.flipY);
+    }
+    obj.setCoords();
+    this.canvas.requestRenderAll();
+    this.history.save();
+  }
+  /** Clone a layer (offset slightly) and select the copy. */
+  async duplicateLayer(id) {
+    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.setCoords();
+    const copy = this.layers.add(layer.type, clone, `${layer.name} copy`);
+    copy.meta = structuredClone(layer.meta);
+    this.canvas.setActiveObject(clone);
+    this.canvas.requestRenderAll();
+    this.history.save();
+    return copy;
+  }
   // ─── Serialization ──────────────────────────────────
   toJSON() {
     return serializeEditor(this);
@@ -533,18 +1071,33 @@ var CanvasEditor = class {
   // ─── Export ──────────────────────────────────────────
   async toPNG(options) {
     this.events.emit("export:start", { format: "png" });
-    const blob = await exportPNG(this.canvas, options);
+    const blob = await this.withDesignBackground(() => exportPNG(this.canvas, options));
     this.events.emit("export:complete", { format: "png" });
     return blob;
   }
   toSVG() {
     this.events.emit("export:start", { format: "svg" });
-    const svg = exportSVG(this.canvas);
+    const svg = this.withDesignBackground(() => exportSVG(this.canvas));
     this.events.emit("export:complete", { format: "svg" });
     return svg;
   }
   toDataURL(format = "png", multiplier = 1) {
-    return exportDataURL(this.canvas, format, multiplier);
+    return this.withDesignBackground(() => exportDataURL(this.canvas, format, multiplier));
+  }
+  /**
+   * Run an export with the configured design background applied, even when a
+   * mockup preview has forced the live canvas transparent — so exports reflect
+   * the design, not the preview. Restores the preview state afterwards.
+   */
+  withDesignBackground(fn) {
+    if (!this.mockup) return fn();
+    const previewBg = this.canvas.backgroundColor;
+    this.canvas.backgroundColor = this.designBackground;
+    try {
+      return fn();
+    } finally {
+      this.canvas.backgroundColor = previewBg;
+    }
   }
   toPrintifyPositioning() {
     const result = {};
@@ -596,22 +1149,82 @@ var CanvasEditor = class {
   }
   // ─── Canvas Operations ──────────────────────────────
   setBackground(color) {
-    this.canvas.backgroundColor = color;
-    this.canvas.requestRenderAll();
+    this.designBackground = color;
+    if (!this.mockup) {
+      this.canvas.backgroundColor = color;
+      this.canvas.requestRenderAll();
+    }
     this.history.save();
   }
+  getDesignBackground() {
+    return this.designBackground;
+  }
   resize(width, height) {
     const widthPx = this.units.toPixels(width);
     const heightPx = this.units.toPixels(height);
     this.canvas.setDimensions({ width: widthPx, height: heightPx });
     this.canvas.requestRenderAll();
   }
+  // ─── Zoom ───────────────────────────────────────────
+  //
+  // Zoom is a *display* transform (the view layer CSS-scales the canvas), not a
+  // fabric viewport zoom — fabric's setZoom bakes into toDataURL/toSVG and would
+  // corrupt exports. The editor only tracks the level and emits an event.
+  setZoom(level) {
+    const next = clamp(round2(level), MIN_ZOOM, MAX_ZOOM);
+    if (next === this.zoomLevel) return;
+    this.zoomLevel = next;
+    this.events.emit("zoom:changed", { zoom: next });
+  }
+  /** @deprecated use setZoom — kept for backward compatibility. */
   zoom(level) {
-    this.canvas.setZoom(level);
+    this.setZoom(level);
+  }
+  getZoom() {
+    return this.zoomLevel;
+  }
+  zoomIn(step = 0.1) {
+    this.setZoom(this.zoomLevel + step);
+  }
+  zoomOut(step = 0.1) {
+    this.setZoom(this.zoomLevel - step);
+  }
+  resetZoom() {
+    this.setZoom(1);
+  }
+  /** Fit the canvas inside a viewport (in px), accounting for padding. */
+  zoomToFit(viewportWidth, viewportHeight, padding = 0) {
+    const w = this.canvas.getWidth();
+    const h = this.canvas.getHeight();
+    if (w <= 0 || h <= 0) return;
+    const sx = (viewportWidth - padding * 2) / w;
+    const sy = (viewportHeight - padding * 2) / h;
+    this.setZoom(Math.min(sx, sy));
+  }
+  // ─── Patterns ───────────────────────────────────────
+  applyPattern(layerId, config) {
+    return this.patterns.apply(layerId, config);
+  }
+  clearPattern(layerId) {
+    return this.patterns.disable(layerId);
+  }
+  // ─── Mockup (preview-only) ──────────────────────────
+  setMockup(mockup) {
+    this.mockup = mockup;
+    this.canvas.backgroundColor = mockup ? "" : this.designBackground;
     this.canvas.requestRenderAll();
+    this.events.emit("mockup:changed", { mockup });
+  }
+  clearMockup() {
+    this.setMockup(null);
+  }
+  getMockup() {
+    return this.mockup;
   }
   // ─── Cleanup ────────────────────────────────────────
   dispose() {
+    this.snapping.dispose();
+    this.crop.dispose();
     this.history.dispose();
     this.events.removeAllListeners();
     this.canvas.dispose();
@@ -639,16 +1252,35 @@ var CanvasEditor = class {
     });
   }
 };
+
+// src/types.ts
+var DEFAULT_PATTERN_CONFIG = {
+  mode: "grid",
+  horizontalSpacing: 0,
+  verticalSpacing: 0,
+  angle: 0,
+  horizontalOffset: 0,
+  rotationStepH: 0,
+  rotationStepV: 0
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CanvasEditor,
+  CropController,
+  DEFAULT_PATTERN_CONFIG,
   EventEmitter,
   HistoryManager,
   Layer,
   LayerManager,
+  PatternManager,
+  SnapManager,
   UnitConverter,
+  buildPatternDataURL,
   clamp,
+  clearPatternImageCache,
+  computeTilePositions,
   deserializeEditor,
+  drawTiles,
   exportDataURL,
   exportPNG,
   exportSVG,