@overtone-art/canvas-editor-core 0.6.4 → 0.8.0

package/dist/index.js

@@ -21,10 +21,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AnnotationOverlay: () => AnnotationOverlay,
+  BLEND_GROUPS: () => BLEND_GROUPS,
+  BLEND_MODES: () => BLEND_MODES,
   CANVAS_MASK_TARGET: () => CANVAS_MASK_TARGET,
   CANVAS_SIZE_PRESETS: () => CANVAS_SIZE_PRESETS,
   CanvasEditor: () => CanvasEditor,
   CropController: () => CropController,
+  DEFAULT_GRADIENT_CONFIG: () => DEFAULT_GRADIENT_CONFIG,
   DEFAULT_LAYER_SHADOW: () => DEFAULT_LAYER_SHADOW,
   DEFAULT_PATTERN_CONFIG: () => DEFAULT_PATTERN_CONFIG,
   DEFAULT_SELECTION_STYLE: () => DEFAULT_SELECTION_STYLE,
@@ -47,12 +50,18 @@ __export(index_exports, {
   TEXTURE_MASK_IDS: () => TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE: () => TEXTURE_MASK_SIZE,
   TextCurveManager: () => TextCurveManager,
+  TextWrapManager: () => TextWrapManager,
   TiledPatternObject: () => TiledPatternObject,
   UnitConverter: () => UnitConverter,
+  angleFromCoords: () => angleFromCoords,
   applyAspectLock: () => applyAspectLock,
   applyLayerShadow: () => applyLayerShadow,
   applyObjectSelectionStyle: () => applyObjectSelectionStyle,
   applySelectionStyle: () => applySelectionStyle,
+  applyTextWrapToObject: () => applyTextWrapToObject,
+  blendModeLabel: () => blendModeLabel,
+  blendModeOf: () => blendModeOf,
+  blendOperation: () => blendOperation,
   buildCurveLinePaths: () => buildCurveLinePaths,
   buildCurvePathData: () => buildCurvePathData,
   clamp: () => clamp,
@@ -78,9 +87,13 @@ __export(index_exports, {
   isMaskPresetId: () => isMaskPresetId,
   isShapeMaskId: () => isShapeMaskId,
   isTextureMaskId: () => isTextureMaskId,
+  linearCoords: () => linearCoords,
   needsAbsoluteSpace: () => needsAbsoluteSpace,
   normalizeTextCurve: () => normalizeTextCurve,
+  preWrapWordSplit: () => preWrapWordSplit,
+  readGradientConfig: () => readGradientConfig,
   readLayerShadow: () => readLayerShadow,
+  readTextWrap: () => readTextWrap,
   renderTextureMask: () => renderTextureMask,
   resetTransform: () => resetTransform,
   restoreLocks: () => restoreLocks,
@@ -91,13 +104,14 @@ __export(index_exports, {
   textPathCurve: () => textPathCurve,
   textPathSpec: () => textPathSpec,
   toCanvasSpace: () => toCanvasSpace,
+  toFabricGradient: () => toFabricGradient,
   toHostSpace: () => toHostSpace,
   unwrapGroup: () => unwrapGroup
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/editor.ts
-var import_fabric20 = require("fabric");
+var import_fabric22 = require("fabric");
 
 // src/events.ts
 var EventEmitter = class {
@@ -141,6 +155,53 @@ var import_fabric = require("fabric");
 var import_nanoid = require("nanoid");
 var generateId = () => (0, import_nanoid.nanoid)(12);
 
+// src/blend.ts
+var BLEND_MODES = [
+  "normal",
+  "darken",
+  "multiply",
+  "color-burn",
+  "lighten",
+  "screen",
+  "color-dodge",
+  "linear-dodge",
+  "overlay",
+  "soft-light",
+  "hard-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity"
+];
+var OPERATION_EXCEPTIONS = {
+  normal: "source-over",
+  "linear-dodge": "lighter"
+};
+function blendOperation(mode) {
+  return OPERATION_EXCEPTIONS[mode] ?? mode;
+}
+function blendModeOf(operation) {
+  if (!operation) return "normal";
+  for (const mode of BLEND_MODES) {
+    if (blendOperation(mode) === operation) return mode;
+  }
+  return "normal";
+}
+var BLEND_GROUPS = [
+  { label: "Normal", modes: ["normal"] },
+  { label: "Darken", modes: ["darken", "multiply", "color-burn"] },
+  { label: "Lighten", modes: ["lighten", "screen", "color-dodge", "linear-dodge"] },
+  { label: "Contrast", modes: ["overlay", "soft-light", "hard-light"] },
+  { label: "Comparative", modes: ["difference", "exclusion"] },
+  { label: "Composite", modes: ["hue", "saturation", "color", "luminosity"] }
+];
+function blendModeLabel(mode) {
+  if (mode === "linear-dodge") return "Linear Dodge (Add)";
+  return mode.split("-").map((word) => (word[0] ?? "").toUpperCase() + word.slice(1)).join(" ");
+}
+
 // src/layer.ts
 var Layer = class {
   id;
@@ -184,6 +245,7 @@ var Layer = class {
     return Object.keys(this.meta).length > 0;
   }
   toData() {
+    const blend = blendModeOf(this.fabricObject.globalCompositeOperation);
     return {
       id: this.id,
       type: this.type,
@@ -191,6 +253,7 @@ var Layer = class {
       visible: this.visible,
       locked: this.locked,
       opacity: this.opacity,
+      ...blend !== "normal" ? { blend } : {},
       ...this.hasMeta() ? { meta: this.meta } : {},
       ...this.children.length > 0 ? { children: this.children.map((c) => c.toData()) } : {}
     };
@@ -352,7 +415,11 @@ var LayerManager = class {
       visible: layer.visible,
       opacity: layer.opacity,
       selectable: !layer.locked,
-      evented: !layer.locked
+      evented: !layer.locked,
+      // Compositing lives only on the fabric object (see `blendModeOf`); carry
+      // it from the object being replaced or a blend set before this call
+      // silently reverts to normal.
+      globalCompositeOperation: previous.globalCompositeOperation
     });
     this.canvas.insertAt(Math.max(0, stackIndex), fabricObject);
     if (layer.renderProxy) {
@@ -382,7 +449,12 @@ var LayerManager = class {
         visible: layer.visible,
         opacity: layer.opacity,
         selectable: !layer.locked,
-        evented: !layer.locked
+        evented: !layer.locked,
+        // The proxy is what actually draws once a layer has one (see
+        // `LayerManager`'s class doc); a blend set before the proxy existed
+        // must not silently stop applying. Read off the layer's own object —
+        // that stays the single source of truth (see `blendModeOf`).
+        globalCompositeOperation: layer.fabricObject.globalCompositeOperation
       });
       this.canvas.add(proxy);
       this.syncZOrder();
@@ -1235,6 +1307,9 @@ var import_fabric5 = require("fabric");
 var import_fabric4 = require("fabric");
 var TEXT_FIT_SLACK = 0.5;
 var MEASURE_WIDTH = 1e5;
+var GROWTH_FACTOR = 1.1;
+var GROWTH_TRIES = 8;
+var SEARCH_TRIES = 24;
 function unwrappedWidth(text) {
   const authored = text.width;
   try {
@@ -1262,26 +1337,74 @@ function textInk(text) {
   const flip = text.flipX ? -1 : 1;
   return { width, dx: flip * (align.includes("right") ? slack : -slack) };
 }
+function wrapsAt(text, width) {
+  text.set({ width });
+  text.initDimensions?.();
+  const authored = text.text.split("\n").length;
+  return (text._textLines?.length ?? 0) > authored;
+}
+function widenPastSoftWrap(text, fitted) {
+  if (!wrapsAt(text, fitted)) return fitted;
+  let low = fitted;
+  let high = fitted;
+  let bracketed = false;
+  for (let tries = 0; tries < GROWTH_TRIES; tries += 1) {
+    low = high;
+    high = high * GROWTH_FACTOR + 1;
+    if (!wrapsAt(text, high)) {
+      bracketed = true;
+      break;
+    }
+  }
+  if (!bracketed) return high;
+  for (let tries = 0; tries < SEARCH_TRIES && high - low > TEXT_FIT_SLACK; tries += 1) {
+    const mid = (low + high) / 2;
+    if (wrapsAt(text, mid)) low = mid;
+    else high = mid;
+  }
+  if (text.width !== high) wrapsAt(text, high);
+  return high;
+}
+function restoreWidth(text, width) {
+  try {
+    text.set({ width });
+    text.initDimensions?.();
+  } catch {
+  }
+}
+function isSettled(text, width) {
+  if (wrapsAt(text, width)) return false;
+  const tight = wrapsAt(text, width - TEXT_FIT_SLACK);
+  wrapsAt(text, width);
+  return tight;
+}
 function fitTextWidth(object) {
   const text = asText(object);
   if (!text || text.path) return false;
-  const before = textInk(text);
-  const fitted = unwrappedWidth(text) + TEXT_FIT_SLACK;
-  if (Math.abs(fitted - text.width) < TEXT_FIT_SLACK) return false;
-  const centre = text.getCenterPoint();
-  text.set({ width: fitted });
-  text.initDimensions?.();
-  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(
-    centre.x + shift * Math.cos(radians),
-    centre.y + shift * Math.sin(radians)
-  );
-  text.setPositionByOrigin(moved, "center", "center");
-  text.setCoords();
-  text.dirty = true;
-  return true;
+  const authored = text.width;
+  try {
+    const before = textInk(text);
+    const fitted = unwrappedWidth(text) + TEXT_FIT_SLACK;
+    if (Math.abs(fitted - authored) < TEXT_FIT_SLACK) return false;
+    const nearFit = authored > fitted && authored <= fitted * GROWTH_FACTOR + 1;
+    if (nearFit && isSettled(text, authored)) return false;
+    const centre = text.getCenterPoint();
+    const settled = widenPastSoftWrap(text, fitted);
+    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(
+      centre.x + shift * Math.cos(radians),
+      centre.y + shift * Math.sin(radians)
+    );
+    text.setPositionByOrigin(moved, "center", "center");
+    text.setCoords();
+    text.dirty = true;
+    return Math.abs(settled - authored) >= TEXT_FIT_SLACK;
+  } catch (error) {
+    restoreWidth(text, authored);
+    throw error;
+  }
 }
 
 // src/pattern/tile-geometry.ts
@@ -2339,8 +2462,268 @@ var TextCurveManager = class {
   }
 };
 
-// src/mask-presets/manager.ts
+// src/text-wrap.ts
+var import_fabric9 = require("fabric");
+
+// src/text-wrap-split.ts
+var WHITESPACE = /[ \t\r]/;
+function preWrapWordSplit(value) {
+  const tokens = [];
+  let index = 0;
+  let first = true;
+  while (index < value.length) {
+    let space = "";
+    while (index < value.length && WHITESPACE.test(value[index])) {
+      space += value[index];
+      index += 1;
+    }
+    let word = "";
+    while (index < value.length && !WHITESPACE.test(value[index])) {
+      word += value[index];
+      index += 1;
+    }
+    tokens.push((first ? space : space.slice(1)) + word);
+    first = false;
+  }
+  return tokens.length > 0 ? tokens : [""];
+}
+
+// src/masks/space.ts
 var import_fabric8 = require("fabric");
+function matrixOf(object) {
+  return object.calcTransformMatrix();
+}
+function applyMatrix(object, matrix) {
+  const decomposed = import_fabric8.util.qrDecompose(matrix);
+  object.set({
+    flipX: false,
+    flipY: false,
+    originX: "center",
+    originY: "center",
+    left: decomposed.translateX,
+    top: decomposed.translateY,
+    scaleX: decomposed.scaleX,
+    scaleY: decomposed.scaleY,
+    angle: decomposed.angle,
+    skewX: decomposed.skewX,
+    skewY: 0
+  });
+  object.setCoords();
+}
+function toCanvasSpace(object, host) {
+  applyMatrix(object, import_fabric8.util.multiplyTransformMatrices(matrixOf(host), matrixOf(object)));
+}
+function toHostSpace(object, host) {
+  applyMatrix(
+    object,
+    import_fabric8.util.multiplyTransformMatrices(import_fabric8.util.invertTransform(matrixOf(host)), matrixOf(object))
+  );
+}
+function relativeMatrix(object, host) {
+  return import_fabric8.util.multiplyTransformMatrices(import_fabric8.util.invertTransform(matrixOf(host)), matrixOf(object));
+}
+function applyRelativeMatrix(object, host, rel) {
+  applyMatrix(object, import_fabric8.util.multiplyTransformMatrices(matrixOf(host), rel));
+}
+function asObject(clip) {
+  return clip;
+}
+function toMatrix(values) {
+  if (!values || values.length !== 6 || values.some((value) => !Number.isFinite(value)))
+    return null;
+  return [values[0], values[1], values[2], values[3], values[4], values[5]];
+}
+function fitToBox(object, box, zoom = 1) {
+  const width = Math.max(1, box.width) * zoom;
+  const height = Math.max(1, box.height) * zoom;
+  object.set({
+    originX: "center",
+    originY: "center",
+    angle: 0,
+    skewX: 0,
+    skewY: 0,
+    left: box.left + box.width / 2,
+    top: box.top + box.height / 2,
+    scaleX: width / Math.max(1, object.width ?? 1),
+    scaleY: height / Math.max(1, object.height ?? 1)
+  });
+  object.setCoords();
+}
+function unwrapGroup(group) {
+  const children = group.removeAll();
+  for (const child of children) child.setCoords();
+  return children;
+}
+
+// src/text-wrap.ts
+function patchWordSplit(text) {
+  if (Object.prototype.hasOwnProperty.call(text, "wordSplit")) return;
+  Object.defineProperty(text, "wordSplit", {
+    value: preWrapWordSplit,
+    configurable: true,
+    writable: true
+  });
+}
+function unpatchWordSplit(text) {
+  if (Object.prototype.hasOwnProperty.call(text, "wordSplit")) {
+    delete text.wordSplit;
+  }
+}
+function readTextWrap(meta) {
+  return { wrap: meta?.wrap ?? "none", overflow: meta?.overflow ?? "visible" };
+}
+function boxClip(text, makeRect) {
+  return makeRect({
+    width: Math.max(1, text.width ?? 1),
+    height: Math.max(1, text.height ?? 1),
+    originX: "center",
+    originY: "center",
+    left: 0,
+    top: 0,
+    objectCaching: false
+  });
+}
+function hasMask(meta) {
+  return !!meta.maskPreset || (meta.maskStack?.length ?? 0) > 0;
+}
+function applyTextWrapToObject(object, meta, makeRect = (options) => new import_fabric9.Rect(options)) {
+  const text = asText(object);
+  if (!text) return;
+  const state = readTextWrap(meta);
+  if (!text.path) {
+    text.set({ splitByGrapheme: state.wrap === "break-all" });
+    if (state.wrap === "pre-wrap") patchWordSplit(text);
+    else unpatchWordSplit(text);
+    text.initDimensions?.();
+  }
+  const clip = state.overflow === "hidden" ? boxClip(text, makeRect) : void 0;
+  if (meta && hasMask(meta)) {
+    const host = text.clipPath;
+    if (host) {
+      if (clip) toHostSpace(clip, asObject(host));
+      host.clipPath = clip;
+    }
+  } else {
+    text.clipPath = clip;
+  }
+}
+var TextWrapManager = 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.events.on("masks:changed", this.onMasksChanged);
+  }
+  canvas;
+  layers;
+  history;
+  events;
+  /**
+   * Typing changes the run the box was fitted to, so an auto-width layer has to
+   * re-fit. No history entry: fabric records the edit when editing exits, and a
+   * save per keystroke would bury every earlier step.
+   */
+  onTextChanged = (event) => {
+    const layer = event.target ? this.layers.findByObject(event.target) : void 0;
+    if (!layer) return;
+    this.refresh(layer.id, false);
+  };
+  /**
+   * Both mask owners — the preset manager and every mask-stack mutation —
+   * install their clip straight onto `clipPath`, dropping whatever was there,
+   * and neither knows this layer had a box clip. Re-deriving on the one event
+   * they both announce puts it back where it now belongs: nested under the new
+   * mask, or at the top level when the last mask leaves. Waiting for the next
+   * keystroke instead would leave a layer that should clip inside its box
+   * serialized unclipped — which is what the print renderer reads.
+   */
+  onMasksChanged = ({ target }) => {
+    this.refresh(target);
+  };
+  dispose() {
+    this.canvas.off("text:changed", this.onTextChanged);
+    this.events.off("masks:changed", this.onMasksChanged);
+  }
+  /** Both properties for a text layer, or null when it is not text. */
+  get(layerId) {
+    const layer = this.layers.get(layerId);
+    if (!layer || !asText(layer.fabricObject)) return null;
+    return readTextWrap(layer.meta);
+  }
+  apply(layerId, wrap, save = true) {
+    const layer = this.layers.get(layerId);
+    const text = layer ? asText(layer.fabricObject) : null;
+    if (!layer || !text) return false;
+    if (wrap === "none") {
+      const curved = !!text.path;
+      if (layer.meta.wrapWidth === void 0 && !curved) {
+        layer.meta.wrapWidth = text.width ?? 0;
+      }
+    }
+    layer.meta.wrap = wrap;
+    return this.derive(layerId, save);
+  }
+  setOverflow(layerId, overflow, save = true) {
+    const layer = this.layers.get(layerId);
+    if (!layer || !asText(layer.fabricObject)) return false;
+    layer.meta.overflow = overflow;
+    return this.derive(layerId, save);
+  }
+  /** Back to the defaults: auto-width, unclipped. */
+  clear(layerId, save = true) {
+    const layer = this.layers.get(layerId);
+    if (!layer || !asText(layer.fabricObject)) return false;
+    delete layer.meta.overflow;
+    return this.apply(layerId, "none", save);
+  }
+  /** Re-derive from the stored mode — after a text, font or size change. */
+  refresh(layerId, save = false) {
+    const layer = this.layers.get(layerId);
+    if (!layer || !asText(layer.fabricObject)) return false;
+    return this.derive(layerId, save);
+  }
+  /**
+   * Re-derive every text layer — used after a state restore.
+   *
+   * Recursive because a template inserts as a group of real child layers, and
+   * text inside one would otherwise keep whatever box it was restored with.
+   */
+  refreshAll() {
+    const visit = (layers) => {
+      for (const layer of layers) {
+        if (asText(layer.fabricObject)) this.refresh(layer.id);
+        if (layer.children.length > 0) visit(layer.children);
+      }
+    };
+    visit(this.layers.getAll());
+  }
+  derive(layerId, save) {
+    const layer = this.layers.get(layerId);
+    const text = layer ? asText(layer.fabricObject) : null;
+    if (!layer || !text) return false;
+    const state = readTextWrap(layer.meta);
+    if (!text.path) {
+      if (state.wrap === "none") {
+        fitTextWidth(text);
+      } else if (layer.meta.wrapWidth !== void 0) {
+        text.set({ width: layer.meta.wrapWidth });
+        delete layer.meta.wrapWidth;
+      }
+    }
+    applyTextWrapToObject(text, layer.meta);
+    text.dirty = true;
+    text.setCoords();
+    this.canvas.requestRenderAll();
+    this.events.emit("layer:modified", { layerId });
+    if (save) this.history.save();
+    return true;
+  }
+};
+
+// src/mask-presets/manager.ts
+var import_fabric10 = require("fabric");
 
 // src/mask-presets/shapes.ts
 var SHAPE_MASK_IDS = [
@@ -2573,6 +2956,7 @@ var MaskPresetManager = class {
     object.dirty = true;
     object.setCoords();
     this.canvas.requestRenderAll();
+    this.events.emit("masks:changed", { target: layerId });
     this.events.emit("layer:modified", { layerId });
     if (save) this.history.save();
     return true;
@@ -2607,13 +2991,13 @@ var MaskPresetManager = class {
       objectCaching: false
     };
     if (isShapeMaskId(id)) {
-      return new import_fabric8.Path(shapeMaskPathData(id), {
+      return new import_fabric10.Path(shapeMaskPathData(id), {
         ...shared,
         scaleX: width / SHAPE_MASK_BOX,
         scaleY: height / SHAPE_MASK_BOX
       });
     }
-    return new import_fabric8.FabricImage(renderTextureMask(id), {
+    return new import_fabric10.FabricImage(renderTextureMask(id), {
       ...shared,
       scaleX: width / TEXTURE_MASK_SIZE,
       scaleY: height / TEXTURE_MASK_SIZE
@@ -2622,7 +3006,7 @@ var MaskPresetManager = class {
 };
 
 // src/shadow.ts
-var import_fabric9 = require("fabric");
+var import_fabric11 = require("fabric");
 
 // src/utils/color.ts
 var CSS_COLOR = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\([\d.%+\-\s,/]+\)|[a-z]+)$/i;
@@ -2660,7 +3044,7 @@ function applyLayerShadow(object, config) {
   }
   const color = isCssColor(next.color) ? next.color : DEFAULT_LAYER_SHADOW.color;
   object.set({
-    shadow: new import_fabric9.Shadow({
+    shadow: new import_fabric11.Shadow({
       color,
       blur: Math.max(0, next.blur),
       offsetX: next.offsetX,
@@ -2774,7 +3158,7 @@ var UnitConverter = class {
 };
 
 // src/serialization.ts
-var import_fabric10 = require("fabric");
+var import_fabric12 = require("fabric");
 var VERSION = "2.0.0";
 function serializeEditor(editor) {
   return {
@@ -2810,7 +3194,7 @@ async function deserializeEditor(editor, state) {
   }
   const staged = await Promise.all(
     state.layers.map(async (serialized) => {
-      const fabricObject = (await import_fabric10.util.enlivenObjects([serialized.fabricObject]))[0];
+      const fabricObject = (await import_fabric12.util.enlivenObjects([serialized.fabricObject]))[0];
       if (!fabricObject) {
         const source = serialized.fabricObject.src;
         if (typeof source === "string" && source.startsWith("blob:")) {
@@ -2821,7 +3205,7 @@ async function deserializeEditor(editor, state) {
       return { serialized, fabricObject };
     })
   );
-  const stagedBackground = state.backgroundImage ? (await import_fabric10.util.enlivenObjects([state.backgroundImage]))[0] : null;
+  const stagedBackground = state.backgroundImage ? (await import_fabric12.util.enlivenObjects([state.backgroundImage]))[0] : null;
   if (state.backgroundImage && !stagedBackground) {
     const source = state.backgroundImage.src;
     if (typeof source === "string" && source.startsWith("blob:")) {
@@ -2847,6 +3231,7 @@ async function deserializeEditor(editor, state) {
   for (const item of staged) {
     restoreLayer(editor, item.serialized, item.fabricObject);
   }
+  editor.wrap.refreshAll();
   editor.canvas.requestRenderAll();
 }
 function restoreLayer(editor, serialized, fabricObject) {
@@ -2873,7 +3258,7 @@ function restoreLayer(editor, serialized, fabricObject) {
 }
 
 // src/export.ts
-var import_fabric11 = require("fabric");
+var import_fabric13 = require("fabric");
 
 // src/displacement.ts
 var CHANNEL_INDEX = {
@@ -2967,7 +3352,7 @@ async function exportPNG(canvas, options = {}) {
 }
 async function exportIsolatedPNG(source, objects, options = {}) {
   const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
-  const canvas = new import_fabric11.StaticCanvas(element, {
+  const canvas = new import_fabric13.StaticCanvas(element, {
     width: options.width ?? source.getWidth(),
     height: options.height ?? source.getHeight(),
     backgroundColor: options.backgroundColor || void 0
@@ -2997,7 +3382,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_fabric11.StaticCanvas(element, { width, height });
+  const canvas = new import_fabric13.StaticCanvas(element, { width, height });
   try {
     const clones = await Promise.all(source.getObjects().map((object) => object.clone()));
     if (clones.length) canvas.add(...clones);
@@ -3437,7 +3822,7 @@ var ProjectManager = class {
 };
 
 // src/mask.ts
-var import_fabric12 = require("fabric");
+var import_fabric14 = require("fabric");
 var MaskRefinementError = class extends Error {
   constructor(code, message, cause) {
     super(message);
@@ -3469,7 +3854,7 @@ var MaskController = class {
       throw new Error("Mask dimensions must be positive integers");
     }
     const backing = this.makeCanvas(width, height);
-    const image = new import_fabric12.FabricImage(backing, {
+    const image = new import_fabric14.FabricImage(backing, {
       left: 0,
       top: 0,
       originX: "left",
@@ -3695,10 +4080,10 @@ var MaskController = class {
 };
 
 // src/masks/manager.ts
-var import_fabric19 = require("fabric");
+var import_fabric20 = require("fabric");
 
 // src/masks/compose.ts
-var import_fabric13 = require("fabric");
+var import_fabric15 = require("fabric");
 var MODE_OPERATION = {
   add: "source-over",
   subtract: "destination-out",
@@ -3708,7 +4093,7 @@ function neutralize(child) {
   child.set({ opacity: 0, globalCompositeOperation: "source-over" });
 }
 function baseRect(box) {
-  return new import_fabric13.Rect({
+  return new import_fabric15.Rect({
     left: box.left,
     top: box.top,
     width: Math.max(1, box.width),
@@ -3735,7 +4120,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_fabric13.Group(withBase, {
+  return new import_fabric15.Group(withBase, {
     absolutePositioned: options.absolute,
     // Cached, so the children's compositing operations resolve against each
     // other instead of against the page underneath the mask.
@@ -3749,76 +4134,7 @@ function needsAbsoluteSpace(entries) {
 }
 
 // src/masks/edit.ts
-var import_fabric15 = require("fabric");
-
-// src/masks/space.ts
-var import_fabric14 = require("fabric");
-function matrixOf(object) {
-  return object.calcTransformMatrix();
-}
-function applyMatrix(object, matrix) {
-  const decomposed = import_fabric14.util.qrDecompose(matrix);
-  object.set({
-    flipX: false,
-    flipY: false,
-    originX: "center",
-    originY: "center",
-    left: decomposed.translateX,
-    top: decomposed.translateY,
-    scaleX: decomposed.scaleX,
-    scaleY: decomposed.scaleY,
-    angle: decomposed.angle,
-    skewX: decomposed.skewX,
-    skewY: 0
-  });
-  object.setCoords();
-}
-function toCanvasSpace(object, host) {
-  applyMatrix(object, import_fabric14.util.multiplyTransformMatrices(matrixOf(host), matrixOf(object)));
-}
-function toHostSpace(object, host) {
-  applyMatrix(
-    object,
-    import_fabric14.util.multiplyTransformMatrices(import_fabric14.util.invertTransform(matrixOf(host)), matrixOf(object))
-  );
-}
-function relativeMatrix(object, host) {
-  return import_fabric14.util.multiplyTransformMatrices(import_fabric14.util.invertTransform(matrixOf(host)), matrixOf(object));
-}
-function applyRelativeMatrix(object, host, rel) {
-  applyMatrix(object, import_fabric14.util.multiplyTransformMatrices(matrixOf(host), rel));
-}
-function asObject(clip) {
-  return clip;
-}
-function toMatrix(values) {
-  if (!values || values.length !== 6 || values.some((value) => !Number.isFinite(value)))
-    return null;
-  return [values[0], values[1], values[2], values[3], values[4], values[5]];
-}
-function fitToBox(object, box, zoom = 1) {
-  const width = Math.max(1, box.width) * zoom;
-  const height = Math.max(1, box.height) * zoom;
-  object.set({
-    originX: "center",
-    originY: "center",
-    angle: 0,
-    skewX: 0,
-    skewY: 0,
-    left: box.left + box.width / 2,
-    top: box.top + box.height / 2,
-    scaleX: width / Math.max(1, object.width ?? 1),
-    scaleY: height / Math.max(1, object.height ?? 1)
-  });
-  object.setCoords();
-}
-function unwrapGroup(group) {
-  const children = group.removeAll();
-  for (const child of children) child.setCoords();
-  return children;
-}
-
-// src/masks/edit.ts
+var import_fabric16 = require("fabric");
 var MaskEditController = class {
   constructor(canvas, onCommit) {
     this.canvas = canvas;
@@ -3899,8 +4215,8 @@ var MaskEditController = class {
     if (!this.handle || !this.child || !this.group) return;
     applyMatrix(
       this.child,
-      import_fabric15.util.multiplyTransformMatrices(
-        import_fabric15.util.invertTransform(matrixOf(this.group)),
+      import_fabric16.util.multiplyTransformMatrices(
+        import_fabric16.util.invertTransform(matrixOf(this.group)),
         matrixOf(this.handle)
       )
     );
@@ -3911,15 +4227,15 @@ var MaskEditController = class {
 };
 
 // src/masks/store.ts
-var import_fabric18 = require("fabric");
+var import_fabric19 = require("fabric");
 
 // src/masks/host.ts
-var import_fabric16 = require("fabric");
+var import_fabric17 = require("fabric");
 function findCanvasHost(layers) {
   return layers.getAll().find((layer) => layer.meta.canvasMask);
 }
 function createCanvasHost(canvas, layers) {
-  const rect = new import_fabric16.Rect({
+  const rect = new import_fabric17.Rect({
     left: 0,
     top: 0,
     width: canvas.getWidth(),
@@ -3968,9 +4284,9 @@ function hostBoxOf(canvas, host, absolute) {
 }
 
 // src/masks/install.ts
-var import_fabric17 = require("fabric");
+var import_fabric18 = require("fabric");
 function convertSpace(host, sources, absolute) {
-  const wasAbsolute = host.clipPath instanceof import_fabric17.Group ? host.clipPath.absolutePositioned : absolute;
+  const wasAbsolute = host.clipPath instanceof import_fabric18.Group ? host.clipPath.absolutePositioned : absolute;
   if (absolute === wasAbsolute) return;
   for (const source of sources) {
     if (absolute) toCanvasSpace(source, host);
@@ -4050,6 +4366,24 @@ var MaskStackStore = class {
       this.pinning = false;
     }
   }
+  /**
+   * Is the host's own `clipPath` the wrap manager's box clip rather than a mask?
+   *
+   * Adoption rescues a clip whose provenance is UNKNOWN — a mask preset, or a
+   * hand-set `clipPath` from before stacks existed — so the first add() cannot
+   * silently throw it away. A text layer's box clip is the opposite case: its
+   * provenance is known exactly (the wrap manager derives it from
+   * `meta.overflow` on every pass and re-installs it under whatever owns the
+   * property next), and it is not a mask. Adopted, it becomes a stack row the
+   * user never made whose 'add' union covers the whole box — swallowing the mask
+   * they actually added.
+   *
+   * Only meaningful with an empty stack: once there are entries the top-level
+   * clip is the composed group and the box clip is nested underneath it.
+   */
+  holdsBoxClip(meta) {
+    return meta?.overflow === "hidden" && !meta.maskPreset;
+  }
   /**
    * Take the current geometry back out of the composed clip, entry-aligned.
    *
@@ -4062,7 +4396,13 @@ var MaskStackStore = class {
     const clip = host.clipPath;
     if (!clip) return [];
     const entries = this.list(target);
-    if (entries.length === 0 || !(clip instanceof import_fabric18.Group)) return [asObject(clip)];
+    const meta = this.hostLayer(target)?.meta;
+    if (entries.length === 0 && this.holdsBoxClip(meta)) return [];
+    if (entries.length === 0 || !(clip instanceof import_fabric19.Group)) {
+      const source = asObject(clip);
+      if (meta?.overflow === "hidden") source.clipPath = void 0;
+      return [source];
+    }
     const children = unwrapGroup(clip);
     const extra = children.length - entries.length;
     return extra > 0 ? children.slice(extra) : children;
@@ -4162,7 +4502,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_fabric19.Group ? host.clipPath : null;
+    const group = host.clipPath instanceof import_fabric20.Group ? host.clipPath : null;
     if (!group) return false;
     const children = group.getObjects();
     const child = children[children.length - entries.length + index];
@@ -4393,6 +4733,7 @@ var LayerMaskManager = class extends MaskStackStore {
     const clip = layer?.fabricObject.clipPath;
     if (!layer || !clip || layer.meta.pattern) return null;
     if ((layer.meta.maskStack ?? []).length > 0) return null;
+    if (this.holdsBoxClip(layer.meta)) return null;
     const entry = {
       ...DEFAULT_ENTRY,
       id: generateId(),
@@ -4429,6 +4770,109 @@ var LayerMaskManager = class extends MaskStackStore {
   }
 };
 
+// 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 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).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.1;
 var MAX_ZOOM = 8;
@@ -4445,6 +4889,7 @@ var CanvasEditor = class {
   crop;
   patterns;
   curves;
+  wrap;
   maskPresets;
   /** Stacked boolean masks, per layer and for the design as a whole. */
   layerMasks;
@@ -4472,7 +4917,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_fabric20.Canvas(canvasElement, {
+    this.canvas = new import_fabric22.Canvas(canvasElement, {
       width: widthPx,
       height: heightPx,
       backgroundColor: this.designBackground,
@@ -4495,6 +4940,7 @@ var CanvasEditor = class {
     this.crop = new CropController(this.canvas, this.history, this.events);
     this.patterns = new PatternManager(this.canvas, this.layers, this.history, this.events);
     this.curves = new TextCurveManager(this.canvas, this.layers, this.history, this.events);
+    this.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.setupCanvasEvents();
@@ -4506,7 +4952,7 @@ var CanvasEditor = class {
   // ─── Layer Operations ────────────────────────────────
   async addImage(url, options) {
     try {
-      const img = await import_fabric20.FabricImage.fromURL(
+      const img = await import_fabric22.FabricImage.fromURL(
         url,
         {},
         { originX: "left", originY: "top", ...options }
@@ -4532,7 +4978,7 @@ var CanvasEditor = class {
     if (this.crop.activeLayerId() === layerId) this.crop.cancel();
     const previous = layer.fabricObject;
     try {
-      const replacement = await import_fabric20.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
+      const replacement = await import_fabric22.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
       replacement.set({
         left: previous.left,
         top: previous.top,
@@ -4561,7 +5007,7 @@ var CanvasEditor = class {
     }
   }
   addText(text, options) {
-    const textbox = new import_fabric20.Textbox(text, {
+    const textbox = new import_fabric22.Textbox(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
@@ -4583,6 +5029,65 @@ var CanvasEditor = class {
     this.history.save();
     return layer;
   }
+  /**
+   * Insert a gradient layer. It is an ordinary `Rect` with a gradient fill —
+   * which is exactly why the Node print compositor needs no code for it.
+   */
+  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({
+      left: box?.left ?? 0,
+      top: box?.top ?? 0,
+      originX: "left",
+      originY: "top",
+      width,
+      height,
+      // A gradient fill IS the artwork; an outline is not part of this
+      // layer's design, only its own gradient (unlike a plain shape, where a
+      // stroke is a legitimate look).
+      strokeWidth: 0,
+      fill: toFabricGradient(config, { width, height })
+    });
+    const layer = this.layers.add("gradient", object, "Gradient");
+    this.layers.select(layer.id);
+    this.history.save();
+    return layer;
+  }
+  /**
+   * Repaint a layer's gradient. `save: false` while a slider is being dragged —
+   * the settled value is the one worth an undo step.
+   */
+  setGradient(layerId, config, save = true) {
+    const layer = this.layers.get(layerId);
+    if (!layer) return;
+    const object = layer.fabricObject;
+    object.set({
+      fill: toFabricGradient(config, {
+        width: object.width || 1,
+        height: object.height || 1
+      })
+    });
+    object.dirty = true;
+    this.canvas.requestRenderAll();
+    this.events.emit("layer:modified", { layerId });
+    if (save) this.history.save();
+  }
+  /** Set a layer's blend mode. Applied to the render proxy too, like opacity. */
+  setBlend(layerId, mode) {
+    const layer = this.layers.get(layerId);
+    if (!layer) return;
+    const operation = blendOperation(mode);
+    layer.fabricObject.set({ globalCompositeOperation: operation });
+    layer.fabricObject.dirty = true;
+    if (layer.renderProxy) {
+      layer.renderProxy.set({ globalCompositeOperation: operation });
+      layer.renderProxy.dirty = true;
+    }
+    this.canvas.requestRenderAll();
+    this.events.emit("layer:modified", { layerId });
+    this.history.save();
+  }
   async addTemplate(template, params) {
     const values = {};
     for (const parameter of template.parameters) {
@@ -4692,10 +5197,10 @@ var CanvasEditor = class {
     const next = { ...previous, ...adjustments };
     const clampAdjustment = (value, min = -1) => clamp(value ?? 0, min, 1);
     image.filters = [
-      new import_fabric20.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
-      new import_fabric20.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
-      new import_fabric20.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
-      new import_fabric20.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
+      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();
@@ -4736,7 +5241,7 @@ var CanvasEditor = class {
           this.layers.detach(layer.id);
         }
       }
-      const group = new import_fabric20.Group(objects);
+      const group = new import_fabric22.Group(objects);
       const grouped = this.layers.add("group", group, name);
       this.layers.adoptChildren(grouped, children);
       this.layers.reorder(grouped.id, insertIndex);
@@ -4798,7 +5303,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_fabric20.FabricImage) {
+      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric22.FabricImage) {
         const image = await layer.fabricObject.clone();
         image.set({
           left: 0,
@@ -5074,7 +5579,7 @@ var CanvasEditor = class {
       return;
     }
     try {
-      const image = await import_fabric20.FabricImage.fromURL(
+      const image = await import_fabric22.FabricImage.fromURL(
         url,
         { crossOrigin: options.crossOrigin ?? null, signal: options.signal },
         { originX: "left", originY: "top" }
@@ -5251,15 +5756,34 @@ var CanvasEditor = class {
   }
   // ─── Text curve ─────────────────────────────────────
   applyTextCurve(layerId, config) {
-    return this.curves.apply(layerId, config);
+    const applied = this.curves.apply(layerId, config);
+    if (applied) this.wrap.refresh(layerId);
+    return applied;
   }
   clearTextCurve(layerId) {
-    return this.curves.clear(layerId);
+    const cleared = this.curves.clear(layerId);
+    if (cleared) this.wrap.refresh(layerId);
+    return cleared;
   }
   getTextCurve(layerId) {
     return this.curves.get(layerId);
   }
+  // ─── Text wrap ──────────────────────────────────────
+  applyTextWrap(layerId, wrap) {
+    return this.wrap.apply(layerId, wrap);
+  }
+  setTextOverflow(layerId, overflow) {
+    return this.wrap.setOverflow(layerId, overflow);
+  }
+  getTextWrap(layerId) {
+    return this.wrap.get(layerId);
+  }
   // ─── Mask presets ───────────────────────────────────
+  // A preset assigns `clipPath` wholesale, so a text layer clipping to its box
+  // loses that clip the moment a mask lands on it. Putting it back is NOT wired
+  // here: the preset manager announces `masks:changed` and the wrap manager
+  // re-derives from that, which covers this facade, the manager called directly,
+  // and `refreshAll()` on a restore — all with one mechanism.
   applyMaskPreset(layerId, id) {
     return this.maskPresets.apply(layerId, id);
   }
@@ -5348,6 +5872,7 @@ var CanvasEditor = class {
     this.history.dispose();
     this.patterns.dispose();
     this.curves.dispose();
+    this.wrap.dispose();
     this.events.removeAllListeners();
     this.canvas.dispose();
   }
@@ -5471,10 +5996,13 @@ var AnnotationOverlay = class {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnnotationOverlay,
+  BLEND_GROUPS,
+  BLEND_MODES,
   CANVAS_MASK_TARGET,
   CANVAS_SIZE_PRESETS,
   CanvasEditor,
   CropController,
+  DEFAULT_GRADIENT_CONFIG,
   DEFAULT_LAYER_SHADOW,
   DEFAULT_PATTERN_CONFIG,
   DEFAULT_SELECTION_STYLE,
@@ -5497,12 +6025,18 @@ var AnnotationOverlay = class {
   TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE,
   TextCurveManager,
+  TextWrapManager,
   TiledPatternObject,
   UnitConverter,
+  angleFromCoords,
   applyAspectLock,
   applyLayerShadow,
   applyObjectSelectionStyle,
   applySelectionStyle,
+  applyTextWrapToObject,
+  blendModeLabel,
+  blendModeOf,
+  blendOperation,
   buildCurveLinePaths,
   buildCurvePathData,
   clamp,
@@ -5528,9 +6062,13 @@ var AnnotationOverlay = class {
   isMaskPresetId,
   isShapeMaskId,
   isTextureMaskId,
+  linearCoords,
   needsAbsoluteSpace,
   normalizeTextCurve,
+  preWrapWordSplit,
+  readGradientConfig,
   readLayerShadow,
+  readTextWrap,
   renderTextureMask,
   resetTransform,
   restoreLocks,
@@ -5541,6 +6079,7 @@ var AnnotationOverlay = class {
   textPathCurve,
   textPathSpec,
   toCanvasSpace,
+  toFabricGradient,
   toHostSpace,
   unwrapGroup
 });