@overtone-art/canvas-editor-core 0.5.1 → 0.6.1

package/dist/index.js

@@ -53,6 +53,7 @@ __export(index_exports, {
   applyLayerShadow: () => applyLayerShadow,
   applyObjectSelectionStyle: () => applyObjectSelectionStyle,
   applySelectionStyle: () => applySelectionStyle,
+  buildCurveLinePaths: () => buildCurveLinePaths,
   buildCurvePathData: () => buildCurvePathData,
   clamp: () => clamp,
   clearTextureMaskCache: () => clearTextureMaskCache,
@@ -64,6 +65,7 @@ __export(index_exports, {
   displaceRgba: () => displaceRgba,
   drawTiles: () => drawTiles,
   escapeXml: () => escapeXml,
+  explodeTemplateSvg: () => explodeTemplateSvg,
   exportDataURL: () => exportDataURL,
   exportMockup: () => exportMockup,
   exportPNG: () => exportPNG,
@@ -76,6 +78,7 @@ __export(index_exports, {
   isShapeMaskId: () => isShapeMaskId,
   isTextureMaskId: () => isTextureMaskId,
   needsAbsoluteSpace: () => needsAbsoluteSpace,
+  normalizeTextCurve: () => normalizeTextCurve,
   readLayerShadow: () => readLayerShadow,
   renderTextureMask: () => renderTextureMask,
   resetTransform: () => resetTransform,
@@ -84,6 +87,8 @@ __export(index_exports, {
   sanitizeSvg: () => sanitizeSvg,
   serializeEditor: () => serializeEditor,
   shapeMaskPathData: () => shapeMaskPathData,
+  textPathCurve: () => textPathCurve,
+  textPathSpec: () => textPathSpec,
   toCanvasSpace: () => toCanvasSpace,
   toHostSpace: () => toHostSpace,
   unwrapGroup: () => unwrapGroup
@@ -91,7 +96,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/editor.ts
-var import_fabric17 = require("fabric");
+var import_fabric19 = require("fabric");
 
 // src/events.ts
 var EventEmitter = class {
@@ -128,6 +133,9 @@ var EventEmitter = class {
   }
 };
 
+// src/layer.ts
+var import_fabric = require("fabric");
+
 // src/utils/id.ts
 var import_nanoid = require("nanoid");
 var generateId = () => (0, import_nanoid.nanoid)(12);
@@ -149,6 +157,14 @@ var Layer = class {
    * the layer's real object stays the one every editor API talks to.
    */
   renderProxy;
+  /**
+   * Layers nested inside this one, in draw order. Only a `group` layer has any:
+   * their fabric objects live inside this layer's fabric `Group`, not on the
+   * canvas, which is why the manager keeps them off the canvas stack.
+   */
+  children;
+  /** Group this layer sits inside, or null when it is on the canvas stack. */
+  parentId;
   constructor(type, fabricObject, name, id) {
     this.id = id ?? generateId();
     this.type = type;
@@ -159,6 +175,8 @@ var Layer = class {
     this.meta = {};
     this.fabricObject = fabricObject;
     this.renderProxy = null;
+    this.children = [];
+    this.parentId = null;
     this.fabricObject._layerId = this.id;
   }
   hasMeta() {
@@ -172,12 +190,15 @@ var Layer = class {
       visible: this.visible,
       locked: this.locked,
       opacity: this.opacity,
-      ...this.hasMeta() ? { meta: this.meta } : {}
+      ...this.hasMeta() ? { meta: this.meta } : {},
+      ...this.children.length > 0 ? { children: this.children.map((c) => c.toData()) } : {}
     };
   }
   serialize() {
     return {
       ...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()
     };
   }
@@ -203,9 +224,23 @@ var LayerManager = class {
     return layer;
   }
   remove(id) {
+    const layer = this.get(id);
+    if (!layer) return false;
+    if (layer.parentId) {
+      const parent = this.get(layer.parentId);
+      if (!parent) return false;
+      parent.fabricObject.remove(layer.fabricObject);
+      parent.children = parent.children.filter((c) => c.id !== id);
+      layer.parentId = null;
+      this.events.emit("layer:removed", { layerId: id });
+      if (parent.children.length < 2) this.dissolve(parent);
+      this.emitChanged();
+      this.onPropertyChanged?.();
+      this.canvas.requestRenderAll();
+      return true;
+    }
     const index = this.layers.findIndex((l) => l.id === id);
     if (index === -1) return false;
-    const layer = this.layers[index];
     this.canvas.remove(layer.fabricObject);
     if (layer.renderProxy) this.canvas.remove(layer.renderProxy);
     this.layers.splice(index, 1);
@@ -214,6 +249,81 @@ var LayerManager = class {
     this.onPropertyChanged?.();
     return true;
   }
+  /**
+   * Take a top-level layer off the canvas stack **without** disposing it — it is
+   * about to become a group's child, so its object has to stay alive.
+   */
+  detach(id) {
+    const index = this.layers.findIndex((l) => l.id === id);
+    if (index === -1) return void 0;
+    const [layer] = this.layers.splice(index, 1);
+    this.canvas.remove(layer.fabricObject);
+    if (layer.renderProxy) this.canvas.remove(layer.renderProxy);
+    return layer;
+  }
+  /** Put a group's children back on the canvas stack and drop the group. */
+  explode(group) {
+    const children = [...group.children];
+    this.dissolve(group);
+    this.events.emit("layer:removed", { layerId: group.id });
+    this.emitChanged();
+    this.onPropertyChanged?.();
+    this.canvas.requestRenderAll();
+    return children;
+  }
+  /**
+   * Empty a group onto the canvas stack, in the group's own place, and drop the
+   * group record. `removeAll` restores each child's absolute transform, so the
+   * group's matrix must NOT be re-applied on top of it.
+   */
+  dissolve(group) {
+    const objects = group.fabricObject.removeAll();
+    const at = this.layers.findIndex((l) => l.id === group.id);
+    const survivors = group.children;
+    group.children = [];
+    for (const [index, object] of objects.entries()) {
+      object.setCoords();
+      const child = survivors[index];
+      if (!child) continue;
+      child.parentId = null;
+      this.layers.splice(at + index, 0, child);
+      this.canvas.add(object);
+      if (child.renderProxy) this.canvas.add(child.renderProxy);
+    }
+    this.canvas.remove(group.fabricObject);
+    this.layers = this.layers.filter((l) => l.id !== group.id);
+    this.syncZOrder();
+  }
+  /**
+   * Re-attach child records to an enlivened group. `data[i]` describes
+   * `group._objects[i]` — the order fabric serializes and restores them in. A
+   * missing record still becomes a child, so a hand-edited state cannot drop
+   * artwork off the canvas.
+   */
+  adoptGroupChildren(group, data) {
+    const objects = group.fabricObject.getObjects();
+    group.children = objects.map((object, index) => {
+      const record = data[index];
+      const child = new Layer(record?.type ?? "shape", object, record?.name, record?.id);
+      child.parentId = group.id;
+      if (record?.meta) child.meta = structuredClone(record.meta);
+      if (record && !record.visible) {
+        child.visible = false;
+        object.visible = false;
+      }
+      if (record?.locked) {
+        child.locked = true;
+        object.selectable = false;
+        object.evented = false;
+      }
+      if (record && record.opacity !== 1) {
+        child.opacity = record.opacity;
+        object.opacity = record.opacity;
+      }
+      return child;
+    });
+    this.emitChanged();
+  }
   /** Replace a layer's render object while preserving its immutable ID and panel state. */
   replaceObject(id, fabricObject) {
     const layer = this.get(id);
@@ -278,16 +388,32 @@ var LayerManager = class {
       if (layer.renderProxy) this.canvas.bringObjectToFront(layer.renderProxy);
     }
   }
+  /** The list a layer lives in: its group's children, or the canvas stack. */
+  siblingsOf(layer) {
+    if (!layer.parentId) return this.layers;
+    return this.get(layer.parentId)?.children ?? this.layers;
+  }
   reorder(id, newIndex) {
-    const oldIndex = this.layers.findIndex((l) => l.id === id);
+    const target = this.get(id);
+    if (!target) return false;
+    const list = this.siblingsOf(target);
+    const oldIndex = list.indexOf(target);
     if (oldIndex === -1) return false;
     if (!Number.isFinite(newIndex)) return false;
-    const clamped = Math.max(0, Math.min(this.layers.length - 1, Math.round(newIndex)));
+    const clamped = Math.max(0, Math.min(list.length - 1, Math.round(newIndex)));
     if (oldIndex === clamped) return false;
-    const [layer] = this.layers.splice(oldIndex, 1);
-    this.layers.splice(clamped, 0, layer);
-    this.syncZOrder();
-    this.events.emit("layer:reordered", { layerIds: this.layers.map((l) => l.id) });
+    const [layer] = list.splice(oldIndex, 1);
+    list.splice(clamped, 0, layer);
+    if (layer.parentId) {
+      const group = this.get(layer.parentId)?.fabricObject;
+      if (group) {
+        group.remove(layer.fabricObject);
+        group.insertAt(clamped, layer.fabricObject);
+      }
+    } else {
+      this.syncZOrder();
+    }
+    this.events.emit("layer:reordered", { layerIds: list.map((l) => l.id) });
     this.emitChanged();
     this.onPropertyChanged?.();
     return true;
@@ -295,9 +421,12 @@ var LayerManager = class {
   select(id) {
     if (id === null) {
       this.canvas.discardActiveObject();
+      this.exitGroups();
     } else {
       const layer = this.get(id);
       if (layer) {
+        if (layer.parentId) this.enterGroup(layer.parentId);
+        else this.exitGroups();
         this.canvas.setActiveObject(layer.renderProxy ?? layer.fabricObject);
       }
     }
@@ -306,16 +435,67 @@ var LayerManager = class {
     const selected = id && this.get(id) ? [id] : [];
     this.events.emit("selection:changed", { selected });
   }
+  /** Drill into a group so its children can be selected and clicked. */
+  enterGroup(groupId) {
+    const parent = this.get(groupId);
+    if (!parent) return;
+    const group = parent.fabricObject;
+    group.subTargetCheck = true;
+    group.interactive = true;
+  }
+  /** Leave every entered group — selecting anything else is done drilling in. */
+  exitGroups() {
+    for (const layer of this.layers) {
+      if (layer.type !== "group") continue;
+      const group = layer.fabricObject;
+      if (group.interactive) group.interactive = false;
+    }
+  }
+  /**
+   * Select several layers at once, as one fabric `ActiveSelection`. Children are
+   * skipped: a selection spanning in and out of a group has no single transform.
+   */
+  selectMany(ids) {
+    const layers = ids.flatMap((id) => {
+      const layer = this.get(id);
+      return layer && !layer.parentId ? [layer] : [];
+    });
+    if (layers.length === 0) return this.select(null);
+    if (layers.length === 1) return this.select(layers[0].id);
+    this.canvas.discardActiveObject();
+    this.exitGroups();
+    const selection = new import_fabric.ActiveSelection(
+      layers.map((l) => l.renderProxy ?? l.fabricObject),
+      { canvas: this.canvas }
+    );
+    this.canvas.setActiveObject(selection);
+    this.canvas.requestRenderAll();
+    this.events.emit("selection:changed", { selected: layers.map((l) => l.id) });
+  }
+  /** Depth-first over the whole tree, each layer before its children. */
+  *walk(layers = this.layers) {
+    for (const layer of layers) {
+      yield layer;
+      if (layer.children.length > 0) yield* this.walk(layer.children);
+    }
+  }
   get(id) {
-    return this.layers.find((l) => l.id === id);
+    for (const layer of this.walk()) if (layer.id === id) return layer;
+    return void 0;
   }
+  /** Top-level layers only — the canvas stack. Children hang off their group. */
   getAll() {
     return [...this.layers];
   }
+  /** Top-level layers, each carrying its children: what the layer panel renders. */
+  getTree() {
+    return this.layers.map((l) => l.toData());
+  }
   findByObject(obj) {
     const layerId = obj._layerId;
     if (layerId) return this.get(layerId);
-    return this.layers.find((l) => l.fabricObject === obj);
+    for (const layer of this.walk()) if (layer.fabricObject === obj) return layer;
+    return void 0;
   }
   setVisibility(id, visible) {
     const layer = this.get(id);
@@ -396,6 +576,7 @@ var LayerManager = class {
     for (const layer of this.layers) {
       this.canvas.remove(layer.fabricObject);
       if (layer.renderProxy) this.canvas.remove(layer.renderProxy);
+      layer.children = [];
     }
     this.layers = [];
     this.emitChanged();
@@ -410,6 +591,107 @@ var LayerManager = class {
   }
 };
 
+// src/template-explode.ts
+var import_fabric2 = require("fabric");
+var NAME_MAX = 24;
+function isText(object) {
+  return typeof object.text === "string";
+}
+function labelsByRun(template, values) {
+  const labels = new Map(template.parameters.map((p) => [p.key, p.label || p.key]));
+  const byRun = /* @__PURE__ */ new Map();
+  for (const match of template.svg.matchAll(/<text\b[^>]*>([\s\S]*?)<\/text>/g)) {
+    const token = /\{\{(\w+)(?:[|:]([^}]*))?\}\}/.exec(match[1]);
+    if (!token) continue;
+    const label = labels.get(token[1]);
+    if (!label) continue;
+    const resolved = String(values[token[1]] ?? token[2] ?? "").trim();
+    if (resolved) byRun.set(resolved, label);
+  }
+  return byRun;
+}
+function textName(run, labels) {
+  const trimmed = run.trim();
+  const label = labels.get(trimmed);
+  if (label) return label;
+  if (!trimmed) return "Text";
+  return trimmed.length > NAME_MAX ? `${trimmed.slice(0, NAME_MAX - 1)}\u2026` : trimmed;
+}
+function shapeName(object) {
+  const id = object.id;
+  if (typeof id === "string" && id) return id;
+  const type = object.type || "shape";
+  return type.charAt(0).toUpperCase() + type.slice(1);
+}
+function toTextbox(text) {
+  const box = new import_fabric2.Textbox(text.text, {
+    left: text.left,
+    top: text.top,
+    originX: text.originX,
+    originY: text.originY,
+    angle: text.angle,
+    scaleX: text.scaleX,
+    scaleY: text.scaleY,
+    fontSize: text.fontSize,
+    fontFamily: text.fontFamily,
+    fontWeight: text.fontWeight,
+    fontStyle: text.fontStyle,
+    textAlign: text.textAlign,
+    charSpacing: text.charSpacing,
+    lineHeight: text.lineHeight,
+    fill: text.fill,
+    stroke: text.stroke,
+    strokeWidth: text.strokeWidth,
+    opacity: text.opacity,
+    // A Textbox wraps at its box width; size it to the run the template drew so
+    // the authored copy never comes in pre-wrapped.
+    width: Math.max(1, (text.width ?? 0) + 2)
+  });
+  return box;
+}
+function textPathCurve(template, values, runWidth) {
+  if (template.id === "circular-text") return { arc: 100, wave: 0 };
+  if (template.id === "wave-text") return { arc: 0, wave: 50 };
+  const radius = Number(values.radius ?? 200);
+  if (!Number.isFinite(radius) || radius <= 0) return { arc: 0, wave: 0 };
+  const arc = 100 * runWidth / (Math.PI * radius);
+  return { arc: Math.max(-100, Math.min(100, arc)), wave: 0 };
+}
+function textPathSpec(template, values) {
+  const content = String(values.text ?? "Text");
+  const fontSize = template.id === "circular-text" ? 28 : 40;
+  const box = new import_fabric2.Textbox(content, {
+    fontSize,
+    fontFamily: String(values.font ?? "Arial"),
+    fontWeight: "bold",
+    fill: String(values.color ?? "#000000"),
+    originX: "left",
+    originY: "top",
+    // Wide enough that the run stays on one line before the curve widens it.
+    width: Math.max(1, content.length * fontSize * 0.62)
+  });
+  return {
+    type: "text",
+    name: template.parameters.find((p) => p.key === "text")?.label || "Text",
+    object: box,
+    curve: textPathCurve(template, values, box.width ?? 0)
+  };
+}
+async function explodeTemplateSvg(template, resolvedSvg, values) {
+  const labels = labelsByRun(template, values);
+  const { objects } = await (0, import_fabric2.loadSVGFromString)(resolvedSvg);
+  const specs = [];
+  for (const object of objects) {
+    if (object === null) continue;
+    if (isText(object)) {
+      specs.push({ type: "text", name: textName(object.text, labels), object: toTextbox(object) });
+      continue;
+    }
+    specs.push({ type: "shape", name: shapeName(object), object });
+  }
+  return specs;
+}
+
 // src/history.ts
 var HistoryManager = class _HistoryManager {
   static ASSET_KEY = "__canvasEditorHistoryAsset";
@@ -797,7 +1079,7 @@ function bestSnap(edges, candidates, threshold) {
 }
 
 // src/crop.ts
-var import_fabric = require("fabric");
+var import_fabric3 = require("fabric");
 
 // src/utils/clamp.ts
 function clamp(v, min, max) {
@@ -837,7 +1119,7 @@ var CropController = class {
     if (prevAngle) image.rotate(0);
     image.setCoords();
     const b = image.getBoundingRect();
-    const rect = new import_fabric.Rect({
+    const rect = new import_fabric3.Rect({
       left: b.left,
       top: b.top,
       width: b.width,
@@ -930,10 +1212,10 @@ var CropController = class {
 var STROKE2 = "#22c55e";
 
 // src/pattern/pattern-manager.ts
-var import_fabric3 = require("fabric");
+var import_fabric5 = require("fabric");
 
 // src/pattern/tiled-pattern-object.ts
-var import_fabric2 = require("fabric");
+var import_fabric4 = require("fabric");
 
 // src/pattern/tile-geometry.ts
 var MAX_TILES_PER_AXIS = 200;
@@ -1000,7 +1282,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_fabric2.FabricObject {
+var TiledPatternObject = class _TiledPatternObject extends import_fabric4.FabricObject {
   static type = "TiledPattern";
   /** The layer's real object. Never rendered directly (it is kept at opacity 0). */
   source;
@@ -1083,7 +1365,7 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric2.Fabric
     const { tileW, tileH } = this.liveTile();
     const centre = this.getCenterPoint();
     const shift = this.shiftVector(tileW, tileH, this.liveAngle());
-    return new import_fabric2.Point(centre.x - shift.x, centre.y - shift.y);
+    return new import_fabric4.Point(centre.x - shift.x, centre.y - shift.y);
   }
   _render(ctx) {
     const { width, height } = this.area;
@@ -1260,11 +1542,11 @@ var TiledPatternObject = class _TiledPatternObject extends import_fabric2.Fabric
     const radians = angle * Math.PI / 180;
     const cos = Math.cos(radians);
     const sin = Math.sin(radians);
-    return new import_fabric2.Point(dx * cos - dy * sin, dx * sin + dy * cos);
+    return new import_fabric4.Point(dx * cos - dy * sin, dx * sin + dy * cos);
   }
   anchorFromOrigin(origin, tileW, tileH, angle) {
     const shift = this.shiftVector(tileW, tileH, angle);
-    return new import_fabric2.Point(origin.x + shift.x, origin.y + shift.y);
+    return new import_fabric4.Point(origin.x + shift.x, origin.y + shift.y);
   }
   /**
    * Snapshot the source at (at least) `scale`, reusing the cached one while it
@@ -1524,7 +1806,7 @@ async function unbakeLegacyLayer(layer, state) {
     cropY: state.original.cropY,
     angle: state.original.angle
   });
-  image.clipPath = state.originalClip ? (await import_fabric3.util.enlivenObjects([state.originalClip]))[0] : void 0;
+  image.clipPath = state.originalClip ? (await import_fabric5.util.enlivenObjects([state.originalClip]))[0] : void 0;
   restoreLocks(image, state.originalLocks);
   image.setCoords();
 }
@@ -1542,91 +1824,154 @@ function restoreLocks(obj, locks) {
 }
 
 // src/text-curve.ts
-var import_fabric4 = require("fabric");
-var DEFAULT_TEXT_CURVE = { arc: 0, wave: 0 };
+var import_fabric6 = 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_PERIOD_EM = 4.1;
 var WAVE_AMPLITUDE_EM = 0.9;
+var MIN_WAVE_LENGTH = 1;
+var MAX_WAVE_LENGTH = 12;
 var WAVE_STEP = 6;
-var MEASURE_WIDTH = 1e5;
-var PATH_SLACK = 0.06;
-function isCurvable(object) {
-  return !!object && typeof object.text === "string";
+var MAX_WAVE_STEPS = 4e3;
+function round(value) {
+  return Math.round(value * 100) / 100;
 }
-function measureText(text) {
-  const authored = text.width;
-  try {
-    text.set({ width: MEASURE_WIDTH });
-    text.initDimensions?.();
-    return Math.max(1, text.calcTextWidth?.() ?? text.width ?? 1);
-  } finally {
-    if (authored !== void 0) text.set({ width: authored });
-    text.initDimensions?.();
-  }
+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 arcPathData(width, arc) {
-  const magnitude = Math.min(100, Math.abs(arc));
-  const direction = arc < 0 ? -1 : 1;
-  const full = magnitude >= FULL_CIRCLE_ARC;
-  const sweep = full ? Math.PI * 2 : Math.max(MIN_SWEEP, magnitude / 100 * Math.PI);
-  const radius = width / sweep;
+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 * radius * (1 - Math.cos(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(-Math.PI);
-    const top = point(0);
+    const start2 = point(rotation - Math.PI);
+    const opposite = point(rotation);
     return {
       data: [
         `M ${format(start2)}`,
-        `A ${round(radius)} ${round(radius)} 0 0 ${sweepFlag} ${format(top)}`,
-        `A ${round(radius)} ${round(radius)} 0 0 ${sweepFlag} ${format(start2)}`
+        `A ${r} ${r} 0 0 ${sweepFlag} ${format(opposite)}`,
+        `A ${r} ${r} 0 0 ${sweepFlag} ${format(start2)}`
       ].join(" "),
-      length: width
+      length: radius * Math.PI * 2
     };
   }
-  const start = point(-sweep / 2);
-  const end = point(sweep / 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 ${round(radius)} ${round(radius)} 0 ${largeArc} ${sweepFlag} ${format(end)}`,
-    // radius = width / sweep, so the arc is exactly `width` long.
-    length: width
+    data: `M ${format(start)} A ${r} ${r} 0 ${largeArc} ${sweepFlag} ${format(end)}`,
+    length: radius * sweep
   };
 }
-function wavePathData(width, fontSize, wave) {
-  const amplitude = clamp(wave, 0, 100) / 100 * fontSize * WAVE_AMPLITUDE_EM;
-  const period = Math.max(1, fontSize * WAVE_PERIOD_EM);
-  const steps = Math.max(2, Math.ceil(width / WAVE_STEP));
+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 = amplitude * Math.sin(x / period * Math.PI * 2);
+    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 round(value) {
-  return Math.round(value * 100) / 100;
+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) {
-  if (Math.abs(config.arc) >= MIN_ARC) return arcPathData(width, config.arc);
-  if (config.wave > 0) return wavePathData(width, fontSize, config.wave);
-  return null;
+  return buildCurveLinePaths(config, width, fontSize)?.[0] ?? null;
 }
-function normalize(config) {
-  const arc = clamp(config.arc ?? 0, -100, 100);
-  return { arc, wave: Math.abs(arc) >= MIN_ARC ? 0 : clamp(config.wave ?? 0, 0, 100) };
+
+// src/text-curve.ts
+var MEASURE_WIDTH = 1e5;
+var PATH_SLACK = 0.06;
+var FALLBACK_LINE_HEIGHT = 1.16;
+var patches = /* @__PURE__ */ new WeakMap();
+function isCurvable(object) {
+  return !!object && typeof object.text === "string";
+}
+function measureText(text) {
+  const authored = text.width;
+  try {
+    text.set({ width: MEASURE_WIDTH });
+    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_fabric6.Path(curve.data, { visible: false, objectCaching: false });
 }
 var TextCurveManager = class {
   constructor(canvas, layers, history, events) {
@@ -1643,33 +1988,35 @@ var TextCurveManager = class {
   get(layerId) {
     const layer = this.layers.get(layerId);
     if (!layer || !isCurvable(layer.fabricObject)) return null;
-    return layer.meta.curve ?? { ...DEFAULT_TEXT_CURVE };
+    return normalizeTextCurve(layer.meta.curve ?? {});
   }
   isCurved(layerId) {
     const curve = this.get(layerId);
-    return !!curve && (Math.abs(curve.arc) >= MIN_ARC || curve.wave > 0);
+    return !!curve && bendsBaseline(curve);
   }
-  /** Apply (or update) the curve on a text layer. Zeroed config clears it. */
+  /** Apply (or update) the curve on a text layer. A straight config clears it. */
   apply(layerId, config, save = true) {
     const layer = this.layers.get(layerId);
     if (!layer || !isCurvable(layer.fabricObject)) return false;
-    const next = normalize(config);
+    const next = normalizeTextCurve(config);
     const text = layer.fabricObject;
     const run = measureText(text);
-    const curve = buildCurvePathData(next, run * (1 + PATH_SLACK), text.fontSize);
-    if (!curve) {
+    if (!bendsBaseline(next)) {
       this.detach(text, layer.meta.curveWidth);
-      delete layer.meta.curve;
       delete layer.meta.curveWidth;
+      layer.meta.curve = next;
     } else {
       if (layer.meta.curveWidth === void 0) layer.meta.curveWidth = text.width ?? 0;
       text.set({ width: Math.max(layer.meta.curveWidth, run + 2) });
-      text.set({
-        path: new import_fabric4.Path(curve.data, { visible: false, objectCaching: false }),
-        pathAlign: "center",
-        pathSide: "left",
-        pathStartOffset: Math.max(0, (curve.length - run) / 2)
-      });
+      text.initDimensions?.();
+      const curves = buildCurveLinePaths(
+        next,
+        run * (1 + PATH_SLACK),
+        text.fontSize,
+        lineCountOf(text),
+        lineHeightOf(text)
+      );
+      if (curves) this.attach(text, curves);
       layer.meta.curve = next;
     }
     text.initDimensions?.();
@@ -1682,32 +2029,114 @@ var TextCurveManager = class {
   }
   /** Remove the curve, restoring the authored text box width. */
   clear(layerId, save = true) {
-    return this.apply(layerId, DEFAULT_TEXT_CURVE, save);
+    const layer = this.layers.get(layerId);
+    const shape = layer?.meta.curve?.shape;
+    return this.apply(layerId, { shape }, save);
   }
   /**
-   * Rebuild the path from the stored parameters. Text content, font family and
-   * font size all change the run's width, and the path is sized to that width —
-   * without this the curve keeps the geometry of the text it was created from.
+   * Rebuild the paths from the stored parameters. Text content, line count,
+   * font family and font size all change the geometry the paths are sized to —
+   * without this the curve keeps that of the text it was created from.
    */
   refresh(layerId, save = false) {
     const curve = this.layers.get(layerId)?.meta.curve;
     if (!curve) return false;
     return this.apply(layerId, curve, save);
   }
-  /** Rebuild every curved layer — used after a state restore. */
+  /**
+   * Rebuild every curved layer — used after a state restore.
+   *
+   * `getAll` is the canvas stack, so this walks each group's children too:
+   * curved text inside a group would otherwise keep the path geometry it was
+   * restored with, and stop tracking its own text, font and size.
+   */
   refreshAll() {
-    for (const layer of this.layers.getAll()) {
-      if (layer.meta.curve) this.refresh(layer.id);
+    const visit = (layers) => {
+      for (const layer of layers) {
+        if (layer.meta.curve) this.refresh(layer.id);
+        if (layer.children.length > 0) visit(layer.children);
+      }
+    };
+    visit(this.layers.getAll());
+  }
+  /**
+   * Puts every line's path on the object as one shape, and hooks per-line
+   * measuring so each line is laid out on its own.
+   *
+   * The object's own path is the union of the lines: fabric sizes a curved text
+   * object from it, and a single line's path would leave the rest of the block
+   * outside the layer's box — where object caching clips it away.
+   */
+  attach(text, curves) {
+    const paths = curves.map(toFabricPath);
+    const union = paths.length === 1 ? paths[0] : toFabricPath({ data: curves.map((c) => c.data).join(" "), length: 0 });
+    text.set({
+      path: union,
+      pathAlign: "center",
+      pathSide: "left",
+      // Each line is centred on its own path by the measuring hook below, so
+      // there is no single offset left to apply.
+      pathStartOffset: 0
+    });
+    this.patchLineMeasure(text, paths, union);
+  }
+  /**
+   * Fabric lays every line of a text object along `this.path`, from one
+   * `pathStartOffset` — so a multi-line run piles all its lines on top of each
+   * other. Each line is measured against its own path instead, by swapping the
+   * path in around fabric's own per-line measure pass.
+   *
+   * The paths all share the first one's `pathOffset`, which is the origin
+   * fabric subtracts to place a glyph in the object — without that each line
+   * would be re-centred on its own bounding box and land back in the same spot.
+   *
+   * `textAlign` is switched to centre for the pass, which is how fabric centres
+   * a line on its path; the authored value is restored before anything else
+   * reads it.
+   */
+  patchLineMeasure(text, paths, union) {
+    this.unpatchLineMeasure(text);
+    const original = text._measureLine;
+    if (typeof original !== "function") return;
+    for (const path of paths) path.pathOffset = union.pathOffset;
+    const installed = function(lineIndex) {
+      const path = paths[lineIndex];
+      if (!path) return original.call(this, lineIndex);
+      const previousPath = this.path;
+      const previousAlign = this.textAlign;
+      this.path = path;
+      this.textAlign = "center";
+      this.setPathInfo?.();
+      try {
+        return original.call(this, lineIndex);
+      } finally {
+        this.path = previousPath;
+        this.textAlign = previousAlign;
+      }
+    };
+    const ownedOriginal = Object.prototype.hasOwnProperty.call(text, "_measureLine");
+    text._measureLine = installed;
+    patches.set(text, { original, installed, ownedOriginal });
+  }
+  /** Restore fabric's own per-line measuring, if this manager replaced it. */
+  unpatchLineMeasure(text) {
+    const patch = patches.get(text);
+    if (!patch) return;
+    if (text._measureLine === patch.installed) {
+      if (patch.ownedOriginal) text._measureLine = patch.original;
+      else delete text._measureLine;
     }
+    patches.delete(text);
   }
   detach(text, authoredWidth) {
+    this.unpatchLineMeasure(text);
     text.set({ path: null, pathStartOffset: 0 });
     if (authoredWidth !== void 0 && authoredWidth > 0) text.set({ width: authoredWidth });
   }
 };
 
 // src/mask-presets/manager.ts
-var import_fabric5 = require("fabric");
+var import_fabric7 = require("fabric");
 
 // src/mask-presets/shapes.ts
 var SHAPE_MASK_IDS = [
@@ -1974,13 +2403,13 @@ var MaskPresetManager = class {
       objectCaching: false
     };
     if (isShapeMaskId(id)) {
-      return new import_fabric5.Path(shapeMaskPathData(id), {
+      return new import_fabric7.Path(shapeMaskPathData(id), {
         ...shared,
         scaleX: width / SHAPE_MASK_BOX,
         scaleY: height / SHAPE_MASK_BOX
       });
     }
-    return new import_fabric5.FabricImage(renderTextureMask(id), {
+    return new import_fabric7.FabricImage(renderTextureMask(id), {
       ...shared,
       scaleX: width / TEXTURE_MASK_SIZE,
       scaleY: height / TEXTURE_MASK_SIZE
@@ -1989,7 +2418,7 @@ var MaskPresetManager = class {
 };
 
 // src/shadow.ts
-var import_fabric6 = require("fabric");
+var import_fabric8 = require("fabric");
 
 // src/utils/color.ts
 var CSS_COLOR = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\([\d.%+\-\s,/]+\)|[a-z]+)$/i;
@@ -2027,7 +2456,7 @@ function applyLayerShadow(object, config) {
   }
   const color = isCssColor(next.color) ? next.color : DEFAULT_LAYER_SHADOW.color;
   object.set({
-    shadow: new import_fabric6.Shadow({
+    shadow: new import_fabric8.Shadow({
       color,
       blur: Math.max(0, next.blur),
       offsetX: next.offsetX,
@@ -2141,7 +2570,7 @@ var UnitConverter = class {
 };
 
 // src/serialization.ts
-var import_fabric7 = require("fabric");
+var import_fabric9 = require("fabric");
 var VERSION = "2.0.0";
 function serializeEditor(editor) {
   return {
@@ -2177,7 +2606,7 @@ async function deserializeEditor(editor, state) {
   }
   const staged = await Promise.all(
     state.layers.map(async (serialized) => {
-      const fabricObject = (await import_fabric7.util.enlivenObjects([serialized.fabricObject]))[0];
+      const fabricObject = (await import_fabric9.util.enlivenObjects([serialized.fabricObject]))[0];
       if (!fabricObject) {
         const source = serialized.fabricObject.src;
         if (typeof source === "string" && source.startsWith("blob:")) {
@@ -2188,7 +2617,7 @@ async function deserializeEditor(editor, state) {
       return { serialized, fabricObject };
     })
   );
-  const stagedBackground = state.backgroundImage ? (await import_fabric7.util.enlivenObjects([state.backgroundImage]))[0] : null;
+  const stagedBackground = state.backgroundImage ? (await import_fabric9.util.enlivenObjects([state.backgroundImage]))[0] : null;
   if (state.backgroundImage && !stagedBackground) {
     const source = state.backgroundImage.src;
     if (typeof source === "string" && source.startsWith("blob:")) {
@@ -2231,11 +2660,16 @@ function restoreLayer(editor, serialized, fabricObject) {
   if (serialized.opacity !== 1) {
     editor.layers.setOpacity(layer.id, serialized.opacity);
   }
+  const childData = serialized.children ?? serialized.meta?.groupChildren;
+  if (layer.type === "group" && Array.isArray(childData)) {
+    editor.layers.adoptGroupChildren(layer, childData);
+    if (layer.meta.groupChildren) delete layer.meta.groupChildren;
+  }
   return layer;
 }
 
 // src/export.ts
-var import_fabric8 = require("fabric");
+var import_fabric10 = require("fabric");
 
 // src/displacement.ts
 var CHANNEL_INDEX = {
@@ -2329,7 +2763,7 @@ async function exportPNG(canvas, options = {}) {
 }
 async function exportIsolatedPNG(source, objects, options = {}) {
   const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
-  const canvas = new import_fabric8.StaticCanvas(element, {
+  const canvas = new import_fabric10.StaticCanvas(element, {
     width: options.width ?? source.getWidth(),
     height: options.height ?? source.getHeight(),
     backgroundColor: options.backgroundColor || void 0
@@ -2359,7 +2793,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_fabric8.StaticCanvas(element, { width, height });
+  const canvas = new import_fabric10.StaticCanvas(element, { width, height });
   try {
     const clones = await Promise.all(source.getObjects().map((object) => object.clone()));
     if (clones.length) canvas.add(...clones);
@@ -2799,7 +3233,7 @@ var ProjectManager = class {
 };
 
 // src/mask.ts
-var import_fabric9 = require("fabric");
+var import_fabric11 = require("fabric");
 var MaskRefinementError = class extends Error {
   constructor(code, message, cause) {
     super(message);
@@ -2831,7 +3265,7 @@ var MaskController = class {
       throw new Error("Mask dimensions must be positive integers");
     }
     const backing = this.makeCanvas(width, height);
-    const image = new import_fabric9.FabricImage(backing, {
+    const image = new import_fabric11.FabricImage(backing, {
       left: 0,
       top: 0,
       originX: "left",
@@ -3057,10 +3491,10 @@ var MaskController = class {
 };
 
 // src/masks/manager.ts
-var import_fabric16 = require("fabric");
+var import_fabric18 = require("fabric");
 
 // src/masks/compose.ts
-var import_fabric10 = require("fabric");
+var import_fabric12 = require("fabric");
 var MODE_OPERATION = {
   add: "source-over",
   subtract: "destination-out",
@@ -3070,7 +3504,7 @@ function neutralize(child) {
   child.set({ opacity: 0, globalCompositeOperation: "source-over" });
 }
 function baseRect(box) {
-  return new import_fabric10.Rect({
+  return new import_fabric12.Rect({
     left: box.left,
     top: box.top,
     width: Math.max(1, box.width),
@@ -3097,7 +3531,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_fabric10.Group(withBase, {
+  return new import_fabric12.Group(withBase, {
     absolutePositioned: options.absolute,
     // Cached, so the children's compositing operations resolve against each
     // other instead of against the page underneath the mask.
@@ -3111,15 +3545,15 @@ function needsAbsoluteSpace(entries) {
 }
 
 // src/masks/edit.ts
-var import_fabric12 = require("fabric");
+var import_fabric14 = require("fabric");
 
 // src/masks/space.ts
-var import_fabric11 = require("fabric");
+var import_fabric13 = require("fabric");
 function matrixOf(object) {
   return object.calcTransformMatrix();
 }
 function applyMatrix(object, matrix) {
-  const decomposed = import_fabric11.util.qrDecompose(matrix);
+  const decomposed = import_fabric13.util.qrDecompose(matrix);
   object.set({
     flipX: false,
     flipY: false,
@@ -3136,19 +3570,19 @@ function applyMatrix(object, matrix) {
   object.setCoords();
 }
 function toCanvasSpace(object, host) {
-  applyMatrix(object, import_fabric11.util.multiplyTransformMatrices(matrixOf(host), matrixOf(object)));
+  applyMatrix(object, import_fabric13.util.multiplyTransformMatrices(matrixOf(host), matrixOf(object)));
 }
 function toHostSpace(object, host) {
   applyMatrix(
     object,
-    import_fabric11.util.multiplyTransformMatrices(import_fabric11.util.invertTransform(matrixOf(host)), matrixOf(object))
+    import_fabric13.util.multiplyTransformMatrices(import_fabric13.util.invertTransform(matrixOf(host)), matrixOf(object))
   );
 }
 function relativeMatrix(object, host) {
-  return import_fabric11.util.multiplyTransformMatrices(import_fabric11.util.invertTransform(matrixOf(host)), matrixOf(object));
+  return import_fabric13.util.multiplyTransformMatrices(import_fabric13.util.invertTransform(matrixOf(host)), matrixOf(object));
 }
 function applyRelativeMatrix(object, host, rel) {
-  applyMatrix(object, import_fabric11.util.multiplyTransformMatrices(matrixOf(host), rel));
+  applyMatrix(object, import_fabric13.util.multiplyTransformMatrices(matrixOf(host), rel));
 }
 function asObject(clip) {
   return clip;
@@ -3261,8 +3695,8 @@ var MaskEditController = class {
     if (!this.handle || !this.child || !this.group) return;
     applyMatrix(
       this.child,
-      import_fabric12.util.multiplyTransformMatrices(
-        import_fabric12.util.invertTransform(matrixOf(this.group)),
+      import_fabric14.util.multiplyTransformMatrices(
+        import_fabric14.util.invertTransform(matrixOf(this.group)),
         matrixOf(this.handle)
       )
     );
@@ -3273,15 +3707,15 @@ var MaskEditController = class {
 };
 
 // src/masks/store.ts
-var import_fabric15 = require("fabric");
+var import_fabric17 = require("fabric");
 
 // src/masks/host.ts
-var import_fabric13 = require("fabric");
+var import_fabric15 = require("fabric");
 function findCanvasHost(layers) {
   return layers.getAll().find((layer) => layer.meta.canvasMask);
 }
 function createCanvasHost(canvas, layers) {
-  const rect = new import_fabric13.Rect({
+  const rect = new import_fabric15.Rect({
     left: 0,
     top: 0,
     width: canvas.getWidth(),
@@ -3330,9 +3764,9 @@ function hostBoxOf(canvas, host, absolute) {
 }
 
 // src/masks/install.ts
-var import_fabric14 = require("fabric");
+var import_fabric16 = require("fabric");
 function convertSpace(host, sources, absolute) {
-  const wasAbsolute = host.clipPath instanceof import_fabric14.Group ? host.clipPath.absolutePositioned : absolute;
+  const wasAbsolute = host.clipPath instanceof import_fabric16.Group ? host.clipPath.absolutePositioned : absolute;
   if (absolute === wasAbsolute) return;
   for (const source of sources) {
     if (absolute) toCanvasSpace(source, host);
@@ -3424,7 +3858,7 @@ var MaskStackStore = class {
     const clip = host.clipPath;
     if (!clip) return [];
     const entries = this.list(target);
-    if (entries.length === 0 || !(clip instanceof import_fabric15.Group)) return [asObject(clip)];
+    if (entries.length === 0 || !(clip instanceof import_fabric17.Group)) return [asObject(clip)];
     const children = unwrapGroup(clip);
     const extra = children.length - entries.length;
     return extra > 0 ? children.slice(extra) : children;
@@ -3524,7 +3958,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_fabric16.Group ? host.clipPath : null;
+    const group = host.clipPath instanceof import_fabric18.Group ? host.clipPath : null;
     if (!group) return false;
     const children = group.getObjects();
     const child = children[children.length - entries.length + index];
@@ -3830,7 +4264,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_fabric17.Canvas(canvasElement, {
+    this.canvas = new import_fabric19.Canvas(canvasElement, {
       width: widthPx,
       height: heightPx,
       backgroundColor: this.designBackground,
@@ -3864,7 +4298,7 @@ var CanvasEditor = class {
   // ─── Layer Operations ────────────────────────────────
   async addImage(url, options) {
     try {
-      const img = await import_fabric17.FabricImage.fromURL(
+      const img = await import_fabric19.FabricImage.fromURL(
         url,
         {},
         { originX: "left", originY: "top", ...options }
@@ -3890,7 +4324,7 @@ var CanvasEditor = class {
     if (this.crop.activeLayerId() === layerId) this.crop.cancel();
     const previous = layer.fabricObject;
     try {
-      const replacement = await import_fabric17.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
+      const replacement = await import_fabric19.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
       replacement.set({
         left: previous.left,
         top: previous.top,
@@ -3919,7 +4353,7 @@ var CanvasEditor = class {
     }
   }
   addText(text, options) {
-    const textbox = new import_fabric17.Textbox(text, {
+    const textbox = new import_fabric19.Textbox(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
@@ -3960,20 +4394,30 @@ var CanvasEditor = class {
         return value === void 0 ? token : escapeXml(value);
       })
     );
-    const { objects, options } = await (0, import_fabric17.loadSVGFromString)(resolved);
-    const validObjects = objects.filter((object) => object !== null);
-    if (validObjects.length === 0) throw new Error("Template SVG contains no renderable objects");
-    const group = import_fabric17.util.groupSVGElements(validObjects, options);
-    group.set({
-      left: this.canvas.getWidth() / 2,
-      top: this.canvas.getHeight() / 2,
-      originX: "center",
-      originY: "center"
+    const specs = resolved.includes("<textPath") ? [textPathSpec(template, values)] : await explodeTemplateSvg(template, resolved, values);
+    if (specs.length === 0) throw new Error("Template SVG contains no renderable objects");
+    return this.history.transaction(async () => {
+      const created = specs.map((spec) => {
+        const layer2 = this.layers.add(spec.type, spec.object, spec.name);
+        if (spec.curve) this.curves.apply(layer2.id, spec.curve, false);
+        return layer2;
+      });
+      const layer = created.length === 1 ? created[0] : await this.groupLayers(
+        created.map((l) => l.id),
+        template.name
+      ) ?? created[0];
+      layer.fabricObject.set({
+        left: this.canvas.getWidth() / 2,
+        top: this.canvas.getHeight() / 2,
+        originX: "center",
+        originY: "center"
+      });
+      layer.fabricObject.setCoords();
+      this.layers.select(layer.id);
+      this.canvas.requestRenderAll();
+      this.history.save();
+      return layer;
     });
-    const layer = this.layers.add("template", group, template.name);
-    this.layers.select(layer.id);
-    this.history.save();
-    return layer;
   }
   removeLayer(id) {
     if (this.crop.activeLayerId() === id) this.crop.cancel();
@@ -3985,6 +4429,10 @@ var CanvasEditor = class {
   selectLayer(id) {
     this.layers.select(id);
   }
+  /** Select several layers at once — what a panel's shift/⌘ click drives. */
+  selectLayers(ids) {
+    this.layers.selectMany(ids);
+  }
   getSelectedLayer() {
     const active = this.canvas.getActiveObject();
     if (!active) return null;
@@ -4036,10 +4484,10 @@ var CanvasEditor = class {
     const next = { ...previous, ...adjustments };
     const clampAdjustment = (value, min = -1) => clamp(value ?? 0, min, 1);
     image.filters = [
-      new import_fabric17.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
-      new import_fabric17.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
-      new import_fabric17.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
-      new import_fabric17.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
+      new import_fabric19.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
+      new import_fabric19.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
+      new import_fabric19.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
+      new import_fabric19.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
     ];
     layer.meta.imageAdjustments = next;
     image.applyFilters();
@@ -4047,42 +4495,55 @@ var CanvasEditor = class {
     this.history.save();
     return true;
   }
-  /** Combine two or more layers into a single editable group layer. */
+  /**
+   * Combine two or more layers into one group layer. Picking a group among them
+   * **absorbs** it — its children join the new group and the old group record is
+   * dropped — because groups are exactly one level deep.
+   */
   async groupLayers(ids, name = "Group") {
     const uniqueIds = [...new Set(ids)];
-    const children = uniqueIds.map((id) => this.layers.get(id)).filter((layer) => layer !== void 0);
-    if (children.length < 2 || children.length !== uniqueIds.length) return null;
+    const picked = uniqueIds.map((id) => this.layers.get(id)).filter((layer) => layer !== void 0 && layer.parentId === null);
+    if (picked.length < 2 || picked.length !== uniqueIds.length) return null;
+    const stack = this.layers.getAll();
+    const topIndex = Math.max(...picked.map((layer) => stack.indexOf(layer)));
+    const insertIndex = stack.slice(0, topIndex).filter((layer) => !picked.includes(layer)).length;
     return this.history.transaction(() => {
-      const childData = children.map((layer) => structuredClone(layer.toData()));
-      const objects = children.map((layer) => layer.fabricObject);
-      for (const layer of children) this.layers.remove(layer.id);
-      const group = new import_fabric17.Group(objects);
+      const children = [];
+      const objects = [];
+      for (const layer of picked) {
+        if (layer.type === "group" && layer.children.length > 0) {
+          const inner = layer.fabricObject.removeAll();
+          for (const [index, object] of inner.entries()) {
+            object.setCoords();
+            const child = layer.children[index];
+            if (!child) continue;
+            children.push(child);
+            objects.push(object);
+          }
+          layer.children = [];
+          this.layers.detach(layer.id);
+        } else {
+          children.push(layer);
+          objects.push(layer.fabricObject);
+          this.layers.detach(layer.id);
+        }
+      }
+      const group = new import_fabric19.Group(objects);
       const grouped = this.layers.add("group", group, name);
-      grouped.meta.groupChildren = childData;
+      for (const child of children) child.parentId = grouped.id;
+      grouped.children = children;
+      this.layers.reorder(grouped.id, insertIndex);
       this.layers.select(grouped.id);
       this.history.save();
       return grouped;
     });
   }
-  /** Restore a group created by groupLayers back to its original layer records. */
+  /** Split a group back into the layers it holds, in place. */
   async ungroupLayer(id) {
     const grouped = this.layers.get(id);
-    const childData = grouped?.meta.groupChildren;
-    if (!grouped || grouped.type !== "group" || !Array.isArray(childData)) return [];
-    const group = grouped.fabricObject;
+    if (!grouped || grouped.type !== "group" || grouped.children.length === 0) return [];
     return this.history.transaction(() => {
-      const objects = group.removeAll();
-      this.layers.remove(id);
-      const restored = objects.map((object, index) => {
-        object.setCoords();
-        const data = childData[index];
-        const layer = this.layers.add(data?.type ?? "group", object, data?.name, data?.id);
-        if (data?.meta) layer.meta = structuredClone(data.meta);
-        if (data && !data.visible) this.layers.setVisibility(layer.id, false);
-        if (data?.locked) this.layers.setLocked(layer.id, true);
-        if (data && data.opacity !== 1) this.layers.setOpacity(layer.id, data.opacity);
-        return layer;
-      });
+      const restored = this.layers.explode(grouped);
       this.history.save();
       this.layers.select(restored[0]?.id ?? null);
       return restored;
@@ -4130,7 +4591,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_fabric17.FabricImage) {
+      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric19.FabricImage) {
         const image = await layer.fabricObject.clone();
         image.set({
           left: 0,
@@ -4406,7 +4867,7 @@ var CanvasEditor = class {
       return;
     }
     try {
-      const image = await import_fabric17.FabricImage.fromURL(
+      const image = await import_fabric19.FabricImage.fromURL(
         url,
         { crossOrigin: options.crossOrigin ?? null, signal: options.signal },
         { originX: "left", originY: "top" }
@@ -4830,6 +5291,7 @@ var AnnotationOverlay = class {
   applyLayerShadow,
   applyObjectSelectionStyle,
   applySelectionStyle,
+  buildCurveLinePaths,
   buildCurvePathData,
   clamp,
   clearTextureMaskCache,
@@ -4841,6 +5303,7 @@ var AnnotationOverlay = class {
   displaceRgba,
   drawTiles,
   escapeXml,
+  explodeTemplateSvg,
   exportDataURL,
   exportMockup,
   exportPNG,
@@ -4853,6 +5316,7 @@ var AnnotationOverlay = class {
   isShapeMaskId,
   isTextureMaskId,
   needsAbsoluteSpace,
+  normalizeTextCurve,
   readLayerShadow,
   renderTextureMask,
   resetTransform,
@@ -4861,6 +5325,8 @@ var AnnotationOverlay = class {
   sanitizeSvg,
   serializeEditor,
   shapeMaskPathData,
+  textPathCurve,
+  textPathSpec,
   toCanvasSpace,
   toHostSpace,
   unwrapGroup