@overtone-art/canvas-editor-core 0.8.6 → 0.9.0

package/dist/index.mjs

@@ -1,11 +1,20 @@
 import {
+  ADJUST_KEYS,
+  ADJUST_RANGES,
+  IMAGE_FILTER_PRESETS,
+  IMAGE_PROXY_MAX_EDGE,
+  NEUTRAL_ADJUST,
   TEXT_FIT_SLACK,
   TextWrapManager,
+  alphaClipMatrix,
   applyMatrix,
   applyRelativeMatrix,
   applyTextWrapToObject,
   asObject,
   asText,
+  clamp,
+  clampAdjust,
+  clampAlphaClip,
   computeCoverPlacement,
   computePrintAreaClip,
   displaceRgba,
@@ -17,19 +26,34 @@ import {
   exportSVG,
   fitTextWidth,
   fitToBox,
+  imageEffectsFilterSpecs,
+  imageFilterPreset,
   matrixOf,
+  normalizeImageEffects,
   preWrapWordSplit,
   readTextWrap,
   relativeMatrix,
+  round2,
   textInk,
   toCanvasSpace,
   toHostSpace,
   toMatrix,
   unwrapGroup
-} from "./chunk-TP527WVQ.mjs";
+} from "./chunk-QZUDGRRS.mjs";
 
 // src/editor.ts
-import { Canvas, FabricImage as FabricImage3, Group as Group7, Rect as Rect4, Textbox as Textbox2, filters } from "fabric";
+import {
+  ActiveSelection as ActiveSelection3,
+  Canvas,
+  FabricImage as FabricImage3,
+  Group as Group7,
+  Rect as Rect4,
+  Textbox as Textbox2,
+  classRegistry as classRegistry2,
+  util as util7
+} from "fabric";
+import * as fabricModule from "fabric";
+import { registerEffects } from "@overtone-art/canvas-editor-effects";
 
 // src/events.ts
 var EventEmitter = class {
@@ -67,7 +91,7 @@ var EventEmitter = class {
 };
 
 // src/layer.ts
-import { ActiveSelection } from "fabric";
+import { ActiveSelection, util } from "fabric";
 
 // src/utils/id.ts
 import { nanoid } from "nanoid";
@@ -181,9 +205,31 @@ var Layer = class {
       ...this.toData(),
       // A group's own object already carries its children's geometry, so the
       // child records in `toData` stay identity-only — nothing is duplicated.
-      fabricObject: this.fabricObject.toObject()
+      fabricObject: this.serializeObject()
     };
   }
