@pixldocs/canvas-renderer 0.5.495 → 0.5.496

package/dist/{index-DaaT4Mo7.cjs → index-CZtvER5z.cjs}

@@ -2257,6 +2257,40 @@ function adaptLayoutGrid(grid, mode) {
   const cells = (grid.cells ?? []).map((c) => c && c.grid ? { ...c, grid: adaptLayoutGrid(c.grid, mode) } : c);
   return { ...grid, dir: grid.dir === from ? to : grid.dir, cells };
 }
+function isAspectLockedNode(node) {
+  const e = node;
+  if (!e) return false;
+  if (e.lockAspect === true) return true;
+  if (e.clipShape === "circle") return true;
+  const kind = e.componentKind || e.smartType;
+  return kind === "qrcode" || kind === "barcode";
+}
+function scaleNodeForReflow(node, sx, sy, fscale) {
+  const n = node;
+  const el = { ...n };
+  const hasBox = typeof n.width === "number" && typeof n.height === "number";
+  const f = (v) => typeof v === "number" && Number.isFinite(v) ? v : 0;
+  if (hasBox && isAspectLockedNode(n) && sx !== sy) {
+    const s = Math.min(sx, sy);
+    const cx = (f(n.left) + n.width / 2) * sx;
+    const cy = (f(n.top) + n.height / 2) * sy;
+    el.width = n.width * s;
+    el.height = n.height * s;
+    el.left = cx - el.width / 2;
+    el.top = cy - el.height / 2;
+  } else {
+    if (typeof el.left === "number") el.left = el.left * sx;
+    if (typeof el.top === "number") el.top = el.top * sy;
+    if (typeof el.width === "number") el.width = el.width * sx;
+    if (typeof el.height === "number") el.height = el.height * sy;
+  }
+  if (typeof el.fontSize === "number") el.fontSize = Math.max(4, el.fontSize * fscale);
+  if (typeof el.minBoxHeight === "number") el.minBoxHeight = el.minBoxHeight * sy;
+  if (Array.isArray(el.children)) {
+    el.children = el.children.map((c) => scaleNodeForReflow(c, sx, sy, fscale));
+  }
+  return el;
+}
 function computeGridHandles(grid, box, gridPath = []) {
   const out = [];
   const n = grid.cells.length;
@@ -2659,16 +2693,7 @@ const reflowPagesFromBase = (base, W, H) => {
   const fscale = Math.sqrt(Math.max(0.01, sx * sy));
   const adapt = layoutAdaptationFor(base.width, base.height, W, H);
   const num = (v) => typeof v === "number" && Number.isFinite(v) ? v : 0;
-  const scaleNode = (node) => {
-    const el = { ...node };
-    if (typeof el.left === "number") el.left = el.left * sx;
-    if (typeof el.top === "number") el.top = el.top * sy;
-    if (typeof el.width === "number") el.width = el.width * sx;
-    if (typeof el.height === "number") el.height = el.height * sy;
-    if (typeof el.fontSize === "number") el.fontSize = Math.max(4, el.fontSize * fscale);
-    if (Array.isArray(el.children)) el.children = el.children.map(scaleNode);
-    return el;
-  };
+  const scaleNode = (node) => scaleNodeForReflow(node, sx, sy, fscale);
   return base.pages.map((p) => {
     const pg = p;
     const page = {
@@ -3257,6 +3282,13 @@ const useEditorStore = zustand.create((set, get) => ({
       return { canvas: nextCanvas, ...committed };
     });
   },
+  getCanvasForSave: () => {
+    const { canvas } = get();
+    const base = sizeBaseSnapshot;
+    if (!base) return canvas;
+    if (canvas.width === base.width && canvas.height === base.height) return canvas;
+    return { ...canvas, width: base.width, height: base.height, pages: base.pages };
+  },
   addSizeVariant: (variant) => set((state) => {
     const sizes = state.canvas.sizes ?? [];
     if (sizes.some((s) => s.id === variant.id)) return {};
@@ -6510,8 +6542,14 @@ async function loadImageAsync(element, placeholder, fc, fabricRef, syncLockedRef
         shape,
         rx: rxRatio,
         // Pass ratio, not pixel value
-        stroke: element.stroke,
-        strokeWidth: element.strokeWidth,
+        // Image outline is an ELEMENT property (imageBorder*), not the generic
+        // shape stroke — this builder forwarded only stroke/strokeWidth, so
+        // outline/gap never reached it.
+        stroke: (element.imageBorderWidth ?? 0) > 0 ? element.imageBorderColor ?? "#FFFFFF" : element.stroke,
+        strokeWidth: (element.imageBorderWidth ?? 0) > 0 ? element.imageBorderWidth : element.strokeWidth,
+        borderPadding: element.imageBorderPadding ?? 0,
+        borderPaddingColor: element.imageBorderPaddingColor ?? "transparent",
+        borderPosition: element.imageBorderPosition ?? "outside",
         panX,
         panY,
         zoom
@@ -7062,10 +7100,10 @@ function finalizeCropGroupCoords(g) {
   g.setCoords();
 }
 function updateCoverLayout(g) {
-  var _a2;
+  var _a2, _b2;
   const ct = g.__cropData;
   if (!ct) return;
-  const { frameW, frameH, shape, rx: rxRatio, _img: img, _border: border } = ct;
+  const { frameW, frameH, shape, rx: rxRatio, _img: img } = ct;
   const minDim = Math.min(frameW, frameH);
   let rx = rxRatio > 0.5 ? rxRatio : rxRatio * minDim;
   rx = Math.max(0, Math.min(rx, frameW / 2, frameH / 2));
@@ -7198,25 +7236,31 @@ function updateCoverLayout(g) {
       g.clipPath.excludeFromExport = true;
     }
   }
+  const wantCircle = shape === "circle";
+  const border = ensureRingShapeClass(g, ct, "_border", wantCircle);
+  const mat = ensureRingShapeClass(g, ct, "_mat", wantCircle);
   const bw = border ? Number(border.strokeWidth) || 0 : 0;
-  const mat = ct._mat;
   const pad = Math.max(0, Number(ct.borderPadding) || 0);
+  const outward = (ct.borderPosition ?? "outside") === "outside";
   const borderMinDim = Math.min(frameW, frameH);
   let borderRx = rxRatio > 0.5 ? rxRatio : rxRatio * borderMinDim;
   borderRx = Math.max(0, Math.min(borderRx, frameW / 2, frameH / 2));
+  const geo = computeOutlineGeometry({ frameW, frameH, bw, pad, rx: borderRx, outward });
   if (border) {
     if (shape === "circle") {
-      border.set({ rx: (frameW - bw) / 2, ry: (frameH - bw) / 2 });
+      border.set({ rx: geo.border.width / 2, ry: geo.border.height / 2 });
     } else {
-      border.set({ width: frameW - bw, height: frameH - bw, rx: borderRx, ry: borderRx });
+      border.set({ width: geo.border.width, height: geo.border.height, rx: geo.border.rx, ry: geo.border.rx });
     }
+    border.dirty = true;
   }
   if (mat) {
     if (shape === "circle") {
-      mat.set({ rx: (frameW - 2 * bw - pad) / 2, ry: (frameH - 2 * bw - pad) / 2 });
+      mat.set({ rx: geo.mat.width / 2, ry: geo.mat.height / 2 });
     } else {
-      mat.set({ width: frameW - 2 * bw - pad, height: frameH - 2 * bw - pad, rx: Math.max(0, borderRx - bw), ry: Math.max(0, borderRx - bw) });
+      mat.set({ width: geo.mat.width, height: geo.mat.height, rx: geo.mat.rx, ry: geo.mat.rx });
     }
+    mat.dirty = true;
   }
   if (!img) {
     const placeholderFrame = ct._placeholderFrame ?? ((_a2 = g._objects) == null ? void 0 : _a2.find((obj) => obj.__isPlaceholderFrame));
@@ -7245,8 +7289,9 @@ function updateCoverLayout(g) {
     img._ct.panX = img.__panX ?? 0.5;
     img._ct.panY = img.__panY ?? 0.5;
   }
-  const iw = img.width || 1;
-  const ih = img.height || 1;
+  const srcEl = img._originalElement ?? ((_b2 = img.getElement) == null ? void 0 : _b2.call(img));
+  const iw = Number(srcEl == null ? void 0 : srcEl.naturalWidth) || Number(srcEl == null ? void 0 : srcEl.width) || img.width || 1;
+  const ih = Number(srcEl == null ? void 0 : srcEl.naturalHeight) || Number(srcEl == null ? void 0 : srcEl.height) || img.height || 1;
   const fitContain = ct.fit === "contain";
   const baseScale = fitContain ? Math.min(frameW / iw, frameH / ih) : Math.max(frameW / iw, frameH / ih);
   const zoom = fitContain ? Math.max(1, Math.min(3, ct.containScale ?? 1)) : Math.max(1, img._ct.zoom ?? 1);
@@ -7283,6 +7328,42 @@ function updateCoverLayout(g) {
     offsetY = overflowY > 0 ? -overflowY * (panY - 0.5) : 0;
   }
   img.set({ left: offsetX, top: offsetY });
+  const wantsOutline = bw > 0 || pad > 0;
+  const shapedMask = shape === "circle" || shape === "roundRect";
+  if (wantsOutline && shapedMask) {
+    if (g.clipPath) {
+      img.clipPath = g.clipPath;
+      g.clipPath = void 0;
+    }
+    if (img.cropX || img.cropY || img.width !== iw) {
+      img.set({ width: iw, height: ih, cropX: 0, cropY: 0 });
+    }
+  } else if (wantsOutline && !fitContain) {
+    const regionW = Math.min(iw, frameW / finalScale);
+    const regionH = Math.min(ih, frameH / finalScale);
+    img.set({
+      width: regionW,
+      height: regionH,
+      cropX: (iw - regionW) * panX,
+      cropY: (ih - regionH) * panY,
+      left: 0,
+      top: 0
+    });
+    img.clipPath = void 0;
+    g.clipPath = void 0;
+  } else {
+    if (img.clipPath) img.clipPath = void 0;
+    if (img.cropX || img.cropY || img.width !== iw) {
+      img.set({ width: iw, height: ih, cropX: 0, cropY: 0 });
+    }
+  }
+  const imgClip = img.clipPath;
+  if (imgClip && typeof imgClip.set === "function") {
+    const csx = img.scaleX || 1;
+    const csy = img.scaleY || 1;
+    imgClip.set({ left: -offsetX / csx, top: -offsetY / csy, scaleX: 1 / csx, scaleY: 1 / csy });
+    imgClip.dirty = true;
+  }
   g.dirty = true;
   img.dirty = true;
   if (g.clipPath) {
@@ -7633,6 +7714,51 @@ function installCanvaMaskControls(g) {
   g.set(controlStyle);
   g.setCoords();
 }
+function ensureRingShapeClass(g, ct, key, wantCircle) {
+  const cur = ct[key];
+  if (!cur) return void 0;
+  const isEllipse = cur instanceof fabric__namespace.Ellipse;
+  if (isEllipse === wantCircle) return cur;
+  const common = {
+    left: 0,
+    top: 0,
+    originX: "center",
+    originY: "center",
+    fill: "transparent",
+    stroke: cur.stroke,
+    strokeWidth: cur.strokeWidth,
+    selectable: false,
+    evented: false
+  };
+  const next = wantCircle ? new fabric__namespace.Ellipse({ ...common, rx: 1, ry: 1, objectCaching: false }) : new fabric__namespace.Rect({ ...common, width: 1, height: 1, objectCaching: false });
+  const objs = g._objects;
+  const idx = objs ? objs.indexOf(cur) : -1;
+  if (objs && idx >= 0) objs.splice(idx, 1, next);
+  else return cur;
+  next.group = cur.group ?? g;
+  next.canvas = cur.canvas ?? g.canvas;
+  cur.group = void 0;
+  next.setCoords();
+  ct[key] = next;
+  g.dirty = true;
+  return next;
+}
+function computeOutlineGeometry(opts) {
+  const { frameW, frameH, bw, pad, rx, outward } = opts;
+  if (outward) {
+    const grow = (r, by) => r > 0 ? r + by : 0;
+    return {
+      // Ring centre-line is pad + bw/2 past the frame → inner edge exactly `pad` out.
+      border: { width: frameW + 2 * pad + bw, height: frameH + 2 * pad + bw, rx: grow(rx, pad + bw / 2) },
+      // The gap band is transparent; it exists only to keep the child list stable.
+      mat: { width: frameW + pad, height: frameH + pad, rx: grow(rx, pad / 2) }
+    };
+  }
+  return {
+    border: { width: frameW - bw, height: frameH - bw, rx },
+    mat: { width: frameW - 2 * bw - pad, height: frameH - 2 * bw - pad, rx: Math.max(0, rx - bw) }
+  };
+}
 async function createMaskedImageElement({
   url,
   image,
@@ -7661,7 +7787,8 @@ async function createMaskedImageElement({
   containScale = 1,
   shadow = null,
   borderPadding = 0,
-  borderPaddingColor = "#FFFFFF"
+  borderPaddingColor = "transparent",
+  borderPosition = "outside"
 }) {
   const img = image || (url ? await fabric__namespace.FabricImage.fromURL(getProxiedImageUrl(url), { crossOrigin: "anonymous" }) : null);
   if (!img) {
@@ -7686,36 +7813,47 @@ async function createMaskedImageElement({
   });
   const bw = strokeWidth || 0;
   const pad = Math.max(0, borderPadding || 0);
+  const outward = borderPosition === "outside";
+  const geo = computeOutlineGeometry({ frameW, frameH, bw, pad, rx, outward });
+  const matStroke = outward ? borderPaddingColor || "transparent" : borderPaddingColor;
+  const matW = geo.mat.width;
+  const matH = geo.mat.height;
+  const matRx = geo.mat.rx;
   const mat = shape === "circle" ? new fabric__namespace.Ellipse({
-    rx: (frameW - 2 * bw - pad) / 2,
-    ry: (frameH - 2 * bw - pad) / 2,
+    rx: matW / 2,
+    ry: matH / 2,
     left: 0,
     top: 0,
     originX: "center",
     originY: "center",
     fill: "transparent",
-    stroke: borderPaddingColor,
+    stroke: matStroke,
     strokeWidth: pad,
     selectable: false,
-    evented: false
+    evented: false,
+    objectCaching: false
   }) : new fabric__namespace.Rect({
-    width: frameW - 2 * bw - pad,
-    height: frameH - 2 * bw - pad,
-    rx: Math.max(0, rx - bw),
-    ry: Math.max(0, rx - bw),
+    width: matW,
+    height: matH,
+    rx: matRx,
+    ry: matRx,
     left: 0,
     top: 0,
     originX: "center",
     originY: "center",
     fill: "transparent",
-    stroke: borderPaddingColor,
+    stroke: matStroke,
     strokeWidth: pad,
     selectable: false,
-    evented: false
+    evented: false,
+    objectCaching: false
   });
+  const bordW = geo.border.width;
+  const bordH = geo.border.height;
+  const bordRx = geo.border.rx;
   const border = shape === "circle" ? new fabric__namespace.Ellipse({
-    rx: (frameW - bw) / 2,
-    ry: (frameH - bw) / 2,
+    rx: bordW / 2,
+    ry: bordH / 2,
     left: 0,
     top: 0,
     originX: "center",
@@ -7724,12 +7862,13 @@ async function createMaskedImageElement({
     stroke: stroke || "transparent",
     strokeWidth: bw,
     selectable: false,
-    evented: false
+    evented: false,
+    objectCaching: false
   }) : new fabric__namespace.Rect({
-    width: frameW - bw,
-    height: frameH - bw,
-    rx,
-    ry: rx,
+    width: bordW,
+    height: bordH,
+    rx: bordRx,
+    ry: bordRx,
     left: 0,
     top: 0,
     originX: "center",
@@ -7738,7 +7877,8 @@ async function createMaskedImageElement({
     stroke: stroke || "transparent",
     strokeWidth: bw,
     selectable: false,
-    evented: false
+    evented: false,
+    objectCaching: false
   });
   img.set({
     left: 0,
@@ -7832,7 +7972,9 @@ async function createMaskedImageElement({
     _border: border,
     _mat: mat,
     borderPadding: pad,
-    borderPaddingColor
+    borderPaddingColor,
+    // Read back by refreshMaskedImage so it recomputes with the same geometry.
+    borderPosition
   };
   g._ct = g._ct || {};
   g._ct.isCropGroup = true;
@@ -7866,7 +8008,12 @@ async function createMaskedImageElement({
   });
   clip.absolutePositioned = false;
   clip.excludeFromExport = true;
-  g.clipPath = clip;
+  if (outward) {
+    img.clipPath = clip;
+    g.clipPath = void 0;
+  } else {
+    g.clipPath = clip;
+  }
   g.set({
     selectable: true,
     evented: true,
@@ -23956,11 +24103,33 @@ const PageCanvas = react.forwardRef(
                       const wantBW = Math.max(0, Number(element.imageBorderWidth) || 0);
                       const wantBC = element.imageBorderColor ?? "#FFFFFF";
                       const wantPad = Math.max(0, Number(element.imageBorderPadding) || 0);
-                      const wantPC = element.imageBorderPaddingColor ?? "#FFFFFF";
+                      const wantPC = element.imageBorderPaddingColor ?? "transparent";
+                      const wantPos = element.imageBorderPosition ?? "outside";
                       if (ct._border) ct._border.set({ stroke: wantBW > 0 ? wantBC : "transparent", strokeWidth: wantBW, dirty: true });
                       if (ct._mat) ct._mat.set({ stroke: wantPC, strokeWidth: wantPad, dirty: true });
                       ct.borderPadding = wantPad;
                       ct.borderPaddingColor = wantPC;
+                      ct.borderPosition = wantPos;
+                      {
+                        const gMinDim = Math.min(ct.frameW, ct.frameH);
+                        const rxRaw = ct.rx || 0;
+                        const gRx = Math.max(0, Math.min(rxRaw > 0.5 ? rxRaw : rxRaw * gMinDim, ct.frameW / 2, ct.frameH / 2));
+                        const gGeo = computeOutlineGeometry({
+                          frameW: ct.frameW,
+                          frameH: ct.frameH,
+                          bw: wantBW,
+                          pad: wantPad,
+                          rx: gRx,
+                          outward: wantPos === "outside"
+                        });
+                        const isCircle = (ct.shape || "rect") === "circle";
+                        if (ct._border) {
+                          ct._border.set(isCircle ? { rx: gGeo.border.width / 2, ry: gGeo.border.height / 2 } : { width: gGeo.border.width, height: gGeo.border.height, rx: gGeo.border.rx, ry: gGeo.border.rx });
+                        }
+                        if (ct._mat) {
+                          ct._mat.set(isCircle ? { rx: gGeo.mat.width / 2, ry: gGeo.mat.height / 2 } : { width: gGeo.mat.width, height: gGeo.mat.height, rx: gGeo.mat.rx, ry: gGeo.mat.rx });
+                        }
+                      }
                       const sBlur = Math.max(0, Number(element.imageShadowBlur) || 0);
                       const sColor = element.imageShadowColor;
                       if (sBlur > 0 || sColor) {
@@ -26121,7 +26290,9 @@ const PageCanvas = react.forwardRef(
             strokeWidth: element.imageBorderWidth ?? 0,
             // Gap between the image and the outline (the "matted photo" look).
             borderPadding: element.imageBorderPadding ?? 0,
-            borderPaddingColor: element.imageBorderPaddingColor ?? "#FFFFFF",
+            // Gap is empty space by default, not a white mat.
+            borderPaddingColor: element.imageBorderPaddingColor ?? "transparent",
+            borderPosition: element.imageBorderPosition ?? "outside",
             // Optional image drop shadow (element property).
             shadow: (element.imageShadowBlur ?? 0) > 0 || element.imageShadowColor ? {
               color: element.imageShadowColor ?? "rgba(0,0,0,0.25)",
@@ -28883,7 +29054,9 @@ function expandBoundTables(pages, formValues) {
       const t = node;
       if (t.type === "table" && ((_a2 = t.tableData) == null ? void 0 : _a2.repeat)) {
         const entries = tableEntriesFor(t.tableData.repeat.from, formValues);
-        t.tableData = expandTableRepeat(t.tableData, entries);
+        if (entries.length > 0) {
+          t.tableData = expandTableRepeat(t.tableData, entries);
+        }
         for (const row of t.tableData.cells) {
           for (const cell of row) {
             if (!cell.field) continue;
@@ -30038,7 +30211,12 @@ function pagesHaveConstantTokens(pages) {
   return pages.some((p) => walk(p.children));
 }
 function substituteConstantTokens(pages, constants) {
-  const sub = (s) => s.replace(/\{\{\s*\$([a-zA-Z0-9_]+)\s*\}\}/g, (m, name) => Object.prototype.hasOwnProperty.call(constants, name) ? String(constants[name]) : m);
+  const sub = (s) => s.replace(/\{\{\s*\$([a-zA-Z0-9_]+)\s*\}\}/g, (m, name) => (
+    // Unresolved tokens are ERASED rather than left as literal braces: on a
+    // money cell a missing symbol still reads as a number, whereas
+    // "{{$currency}}9,500.00" is visibly broken output.
+    Object.prototype.hasOwnProperty.call(constants, name) ? String(constants[name]) : ""
+  ));
   const walk = (nodes) => {
     for (const n of nodes ?? []) {
       if (n.type === "text") {
@@ -30069,10 +30247,9 @@ function applyContentBoundsPagination(config) {
   }
   let mutated = continuationMasters.length > 0;
   const constants = config.constants;
-  const hasConstants = !!constants && typeof constants === "object" && Object.keys(constants).length > 0;
-  if (hasConstants && pagesHaveConstantTokens(pages)) {
+  if (pagesHaveConstantTokens(pages)) {
     pages = pages.map((p) => JSON.parse(JSON.stringify(p)));
-    substituteConstantTokens(pages, constants);
+    substituteConstantTokens(pages, constants && typeof constants === "object" ? constants : {});
     mutated = true;
   }
   let resultPages = [];
@@ -32242,8 +32419,9 @@ async function resolveTemplateData(options) {
     void 0,
     repeatablePagesInput.length > 0 ? repeatablePagesInput : void 0
   );
+  const paginated = applyContentBoundsPagination(resolvedConfig);
   return {
-    config: applyThemeIfNeeded(resolvedConfig),
+    config: applyThemeIfNeeded(paginated),
     templateName: template.name || "Untitled",
     templateId,
     price: template.price ?? 0
@@ -33884,6 +34062,43 @@ function stampPixldocsImageIdOnSvg(svg, id) {
   const attr = ` data-pixldocs-image-id="${escapeSvgDataAttr(id)}"`;
   return svg.replace(/<image\b/i, `<image${attr}`);
 }
+function colorHasAlpha(color) {
+  if (typeof color !== "string") return false;
+  const c = color.trim().toLowerCase();
+  if (c === "transparent") return true;
+  const rgba = c.match(/^rgba?\(([^)]+)\)$/);
+  if (rgba) {
+    const parts = rgba[1].split(",").map((x) => x.trim());
+    return parts.length > 3 && Number(parts[3]) < 1;
+  }
+  if (/^#[0-9a-f]{8}$/.test(c)) return parseInt(c.slice(7, 9), 16) < 255;
+  if (/^#[0-9a-f]{4}$/.test(c)) return parseInt(c[4] + c[4], 16) < 255;
+  return false;
+}
+function paintIsAlphaGradient(paint) {
+  const stops = paint == null ? void 0 : paint.colorStops;
+  if (!Array.isArray(stops) || !stops.length) return false;
+  return stops.some((st) => colorHasAlpha(st == null ? void 0 : st.color) || typeof (st == null ? void 0 : st.opacity) === "number" && st.opacity < 1);
+}
+function objectNeedsAlphaGradientRaster(obj) {
+  if (!obj) return false;
+  return paintIsAlphaGradient(obj.fill) || paintIsAlphaGradient(obj.stroke);
+}
+function rasterizeObjectToSvgImage(obj, multiplier) {
+  try {
+    if (typeof obj.toDataURL !== "function") return null;
+    const rect = obj.getBoundingRect();
+    if (!rect || !(rect.width > 0) || !(rect.height > 0)) return null;
+    const url = obj.toDataURL({ multiplier, enableRetinaScaling: false });
+    if (typeof url !== "string" || !url.startsWith("data:image")) return null;
+    const n = (v) => Number(v.toFixed(4));
+    return `<image x="${n(rect.left)}" y="${n(rect.top)}" width="${n(rect.width)}" height="${n(rect.height)}" preserveAspectRatio="none" xlink:href="${url}"></image>`;
+  } catch (e) {
+    console.warn("[canvas-svg-capture][alphaGradient] raster failed:", e);
+    return null;
+  }
+}
+const ALPHA_GRADIENT_RASTER_MULTIPLIER = 3;
 function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight) {
   const prevVPT = fabricInstance.viewportTransform ? [...fabricInstance.viewportTransform] : void 0;
   const prevSvgVPT = fabricInstance.svgViewportTransformation;
@@ -33905,9 +34120,14 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
     const visit = (obj) => {
       if (!obj) return;
       const imageId = typeof obj.__docuforgeId === "string" && hasRenderableRasterCandidate(obj) ? obj.__docuforgeId : "";
-      if ((isTextboxLike(obj) || imageId) && typeof obj.toSVG === "function") {
+      const alphaGradient = objectNeedsAlphaGradientRaster(obj);
+      if ((isTextboxLike(obj) || imageId || alphaGradient) && typeof obj.toSVG === "function") {
         const originalToSVG = obj.toSVG.bind(obj);
         obj.toSVG = (reviver) => {
+          if (alphaGradient) {
+            const raster = rasterizeObjectToSvgImage(obj, ALPHA_GRADIENT_RASTER_MULTIPLIER);
+            if (raster) return raster;
+          }
           let svg = originalToSVG(reviver);
           if (isTextboxLike(obj)) svg = stampFabricLineMetricsOnTextSvg(svg, obj);
           if (isTextboxLike(obj)) svg = warpTextboxSvgAlongPath(svg, obj);
@@ -34006,9 +34226,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.495";
+const resolvedPackageVersion = "0.5.496";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.495";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.496";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -34822,7 +35042,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-roj_Ddzd.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-B2KtFs76.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -37142,7 +37362,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-roj_Ddzd.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-B2KtFs76.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -37457,4 +37677,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-DaaT4Mo7.cjs.map
+//# sourceMappingURL=index-CZtvER5z.cjs.map