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

package/dist/index.js

@@ -1,7 +1,9 @@
 "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)
@@ -15,11 +17,21 @@ 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, {
+  ADJUST_KEYS: () => ADJUST_KEYS,
+  ADJUST_RANGES: () => ADJUST_RANGES,
   AnnotationOverlay: () => AnnotationOverlay,
   BLEND_GROUPS: () => BLEND_GROUPS,
   BLEND_MODES: () => BLEND_MODES,
@@ -35,7 +47,12 @@ __export(index_exports, {
   EventEmitter: () => EventEmitter,
   FontRegistry: () => FontRegistry,
   HistoryManager: () => HistoryManager,
+  IMAGE_FILTER_PRESETS: () => IMAGE_FILTER_PRESETS,
+  IMAGE_PROXY_MAX_EDGE: () => IMAGE_PROXY_MAX_EDGE,
+  ImageEffectsManager: () => ImageEffectsManager,
+  LAYER_EFFECT_DEFAULTS: () => LAYER_EFFECT_DEFAULTS,
   Layer: () => Layer,
+  LayerEffectsManager: () => LayerEffectsManager,
   LayerManager: () => LayerManager,
   LayerMaskManager: () => LayerMaskManager,
   LicenseManager: () => LicenseManager,
@@ -43,10 +60,12 @@ __export(index_exports, {
   MaskController: () => MaskController,
   MaskPresetManager: () => MaskPresetManager,
   MaskRefinementError: () => MaskRefinementError,
+  NEUTRAL_ADJUST: () => NEUTRAL_ADJUST,
   PatternManager: () => PatternManager,
   ProjectManager: () => ProjectManager,
   SHAPE_MASK_BOX: () => SHAPE_MASK_BOX,
   SHAPE_MASK_IDS: () => SHAPE_MASK_IDS,
+  ShapeManager: () => ShapeManager,
   SnapManager: () => SnapManager,
   TEXTURE_MASK_IDS: () => TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE: () => TEXTURE_MASK_SIZE,
@@ -54,6 +73,8 @@ __export(index_exports, {
   TextWrapManager: () => TextWrapManager,
   TiledPatternObject: () => TiledPatternObject,
   UnitConverter: () => UnitConverter,
+  alignObjects: () => alignObjects,
+  alphaClipMatrix: () => alphaClipMatrix,
   angleFromCoords: () => angleFromCoords,
   applyAspectLock: () => applyAspectLock,
   applyLayerShadow: () => applyLayerShadow,
@@ -66,6 +87,8 @@ __export(index_exports, {
   buildCurveLinePaths: () => buildCurveLinePaths,
   buildCurvePathData: () => buildCurvePathData,
   clamp: () => clamp,
+  clampAdjust: () => clampAdjust,
+  clampAlphaClip: () => clampAlphaClip,
   clearTextureMaskCache: () => clearTextureMaskCache,
   composeMaskGroup: () => composeMaskGroup,
   computeCoverPlacement: () => computeCoverPlacement,
@@ -73,6 +96,7 @@ __export(index_exports, {
   computeTilePositions: () => computeTilePositions,
   deserializeEditor: () => deserializeEditor,
   displaceRgba: () => displaceRgba,
+  distributeObjects: () => distributeObjects,
   drawTiles: () => drawTiles,
   escapeXml: () => escapeXml,
   explodeTemplateSvg: () => explodeTemplateSvg,
@@ -84,12 +108,15 @@ __export(index_exports, {
   fitTextWidth: () => fitTextWidth,
   fitToBox: () => fitToBox,
   generateId: () => generateId,
+  imageEffectsFilterSpecs: () => imageEffectsFilterSpecs,
+  imageFilterPreset: () => imageFilterPreset,
   isCssColor: () => isCssColor,
   isMaskPresetId: () => isMaskPresetId,
   isShapeMaskId: () => isShapeMaskId,
   isTextureMaskId: () => isTextureMaskId,
   linearCoords: () => linearCoords,
   needsAbsoluteSpace: () => needsAbsoluteSpace,
+  normalizeImageEffects: () => normalizeImageEffects,
   normalizeTextCurve: () => normalizeTextCurve,
   preWrapWordSplit: () => preWrapWordSplit,
   readGradientConfig: () => readGradientConfig,
@@ -97,6 +124,7 @@ __export(index_exports, {
   readTextWrap: () => readTextWrap,
   renderTextureMask: () => renderTextureMask,
   resetTransform: () => resetTransform,
+  resolveShapeParams: () => resolveShapeParams,
   restoreLocks: () => restoreLocks,
   round2: () => round2,
   sanitizeSvg: () => sanitizeSvg,
@@ -107,12 +135,15 @@ __export(index_exports, {
   toCanvasSpace: () => toCanvasSpace,
   toFabricGradient: () => toFabricGradient,
   toHostSpace: () => toHostSpace,
+  unionBox: () => unionBox,
   unwrapGroup: () => unwrapGroup
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/editor.ts
-var import_fabric22 = require("fabric");
+var import_fabric25 = require("fabric");
+var fabricModule = __toESM(require("fabric"));
+var import_canvas_editor_effects2 = require("@overtone-art/canvas-editor-effects");
 
 // src/events.ts
 var EventEmitter = class {
@@ -264,9 +295,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 import_fabric.ActiveSelection)) {
+      return object.toObject();
+    }
+    const saved = import_fabric.util.saveObjectTransform(object);
+    import_fabric.util.addTransformToObject(object, selection.calcOwnMatrix());
+    try {
+      return object.toObject();
+    } finally {
+      object.set(saved);
+      object.setCoords();
+    }
+  }
 };
 var LayerManager = class {
   constructor(canvas, events) {
@@ -1198,7 +1251,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;
@@ -1206,6 +1259,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 import_fabric3.Rect({
       left: b.left,
       top: b.top,
@@ -1230,8 +1289,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;
@@ -1246,10 +1392,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);
@@ -1274,6 +1421,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();
@@ -1298,14 +1447,70 @@ var CropController = class {
 };
 var STROKE2 = "#22c55e";
 
+// src/align.ts
+var import_fabric4 = require("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 ? import_fabric4.util.sendVectorToPlane(new import_fabric4.Point(dx, dy), void 0, parent.calcTransformMatrix()) : new import_fabric4.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 import_fabric4.ActiveSelection)) return;
+  active.triggerLayout();
+  active.setCoords();
+}
+function canvasBox(width, height) {
+  return { left: 0, top: 0, width, height };
+}
+
 // src/pattern/pattern-manager.ts
-var import_fabric6 = require("fabric");
+var import_fabric7 = require("fabric");
 
 // src/pattern/tiled-pattern-object.ts
-var import_fabric5 = require("fabric");
+var import_fabric6 = require("fabric");
 
 // src/text-fit.ts
-var import_fabric4 = require("fabric");
+var import_fabric5 = require("fabric");
 var TEXT_FIT_SLACK = 0.5;
 var MEASURE_WIDTH = 1e5;
 var GROWTH_FACTOR = 1.1;
@@ -1394,7 +1599,7 @@ function fitTextWidth(object) {
     const after = textInk(text);
     const shift = (before.dx - after.dx) * (text.scaleX ?? 1);
     const radians = (text.angle ?? 0) * Math.PI / 180;
-    const moved = new import_fabric4.Point(
+    const moved = new import_fabric5.Point(
       centre.x + shift * Math.cos(radians),
       centre.y + shift * Math.sin(radians)
     );
@@ -1418,9 +1623,9 @@ function computeTilePositions(config, targetW, targetH, baseW, baseH, origin) {
   const tileW = Math.max(minTile, baseW * (1 + config.horizontalSpacing / 100));
   const tileH = Math.max(minTile, baseH * (1 + config.verticalSpacing / 100));
   const cols = Math.ceil(span / tileW) + 2;
-  const rows = Math.ceil(span / tileH) + 2;
+  const rows2 = Math.ceil(span / tileH) + 2;
   const [colFrom, colTo] = axisRange(config.horizontalLimit, Math.ceil(cols / 2));
-  const [rowFrom, rowTo] = axisRange(config.verticalLimit, Math.ceil(rows / 2));
+  const [rowFrom, rowTo] = axisRange(config.verticalLimit, Math.ceil(rows2 / 2));
   const shiftX = tileW * (clampOffset(config.offsetX) / 100);
   const shiftY = tileH * (clampOffset(config.offsetY) / 100);
   const placements = [];
@@ -1479,7 +1684,7 @@ var MAX_SNAPSHOT_PIXELS = 16e6;
 var MAX_SNAPSHOT_SCALE = 8;
 var SNAPSHOT_SHRINK_FACTOR = 2;
 var TILE_BLEED_DEVICE_PX = 2;
-var TiledPatternObject = class _TiledPatternObject extends import_fabric5.FabricObject {
+var TiledPatternObject = class _TiledPatternObject extends import_fabric6.FabricObject {
   static type = "TiledPattern";
   /** The layer's real object. Never rendered directly (it is kept at opacity 0). */
   source;
@@ -1563,7 +1768,7 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric5.Fabric
     const centre = this.getCenterPoint();
     const shift = this.shiftVector(tileW, tileH, this.liveAngle());
     const ink = this.inkOffset();
-    return new import_fabric5.Point(centre.x - shift.x - ink.x, centre.y - shift.y - ink.y);
+    return new import_fabric6.Point(centre.x - shift.x - ink.x, centre.y - shift.y - ink.y);
   }
   _render(ctx) {
     const { width, height } = this.area;
@@ -1650,6 +1855,10 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric5.Fabric
       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,
@@ -1695,12 +1904,12 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric5.Fabric
    */
   inkOffset() {
     const text = asText(this.source);
-    if (!text) return new import_fabric5.Point(0, 0);
+    if (!text) return new import_fabric6.Point(0, 0);
     const { dx } = textInk(text);
-    if (!dx) return new import_fabric5.Point(0, 0);
+    if (!dx) return new import_fabric6.Point(0, 0);
     const scaled = dx * (this.source.scaleX ?? 1);
     const radians = (this.source.angle ?? 0) * Math.PI / 180;
-    return new import_fabric5.Point(scaled * Math.cos(radians), scaled * Math.sin(radians));
+    return new import_fabric6.Point(scaled * Math.cos(radians), scaled * Math.sin(radians));
   }
   /** The source's on-canvas width, before the tile scale. */
   baseW() {
@@ -1761,11 +1970,11 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric5.Fabric
     const radians = angle * Math.PI / 180;
     const cos = Math.cos(radians);
     const sin = Math.sin(radians);
-    return new import_fabric5.Point(dx * cos - dy * sin, dx * sin + dy * cos);
+    return new import_fabric6.Point(dx * cos - dy * sin, dx * sin + dy * cos);
   }
   anchorFromOrigin(origin, tileW, tileH, angle) {
     const shift = this.shiftVector(tileW, tileH, angle);
-    return new import_fabric5.Point(origin.x + shift.x, origin.y + shift.y);
+    return new import_fabric6.Point(origin.x + shift.x, origin.y + shift.y);
   }
   /**
    * Snapshot the source at (at least) `scale`, reusing the cached one while it
@@ -1970,6 +2179,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
@@ -2037,7 +2251,7 @@ async function unbakeLegacyLayer(layer, state) {
     cropY: state.original.cropY,
     angle: state.original.angle
   });
-  image.clipPath = state.originalClip ? (await import_fabric6.util.enlivenObjects([state.originalClip]))[0] : void 0;
+  image.clipPath = state.originalClip ? (await import_fabric7.util.enlivenObjects([state.originalClip]))[0] : void 0;
   restoreLocks(image, state.originalLocks);
   image.setCoords();
 }
@@ -2054,220 +2268,997 @@ function restoreLocks(obj, locks) {
   );
 }
 
-// src/text-curve.ts
-var import_fabric7 = require("fabric");
-
-// src/text-curve-geometry.ts
-var DEFAULT_TEXT_CURVE = {
-  shape: "arc",
-  arc: 0,
-  wave: 0,
-  waveLength: 4.1,
-  offset: 0,
-  centerOffset: 0
-};
-var MIN_ARC = 0.5;
-var FULL_CIRCLE_ARC = 99.5;
-var MIN_SWEEP = 0.12;
-var WAVE_AMPLITUDE_EM = 0.9;
-var MIN_WAVE_LENGTH = 1;
-var MAX_WAVE_LENGTH = 12;
-var WAVE_STEP = 6;
-var MAX_WAVE_STEPS = 4e3;
-function round(value) {
-  return Math.round(value * 100) / 100;
-}
-function normalizeTextCurve(config) {
-  const arc = clamp(config.arc ?? 0, -100, 100);
-  const wave = clamp(config.wave ?? 0, 0, 100);
-  const inferred = Math.abs(arc) < MIN_ARC && wave > 0 ? "wave" : "arc";
-  return {
-    shape: config.shape ?? inferred,
-    arc,
-    wave,
-    waveLength: clamp(
-      config.waveLength ?? DEFAULT_TEXT_CURVE.waveLength,
-      MIN_WAVE_LENGTH,
-      MAX_WAVE_LENGTH
-    ),
-    offset: clamp(config.offset ?? 0, -100, 100),
-    centerOffset: clamp(config.centerOffset ?? 0, -100, 100)
-  };
-}
-function bendsBaseline(config) {
-  return config.shape === "arc" ? Math.abs(config.arc) >= MIN_ARC : config.wave > 0;
-}
-function arcGeometry(width, config) {
-  const magnitude = Math.min(100, Math.abs(config.arc));
-  const direction = config.arc < 0 ? -1 : 1;
-  const baseSweep = magnitude >= FULL_CIRCLE_ARC ? Math.PI * 2 : Math.max(MIN_SWEEP, magnitude / 100 * Math.PI);
-  const baseRadius = width / baseSweep;
-  const radius = baseRadius * Math.pow(2, config.centerOffset / 100);
-  const sweep = radius >= baseRadius ? baseSweep : Math.min(Math.PI * 2, width / Math.max(radius, 1e-3));
-  return { radius, sweep, direction, baseRadius };
-}
-function arcLinePath(width, geometry, radius, rotation) {
-  const { sweep, direction, baseRadius } = geometry;
-  const full = sweep >= Math.PI * 2 - 1e-6;
-  const centerX = width / 2;
-  const point = (angle) => [
-    centerX + radius * Math.sin(angle),
-    direction * (baseRadius - radius * Math.cos(angle))
-  ];
-  const sweepFlag = direction > 0 ? 1 : 0;
-  const format = ([x, y]) => `${round(x)} ${round(y)}`;
-  const r = round(radius);
-  if (full) {
-    const start2 = point(rotation - Math.PI);
-    const opposite = point(rotation);
-    return {
-      data: [
-        `M ${format(start2)}`,
-        `A ${r} ${r} 0 0 ${sweepFlag} ${format(opposite)}`,
-        `A ${r} ${r} 0 0 ${sweepFlag} ${format(start2)}`
-      ].join(" "),
-      length: radius * Math.PI * 2
-    };
-  }
-  const start = point(rotation - sweep / 2);
-  const end = point(rotation + sweep / 2);
-  const largeArc = sweep > Math.PI ? 1 : 0;
-  return {
-    data: `M ${format(start)} A ${r} ${r} 0 ${largeArc} ${sweepFlag} ${format(end)}`,
-    length: radius * sweep
-  };
-}
-function waveLinePath(width, fontSize, config, dy) {
-  const amplitude = config.wave / 100 * fontSize * WAVE_AMPLITUDE_EM;
-  const period = Math.max(1, fontSize * config.waveLength);
-  const phase = config.offset / 100 * Math.PI * 2;
-  const step = Math.min(WAVE_STEP, period / 8);
-  const steps = Math.min(MAX_WAVE_STEPS, Math.max(2, Math.ceil(width / step)));
-  const commands = [];
-  let length = 0;
-  let previous = null;
-  for (let index = 0; index <= steps; index++) {
-    const x = width * index / steps;
-    const y = dy + amplitude * Math.sin(x / period * Math.PI * 2 + phase);
-    if (previous) length += Math.hypot(x - previous[0], y - previous[1]);
-    previous = [x, y];
-    commands.push(`${index === 0 ? "M" : "L"} ${round(x)} ${round(y)}`);
-  }
-  return { data: commands.join(" "), length };
-}
-function buildCurveLinePaths(config, width, fontSize, lineCount = 1, lineHeight = 0) {
-  const curve = normalizeTextCurve(config);
-  if (!bendsBaseline(curve)) return null;
-  const lines = Math.max(1, Math.floor(lineCount));
-  const paths = [];
-  if (curve.shape === "wave") {
-    for (let index = 0; index < lines; index++) {
-      paths.push(waveLinePath(width, fontSize, 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++) {
-    const radius = Math.max(1, geometry.radius + (index - (lines - 1) / 2) * lineHeight);
-    paths.push(arcLinePath(width, geometry, radius, rotation));
-  }
-  return paths;
-}
-function buildCurvePathData(config, width, fontSize) {
-  return buildCurveLinePaths(config, width, fontSize)?.[0] ?? null;
-}
-
-// src/text-curve.ts
-var MEASURE_WIDTH2 = 1e5;
-var PATH_SLACK = 0.06;
-var FALLBACK_LINE_HEIGHT = 1.16;
-var patches = /* @__PURE__ */ new WeakMap();
-var dimensionPatches = /* @__PURE__ */ new WeakMap();
-var authoredCaching = /* @__PURE__ */ new WeakMap();
-var GLYPH_HALF_HEIGHT = 0.7;
-function curvedInkSize(text) {
-  const lineCount = text._textLines?.length ?? 0;
-  for (let index = 0; index < lineCount; index += 1) text.getLineWidth?.(index);
-  const lines = text.__charBounds;
-  if (!lines?.length) return null;
-  let halfWidth = 0;
-  let halfHeight = 0;
-  for (const line of lines) {
-    for (const box of line ?? []) {
-      const { renderLeft, renderTop } = box;
-      if (typeof renderLeft !== "number" || typeof renderTop !== "number") continue;
-      const halfGlyphWidth = (box.kernedWidth ?? box.width ?? 0) / 2;
-      const halfGlyphHeight = (box.height ?? text.fontSize) * GLYPH_HALF_HEIGHT;
-      const angle = box.angle ?? 0;
-      const cos = Math.abs(Math.cos(angle));
-      const sin = Math.abs(Math.sin(angle));
-      halfWidth = Math.max(
-        halfWidth,
-        Math.abs(renderLeft) + halfGlyphWidth * cos + halfGlyphHeight * sin
-      );
-      halfHeight = Math.max(
-        halfHeight,
-        Math.abs(renderTop) + halfGlyphWidth * sin + halfGlyphHeight * cos
-      );
-    }
-  }
-  if (halfWidth === 0 && halfHeight === 0) return null;
-  return { width: halfWidth * 2, height: halfHeight * 2 };
-}
-function growBoxToInk(text) {
-  const ink = curvedInkSize(text);
-  if (!ink) return;
-  if (ink.width > (text.width ?? 0)) text.width = ink.width;
-  if (ink.height > (text.height ?? 0)) text.height = ink.height;
-}
-function isCurvable(object) {
-  return !!object && typeof object.text === "string";
-}
-function measureText(text) {
-  const authored = text.width;
-  try {
-    text.set({ width: MEASURE_WIDTH2 });
-    text.initDimensions?.();
-    return Math.max(1, text.calcTextWidth?.() ?? text.width ?? 1);
-  } finally {
-    if (authored !== void 0) text.set({ width: authored });
-    text.initDimensions?.();
+// 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;
 }
-function lineCountOf(text) {
-  return Math.max(1, text._textLines?.length ?? 1);
-}
-function lineHeightOf(text) {
-  const measured = text.getHeightOfLine?.(0);
-  if (typeof measured === "number" && Number.isFinite(measured) && measured > 0) return measured;
-  return text.fontSize * (text.lineHeight ?? 1) * FALLBACK_LINE_HEIGHT;
-}
-function toFabricPath(curve) {
-  return new import_fabric7.Path(curve.data, { visible: false, objectCaching: false });
-}
-var TextCurveManager = class {
+var ShapeManager = class {
   constructor(canvas, layers, history, events) {
     this.canvas = canvas;
     this.layers = layers;
     this.history = history;
     this.events = events;
-    this.canvas.on("text:changed", this.onTextChanged);
+    this.canvas.on("object:modified", this.onObjectModified);
   }
   canvas;
   layers;
   history;
   events;
+  plugins = /* @__PURE__ */ new Map();
   /**
-   * Typing on the canvas changes the run the paths were built for. Fabric drops
-   * a glyph whose centre falls past the end of the path, so without rebuilding
-   * here a longer replacement simply vanishes — select-all-and-retype rendered
-   * an empty box — and a shorter one piles up on a path built for the old text.
-   *
-   * No history entry: fabric records the edit when editing exits, and one save
-   * per keystroke would bury every earlier step under the typing.
+   * 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.
    */
-  onTextChanged = (event) => {
+  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
+var import_fabric9 = require("fabric");
+
+// src/image-effects/presets.ts
+var LUMA = [0.299, 0.587, 0.114];
+var rows = (r, g, b) => [...r, ...g, ...b, 0, 0, 0, 1, 0];
+var IMAGE_FILTER_PRESETS = [
+  { id: "original", name: "Original", version: 1, adjust: {} },
+  {
+    id: "black-white",
+    name: "Black & White",
+    version: 1,
+    adjust: {},
+    matrix: rows([...LUMA, 0, 0], [...LUMA, 0, 0], [...LUMA, 0, 0])
+  },
+  {
+    id: "sepia",
+    name: "Sepia",
+    version: 1,
+    adjust: {},
+    matrix: rows(
+      [0.393, 0.769, 0.189, 0, 0],
+      [0.349, 0.686, 0.168, 0, 0],
+      [0.272, 0.534, 0.131, 0, 0]
+    )
+  },
+  {
+    id: "fade",
+    name: "Fade",
+    version: 1,
+    adjust: { contrast: -0.2, saturation: -0.25, brightness: 0.08 }
+  },
+  {
+    id: "vivid",
+    name: "Vivid",
+    version: 1,
+    adjust: { vibrance: 0.5, contrast: 0.15, saturation: 0.15 }
+  },
+  { id: "fuchsia", name: "Fuchsia", version: 1, adjust: { tint: 0.5, saturation: 0.2 } },
+  { id: "cool", name: "Cool", version: 1, adjust: { temperature: -0.45 } },
+  { id: "warm", name: "Warm", version: 1, adjust: { temperature: 0.45 } },
+  {
+    id: "duotone",
+    name: "Duotone",
+    version: 1,
+    adjust: {},
+    matrix: rows(
+      [0.2544, 0.4995, 0.097, 0, 0.1059],
+      [0.2216, 0.435, 0.0845, 0, 0.1647],
+      [0.1453, 0.2853, 0.0554, 0, 0.2863]
+    )
+  },
+  {
+    id: "nashville",
+    name: "Nashville",
+    version: 1,
+    adjust: { temperature: 0.25, tint: -0.1, contrast: 0.2, saturation: 0.15, brightness: 0.05 }
+  },
+  {
+    id: "valencia",
+    name: "Valencia",
+    version: 1,
+    adjust: { temperature: 0.2, contrast: 0.08, brightness: 0.08, saturation: -0.05 }
+  },
+  {
+    id: "clarendon",
+    name: "Clarendon",
+    version: 1,
+    adjust: { contrast: 0.2, saturation: 0.35, temperature: -0.1 }
+  },
+  {
+    id: "reyes",
+    name: "Reyes",
+    version: 1,
+    adjust: { brightness: 0.1, contrast: -0.15, saturation: -0.35, temperature: 0.15 }
+  },
+  {
+    id: "lark",
+    name: "Lark",
+    version: 1,
+    adjust: { brightness: 0.08, contrast: -0.05, saturation: 0.1, temperature: -0.15 }
+  },
+  {
+    id: "juno",
+    name: "Juno",
+    version: 1,
+    adjust: { saturation: 0.3, contrast: 0.1, temperature: 0.15, tint: 0.1 }
+  }
+];
+function imageFilterPreset(id) {
+  return IMAGE_FILTER_PRESETS.find((preset) => preset.id === id);
+}
+
+// src/image-effects/proxy.ts
+var import_fabric8 = require("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 = import_fabric8.util.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/types.ts
+var ADJUST_KEYS = [
+  "temperature",
+  "tint",
+  "brightness",
+  "contrast",
+  "highlights",
+  "shadows",
+  "whites",
+  "blacks",
+  "invert",
+  "vibrance",
+  "saturation",
+  "hue",
+  "sharpness",
+  "clarity",
+  "vignette",
+  "blur",
+  "noise",
+  "pixelate"
+];
+var NEUTRAL_ADJUST = Object.fromEntries(
+  ADJUST_KEYS.map((k) => [k, 0])
+);
+var ADJUST_RANGES = {
+  invert: [0, 1],
+  vignette: [0, 1],
+  blur: [0, 1],
+  noise: [0, 1],
+  pixelate: [0, 1]
+};
+var IMAGE_PROXY_MAX_EDGE = 2048;
+
+// src/image-effects/specs.ts
+var ORDER = [
+  "highlights",
+  "shadows",
+  "whites",
+  "blacks",
+  "brightness",
+  "contrast",
+  "temperature",
+  "tint",
+  "vibrance",
+  "saturation",
+  "hue",
+  "invert",
+  "clarity",
+  "sharpness",
+  "noise",
+  "pixelate",
+  "blur",
+  "vignette"
+];
+function clampAdjust(adjust) {
+  const out = {};
+  for (const key of ADJUST_KEYS) {
+    const value = adjust[key];
+    if (typeof value !== "number" || !Number.isFinite(value)) continue;
+    const [min, max] = ADJUST_RANGES[key] ?? [-1, 1];
+    out[key] = key === "invert" ? value >= 0.5 ? 1 : 0 : clamp(value, min, max);
+  }
+  return out;
+}
+function clampAlphaClip(clip) {
+  if (!clip || typeof clip !== "object") return void 0;
+  const high = clamp(Number(clip.high) || 0, 1, 255);
+  const low = clamp(Math.min(Number(clip.low) || 0, high - 1), 0, 254);
+  return low === 0 && high === 255 ? void 0 : { low, high };
+}
+function alphaClipMatrix({ low, high }) {
+  const span = Math.max(1, high - low);
+  return [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 255 / span, -low / span];
+}
+function specFor(key, v) {
+  if (v === 0) return null;
+  switch (key) {
+    case "highlights":
+      return { type: "Highlights", amount: v };
+    case "shadows":
+      return { type: "Shadows", amount: v };
+    case "whites":
+      return { type: "Whites", amount: v };
+    case "blacks":
+      return { type: "Blacks", amount: v };
+    case "brightness":
+      return { type: "Brightness", brightness: v };
+    case "contrast":
+      return { type: "Contrast", contrast: v };
+    case "temperature":
+      return { type: "Temperature", amount: v };
+    case "tint":
+      return { type: "Tint", amount: v };
+    case "vibrance":
+      return { type: "Vibrance", vibrance: v };
+    case "saturation":
+      return { type: "Saturation", saturation: v };
+    case "hue":
+      return { type: "HueRotation", rotation: v };
+    case "invert":
+      return { type: "Invert", alpha: false, invert: true };
+    case "clarity":
+      return { type: "Clarity", amount: v };
+    case "sharpness":
+      return { type: "Convolute", opaque: false, matrix: [0, -v, 0, -v, 1 + 4 * v, -v, 0, -v, 0] };
+    case "noise":
+      return { type: "Noise", noise: Math.round(v * 300) };
+    case "pixelate":
+      return { type: "Pixelate", blocksize: Math.max(1, Math.round(1 + v * 40)) };
+    case "blur":
+      return { type: "Blur", blur: v };
+    case "vignette":
+      return { type: "Vignette", amount: v };
+  }
+}
+function imageEffectsFilterSpecs(state) {
+  const specs = [];
+  const preset = state.preset ? imageFilterPreset(state.preset.id) : void 0;
+  if (preset?.matrix)
+    specs.push({ type: "ColorMatrix", matrix: [...preset.matrix], colorsOnly: true });
+  const adjust = clampAdjust(state.adjust);
+  for (const key of ORDER) {
+    const spec = specFor(key, adjust[key] ?? 0);
+    if (spec) specs.push(spec);
+  }
+  const clip = clampAlphaClip(state.alphaClip);
+  if (clip) specs.push({ type: "ColorMatrix", matrix: alphaClipMatrix(clip), colorsOnly: false });
+  return specs;
+}
+function normalizeImageEffects(meta) {
+  const alphaClip = clampAlphaClip(meta.imageAlphaClip);
+  const withClip = (state) => alphaClip ? { ...state, alphaClip } : state;
+  const current = meta.imageEffects;
+  if (current && typeof current === "object") {
+    const preset = current.preset && imageFilterPreset(current.preset.id) ? { id: current.preset.id, version: current.preset.version } : void 0;
+    return withClip({ ...preset ? { preset } : {}, adjust: clampAdjust(current.adjust ?? {}) });
+  }
+  const legacy = meta.imageAdjustments;
+  return withClip({ adjust: clampAdjust(legacy ?? {}) });
+}
+
+// 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 (import_fabric9.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 (import_fabric9.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 {
+        (0, import_fabric9.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
+var import_canvas_editor_effects = require("@overtone-art/canvas-editor-effects");
+
+// src/shadow.ts
+var import_fabric10 = require("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 import_fabric10.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, import_canvas_editor_effects.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
+var import_fabric11 = require("fabric");
+
+// src/text-curve-geometry.ts
+var DEFAULT_TEXT_CURVE = {
+  shape: "arc",
+  arc: 0,
+  wave: 0,
+  waveLength: 4.1,
+  offset: 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;
+var MIN_WAVE_LENGTH = 1;
+var MAX_WAVE_LENGTH = 12;
+var WAVE_STEP = 6;
+var MAX_WAVE_STEPS = 4e3;
+function round(value) {
+  return Math.round(value * 100) / 100;
+}
+function normalizeTextCurve(config) {
+  const arc = clamp(config.arc ?? 0, -100, 100);
+  const wave = clamp(config.wave ?? 0, 0, 100);
+  const inferred = Math.abs(arc) < MIN_ARC && wave > 0 ? "wave" : "arc";
+  return {
+    shape: config.shape ?? inferred,
+    arc,
+    wave,
+    waveLength: clamp(
+      config.waveLength ?? DEFAULT_TEXT_CURVE.waveLength,
+      MIN_WAVE_LENGTH,
+      MAX_WAVE_LENGTH
+    ),
+    offset: clamp(config.offset ?? 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) {
+  const magnitude = Math.min(100, Math.abs(config.arc));
+  const direction = config.arc < 0 ? -1 : 1;
+  const baseSweep = magnitude >= FULL_CIRCLE_ARC ? Math.PI * 2 : Math.max(MIN_SWEEP, magnitude / 100 * Math.PI);
+  const baseRadius = width / baseSweep;
+  const radius = baseRadius * Math.pow(2, config.centerOffset / 100);
+  const sweep = radius >= baseRadius ? baseSweep : Math.min(Math.PI * 2, width / Math.max(radius, 1e-3));
+  return { radius, sweep, direction, baseRadius };
+}
+function arcLinePath(width, geometry, radius, rotation) {
+  const { sweep, direction, baseRadius } = geometry;
+  const full = sweep >= Math.PI * 2 - 1e-6;
+  const centerX = width / 2;
+  const point = (angle) => [
+    centerX + radius * Math.sin(angle),
+    direction * (baseRadius - radius * Math.cos(angle))
+  ];
+  const sweepFlag = direction > 0 ? 1 : 0;
+  const format = ([x, y]) => `${round(x)} ${round(y)}`;
+  const r = round(radius);
+  if (full) {
+    const start2 = point(rotation - Math.PI);
+    const opposite = point(rotation);
+    return {
+      data: [
+        `M ${format(start2)}`,
+        `A ${r} ${r} 0 0 ${sweepFlag} ${format(opposite)}`,
+        `A ${r} ${r} 0 0 ${sweepFlag} ${format(start2)}`
+      ].join(" "),
+      length: radius * Math.PI * 2
+    };
+  }
+  const start = point(rotation - sweep / 2);
+  const end = point(rotation + sweep / 2);
+  const largeArc = sweep > Math.PI ? 1 : 0;
+  return {
+    data: `M ${format(start)} A ${r} ${r} 0 ${largeArc} ${sweepFlag} ${format(end)}`,
+    length: radius * sweep
+  };
+}
+function waveLinePath(width, fontSize, config, dy) {
+  const amplitude = config.wave / 100 * fontSize * WAVE_AMPLITUDE_EM;
+  const period = Math.max(1, fontSize * config.waveLength);
+  const phase = config.offset / 100 * Math.PI * 2;
+  const step = Math.min(WAVE_STEP, period / 8);
+  const steps = Math.min(MAX_WAVE_STEPS, Math.max(2, Math.ceil(width / step)));
+  const commands = [];
+  let length = 0;
+  let previous = null;
+  for (let index = 0; index <= steps; index++) {
+    const x = width * index / steps;
+    const y = dy + amplitude * Math.sin(x / period * Math.PI * 2 + phase);
+    if (previous) length += Math.hypot(x - previous[0], y - previous[1]);
+    previous = [x, y];
+    commands.push(`${index === 0 ? "M" : "L"} ${round(x)} ${round(y)}`);
+  }
+  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;
+  const lines = Math.max(1, Math.floor(lineCount));
+  const paths = [];
+  if (curve.shape === "wave") {
+    for (let index = 0; index < lines; index++) {
+      paths.push(waveLinePath(width, fontSize, curve, (index - (lines - 1) / 2) * 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++) {
+    const radius = Math.max(1, geometry.radius + (index - (lines - 1) / 2) * lineHeight);
+    paths.push(arcLinePath(width, geometry, radius, rotation));
+  }
+  return paths;
+}
+function buildCurvePathData(config, width, fontSize) {
+  return buildCurveLinePaths(config, width, fontSize)?.[0] ?? null;
+}
+
+// src/text-curve.ts
+var MEASURE_WIDTH2 = 1e5;
+var PATH_SLACK = 0.06;
+var FALLBACK_LINE_HEIGHT = 1.16;
+var patches = /* @__PURE__ */ new WeakMap();
+var dimensionPatches = /* @__PURE__ */ new WeakMap();
+var authoredCaching = /* @__PURE__ */ new WeakMap();
+var GLYPH_HALF_HEIGHT = 0.7;
+function curvedInkSize(text) {
+  const lineCount = text._textLines?.length ?? 0;
+  for (let index = 0; index < lineCount; index += 1) text.getLineWidth?.(index);
+  const lines = text.__charBounds;
+  if (!lines?.length) return null;
+  let halfWidth = 0;
+  let halfHeight = 0;
+  for (const line of lines) {
+    for (const box of line ?? []) {
+      const { renderLeft, renderTop } = box;
+      if (typeof renderLeft !== "number" || typeof renderTop !== "number") continue;
+      const halfGlyphWidth = (box.kernedWidth ?? box.width ?? 0) / 2;
+      const halfGlyphHeight = (box.height ?? text.fontSize) * GLYPH_HALF_HEIGHT;
+      const angle = box.angle ?? 0;
+      const cos = Math.abs(Math.cos(angle));
+      const sin = Math.abs(Math.sin(angle));
+      halfWidth = Math.max(
+        halfWidth,
+        Math.abs(renderLeft) + halfGlyphWidth * cos + halfGlyphHeight * sin
+      );
+      halfHeight = Math.max(
+        halfHeight,
+        Math.abs(renderTop) + halfGlyphWidth * sin + halfGlyphHeight * cos
+      );
+    }
+  }
+  if (halfWidth === 0 && halfHeight === 0) return null;
+  return { width: halfWidth * 2, height: halfHeight * 2 };
+}
+function growBoxToInk(text) {
+  const ink = curvedInkSize(text);
+  if (!ink) return;
+  if (ink.width > (text.width ?? 0)) text.width = ink.width;
+  if (ink.height > (text.height ?? 0)) text.height = ink.height;
+}
+function isCurvable(object) {
+  return !!object && typeof object.text === "string";
+}
+function measureText(text) {
+  const authored = text.width;
+  try {
+    text.set({ width: MEASURE_WIDTH2 });
+    text.initDimensions?.();
+    return Math.max(1, text.calcTextWidth?.() ?? text.width ?? 1);
+  } finally {
+    if (authored !== void 0) text.set({ width: authored });
+    text.initDimensions?.();
+  }
+}
+function lineCountOf(text) {
+  return Math.max(1, text._textLines?.length ?? 1);
+}
+function lineHeightOf(text) {
+  const measured = text.getHeightOfLine?.(0);
+  if (typeof measured === "number" && Number.isFinite(measured) && measured > 0) return measured;
+  return text.fontSize * (text.lineHeight ?? 1) * FALLBACK_LINE_HEIGHT;
+}
+function toFabricPath(curve) {
+  return new import_fabric11.Path(curve.data, { visible: false, objectCaching: false });
+}
+var TextCurveManager = class {
+  constructor(canvas, layers, history, events) {
+    this.canvas = canvas;
+    this.layers = layers;
+    this.history = history;
+    this.events = events;
+    this.canvas.on("text:changed", this.onTextChanged);
+  }
+  canvas;
+  layers;
+  history;
+  events;
+  /**
+   * Typing on the canvas changes the run the paths were built for. Fabric drops
+   * a glyph whose centre falls past the end of the path, so without rebuilding
+   * here a longer replacement simply vanishes — select-all-and-retype rendered
+   * an empty box — and a shorter one piles up on a path built for the old text.
+   *
+   * No history entry: fabric records the edit when editing exits, and one save
+   * per keystroke would bury every earlier step under the typing.
+   */
+  onTextChanged = (event) => {
     const layer = event.target ? this.layers.findByObject(event.target) : void 0;
     if (!layer?.meta.curve) return;
     this.refresh(layer.id, false);
@@ -2464,7 +3455,7 @@ var TextCurveManager = class {
 };
 
 // src/text-wrap.ts
-var import_fabric9 = require("fabric");
+var import_fabric13 = require("fabric");
 
 // src/text-wrap-split.ts
 var WHITESPACE = /[ \t\r]/;
@@ -2490,12 +3481,12 @@ function preWrapWordSplit(value) {
 }
 
 // src/masks/space.ts
-var import_fabric8 = require("fabric");
+var import_fabric12 = require("fabric");
 function matrixOf(object) {
   return object.calcTransformMatrix();
 }
 function applyMatrix(object, matrix) {
-  const decomposed = import_fabric8.util.qrDecompose(matrix);
+  const decomposed = import_fabric12.util.qrDecompose(matrix);
   object.set({
     flipX: false,
     flipY: false,
@@ -2512,19 +3503,19 @@ function applyMatrix(object, matrix) {
   object.setCoords();
 }
 function toCanvasSpace(object, host) {
-  applyMatrix(object, import_fabric8.util.multiplyTransformMatrices(matrixOf(host), matrixOf(object)));
+  applyMatrix(object, import_fabric12.util.multiplyTransformMatrices(matrixOf(host), matrixOf(object)));
 }
 function toHostSpace(object, host) {
   applyMatrix(
     object,
-    import_fabric8.util.multiplyTransformMatrices(import_fabric8.util.invertTransform(matrixOf(host)), matrixOf(object))
+    import_fabric12.util.multiplyTransformMatrices(import_fabric12.util.invertTransform(matrixOf(host)), matrixOf(object))
   );
 }
 function relativeMatrix(object, host) {
-  return import_fabric8.util.multiplyTransformMatrices(import_fabric8.util.invertTransform(matrixOf(host)), matrixOf(object));
+  return import_fabric12.util.multiplyTransformMatrices(import_fabric12.util.invertTransform(matrixOf(host)), matrixOf(object));
 }
 function applyRelativeMatrix(object, host, rel) {
-  applyMatrix(object, import_fabric8.util.multiplyTransformMatrices(matrixOf(host), rel));
+  applyMatrix(object, import_fabric12.util.multiplyTransformMatrices(matrixOf(host), rel));
 }
 function asObject(clip) {
   return clip;
@@ -2587,7 +3578,7 @@ function boxClip(text, makeRect) {
 function hasMask(meta) {
   return !!meta.maskPreset || (meta.maskStack?.length ?? 0) > 0;
 }
-function applyTextWrapToObject(object, meta, makeRect = (options) => new import_fabric9.Rect(options)) {
+function applyTextWrapToObject(object, meta, makeRect = (options) => new import_fabric13.Rect(options)) {
   const text = asText(object);
   if (!text) return;
   const state = readTextWrap(meta);
@@ -2726,7 +3717,7 @@ var TextWrapManager = class {
 };
 
 // src/mask-presets/manager.ts
-var import_fabric10 = require("fabric");
+var import_fabric14 = require("fabric");
 
 // src/mask-presets/shapes.ts
 var SHAPE_MASK_IDS = [
@@ -2994,13 +3985,13 @@ var MaskPresetManager = class {
       objectCaching: false
     };
     if (isShapeMaskId(id)) {
-      return new import_fabric10.Path(shapeMaskPathData(id), {
+      return new import_fabric14.Path(shapeMaskPathData(id), {
         ...shared,
         scaleX: width / SHAPE_MASK_BOX,
         scaleY: height / SHAPE_MASK_BOX
       });
     }
-    return new import_fabric10.FabricImage(renderTextureMask(id), {
+    return new import_fabric14.FabricImage(renderTextureMask(id), {
       ...shared,
       scaleX: width / TEXTURE_MASK_SIZE,
       scaleY: height / TEXTURE_MASK_SIZE
@@ -3008,54 +3999,6 @@ var MaskPresetManager = class {
   }
 };
 
-// src/shadow.ts
-var import_fabric11 = require("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 import_fabric11.Shadow({
-      color,
-      blur: Math.max(0, next.blur),
-      offsetX: next.offsetX,
-      offsetY: next.offsetY
-    })
-  });
-}
-
 // src/selection-style.ts
 var DEFAULT_SELECTION_STYLE = {
   borderColor: "#c9a96e",
@@ -3161,7 +4104,7 @@ var UnitConverter = class {
 };
 
 // src/serialization.ts
-var import_fabric12 = require("fabric");
+var import_fabric15 = require("fabric");
 var VERSION = "2.0.0";
 function serializeEditor(editor) {
   return {
@@ -3197,7 +4140,7 @@ async function deserializeEditor(editor, state) {
   }
   const staged = await Promise.all(
     state.layers.map(async (serialized) => {
-      const fabricObject = (await import_fabric12.util.enlivenObjects([serialized.fabricObject]))[0];
+      const fabricObject = (await import_fabric15.util.enlivenObjects([serialized.fabricObject]))[0];
       if (!fabricObject) {
         const source = serialized.fabricObject.src;
         if (typeof source === "string" && source.startsWith("blob:")) {
@@ -3208,7 +4151,7 @@ async function deserializeEditor(editor, state) {
       return { serialized, fabricObject };
     })
   );
-  const stagedBackground = state.backgroundImage ? (await import_fabric12.util.enlivenObjects([state.backgroundImage]))[0] : null;
+  const stagedBackground = state.backgroundImage ? (await import_fabric15.util.enlivenObjects([state.backgroundImage]))[0] : null;
   if (state.backgroundImage && !stagedBackground) {
     const source = state.backgroundImage.src;
     if (typeof source === "string" && source.startsWith("blob:")) {
@@ -3261,7 +4204,7 @@ function restoreLayer(editor, serialized, fabricObject) {
 }
 
 // src/export.ts
-var import_fabric13 = require("fabric");
+var import_fabric16 = require("fabric");
 
 // src/displacement.ts
 var CHANNEL_INDEX = {
@@ -3355,7 +4298,7 @@ async function exportPNG(canvas, options = {}) {
 }
 async function exportIsolatedPNG(source, objects, options = {}) {
   const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
-  const canvas = new import_fabric13.StaticCanvas(element, {
+  const canvas = new import_fabric16.StaticCanvas(element, {
     width: options.width ?? source.getWidth(),
     height: options.height ?? source.getHeight(),
     backgroundColor: options.backgroundColor || void 0
@@ -3385,7 +4328,7 @@ async function exportPrintArea(source, area, options = {}) {
     throw new Error("Print area does not overlap the canvas");
   }
   const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
-  const canvas = new import_fabric13.StaticCanvas(element, { width, height });
+  const canvas = new import_fabric16.StaticCanvas(element, { width, height });
   try {
     const clones = await Promise.all(source.getObjects().map((object) => object.clone()));
     if (clones.length) canvas.add(...clones);
@@ -3825,7 +4768,7 @@ var ProjectManager = class {
 };
 
 // src/mask.ts
-var import_fabric14 = require("fabric");
+var import_fabric17 = require("fabric");
 var MaskRefinementError = class extends Error {
   constructor(code, message, cause) {
     super(message);
@@ -3857,7 +4800,7 @@ var MaskController = class {
       throw new Error("Mask dimensions must be positive integers");
     }
     const backing = this.makeCanvas(width, height);
-    const image = new import_fabric14.FabricImage(backing, {
+    const image = new import_fabric17.FabricImage(backing, {
       left: 0,
       top: 0,
       originX: "left",
@@ -4050,8 +4993,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();
@@ -4077,16 +5020,133 @@ var MaskController = class {
     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");
+  assertActive() {
+    if (this.disposed) throw new Error("Mask controller has been disposed");
+  }
+};
+
+// src/masks/manager.ts
+var import_fabric24 = require("fabric");
+
+// src/masks/compose.ts
+var import_fabric19 = require("fabric");
+
+// src/gradient.ts
+var import_fabric18 = require("fabric");
+var DEFAULT_GRADIENT_CONFIG = {
+  kind: "linear",
+  angle: 90,
+  center: { x: 0.5, y: 0.5 },
+  radius: 0.5,
+  stops: [
+    { color: "#ffffff", opacity: 1, position: 0 },
+    { color: "#000000", opacity: 1, position: 1 }
+  ]
+};
+var MIN_RADIUS = 1e-3;
+var MAX_GRADIENT_STOPS = 256;
+var FALLBACK_STOP_COLOR = DEFAULT_GRADIENT_CONFIG.stops[0].color;
+function linearCoords(angle, box) {
+  const radians = angle * Math.PI / 180;
+  const sin = Math.sin(radians);
+  const cos = Math.cos(radians);
+  const vx = box.width * sin;
+  const vy = -box.height * cos;
+  const length = Math.abs(box.width * sin) + Math.abs(box.height * cos);
+  const scale = length / (vx * vx + vy * vy || 1);
+  return {
+    x1: 0.5 - scale * vx / 2,
+    y1: 0.5 - scale * vy / 2,
+    x2: 0.5 + scale * vx / 2,
+    y2: 0.5 + scale * vy / 2
+  };
+}
+function angleFromCoords(coords, box) {
+  const dx = (coords.x2 - coords.x1) / (box.width || 1);
+  const dy = (coords.y2 - coords.y1) / (box.height || 1);
+  const degrees = Math.atan2(dx, -dy) * 180 / Math.PI;
+  return (degrees + 360) % 360;
+}
+function stopColor(stop) {
+  const source = isCssColor(stop.color) ? stop.color : FALLBACK_STOP_COLOR;
+  const color2 = new import_fabric18.Color(source);
+  const opacity = Number.isFinite(stop.opacity) ? stop.opacity : 1;
+  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) => {
+    const position = Number.isFinite(stop.position) ? stop.position : 0;
+    return { offset: clamp(position, 0, 1), color: stopColor(stop) };
+  });
+  if (config.kind === "radial") {
+    const radius = Math.max(MIN_RADIUS, config.radius);
+    return new import_fabric18.Gradient({
+      type: "radial",
+      gradientUnits: "percentage",
+      coords: {
+        x1: config.center.x,
+        y1: config.center.y,
+        r1: 0,
+        x2: config.center.x,
+        y2: config.center.y,
+        r2: radius
+      },
+      colorStops
+    });
+  }
+  return new import_fabric18.Gradient({
+    type: "linear",
+    gradientUnits: "percentage",
+    coords: linearCoords(config.angle, box),
+    colorStops
+  });
+}
+function toFabricMaskGradient(config, box) {
+  const gradient = toFabricGradient(config, box);
+  gradient.colorStops = gradient.colorStops.map((stop) => {
+    const color2 = new import_fabric18.Color(stop.color);
+    const [red, green, blue] = color2.getSource();
+    const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
+    color2.setSource([255, 255, 255, clamp(luminance * color2.getAlpha(), 0, 1)]);
+    return { offset: stop.offset, color: color2.toRgba() };
+  });
+  return gradient;
+}
+function readGradientConfig(object) {
+  const fill = object.fill;
+  if (!fill || typeof fill === "string" || !(fill instanceof import_fabric18.Gradient)) return null;
+  const stops = fill.colorStops.map((stop) => {
+    const source = isCssColor(stop.color) ? stop.color : FALLBACK_STOP_COLOR;
+    const color2 = new import_fabric18.Color(source);
+    const offset = Number.isFinite(stop.offset) ? stop.offset : 0;
+    return {
+      color: `#${color2.toHex().toLowerCase()}`,
+      opacity: color2.getAlpha(),
+      position: clamp(offset, 0, 1)
+    };
+  });
+  if (fill.type === "radial") {
+    const { x1, y1, r2 } = fill.coords;
+    return {
+      kind: "radial",
+      angle: DEFAULT_GRADIENT_CONFIG.angle,
+      center: { x: x1, y: y1 },
+      radius: r2,
+      stops
+    };
   }
-};
-
-// src/masks/manager.ts
-var import_fabric20 = require("fabric");
+  const box = { width: object.width || 1, height: object.height || 1 };
+  return {
+    kind: "linear",
+    angle: angleFromCoords(fill.coords, box),
+    center: { ...DEFAULT_GRADIENT_CONFIG.center },
+    radius: DEFAULT_GRADIENT_CONFIG.radius,
+    stops
+  };
+}
 
 // src/masks/compose.ts
-var import_fabric15 = require("fabric");
 var MODE_OPERATION = {
   add: "source-over",
   subtract: "destination-out",
@@ -4096,7 +5156,7 @@ function neutralize(child) {
   child.set({ opacity: 0, globalCompositeOperation: "source-over" });
 }
 function baseRect(box) {
-  return new import_fabric15.Rect({
+  return new import_fabric19.Rect({
     left: box.left,
     top: box.top,
     width: Math.max(1, box.width),
@@ -4116,6 +5176,14 @@ function composeMaskGroup(children, entries, options) {
       neutralize(child);
       return;
     }
+    if (entry.gradient) {
+      child.set({
+        fill: toFabricMaskGradient(entry.gradient, {
+          width: Math.max(1, child.width ?? 1),
+          height: Math.max(1, child.height ?? 1)
+        })
+      });
+    }
     child.set({
       opacity: entry.opacity,
       globalCompositeOperation: MODE_OPERATION[entry.mode] ?? "source-over"
@@ -4123,7 +5191,7 @@ function composeMaskGroup(children, entries, options) {
   });
   const first = entries.find((entry) => entry.visible);
   const withBase = !first || first.mode !== "add" ? [baseRect(options.box), ...children] : [...children];
-  return new import_fabric15.Group(withBase, {
+  return new import_fabric19.Group(withBase, {
     absolutePositioned: options.absolute,
     // Cached, so the children's compositing operations resolve against each
     // other instead of against the page underneath the mask.
@@ -4137,11 +5205,105 @@ function needsAbsoluteSpace(entries) {
 }
 
 // src/masks/edit.ts
-var import_fabric16 = require("fabric");
+var import_fabric20 = require("fabric");
+
+// src/masks/edit-viewport.ts
+var MIN_PADDING = 48;
+var MAX_PADDING = 512;
+var PADDING_FRACTION = 0.35;
+var OUTSIDE_SHADE = "rgba(15, 15, 15, 0.55)";
+var MaskEditViewport = class {
+  constructor(canvas) {
+    this.canvas = canvas;
+  }
+  canvas;
+  state = null;
+  open(handle) {
+    if (this.state) return;
+    const width = this.canvas.getWidth();
+    const height = this.canvas.getHeight();
+    const base = Math.min(
+      MAX_PADDING,
+      Math.max(MIN_PADDING, Math.max(width, height) * PADDING_FRACTION)
+    );
+    handle.setCoords();
+    const bounds = handle.getBoundingRect();
+    const left = Math.min(MAX_PADDING, Math.max(base, -bounds.left + MIN_PADDING));
+    const top = Math.min(MAX_PADDING, Math.max(base, -bounds.top + MIN_PADDING));
+    const right = Math.min(
+      MAX_PADDING,
+      Math.max(base, bounds.left + bounds.width - width + MIN_PADDING)
+    );
+    const bottom = Math.min(
+      MAX_PADDING,
+      Math.max(base, bounds.top + bounds.height - height + MIN_PADDING)
+    );
+    const viewport = [...this.canvas.viewportTransform];
+    const wrapper = this.canvas.wrapperEl;
+    this.state = {
+      width,
+      height,
+      left,
+      top,
+      viewport,
+      wrapperCss: wrapper.style.cssText
+    };
+    this.canvas.setDimensions({ width: width + left + right, height: height + top + bottom });
+    const paddedViewport = [...viewport];
+    paddedViewport[4] += left;
+    paddedViewport[5] += top;
+    this.canvas.setViewportTransform(paddedViewport);
+    wrapper.style.position = "absolute";
+    wrapper.style.left = `${-left}px`;
+    wrapper.style.top = `${-top}px`;
+    wrapper.style.zIndex = "1";
+    this.canvas.on("after:render", this.onAfterRender);
+    this.canvas.calcOffset();
+    this.canvas.requestRenderAll();
+  }
+  close() {
+    const state = this.state;
+    if (!state) return;
+    this.canvas.off("after:render", this.onAfterRender);
+    this.canvas.setViewportTransform(state.viewport);
+    this.canvas.setDimensions({ width: state.width, height: state.height });
+    this.canvas.wrapperEl.style.cssText = state.wrapperCss;
+    this.canvas.calcOffset();
+    this.state = null;
+  }
+  /** Save with real document dimensions, then reopen the same editing view. */
+  checkpoint(handle, save) {
+    this.close();
+    try {
+      save();
+    } finally {
+      this.open(handle);
+    }
+  }
+  onAfterRender = ({ ctx }) => {
+    const state = this.state;
+    if (!state || ctx !== this.canvas.getContext()) return;
+    const fullWidth = this.canvas.getWidth();
+    const fullHeight = this.canvas.getHeight();
+    const right = state.left + state.width;
+    const bottom = state.top + state.height;
+    ctx.save();
+    ctx.fillStyle = OUTSIDE_SHADE;
+    ctx.fillRect(0, 0, fullWidth, state.top);
+    ctx.fillRect(0, bottom, fullWidth, fullHeight - bottom);
+    ctx.fillRect(0, state.top, state.left, state.height);
+    ctx.fillRect(right, state.top, fullWidth - right, state.height);
+    ctx.restore();
+    this.canvas.drawControls(ctx);
+  };
+};
+
+// src/masks/edit.ts
 var MaskEditController = class {
   constructor(canvas, onCommit) {
     this.canvas = canvas;
     this.onCommit = onCommit;
+    this.viewport = new MaskEditViewport(canvas);
   }
   canvas;
   onCommit;
@@ -4149,6 +5311,7 @@ var MaskEditController = class {
   editing = null;
   child = null;
   group = null;
+  viewport;
   active() {
     return this.editing;
   }
@@ -4179,6 +5342,7 @@ var MaskEditController = class {
     this.group = group;
     this.canvas.add(handle);
     this.canvas.setActiveObject(handle);
+    this.viewport.open(handle);
     this.canvas.on("object:moving", this.onTransform);
     this.canvas.on("object:scaling", this.onTransform);
     this.canvas.on("object:rotating", this.onTransform);
@@ -4193,6 +5357,7 @@ var MaskEditController = class {
     this.canvas.off("object:scaling", this.onTransform);
     this.canvas.off("object:rotating", this.onTransform);
     this.canvas.off("object:modified", this.onModified);
+    this.viewport.close();
     if (this.canvas.getActiveObject() === this.handle) this.canvas.discardActiveObject();
     this.canvas.remove(this.handle);
     this.handle = null;
@@ -4211,15 +5376,15 @@ var MaskEditController = class {
   onModified = (event) => {
     if (!this.handle || event.target !== this.handle) return;
     this.write();
-    this.onCommit();
+    this.viewport.checkpoint(this.handle, this.onCommit);
   };
   /** Handle transform (canvas space) → clip child transform (group-relative). */
   write() {
     if (!this.handle || !this.child || !this.group) return;
     applyMatrix(
       this.child,
-      import_fabric16.util.multiplyTransformMatrices(
-        import_fabric16.util.invertTransform(matrixOf(this.group)),
+      import_fabric20.util.multiplyTransformMatrices(
+        import_fabric20.util.invertTransform(matrixOf(this.group)),
         matrixOf(this.handle)
       )
     );
@@ -4230,15 +5395,15 @@ var MaskEditController = class {
 };
 
 // src/masks/store.ts
-var import_fabric19 = require("fabric");
+var import_fabric23 = require("fabric");
 
 // src/masks/host.ts
-var import_fabric17 = require("fabric");
+var import_fabric21 = require("fabric");
 function findCanvasHost(layers) {
   return layers.getAll().find((layer) => layer.meta.canvasMask);
 }
 function createCanvasHost(canvas, layers) {
-  const rect = new import_fabric17.Rect({
+  const rect = new import_fabric21.Rect({
     left: 0,
     top: 0,
     width: canvas.getWidth(),
@@ -4287,9 +5452,9 @@ function hostBoxOf(canvas, host, absolute) {
 }
 
 // src/masks/install.ts
-var import_fabric18 = require("fabric");
+var import_fabric22 = require("fabric");
 function convertSpace(host, sources, absolute) {
-  const wasAbsolute = host.clipPath instanceof import_fabric18.Group ? host.clipPath.absolutePositioned : absolute;
+  const wasAbsolute = host.clipPath instanceof import_fabric22.Group ? host.clipPath.absolutePositioned : absolute;
   if (absolute === wasAbsolute) return;
   for (const source of sources) {
     if (absolute) toCanvasSpace(source, host);
@@ -4342,6 +5507,29 @@ var MaskStackStore = class {
   get(target, maskId) {
     return this.list(target).find((entry) => entry.id === maskId);
   }
+  /** Repaint a gradient mask without replacing or re-fitting its geometry. */
+  setGradient(target, maskId, gradient, options = {}) {
+    const host = this.host(target);
+    if (!host) return false;
+    const entries = [...this.list(target)];
+    const index = entries.findIndex((entry) => entry.id === maskId);
+    if (index === -1) return false;
+    const sources = this.unwrap(target, host);
+    const source = sources[index];
+    if (!source) return false;
+    source.set({
+      fill: toFabricGradient(gradient, {
+        width: Math.max(1, source.width ?? 1),
+        height: Math.max(1, source.height ?? 1)
+      })
+    });
+    entries[index] = {
+      ...entries[index],
+      ...options.meta ? { meta: options.meta } : {}
+    };
+    this.commit(target, host, entries, sources, options.save ?? true);
+    return true;
+  }
   /** Every target that currently carries at least one mask. */
   targets() {
     return this.layers.getAll().filter((layer) => (layer.meta.maskStack ?? []).length > 0).map((layer) => layer.meta.canvasMask ? CANVAS_MASK_TARGET : layer.id);
@@ -4402,14 +5590,14 @@ var MaskStackStore = class {
     const entries = this.list(target);
     const meta = this.hostLayer(target)?.meta;
     if (entries.length === 0 && this.holdsBoxClip(meta)) return [];
-    if (entries.length === 0 || !(clip instanceof import_fabric19.Group)) {
+    if (entries.length === 0 || !(clip instanceof import_fabric23.Group)) {
       const source = asObject(clip);
       if (meta?.overflow === "hidden") source.clipPath = void 0;
-      return [source];
+      return restoreGradientPaint(entries, [source]);
     }
     const children = unwrapGroup(clip);
     const extra = children.length - entries.length;
-    return extra > 0 ? children.slice(extra) : children;
+    return restoreGradientPaint(entries, extra > 0 ? children.slice(extra) : children);
   }
   /**
    * Entries for a stack, adopting a pre-stack clip as the first one. Without
@@ -4442,7 +5630,8 @@ var MaskStackStore = class {
     if (!layer) return;
     const absolute = forceAbsolute || target === CANVAS_MASK_TARGET || needsAbsoluteSpace(entries);
     convertSpace(host, sources, absolute);
-    const next = withRelativeTransforms(entries, sources, host, absolute);
+    const painted = captureGradientPaint(entries, sources);
+    const next = withRelativeTransforms(painted, sources, host, absolute);
     installClip(host, next, sources, this.hostBox(target, absolute), absolute);
     if (next.length === 0) {
       delete layer.meta.maskStack;
@@ -4456,12 +5645,41 @@ var MaskStackStore = class {
     if (save) this.history.save();
   }
 };
+function restoreGradientPaint(entries, sources) {
+  entries.forEach((entry, index) => {
+    const source = sources[index];
+    if (!source || !entry.gradient) return;
+    const box = {
+      width: Math.max(1, source.width ?? 1),
+      height: Math.max(1, source.height ?? 1)
+    };
+    const fill = source.fill;
+    const rendered = toFabricMaskGradient(entry.gradient, box);
+    if (fill instanceof import_fabric23.Gradient && JSON.stringify(fill.toObject()) !== JSON.stringify(rendered.toObject())) {
+      return;
+    }
+    source.set({
+      fill: toFabricGradient(entry.gradient, box)
+    });
+  });
+  return sources;
+}
+function captureGradientPaint(entries, sources) {
+  return entries.map((entry, index) => {
+    const gradient = sources[index] ? readGradientConfig(sources[index]) : null;
+    if (gradient) return { ...entry, gradient };
+    if (!entry.gradient) return entry;
+    const next = { ...entry };
+    delete next.gradient;
+    return next;
+  });
+}
 
 // src/masks/manager.ts
 var LayerMaskManager = class extends MaskStackStore {
   // Committing mid-drag would recompose the group the handle writes into and
   // leave it pointing at a discarded object; the geometry is settled on endEdit.
-  edits = new MaskEditController(this.canvas, () => this.history.save());
+  edits = new MaskEditController(this.canvas, () => this.history.saveImmediate());
   onLayersChanged = () => this.pin();
   // Selecting a layer means the user has moved on from the mask they had open;
   // leaving both selected would show mask controls for an unrelated layer.
@@ -4506,7 +5724,7 @@ var LayerMaskManager = class extends MaskStackStore {
     if (index === -1) return false;
     this.endEdit(false);
     this.commit(target, host, [...entries], this.unwrap(target, host), false, true);
-    const group = host.clipPath instanceof import_fabric20.Group ? host.clipPath : null;
+    const group = host.clipPath instanceof import_fabric24.Group ? host.clipPath : null;
     if (!group) return false;
     const children = group.getObjects();
     const child = children[children.length - entries.length + index];
@@ -4848,110 +6066,6 @@ function layerTypeOf(object) {
   return "shape";
 }
 
-// src/gradient.ts
-var import_fabric21 = require("fabric");
-var DEFAULT_GRADIENT_CONFIG = {
-  kind: "linear",
-  angle: 90,
-  center: { x: 0.5, y: 0.5 },
-  radius: 0.5,
-  stops: [
-    { color: "#ffffff", opacity: 1, position: 0 },
-    { color: "#000000", opacity: 1, position: 1 }
-  ]
-};
-var MIN_RADIUS = 1e-3;
-var MAX_GRADIENT_STOPS = 256;
-var FALLBACK_STOP_COLOR = DEFAULT_GRADIENT_CONFIG.stops[0].color;
-function linearCoords(angle, box) {
-  const radians = angle * Math.PI / 180;
-  const sin = Math.sin(radians);
-  const cos = Math.cos(radians);
-  const vx = box.width * sin;
-  const vy = -box.height * cos;
-  const length = Math.abs(box.width * sin) + Math.abs(box.height * cos);
-  const scale = length / (vx * vx + vy * vy || 1);
-  return {
-    x1: 0.5 - scale * vx / 2,
-    y1: 0.5 - scale * vy / 2,
-    x2: 0.5 + scale * vx / 2,
-    y2: 0.5 + scale * vy / 2
-  };
-}
-function angleFromCoords(coords, box) {
-  const dx = (coords.x2 - coords.x1) / (box.width || 1);
-  const dy = (coords.y2 - coords.y1) / (box.height || 1);
-  const degrees = Math.atan2(dx, -dy) * 180 / Math.PI;
-  return (degrees + 360) % 360;
-}
-function stopColor(stop) {
-  const source = isCssColor(stop.color) ? stop.color : FALLBACK_STOP_COLOR;
-  const color = new import_fabric21.Color(source);
-  const opacity = Number.isFinite(stop.opacity) ? stop.opacity : 1;
-  color.setAlpha(clamp(opacity, 0, 1));
-  return color.toRgba();
-}
-function toFabricGradient(config, box) {
-  const colorStops = [...config.stops].sort((a, b) => a.position - b.position).slice(0, MAX_GRADIENT_STOPS).map((stop) => {
-    const position = Number.isFinite(stop.position) ? stop.position : 0;
-    return { offset: clamp(position, 0, 1), color: stopColor(stop) };
-  });
-  if (config.kind === "radial") {
-    const radius = Math.max(MIN_RADIUS, config.radius);
-    return new import_fabric21.Gradient({
-      type: "radial",
-      gradientUnits: "percentage",
-      coords: {
-        x1: config.center.x,
-        y1: config.center.y,
-        r1: 0,
-        x2: config.center.x,
-        y2: config.center.y,
-        r2: radius
-      },
-      colorStops
-    });
-  }
-  return new import_fabric21.Gradient({
-    type: "linear",
-    gradientUnits: "percentage",
-    coords: linearCoords(config.angle, box),
-    colorStops
-  });
-}
-function readGradientConfig(object) {
-  const fill = object.fill;
-  if (!fill || typeof fill === "string" || !(fill instanceof import_fabric21.Gradient)) return null;
-  const stops = fill.colorStops.map((stop) => {
-    const source = isCssColor(stop.color) ? stop.color : FALLBACK_STOP_COLOR;
-    const color = new import_fabric21.Color(source);
-    const offset = Number.isFinite(stop.offset) ? stop.offset : 0;
-    return {
-      color: `#${color.toHex().toLowerCase()}`,
-      opacity: color.getAlpha(),
-      position: clamp(offset, 0, 1)
-    };
-  });
-  if (fill.type === "radial") {
-    const { x1, y1, r2 } = fill.coords;
-    return {
-      kind: "radial",
-      angle: DEFAULT_GRADIENT_CONFIG.angle,
-      center: { x: x1, y: y1 },
-      radius: r2,
-      stops
-    };
-  }
-  const box = { width: object.width || 1, height: object.height || 1 };
-  return {
-    kind: "linear",
-    angle: angleFromCoords(fill.coords, box),
-    center: { ...DEFAULT_GRADIENT_CONFIG.center },
-    radius: DEFAULT_GRADIENT_CONFIG.radius,
-    stops
-  };
-}
-
 // src/editor.ts
 var MIN_ZOOM = 0.01;
 var MAX_ZOOM = 8;
@@ -4967,11 +6081,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;
@@ -4981,6 +6101,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.
@@ -4988,6 +6110,7 @@ var CanvasEditor = class {
   designBackgroundImage = null;
   backgroundImageOptions = null;
   constructor(canvasElement, config) {
+    (0, import_canvas_editor_effects2.registerEffects)(fabricModule);
     this.events = new EventEmitter();
     this.fonts = new FontRegistry();
     config.fonts?.forEach((font) => this.fonts.register(font));
@@ -4996,7 +6119,7 @@ var CanvasEditor = class {
     const widthPx = this.units.toPixels(config.width);
     const heightPx = this.units.toPixels(config.height);
     this.designBackground = config.backgroundColor ?? "#ffffff";
-    this.canvas = new import_fabric22.Canvas(canvasElement, {
+    this.canvas = new import_fabric25.Canvas(canvasElement, {
       width: widthPx,
       height: heightPx,
       backgroundColor: this.designBackground,
@@ -5022,6 +6145,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();
@@ -5031,7 +6163,7 @@ var CanvasEditor = class {
   // ─── Layer Operations ────────────────────────────────
   async addImage(url, options) {
     try {
-      const img = await import_fabric22.FabricImage.fromURL(
+      const img = await import_fabric25.FabricImage.fromURL(
         url,
         {},
         { originX: "left", originY: "top", ...options }
@@ -5046,7 +6178,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}`);
@@ -5057,7 +6189,11 @@ var CanvasEditor = class {
     if (this.crop.activeLayerId() === layerId) this.crop.cancel();
     const previous = layer.fabricObject;
     try {
-      const replacement = await import_fabric22.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
+      const replacement = await import_fabric25.FabricImage.fromURL(
+        url,
+        { crossOrigin: options.crossOrigin },
+        { originX: "left", originY: "top" }
+      );
       replacement.set({
         left: previous.left,
         top: previous.top,
@@ -5079,14 +6215,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 import_fabric25.classRegistry.getClass(name) ?? fallback;
+  }
   addText(text, options) {
-    const textbox = new import_fabric22.Textbox(text, {
+    const TextboxClass = this.registered("Textbox", import_fabric25.Textbox);
+    const textbox = new TextboxClass(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
@@ -5104,6 +6254,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;
@@ -5115,7 +6274,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 import_fabric22.Rect({
+    const RectClass = this.registered("Rect", import_fabric25.Rect);
+    const object = new RectClass({
       left: box?.left ?? 0,
       top: box?.top ?? 0,
       originX: "left",
@@ -5244,6 +6404,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);
@@ -5268,24 +6471,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 import_fabric22.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
-      new import_fabric22.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
-      new import_fabric22.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
-      new import_fabric22.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 = import_fabric25.util.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
@@ -5320,7 +6518,7 @@ var CanvasEditor = class {
           this.layers.detach(layer.id);
         }
       }
-      const group = new import_fabric22.Group(objects);
+      const group = new import_fabric25.Group(objects);
       const grouped = this.layers.add("group", group, name);
       this.layers.adoptChildren(grouped, children);
       this.layers.reorder(grouped.id, insertIndex);
@@ -5354,6 +6552,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 });
@@ -5382,7 +6581,7 @@ var CanvasEditor = class {
     const layer = this.layers.get(id);
     if (!layer) throw new Error(`Layer not found: ${id}`);
     try {
-      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric22.FabricImage) {
+      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric25.FabricImage) {
         const image = await layer.fabricObject.clone();
         image.set({
           left: 0,
@@ -5430,7 +6629,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}`);
@@ -5468,7 +6669,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
@@ -5492,7 +6695,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) {
@@ -5634,10 +6839,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();
@@ -5658,7 +6863,7 @@ var CanvasEditor = class {
       return;
     }
     try {
-      const image = await import_fabric22.FabricImage.fromURL(
+      const image = await import_fabric25.FabricImage.fromURL(
         url,
         { crossOrigin: options.crossOrigin ?? null, signal: options.signal },
         { originX: "left", originY: "top" }
@@ -5944,9 +7149,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();
@@ -5980,12 +7187,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 import_fabric25.ActiveSelection) return;
+      const layer = this.layers.findByObject(target);
+      if (!layer || layer.locked || layer.renderProxy) return;
+      this.altDrag = { layerId: layer.id, transform: import_fabric25.util.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) => {
@@ -6074,6 +7295,8 @@ var AnnotationOverlay = class {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ADJUST_KEYS,
+  ADJUST_RANGES,
   AnnotationOverlay,
   BLEND_GROUPS,
   BLEND_MODES,
@@ -6089,7 +7312,12 @@ var AnnotationOverlay = class {
   EventEmitter,
   FontRegistry,
   HistoryManager,
+  IMAGE_FILTER_PRESETS,
+  IMAGE_PROXY_MAX_EDGE,
+  ImageEffectsManager,
+  LAYER_EFFECT_DEFAULTS,
   Layer,
+  LayerEffectsManager,
   LayerManager,
   LayerMaskManager,
   LicenseManager,
@@ -6097,10 +7325,12 @@ var AnnotationOverlay = class {
   MaskController,
   MaskPresetManager,
   MaskRefinementError,
+  NEUTRAL_ADJUST,
   PatternManager,
   ProjectManager,
   SHAPE_MASK_BOX,
   SHAPE_MASK_IDS,
+  ShapeManager,
   SnapManager,
   TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE,
@@ -6108,6 +7338,8 @@ var AnnotationOverlay = class {
   TextWrapManager,
   TiledPatternObject,
   UnitConverter,
+  alignObjects,
+  alphaClipMatrix,
   angleFromCoords,
   applyAspectLock,
   applyLayerShadow,
@@ -6120,6 +7352,8 @@ var AnnotationOverlay = class {
   buildCurveLinePaths,
   buildCurvePathData,
   clamp,
+  clampAdjust,
+  clampAlphaClip,
   clearTextureMaskCache,
   composeMaskGroup,
   computeCoverPlacement,
@@ -6127,6 +7361,7 @@ var AnnotationOverlay = class {
   computeTilePositions,
   deserializeEditor,
   displaceRgba,
+  distributeObjects,
   drawTiles,
   escapeXml,
   explodeTemplateSvg,
@@ -6138,12 +7373,15 @@ var AnnotationOverlay = class {
   fitTextWidth,
   fitToBox,
   generateId,
+  imageEffectsFilterSpecs,
+  imageFilterPreset,
   isCssColor,
   isMaskPresetId,
   isShapeMaskId,
   isTextureMaskId,
   linearCoords,
   needsAbsoluteSpace,
+  normalizeImageEffects,
   normalizeTextCurve,
   preWrapWordSplit,
   readGradientConfig,
@@ -6151,6 +7389,7 @@ var AnnotationOverlay = class {
   readTextWrap,
   renderTextureMask,
   resetTransform,
+  resolveShapeParams,
   restoreLocks,
   round2,
   sanitizeSvg,
@@ -6161,6 +7400,7 @@ var AnnotationOverlay = class {
   toCanvasSpace,
   toFabricGradient,
   toHostSpace,
+  unionBox,
   unwrapGroup
 });
 //# sourceMappingURL=index.js.map