+  /**
+   * A member of an ActiveSelection holds selection-relative coordinates and
+   * `toObject()` writes them verbatim. A snapshot taken mid-selection — which
+   * `HistoryManager.undo()` takes — then held positions no restore could use,
+   * and the redo scattered the layers. Realise the selection's transform for
+   * the write and put the object's own transform back.
+   */
+  serializeObject() {
+    const object = this.fabricObject;
+    const selection = object.group;
+    if (!(selection instanceof ActiveSelection)) {
+      return object.toObject();
+    }
+    const saved = util.saveObjectTransform(object);
+    util.addTransformToObject(object, selection.calcOwnMatrix());
+    try {
+      return object.toObject();
+    } finally {
+      object.set(saved);
+      object.setCoords();
+    }
+  }
 };
 var LayerManager = class {
   constructor(canvas, events) {
@@ -1084,16 +1130,6 @@ function bestSnap(edges, candidates, threshold) {
 
 // src/crop.ts
 import { Rect } from "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;
@@ -1115,7 +1151,7 @@ var CropController = class {
   activeLayerId() {
     return this.session?.layerId ?? null;
   }
-  start(layer) {
+  start(layer, options = {}) {
     if (layer.type !== "image") return;
     if (this.session) this.cancel();
     const image = layer.fabricObject;
@@ -1123,6 +1159,12 @@ var CropController = class {
     if (prevAngle) image.rotate(0);
     image.setCoords();
     const b = image.getBoundingRect();
+    const prevTransform = {
+      scaleX: image.scaleX,
+      scaleY: image.scaleY,
+      left: image.left,
+      top: image.top
+    };
     const rect = new Rect({
       left: b.left,
       top: b.top,
@@ -1147,8 +1189,95 @@ var CropController = class {
     this.canvas.add(rect);
     this.canvas.setActiveObject(rect);
     this.canvas.requestRenderAll();
-    this.session = { layerId: layer.id, image, rect, prevSelectable, prevEvented, prevAngle };
+    this.session = {
+      layerId: layer.id,
+      image,
+      rect,
+      prevSelectable,
+      prevEvented,
+      prevAngle,
+      prevTransform,
+      startRect: { left: b.left, top: b.top, width: b.width, height: b.height },
+      aspect: null
+    };
     this.events.emit("crop:changed", { active: true, layerId: layer.id });
+    if (options.aspect) this.setAspect(options.aspect);
+  }
+  /**
+   * The frame's own geometry, without its stroke.
+   *
+   * The rect draws a 1px dashed outline, and `getBoundingRect` /
+   * `getScaledWidth` both count it — so reading the frame through them made the
+   * aspect box, the zoom centre and the applied crop each about a pixel larger
+   * than the box the user drew. The rect is axis-aligned (rotation is locked),
+   * so its own left/top and scaled dimensions are exact.
+   */
+  frameBox(rect) {
+    return {
+      left: rect.left,
+      top: rect.top,
+      width: rect.width * rect.scaleX,
+      height: rect.height * rect.scaleY
+    };
+  }
+  /**
+   * Lock the frame to a ratio: it becomes the largest box of that ratio inside
+   * the current frame, centred, and only the corner handles stay — fabric's
+   * default `uniformScaling` then keeps the ratio through a drag. `null` frees it.
+   */
+  setAspect(ratio) {
+    const s = this.session;
+    if (!s) return;
+    s.aspect = ratio && ratio > 0 ? ratio : null;
+    const { rect } = s;
+    const sides = s.aspect === null;
+    rect.setControlsVisibility({ ml: sides, mr: sides, mt: sides, mb: sides, mtr: false });
+    if (s.aspect !== null) {
+      rect.setCoords();
+      const current = this.frameBox(rect);
+      const width = Math.min(current.width, current.height * s.aspect);
+      const height = width / s.aspect;
+      rect.set({
+        left: current.left + (current.width - width) / 2,
+        top: current.top + (current.height - height) / 2,
+        width,
+        height,
+        scaleX: 1,
+        scaleY: 1
+      });
+      rect.setCoords();
+    }
+    this.canvas.requestRenderAll();
+  }
+  /** Zoom the image under a fixed frame, about the frame's centre. */
+  setScale(factor) {
+    const s = this.session;
+    if (!s || !Number.isFinite(factor) || factor <= 0) return;
+    const { image, rect } = s;
+    rect.setCoords();
+    const frame = this.frameBox(rect);
+    const centre = { x: frame.left + frame.width / 2, y: frame.top + frame.height / 2 };
+    const scaleX = Math.max(0.01, image.scaleX * factor);
+    const scaleY = Math.max(0.01, image.scaleY * factor);
+    const applied = scaleX / image.scaleX;
+    image.set({
+      scaleX,
+      scaleY,
+      left: centre.x - (centre.x - image.left) * applied,
+      top: centre.y - (centre.y - image.top) * applied
+    });
+    image.setCoords();
+    this.canvas.requestRenderAll();
+  }
+  /** Back to the frame and image transform the session started with; aspect freed. */
+  reset() {
+    const s = this.session;
+    if (!s) return;
+    s.image.set(s.prevTransform);
+    s.image.setCoords();
+    s.rect.set({ ...s.startRect, scaleX: 1, scaleY: 1 });
+    s.rect.setCoords();
+    this.setAspect(null);
   }
   apply() {
     const s = this.session;
@@ -1163,10 +1292,11 @@ var CropController = class {
     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;
+    const frame = this.frameBox(rect);
+    let cropX = (image.cropX ?? 0) + (frame.left - imgLeft) / scaleX;
+    let cropY = (image.cropY ?? 0) + (frame.top - imgTop) / scaleY;
+    let cropW = frame.width / scaleX;
+    let cropH = frame.height / 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);
@@ -1191,6 +1321,8 @@ var CropController = class {
   cancel() {
     const s = this.session;
     if (!s) return;
+    s.image.set(s.prevTransform);
+    s.image.setCoords();
     if (s.prevAngle) {
       s.image.rotate(s.prevAngle);
       s.image.setCoords();
@@ -1215,11 +1347,67 @@ var CropController = class {
 };
 var STROKE2 = "#22c55e";
 
+// src/align.ts
+import { ActiveSelection as ActiveSelection2, Point, util as util2 } from "fabric";
+function unionBox(boxes) {
+  const left = Math.min(...boxes.map((b) => b.left));
+  const top = Math.min(...boxes.map((b) => b.top));
+  const right = Math.max(...boxes.map((b) => b.left + b.width));
+  const bottom = Math.max(...boxes.map((b) => b.top + b.height));
+  return { left, top, width: right - left, height: bottom - top };
+}
+function boxOf(object) {
+  object.setCoords();
+  return object.getBoundingRect();
+}
+function moveBy(object, dx, dy) {
+  const parent = object.group;
+  const vector = parent ? util2.sendVectorToPlane(new Point(dx, dy), void 0, parent.calcTransformMatrix()) : new Point(dx, dy);
+  object.set({ left: (object.left ?? 0) + vector.x, top: (object.top ?? 0) + vector.y });
+  object.setCoords();
+}
+function alignObjects(objects, target, frame) {
+  for (const object of objects) {
+    const b = boxOf(object);
+    if (target === "left") moveBy(object, frame.left - b.left, 0);
+    if (target === "center-h") moveBy(object, frame.left + (frame.width - b.width) / 2 - b.left, 0);
+    if (target === "right") moveBy(object, frame.left + frame.width - b.width - b.left, 0);
+    if (target === "top") moveBy(object, 0, frame.top - b.top);
+    if (target === "middle") moveBy(object, 0, frame.top + (frame.height - b.height) / 2 - b.top);
+    if (target === "bottom") moveBy(object, 0, frame.top + frame.height - b.height - b.top);
+  }
+}
+function distributeObjects(objects, axis) {
+  if (objects.length < 3) return false;
+  const measured = objects.map((object) => ({ object, box: boxOf(object) }));
+  const pos = (b) => axis === "h" ? b.left : b.top;
+  const size = (b) => axis === "h" ? b.width : b.height;
+  const ordered = [...measured].sort((a, b) => pos(a.box) - pos(b.box));
+  const span = unionBox(measured.map((m) => m.box));
+  const total = ordered.reduce((sum, m) => sum + size(m.box), 0);
+  const gap = (size(span) - total) / (ordered.length - 1);
+  let cursor = pos(span);
+  for (const { object, box } of ordered) {
+    const delta = cursor - pos(box);
+    moveBy(object, axis === "h" ? delta : 0, axis === "h" ? 0 : delta);
+    cursor += size(box) + gap;
+  }
+  return true;
+}
+function relayoutSelection(active) {
+  if (!(active instanceof ActiveSelection2)) return;
+  active.triggerLayout();
+  active.setCoords();
+}
+function canvasBox(width, height) {
+  return { left: 0, top: 0, width, height };
+}
+
 // src/pattern/pattern-manager.ts
-import { util } from "fabric";
+import { util as util3 } from "fabric";
 
 // src/pattern/tiled-pattern-object.ts
-import { FabricObject, Point } from "fabric";
+import { FabricObject, Point as Point2 } from "fabric";
 
 // src/pattern/tile-geometry.ts
 var MAX_TILES_PER_AXIS = 200;
@@ -1376,7 +1564,7 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     const centre = this.getCenterPoint();
     const shift = this.shiftVector(tileW, tileH, this.liveAngle());
     const ink = this.inkOffset();
-    return new Point(centre.x - shift.x - ink.x, centre.y - shift.y - ink.y);
+    return new Point2(centre.x - shift.x - ink.x, centre.y - shift.y - ink.y);
   }
   _render(ctx) {
     const { width, height } = this.area;
@@ -1463,6 +1651,10 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
       angle: this.angle,
       scaleX: this.scaleX,
       scaleY: this.scaleY,
+      skewX: this.skewX,
+      skewY: this.skewY,
+      flipX: this.flipX,
+      flipY: this.flipY,
       width: this.width,
       height: this.height,
       visible: this.visible,
@@ -1508,12 +1700,12 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
    */
   inkOffset() {
     const text = asText(this.source);
-    if (!text) return new Point(0, 0);
+    if (!text) return new Point2(0, 0);
     const { dx } = textInk(text);
-    if (!dx) return new Point(0, 0);
+    if (!dx) return new Point2(0, 0);
     const scaled = dx * (this.source.scaleX ?? 1);
     const radians = (this.source.angle ?? 0) * Math.PI / 180;
-    return new Point(scaled * Math.cos(radians), scaled * Math.sin(radians));
+    return new Point2(scaled * Math.cos(radians), scaled * Math.sin(radians));
   }
   /** The source's on-canvas width, before the tile scale. */
   baseW() {
@@ -1574,11 +1766,11 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     const radians = angle * Math.PI / 180;
     const cos = Math.cos(radians);
     const sin = Math.sin(radians);
-    return new Point(dx * cos - dy * sin, dx * sin + dy * cos);
+    return new Point2(dx * cos - dy * sin, dx * sin + dy * cos);
   }
   anchorFromOrigin(origin, tileW, tileH, angle) {
     const shift = this.shiftVector(tileW, tileH, angle);
-    return new Point(origin.x + shift.x, origin.y + shift.y);
+    return new Point2(origin.x + shift.x, origin.y + shift.y);
   }
   /**
    * Snapshot the source at (at least) `scale`, reusing the cached one while it
@@ -1783,6 +1975,11 @@ var PatternManager = class {
     if (wasActive) this.canvas.setActiveObject(proxy);
     this.canvas.requestRenderAll();
   }
+  /** Fold a programmatic move of the proxy into the config and the source, as a drop does. */
+  commitProxy(layerId) {
+    const proxy = this.proxies.get(layerId);
+    if (proxy) this.commitGesture(proxy);
+  }
   /**
    * Fold a finished drag / scale / rotate on the proxy back into the pattern:
    * position becomes the grid origin (carried by the source), scale becomes the
@@ -1850,7 +2047,7 @@ async function unbakeLegacyLayer(layer, state) {
     cropY: state.original.cropY,
     angle: state.original.angle
   });
-  image.clipPath = state.originalClip ? (await util.enlivenObjects([state.originalClip]))[0] : void 0;
+  image.clipPath = state.originalClip ? (await util3.enlivenObjects([state.originalClip]))[0] : void 0;
   restoreLocks(image, state.originalLocks);
   image.setCoords();
 }
@@ -1867,6 +2064,530 @@ function restoreLocks(obj, locks) {
   );
 }
 
+// src/shapes.ts
+function resolveShapeParams(plugin, overrides = {}) {
+  const params = {};
+  for (const def of plugin.params ?? []) {
+    const value = overrides[def.key];
+    const wanted = typeof value === "number" && Number.isFinite(value) ? value : def.default;
+    params[def.key] = clamp(wanted, def.min, def.max);
+  }
+  return params;
+}
+var ShapeManager = class {
+  constructor(canvas, layers, history, events) {
+    this.canvas = canvas;
+    this.layers = layers;
+    this.history = history;
+    this.events = events;
+    this.canvas.on("object:modified", this.onObjectModified);
+  }
+  canvas;
+  layers;
+  history;
+  events;
+  plugins = /* @__PURE__ */ new Map();
+  /**
+   * An arrow scaled 2×1 must not stretch its head: the new box is baked into
+   * the points and the scale returns to 1. Runs before the editor's own
+   * `object:modified` handler (constructed earlier), so history records the
+   * baked state.
+   */
+  onObjectModified = (event) => {
+    const target = event.target;
+    if (!target) return;
+    const layer = this.layers.findByObject(target);
+    const state = layer?.meta.shape;
+    if (!layer || !state || target !== layer.fabricObject) return;
+    const plugin = this.plugins.get(state.id);
+    if (!plugin?.bakesScale || !plugin.regenerate) return;
+    const { scaleX = 1, scaleY = 1 } = target;
+    if (Math.abs(scaleX - scaleY) < 1e-6) return;
+    target.set({
+      width: target.width * scaleX,
+      height: target.height * scaleY,
+      scaleX: 1,
+      scaleY: 1
+    });
+    plugin.regenerate(target, state.params);
+    target.setCoords();
+    target.dirty = true;
+    this.canvas.requestRenderAll();
+  };
+  dispose() {
+    this.canvas.off("object:modified", this.onObjectModified);
+  }
+  /** A restored layer names its plugin by id; only a registered one can regenerate. */
+  register(plugin) {
+    this.plugins.set(plugin.name, plugin);
+  }
+  read(layerId) {
+    return this.layers.get(layerId)?.meta.shape ?? null;
+  }
+  /**
+   * `commit: false` is a slider drag: geometry and `meta.shape` are written and
+   * `layer:modified` is emitted so the Shape panel re-reads, but nothing reaches
+   * history. The default commits one entry.
+   */
+  setParams(layerId, patch, commit = true) {
+    const layer = this.layers.get(layerId);
+    const state = layer?.meta.shape;
+    if (!layer || !state) return;
+    const plugin = this.plugins.get(state.id);
+    if (!plugin?.regenerate) return;
+    const params = resolveShapeParams(plugin, { ...state.params, ...patch });
+    plugin.regenerate(layer.fabricObject, params);
+    layer.fabricObject.setCoords();
+    layer.fabricObject.dirty = true;
+    const next = { ...state, params };
+    if (commit) this.layers.setMeta(layerId, { shape: next });
+    else layer.meta.shape = next;
+    this.canvas.requestRenderAll();
+    this.events.emit("layer:modified", { layerId });
+    if (commit) this.history.save();
+  }
+};
+
+// src/image-effects/manager.ts
+import { classRegistry, getFilterBackend } from "fabric";
+
+// src/image-effects/proxy.ts
+import { util as util4 } from "fabric";
+function sourceSize(source) {
+  const el = source;
+  return { width: el.naturalWidth || el.width, height: el.naturalHeight || el.height };
+}
+function proxyScale(width, height, maxEdge) {
+  const edge = Math.max(width, height);
+  return edge > maxEdge ? maxEdge / edge : 1;
+}
+function buildProxySource(source, maxEdge) {
+  const { width, height } = sourceSize(source);
+  const scale = proxyScale(width, height, maxEdge);
+  if (scale === 1) return null;
+  const element = util4.createCanvasElement();
+  element.width = Math.max(1, Math.round(width * scale));
+  element.height = Math.max(1, Math.round(height * scale));
+  const context = element.getContext("2d");
+  if (!context) throw new Error("2D canvas context is unavailable");
+  context.drawImage(source, 0, 0, element.width, element.height);
+  return { element, width: element.width, height: element.height };
+}
+
+// src/image-effects/manager.ts
+var stable = (value) => JSON.stringify(
+  value,
+  (_k, v) => v && typeof v === "object" && !Array.isArray(v) ? Object.fromEntries(Object.entries(v).sort()) : v
+);
+var ImageEffectsManager = class {
+  constructor(canvas, layers, history, events) {
+    this.canvas = canvas;
+    this.layers = layers;
+    this.history = history;
+    this.events = events;
+    this.events.on("layer:removed", this.onRemoved);
+  }
+  canvas;
+  layers;
+  history;
+  events;
+  proxies = /* @__PURE__ */ new Map();
+  lastSpecs = /* @__PURE__ */ new Map();
+  onRemoved = ({ layerId }) => this.drop(layerId);
+  read(layerId) {
+    const layer = this.imageLayer(layerId);
+    return layer ? normalizeImageEffects(layer.meta) : { adjust: {} };
+  }
+  /** The filter instances a state derives to, in the D5 order, with no layer involved. */
+  filtersFor(state) {
+    return imageEffectsFilterSpecs(state).map(
+      (spec) => new (classRegistry.getClass(spec.type))(spec)
+    );
+  }
+  preview(layerId, patch) {
+    this.write(layerId, patch);
+  }
+  commit(layerId, patch) {
+    if (this.write(layerId, patch)) this.history.save();
+  }
+  reset(layerId) {
+    if (this.write(layerId, { preset: void 0, adjust: {} }, true)) this.history.save();
+  }
+  /** Re-derive after a source swap or a load. */
+  refresh(layerId) {
+    const layer = this.imageLayer(layerId);
+    if (layer) this.apply(layer, this.read(layerId));
+  }
+  refreshAll() {
+    for (const id of [...this.proxies.keys()]) if (!this.layers.get(id)) this.drop(id);
+    for (const layer of this.layers.getAll()) {
+      if (layer.type !== "image") continue;
+      if ("imageAdjustments" in layer.meta) {
+        const migrated = normalizeImageEffects(layer.meta);
+        layer.meta.imageEffects = {
+          ...migrated.preset ? { preset: migrated.preset } : {},
+          adjust: migrated.adjust
+        };
+        delete layer.meta.imageAdjustments;
+      }
+      this.apply(layer, this.read(layer.id));
+    }
+  }
+  hasProxy(layerId) {
+    return this.proxies.has(layerId);
+  }
+  /** Run `fn` with every proxied image filtered at source resolution (export), then restore the proxies. */
+  withSourceResolution(fn) {
+    const swapped = [];
+    for (const id of this.proxies.keys()) {
+      const layer = this.imageLayer(id);
+      if (!layer) continue;
+      const image = layer.fabricObject;
+      image._element = image._originalElement;
+      image._filteredEl = void 0;
+      image._filterScalingX = 1;
+      image._filterScalingY = 1;
+      image.applyFilters();
+      swapped.push(layer);
+    }
+    try {
+      return fn();
+    } finally {
+      for (const layer of swapped) {
+        const image = layer.fabricObject;
+        if (image._filteredEl) image._filteredEl.width = 0;
+        image._filteredEl = void 0;
+        image._element = image._originalElement;
+        this.render(layer);
+      }
+    }
+  }
+  dispose() {
+    this.events.off("layer:removed", this.onRemoved);
+    for (const id of [...this.proxies.keys()]) this.drop(id);
+    this.lastSpecs.clear();
+  }
+  imageLayer(layerId) {
+    const layer = this.layers.get(layerId);
+    return layer && layer.type === "image" ? layer : void 0;
+  }
+  write(layerId, patch, replace = false) {
+    const layer = this.imageLayer(layerId);
+    if (!layer) return false;
+    const current = replace ? { adjust: {} } : this.read(layerId);
+    const presetChanged = "preset" in patch && stable(patch.preset) !== stable(current.preset);
+    const seed = presetChanged && patch.preset ? imageFilterPreset(patch.preset.id)?.adjust ?? {} : current.adjust;
+    const preset = "preset" in patch ? patch.preset : current.preset;
+    const alphaClip = clampAlphaClip("alphaClip" in patch ? patch.alphaClip : current.alphaClip);
+    const next = {
+      ...preset ? { preset } : {},
+      adjust: { ...seed, ...patch.adjust ?? {} },
+      ...alphaClip ? { alphaClip } : {}
+    };
+    layer.meta.imageEffects = { ...preset ? { preset } : {}, adjust: next.adjust };
+    if (alphaClip) layer.meta.imageAlphaClip = alphaClip;
+    else delete layer.meta.imageAlphaClip;
+    delete layer.meta.imageAdjustments;
+    this.apply(layer, next);
+    this.events.emit("layer:modified", { layerId });
+    return true;
+  }
+  apply(layer, state) {
+    const image = layer.fabricObject;
+    const specs = imageEffectsFilterSpecs(state);
+    const previous = this.lastSpecs.get(layer.id) ?? specs;
+    const clip = clampAlphaClip(state.alphaClip);
+    const legacyClip = clip ? stable(alphaClipMatrix(clip)) : null;
+    const foreign = image.filters.filter((f) => {
+      if (f.isNeutralState()) return false;
+      const plain = f.toObject();
+      if (legacyClip && plain.type === "ColorMatrix" && stable(plain.matrix) === legacyClip)
+        return false;
+      return !previous.some((s) => stable(s) === stable(plain));
+    });
+    const managed = specs.map((spec) => new (classRegistry.getClass(spec.type))(spec));
+    image.filters = [...managed, ...foreign];
+    this.lastSpecs.set(layer.id, specs);
+    this.render(layer);
+  }
+  render(layer) {
+    const image = layer.fabricObject;
+    const record = this.proxyFor(layer.id, image);
+    if (!record) {
+      image.applyFilters();
+    } else {
+      const active = image.filters.filter((f) => !f.isNeutralState());
+      if (active.length === 0) {
+        image._element = image._originalElement;
+        image._filterScalingX = 1;
+        image._filterScalingY = 1;
+      } else {
+        getFilterBackend().applyFilters(
+          active,
+          record.source.element,
+          record.source.width,
+          record.source.height,
+          record.target,
+          `${image.cacheKey}_proxy`
+        );
+        const { width, height } = sourceSize(image._originalElement);
+        image._element = record.target;
+        image._filterScalingX = record.source.width / width;
+        image._filterScalingY = record.source.height / height;
+      }
+      image.set("dirty", true);
+    }
+    this.canvas.requestRenderAll();
+  }
+  proxyFor(layerId, image) {
+    const existing = this.proxies.get(layerId);
+    if (existing && existing.original === image._originalElement) return existing;
+    if (existing) this.drop(layerId);
+    const source = buildProxySource(image._originalElement, IMAGE_PROXY_MAX_EDGE);
+    if (!source) return null;
+    const target = source.element.ownerDocument.createElement("canvas");
+    target.width = source.width;
+    target.height = source.height;
+    const record = { original: image._originalElement, source, target };
+    this.proxies.set(layerId, record);
+    return record;
+  }
+  drop(layerId) {
+    const record = this.proxies.get(layerId);
+    if (!record) return;
+    const layer = this.layers.get(layerId);
+    if (layer)
+      layer.fabricObject.removeTexture(
+        `${layer.fabricObject.cacheKey}_proxy`
+      );
+    record.source.element.width = 0;
+    record.target.width = 0;
+    this.proxies.delete(layerId);
+    this.lastSpecs.delete(layerId);
+  }
+};
+
+// src/layer-effects.ts
+import { ECHO_MAX_COUNT } from "@overtone-art/canvas-editor-effects";
+
+// src/shadow.ts
+import { Shadow } from "fabric";
+
+// 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/shadow.ts
+var DEFAULT_LAYER_SHADOW = {
+  enabled: false,
+  color: "#000000",
+  blur: 12,
+  offsetX: 6,
+  offsetY: 6
+};
+function readLayerShadow(object) {
+  const shadow = object.shadow;
+  if (!shadow || typeof shadow === "string") return { ...DEFAULT_LAYER_SHADOW };
+  return {
+    enabled: true,
+    color: typeof shadow.color === "string" ? shadow.color : DEFAULT_LAYER_SHADOW.color,
+    blur: shadow.blur ?? DEFAULT_LAYER_SHADOW.blur,
+    offsetX: shadow.offsetX ?? DEFAULT_LAYER_SHADOW.offsetX,
+    offsetY: shadow.offsetY ?? DEFAULT_LAYER_SHADOW.offsetY
+  };
+}
+function applyLayerShadow(object, config) {
+  const next = { ...readLayerShadow(object), ...config };
+  if (!next.enabled) {
+    object.set({ shadow: null });
+    return;
+  }
+  const color2 = isCssColor(next.color) ? next.color : DEFAULT_LAYER_SHADOW.color;
+  object.set({
+    shadow: new Shadow({
+      color: color2,
+      blur: Math.max(0, next.blur),
+      offsetX: next.offsetX,
+      offsetY: next.offsetY
+    })
+  });
+}
+
+// src/layer-effects.ts
+var LAYER_EFFECT_DEFAULTS = {
+  outline: { color: "#000000", width: 4 },
+  hollow: { color: "#000000", width: 4 },
+  drop: { color: "#000000", blur: 0, offsetX: 6, offsetY: 6 },
+  splice: { color: "#ff4d6d", offsetX: 8, offsetY: 8 },
+  echo: { color: "#000000", count: 3, stepX: 6, stepY: 6, fade: 0.5 },
+  background: { color: "#ffe600", padding: 12, radius: 8 }
+};
+var num = (p, key, fallback) => {
+  const value = p[key];
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+};
+var color = (p, key, fallback) => {
+  const value = p[key];
+  return typeof value === "string" && isCssColor(value) ? value : fallback;
+};
+var outlineProps = (p) => ({
+  stroke: color(p, "color", "#000000"),
+  strokeWidth: clamp(num(p, "width", 4), 0, 200),
+  paintFirst: "stroke",
+  strokeUniform: true
+});
+var LayerEffectsManager = class {
+  constructor(canvas, layers, history, events) {
+    this.canvas = canvas;
+    this.layers = layers;
+    this.history = history;
+    this.events = events;
+  }
+  canvas;
+  layers;
+  history;
+  events;
+  read(layerId) {
+    return this.layers.get(layerId)?.meta.effect ?? null;
+  }
+  /**
+   * `commit: false` is a slider drag: props are written and `layer:modified`
+   * is emitted so the panels re-read, but nothing reaches history. The default
+   * commits ONE entry, setMeta's own save folded into the same transaction.
+   */
+  apply(layerId, kind, params = {}, commit = true) {
+    const layer = this.layers.get(layerId);
+    if (!layer || layer.type === "group") return;
+    const object = layer.fabricObject;
+    const write = () => {
+      this.clear(object, layer.meta.effect);
+      const next = kind === "none" ? void 0 : {
+        kind,
+        params: this.install(object, kind, { ...LAYER_EFFECT_DEFAULTS[kind], ...params }),
+        version: 1
+      };
+      if (commit) this.layers.setMeta(layerId, { effect: next });
+      else if (next) layer.meta.effect = next;
+      else delete layer.meta.effect;
+      object.dirty = true;
+      object.setCoords();
+      this.canvas.requestRenderAll();
+      this.events.emit("layer:modified", { layerId });
+    };
+    if (!commit) {
+      write();
+      return;
+    }
+    this.history.beginTransaction();
+    try {
+      write();
+      this.history.save();
+    } finally {
+      this.history.endTransaction();
+    }
+  }
+  /** Undo what the previous kind wrote, so kinds never stack. */
+  clear(object, previous) {
+    if (!previous) return;
+    switch (previous.kind) {
+      case "outline":
+        object.set({ strokeWidth: 0, paintFirst: "fill", strokeUniform: false });
+        return;
+      case "hollow": {
+        const fill = previous.params.previousFill;
+        object.set({
+          strokeWidth: 0,
+          paintFirst: "fill",
+          strokeUniform: false,
+          fill: typeof fill === "string" ? fill : "#000000"
+        });
+        return;
+      }
+      case "drop":
+        applyLayerShadow(object, { enabled: false });
+        return;
+      case "splice":
+      case "echo":
+      case "background":
+        object.set({ effect: void 0 });
+        return;
+      case "none":
+        return;
+    }
+  }
+  install(object, kind, p) {
+    switch (kind) {
+      case "outline": {
+        const props = outlineProps(p);
+        object.set(props);
+        return { color: props.stroke, width: props.strokeWidth };
+      }
+      case "hollow": {
+        const previousFill = typeof object.fill === "string" ? object.fill : "#000000";
+        const props = outlineProps(p);
+        object.set({ ...props, fill: "transparent" });
+        return { color: props.stroke, width: props.strokeWidth, previousFill };
+      }
+      case "drop": {
+        const shadow = {
+          color: color(p, "color", "#000000"),
+          blur: clamp(num(p, "blur", 0), 0, 200),
+          offsetX: num(p, "offsetX", 6),
+          offsetY: num(p, "offsetY", 6)
+        };
+        applyLayerShadow(object, { enabled: true, ...shadow });
+        return shadow;
+      }
+      case "splice": {
+        const effect = {
+          kind: "splice",
+          offsetX: num(p, "offsetX", 8),
+          offsetY: num(p, "offsetY", 8),
+          color: color(p, "color", "#ff4d6d"),
+          version: 1
+        };
+        object.set({ effect });
+        return { offsetX: effect.offsetX, offsetY: effect.offsetY, color: effect.color };
+      }
+      case "echo": {
+        const effect = {
+          kind: "echo",
+          count: clamp(Math.round(num(p, "count", 3)), 1, ECHO_MAX_COUNT),
+          stepX: num(p, "stepX", 6),
+          stepY: num(p, "stepY", 6),
+          color: color(p, "color", "#000000"),
+          fade: clamp(num(p, "fade", 0.5), 0, 1),
+          version: 1
+        };
+        object.set({ effect });
+        return {
+          count: effect.count,
+          stepX: effect.stepX,
+          stepY: effect.stepY,
+          color: effect.color,
+          fade: effect.fade
+        };
+      }
+      case "background": {
+        const effect = {
+          kind: "background",
+          padding: clamp(num(p, "padding", 12), 0, 400),
+          radius: clamp(num(p, "radius", 8), 0, 400),
+          color: color(p, "color", "#ffe600"),
+          version: 1
+        };
+        object.set({ effect });
+        return { padding: effect.padding, radius: effect.radius, color: effect.color };
+      }
+    }
+  }
+};
+
 // src/text-curve.ts
 import { Path } from "fabric";
 
@@ -1877,9 +2598,12 @@ var DEFAULT_TEXT_CURVE = {
   wave: 0,
   waveLength: 4.1,
   offset: 0,
-  centerOffset: 0
+  centerOffset: 0,
+  angle: 0
 };
 var MIN_ARC = 0.5;
+var MIN_ANGLE = 0.5;
+var MAX_ANGLE = 80;
 var FULL_CIRCLE_ARC = 99.5;
 var MIN_SWEEP = 0.12;
 var WAVE_AMPLITUDE_EM = 0.9;
@@ -1904,10 +2628,12 @@ function normalizeTextCurve(config) {
       MAX_WAVE_LENGTH
     ),
     offset: clamp(config.offset ?? 0, -100, 100),
-    centerOffset: clamp(config.centerOffset ?? 0, -100, 100)
+    centerOffset: clamp(config.centerOffset ?? 0, -100, 100),
+    angle: clamp(config.angle ?? 0, -MAX_ANGLE, MAX_ANGLE)
   };
 }
 function bendsBaseline(config) {
+  if (config.shape === "angle") return Math.abs(config.angle) >= MIN_ANGLE;
   return config.shape === "arc" ? Math.abs(config.arc) >= MIN_ARC : config.wave > 0;
 }
 function arcGeometry(width, config) {
@@ -1968,6 +2694,17 @@ function waveLinePath(width, fontSize, config, dy) {
   }
   return { data: commands.join(" "), length };
 }
+function angleLinePath(width, config, dy) {
+  const radians = config.angle * Math.PI / 180;
+  const half = width / 2;
+  const dx = half * Math.cos(radians);
+  const rise = half * Math.sin(radians);
+  const format = ([x, y]) => `${round(x)} ${round(y)}`;
+  return {
+    data: `M ${format([half - dx, dy + rise])} L ${format([half + dx, dy - rise])}`,
+    length: width
+  };
+}
 function buildCurveLinePaths(config, width, fontSize, lineCount = 1, lineHeight = 0) {
   const curve = normalizeTextCurve(config);
   if (!bendsBaseline(curve)) return null;
@@ -1979,6 +2716,12 @@ function buildCurveLinePaths(config, width, fontSize, lineCount = 1, lineHeight
     }
     return paths;
   }
+  if (curve.shape === "angle") {
+    for (let index = 0; index < lines; index++) {
+      paths.push(angleLinePath(width, curve, (index - (lines - 1) / 2) * lineHeight));
+    }
+    return paths;
+  }
   const geometry = arcGeometry(width, curve);
   const rotation = curve.offset / 100 * geometry.sweep;
   for (let index = 0; index < lines; index++) {
@@ -2559,54 +3302,6 @@ var MaskPresetManager = class {
   }
 };
 
-// src/shadow.ts
-import { Shadow } from "fabric";
-
-// 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/shadow.ts
-var DEFAULT_LAYER_SHADOW = {
-  enabled: false,
-  color: "#000000",
-  blur: 12,
-  offsetX: 6,
-  offsetY: 6
-};
-function readLayerShadow(object) {
-  const shadow = object.shadow;
-  if (!shadow || typeof shadow === "string") return { ...DEFAULT_LAYER_SHADOW };
-  return {
-    enabled: true,
-    color: typeof shadow.color === "string" ? shadow.color : DEFAULT_LAYER_SHADOW.color,
-    blur: shadow.blur ?? DEFAULT_LAYER_SHADOW.blur,
-    offsetX: shadow.offsetX ?? DEFAULT_LAYER_SHADOW.offsetX,
-    offsetY: shadow.offsetY ?? DEFAULT_LAYER_SHADOW.offsetY
-  };
-}
-function applyLayerShadow(object, config) {
-  const next = { ...readLayerShadow(object), ...config };
-  if (!next.enabled) {
-    object.set({ shadow: null });
-    return;
-  }
-  const color = isCssColor(next.color) ? next.color : DEFAULT_LAYER_SHADOW.color;
-  object.set({
-    shadow: new Shadow({
-      color,
-      blur: Math.max(0, next.blur),
-      offsetX: next.offsetX,
-      offsetY: next.offsetY
-    })
-  });
-}
-
 // src/selection-style.ts
 var DEFAULT_SELECTION_STYLE = {
   borderColor: "#c9a96e",
@@ -2712,7 +3407,7 @@ var UnitConverter = class {
 };
 
 // src/serialization.ts
-import { util as util2 } from "fabric";
+import { util as util5 } from "fabric";
 var VERSION = "2.0.0";
 function serializeEditor(editor) {
   return {
@@ -2748,7 +3443,7 @@ async function deserializeEditor(editor, state) {
   }
   const staged = await Promise.all(
     state.layers.map(async (serialized) => {
-      const fabricObject = (await util2.enlivenObjects([serialized.fabricObject]))[0];
+      const fabricObject = (await util5.enlivenObjects([serialized.fabricObject]))[0];
       if (!fabricObject) {
         const source = serialized.fabricObject.src;
         if (typeof source === "string" && source.startsWith("blob:")) {
@@ -2759,7 +3454,7 @@ async function deserializeEditor(editor, state) {
       return { serialized, fabricObject };
     })
   );
-  const stagedBackground = state.backgroundImage ? (await util2.enlivenObjects([state.backgroundImage]))[0] : null;
+  const stagedBackground = state.backgroundImage ? (await util5.enlivenObjects([state.backgroundImage]))[0] : null;
   if (state.backgroundImage && !stagedBackground) {
     const source = state.backgroundImage.src;
     if (typeof source === "string" && source.startsWith("blob:")) {
@@ -3350,8 +4045,8 @@ var MaskController = class {
       point.y,
       radius
     );
-    const color = brush.mode === "subtract" ? "rgba(0,0,0,1)" : "rgba(255,255,255,1)";
-    gradient.addColorStop(0, color);
+    const color2 = brush.mode === "subtract" ? "rgba(0,0,0,1)" : "rgba(255,255,255,1)";
+    gradient.addColorStop(0, color2);
     gradient.addColorStop(1, "rgba(255,255,255,0)");
     context.fillStyle = gradient;
     context.beginPath();
@@ -3426,10 +4121,10 @@ function angleFromCoords(coords, box) {
 }
 function stopColor(stop) {
   const source = isCssColor(stop.color) ? stop.color : FALLBACK_STOP_COLOR;
-  const color = new Color(source);
+  const color2 = new Color(source);
   const opacity = Number.isFinite(stop.opacity) ? stop.opacity : 1;
-  color.setAlpha(clamp(opacity, 0, 1));
-  return color.toRgba();
+  color2.setAlpha(clamp(opacity, 0, 1));
+  return color2.toRgba();
 }
 function toFabricGradient(config, box) {
   const colorStops = [...config.stops].sort((a, b) => a.position - b.position).slice(0, MAX_GRADIENT_STOPS).map((stop) => {
@@ -3462,11 +4157,11 @@ function toFabricGradient(config, box) {
 function toFabricMaskGradient(config, box) {
   const gradient = toFabricGradient(config, box);
   gradient.colorStops = gradient.colorStops.map((stop) => {
-    const color = new Color(stop.color);
-    const [red, green, blue] = color.getSource();
+    const color2 = new Color(stop.color);
+    const [red, green, blue] = color2.getSource();
     const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
-    color.setSource([255, 255, 255, clamp(luminance * color.getAlpha(), 0, 1)]);
-    return { offset: stop.offset, color: color.toRgba() };
+    color2.setSource([255, 255, 255, clamp(luminance * color2.getAlpha(), 0, 1)]);
+    return { offset: stop.offset, color: color2.toRgba() };
   });
   return gradient;
 }
@@ -3475,11 +4170,11 @@ function readGradientConfig(object) {
   if (!fill || typeof fill === "string" || !(fill instanceof Gradient)) return null;
   const stops = fill.colorStops.map((stop) => {
     const source = isCssColor(stop.color) ? stop.color : FALLBACK_STOP_COLOR;
-    const color = new Color(source);
+    const color2 = new Color(source);
     const offset = Number.isFinite(stop.offset) ? stop.offset : 0;
     return {
-      color: `#${color.toHex().toLowerCase()}`,
-      opacity: color.getAlpha(),
+      color: `#${color2.toHex().toLowerCase()}`,
+      opacity: color2.getAlpha(),
       position: clamp(offset, 0, 1)
     };
   });
@@ -3562,7 +4257,7 @@ function needsAbsoluteSpace(entries) {
 }
 
 // src/masks/edit.ts
-import { util as util3 } from "fabric";
+import { util as util6 } from "fabric";
 
 // src/masks/edit-viewport.ts
 var MIN_PADDING = 48;
@@ -3740,8 +4435,8 @@ var MaskEditController = class {
     if (!this.handle || !this.child || !this.group) return;
     applyMatrix(
       this.child,
-      util3.multiplyTransformMatrices(
-        util3.invertTransform(matrixOf(this.group)),
+      util6.multiplyTransformMatrices(
+        util6.invertTransform(matrixOf(this.group)),
         matrixOf(this.handle)
       )
     );
@@ -4438,11 +5133,17 @@ var CanvasEditor = class {
   snapping;
   crop;
   patterns;
+  /** Parametric shape layers: `meta.shape` and in-place regeneration. */
+  shapes;
   curves;
   wrap;
   maskPresets;
+  /** Owner of every image layer's filter array (D5). */
+  imageEffects;
   /** Stacked boolean masks, per layer and for the design as a whole. */
   layerMasks;
+  /** One effect per text or shape layer (D6). */
+  effects;
   fonts;
   licensing;
   pages;
@@ -4452,6 +5153,8 @@ var CanvasEditor = class {
   zoomLevel = 1;
   selectionStyle = { ...DEFAULT_SELECTION_STYLE };
   mockup = null;
+  /** Alt was held when a drag began on this layer; the drop leaves a copy behind. */
+  altDrag = 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.
@@ -4459,6 +5162,7 @@ var CanvasEditor = class {
   designBackgroundImage = null;
   backgroundImageOptions = null;
   constructor(canvasElement, config) {
+    registerEffects(fabricModule);
     this.events = new EventEmitter();
     this.fonts = new FontRegistry();
     config.fonts?.forEach((font) => this.fonts.register(font));
@@ -4493,6 +5197,15 @@ var CanvasEditor = class {
     this.wrap = new TextWrapManager(this.canvas, this.layers, this.history, this.events);
     this.maskPresets = new MaskPresetManager(this.canvas, this.layers, this.history, this.events);
     this.layerMasks = new LayerMaskManager(this.canvas, this.layers, this.history, this.events);
+    this.effects = new LayerEffectsManager(this.canvas, this.layers, this.history, this.events);
+    this.imageEffects = new ImageEffectsManager(
+      this.canvas,
+      this.layers,
+      this.history,
+      this.events
+    );
+    this.shapes = new ShapeManager(this.canvas, this.layers, this.history, this.events);
+    config.shapes?.forEach((plugin) => this.shapes.register(plugin));
     this.setupCanvasEvents();
     this.refreshSelectionStyle();
     this.history.saveImmediate();
@@ -4517,7 +5230,7 @@ var CanvasEditor = class {
     }
   }
   /** Replace an image source without changing its layer identity or visual transform. */
-  async replaceImageSource(layerId, url) {
+  async replaceImageSource(layerId, url, options = {}) {
     const layer = this.layers.get(layerId);
     if (!layer || layer.type !== "image" && layer.type !== "mask") {
       throw new Error(`Image or mask layer not found: ${layerId}`);
@@ -4528,7 +5241,11 @@ var CanvasEditor = class {
     if (this.crop.activeLayerId() === layerId) this.crop.cancel();
     const previous = layer.fabricObject;
     try {
-      const replacement = await FabricImage3.fromURL(url, {}, { originX: "left", originY: "top" });
+      const replacement = await FabricImage3.fromURL(
+        url,
+        { crossOrigin: options.crossOrigin },
+        { originX: "left", originY: "top" }
+      );
       replacement.set({
         left: previous.left,
         top: previous.top,
@@ -4550,14 +5267,28 @@ var CanvasEditor = class {
       replacement.applyFilters();
       replacement.setCoords();
       this.layers.replaceObject(layerId, replacement);
+      this.imageEffects.refresh(layerId);
       return layer;
     } catch (error) {
       this.events.emit("error", { message: "Failed to replace image source", error });
       throw error;
     }
   }
+  /**
+   * The class the registry holds for a stock name.
+   *
+   * `registerEffects` (run in the constructor) overrides the stock names, but
+   * registration only decides what an ENLIVEN produces — a `new Textbox(...)`
+   * here would still be the stock class, which carries no `effect` in its
+   * `customProperties` and so could never serialize one. Authoring and
+   * restoring have to yield the same class.
+   */
+  registered(name, fallback) {
+    return classRegistry2.getClass(name) ?? fallback;
+  }
   addText(text, options) {
-    const textbox = new Textbox2(text, {
+    const TextboxClass = this.registered("Textbox", Textbox2);
+    const textbox = new TextboxClass(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
@@ -4575,6 +5306,15 @@ var CanvasEditor = class {
   addShape(plugin, options) {
     const obj = plugin.create(options);
     const layer = this.layers.add("shape", obj, plugin.name);
+    if (plugin.params) {
+      this.shapes.register(plugin);
+      const overrides = options?.params ?? {};
+      layer.meta.shape = {
+        id: plugin.name,
+        params: resolveShapeParams(plugin, overrides),
+        version: 1
+      };
+    }
     this.layers.select(layer.id);
     this.history.save();
     return layer;
@@ -4586,7 +5326,8 @@ var CanvasEditor = class {
   addGradient(config = DEFAULT_GRADIENT_CONFIG, box) {
     const width = box?.width ?? this.canvas.getWidth();
     const height = box?.height ?? this.canvas.getHeight();
-    const object = new Rect4({
+    const RectClass = this.registered("Rect", Rect4);
+    const object = new RectClass({
       left: box?.left ?? 0,
       top: box?.top ?? 0,
       originX: "left",
@@ -4715,6 +5456,49 @@ var CanvasEditor = class {
     this.canvas.requestRenderAll();
     this.history.save();
   }
+  // ─── Align ──────────────────────────────────────────
+  /** What the user is acting on: the proxy where a layer has one. */
+  selectedTargets() {
+    return this.canvas.getActiveObjects().filter((object) => this.layers.findByObject(object) !== void 0);
+  }
+  afterMove(objects) {
+    relayoutSelection(this.canvas.getActiveObject());
+    for (const object of objects) {
+      const layer = this.layers.findByObject(object);
+      if (!layer) continue;
+      if (layer.renderProxy === object) this.patterns.commitProxy(layer.id);
+      this.events.emit("layer:modified", { layerId: layer.id });
+    }
+    this.canvas.requestRenderAll();
+    this.history.save();
+  }
+  /** One layer aligns to the canvas; several align to their common box. One history entry. */
+  alignLayers(target) {
+    const objects = this.selectedTargets();
+    if (objects.length === 0) return false;
+    const frame = objects.length === 1 ? canvasBox(this.canvas.getWidth(), this.canvas.getHeight()) : unionBox(objects.map((o) => (o.setCoords(), o.getBoundingRect())));
+    this.history.beginTransaction();
+    try {
+      alignObjects(objects, target, frame);
+      this.afterMove(objects);
+    } finally {
+      this.history.endTransaction();
+    }
+    return true;
+  }
+  /** Equal gaps along an axis. Needs three selected; returns false otherwise. */
+  distributeLayers(axis) {
+    const objects = this.selectedTargets();
+    if (objects.length < 3) return false;
+    this.history.beginTransaction();
+    try {
+      distributeObjects(objects, axis);
+      this.afterMove(objects);
+    } finally {
+      this.history.endTransaction();
+    }
+    return true;
+  }
   /** Clone a layer (offset slightly) and select the copy. */
   async duplicateLayer(id) {
     const layer = this.layers.get(id);
@@ -4739,24 +5523,19 @@ var CanvasEditor = class {
     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 filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
-      new filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
-      new filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
-      new filters.Blur({ blur: clampAdjustment(next.blur, 0) })
-    ];
-    layer.meta.imageAdjustments = next;
-    image.applyFilters();
-    this.canvas.requestRenderAll();
-    this.history.save();
-    return true;
+  /** The drag moved the original; a copy takes the start position, just beneath it. */
+  async leaveCopyBehind(layer, transform) {
+    const now = util7.saveObjectTransform(layer.fabricObject);
+    if (now.left === transform.left && now.top === transform.top) return;
+    await this.history.transaction(async () => {
+      const copy = await this.duplicateLayer(layer.id);
+      if (!copy) return;
+      copy.fabricObject.set(transform);
+      copy.fabricObject.setCoords();
+      this.layers.reorder(copy.id, this.layers.getAll().indexOf(layer));
+      this.layers.select(layer.id);
+      this.canvas.requestRenderAll();
+    });
   }
   /**
    * Combine two or more layers into one group layer. Picking a group among them
@@ -4825,6 +5604,7 @@ var CanvasEditor = class {
       await deserializeEditor(this, state);
       await this.patterns.rehydrateAll();
       this.layerMasks.refreshAll();
+      this.imageEffects.refreshAll();
     } catch (error) {
       if (!managedByHistory) {
         this.events.emit("error", { message: "Failed to load editor state", error });
@@ -4901,7 +5681,9 @@ var CanvasEditor = class {
     try {
       await this.fonts.ready();
       const blob = await this.withDesignBackground(
-        () => exportPNG(this.canvas, { ...options, format })
+        () => this.imageEffects.withSourceResolution(
+          () => exportPNG(this.canvas, { ...options, format })
+        )
       );
       this.events.emit("export:complete", { format });
       this.licensing.track(`export:${format}`);
@@ -4939,7 +5721,9 @@ var CanvasEditor = class {
     }
   }
   toDataURL(format = "png", multiplier = 1) {
-    return this.withDesignBackground(() => exportDataURL(this.canvas, format, multiplier));
+    return this.withDesignBackground(
+      () => this.imageEffects.withSourceResolution(() => exportDataURL(this.canvas, format, multiplier))
+    );
   }
   /**
    * Export the print file: the design cropped to the mockup's print area, on
@@ -4963,7 +5747,9 @@ var CanvasEditor = class {
     if (!this.mockup) throw new Error("No mockup is configured");
     await this.fonts.ready();
     try {
-      const blob = await exportMockup(this.canvas, this.mockup, options);
+      const blob = await this.imageEffects.withSourceResolution(
+        () => exportMockup(this.canvas, this.mockup, options)
+      );
       this.licensing.track(`export:mockup:${options.format ?? "png"}`);
       return blob;
     } catch (error) {
@@ -5105,10 +5891,10 @@ var CanvasEditor = class {
     this.imageProvider = provider;
   }
   // ─── Canvas Operations ──────────────────────────────
-  setBackground(color) {
-    this.designBackground = color;
+  setBackground(color2) {
+    this.designBackground = color2;
     if (!this.mockup) {
-      this.canvas.backgroundColor = color;
+      this.canvas.backgroundColor = color2;
       this.canvas.requestRenderAll();
     }
     this.history.save();
@@ -5415,9 +6201,11 @@ var CanvasEditor = class {
   }
   // ─── Cleanup ────────────────────────────────────────
   dispose() {
+    this.imageEffects.dispose();
     this.masks.dispose();
     this.layerMasks.dispose();
     this.snapping.dispose();
+    this.shapes.dispose();
     this.crop.dispose();
     this.history.dispose();
     this.patterns.dispose();
@@ -5451,12 +6239,26 @@ var CanvasEditor = class {
       const active = this.canvas.getActiveObject();
       if (active) applyObjectSelectionStyle(active, this.selectionStyle, this.zoomLevel);
     };
+    this.canvas.on("mouse:down", (e) => {
+      this.altDrag = null;
+      const target = e.target;
+      const pointer = e.e;
+      if (!target || !pointer?.altKey || target instanceof ActiveSelection3) return;
+      const layer = this.layers.findByObject(target);
+      if (!layer || layer.locked || layer.renderProxy) return;
+      this.altDrag = { layerId: layer.id, transform: util7.saveObjectTransform(target) };
+    });
     this.canvas.on("object:modified", (e) => {
       if (!e.target) return;
       const layer = this.layers.findByObject(e.target);
       if (layer) {
         this.events.emit("layer:modified", { layerId: layer.id });
         this.history.save();
+        const pending = this.altDrag;
+        this.altDrag = null;
+        if (pending && pending.layerId === layer.id) {
+          void this.leaveCopyBehind(layer, pending.transform);
+        }
       }
     });
     this.canvas.on("selection:created", (e) => {
@@ -5544,6 +6346,8 @@ var AnnotationOverlay = class {
   }
 };
 export {
+  ADJUST_KEYS,
+  ADJUST_RANGES,
   AnnotationOverlay,
   BLEND_GROUPS,
   BLEND_MODES,
@@ -5559,7 +6363,12 @@ export {
   EventEmitter,
   FontRegistry,
   HistoryManager,
+  IMAGE_FILTER_PRESETS,
+  IMAGE_PROXY_MAX_EDGE,
+  ImageEffectsManager,
+  LAYER_EFFECT_DEFAULTS,
   Layer,
+  LayerEffectsManager,
   LayerManager,
   LayerMaskManager,
   LicenseManager,
@@ -5567,10 +6376,12 @@ export {
   MaskController,
   MaskPresetManager,
   MaskRefinementError,
+  NEUTRAL_ADJUST,
   PatternManager,
   ProjectManager,
   SHAPE_MASK_BOX,
   SHAPE_MASK_IDS,
+  ShapeManager,
   SnapManager,
   TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE,
@@ -5578,6 +6389,8 @@ export {
   TextWrapManager,
   TiledPatternObject,
   UnitConverter,
+  alignObjects,
+  alphaClipMatrix,
   angleFromCoords,
   applyAspectLock,
   applyLayerShadow,
@@ -5590,6 +6403,8 @@ export {
   buildCurveLinePaths,
   buildCurvePathData,
   clamp,
+  clampAdjust,
+  clampAlphaClip,
   clearTextureMaskCache,
   composeMaskGroup,
   computeCoverPlacement,
@@ -5597,6 +6412,7 @@ export {
   computeTilePositions,
   deserializeEditor,
   displaceRgba,
+  distributeObjects,
   drawTiles,
   escapeXml,
   explodeTemplateSvg,
@@ -5608,12 +6424,15 @@ export {
   fitTextWidth,
   fitToBox,
   generateId,
+  imageEffectsFilterSpecs,
+  imageFilterPreset,
   isCssColor,
   isMaskPresetId,
   isShapeMaskId,
   isTextureMaskId,
   linearCoords,
   needsAbsoluteSpace,
+  normalizeImageEffects,
   normalizeTextCurve,
   preWrapWordSplit,
   readGradientConfig,
@@ -5621,6 +6440,7 @@ export {
   readTextWrap,
   renderTextureMask,
   resetTransform,
+  resolveShapeParams,
   restoreLocks,
   round2,
   sanitizeSvg,
@@ -5631,6 +6451,7 @@ export {
   toCanvasSpace,
   toFabricGradient,
   toHostSpace,
+  unionBox,
   unwrapGroup
 };
 //# sourceMappingURL=index.mjs.map