@pixldocs/canvas-renderer 0.5.204 → 0.5.206

package/dist/{index-pfkM2NbI.cjs → index-B1kaODSZ.cjs}

@@ -3649,17 +3649,14 @@ async function normalizeSvgImageDimensions(fabricImage, imageUrl, sourceFormat)
   const el = ((_a = fabricImage.getElement) == null ? void 0 : _a.call(fabricImage)) ?? fabricImage._element;
   let w = 0;
   let h = 0;
-  if (el && typeof el.naturalWidth === "number" && typeof el.naturalHeight === "number" && el.naturalWidth > 0 && el.naturalHeight > 0) {
+  const dims = await loadSvgDimensions(imageUrl);
+  if (dims && dims.width > 0 && dims.height > 0) {
+    w = dims.width;
+    h = dims.height;
+  } else if (el && typeof el.naturalWidth === "number" && typeof el.naturalHeight === "number" && el.naturalWidth > 0 && el.naturalHeight > 0) {
     w = el.naturalWidth;
     h = el.naturalHeight;
   }
-  if (w <= 0 || h <= 0) {
-    const dims = await loadSvgDimensions(imageUrl);
-    if (dims && dims.width > 0 && dims.height > 0) {
-      w = dims.width;
-      h = dims.height;
-    }
-  }
   if (w > 0 && h > 0) {
     fabricImage.set({ width: w, height: h });
     fabricImage.setCoords();
@@ -5713,6 +5710,134 @@ function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canva
     return true;
   });
 }
