@overtone-art/canvas-editor-core 0.5.0 → 0.6.0

package/dist/index.mjs

@@ -11,7 +11,7 @@ import {
 } from "./chunk-MCBRZQ4M.mjs";
 
 // src/editor.ts
-import { Canvas, FabricImage as FabricImage3, Group as Group6, Textbox, filters, loadSVGFromString, util as util5 } from "fabric";
+import { Canvas, FabricImage as FabricImage3, Group as Group7, Textbox as Textbox2, filters } from "fabric";
 
 // src/events.ts
 var EventEmitter = class {
@@ -48,6 +48,9 @@ var EventEmitter = class {
   }
 };
 
+// src/layer.ts
+import { ActiveSelection } from "fabric";
+
 // src/utils/id.ts
 import { nanoid } from "nanoid";
 var generateId = () => nanoid(12);
@@ -69,6 +72,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;
@@ -79,6 +90,8 @@ var Layer = class {
     this.meta = {};
     this.fabricObject = fabricObject;
     this.renderProxy = null;
+    this.children = [];
+    this.parentId = null;
     this.fabricObject._layerId = this.id;
   }
   hasMeta() {
@@ -92,12 +105,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()
     };
   }
@@ -123,9 +139,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);
@@ -134,6 +164,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);
@@ -198,16 +303,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;
@@ -215,9 +336,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);
       }
     }
@@ -226,16 +350,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 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);
@@ -316,6 +491,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();
@@ -330,6 +506,107 @@ var LayerManager = class {
   }
 };
 
+// src/template-explode.ts
+import { Textbox, loadSVGFromString } from "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 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 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 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";
@@ -886,8 +1163,10 @@ function computeTilePositions(config, targetW, targetH, baseW, baseH, origin) {
   }
   return placements;
 }
-function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin) {
+function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin, draw) {
   const anchor = origin ?? { x: targetW / 2, y: targetH / 2 };
+  const drawW = draw && draw.width > 0 ? draw.width : baseW;
+  const drawH = draw && draw.height > 0 ? draw.height : baseH;
   ctx.save();
   ctx.translate(anchor.x, anchor.y);
   ctx.rotate(config.angle * Math.PI / 180);
@@ -895,7 +1174,7 @@ function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin) {
     ctx.save();
     ctx.translate(tile.x, tile.y);
     ctx.rotate(tile.rotation);
-    ctx.drawImage(img, -baseW / 2, -baseH / 2, baseW, baseH);
+    ctx.drawImage(img, -drawW / 2, -drawH / 2, drawW, drawH);
     ctx.restore();
   }
   ctx.restore();
@@ -917,6 +1196,7 @@ function mod2(n) {
 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 FabricObject {
   static type = "TiledPattern";
   /** The layer's real object. Never rendered directly (it is kept at opacity 0). */
@@ -1006,7 +1286,8 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     const { width, height } = this.area;
     if (width <= 0 || height <= 0) return;
     const { tileW, tileH } = this.liveTile();
-    const snapshot = this.ensureSnapshot(contextScale(ctx) * (tileW / Math.max(1, this.baseW())));
+    const scale = contextScale(ctx);
+    const snapshot = this.ensureSnapshot(scale * (tileW / Math.max(1, this.baseW())));
     if (!snapshot) return;
     const centre = this.getCenterPoint();
     const angle = this.liveAngle();
@@ -1017,7 +1298,17 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     const shift = this.shiftVector(tileW, tileH, angle);
     const origin = { x: centre.x - shift.x, y: centre.y - shift.y };
     const config = { ...this.config, angle, offsetX: 0, offsetY: 0 };
-    drawTiles(ctx, snapshot, config, width, height, tileW, tileH, origin);
+    drawTiles(
+      ctx,
+      snapshot,
+      config,
+      width,
+      height,
+      tileW,
+      tileH,
+      origin,
+      this.drawSize(tileW, tileH, TILE_BLEED_DEVICE_PX / scale)
+    );
     ctx.restore();
   }
   /** Raster fallback for SVG export — one `<image>` covering the print area. */
@@ -1043,7 +1334,9 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
       height,
       tileW,
       tileH,
-      { x: centre.x - shift.x, y: centre.y - shift.y }
+      { x: centre.x - shift.x, y: centre.y - shift.y },
+      // The fallback raster is built at 1:1, so a device pixel is a canvas unit.
+      this.drawSize(tileW, tileH, TILE_BLEED_DEVICE_PX)
     );
     return [
       `<g transform="rotate(${-angle}) translate(${-centre.x} ${-centre.y})">`,
@@ -1083,18 +1376,64 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     });
     return Promise.resolve(copy);
   }
