@overtone-art/canvas-editor-core 0.6.3 → 0.7.0

package/dist/index.js

@@ -47,12 +47,14 @@ __export(index_exports, {
   TEXTURE_MASK_IDS: () => TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE: () => TEXTURE_MASK_SIZE,
   TextCurveManager: () => TextCurveManager,
+  TextWrapManager: () => TextWrapManager,
   TiledPatternObject: () => TiledPatternObject,
   UnitConverter: () => UnitConverter,
   applyAspectLock: () => applyAspectLock,
   applyLayerShadow: () => applyLayerShadow,
   applyObjectSelectionStyle: () => applyObjectSelectionStyle,
   applySelectionStyle: () => applySelectionStyle,
+  applyTextWrapToObject: () => applyTextWrapToObject,
   buildCurveLinePaths: () => buildCurveLinePaths,
   buildCurvePathData: () => buildCurvePathData,
   clamp: () => clamp,
@@ -80,7 +82,9 @@ __export(index_exports, {
   isTextureMaskId: () => isTextureMaskId,
   needsAbsoluteSpace: () => needsAbsoluteSpace,
   normalizeTextCurve: () => normalizeTextCurve,
+  preWrapWordSplit: () => preWrapWordSplit,
   readLayerShadow: () => readLayerShadow,
+  readTextWrap: () => readTextWrap,
   renderTextureMask: () => renderTextureMask,
   resetTransform: () => resetTransform,
   restoreLocks: () => restoreLocks,
@@ -97,7 +101,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/editor.ts
-var import_fabric20 = require("fabric");
+var import_fabric21 = require("fabric");
 
 // src/events.ts
 var EventEmitter = class {
@@ -1235,6 +1239,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 +1269,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
@@ -1961,7 +2016,11 @@ function normalizeTextCurve(config) {
     shape: config.shape ?? inferred,
     arc,
     wave,
-    waveLength: clamp(config.waveLength ?? DEFAULT_TEXT_CURVE.waveLength, MIN_WAVE_LENGTH, MAX_WAVE_LENGTH),
+    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)
   };
@@ -2335,8 +2394,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 = [
@@ -2569,6 +2888,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;
@@ -2603,13 +2923,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
@@ -2618,7 +2938,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;
@@ -2656,7 +2976,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,
@@ -2770,7 +3090,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 {
@@ -2806,7 +3126,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:")) {
@@ -2817,7 +3137,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:")) {
@@ -2843,6 +3163,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) {
@@ -2869,7 +3190,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 = {
@@ -2963,7 +3284,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
@@ -2993,7 +3314,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);
@@ -3433,7 +3754,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);
@@ -3465,7 +3786,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",
@@ -3691,10 +4012,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",
@@ -3704,7 +4025,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),
@@ -3731,7 +4052,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.
@@ -3745,76 +4066,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;
@@ -3895,8 +4147,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)
       )
     );
@@ -3907,15 +4159,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(),
@@ -3964,9 +4216,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);
@@ -4046,6 +4298,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.
    *
@@ -4058,7 +4328,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;
@@ -4158,7 +4434,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];
@@ -4339,6 +4615,9 @@ var LayerMaskManager = class extends MaskStackStore {
     if (resolved === layerId) return null;
     const object = layer.fabricObject;
     if (!object.fill && object.type !== "image") object.set({ fill: "#000000" });
+    const stackHost = this.host(resolved);
+    const absolute = resolved === CANVAS_MASK_TARGET || needsAbsoluteSpace(this.list(resolved));
+    if (!absolute && stackHost) toHostSpace(object, stackHost);
     this.history.beginTransaction();
     try {
       if (this.canvas.getActiveObject() === object) this.canvas.discardActiveObject();
@@ -4386,6 +4665,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(),
@@ -4438,6 +4718,7 @@ var CanvasEditor = class {
   crop;
   patterns;
   curves;
+  wrap;
   maskPresets;
   /** Stacked boolean masks, per layer and for the design as a whole. */
   layerMasks;
@@ -4465,7 +4746,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_fabric21.Canvas(canvasElement, {
       width: widthPx,
       height: heightPx,
       backgroundColor: this.designBackground,
@@ -4488,6 +4769,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();
@@ -4499,7 +4781,7 @@ var CanvasEditor = class {
   // ─── Layer Operations ────────────────────────────────
   async addImage(url, options) {
     try {
-      const img = await import_fabric20.FabricImage.fromURL(
+      const img = await import_fabric21.FabricImage.fromURL(
         url,
         {},
         { originX: "left", originY: "top", ...options }
@@ -4525,7 +4807,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_fabric21.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
       replacement.set({
         left: previous.left,
         top: previous.top,
@@ -4554,7 +4836,7 @@ var CanvasEditor = class {
     }
   }
   addText(text, options) {
-    const textbox = new import_fabric20.Textbox(text, {
+    const textbox = new import_fabric21.Textbox(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
@@ -4685,10 +4967,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_fabric21.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
+      new import_fabric21.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
+      new import_fabric21.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
+      new import_fabric21.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
     ];
     layer.meta.imageAdjustments = next;
     image.applyFilters();
@@ -4729,7 +5011,7 @@ var CanvasEditor = class {
           this.layers.detach(layer.id);
         }
       }
-      const group = new import_fabric20.Group(objects);
+      const group = new import_fabric21.Group(objects);
       const grouped = this.layers.add("group", group, name);
       this.layers.adoptChildren(grouped, children);
       this.layers.reorder(grouped.id, insertIndex);
@@ -4791,7 +5073,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_fabric21.FabricImage) {
         const image = await layer.fabricObject.clone();
         image.set({
           left: 0,
@@ -5067,7 +5349,7 @@ var CanvasEditor = class {
       return;
     }
     try {
-      const image = await import_fabric20.FabricImage.fromURL(
+      const image = await import_fabric21.FabricImage.fromURL(
         url,
         { crossOrigin: options.crossOrigin ?? null, signal: options.signal },
         { originX: "left", originY: "top" }
@@ -5244,15 +5526,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);
   }
@@ -5341,6 +5642,7 @@ var CanvasEditor = class {
     this.history.dispose();
     this.patterns.dispose();
     this.curves.dispose();
+    this.wrap.dispose();
     this.events.removeAllListeners();
     this.canvas.dispose();
   }
@@ -5490,12 +5792,14 @@ var AnnotationOverlay = class {
   TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE,
   TextCurveManager,
+  TextWrapManager,
   TiledPatternObject,
   UnitConverter,
   applyAspectLock,
   applyLayerShadow,
   applyObjectSelectionStyle,
   applySelectionStyle,
+  applyTextWrapToObject,
   buildCurveLinePaths,
   buildCurvePathData,
   clamp,
@@ -5523,7 +5827,9 @@ var AnnotationOverlay = class {
   isTextureMaskId,
   needsAbsoluteSpace,
   normalizeTextCurve,
+  preWrapWordSplit,
   readLayerShadow,
+  readTextWrap,
   renderTextureMask,
   resetTransform,
   restoreLocks,