+const clamp01$1 = (v) => Math.max(0, Math.min(1, Number.isFinite(v) ? v : 0));
+function arcPath(w, sag, up) {
+  if (sag <= 0.5) return `M 0 0 L ${w} 0`;
+  const r = (sag * sag + w / 2 * (w / 2)) / (2 * sag);
+  const sweep = 1;
+  const y0 = sag;
+  const y1 = sag;
+  return `M 0 ${y0} A ${r.toFixed(2)} ${r.toFixed(2)} 0 0 ${sweep} ${w} ${y1}`;
+}
+function sampledPath(fn, steps = 60) {
+  const parts = [];
+  for (let i = 0; i <= steps; i++) {
+    const [x, y] = fn(i / steps);
+    parts.push(i === 0 ? `M ${x.toFixed(2)} ${y.toFixed(2)}` : `L ${x.toFixed(2)} ${y.toFixed(2)}`);
+  }
+  return parts.join(" ");
+}
+function resolveTextPath(cfg, width, fontSize) {
+  if (!cfg || !cfg.preset || cfg.preset === "none") return null;
+  const w = Math.max(1, width);
+  const fs = Math.max(4, fontSize);
+  const t = clamp01$1(cfg.intensity ?? 0.5);
+  if (cfg.bezier && cfg.preset !== "circle" && cfg.preset !== "rise" && cfg.preset !== "angle") {
+    const { p0, c0, c1, p1 } = cfg.bezier;
+    const minX = Math.min(p0[0], c0[0], c1[0], p1[0]);
+    const maxX = Math.max(p0[0], c0[0], c1[0], p1[0]);
+    const minY = Math.min(p0[1], c0[1], c1[1], p1[1]);
+    const maxY = Math.max(p0[1], c0[1], c1[1], p1[1]);
+    return {
+      d: `M ${p0[0]} ${p0[1]} C ${c0[0]} ${c0[1]}, ${c1[0]} ${c1[1]}, ${p1[0]} ${p1[1]}`,
+      bbox: { width: maxX - minX, height: maxY - minY + fs * 1.4 }
+    };
+  }
+  if (cfg.preset === "custom") {
+    if (!cfg.path) return null;
+    return { d: cfg.path, bbox: cfg.bbox ?? { width: w, height: fs * 2 } };
+  }
+  switch (cfg.preset) {
+    case "arch": {
+      const sag = t * w * 0.45;
+      return { d: arcPath(w, sag), bbox: { width: w, height: sag + fs * 1.4 } };
+    }
+    case "rise":
+    case "angle": {
+      const ep = cfg.endpoints;
+      const defaultDy = t * fs * 3;
+      const leftY = ep && Number.isFinite(ep.leftY) ? ep.leftY : defaultDy;
+      const rightY = ep && Number.isFinite(ep.rightY) ? ep.rightY : 0;
+      const lineMid = (leftY + rightY) / 2;
+      const hasCenterHandle = ep && Number.isFinite(ep.centerY);
+      const rawCurve = Number.isFinite(cfg.curve) ? cfg.curve : 0;
+      const curveAmt = Math.max(-1, Math.min(1, rawCurve));
+      const curveAmp = Math.min(w * 0.18, fs * 4);
+      const centerY = hasCenterHandle ? ep.centerY : lineMid - curveAmt * curveAmp;
+      if (Math.abs(centerY - lineMid) < 0.5) {
+        const minY2 = Math.min(leftY, rightY);
+        const maxY2 = Math.max(leftY, rightY);
+        return {
+          d: `M 0 ${leftY.toFixed(2)} L ${w} ${rightY.toFixed(2)}`,
+          bbox: { width: w, height: maxY2 - minY2 + fs * 1.4 }
+        };
+      }
+      const controlY = 2 * centerY - lineMid;
+      const minY = Math.min(leftY, rightY, centerY);
+      const maxY = Math.max(leftY, rightY, centerY);
+      return {
+        d: `M 0 ${leftY.toFixed(2)} Q ${(w / 2).toFixed(2)} ${controlY.toFixed(2)} ${w} ${rightY.toFixed(2)}`,
+        bbox: { width: w, height: maxY - minY + fs * 1.4 }
+      };
+    }
+    case "wave": {
+      const rawCurve = Number.isFinite(cfg.curve) ? cfg.curve : t;
+      const c = Math.max(-1, Math.min(1, rawCurve));
+      const amp = c * fs * 3;
+      const absAmp = Math.abs(amp);
+      const d = sampledPath((u) => [u * w, absAmp - amp * Math.sin(u * Math.PI)]);
+      return { d, bbox: { width: w, height: absAmp * 2 + fs * 1.4 } };
+    }
+    case "flag": {
+      const rawCurve = Number.isFinite(cfg.curve) ? cfg.curve : t;
+      const c = Math.max(-1, Math.min(1, rawCurve));
+      const amp = c * fs * 2.5;
+      const absAmp = Math.abs(amp);
+      const d = sampledPath((u) => [u * w, absAmp + amp * Math.sin(u * Math.PI * 2)]);
+      return { d, bbox: { width: w, height: absAmp * 2 + fs * 1.4 } };
+    }
+    case "circle": {
+      const auto = Math.max(fs * 1.5, w / Math.PI);
+      const r = Math.max(fs * 0.75, Number.isFinite(cfg.radius) && cfg.radius > 0 ? cfg.radius : auto);
+      return {
+        d: `M ${r} ${2 * r} A ${r} ${r} 0 1 1 ${r} 0 A ${r} ${r} 0 1 1 ${r} ${2 * r}`,
+        bbox: { width: 2 * r, height: 2 * r + fs * 1.4 }
+      };
+    }
+    default:
+      return null;
+  }
+}
+function measurePath(d) {
+  if (typeof document === "undefined") return null;
+  const svgNS = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(svgNS, "svg");
+  const path = document.createElementNS(svgNS, "path");
+  path.setAttribute("d", d);
+  svg.appendChild(path);
+  return path;
+}
+function resolveTextPathAlphabeticBaselineDy(ctx, sampleText, fontSize) {
+  const prevBaseline = ctx.textBaseline;
+  try {
+    ctx.textBaseline = "alphabetic";
+    const metrics = ctx.measureText(sampleText || "M");
+    const fontAscent = Number(metrics.fontBoundingBoxAscent);
+    const fontDescent = Number(metrics.fontBoundingBoxDescent);
+    if (Number.isFinite(fontAscent) && Number.isFinite(fontDescent) && fontAscent + fontDescent > 0) {
+      return (fontAscent - fontDescent) / 2;
+    }
+    const actualAscent = Number(metrics.actualBoundingBoxAscent);
+    const actualDescent = Number(metrics.actualBoundingBoxDescent);
+    if (Number.isFinite(actualAscent) && Number.isFinite(actualDescent) && actualAscent + actualDescent > 0) {
+      return (actualAscent - actualDescent) / 2;
+    }
+  } catch {
+  } finally {
+    ctx.textBaseline = prevBaseline;
+  }
+  return fontSize / 2;
+}
 const TextboxProto = fabric__namespace.Textbox.prototype;
 if (!TextboxProto.__pixldocsOrigCalcTextHeight) {
   TextboxProto.__pixldocsOrigCalcTextHeight = TextboxProto.calcTextHeight;
@@ -5754,23 +5879,988 @@ const stateProps = fabric__namespace.Textbox.prototype.stateProperties;
 if (Array.isArray(stateProps)) {
   if (!stateProps.includes("minBoxHeight")) stateProps.push("minBoxHeight");
   if (!stateProps.includes("verticalAlign")) stateProps.push("verticalAlign");
+  if (!stateProps.includes("textPath")) stateProps.push("textPath");
 }
 const cacheProps = fabric__namespace.Textbox.prototype.cacheProperties;
 if (Array.isArray(cacheProps)) {
   if (!cacheProps.includes("minBoxHeight")) cacheProps.push("minBoxHeight");
   if (!cacheProps.includes("verticalAlign")) cacheProps.push("verticalAlign");
+  if (!cacheProps.includes("textPath")) cacheProps.push("textPath");
+}
+const hasActiveTextPath = (obj) => {
+  const tp = obj.textPath;
+  return !!tp && !!tp.preset && tp.preset !== "none";
+};
+function applyWarpFillStyle(ctx, obj) {
+  const filler = obj.fill;
+  if (filler && typeof filler === "object" && Array.isArray(filler.colorStops) && filler.coords) {
+    try {
+      const halfW = (obj.width || 0) / 2;
+      const halfH = (obj.height || 0) / 2;
+      const c = filler.coords || {};
+      let live = null;
+      if (filler.type === "radial") {
+        live = ctx.createRadialGradient(
+          (Number(c.x1) || 0) - halfW,
+          (Number(c.y1) || 0) - halfH,
+          Math.max(0, Number(c.r1) || 0),
+          (Number(c.x2 ?? c.x1) || 0) - halfW,
+          (Number(c.y2 ?? c.y1) || 0) - halfH,
+          Math.max(0.1, Number(c.r2 ?? c.r) || Math.max(obj.width || 1, obj.height || 1) / 2)
+        );
+      } else {
+        live = ctx.createLinearGradient(
+          (Number(c.x1) || 0) - halfW,
+          (Number(c.y1) || 0) - halfH,
+          (Number(c.x2 ?? obj.width) || 0) - halfW,
+          (Number(c.y2) || 0) - halfH
+        );
+      }
+      for (const stop of filler.colorStops) {
+        live.addColorStop(Math.max(0, Math.min(1, Number(stop.offset) || 0)), stop.color || "#000");
+      }
+      ctx.fillStyle = live;
+      return { offsetX: 0, offsetY: 0 };
+    } catch {
+    }
+  }
+  if (typeof obj.handleFiller === "function") {
+    try {
+      return obj.handleFiller(ctx, "fillStyle", filler || "#000") || { offsetX: 0, offsetY: 0 };
+    } catch {
+    }
+  }
+  if (filler && typeof filler.toLive === "function") {
+    try {
+      ctx.fillStyle = filler.toLive(ctx) || "#000";
+      return { offsetX: 0, offsetY: 0 };
+    } catch {
+    }
+  }
+  ctx.fillStyle = typeof obj.fill === "string" ? obj.fill : "#000";
+  return { offsetX: 0, offsetY: 0 };
+}
+function parseCssColor(input) {
+  const fallback = [0, 0, 0, 1];
+  if (!input) return fallback;
+  const s = String(input).trim();
+  if (s.startsWith("#")) {
+    let hex = s.slice(1);
+    if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("");
+    if (hex.length === 4) hex = hex.split("").map((c) => c + c).join("");
+    if (hex.length === 6) {
+      const n = parseInt(hex, 16);
+      return [n >> 16 & 255, n >> 8 & 255, n & 255, 1];
+    }
+    if (hex.length === 8) {
+      const n = parseInt(hex, 16);
+      return [n >> 24 & 255, n >> 16 & 255, n >> 8 & 255, (n & 255) / 255];
+    }
+  }
+  const m = s.match(/^rgba?\s*\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.]+%?))?\s*\)$/i);
+  if (m) {
+    let a = 1;
+    if (m[4] != null) a = m[4].endsWith("%") ? parseFloat(m[4]) / 100 : parseFloat(m[4]);
+    return [parseFloat(m[1]), parseFloat(m[2]), parseFloat(m[3]), Number.isFinite(a) ? a : 1];
+  }
+  try {
+    const c = document.createElement("canvas").getContext("2d");
+    if (c) {
+      c.fillStyle = "#000";
+      c.fillStyle = s;
+      const computed = c.fillStyle;
+      return parseCssColor(computed.startsWith("#") || computed.startsWith("rgb") ? computed : "#000");
+    }
+  } catch {
+  }
+  return fallback;
+}
+function sampleGradientColor(stops, t) {
+  if (!stops || !stops.length) return "#000";
+  const sorted = [...stops].sort((a, b) => (a.offset || 0) - (b.offset || 0));
+  const u = Math.max(0, Math.min(1, t));
+  if (u <= (sorted[0].offset || 0)) return sorted[0].color || "#000";
+  if (u >= (sorted[sorted.length - 1].offset || 1)) return sorted[sorted.length - 1].color || "#000";
+  for (let i = 0; i < sorted.length - 1; i++) {
+    const a = sorted[i];
+    const b = sorted[i + 1];
+    const ao = a.offset || 0;
+    const bo = b.offset || 0;
+    if (u >= ao && u <= bo) {
+      const span = bo - ao || 1;
+      const k = (u - ao) / span;
+      const ca = parseCssColor(a.color);
+      const cb = parseCssColor(b.color);
+      const r = Math.round(ca[0] + (cb[0] - ca[0]) * k);
+      const g = Math.round(ca[1] + (cb[1] - ca[1]) * k);
+      const bl = Math.round(ca[2] + (cb[2] - ca[2]) * k);
+      const al = ca[3] + (cb[3] - ca[3]) * k;
+      return `rgba(${r}, ${g}, ${bl}, ${al.toFixed(3)})`;
+    }
+  }
+  return sorted[sorted.length - 1].color || "#000";
+}
+function getGradientStopsForFlow(obj) {
+  const f = obj.fill;
+  if (f && typeof f === "object" && Array.isArray(f.colorStops) && f.colorStops.length) {
+    return f.colorStops.map((s) => ({ offset: Number(s.offset) || 0, color: s.color || "#000" }));
+  }
+  return null;
+}
+function localPointFromCanvas(target, x, y) {
+  const point = new fabric__namespace.Point(x, y);
+  try {
+    return target.toLocalPoint(point, "left", "top");
+  } catch {
+    const inv = fabric__namespace.util.invertTransform(target.calcTransformMatrix());
+    const local = fabric__namespace.util.transformPoint(point, inv);
+    return new fabric__namespace.Point(local.x + (target.width || 0) / 2, local.y + (target.height || 0) / 2);
+  }
+}
+function localPointFromFrozenMatrix(target, x, y, matrix) {
+  const local = fabric__namespace.util.transformPoint(new fabric__namespace.Point(x, y), fabric__namespace.util.invertTransform(matrix));
+  return new fabric__namespace.Point(local.x + (target.width || 0) / 2, local.y + (target.height || 0) / 2);
+}
+function vectorFromFrozenMatrix(matrix, dx, dy) {
+  return new fabric__namespace.Point(matrix[0] * dx + matrix[2] * dy, matrix[1] * dx + matrix[3] * dy);
+}
+function scaleLocalToScreen(target, p) {
+  var _a;
+  const vpt = ((_a = target == null ? void 0 : target.canvas) == null ? void 0 : _a.viewportTransform) || [1, 0, 0, 1, 0, 0];
+  const zx = Math.abs(vpt[0] || 1);
+  const zy = Math.abs(vpt[3] || 1);
+  const sx = Math.abs((target == null ? void 0 : target.scaleX) || 1);
+  const sy = Math.abs((target == null ? void 0 : target.scaleY) || 1);
+  return new fabric__namespace.Point(p.x * sx * zx, p.y * sy * zy);
+}
+function applyTextPathControls(textbox) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  const obj = textbox;
+  if (!hasActiveTextPath(obj)) {
+    obj.__pdTextPathHovered = false;
+    if (obj.__pdTextPathControls) {
+      try {
+        const cu2 = fabric__namespace.controlsUtils;
+        const defaults = ((_a = cu2 == null ? void 0 : cu2.createTextboxDefaultControls) == null ? void 0 : _a.call(cu2)) ?? ((_b = cu2 == null ? void 0 : cu2.createObjectDefaultControls) == null ? void 0 : _b.call(cu2));
+        if (defaults) obj.controls = defaults;
+      } catch {
+      }
+      delete obj.controls.bzP0;
+      delete obj.controls.bzC0;
+      delete obj.controls.bzC1;
+      delete obj.controls.bzP1;
+      delete obj.controls.rsL;
+      delete obj.controls.rsR;
+      delete obj.controls.rsC;
+      delete obj.controls.bzMid;
+      delete obj.controls.bzMidT0;
+      delete obj.controls.bzMidT1;
+      delete obj.controls.tpRot;
+      delete obj.controls.tpPivot;
+      (_c = obj.setControlsVisibility) == null ? void 0 : _c.call(obj, { tl: true, tr: true, bl: true, br: true, mt: true, mb: true, ml: true, mr: true, mtr: true });
+      obj.hasBorders = true;
+      obj.__pdTextPathControls = false;
+      obj.setCoords();
+    }
+    return;
+  }
+  if (!obj.__pdTextPathHoverWired) {
+    obj.on("mouseover", () => {
+      var _a2;
+      if (!hasActiveTextPath(obj)) return;
+      obj.__pdTextPathHovered = true;
+      (_a2 = obj.canvas) == null ? void 0 : _a2.requestRenderAll();
+    });
+    obj.on("mouseout", () => {
+      var _a2;
+      obj.__pdTextPathHovered = false;
+      (_a2 = obj.canvas) == null ? void 0 : _a2.requestRenderAll();
+    });
+    obj.__pdTextPathHoverWired = true;
+  }
+  obj.controls = {};
+  const halfWOf = (t) => (t.width || 0) / 2;
+  const halfHOf = (t) => (t.height || 0) / 2;
+  const cu = fabric__namespace.controlsUtils;
+  const renderRotation = (ctx, left, top) => {
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.shadowColor = "rgba(0,0,0,0.25)";
+    ctx.shadowBlur = 2;
+    ctx.shadowOffsetY = 0.5;
+    ctx.fillStyle = "#ffffff";
+    ctx.strokeStyle = "#1d9bf0";
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.arc(0, 0, 6, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.shadowColor = "transparent";
+    ctx.stroke();
+    ctx.strokeStyle = "#1d9bf0";
+    ctx.lineWidth = 1.25;
+    ctx.beginPath();
+    ctx.arc(0, 0, 3, -Math.PI * 0.85, Math.PI * 0.75);
+    ctx.stroke();
+    ctx.restore();
+  };
+  const renderPivot = (ctx, left, top) => {
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.strokeStyle = "#1d9bf0";
+    ctx.fillStyle = "#ffffff";
+    ctx.lineWidth = 1.25;
+    ctx.beginPath();
+    ctx.arc(0, 0, 5, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(-3.5, 0);
+    ctx.lineTo(3.5, 0);
+    ctx.moveTo(0, -3.5);
+    ctx.lineTo(0, 3.5);
+    ctx.stroke();
+    ctx.fillStyle = "#1d9bf0";
+    ctx.beginPath();
+    ctx.arc(0, 0, 1.25, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+  };
+  const addRotationAndPivot = () => {
+    var _a2, _b2;
+    obj.controls.tpRot = new fabric__namespace.Control({
+      x: 0,
+      y: -0.5,
+      offsetY: -28,
+      cursorStyleHandler: cu == null ? void 0 : cu.rotationStyleHandler,
+      actionHandler: cu == null ? void 0 : cu.rotationWithSnapping,
+      actionName: "rotate",
+      render: renderRotation,
+      withConnection: false
+    });
+    obj.controls.tpPivot = new fabric__namespace.Control({
+      x: 0,
+      y: 0,
+      cursorStyle: "default",
+      actionName: "tpPivot",
+      actionHandler: () => false,
+      render: renderPivot
+    });
+    (_a2 = obj.setControlVisible) == null ? void 0 : _a2.call(obj, "tpRot", true);
+    (_b2 = obj.setControlVisible) == null ? void 0 : _b2.call(obj, "tpPivot", true);
+  };
+  if (((_d = obj.textPath) == null ? void 0 : _d.preset) === "circle") {
+    const getRadius = (target) => {
+      const tp = target.textPath || {};
+      const fs = target.fontSize || 16;
+      const w = target.width || 0;
+      const auto = Math.max(fs * 1.5, w / Math.PI);
+      const r = tp.radius;
+      return Math.max(fs * 0.75, Number.isFinite(r) && r > 0 ? r : auto);
+    };
+    const setRadius = (target, r) => {
+      var _a2;
+      const fs = target.fontSize || 16;
+      const clamped = Math.max(fs * 0.75, r);
+      if (!target.textPath) target.textPath = { preset: "circle" };
+      target.textPath.preset = "circle";
+      target.textPath.radius = clamped;
+      target.dirty = true;
+      (_a2 = target.canvas) == null ? void 0 : _a2.requestRenderAll();
+    };
+    const ringPoint = (target, dir) => {
+      const r = getRadius(target);
+      const cx = r - halfWOf(target);
+      const cy = r - halfHOf(target);
+      switch (dir) {
+        case "N":
+          return new fabric__namespace.Point(cx, cy - r);
+        case "E":
+          return new fabric__namespace.Point(cx + r, cy);
+        case "S":
+          return new fabric__namespace.Point(cx, cy + r);
+        case "W":
+          return new fabric__namespace.Point(cx - r, cy);
+      }
+    };
+    const positionAtRing = (dir) => (_d2, finalMatrix, target) => scaleLocalToScreen(target, ringPoint(target, dir)).transform(finalMatrix);
+    const dragRadius = (dir) => (_e2, transform, x, y) => {
+      const target = transform.target;
+      const state = transform.__pdCircleRadiusDrag || (transform.__pdCircleRadiusDrag = {
+        dir,
+        startRadius: getRadius(target),
+        startLeft: target.left || 0,
+        startTop: target.top || 0,
+        startMatrix: target.calcTransformMatrix(),
+        startLocal: null
+      });
+      if (!state.startLocal) state.startLocal = localPointFromFrozenMatrix(target, x, y, state.startMatrix);
+      const local = localPointFromFrozenMatrix(target, x, y, state.startMatrix);
+      const dx = local.x - state.startLocal.x;
+      const dy = local.y - state.startLocal.y;
+      let next = state.startRadius;
+      if (dir === "E") next = state.startRadius + dx / 2;
+      else if (dir === "W") next = state.startRadius - dx / 2;
+      else if (dir === "S") next = state.startRadius + dy / 2;
+      else next = state.startRadius - dy / 2;
+      const fs = target.fontSize || 16;
+      next = Math.max(fs * 0.75, next);
+      if (dir === "W") {
+        const appliedDx = (state.startRadius - next) * 2;
+        const move = vectorFromFrozenMatrix(state.startMatrix, appliedDx, 0);
+        target.set({ left: state.startLeft + move.x, top: state.startTop + move.y });
+      } else if (dir === "N") {
+        const appliedDy = (state.startRadius - next) * 2;
+        const move = vectorFromFrozenMatrix(state.startMatrix, 0, appliedDy);
+        target.set({ left: state.startLeft + move.x, top: state.startTop + move.y });
+      }
+      setRadius(target, next);
+      return true;
+    };
+    const renderRingHandle = (ctx, left, top) => {
+      ctx.save();
+      ctx.translate(left, top);
+      ctx.shadowColor = "rgba(0,0,0,0.25)";
+      ctx.shadowBlur = 2;
+      ctx.shadowOffsetY = 0.5;
+      ctx.fillStyle = "#ffffff";
+      ctx.strokeStyle = "#1d9bf0";
+      ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      ctx.arc(0, 0, 5.5, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.shadowColor = "transparent";
+      ctx.stroke();
+      ctx.restore();
+    };
+    obj.controls.crN = new fabric__namespace.Control({ x: 0, y: -0.5, cursorStyle: "ns-resize", actionName: "textPath", actionHandler: dragRadius("N"), positionHandler: positionAtRing("N"), render: renderRingHandle });
+    obj.controls.crE = new fabric__namespace.Control({ x: 0.5, y: 0, cursorStyle: "ew-resize", actionName: "textPath", actionHandler: dragRadius("E"), positionHandler: positionAtRing("E"), render: renderRingHandle });
+    obj.controls.crS = new fabric__namespace.Control({ x: 0, y: 0.5, cursorStyle: "ns-resize", actionName: "textPath", actionHandler: dragRadius("S"), positionHandler: positionAtRing("S"), render: renderRingHandle });
+    obj.controls.crW = new fabric__namespace.Control({ x: -0.5, y: 0, cursorStyle: "ew-resize", actionName: "textPath", actionHandler: dragRadius("W"), positionHandler: positionAtRing("W"), render: renderRingHandle });
+    (_e = obj.setControlVisible) == null ? void 0 : _e.call(obj, "crN", true);
+    (_f = obj.setControlVisible) == null ? void 0 : _f.call(obj, "crE", true);
+    (_g = obj.setControlVisible) == null ? void 0 : _g.call(obj, "crS", true);
+    (_h = obj.setControlVisible) == null ? void 0 : _h.call(obj, "crW", true);
+    addRotationAndPivot();
+    obj.hasBorders = false;
+    obj.hasControls = true;
+    obj.objectCaching = false;
+    obj.__pdTextPathControls = true;
+    obj.setCoords();
+    return;
+  }
+  if (((_i = obj.textPath) == null ? void 0 : _i.preset) === "rise") {
+    const getEndpoints = (target) => {
+      const w = target.width || 0;
+      const fs = target.fontSize || 16;
+      const tp = target.textPath || {};
+      const ep = tp.endpoints;
+      const defaultLeftY = fs * 1.5;
+      const defaultRightY = fs * 0.5;
+      const leftY = ep && Number.isFinite(ep.leftY) ? ep.leftY : defaultLeftY;
+      const rightY = ep && Number.isFinite(ep.rightY) ? ep.rightY : defaultRightY;
+      const lineMid = (leftY + rightY) / 2;
+      const rawCurve = Number.isFinite(tp.curve) ? tp.curve : 0;
+      const curveAmp = Math.min(w * 0.18, fs * 4);
+      const centerY = ep && Number.isFinite(ep.centerY) ? ep.centerY : lineMid - Math.max(-1, Math.min(1, rawCurve)) * curveAmp;
+      return { leftY, centerY, rightY };
+    };
+    const setEndpoints = (target, next) => {
+      var _a2;
+      target.width || 1;
+      target.fontSize || 16;
+      const lineMid = (next.leftY + next.rightY) / 2;
+      const straight = { leftY: next.leftY, centerY: lineMid, rightY: next.rightY };
+      if (!target.textPath) target.textPath = { preset: "rise" };
+      target.textPath = {
+        ...target.textPath,
+        preset: "rise",
+        curve: 0,
+        endpoints: straight
+      };
+      if (target.skewY) target.set("skewY", 0);
+      target.dirty = true;
+      (_a2 = target.canvas) == null ? void 0 : _a2.requestRenderAll();
+    };
+    const positionAtAngleHandle = (key) => (_d2, finalMatrix, target) => {
+      const ep = getEndpoints(target);
+      const x = key === "leftY" ? 0 : key === "rightY" ? target.width || 0 : (target.width || 0) / 2;
+      return scaleLocalToScreen(target, new fabric__namespace.Point(x - halfWOf(target), ep[key] - halfHOf(target))).transform(finalMatrix);
+    };
+    const dragAngleHandle = (key) => (_e2, transform, x, y) => {
+      const target = transform.target;
+      const local = localPointFromCanvas(target, x, y);
+      const current = getEndpoints(target);
+      const next = { ...current, [key]: local.y };
+      setEndpoints(target, next);
+      return true;
+    };
+    const renderAngleHandle = (ctx, left, top) => {
+      ctx.save();
+      ctx.translate(left, top);
+      ctx.shadowColor = "rgba(0,0,0,0.25)";
+      ctx.shadowBlur = 2;
+      ctx.shadowOffsetY = 0.5;
+      ctx.fillStyle = "#ffffff";
+      ctx.strokeStyle = "#1d9bf0";
+      ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      ctx.arc(0, 0, 5.5, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.shadowColor = "transparent";
+      ctx.stroke();
+      ctx.restore();
+    };
+    if (obj.skewY) obj.set("skewY", 0);
+    obj.controls.rsL = new fabric__namespace.Control({ x: -0.5, y: 0, cursorStyle: "ns-resize", actionName: "textPath", actionHandler: dragAngleHandle("leftY"), positionHandler: positionAtAngleHandle("leftY"), render: renderAngleHandle });
+    obj.controls.rsR = new fabric__namespace.Control({ x: 0.5, y: 0, cursorStyle: "ns-resize", actionName: "textPath", actionHandler: dragAngleHandle("rightY"), positionHandler: positionAtAngleHandle("rightY"), render: renderAngleHandle });
+    (_j = obj.setControlVisible) == null ? void 0 : _j.call(obj, "rsL", true);
+    (_k = obj.setControlVisible) == null ? void 0 : _k.call(obj, "rsR", true);
+    addRotationAndPivot();
+    obj.hasBorders = false;
+    obj.hasControls = true;
+    obj.objectCaching = false;
+    obj.__pdTextPathControls = true;
+    obj.setCoords();
+    return;
+  }
+  const ensureBezier = (target) => {
+    const tp = target.textPath;
+    if (tp == null ? void 0 : tp.bezier) return tp.bezier;
+    const resolved = resolveTextPath(tp, target.width || 0, target.fontSize || 16);
+    const path = resolved ? measurePath(resolved.d) : null;
+    if (!path) {
+      const w = target.width || 0;
+      const fs = target.fontSize || 16;
+      const h = target.height || fs * 1.4;
+      const cy = h / 2;
+      const handleLen = w * 0.25;
+      const fallback = {
+        p0: [0, cy],
+        c0: [handleLen, cy],
+        c1: [w - handleLen, cy],
+        p1: [w, cy]
+      };
+      target.textPath = { ...tp || { preset: "custom" }, bezier: fallback };
+      return fallback;
+    }
+    const len = path.getTotalLength();
+    const sample = (u) => {
+      const p = path.getPointAtLength(u * len);
+      return [p.x, p.y];
+    };
+    const p0 = sample(0);
+    const a = sample(1 / 3);
+    const b = sample(2 / 3);
+    const p1 = sample(1);
+    const c0 = [
+      (-5 * p0[0] + 18 * a[0] - 9 * b[0] + 2 * p1[0]) / 6,
+      (-5 * p0[1] + 18 * a[1] - 9 * b[1] + 2 * p1[1]) / 6
+    ];
+    const c1 = [
+      (2 * p0[0] - 9 * a[0] + 18 * b[0] - 5 * p1[0]) / 6,
+      (2 * p0[1] - 9 * a[1] + 18 * b[1] - 5 * p1[1]) / 6
+    ];
+    const solved = { p0, c0, c1, p1 };
+    target.textPath = { ...tp || { preset: "custom" }, bezier: solved };
+    return solved;
+  };
+  ensureBezier(obj);
+  const positionAtBezier = (key) => (_d2, finalMatrix, target) => {
+    const bz = ensureBezier(target);
+    const [bx, by] = bz[key];
+    return scaleLocalToScreen(target, new fabric__namespace.Point(bx - halfWOf(target), by - halfHOf(target))).transform(finalMatrix);
+  };
+  const bezierMidpoint = (bz) => [
+    0.125 * bz.p0[0] + 0.375 * bz.c0[0] + 0.375 * bz.c1[0] + 0.125 * bz.p1[0],
+    0.125 * bz.p0[1] + 0.375 * bz.c0[1] + 0.375 * bz.c1[1] + 0.125 * bz.p1[1]
+  ];
+  const positionAtMid = (_d2, finalMatrix, target) => {
+    const bz = ensureBezier(target);
+    const [mx, my] = bezierMidpoint(bz);
+    return scaleLocalToScreen(target, new fabric__namespace.Point(mx - halfWOf(target), my - halfHOf(target))).transform(finalMatrix);
+  };
+  const midTangentVector = (bz) => {
+    let dx = bz.p1[0] + 3 * bz.c1[0] - 3 * bz.c0[0] - bz.p0[0];
+    let dy = bz.p1[1] + 3 * bz.c1[1] - 3 * bz.c0[1] - bz.p0[1];
+    const dlen = Math.hypot(dx, dy) || 1;
+    dx /= dlen;
+    dy /= dlen;
+    const mx = 0.125 * bz.p0[0] + 0.375 * bz.c0[0] + 0.375 * bz.c1[0] + 0.125 * bz.p1[0];
+    const my = 0.125 * bz.p0[1] + 0.375 * bz.c0[1] + 0.375 * bz.c1[1] + 0.125 * bz.p1[1];
+    const projC1 = (bz.c1[0] - mx) * dx + (bz.c1[1] - my) * dy;
+    const projC0 = (mx - bz.c0[0]) * dx + (my - bz.c0[1]) * dy;
+    const reach = Math.max(8, (Math.abs(projC1) + Math.abs(projC0)) / 2);
+    return { vx: dx * reach, vy: dy * reach };
+  };
+  const positionAtMidTangent = (side) => (_d2, finalMatrix, target) => {
+    const bz = ensureBezier(target);
+    const [mx, my] = bezierMidpoint(bz);
+    const { vx, vy } = midTangentVector(bz);
+    const px = mx + side * vx;
+    const py = my + side * vy;
+    return scaleLocalToScreen(target, new fabric__namespace.Point(px - halfWOf(target), py - halfHOf(target))).transform(finalMatrix);
+  };
+  const makeMidTangentDrag = (side) => (_e2, transform, x, y) => {
+    var _a2;
+    const target = transform.target;
+    const local = localPointFromCanvas(target, x, y);
+    const current = ensureBezier(target);
+    const bz = {
+      p0: [...current.p0],
+      c0: [...current.c0],
+      c1: [...current.c1],
+      p1: [...current.p1]
+    };
+    const [mx, my] = bezierMidpoint(bz);
+    const oldV = midTangentVector(bz);
+    const nvx = (local.x - mx) * side;
+    const nvy = (local.y - my) * side;
+    const oldLen2 = oldV.vx * oldV.vx + oldV.vy * oldV.vy;
+    if (oldLen2 < 1e-6) return true;
+    const a = (oldV.vx * nvx + oldV.vy * nvy) / oldLen2;
+    const b = (oldV.vx * nvy - oldV.vy * nvx) / oldLen2;
+    const apply = (px, py) => {
+      const rx = px - mx;
+      const ry = py - my;
+      return [mx + a * rx - b * ry, my + b * rx + a * ry];
+    };
+    bz.c0 = apply(bz.c0[0], bz.c0[1]);
+    bz.c1 = apply(bz.c1[0], bz.c1[1]);
+    target.textPath = { ...target.textPath || { preset: "custom" }, bezier: bz };
+    target.dirty = true;
+    (_a2 = target.canvas) == null ? void 0 : _a2.requestRenderAll();
+    return true;
+  };
+  const makeDrag = (key) => (_e2, transform, x, y) => {
+    var _a2;
+    const target = transform.target;
+    const local = localPointFromCanvas(target, x, y);
+    const current = ensureBezier(target);
+    const bz = { p0: [...current.p0], c0: [...current.c0], c1: [...current.c1], p1: [...current.p1] };
+    if (key === "p0" || key === "p1") {
+      const ctrlKey = key === "p0" ? "c0" : "c1";
+      const oldAnchor = bz[key];
+      const oldCtrl = bz[ctrlKey];
+      const dx = local.x - oldAnchor[0];
+      const dy = local.y - oldAnchor[1];
+      bz[key] = [local.x, local.y];
+      bz[ctrlKey] = [oldCtrl[0] + dx, oldCtrl[1] + dy];
+    } else {
+      bz[key] = [local.x, local.y];
+    }
+    target.textPath = { ...target.textPath || { preset: "custom" }, bezier: bz };
+    target.dirty = true;
+    (_a2 = target.canvas) == null ? void 0 : _a2.requestRenderAll();
+    return true;
+  };
+  const makeMidDrag = () => (_e2, transform, x, y) => {
+    var _a2;
+    const target = transform.target;
+    const local = localPointFromCanvas(target, x, y);
+    const current = ensureBezier(target);
+    const bz = {
+      p0: [...current.p0],
+      c0: [...current.c0],
+      c1: [...current.c1],
+      p1: [...current.p1]
+    };
+    const [mx, my] = bezierMidpoint(bz);
+    const dx = (local.x - mx) / 0.75;
+    const dy = (local.y - my) / 0.75;
+    bz.c0 = [bz.c0[0] + dx, bz.c0[1] + dy];
+    bz.c1 = [bz.c1[0] + dx, bz.c1[1] + dy];
+    target.textPath = { ...target.textPath || { preset: "custom" }, bezier: bz };
+    target.dirty = true;
+    (_a2 = target.canvas) == null ? void 0 : _a2.requestRenderAll();
+    return true;
+  };
+  const renderAnchor = (ctx, left, top) => {
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.shadowColor = "rgba(0,0,0,0.25)";
+    ctx.shadowBlur = 2;
+    ctx.shadowOffsetY = 0.5;
+    ctx.fillStyle = "#ffffff";
+    ctx.strokeStyle = "#1d9bf0";
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.arc(0, 0, 5, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.shadowColor = "transparent";
+    ctx.stroke();
+    ctx.restore();
+  };
+  const renderControlHandle = (ctx, left, top) => {
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.shadowColor = "rgba(0,0,0,0.25)";
+    ctx.shadowBlur = 2;
+    ctx.shadowOffsetY = 0.5;
+    ctx.fillStyle = "#1d9bf0";
+    ctx.strokeStyle = "#ffffff";
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.arc(0, 0, 4, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.shadowColor = "transparent";
+    ctx.stroke();
+    ctx.restore();
+  };
+  obj.controls.bzP0 = new fabric__namespace.Control({ x: -0.5, y: 0, cursorStyle: "move", actionName: "textPath", actionHandler: makeDrag("p0"), positionHandler: positionAtBezier("p0"), render: renderAnchor });
+  obj.controls.bzP1 = new fabric__namespace.Control({ x: 0.5, y: 0, cursorStyle: "move", actionName: "textPath", actionHandler: makeDrag("p1"), positionHandler: positionAtBezier("p1"), render: renderAnchor });
+  obj.controls.bzC0 = new fabric__namespace.Control({ x: -0.25, y: 0, cursorStyle: "move", actionName: "textPath", actionHandler: makeDrag("c0"), positionHandler: positionAtBezier("c0"), render: renderControlHandle });
+  obj.controls.bzC1 = new fabric__namespace.Control({ x: 0.25, y: 0, cursorStyle: "move", actionName: "textPath", actionHandler: makeDrag("c1"), positionHandler: positionAtBezier("c1"), render: renderControlHandle });
+  obj.controls.bzMid = new fabric__namespace.Control({ x: 0, y: 0, cursorStyle: "move", actionName: "textPath", actionHandler: makeMidDrag(), positionHandler: positionAtMid, render: renderAnchor });
+  obj.controls.bzMidT0 = new fabric__namespace.Control({ x: 0, y: 0, cursorStyle: "move", actionName: "textPath", actionHandler: makeMidTangentDrag(-1), positionHandler: positionAtMidTangent(-1), render: renderControlHandle });
+  obj.controls.bzMidT1 = new fabric__namespace.Control({ x: 0, y: 0, cursorStyle: "move", actionName: "textPath", actionHandler: makeMidTangentDrag(1), positionHandler: positionAtMidTangent(1), render: renderControlHandle });
+  (_l = obj.setControlVisible) == null ? void 0 : _l.call(obj, "bzP0", true);
+  (_m = obj.setControlVisible) == null ? void 0 : _m.call(obj, "bzC0", true);
+  (_n = obj.setControlVisible) == null ? void 0 : _n.call(obj, "bzC1", true);
+  (_o = obj.setControlVisible) == null ? void 0 : _o.call(obj, "bzP1", true);
+  (_p = obj.setControlVisible) == null ? void 0 : _p.call(obj, "bzMid", true);
+  (_q = obj.setControlVisible) == null ? void 0 : _q.call(obj, "bzMidT0", true);
+  (_r = obj.setControlVisible) == null ? void 0 : _r.call(obj, "bzMidT1", true);
+  addRotationAndPivot();
+  obj.hasBorders = false;
+  obj.hasControls = true;
+  obj.__pdTextPathControls = true;
+  obj.setCoords();
+}
+function computeWarpBoundsLocal(obj) {
+  const resolved = resolveTextPath(obj.textPath, obj.width || 0, obj.fontSize || 16);
+  const path = resolved ? measurePath(resolved.d) : null;
+  if (!path) return null;
+  const len = path.getTotalLength();
+  if (!Number.isFinite(len) || len <= 0) return null;
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  const steps = 96;
+  for (let i = 0; i <= steps; i++) {
+    const p = path.getPointAtLength(len * i / steps);
+    if (p.x < minX) minX = p.x;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.y > maxY) maxY = p.y;
+  }
+  const fs = obj.fontSize || 16;
+  const halfW = (obj.width || 0) / 2;
+  const halfH = (obj.height || 0) / 2;
+  return {
+    minX: minX - fs * 0.2 - halfW,
+    maxX: maxX + fs * 0.2 - halfW,
+    minY: minY - fs * 1.05 - halfH,
+    maxY: maxY + fs * 0.35 - halfH
+  };
+}
+function computeCircleWarpBoundsLocal(obj) {
+  var _a;
+  if (((_a = obj.textPath) == null ? void 0 : _a.preset) !== "circle") return null;
+  const fs = obj.fontSize || 16;
+  const w = obj.width || 0;
+  const auto = Math.max(fs * 1.5, w / Math.PI);
+  const rRaw = obj.textPath.radius;
+  const r = Math.max(fs * 0.75, Number.isFinite(rRaw) && rRaw > 0 ? rRaw : auto);
+  const halfW = w / 2;
+  const halfH = (obj.height || 0) / 2;
+  const cx = r - halfW;
+  const cy = r - halfH;
+  return { minX: cx - r - fs * 0.2, maxX: cx + r + fs * 0.2, minY: cy - r - fs * 0.6, maxY: cy + r + fs * 0.6 };
+}
+function getTextPathHitBounds(obj) {
+  var _a;
+  return ((_a = obj.textPath) == null ? void 0 : _a.preset) === "circle" ? computeCircleWarpBoundsLocal(obj) : computeWarpBoundsLocal(obj);
+}
+function textPathBoundsContainScenePoint(obj, point) {
+  const bounds = getTextPathHitBounds(obj);
+  if (!bounds) return false;
+  try {
+    const inv = fabric__namespace.util.invertTransform(obj.calcTransformMatrix());
+    const local = fabric__namespace.util.transformPoint(point, inv);
+    return local.x >= bounds.minX && local.x <= bounds.maxX && local.y >= bounds.minY && local.y <= bounds.maxY;
+  } catch {
+    return false;
+  }
+}
+function drawTextPathBounds(ctx, obj, bounds) {
+  var _a;
+  if (!obj.canvas) return;
+  const retina = ((_a = obj.getCanvasRetinaScaling) == null ? void 0 : _a.call(obj)) || 1;
+  const matrix = fabric__namespace.util.multiplyTransformMatrices(obj.canvas.viewportTransform || [1, 0, 0, 1, 0, 0], obj.calcTransformMatrix());
+  const corners = [
+    new fabric__namespace.Point(bounds.minX, bounds.minY),
+    new fabric__namespace.Point(bounds.maxX, bounds.minY),
+    new fabric__namespace.Point(bounds.maxX, bounds.maxY),
+    new fabric__namespace.Point(bounds.minX, bounds.maxY)
+  ].map((p) => fabric__namespace.util.transformPoint(p, matrix));
+  ctx.save();
+  ctx.setTransform(retina, 0, 0, retina, 0, 0);
+  ctx.strokeStyle = "rgba(29, 155, 240, 0.9)";
+  ctx.lineWidth = 1.25;
+  ctx.setLineDash([5, 4]);
+  ctx.beginPath();
+  ctx.moveTo(corners[0].x, corners[0].y);
+  for (let i = 1; i < corners.length; i++) ctx.lineTo(corners[i].x, corners[i].y);
+  ctx.closePath();
+  ctx.stroke();
+  ctx.restore();
+}
+if (typeof TextboxProto._renderControls === "function" && !TextboxProto.__pixldocsOrigRenderControls) {
+  let drawWarpGuides = function(ctx) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    if (!this.canvas) return;
+    const hoverBounds = getTextPathHitBounds(this);
+    if (hoverBounds && (this.__pdTextPathHovered || ((_b = (_a = this.canvas).getActiveObject) == null ? void 0 : _b.call(_a)) === this)) {
+      drawTextPathBounds(ctx, this, hoverBounds);
+    }
+    const resolved = resolveTextPath(this.textPath, this.width || 0, this.fontSize || 16);
+    const path = resolved ? measurePath(resolved.d) : null;
+    if (!path) return;
+    const len = path.getTotalLength();
+    if (!Number.isFinite(len) || len <= 0) return;
+    const retina = ((_c = this.getCanvasRetinaScaling) == null ? void 0 : _c.call(this)) || 1;
+    const matrix = fabric__namespace.util.multiplyTransformMatrices(
+      this.canvas.viewportTransform || [1, 0, 0, 1, 0, 0],
+      this.calcTransformMatrix()
+    );
+    const halfW = (this.width || 0) / 2;
+    const halfH = (this.height || 0) / 2;
+    const toScreen = (t) => {
+      const p = path.getPointAtLength(Math.max(0, Math.min(len, len * t)));
+      return fabric__namespace.util.transformPoint(new fabric__namespace.Point(p.x - halfW, p.y - halfH), matrix);
+    };
+    const toScreenXY = (x, y) => fabric__namespace.util.transformPoint(new fabric__namespace.Point(x, y), matrix);
+    ctx.save();
+    ctx.setTransform(retina, 0, 0, retina, 0, 0);
+    const isCircle = ((_d = this.textPath) == null ? void 0 : _d.preset) === "circle";
+    const isAngle = ((_e = this.textPath) == null ? void 0 : _e.preset) === "rise" || ((_f = this.textPath) == null ? void 0 : _f.preset) === "angle";
+    ctx.strokeStyle = "rgba(29, 155, 240, 0.95)";
+    ctx.lineWidth = 1.25;
+    ctx.setLineDash([]);
+    if (isAngle) {
+      const tp = this.textPath;
+      const w = this.width || 0;
+      const fs = this.fontSize || 16;
+      const ep = tp.endpoints;
+      const leftY = ep && Number.isFinite(ep.leftY) ? ep.leftY : fs * 1.5;
+      const rightY = ep && Number.isFinite(ep.rightY) ? ep.rightY : fs * 0.5;
+      const a = toScreenXY(0 - halfW, leftY - halfH);
+      const b = toScreenXY(w - halfW, rightY - halfH);
+      ctx.beginPath();
+      ctx.moveTo(a.x, a.y);
+      ctx.lineTo(b.x, b.y);
+      ctx.stroke();
+    } else {
+      ctx.beginPath();
+      for (let i = 0; i <= 96; i++) {
+        const p = toScreen(i / 96);
+        if (i === 0) ctx.moveTo(p.x, p.y);
+        else ctx.lineTo(p.x, p.y);
+      }
+      ctx.stroke();
+    }
+    if (isCircle) {
+      const tp = this.textPath || {};
+      const fs = this.fontSize || 16;
+      const w = this.width || 0;
+      const auto = Math.max(fs * 1.5, w / Math.PI);
+      const rRaw = tp.radius;
+      const r = Math.max(fs * 0.75, Number.isFinite(rRaw) && rRaw > 0 ? rRaw : auto);
+      const cx = r - halfW;
+      const cy = r - halfH;
+      const steps = 96;
+      ctx.beginPath();
+      for (let i = 0; i <= steps; i++) {
+        const a = i / steps * Math.PI * 2;
+        const p = toScreenXY(cx + Math.cos(a) * r, cy + Math.sin(a) * r);
+        if (i === 0) ctx.moveTo(p.x, p.y);
+        else ctx.lineTo(p.x, p.y);
+      }
+      ctx.closePath();
+      ctx.stroke();
+    }
+    const bz = isCircle ? null : (_g = this.textPath) == null ? void 0 : _g.bezier;
+    if (bz) {
+      const a = toScreenXY(bz.p0[0] - halfW, bz.p0[1] - halfH);
+      const ah = toScreenXY(bz.c0[0] - halfW, bz.c0[1] - halfH);
+      const b = toScreenXY(bz.p1[0] - halfW, bz.p1[1] - halfH);
+      const bh = toScreenXY(bz.c1[0] - halfW, bz.c1[1] - halfH);
+      ctx.strokeStyle = "rgba(29, 155, 240, 0.7)";
+      ctx.lineWidth = 1;
+      ctx.setLineDash([]);
+      ctx.beginPath();
+      ctx.moveTo(a.x, a.y);
+      ctx.lineTo(ah.x, ah.y);
+      ctx.moveTo(b.x, b.y);
+      ctx.lineTo(bh.x, bh.y);
+      ctx.stroke();
+      const midX = 0.125 * bz.p0[0] + 0.375 * bz.c0[0] + 0.375 * bz.c1[0] + 0.125 * bz.p1[0];
+      const midY = 0.125 * bz.p0[1] + 0.375 * bz.c0[1] + 0.375 * bz.c1[1] + 0.125 * bz.p1[1];
+      let tdx = bz.p1[0] + 3 * bz.c1[0] - 3 * bz.c0[0] - bz.p0[0];
+      let tdy = bz.p1[1] + 3 * bz.c1[1] - 3 * bz.c0[1] - bz.p0[1];
+      const tlen = Math.hypot(tdx, tdy) || 1;
+      tdx /= tlen;
+      tdy /= tlen;
+      const pC1 = (bz.c1[0] - midX) * tdx + (bz.c1[1] - midY) * tdy;
+      const pC0 = (midX - bz.c0[0]) * tdx + (midY - bz.c0[1]) * tdy;
+      const LEG = Math.max(8, (Math.abs(pC1) + Math.abs(pC0)) / 2);
+      const m = toScreenXY(midX - halfW, midY - halfH);
+      const t0 = toScreenXY(midX - tdx * LEG - halfW, midY - tdy * LEG - halfH);
+      const t1 = toScreenXY(midX + tdx * LEG - halfW, midY + tdy * LEG - halfH);
+      ctx.beginPath();
+      ctx.moveTo(m.x, m.y);
+      ctx.lineTo(t0.x, t0.y);
+      ctx.moveTo(m.x, m.y);
+      ctx.lineTo(t1.x, t1.y);
+      ctx.stroke();
+    }
+    ctx.restore();
+  };
+  TextboxProto.__pixldocsOrigRenderControls = TextboxProto._renderControls;
+  TextboxProto._renderControls = function(ctx, styleOverride) {
+    if (hasActiveTextPath(this)) {
+      const prevBorders = this.hasBorders;
+      this.hasBorders = false;
+      try {
+        drawWarpGuides.call(this, ctx);
+        TextboxProto.__pixldocsOrigRenderControls.call(this, ctx, styleOverride);
+      } finally {
+        this.hasBorders = prevBorders;
+      }
+      return;
+    }
+    TextboxProto.__pixldocsOrigRenderControls.call(this, ctx, styleOverride);
+    if (!this.canvas) return;
+  };
+}
+if (!TextboxProto.__pixldocsOrigRender && typeof TextboxProto._render === "function") {
+  TextboxProto.__pixldocsOrigRender = TextboxProto._render;
+  TextboxProto._render = function(ctx) {
+    const tp = this.textPath;
+    const orig = TextboxProto.__pixldocsOrigRender;
+    if (!hasActiveTextPath(this)) {
+      return orig.call(this, ctx);
+    }
+    if (tp && (tp.preset === "rise" || tp.preset === "angle")) {
+      const w = this.width || 0;
+      const h = this.height || 0;
+      const fs2 = this.fontSize || 16;
+      const ep = tp.endpoints;
+      const defaultLeftY = fs2 * 1.5;
+      const defaultRightY = fs2 * 0.5;
+      const leftY = ep && Number.isFinite(ep.leftY) ? ep.leftY : defaultLeftY;
+      const rightY = ep && Number.isFinite(ep.rightY) ? ep.rightY : defaultRightY;
+      const slope = w > 0 ? (rightY - leftY) / w : 0;
+      const dy = (leftY + rightY) / 2 - h / 2;
+      ctx.save();
+      ctx.transform(1, slope, 0, 1, 0, dy);
+      orig.call(this, ctx);
+      ctx.restore();
+      return;
+    }
+    const resolved = resolveTextPath(tp, this.width || 0, this.fontSize || 16);
+    if (!resolved) return orig.call(this, ctx);
+    const pathEl = measurePath(resolved.d);
+    if (!pathEl) return orig.call(this, ctx);
+    const totalLen = pathEl.getTotalLength();
+    if (!Number.isFinite(totalLen) || totalLen <= 0) return orig.call(this, ctx);
+    const plain = String(this.text || "").replace(/\n/g, " ");
+    if (!plain) return;
+    const weight = this.fontWeight || 400;
+    const style = this.fontStyle || "normal";
+    const family = this.fontFamily || "Open Sans";
+    const fs = this.fontSize || 16;
+    ctx.save();
+    ctx.font = `${style} ${weight} ${fs}px "${family}"`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "alphabetic";
+    const chars = Array.from(plain);
+    const spacing = (this.charSpacing || 0) * fs / 1e3;
+    const widths = chars.map((c) => ctx.measureText(c).width + spacing);
+    const totalWidth = widths.reduce((a, b) => a + b, 0);
+    const baselineDy = resolveTextPathAlphabeticBaselineDy(ctx, plain, fs);
+    let cursor;
+    if (this.textAlign === "center") cursor = Math.max(0, (totalLen - totalWidth) / 2);
+    else if (this.textAlign === "right") cursor = Math.max(0, totalLen - totalWidth);
+    else cursor = 0;
+    const flowStops = getGradientStopsForFlow(this);
+    const fillOffsets = flowStops ? { offsetX: 0, offsetY: 0 } : applyWarpFillStyle(ctx, this);
+    const halfW = (this.width || 0) / 2;
+    const halfH = (this.height || 0) / 2;
+    const strokeColor = this.stroke;
+    const strokeWidth = Number(this.strokeWidth) || 0;
+    const hasStroke = !!strokeColor && strokeColor !== "transparent" && strokeWidth > 0;
+    if (hasStroke) {
+      ctx.strokeStyle = String(strokeColor);
+      ctx.lineWidth = strokeWidth;
+      ctx.lineJoin = "round";
+      ctx.miterLimit = 4;
+    }
+    for (let i = 0; i < chars.length; i++) {
+      const ch = chars[i];
+      const cw = widths[i];
+      const mid = cursor + cw / 2;
+      cursor += cw;
+      if (mid > totalLen) break;
+      const p = pathEl.getPointAtLength(Math.max(0, mid));
+      const ahead = pathEl.getPointAtLength(Math.min(totalLen, mid + 0.5));
+      const angle = Math.atan2(ahead.y - p.y, ahead.x - p.x);
+      if (flowStops) {
+        const tt = chars.length > 1 ? i / (chars.length - 1) : 0;
+        ctx.fillStyle = sampleGradientColor(flowStops, tt);
+      }
+      ctx.save();
+      ctx.translate(p.x - halfW - fillOffsets.offsetX, p.y - halfH - fillOffsets.offsetY);
+      ctx.rotate(angle);
+      ctx.fillText(ch, 0, baselineDy);
+      if (hasStroke) ctx.strokeText(ch, 0, baselineDy);
+      ctx.restore();
+    }
+    ctx.restore();
+  };
 }
 TextboxProto.__pixldocsTextboxExtended = true;
+const TextboxProtoHit = fabric__namespace.Textbox.prototype;
+if (!TextboxProtoHit.__pixldocsOrigGetCoords && typeof TextboxProtoHit.getCoords === "function") {
+  TextboxProtoHit.__pixldocsOrigGetCoords = TextboxProtoHit.getCoords;
+  TextboxProtoHit.getCoords = function() {
+    if (!hasActiveTextPath(this)) return TextboxProtoHit.__pixldocsOrigGetCoords.call(this);
+    const bounds = getTextPathHitBounds(this);
+    if (!bounds) return TextboxProtoHit.__pixldocsOrigGetCoords.call(this);
+    const matrix = this.calcTransformMatrix();
+    const coords = [
+      new fabric__namespace.Point(bounds.minX, bounds.minY),
+      new fabric__namespace.Point(bounds.maxX, bounds.minY),
+      new fabric__namespace.Point(bounds.maxX, bounds.maxY),
+      new fabric__namespace.Point(bounds.minX, bounds.maxY)
+    ].map((p) => fabric__namespace.util.transformPoint(p, matrix));
+    if (this.group) {
+      const groupMatrix = this.group.calcTransformMatrix();
+      return coords.map((p) => fabric__namespace.util.transformPoint(p, groupMatrix));
+    }
+    return coords;
+  };
+}
+if (!TextboxProtoHit.__pixldocsOrigContainsPoint && typeof TextboxProtoHit.containsPoint === "function") {
+  TextboxProtoHit.__pixldocsOrigContainsPoint = TextboxProtoHit.containsPoint;
+  TextboxProtoHit.containsPoint = function(point) {
+    const origHit = TextboxProtoHit.__pixldocsOrigContainsPoint.call(this, point);
+    if (origHit) return true;
+    if (!hasActiveTextPath(this)) return false;
+    return textPathBoundsContainScenePoint(this, point);
+  };
+}
 const PD_BG_KEY = "__pdBg";
 const PATCHED_KEY = "__pdBgPatched";
+const LINE_SHADOW_STROKE_WIDTH = 0.5;
 function extractTextBgConfig(element) {
   const legacy = Math.max(0, Number(element.textBgPadding ?? 0)) || 0;
   const pick = (v) => {
     const n = Number(v);
     return Number.isFinite(n) && n >= 0 ? n : void 0;
   };
+  const grad = element.textBgGradient;
   return {
     color: element.textBgColor,
+    gradient: isGradientConfig(grad) && grad.stops && grad.stops.length >= 2 ? grad : void 0,
     padTop: pick(element.textBgPaddingTop) ?? legacy,
     padRight: pick(element.textBgPaddingRight) ?? legacy,
     padBottom: pick(element.textBgPaddingBottom) ?? legacy,
@@ -5786,11 +6876,16 @@ function extractTextBgConfig(element) {
     })(),
     shadowAffectsBg: element.textShadowAffectsBg !== false,
     shadowAffectsText: element.textShadowAffectsText !== false,
-    fitToText: element.textBgFitToText === true
+    fitToText: element.textBgFitToText === true,
+    shadowType: element.textShadowType,
+    shadowColor: element.textShadowColor,
+    shadowOffsetX: Number(element.textShadowOffsetX ?? 0) || 0,
+    shadowOffsetY: Number(element.textShadowOffsetY ?? 0) || 0
   };
 }
 function hasTextBackground(cfg) {
   if (!cfg) return false;
+  if (cfg.gradient && cfg.gradient.stops && cfg.gradient.stops.length >= 2) return true;
   const c = (cfg.color || "").toString().trim().toLowerCase();
   return !!c && c !== "transparent" && c !== "none" && c !== "rgba(0,0,0,0)";
 }
@@ -5800,6 +6895,8 @@ function buildTextShadow(element) {
   const ox = Number(element.textShadowOffsetX ?? 0);
   const oy = Number(element.textShadowOffsetY ?? 0);
   if (!color || color === "transparent") return null;
+  const type = element.textShadowType;
+  if (type && type !== "drop") return null;
   return new fabric__namespace.Shadow({
     color: String(color),
     blur: blur || 0,
@@ -5830,11 +6927,35 @@ function buildRoundedRectPath2D(ctx, x, y, w, h, rTL, rTR, rBR, rBL) {
 function applyTextBackground(obj, cfg) {
   var _a;
   obj[PD_BG_KEY] = { ...cfg };
+  try {
+    const hasOffset = (Number(cfg == null ? void 0 : cfg.shadowOffsetX) || 0) !== 0 || (Number(cfg == null ? void 0 : cfg.shadowOffsetY) || 0) !== 0;
+    const isLineOrBlock = (cfg == null ? void 0 : cfg.shadowType) === "line" || (cfg == null ? void 0 : cfg.shadowType) === "block";
+    if (isLineOrBlock && hasOffset && !!(cfg == null ? void 0 : cfg.shadowColor) && cfg.shadowColor !== "transparent") {
+      obj.objectCaching = false;
+      obj.dirty = true;
+    }
+  } catch {
+  }
   if (obj[PATCHED_KEY]) return;
   obj[PATCHED_KEY] = true;
   const originalRender = obj._render.bind(obj);
   obj._render = function(ctx) {
     const bg = this[PD_BG_KEY];
+    const extOX = Number((bg == null ? void 0 : bg.shadowOffsetX) ?? 0) || 0;
+    const extOY = Number((bg == null ? void 0 : bg.shadowOffsetY) ?? 0) || 0;
+    const extDist = Math.hypot(extOX, extOY);
+    const hasShadowColor = !!(bg == null ? void 0 : bg.shadowColor) && bg.shadowColor !== "transparent";
+    const blockShadowActive = !!bg && bg.shadowType === "block" && hasShadowColor && extDist > 0;
+    const lineShadowActive = !!bg && bg.shadowType === "line" && hasShadowColor && extDist > 0;
+    let blockSteps = 0;
+    let blockStepX = 0;
+    let blockStepY = 0;
+    if (blockShadowActive) {
+      const STEP = 0.5;
+      blockSteps = Math.min(600, Math.max(1, Math.ceil(extDist / STEP)));
+      blockStepX = extOX / blockSteps;
+      blockStepY = extOY / blockSteps;
+    }
     if (hasTextBackground(bg)) {
       const w = this.width ?? 0;
       const h = this.height ?? 0;
@@ -5852,24 +6973,172 @@ function applyTextBackground(obj, cfg) {
       }
       const op = typeof bg.opacity === "number" ? Math.max(0, Math.min(1, bg.opacity)) : 1;
       if (op < 1) ctx.globalAlpha = (ctx.globalAlpha ?? 1) * op;
-      ctx.fillStyle = bg.color;
-      const rects = computeBgRects(this, w, h, pT, pR, pB, pL, !!bg.fitToText);
-      for (const r of rects) {
-        buildRoundedRectPath2D(
-          ctx,
-          r.x,
-          r.y,
-          r.w,
-          r.h,
-          bg.rxTL ?? 0,
-          bg.rxTR ?? 0,
-          bg.rxBR ?? 0,
-          bg.rxBL ?? 0
-        );
-        ctx.fill();
+      const tpAny = this.textPath;
+      const isShear = tpAny && (tpAny.preset === "rise" || tpAny.preset === "angle");
+      const ribbonD = !isShear ? buildWarpRibbonD(
+        this,
+        pT,
+        pR,
+        pB,
+        pL,
+        bg.rxTL ?? 0,
+        bg.rxTR ?? 0,
+        bg.rxBR ?? 0,
+        bg.rxBL ?? 0
+      ) : null;
+      let bgBounds;
+      let bgRectsForFill = null;
+      if (ribbonD) {
+        bgBounds = computeRibbonBoundsFor(this, pT, pR, pB, pL);
+      } else {
+        bgRectsForFill = computeBgRects(this, w, h, pT, pR, pB, pL, !!bg.fitToText);
+        bgBounds = unionBounds(bgRectsForFill);
+      }
+      if (blockShadowActive && bg.shadowAffectsBg !== false) {
+        ctx.save();
+        ctx.fillStyle = bg.shadowColor;
+        for (let i = blockSteps; i >= 1; i--) {
+          ctx.save();
+          ctx.translate(blockStepX * i, blockStepY * i);
+          if (ribbonD) {
+            try {
+              ctx.fill(new Path2D(ribbonD));
+            } catch {
+            }
+          } else {
+            const rects = bgRectsForFill;
+            for (const r of rects) {
+              buildRoundedRectPath2D(
+                ctx,
+                r.x,
+                r.y,
+                r.w,
+                r.h,
+                bg.rxTL ?? 0,
+                bg.rxTR ?? 0,
+                bg.rxBR ?? 0,
+                bg.rxBL ?? 0
+              );
+              ctx.fill();
+            }
+          }
+          ctx.restore();
+        }
+        ctx.restore();
+      }
+      if (lineShadowActive && bg.shadowAffectsBg !== false) {
+        ctx.save();
+        ctx.translate(extOX, extOY);
+        ctx.strokeStyle = bg.shadowColor;
+        ctx.lineWidth = 1;
+        ctx.lineJoin = "round";
+        if (ribbonD) {
+          try {
+            ctx.stroke(new Path2D(ribbonD));
+          } catch {
+          }
+        } else {
+          const rects = bgRectsForFill;
+          for (const r of rects) {
+            buildRoundedRectPath2D(
+              ctx,
+              r.x,
+              r.y,
+              r.w,
+              r.h,
+              bg.rxTL ?? 0,
+              bg.rxTR ?? 0,
+              bg.rxBR ?? 0,
+              bg.rxBL ?? 0
+            );
+            ctx.stroke();
+          }
+        }
+        ctx.restore();
+      }
+      ctx.fillStyle = bg.gradient ? buildCanvasGradient(ctx, bg.gradient, bgBounds.x, bgBounds.y, bgBounds.w, bgBounds.h) : bg.color || "#000";
+      if (ribbonD) {
+        try {
+          const p2 = new Path2D(ribbonD);
+          ctx.fill(p2);
+        } catch {
+        }
+      } else {
+        if (isShear) {
+          const fs = this.fontSize || 16;
+          const ep = tpAny.endpoints;
+          const dL = fs * 1.5;
+          const dR = fs * 0.5;
+          const lY = ep && Number.isFinite(ep.leftY) ? ep.leftY : dL;
+          const rY = ep && Number.isFinite(ep.rightY) ? ep.rightY : dR;
+          const slope = w > 0 ? (rY - lY) / w : 0;
+          const dy = (lY + rY) / 2 - h / 2;
+          ctx.transform(1, slope, 0, 1, 0, dy);
+        }
+        const rects = bgRectsForFill;
+        for (const r of rects) {
+          buildRoundedRectPath2D(
+            ctx,
+            r.x,
+            r.y,
+            r.w,
+            r.h,
+            bg.rxTL ?? 0,
+            bg.rxTR ?? 0,
+            bg.rxBR ?? 0,
+            bg.rxBL ?? 0
+          );
+          ctx.fill();
+        }
       }
       ctx.restore();
     }
+    if (blockShadowActive && bg.shadowAffectsText !== false) {
+      const self = this;
+      const origFill = self.fill;
+      const origStyles = self.styles;
+      const origShadow = self.shadow;
+      try {
+        self.fill = bg.shadowColor;
+        self.styles = {};
+        self.shadow = null;
+        for (let i = blockSteps; i >= 1; i--) {
+          ctx.save();
+          ctx.translate(blockStepX * i, blockStepY * i);
+          originalRender(ctx);
+          ctx.restore();
+        }
+      } finally {
+        self.fill = origFill;
+        self.styles = origStyles;
+        self.shadow = origShadow;
+      }
+    }
+    if (lineShadowActive && bg.shadowAffectsText !== false) {
+      const self = this;
+      const origFill = self.fill;
+      const origStroke = self.stroke;
+      const origStrokeWidth = self.strokeWidth;
+      const origStyles = self.styles;
+      const origShadow = self.shadow;
+      try {
+        self.fill = "transparent";
+        self.stroke = bg.shadowColor;
+        self.strokeWidth = LINE_SHADOW_STROKE_WIDTH;
+        self.styles = {};
+        self.shadow = null;
+        ctx.save();
+        ctx.translate(extOX, extOY);
+        originalRender(ctx);
+        ctx.restore();
+      } finally {
+        self.fill = origFill;
+        self.stroke = origStroke;
+        self.strokeWidth = origStrokeWidth;
+        self.styles = origStyles;
+        self.shadow = origShadow;
+      }
+    }
     const suppressShadowOnText = bg && bg.shadowAffectsText === false;
     if (suppressShadowOnText) {
       ctx.save();
@@ -5888,19 +7157,27 @@ function applyTextBackground(obj, cfg) {
     const out = originalToObject(propertiesToInclude);
     const bg = this[PD_BG_KEY];
     if (hasTextBackground(bg)) {
-      out.__pdBg = { ...bg };
+      out.__pdBg = { ...bg, gradient: bg.gradient ? { ...bg.gradient, stops: bg.gradient.stops.map((s) => ({ ...s })) } : void 0 };
     }
     return out;
   };
   const originalToSVG = (_a = obj.toSVG) == null ? void 0 : _a.bind(obj);
   if (typeof originalToSVG === "function") {
     obj.toSVG = function(reviver) {
+      var _a2, _b;
       let svg = originalToSVG(reviver);
       const bg = this[PD_BG_KEY];
       const shadow = this.shadow;
       const hasBg = hasTextBackground(bg);
       const hasShadow = !!shadow && !!shadow.color && shadow.color !== "transparent";
-      if (!hasBg && !hasShadow) return svg;
+      const extOX = Number((bg == null ? void 0 : bg.shadowOffsetX) ?? 0) || 0;
+      const extOY = Number((bg == null ? void 0 : bg.shadowOffsetY) ?? 0) || 0;
+      const extDist = Math.hypot(extOX, extOY);
+      const hasExtShadowColor = !!(bg == null ? void 0 : bg.shadowColor) && bg.shadowColor !== "transparent";
+      const hasBlockShadow = !!bg && bg.shadowType === "block" && hasExtShadowColor && extDist > 0;
+      const hasLineShadow = !!bg && bg.shadowType === "line" && hasExtShadowColor && extDist > 0;
+      if (!hasBg && !hasShadow && !hasBlockShadow && !hasLineShadow) return svg;
+      const hasActiveTextPath2 = !!(((_a2 = this.textPath) == null ? void 0 : _a2.preset) && this.textPath.preset !== "none");
       const w = this.width ?? 0;
       const h = this.height ?? 0;
       const pT = Math.max(0, Number((bg == null ? void 0 : bg.padTop) ?? 0));
@@ -5909,7 +7186,18 @@ function applyTextBackground(obj, cfg) {
       const pL = Math.max(0, Number((bg == null ? void 0 : bg.padLeft) ?? 0));
       const fit = !!(bg == null ? void 0 : bg.fitToText);
       const rects = computeBgRects(this, w, h, pT, pR, pB, pL, fit);
-      const bgD = rects.map((r) => buildRoundedRectPathD(
+      const ribbonD = buildWarpRibbonD(
+        this,
+        pT,
+        pR,
+        pB,
+        pL,
+        (bg == null ? void 0 : bg.rxTL) ?? 0,
+        (bg == null ? void 0 : bg.rxTR) ?? 0,
+        (bg == null ? void 0 : bg.rxBR) ?? 0,
+        (bg == null ? void 0 : bg.rxBL) ?? 0
+      );
+      const bgD = ribbonD ?? rects.map((r) => buildRoundedRectPathD(
         r.x,
         r.y,
         r.w,
@@ -5922,7 +7210,16 @@ function applyTextBackground(obj, cfg) {
       const bgFill = (bg == null ? void 0 : bg.color) || "";
       const bgOpacity = typeof (bg == null ? void 0 : bg.opacity) === "number" ? Math.max(0, Math.min(1, bg.opacity)) : 1;
       const bgOpacityAttr = bgOpacity < 1 ? ` fill-opacity="${bgOpacity}"` : "";
-      const bgPath = hasBg ? `<path d="${bgD}" fill="${escapeXmlAttr(bgFill)}"${bgOpacityAttr} />` : "";
+      let bgGradDefs = "";
+      let bgFillAttr = escapeXmlAttr(bgFill);
+      if (hasBg && (bg == null ? void 0 : bg.gradient) && ((_b = bg.gradient.stops) == null ? void 0 : _b.length) >= 2) {
+        const bounds = ribbonD ? computeRibbonBoundsFor(this, pT, pR, pB, pL) : unionBounds(rects);
+        const gid = `__pdBgGrad_${Math.random().toString(36).slice(2, 9)}`;
+        const def = buildSvgGradientDef(bg.gradient, gid, bounds.x, bounds.y, bounds.w, bounds.h);
+        bgGradDefs = `<defs>${def}</defs>`;
+        bgFillAttr = `url(#${gid})`;
+      }
+      const bgPath = hasBg ? `${bgGradDefs}<path class="__pdTextBgShape" d="${bgD}" fill="${bgFillAttr}"${bgOpacityAttr} />` : "";
       svg = svg.replace(/style="[^"]*filter:\s*url\([^)]+\)[^"]*"/i, "");
       svg = svg.replace(/<filter[\s\S]*?<\/filter>/gi, "");
       let bgShadowMarker = "";
@@ -5948,14 +7245,63 @@ function applyTextBackground(obj, cfg) {
           const shadowBgPath = `<path d="${bgD}" fill="${escapeXmlAttr(shadowColor)}"${shadowOpacityAttr} />`;
           bgShadowMarker = wrapShadow(shadowBgPath);
         }
-        if ((bg == null ? void 0 : bg.shadowAffectsText) !== false) {
+        if ((bg == null ? void 0 : bg.shadowAffectsText) !== false && !hasActiveTextPath2) {
           const inner = extractGInnerMarkup(svg);
           const recoloredText = recolorSvgFills(inner, shadowColor);
           if (recoloredText) textShadowMarker = wrapShadow(recoloredText);
         }
       }
+      let bgBlockShadowMarker = "";
+      let textBlockShadowMarker = "";
+      if (hasBlockShadow) {
+        const STEP = 0.5;
+        const steps = Math.min(600, Math.max(1, Math.ceil(extDist / STEP)));
+        const stepX = extOX / steps;
+        const stepY = extOY / steps;
+        const shadowColor = String(bg.shadowColor);
+        const fillObj = this.fill;
+        const parentTextIsGradient = !!fillObj && typeof fillObj === "object" && (Array.isArray(fillObj.colorStops) || fillObj.type === "linear" || fillObj.type === "radial");
+        const cloneOutlineAttr = parentTextIsGradient ? ' data-pd-outline-text="1"' : "";
+        const buildCopies = (markup, cls) => {
+          const parts = [];
+          for (let i = steps; i >= 1; i--) {
+            parts.push(`<g class="${cls}"${cloneOutlineAttr} transform="translate(${(stepX * i).toFixed(3)} ${(stepY * i).toFixed(3)})">${markup}</g>`);
+          }
+          return parts.join("");
+        };
+        if (hasBg && bg.shadowAffectsBg !== false) {
+          const shadowOpacityAttr = bgOpacity < 1 ? ` fill-opacity="${bgOpacity}"` : "";
+          const shadowBgPath = `<path d="${bgD}" fill="${escapeXmlAttr(shadowColor)}"${shadowOpacityAttr} />`;
+          bgBlockShadowMarker = buildCopies(shadowBgPath, "__pdBgShadowClone");
+        }
+        if (bg.shadowAffectsText !== false) {
+          const inner = extractGInnerMarkup(svg);
+          const recoloredText = recolorSvgFills(inner, shadowColor);
+          if (recoloredText) textBlockShadowMarker = buildCopies(recoloredText, "__pdTextShadowClone");
+        }
+      }
+      let bgLineShadowMarker = "";
+      let textLineShadowMarker = "";
+      if (hasLineShadow) {
+        const shadowColor = String(bg.shadowColor);
+        const tx = extOX.toFixed(3);
+        const ty = extOY.toFixed(3);
+        const fillObjLine = this.fill;
+        const parentTextIsGradientLine = !!fillObjLine && typeof fillObjLine === "object" && (Array.isArray(fillObjLine.colorStops) || fillObjLine.type === "linear" || fillObjLine.type === "radial");
+        const lineOutlineAttr = parentTextIsGradientLine ? ' data-pd-outline-text="1"' : "";
+        if (hasBg && bg.shadowAffectsBg !== false) {
+          const outlineBg = `<path d="${bgD}" fill="none" stroke="${escapeXmlAttr(shadowColor)}" stroke-width="1" stroke-linejoin="round" />`;
+          bgLineShadowMarker = `<g class="__pdBgShadowClone"${lineOutlineAttr} transform="translate(${tx} ${ty})">${outlineBg}</g>`;
+        }
+        if (bg.shadowAffectsText !== false) {
+          const inner = extractGInnerMarkup(svg);
+          const strokeW = LINE_SHADOW_STROKE_WIDTH;
+          const outlined = outlineTextSvgForLineShadow(inner, shadowColor, strokeW);
+          if (outlined) textLineShadowMarker = `<g class="__pdTextShadowClone"${lineOutlineAttr} transform="translate(${tx} ${ty})">${outlined}</g>`;
+        }
+      }
       const openTagMatch = svg.match(/^\s*<g\b[^>]*>/);
-      const inserted = bgShadowMarker + bgPath + textShadowMarker;
+      const inserted = bgBlockShadowMarker + bgLineShadowMarker + bgShadowMarker + bgPath + textBlockShadowMarker + textLineShadowMarker + textShadowMarker;
       const shadowBlur = hasShadow ? Math.max(0, Number(shadow.blur ?? 0)) : 0;
       const decorationTags = [
         shadowBlur > 0 ? 'data-pd-shadow-blur="1"' : "",
@@ -5975,7 +7321,38 @@ function recolorSvgFills(svg, color) {
   return _recolorSvgFills(svg, color);
 }
 function _recolorSvgFills(svg, color) {
+  var _a;
   const safe = escapeXmlAttr(color);
+  try {
+    const wrapped = `<svg xmlns="http://www.w3.org/2000/svg">${svg}</svg>`;
+    const doc = new DOMParser().parseFromString(wrapped, "image/svg+xml");
+    const root = doc.documentElement;
+    if (root && root.nodeName !== "parsererror") {
+      for (const g of Array.from(root.querySelectorAll("linearGradient, radialGradient, pattern"))) {
+        try {
+          (_a = g.parentNode) == null ? void 0 : _a.removeChild(g);
+        } catch {
+        }
+      }
+      for (const el of Array.from(root.querySelectorAll("text, tspan, path, rect"))) {
+        const cur = el.getAttribute("fill");
+        if (cur && (cur.trim().toLowerCase() === "none" || cur.trim().toLowerCase() === "transparent")) continue;
+        const style = el.getAttribute("style");
+        if (style && /fill\s*:/i.test(style)) {
+          const cleaned = style.replace(/(?:^|;)\s*fill\s*:[^;]*/gi, "").replace(/^;+/, "").trim();
+          if (cleaned) el.setAttribute("style", cleaned);
+          else el.removeAttribute("style");
+        }
+        el.setAttribute("fill", color);
+      }
+      let out2 = "";
+      for (const child of Array.from(root.childNodes)) {
+        out2 += new XMLSerializer().serializeToString(child);
+      }
+      return out2;
+    }
+  } catch {
+  }
   let out = svg.replace(
     /(<(?:text|tspan|path|rect)\b[^>]*?\sfill=")([^"]*)("[^>]*>)/gi,
     (_m, pre, val, post) => {
@@ -5991,6 +7368,11 @@ function _recolorSvgFills(svg, color) {
       return pre + replaced + post;
     }
   );
+  out = out.replace(/<(text|tspan|path)\b([^>]*)>/gi, (m, tag, attrs) => {
+    if (/\sfill=/i.test(attrs)) return m;
+    if (/style="[^"]*\bfill\s*:/i.test(attrs)) return m;
+    return `<${tag}${attrs} fill="${safe}">`;
+  });
   return out;
 }
 function buildRoundedRectPathD(x, y, w, h, rTL, rTR, rBR, rBL) {
@@ -6129,6 +7511,239 @@ function computeBgRects(obj, w, h, pT, pR, pB, pL, fit) {
 function escapeXmlAttr(s) {
   return String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function buildWarpRibbonD(obj, pT, pR, pB, pL, rxTL, rxTR, rxBR, rxBL) {
+  const tp = obj == null ? void 0 : obj.textPath;
+  if (!tp || !tp.preset || tp.preset === "none") return null;
+  if (tp.preset === "rise" || tp.preset === "angle") return null;
+  const w = Number(obj.width) || 0;
+  const h = Number(obj.height) || 0;
+  const fs = Number(obj.fontSize) || 16;
+  const resolved = resolveTextPath(tp, w, fs);
+  if (!resolved) return null;
+  const pathEl = measurePath(resolved.d);
+  if (!pathEl) return null;
+  const len = pathEl.getTotalLength();
+  if (!Number.isFinite(len) || len <= 0) return null;
+  const halfW = w / 2;
+  const halfH = h / 2;
+  const topT = halfH + Math.max(0, pT);
+  const botT = halfH + Math.max(0, pB);
+  const padL = Math.max(0, pL);
+  const padR = Math.max(0, pR);
+  const sample = (s) => {
+    const ss = Math.max(0, Math.min(len, s));
+    const p = pathEl.getPointAtLength(ss);
+    const a = pathEl.getPointAtLength(Math.min(len, ss + 0.5));
+    const b = pathEl.getPointAtLength(Math.max(0, ss - 0.5));
+    let tx = a.x - b.x;
+    let ty = a.y - b.y;
+    const tl = Math.hypot(tx, ty) || 1;
+    tx /= tl;
+    ty /= tl;
+    return { px: p.x - halfW, py: p.y - halfH, tx, ty, nx: ty, ny: -tx };
+  };
+  const SAMPLES = 96;
+  const topPts = [];
+  const botPts = [];
+  for (let i = 0; i <= SAMPLES; i++) {
+    const s = len * i / SAMPLES;
+    const { px, py, nx, ny } = sample(s);
+    topPts.push([px + nx * topT, py + ny * topT]);
+    botPts.push([px - nx * botT, py - ny * botT]);
+  }
+  const s0 = sample(0);
+  const s1 = sample(len);
+  const TL = [s0.px - s0.tx * padL + s0.nx * topT, s0.py - s0.ty * padL + s0.ny * topT];
+  const BL = [s0.px - s0.tx * padL - s0.nx * botT, s0.py - s0.ty * padL - s0.ny * botT];
+  const TR = [s1.px + s1.tx * padR + s1.nx * topT, s1.py + s1.ty * padR + s1.ny * topT];
+  const BR = [s1.px + s1.tx * padR - s1.nx * botT, s1.py + s1.ty * padR - s1.ny * botT];
+  topPts[0] = TL;
+  topPts[topPts.length - 1] = TR;
+  botPts[0] = BL;
+  botPts[botPts.length - 1] = BR;
+  const capH = topT + botT;
+  const maxLeftR = Math.min(capH * 0.5, len * 0.5 + padL);
+  const maxRightR = Math.min(capH * 0.5, len * 0.5 + padR);
+  const clamp2 = (r, m) => Math.max(0, Math.min(Number(r) || 0, m));
+  const cTL = clamp2(rxTL, maxLeftR);
+  const cBL = clamp2(rxBL, maxLeftR);
+  const cTR = clamp2(rxTR, maxRightR);
+  const cBR = clamp2(rxBR, maxRightR);
+  const dist = (a, b) => Math.hypot(b[0] - a[0], b[1] - a[1]);
+  const inset = (from, toward, d) => {
+    const dx = toward[0] - from[0];
+    const dy = toward[1] - from[1];
+    const L = Math.hypot(dx, dy) || 1;
+    const k = Math.min(d, L) / L;
+    return [from[0] + dx * k, from[1] + dy * k];
+  };
+  const walkEdge = (pts, target, fromStart) => {
+    if (target <= 0) {
+      const idx = fromStart ? 0 : pts.length - 1;
+      return { pt: [pts[idx][0], pts[idx][1]], cutIdx: idx };
+    }
+    let acc = 0;
+    if (fromStart) {
+      for (let i = 1; i < pts.length; i++) {
+        const seg = dist(pts[i - 1], pts[i]);
+        if (acc + seg >= target) {
+          const k = (target - acc) / (seg || 1);
+          const pt = [
+            pts[i - 1][0] + (pts[i][0] - pts[i - 1][0]) * k,
+            pts[i - 1][1] + (pts[i][1] - pts[i - 1][1]) * k
+          ];
+          return { pt, cutIdx: i - 1 };
+        }
+        acc += seg;
+      }
+      return { pt: pts[pts.length - 1], cutIdx: pts.length - 1 };
+    }
+    for (let i = pts.length - 2; i >= 0; i--) {
+      const seg = dist(pts[i + 1], pts[i]);
+      if (acc + seg >= target) {
+        const k = (target - acc) / (seg || 1);
+        const pt = [
+          pts[i + 1][0] + (pts[i][0] - pts[i + 1][0]) * k,
+          pts[i + 1][1] + (pts[i][1] - pts[i + 1][1]) * k
+        ];
+        return { pt, cutIdx: i + 1 };
+      }
+      acc += seg;
+    }
+    return { pt: pts[0], cutIdx: 0 };
+  };
+  const topStart = walkEdge(topPts, cTL, true);
+  const topEnd = walkEdge(topPts, cTR, false);
+  const botStart = walkEdge(botPts, cBL, true);
+  const botEnd = walkEdge(botPts, cBR, false);
+  const insTL_top = topStart.pt;
+  const insTR_top = topEnd.pt;
+  const insBL_bot = botStart.pt;
+  const insBR_bot = botEnd.pt;
+  const insTL_cap = inset(TL, BL, cTL);
+  const insBL_cap = inset(BL, TL, cBL);
+  const insBR_cap = inset(BR, TR, cBR);
+  const insTR_cap = inset(TR, BR, cTR);
+  const fmt = (p) => `${p[0].toFixed(2)} ${p[1].toFixed(2)}`;
+  const parts = [];
+  parts.push(`M ${fmt(insTL_top)}`);
+  for (let i = topStart.cutIdx + 1; i <= topEnd.cutIdx; i++) parts.push(`L ${fmt(topPts[i])}`);
+  parts.push(`L ${fmt(insTR_top)}`);
+  parts.push(`Q ${fmt(TR)} ${fmt(insTR_cap)}`);
+  parts.push(`L ${fmt(insBR_cap)}`);
+  parts.push(`Q ${fmt(BR)} ${fmt(insBR_bot)}`);
+  for (let i = botEnd.cutIdx - 1; i >= botStart.cutIdx + 1; i--) parts.push(`L ${fmt(botPts[i])}`);
+  parts.push(`L ${fmt(insBL_bot)}`);
+  parts.push(`Q ${fmt(BL)} ${fmt(insBL_cap)}`);
+  parts.push(`L ${fmt(insTL_cap)}`);
+  parts.push(`Q ${fmt(TL)} ${fmt(insTL_top)}`);
+  parts.push("Z");
+  return parts.join(" ");
+}
+function computeRibbonBoundsFor(obj, pT, pR, pB, pL) {
+  const tp = obj == null ? void 0 : obj.textPath;
+  if (!tp || !tp.preset || tp.preset === "none") {
+    const w2 = Number(obj.width) || 0;
+    const h2 = Number(obj.height) || 0;
+    return { x: -w2 / 2 - pL, y: -h2 / 2 - pT, w: w2 + pL + pR, h: h2 + pT + pB };
+  }
+  const w = Number(obj.width) || 0;
+  const h = Number(obj.height) || 0;
+  const fs = Number(obj.fontSize) || 16;
+  const resolved = resolveTextPath(tp, w, fs);
+  const pathEl = resolved ? measurePath(resolved.d) : null;
+  const len = pathEl ? pathEl.getTotalLength() : 0;
+  if (!pathEl || !Number.isFinite(len) || len <= 0) {
+    return { x: -w / 2 - pL, y: -h / 2 - pT, w: w + pL + pR, h: h + pT + pB };
+  }
+  const halfW = w / 2;
+  const halfH = h / 2;
+  const topT = halfH + Math.max(0, pT);
+  const botT = halfH + Math.max(0, pB);
+  const STEPS = 48;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  const ext = (x, y) => {
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x > maxX) maxX = x;
+    if (y > maxY) maxY = y;
+  };
+  for (let i = 0; i <= STEPS; i++) {
+    const s = len * i / STEPS;
+    const p = pathEl.getPointAtLength(s);
+    const a = pathEl.getPointAtLength(Math.min(len, s + 0.5));
+    const b = pathEl.getPointAtLength(Math.max(0, s - 0.5));
+    let tx = a.x - b.x;
+    let ty = a.y - b.y;
+    const tl = Math.hypot(tx, ty) || 1;
+    tx /= tl;
+    ty /= tl;
+    const nx = ty, ny = -tx;
+    const px = p.x - halfW, py = p.y - halfH;
+    ext(px + nx * topT, py + ny * topT);
+    ext(px - nx * botT, py - ny * botT);
+  }
+  if (pL > 0 || pR > 0) {
+    minX -= pL;
+    maxX += pR;
+  }
+  return { x: minX, y: minY, w: Math.max(1, maxX - minX), h: Math.max(1, maxY - minY) };
+}
+function normalizeStops(stops) {
+  const out = stops.map((s) => ({ color: s.color, offset: Math.max(0, Math.min(1, Number(s.offset) || 0)) })).sort((a, b) => a.offset - b.offset);
+  if (out.length === 0) return out;
+  if (out[0].offset > 0) out.unshift({ color: out[0].color, offset: 0 });
+  if (out[out.length - 1].offset < 1) out.push({ color: out[out.length - 1].color, offset: 1 });
+  return out;
+}
+function buildCanvasGradient(ctx, g, bx, by, bw, bh) {
+  const stops = normalizeStops(g.stops);
+  if (stops.length === 0) return "#000";
+  if (g.type === "radial") {
+    const cx = bx + (g.cx ?? 0.5) * bw;
+    const cy = by + (g.cy ?? 0.5) * bh;
+    const r = Math.max(1, (g.r ?? 0.5) * Math.max(bw, bh));
+    const cg2 = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
+    stops.forEach((s) => {
+      try {
+        cg2.addColorStop(s.offset, s.color);
+      } catch {
+      }
+    });
+    return cg2;
+  }
+  const angle = g.angle ?? 90;
+  const rad = angle * Math.PI / 180;
+  const x1 = bx + (0.5 - Math.sin(rad) * 0.5) * bw;
+  const y1 = by + (0.5 + Math.cos(rad) * 0.5) * bh;
+  const x2 = bx + (0.5 + Math.sin(rad) * 0.5) * bw;
+  const y2 = by + (0.5 - Math.cos(rad) * 0.5) * bh;
+  const cg = ctx.createLinearGradient(x1, y1, x2, y2);
+  stops.forEach((s) => {
+    try {
+      cg.addColorStop(s.offset, s.color);
+    } catch {
+    }
+  });
+  return cg;
+}
+function buildSvgGradientDef(g, id, bx, by, bw, bh) {
+  const stops = normalizeStops(g.stops);
+  const stopsXml = stops.map((s) => `<stop offset="${s.offset}" stop-color="${escapeXmlAttr(s.color)}" />`).join("");
+  if (g.type === "radial") {
+    const cx = bx + (g.cx ?? 0.5) * bw;
+    const cy = by + (g.cy ?? 0.5) * bh;
+    const r = Math.max(1, (g.r ?? 0.5) * Math.max(bw, bh));
+    return `<radialGradient id="${id}" gradientUnits="userSpaceOnUse" cx="${cx.toFixed(3)}" cy="${cy.toFixed(3)}" r="${r.toFixed(3)}" fx="${cx.toFixed(3)}" fy="${cy.toFixed(3)}">${stopsXml}</radialGradient>`;
+  }
+  const angle = g.angle ?? 90;
+  const rad = angle * Math.PI / 180;
+  const x1 = bx + (0.5 - Math.sin(rad) * 0.5) * bw;
+  const y1 = by + (0.5 + Math.cos(rad) * 0.5) * bh;
+  const x2 = bx + (0.5 + Math.sin(rad) * 0.5) * bw;
+  const y2 = by + (0.5 - Math.cos(rad) * 0.5) * bh;
+  return `<linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${x1.toFixed(3)}" y1="${y1.toFixed(3)}" x2="${x2.toFixed(3)}" y2="${y2.toFixed(3)}">${stopsXml}</linearGradient>`;
+}
 function extractGInnerMarkup(markup) {
   const openMatch = markup.match(/^\s*<g\b[^>]*>/);
   if (!openMatch) return markup;
@@ -6136,6 +7751,37 @@ function extractGInnerMarkup(markup) {
   if (closeIdx <= openMatch[0].length) return markup;
   return markup.slice(openMatch[0].length, closeIdx);
 }
+function outlineTextSvgForLineShadow(inner, strokeColor, strokeWidth) {
+  if (!inner) return "";
+  try {
+    const wrapped = `<svg xmlns="http://www.w3.org/2000/svg">${inner}</svg>`;
+    const doc = new DOMParser().parseFromString(wrapped, "image/svg+xml");
+    const root = doc.documentElement;
+    if (!root || root.nodeName === "parsererror") return "";
+    const targets = Array.from(root.querySelectorAll("text, tspan"));
+    if (!targets.length) return "";
+    for (const el of targets) {
+      const style = el.getAttribute("style");
+      if (style) {
+        const cleaned = style.replace(/(?:^|;)\s*fill\s*:[^;]*/gi, "").replace(/(?:^|;)\s*stroke(?:-[a-z]+)?\s*:[^;]*/gi, "").replace(/^;+/, "").trim();
+        if (cleaned) el.setAttribute("style", cleaned);
+        else el.removeAttribute("style");
+      }
+      el.setAttribute("fill", "none");
+      el.setAttribute("stroke", strokeColor);
+      el.setAttribute("stroke-width", strokeWidth.toFixed(3));
+      el.setAttribute("stroke-linejoin", "round");
+      el.setAttribute("paint-order", "stroke");
+    }
+    let out = "";
+    for (const child of Array.from(root.childNodes)) {
+      out += new XMLSerializer().serializeToString(child);
+    }
+    return out;
+  } catch {
+    return "";
+  }
+}
 const TRIANGLE_STROKE_MITER_LIMIT = 1e6;
 const toSafeNumber = (value, fallback = 0) => Number.isFinite(value) ? Math.max(0, Number(value)) : fallback;
 function normalizeShapeType(shapeType) {
@@ -6764,7 +8410,8 @@ function createText(element) {
     // same value as a fit-target, so the rendered box and the shrink target
     // stay in sync (parity with the Use page / EC2 renderer).
     ...(element.minBoxHeight ?? 0) > 0 ? { minBoxHeight: element.minBoxHeight } : {},
-    verticalAlign: element.verticalAlign || "top"
+    verticalAlign: element.verticalAlign || "top",
+    ...element.textPath && element.textPath.preset && element.textPath.preset !== "none" ? { textPath: element.textPath } : {}
   });
   textbox.__formattingEnabled = formattingEnabled;
   textbox.initDimensions();
@@ -6871,6 +8518,9 @@ function createFabricObject(element) {
     if (element.type === "shape" || element.type === "line" || element.type === "text") {
       applyInitialGradients(obj, element);
     }
+    if (element.type === "text" && obj instanceof fabric__namespace.Textbox) {
+      applyTextPathControls(obj);
+    }
   }
   return obj;
 }
@@ -7057,7 +8707,7 @@ const progressDefinition = {
   ],
   render: renderProgressSvg
 };
-function escapeXml(str) {
+function escapeXml$1(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 function estimateTextWidth(text, fontSize, fontWeight) {
@@ -7104,7 +8754,7 @@ function renderTableSvg(props, width, height) {
       if (text) {
         const maxChars = Math.max(3, Math.floor(cellW / (fontSize * 0.55)));
         const displayText = text.length > maxChars ? text.slice(0, maxChars - 1) + "…" : text;
-        svg += `<text x="${x + cellW / 2}" y="${y + cellH / 2}" text-anchor="middle" dominant-baseline="central" font-size="${fontSize}" font-family="${escapeXml(fontFamily)}" font-weight="${fontWeight}" fill="${textColor}">${escapeXml(displayText)}</text>`;
+        svg += `<text x="${x + cellW / 2}" y="${y + cellH / 2}" text-anchor="middle" dominant-baseline="central" font-size="${fontSize}" font-family="${escapeXml$1(fontFamily)}" font-weight="${fontWeight}" fill="${textColor}">${escapeXml$1(displayText)}</text>`;
       }
     }
   }
@@ -7171,7 +8821,7 @@ function renderAvatarSvg(props, width, height) {
   }
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
   ${shapeSvg}
-  <text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-size="${fontSize}" font-family="${escapeXml(fontFamily)}" font-weight="600" fill="${textColor}">${initials}</text>
+  <text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-size="${fontSize}" font-family="${escapeXml$1(fontFamily)}" font-weight="600" fill="${textColor}">${initials}</text>
 </svg>`;
 }
 const avatarDefinition = {
@@ -7262,7 +8912,7 @@ function renderBadgeInternal(props, width, height) {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${finalWidth}" height="${height}" viewBox="0 0 ${finalWidth} ${height}">
   <rect x="${inset}" y="${inset}" width="${finalWidth - borderWidth}" height="${height - borderWidth}" rx="${rx}" fill="${bgColor}" stroke="${borderColor}" stroke-width="${borderWidth}"/>
   ${iconSvg}
-  <text x="${textX}" y="${height / 2}" text-anchor="middle" dominant-baseline="central" font-size="${fontSize}" font-family="${escapeXml(fontFamily)}" font-weight="${fontWeight}" fill="${textColor}">${escapeXml(displayText)}</text>
+  <text x="${textX}" y="${height / 2}" text-anchor="middle" dominant-baseline="central" font-size="${fontSize}" font-family="${escapeXml$1(fontFamily)}" font-weight="${fontWeight}" fill="${textColor}">${escapeXml$1(displayText)}</text>
 </svg>`;
   return { svg, computedWidth, anchor };
 }
@@ -8936,6 +10586,9 @@ const PageCanvas = react.forwardRef(
               if (typeof baked === "number" && baked > 0) {
                 elementUpdate.minBoxHeight = baked;
               }
+              if (obj.textPath) {
+                elementUpdate.textPath = obj.textPath;
+              }
             }
             if (sourceElement && sourceElement.opacity !== void 0) {
               elementUpdate.opacity = sourceElement.opacity;
@@ -9670,6 +11323,7 @@ const PageCanvas = react.forwardRef(
                 (existingObj.verticalAlign ?? "top") !== (element.verticalAlign ?? "top") || Math.abs((existingObj.minBoxHeight ?? 0) - (element.minBoxHeight ?? 0)) > 0.1 || // Detect text background + shadow changes so panel edits flow into Fabric.
                 JSON.stringify({
                   c: element.textBgColor ?? null,
+                  g: element.textBgGradient ?? null,
                   p: element.textBgPadding ?? 0,
                   pt: element.textBgPaddingTop ?? null,
                   pr: element.textBgPaddingRight ?? null,
@@ -9688,7 +11342,7 @@ const PageCanvas = react.forwardRef(
                   st: element.textShadowAffectsText !== false,
                   sa: element.textShadowAffectsBg !== false
                 }) !== (existingObj.__lastTextBgShadowJson ?? "") || // CRITICAL: Detect gradient fill/stroke changes — serialise to JSON for deep comparison
-                JSON.stringify(element.fillGradient || null) !== (existingObj.__lastFillGradientJson ?? "null") || JSON.stringify(element.strokeGradient || null) !== (existingObj.__lastStrokeGradientJson ?? "null");
+                JSON.stringify(element.fillGradient || null) !== (existingObj.__lastFillGradientJson ?? "null") || JSON.stringify(element.strokeGradient || null) !== (existingObj.__lastStrokeGradientJson ?? "null") || JSON.stringify(element.textPath || null) !== JSON.stringify(existingObj.textPath || null);
                 const forceApplyFromPanel = syncTriggeredByPanelRef.current;
                 const noPropsOrPositionChanged = !positionChanged && !otherPropsChanged;
                 if (noPropsOrPositionChanged && !forceApplyFromPanel || visibilityUpdateInProgressRef.current) {
@@ -10122,7 +11776,7 @@ const PageCanvas = react.forwardRef(
       });
     }, [selectedIds, isActive, ready, elements]);
     const updateFabricObject = (obj, element, skipPositionUpdate = false) => {
-      var _a, _b;
+      var _a, _b, _c;
       const fc = fabricRef.current;
       if (fc && isTransforming(fc)) {
         return;
@@ -10399,6 +12053,8 @@ const PageCanvas = react.forwardRef(
         obj.setCoords();
       }
       if (!isLine) {
+        const angleTextPathActive = isTextbox && ((_b = element.textPath) == null ? void 0 : _b.preset) === "rise";
+        const appliedSkewY = angleTextPathActive ? 0 : element.skewY ?? 0;
         let posIfNotSkipped = skipPositionUpdate ? {} : { left: fabricPos.left, top: fabricPos.top };
         if (!skipPositionUpdate && obj instanceof fabric__namespace.FabricImage && obj.originX === "center") {
           const vW = rW * effectiveScaleX;
@@ -10414,7 +12070,7 @@ const PageCanvas = react.forwardRef(
               scaleY: effectiveScaleY,
               angle: element.angle ?? 0,
               skewX: element.skewX ?? 0,
-              skewY: element.skewY ?? 0
+              skewY: appliedSkewY
             });
           } else {
             obj.set({
@@ -10434,7 +12090,7 @@ const PageCanvas = react.forwardRef(
               width: rW,
               angle: element.angle ?? 0,
               skewX: element.skewX ?? 0,
-              skewY: element.skewY ?? 0,
+              skewY: appliedSkewY,
               scaleX: effectiveScaleX * baseScaleX,
               scaleY: effectiveScaleY * baseScaleY
             });
@@ -10566,7 +12222,9 @@ const PageCanvas = react.forwardRef(
           dynamicMinWidth: 0,
           fontSize,
           fontFamily: element.fontFamily || "Open Sans",
-          fill: element.fill || "#1a1a1a",
+          // If a gradient fill is active, do not briefly overwrite it with the
+          // stored solid fallback while applying textPath/panel updates.
+          fill: element.fillGradient && isGradientConfig(element.fillGradient) ? obj.fill : element.fill || "#1a1a1a",
           fontWeight: element.fontWeight || 400,
           textAlign: element.textAlign || "left",
           fontStyle: element.fontStyle || "normal",
@@ -10583,6 +12241,13 @@ const PageCanvas = react.forwardRef(
         const minBoxH = Math.max(0, Number(element.minBoxHeight) || 0);
         obj.verticalAlign = valign;
         obj.minBoxHeight = minBoxH;
+        const nextTextPath = element.textPath;
+        if (nextTextPath && nextTextPath.preset && nextTextPath.preset !== "none") {
+          obj.textPath = nextTextPath;
+        } else {
+          obj.textPath = void 0;
+        }
+        applyTextPathControls(obj);
         if (element.formattingEnabled === true) {
           obj.styles = parsedStyles || {};
         } else {
@@ -10605,9 +12270,10 @@ const PageCanvas = react.forwardRef(
           } catch {
           }
           obj.dirty = true;
-          (_b = obj.setCoords) == null ? void 0 : _b.call(obj);
+          (_c = obj.setCoords) == null ? void 0 : _c.call(obj);
           obj.__lastTextBgShadowJson = JSON.stringify({
             c: element.textBgColor ?? null,
+            g: element.textBgGradient ?? null,
             p: element.textBgPadding ?? 0,
             pt: element.textBgPaddingTop ?? null,
             pr: element.textBgPaddingRight ?? null,
@@ -10624,7 +12290,8 @@ const PageCanvas = react.forwardRef(
             sx: element.textShadowOffsetX ?? 0,
             sy: element.textShadowOffsetY ?? 0,
             st: element.textShadowAffectsText !== false,
-            sa: element.textShadowAffectsBg !== false
+            sa: element.textShadowAffectsBg !== false,
+            sty: element.textShadowType ?? null
           });
           obj.dirty = true;
         } catch (err) {
@@ -11037,9 +12704,7 @@ const PageCanvas = react.forwardRef(
       }
       try {
         let url = getProxiedImageUrl(imageUrl);
-        const hasColorOverrides = Boolean(element.svgColorMap && Object.keys(element.svgColorMap).length > 0);
-        const isInlineSvgDataUrl = imageUrl.startsWith("data:image/svg+xml");
-        if (isSvgImage(imageUrl, element.sourceFormat) && (!isInlineSvgDataUrl || hasColorOverrides)) {
+        if (isSvgImage(imageUrl, element.sourceFormat)) {
           const normalized = await getNormalizedSvgUrl(imageUrl, element.svgColorMap, element.sourceFormat);
           if (!isLatestRequest()) return;
           if (normalized) url = normalized;
@@ -15831,6 +17496,7 @@ async function resolveFromForm(options) {
   } else {
     inferredSections = [];
   }
+  const templateDefaultMetaSectionState = templateRow.default_data && isDefaultDataV2(templateRow.default_data) ? templateRow.default_data.sectionState : extractSectionStateCandidate(templateRow.default_data, inferredSections);
   const defaultFormMetaSectionState = extractSectionStateCandidate(defaultForm == null ? void 0 : defaultForm.values, inferredSections) ?? extractSectionStateCandidate(defaultForm == null ? void 0 : defaultForm.saved_data, inferredSections);
   let mergedSectionState = { ...sectionState };
   const templateDefaultData = templateRow.default_data;
@@ -15842,6 +17508,7 @@ async function resolveFromForm(options) {
       }
     }
   }
+  mergedSectionState = mergeRepeatableEntryMeta(mergedSectionState, templateDefaultMetaSectionState, inferredSections);
   mergedSectionState = mergeRepeatableEntryMeta(mergedSectionState, defaultFormMetaSectionState, inferredSections);
   const flatFormData = flattenSectionStateToFormData(mergedSectionState, inferredSections);
   const dynamicFields = templateConfig.dynamicFields || [];
@@ -16804,6 +18471,312 @@ function normalizeSvgDimensions(svg, targetWidth, targetHeight) {
 function isTextboxLike(obj) {
   return !!obj && (obj instanceof fabric__namespace.Textbox || obj.type === "textbox" || Array.isArray(obj == null ? void 0 : obj._textLines) && typeof obj.getLineWidth === "function");
 }
+function escapeXml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function ensureFabricGradientDef(doc, obj, width, height) {
+  const grad = obj == null ? void 0 : obj.fill;
+  if (!grad || typeof grad !== "object" || !Array.isArray(grad.colorStops) || !grad.coords) return "";
+  const id = `pixldocs_text_grad_${String(obj.__docuforgeId || grad.id || Math.random()).replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+  if (doc.getElementById(id)) return `url(#${id})`;
+  const ns = "http://www.w3.org/2000/svg";
+  let defs = doc.querySelector("defs");
+  if (!defs) {
+    defs = doc.createElementNS(ns, "defs");
+    doc.documentElement.insertBefore(defs, doc.documentElement.firstChild);
+  }
+  const c = grad.coords || {};
+  const el = doc.createElementNS(ns, grad.type === "radial" ? "radialGradient" : "linearGradient");
+  el.setAttribute("id", id);
+  el.setAttribute("gradientUnits", "userSpaceOnUse");
+  if (grad.type === "radial") {
+    el.setAttribute("cx", (Number(c.x2 ?? c.x1 ?? width / 2) - width / 2).toFixed(3));
+    el.setAttribute("cy", (Number(c.y2 ?? c.y1 ?? height / 2) - height / 2).toFixed(3));
+    el.setAttribute("fx", (Number(c.x1 ?? c.x2 ?? width / 2) - width / 2).toFixed(3));
+    el.setAttribute("fy", (Number(c.y1 ?? c.y2 ?? height / 2) - height / 2).toFixed(3));
+    el.setAttribute("r", Math.max(0.1, Number(c.r2 ?? c.r ?? Math.max(width, height) / 2)).toFixed(3));
+  } else {
+    el.setAttribute("x1", (Number(c.x1) - width / 2).toFixed(3));
+    el.setAttribute("y1", (Number(c.y1) - height / 2).toFixed(3));
+    el.setAttribute("x2", (Number(c.x2 ?? width) - width / 2).toFixed(3));
+    el.setAttribute("y2", (Number(c.y2) - height / 2).toFixed(3));
+  }
+  for (const stop of grad.colorStops) {
+    const stopEl = doc.createElementNS(ns, "stop");
+    stopEl.setAttribute("offset", String(Math.max(0, Math.min(1, Number(stop.offset) || 0))));
+    stopEl.setAttribute("stop-color", stop.color || "#000000");
+    el.appendChild(stopEl);
+  }
+  defs.appendChild(el);
+  return `url(#${id})`;
+}
+function warpTextboxSvgAlongPath(svg, obj) {
+  var _a, _b, _c, _d, _e;
+  const tp = obj == null ? void 0 : obj.textPath;
+  if (!tp || !tp.preset || tp.preset === "none") return svg;
+  if (tp.preset === "rise" || tp.preset === "angle") {
+    const w2 = Number(obj.width) || 0;
+    const h2 = Number(obj.height) || 0;
+    const fs2 = Number(obj.fontSize) || 16;
+    const ep = tp.endpoints;
+    const defaultLeftY = fs2 * 1.5;
+    const defaultRightY = fs2 * 0.5;
+    const leftY = ep && Number.isFinite(ep.leftY) ? ep.leftY : defaultLeftY;
+    const rightY = ep && Number.isFinite(ep.rightY) ? ep.rightY : defaultRightY;
+    const slope = w2 > 0 ? (rightY - leftY) / w2 : 0;
+    const dy = (leftY + rightY) / 2 - h2 / 2;
+    if (Math.abs(slope) < 1e-6 && Math.abs(dy) < 1e-6) return svg;
+    let doc2;
+    try {
+      doc2 = new DOMParser().parseFromString(svg, "image/svg+xml");
+    } catch {
+      return svg;
+    }
+    const textEls2 = Array.from(doc2.querySelectorAll("text"));
+    if (!textEls2.length) return svg;
+    const matrix = `matrix(1 ${slope.toFixed(6)} 0 1 0 ${dy.toFixed(3)})`;
+    for (const textEl2 of textEls2) {
+      const existing = textEl2.getAttribute("transform");
+      textEl2.setAttribute("transform", existing ? `${matrix} ${existing}` : matrix);
+    }
+    const bgShapes = Array.from(doc2.querySelectorAll("path.__pdTextBgShape"));
+    for (const bgEl of bgShapes) {
+      const existing = bgEl.getAttribute("transform");
+      bgEl.setAttribute("transform", existing ? `${matrix} ${existing}` : matrix);
+    }
+    return new XMLSerializer().serializeToString(doc2.documentElement);
+  }
+  const resolved = resolveTextPath(tp, Number(obj.width) || 0, Number(obj.fontSize) || 16);
+  if (!resolved) return svg;
+  const pathEl = measurePath(resolved.d);
+  if (!pathEl) return svg;
+  const totalLen = pathEl.getTotalLength();
+  if (!Number.isFinite(totalLen) || totalLen <= 0) return svg;
+  const plain = String(obj.text || "").replace(/\n/g, " ");
+  if (!plain) return svg;
+  let doc;
+  try {
+    doc = new DOMParser().parseFromString(svg, "image/svg+xml");
+  } catch {
+    return svg;
+  }
+  for (const marker of Array.from(doc.querySelectorAll("g.__pdShadowRaster"))) {
+    try {
+      (_a = marker.parentNode) == null ? void 0 : _a.removeChild(marker);
+    } catch {
+    }
+  }
+  for (const clone of Array.from(doc.querySelectorAll("g.__pdTextShadowClone"))) {
+    try {
+      (_b = clone.parentNode) == null ? void 0 : _b.removeChild(clone);
+    } catch {
+    }
+  }
+  const textEls = Array.from(doc.querySelectorAll("text"));
+  if (!textEls.length) return svg;
+  const hasFilterInChain = (el) => {
+    let cur = el;
+    while (cur && cur !== doc.documentElement) {
+      if (cur.getAttribute("filter") || /filter\s*:/i.test(cur.getAttribute("style") || "")) return true;
+      cur = cur.parentElement;
+    }
+    return false;
+  };
+  const textEl = textEls.find((el) => !hasFilterInChain(el)) || textEls[textEls.length - 1] || textEls[0];
+  const ff = obj.fontFamily || "Open Sans";
+  const fs = Number(obj.fontSize) || 16;
+  const fw = obj.fontWeight ?? 400;
+  const fst = obj.fontStyle || "normal";
+  const readFill = (el) => {
+    var _a2, _b2;
+    if (!el) return "";
+    return el.getAttribute("fill") || ((_b2 = (_a2 = (el.getAttribute("style") || "").match(/(?:^|;)\s*fill\s*:\s*([^;]+)/i)) == null ? void 0 : _a2[1]) == null ? void 0 : _b2.trim()) || "";
+  };
+  const w = Number(obj.width) || 0;
+  const h = Number(obj.height) || 0;
+  const synthesizedGradientFill = ensureFabricGradientDef(doc, obj, w, h);
+  const fabricGradientFill = obj.fill && typeof obj.fill === "object" && obj.fill.id != null ? `url(#SVGID_${obj.fill.id})` : "";
+  const fillAttr = synthesizedGradientFill || readFill(textEl) || readFill(textEl.querySelector("tspan")) || fabricGradientFill || (typeof obj.fill === "string" ? obj.fill : "#000");
+  const stripFilter = (el) => {
+    if (!el) return;
+    el.removeAttribute("filter");
+    const style = el.getAttribute("style");
+    if (style && /filter\s*:/i.test(style)) {
+      el.setAttribute("style", style.replace(/(?:^|;)\s*filter\s*:[^;]*/gi, "").replace(/^;+/, ""));
+    }
+  };
+  for (const el of Array.from(doc.querySelectorAll("*"))) stripFilter(el);
+  for (const filter of Array.from(doc.querySelectorAll("filter"))) {
+    try {
+      (_c = filter.parentNode) == null ? void 0 : _c.removeChild(filter);
+    } catch {
+    }
+  }
+  let shadowConfig = null;
+  if (obj.shadow) {
+    const sh = obj.shadow;
+    const color = sh.color || "rgba(0,0,0,0.5)";
+    const blur = Math.max(0, Number(sh.blur) || 0);
+    const dx = Number(sh.offsetX) || 0;
+    const dy = Number(sh.offsetY) || 0;
+    shadowConfig = { color, dx, dy, blur };
+  }
+  const bgCfg = obj.__pdBg;
+  const extOX = Number((bgCfg == null ? void 0 : bgCfg.shadowOffsetX) ?? 0) || 0;
+  const extOY = Number((bgCfg == null ? void 0 : bgCfg.shadowOffsetY) ?? 0) || 0;
+  const extDist = Math.hypot(extOX, extOY);
+  const extColor = bgCfg == null ? void 0 : bgCfg.shadowColor;
+  const hasExtShadowColor = !!extColor && extColor !== "transparent";
+  const affectsText = !bgCfg || bgCfg.shadowAffectsText !== false;
+  const blockShadowActive = !!bgCfg && bgCfg.shadowType === "block" && hasExtShadowColor && extDist > 0 && affectsText;
+  const lineShadowActive = !!bgCfg && bgCfg.shadowType === "line" && hasExtShadowColor && extDist > 0 && affectsText;
+  let blockSteps = 0;
+  let blockStepX = 0;
+  let blockStepY = 0;
+  if (blockShadowActive) {
+    const STEP = 1;
+    blockSteps = Math.min(200, Math.max(1, Math.ceil(extDist / STEP)));
+    blockStepX = extOX / blockSteps;
+    blockStepY = extOY / blockSteps;
+  }
+  const flowStops = (obj == null ? void 0 : obj.fill) && typeof obj.fill === "object" && Array.isArray(obj.fill.colorStops) && obj.fill.colorStops.length ? obj.fill.colorStops.map((s) => ({ offset: Number(s.offset) || 0, color: s.color || "#000" })) : null;
+  const gradId = (fillAttr.match(/url\(#([^)]+)\)/) || [])[1];
+  if (gradId && w > 0 && h > 0) {
+    const grad = doc.getElementById(gradId);
+    if (grad && grad.getAttribute("gradientUnits") !== "userSpaceOnUse") {
+      const tag = grad.tagName.toLowerCase();
+      const num = (v, fallback) => {
+        if (v == null) return fallback;
+        const n = parseFloat(v);
+        return Number.isFinite(n) ? n : fallback;
+      };
+      const mapX = (u) => -w / 2 + u * w;
+      const mapY = (u) => -h / 2 + u * h;
+      grad.setAttribute("gradientUnits", "userSpaceOnUse");
+      if (tag === "lineargradient") {
+        const x1 = num(grad.getAttribute("x1"), 0);
+        const y1 = num(grad.getAttribute("y1"), 0);
+        const x2 = num(grad.getAttribute("x2"), 1);
+        const y2 = num(grad.getAttribute("y2"), 0);
+        grad.setAttribute("x1", mapX(x1).toFixed(3));
+        grad.setAttribute("y1", mapY(y1).toFixed(3));
+        grad.setAttribute("x2", mapX(x2).toFixed(3));
+        grad.setAttribute("y2", mapY(y2).toFixed(3));
+      } else if (tag === "radialgradient") {
+        const cx = num(grad.getAttribute("cx"), 0.5);
+        const cy = num(grad.getAttribute("cy"), 0.5);
+        const r = num(grad.getAttribute("r"), 0.5);
+        const fx = num(grad.getAttribute("fx"), cx);
+        const fy = num(grad.getAttribute("fy"), cy);
+        grad.setAttribute("cx", mapX(cx).toFixed(3));
+        grad.setAttribute("cy", mapY(cy).toFixed(3));
+        grad.setAttribute("fx", mapX(fx).toFixed(3));
+        grad.setAttribute("fy", mapY(fy).toFixed(3));
+        grad.setAttribute("r", (r * Math.max(w, h)).toFixed(3));
+      }
+    }
+  }
+  const measure = document.createElement("canvas").getContext("2d");
+  if (!measure) return svg;
+  measure.font = `${fst} ${fw} ${fs}px "${ff}"`;
+  const chars = Array.from(plain);
+  const spacing = (Number(obj.charSpacing) || 0) * fs / 1e3;
+  const widths = chars.map((c) => measure.measureText(c).width + spacing);
+  const totalWidth = widths.reduce((a, b) => a + b, 0);
+  const baselineDy = resolveTextPathAlphabeticBaselineDy(measure, plain, fs);
+  let cursor = 0;
+  if (obj.textAlign === "center") cursor = Math.max(0, (totalLen - totalWidth) / 2);
+  else if (obj.textAlign === "right") cursor = Math.max(0, totalLen - totalWidth);
+  const halfW = (Number(obj.width) || 0) / 2;
+  const halfH = (Number(obj.height) || 0) / 2;
+  const glyphSvg = [];
+  const shadowSvg = [];
+  const blockShadowSvg = [];
+  const lineShadowSvg = [];
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (let i = 0; i < chars.length; i++) {
+    const cw = widths[i];
+    const mid = cursor + cw / 2;
+    cursor += cw;
+    if (mid > totalLen) break;
+    const p = pathEl.getPointAtLength(Math.max(0, mid));
+    const ahead = pathEl.getPointAtLength(Math.min(totalLen, mid + 0.5));
+    const deg = Math.atan2(ahead.y - p.y, ahead.x - p.x) * 180 / Math.PI;
+    const x = p.x - halfW;
+    const y = p.y - halfH;
+    const glyphPad = Math.max(fs, cw) * 0.75;
+    minX = Math.min(minX, x - glyphPad);
+    minY = Math.min(minY, y - glyphPad - fs);
+    maxX = Math.max(maxX, x + glyphPad);
+    maxY = Math.max(maxY, y + glyphPad);
+    const glyphFill = flowStops ? sampleGradientColor(flowStops, chars.length > 1 ? i / (chars.length - 1) : 0) : fillAttr;
+    if (blockShadowActive) {
+      for (let s = blockSteps; s >= 1; s--) {
+        const bx = x + blockStepX * s;
+        const by = y + blockStepY * s;
+        blockShadowSvg.push(
+          `<text font-family="${escapeXml(String(ff))}" font-size="${fs}" font-weight="${fw}" font-style="${fst}" data-source-font-family="${escapeXml(String(ff))}" data-source-font-weight="${escapeXml(String(fw))}" data-source-font-style="${escapeXml(String(fst))}" fill="${escapeXml(String(extColor))}" text-anchor="middle" y="${baselineDy.toFixed(3)}" data-pixldocs-warp-block-shadow="true" transform="translate(${bx.toFixed(3)} ${by.toFixed(3)}) rotate(${deg.toFixed(3)})">${escapeXml(chars[i])}</text>`
+        );
+      }
+    }
+    if (lineShadowActive) {
+      const lx = x + extOX;
+      const ly = y + extOY;
+      const lineStrokeW = LINE_SHADOW_STROKE_WIDTH;
+      lineShadowSvg.push(
+        `<text font-family="${escapeXml(String(ff))}" font-size="${fs}" font-weight="${fw}" font-style="${fst}" data-source-font-family="${escapeXml(String(ff))}" data-source-font-weight="${escapeXml(String(fw))}" data-source-font-style="${escapeXml(String(fst))}" fill="none" stroke="${escapeXml(String(extColor))}" stroke-width="${lineStrokeW.toFixed(3)}" stroke-linejoin="round" paint-order="stroke" text-anchor="middle" y="${baselineDy.toFixed(3)}" data-pixldocs-warp-line-shadow="true" transform="translate(${lx.toFixed(3)} ${ly.toFixed(3)}) rotate(${deg.toFixed(3)})">${escapeXml(chars[i])}</text>`
+      );
+    }
+    if (shadowConfig) {
+      const sx = x + shadowConfig.dx;
+      const sy = y + shadowConfig.dy;
+      shadowSvg.push(
+        `<text font-family="${escapeXml(String(ff))}" font-size="${fs}" font-weight="${fw}" font-style="${fst}" data-source-font-family="${escapeXml(String(ff))}" data-source-font-weight="${escapeXml(String(fw))}" data-source-font-style="${escapeXml(String(fst))}" fill="${escapeXml(shadowConfig.color)}" text-anchor="middle" y="${baselineDy.toFixed(3)}" data-pixldocs-warp-shadow="true" transform="translate(${sx.toFixed(3)} ${sy.toFixed(3)}) rotate(${deg.toFixed(3)})">${escapeXml(chars[i])}</text>`
+      );
+    }
+    glyphSvg.push(
+      `<text font-family="${escapeXml(String(ff))}" font-size="${fs}" font-weight="${fw}" font-style="${fst}" data-source-font-family="${escapeXml(String(ff))}" data-source-font-weight="${escapeXml(String(fw))}" data-source-font-style="${escapeXml(String(fst))}" fill="${escapeXml(glyphFill)}" text-anchor="middle" y="${baselineDy.toFixed(3)}" data-pixldocs-warp-glyph="true" transform="translate(${x.toFixed(3)} ${y.toFixed(3)}) rotate(${deg.toFixed(3)})">${escapeXml(chars[i])}</text>`
+    );
+  }
+  const replacement = doc.createElementNS("http://www.w3.org/2000/svg", "g");
+  replacement.setAttribute("data-pixldocs-warped", "true");
+  let innerHtml = "";
+  if (shadowConfig && shadowSvg.length) {
+    const blur = Math.max(0, Number(shadowConfig.blur) || 0);
+    if (blur > 0 && Number.isFinite(minX) && Number.isFinite(maxX)) {
+      const pad = Math.max(8, blur * 3);
+      const sMinX = minX + shadowConfig.dx - pad;
+      const sMinY = minY + shadowConfig.dy - pad;
+      const sMaxX = maxX + shadowConfig.dx + pad;
+      const sMaxY = maxY + shadowConfig.dy + pad;
+      const bw = Math.max(1, sMaxX - sMinX);
+      const bh = Math.max(1, sMaxY - sMinY);
+      innerHtml += `<g class="__pdShadowRaster" data-pixldocs-warp-shadow-group="true" data-blur="${blur}" data-ox="0" data-oy="0" data-bx="${sMinX.toFixed(3)}" data-by="${sMinY.toFixed(3)}" data-bw="${bw.toFixed(3)}" data-bh="${bh.toFixed(3)}">${shadowSvg.join("")}</g>`;
+    } else {
+      innerHtml += `<g data-pixldocs-warp-shadow-group="true">${shadowSvg.join("")}</g>`;
+    }
+  }
+  if (lineShadowSvg.length) {
+    innerHtml = `<g data-pixldocs-warp-line-shadow-group="true">${lineShadowSvg.join("")}</g>` + innerHtml;
+  }
+  if (blockShadowSvg.length) {
+    innerHtml = `<g data-pixldocs-warp-block-shadow-group="true">${blockShadowSvg.join("")}</g>` + innerHtml;
+  }
+  innerHtml += glyphSvg.join("");
+  replacement.innerHTML = innerHtml;
+  (_d = textEl.parentNode) == null ? void 0 : _d.replaceChild(replacement, textEl);
+  for (let i = 1; i < textEls.length; i++) {
+    try {
+      (_e = textEls[i].parentNode) == null ? void 0 : _e.removeChild(textEls[i]);
+    } catch {
+    }
+  }
+  const serialized = new XMLSerializer().serializeToString(doc.documentElement);
+  return serialized;
+}
 function stampFabricLineMetricsOnTextSvg(svg, obj) {
   const lines = Array.isArray(obj == null ? void 0 : obj._textLines) ? obj._textLines : [];
   if (!lines.length || typeof (obj == null ? void 0 : obj.getLineWidth) !== "function") return svg;
@@ -16874,6 +18847,7 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
         obj.toSVG = (reviver) => {
           let svg = originalToSVG(reviver);
           if (isTextboxLike(obj)) svg = stampFabricLineMetricsOnTextSvg(svg, obj);
+          if (isTextboxLike(obj)) svg = warpTextboxSvgAlongPath(svg, obj);
           if (imageId) svg = stampPixldocsImageIdOnSvg(svg, imageId);
           return svg;
         };
@@ -16968,9 +18942,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.204";
+const resolvedPackageVersion = "0.5.206";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.204";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.206";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -17649,7 +19623,7 @@ class PixldocsRenderer {
         await this.waitForCanvasScene(container, cloned, i);
       }
       console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
-      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-BzQh8tO6.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-C0s166DN.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -19833,7 +21807,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-BzQh8tO6.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-C0s166DN.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -19965,7 +21939,7 @@ async function assemblePdfFromSvgs(svgResults, options = {}) {
       );
     }
     try {
-      const { prepareSvgTextForPdfMode } = await Promise.resolve().then(() => require("./svgTextToPath-hYM9qTeC.cjs"));
+      const { prepareSvgTextForPdfMode } = await Promise.resolve().then(() => require("./svgTextToPath-BT7lcwLT.cjs"));
       pageSvg = await prepareSvgTextForPdfMode(pageSvg, textMode, fontBaseUrl);
       try {
         dumpSvgTextDiagnostics(pageSvg, i, PARITY_TAG, "STAGE-1b-after-shared-text-prep");
@@ -20230,4 +22204,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-pfkM2NbI.cjs.map
+//# sourceMappingURL=index-B1kaODSZ.cjs.map