+  /**
+   * The source's tile footprint: its bounding box, minus a stroke it reserves
+   * room for but never paints.
+   *
+   * fabric keeps `strokeWidth` inside an object's box whether or not a `stroke`
+   * colour paints it, and the built-in shapes arrive with `strokeWidth: 1` and no
+   * stroke. Stepping the grid by that box puts a transparent seam between every
+   * pair of neighbours at zero spacing: the artwork is a pixel narrower than the
+   * box it is stepped by.
+   */
+  sourceBox() {
+    const rect = this.source.getBoundingRect();
+    if (paintsStroke(this.source)) return { width: rect.width, height: rect.height };
+    const dims = this.source._getTransformedDimensions({ strokeWidth: 0 });
+    const radians = (this.source.angle ?? 0) * Math.PI / 180;
+    const cos = Math.abs(Math.cos(radians));
+    const sin = Math.abs(Math.sin(radians));
+    return {
+      width: dims.x * cos + dims.y * sin,
+      height: dims.x * sin + dims.y * cos
+    };
+  }
   /** The source's on-canvas width, before the tile scale. */
   baseW() {
-    return Math.max(1, this.source.getBoundingRect().width);
+    return Math.max(1, this.sourceBox().width);
+  }
+  /** The source's on-canvas height, before the tile scale. */
+  baseH() {
+    return Math.max(1, this.sourceBox().height);
+  }
+  /**
+   * Size to paint the snapshot at, for a tile of `tileW × tileH`.
+   *
+   * The snapshot is NOT exactly the source's box: `toCanvasElement` rounds the
+   * raster up to whole pixels and pads it further for a shadow. Painting it into
+   * the tile step would squeeze the artwork inside that padding — every tile
+   * shrinks by up to a pixel and the grid shows transparent seams at zero
+   * spacing. So the bitmap is painted at its own footprint, scaled by the same
+   * factor the tile is, and the step stays the source's box.
+   */
+  drawSize(tileW, tileH, bleed = 0) {
+    const snapshot = this.snapshotEl;
+    if (!snapshot || this.snapshotScale <= 0) {
+      return { width: tileW + bleed, height: tileH + bleed };
+    }
+    return {
+      width: snapshot.width / this.snapshotScale * (tileW / this.baseW()) + bleed,
+      height: snapshot.height / this.snapshotScale * (tileH / this.baseH()) + bleed
+    };
   }
   /** Tile size from the config alone, ignoring any in-flight gesture. */
   baseTile() {
-    const rect = this.source.getBoundingRect();
+    const box = this.sourceBox();
     const scale = Math.max(1, this.config.scale ?? 100) / 100;
     const floor = this.tileFloor();
     return {
-      tileW: Math.max(floor, rect.width * scale),
-      tileH: Math.max(floor, rect.height * scale)
+      tileW: Math.max(floor, box.width * scale),
+      tileH: Math.max(floor, box.height * scale)
     };
   }
   /** Tile size as drawn right now, including a live scale gesture. */
@@ -1157,6 +1496,12 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     return Math.max(0.05, Math.min(requested, budgeted));
   }
 };
+function paintsStroke(object) {
+  if (!object.strokeWidth || object.strokeWidth <= 0) return false;
+  const { stroke } = object;
+  if (typeof stroke === "string") return stroke !== "" && stroke !== "transparent";
+  return stroke !== null && stroke !== void 0;
+}
 function clampPercent(value) {
   if (typeof value !== "number" || !Number.isFinite(value)) return 0;
   return Math.max(-100, Math.min(100, value));
@@ -1395,90 +1740,153 @@ function restoreLocks(obj, locks) {
 
 // src/text-curve.ts
 import { Path } from "fabric";
-var DEFAULT_TEXT_CURVE = { arc: 0, wave: 0 };
+
+// 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 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 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 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 Path(curve.data, { visible: false, objectCaching: false });
 }
 var TextCurveManager = class {
   constructor(canvas, layers, history, events) {
@@ -1495,33 +1903,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 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?.();
@@ -1534,12 +1944,14 @@ 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;
@@ -1552,7 +1964,77 @@ var TextCurveManager = class {
       if (layer.meta.curve) this.refresh(layer.id);
     }
   }
+  /**
+   * 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 });
   }
@@ -2083,6 +2565,11 @@ 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;
 }
 
@@ -2658,10 +3145,10 @@ var MaskController = class {
 };
 
 // src/masks/manager.ts
-import { Group as Group5 } from "fabric";
+import { Group as Group6 } from "fabric";
 
 // src/masks/compose.ts
-import { Group, Rect as Rect2 } from "fabric";
+import { Group as Group2, Rect as Rect2 } from "fabric";
 var MODE_OPERATION = {
   add: "source-over",
   subtract: "destination-out",
@@ -2698,7 +3185,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 Group(withBase, {
+  return new Group2(withBase, {
     absolutePositioned: options.absolute,
     // Cached, so the children's compositing operations resolve against each
     // other instead of against the page underneath the mask.
@@ -2874,7 +3361,7 @@ var MaskEditController = class {
 };
 
 // src/masks/store.ts
-import { Group as Group4 } from "fabric";
+import { Group as Group5 } from "fabric";
 
 // src/masks/host.ts
 import { Rect as Rect3 } from "fabric";
@@ -2931,9 +3418,9 @@ function hostBoxOf(canvas, host, absolute) {
 }
 
 // src/masks/install.ts
-import { Group as Group3 } from "fabric";
+import { Group as Group4 } from "fabric";
 function convertSpace(host, sources, absolute) {
-  const wasAbsolute = host.clipPath instanceof Group3 ? host.clipPath.absolutePositioned : absolute;
+  const wasAbsolute = host.clipPath instanceof Group4 ? host.clipPath.absolutePositioned : absolute;
   if (absolute === wasAbsolute) return;
   for (const source of sources) {
     if (absolute) toCanvasSpace(source, host);
@@ -3025,7 +3512,7 @@ var MaskStackStore = class {
     const clip = host.clipPath;
     if (!clip) return [];
     const entries = this.list(target);
-    if (entries.length === 0 || !(clip instanceof Group4)) return [asObject(clip)];
+    if (entries.length === 0 || !(clip instanceof Group5)) return [asObject(clip)];
     const children = unwrapGroup(clip);
     const extra = children.length - entries.length;
     return extra > 0 ? children.slice(extra) : children;
@@ -3125,7 +3612,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 Group5 ? host.clipPath : null;
+    const group = host.clipPath instanceof Group6 ? host.clipPath : null;
     if (!group) return false;
     const children = group.getObjects();
     const child = children[children.length - entries.length + index];
@@ -3520,7 +4007,7 @@ var CanvasEditor = class {
     }
   }
   addText(text, options) {
-    const textbox = new Textbox(text, {
+    const textbox = new Textbox2(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
@@ -3561,20 +4048,30 @@ var CanvasEditor = class {
         return value === void 0 ? token : escapeXml(value);
       })
     );
-    const { objects, options } = await loadSVGFromString(resolved);
-    const validObjects = objects.filter((object) => object !== null);
-    if (validObjects.length === 0) throw new Error("Template SVG contains no renderable objects");
-    const group = util5.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();
@@ -3586,6 +4083,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;
@@ -3648,42 +4149,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 Group6(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 Group7(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;
@@ -4430,6 +4944,7 @@ export {
   applyLayerShadow,
   applyObjectSelectionStyle,
   applySelectionStyle,
+  buildCurveLinePaths,
   buildCurvePathData,
   clamp,
   clearTextureMaskCache,
@@ -4441,6 +4956,7 @@ export {
   displaceRgba,
   drawTiles,
   escapeXml,
+  explodeTemplateSvg,
   exportDataURL,
   exportMockup,
   exportPNG,
@@ -4453,6 +4969,7 @@ export {
   isShapeMaskId,
   isTextureMaskId,
   needsAbsoluteSpace,
+  normalizeTextCurve,
   readLayerShadow,
   renderTextureMask,
   resetTransform,
@@ -4461,6 +4978,8 @@ export {
   sanitizeSvg,
   serializeEditor,
   shapeMaskPathData,
+  textPathCurve,
+  textPathSpec,
   toCanvasSpace,
   toHostSpace,
   unwrapGroup