@pixldocs/canvas-renderer 0.5.495 → 0.5.497

package/dist/{index-Cvi3YYOq.js → index-CKhnRi3S.js}

@@ -94,6 +94,15 @@ const generateId = (prefix = "el") => {
   return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).substr(2, 9)}-${Math.random().toString(36).substr(2, 9)}`;
 };
 const createDefaultElement = (partial) => {
+  const loose = partial;
+  if (loose.type === "frame" || loose.type === "group") {
+    return createDefaultGroup({
+      layoutMode: loose.layout,
+      ...partial,
+      type: "group",
+      children: Array.isArray(loose.children) ? loose.children : []
+    });
+  }
   const isText = partial.type === "text";
   const base = {
     left: 48,
@@ -111,7 +120,7 @@ const createDefaultElement = (partial) => {
     originY: "top",
     opacity: 1,
     fill: "#e2e8f0",
-    ...isText ? {} : { stroke: "#64748b", strokeWidth: 1 },
+    ...isText ? {} : { stroke: "transparent", strokeWidth: 0 },
     visible: true,
     selectable: true,
     evented: true,
@@ -957,49 +966,15 @@ function worldPointToParentLocal(worldX, worldY, parent, pageChildren, resolveGr
   );
   return { left: local.x, top: local.y };
 }
-function unbakeChildrenToGroupLocal(group) {
-  const angle = getGroupAngleDeg(group);
-  if (Math.abs(angle) < 0.01) return group;
-  const { width, height } = getGroupFrameSize(group);
-  const cx = width / 2;
-  const cy = height / 2;
-  const inv = rotateAroundAffDeg(-angle, cx, cy);
-  const kids = (group.children ?? []).map((child) => {
-    const p = applyAff(inv, child.left ?? 0, child.top ?? 0);
-    const childAngle = typeof child.angle === "number" ? child.angle : 0;
-    const localAngle = normalizeAngleDeg(childAngle - angle);
-    if (isGroup(child)) {
-      const relocated = {
-        ...child,
-        left: p.x,
-        top: p.y,
-        angle: localAngle
-      };
-      return Math.abs(getGroupAngleDeg(relocated)) > 0.01 ? unbakeChildrenToGroupLocal(relocated) : relocated;
-    }
-    return {
-      ...child,
-      left: p.x,
-      top: p.y,
-      angle: localAngle
-    };
-  });
-  return { ...group, children: kids };
-}
 function migratePageTreeToGroupOwnedTransforms(nodes) {
   return nodes.map((node) => {
     if (!isGroup(node)) return node;
     const g = node;
-    let next = {
+    const next = {
       ...g,
       children: migratePageTreeToGroupOwnedTransforms(g.children ?? [])
     };
-    if (isRotatableGroup(next) && Math.abs(getGroupAngleDeg(next)) > 0.01) {
-      if (g.groupTransformModel !== "owned-v1") {
-        next = unbakeChildrenToGroupLocal(next);
-        next.groupTransformModel = "owned-v1";
-      }
-    } else if (isRotatableGroup(next)) {
+    if (isRotatableGroup(next)) {
       next.groupTransformModel = "owned-v1";
     }
     return next;
@@ -2239,6 +2214,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;
@@ -2641,16 +2650,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 = {
@@ -3239,6 +3239,13 @@ const useEditorStore = 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 {};
@@ -6336,8 +6343,13 @@ async function loadImageAsync(element, placeholder, fc, fabricRef, syncLockedRef
     });
     const imgLoadOptions = url.startsWith("data:") || url.startsWith("blob:") ? {} : { crossOrigin: "anonymous" };
     const img = await fabric.FabricImage.fromURL(url, imgLoadOptions);
-    if (!fabricRef.current) return;
+    if (fabricRef && !fabricRef.current) return;
     await normalizeSvgImageDimensions(img, imageUrl, element.sourceFormat);
+    const natW = img.width ?? 0;
+    const natH = img.height ?? 0;
+    if (natW <= 1 && natH <= 1 && Number(element.width) > 8 && Number(element.height) > 8) {
+      throw new Error(`image decoded to ${natW}x${natH} — treating as failed load`);
+    }
     const isHidden = !element.visible;
     img.set({
       originX: "left",
@@ -6492,8 +6504,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
@@ -6529,9 +6547,111 @@ async function loadImageAsync(element, placeholder, fc, fabricRef, syncLockedRef
       proxiedUrl: getProxiedImageUrl(imageUrl).slice(0, 240),
       error: error instanceof Error ? error.message : String(error)
     });
+    if (fc.__pixldocsEditMode === true) {
+      try {
+        markPlaceholderAsBrokenImage(placeholder);
+        fc.requestRenderAll();
+      } catch {
+      }
+    }
     return;
   }
 }
+function markPlaceholderAsBrokenImage(placeholder) {
+  if (!(placeholder instanceof fabric.Group)) return;
+  const group = placeholder;
+  if (group.__pixldocsBrokenImage) return;
+  group.__pixldocsBrokenImage = true;
+  const frameChild = group.getObjects().find(
+    (o) => o.__isPlaceholderFrame
+  );
+  const w = Math.max(1, (frameChild == null ? void 0 : frameChild.width) ?? group.width ?? 1);
+  const h = Math.max(1, (frameChild == null ? void 0 : frameChild.height) ?? group.height ?? 1);
+  const center = group.getCenterPoint();
+  const cx = center.x;
+  const cy = center.y;
+  const prevPose = { left: group.left, top: group.top, width: group.width, height: group.height };
+  const bg = new fabric.Rect({
+    originX: "center",
+    originY: "center",
+    left: cx,
+    top: cy,
+    width: w,
+    height: h,
+    fill: "rgba(148, 163, 184, 0.12)",
+    stroke: "#94A3B8",
+    strokeWidth: 1.5,
+    strokeDashArray: [6, 4]
+  });
+  const s = Math.max(16, Math.min(w, h) * 0.28);
+  const glyphStroke = { stroke: "#64748B", strokeWidth: Math.max(1.5, s / 12), fill: "transparent" };
+  const iconFrame = new fabric.Rect({
+    originX: "center",
+    originY: "center",
+    left: cx,
+    top: cy,
+    width: s,
+    height: s * 0.8,
+    rx: s * 0.08,
+    ry: s * 0.08,
+    ...glyphStroke
+  });
+  const mountain = new fabric.Polyline(
+    [
+      { x: -s * 0.38, y: s * 0.24 },
+      { x: -s * 0.1, y: -s * 0.08 },
+      { x: s * 0.08, y: s * 0.1 },
+      { x: s * 0.22, y: -s * 0.02 },
+      { x: s * 0.38, y: s * 0.24 }
+    ],
+    { originX: "center", originY: "center", left: cx, top: cy + s * 0.08, ...glyphStroke }
+  );
+  const slash = new fabric.Line([cx - s * 0.55, cy - s * 0.5, cx + s * 0.55, cy + s * 0.5], {
+    ...glyphStroke,
+    originX: "center",
+    originY: "center",
+    left: cx,
+    top: cy
+  });
+  for (const obj of [bg, iconFrame, mountain, slash]) {
+    obj.set({ selectable: false, evented: false, excludeFromExport: true });
+    obj.__pixldocsEditorChrome = true;
+    group.add(obj);
+  }
+  group.set(prevPose);
+  group.setCoords();
+  group.dirty = true;
+}
+function hideEditorChromeForExport(fc) {
+  const hidden = [];
+  const walk = (objs) => {
+    var _a2;
+    for (const o of objs) {
+      if (o.__pixldocsEditorChrome && o.visible !== false) {
+        o.visible = false;
+        hidden.push(o);
+      }
+      const kids = (_a2 = o.getObjects) == null ? void 0 : _a2.call(o);
+      if (kids == null ? void 0 : kids.length) walk(kids);
+    }
+  };
+  walk(fc.getObjects());
+  if (hidden.length) {
+    for (const o of hidden) {
+      const g = o.group;
+      if (g) g.dirty = true;
+    }
+    fc.renderAll();
+  }
+  return () => {
+    for (const o of hidden) {
+      o.visible = true;
+      const g = o.group;
+      if (g) g.dirty = true;
+    }
+    if (hidden.length) fc.requestRenderAll();
+  };
+}
 const canvasImageLoader = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   SVG_DECODE_HARD_CAP,
@@ -6541,12 +6661,14 @@ const canvasImageLoader = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.d
   fetchSvgTextPublic,
   getNormalizedSvgUrl,
   getProxiedImageUrl,
+  hideEditorChromeForExport,
   isBundledAssetUrl,
   isEmptyImagePlaceholderGroup,
   isPrivateUrl,
   isSvgImage,
   loadImageAsync,
   loadSvgDimensions,
+  markPlaceholderAsBrokenImage,
   normalizeSvgImageDimensions,
   parseSvgDimensionsFromText,
   preloadImage,
@@ -7044,10 +7166,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));
@@ -7180,25 +7302,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));
@@ -7227,8 +7355,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);
@@ -7265,6 +7394,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) {
@@ -7615,6 +7780,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.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.Ellipse({ ...common, rx: 1, ry: 1, objectCaching: false }) : new fabric.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,
@@ -7643,7 +7853,8 @@ async function createMaskedImageElement({
   containScale = 1,
   shadow = null,
   borderPadding = 0,
-  borderPaddingColor = "#FFFFFF"
+  borderPaddingColor = "transparent",
+  borderPosition = "outside"
 }) {
   const img = image || (url ? await fabric.FabricImage.fromURL(getProxiedImageUrl(url), { crossOrigin: "anonymous" }) : null);
   if (!img) {
@@ -7668,36 +7879,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.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.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.Ellipse({
-    rx: (frameW - bw) / 2,
-    ry: (frameH - bw) / 2,
+    rx: bordW / 2,
+    ry: bordH / 2,
     left: 0,
     top: 0,
     originX: "center",
@@ -7706,12 +7928,13 @@ async function createMaskedImageElement({
     stroke: stroke || "transparent",
     strokeWidth: bw,
     selectable: false,
-    evented: false
+    evented: false,
+    objectCaching: false
   }) : new fabric.Rect({
-    width: frameW - bw,
-    height: frameH - bw,
-    rx,
-    ry: rx,
+    width: bordW,
+    height: bordH,
+    rx: bordRx,
+    ry: bordRx,
     left: 0,
     top: 0,
     originX: "center",
@@ -7720,7 +7943,8 @@ async function createMaskedImageElement({
     stroke: stroke || "transparent",
     strokeWidth: bw,
     selectable: false,
-    evented: false
+    evented: false,
+    objectCaching: false
   });
   img.set({
     left: 0,
@@ -7814,7 +8038,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;
@@ -7848,7 +8074,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,
@@ -17949,6 +18180,7 @@ const PageCanvas = forwardRef(
         // Transparent so underlay (page bg + group bgs) shows through
         backgroundColor: "transparent"
       });
+      fabricCanvas.__pixldocsEditMode = isEditorMode && !isPreviewMode;
       fabricCanvas.hoverCursor = "default";
       fabricCanvas.moveCursor = "move";
       const suppressTextEditForClick = (textbox) => {
@@ -23938,11 +24170,33 @@ const PageCanvas = 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) {
@@ -25252,6 +25506,7 @@ const PageCanvas = forwardRef(
       } else if (obj instanceof fabric.Textbox) {
         const overflowPolicy = element.overflowPolicy || "grow-and-push";
         let text = element.text != null && element.text !== "" ? element.text : " ";
+        text = applyElementTextCase(text, element.textCase);
         let parsedStyles = null;
         if (element.formattingEnabled === true) {
           const parsed = parseTextMarkdown(text);
@@ -25896,6 +26151,13 @@ const PageCanvas = forwardRef(
         const img = await fabric.FabricImage.fromURL(url, { crossOrigin: "anonymous" });
         if (!fabricRef.current || !isLatestRequest()) return;
         await normalizeSvgImageDimensions(img, imageUrl, element.sourceFormat, svgDecodeTarget);
+        {
+          const natW = img.width ?? 0;
+          const natH = img.height ?? 0;
+          if (natW <= 1 && natH <= 1 && Number(element.width) > 8 && Number(element.height) > 8) {
+            throw new Error(`image decoded to ${natW}x${natH} — treating as failed load`);
+          }
+        }
         if (!isLatestRequest()) return;
         const imageFitForFade = element.imageFit || ((_a2 = element.style) == null ? void 0 : _a2.imageFit) || "cover";
         const clipShapeForFade = element.clipShape ?? ((_b2 = element.style) == null ? void 0 : _b2.imageFrameShape) ?? (isPreviewMode ? "rectangle" : "none");
@@ -26103,7 +26365,9 @@ const PageCanvas = 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)",
@@ -26260,6 +26524,19 @@ const PageCanvas = forwardRef(
         }
         fc.requestRenderAll();
       } catch (error) {
+        console.error("[PageCanvas] image failed to load", {
+          id: element.id,
+          url: (element.src || element.imageUrl || "").slice(0, 200),
+          error: error instanceof Error ? error.message : String(error)
+        });
+        const fcNow = fabricRef.current;
+        if (fcNow && fcNow.__pixldocsEditMode === true) {
+          try {
+            markPlaceholderAsBrokenImage(placeholder);
+            fcNow.requestRenderAll();
+          } catch {
+          }
+        }
       }
     };
     const handleCanvasClick = useCallback(
@@ -28865,7 +29142,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;
@@ -30020,7 +30299,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") {
@@ -30051,10 +30335,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 = [];
@@ -32224,8 +32507,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
@@ -33866,6 +34150,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;
@@ -33886,10 +34207,23 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   try {
     const visit = (obj) => {
       if (!obj) return;
+      if (obj.__pixldocsEditorChrome) {
+        const originalToSVG = typeof obj.toSVG === "function" ? obj.toSVG.bind(obj) : null;
+        if (originalToSVG) {
+          obj.toSVG = () => "";
+          svgPatchRecords.push({ obj, originalToSVG });
+        }
+        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);
@@ -33988,9 +34322,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.495";
+const resolvedPackageVersion = "0.5.497";
 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.497";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -34429,6 +34763,11 @@ class PixldocsRenderer {
    * Mounts a hidden PreviewCanvas component and captures the Fabric canvas output.
    */
   async render(templateConfig, options = {}) {
+    if (options.watermark === true && !templateConfig.__pixldocsWatermarked) {
+      const { injectWatermark: injectWatermark2 } = await Promise.resolve().then(() => canvasWatermark);
+      templateConfig = injectWatermark2(templateConfig, options.watermarkOptions);
+      templateConfig.__pixldocsWatermarked = true;
+    }
     const pageIndex = options.pageIndex ?? 0;
     const format = options.format ?? "png";
     const quality = options.quality ?? 0.92;
@@ -34444,6 +34783,7 @@ class PixldocsRenderer {
       const hasAutoShrink = configHasAutoShrinkText(templateConfig);
       const defaultWait = hasAutoShrink ? 4e3 : 1800;
       await this.awaitFontsForConfig(templateConfig, options.waitForFontsMs ?? defaultWait);
+      this.flushTextMeasurementCaches();
     }
     const { setPackageApiUrl: setPackageApiUrl2 } = await Promise.resolve().then(() => appApi);
     setPackageApiUrl2(this.config.imageProxyUrl);
@@ -34471,6 +34811,7 @@ class PixldocsRenderer {
       const hasAutoShrink = configHasAutoShrinkText(templateConfig);
       const defaultWait = hasAutoShrink ? 4e3 : 1800;
       await this.awaitFontsForConfig(templateConfig, options.waitForFontsMs ?? defaultWait);
+      this.flushTextMeasurementCaches();
     }
     const results = [];
     for (let i = 0; i < templateConfig.pages.length; i++) {
@@ -34497,8 +34838,8 @@ class PixldocsRenderer {
     const shouldWatermark = watermark ?? resolved.price > 0;
     let configToRender = resolved.config;
     if (shouldWatermark) {
-      const { injectWatermark } = await import("./canvasWatermark-pkhacGge.js");
-      configToRender = injectWatermark(configToRender, watermarkOptions);
+      const { injectWatermark: injectWatermark2 } = await Promise.resolve().then(() => canvasWatermark);
+      configToRender = injectWatermark2(configToRender, watermarkOptions);
       const { injectPreviewBlur: injectPreviewBlur2 } = await Promise.resolve().then(() => previewBlur);
       configToRender = injectPreviewBlur2(configToRender);
     }
@@ -34557,8 +34898,8 @@ class PixldocsRenderer {
     const shouldWatermark = watermark ?? resolved.price > 0;
     let configToRender = resolved.config;
     if (shouldWatermark) {
-      const { injectWatermark } = await import("./canvasWatermark-pkhacGge.js");
-      configToRender = injectWatermark(configToRender, watermarkOptions);
+      const { injectWatermark: injectWatermark2 } = await Promise.resolve().then(() => canvasWatermark);
+      configToRender = injectWatermark2(configToRender, watermarkOptions);
       const { injectPreviewBlur: injectPreviewBlur2 } = await Promise.resolve().then(() => previewBlur);
       configToRender = injectPreviewBlur2(configToRender);
     }
@@ -34578,6 +34919,10 @@ class PixldocsRenderer {
    * exporter, which is what `renderPdfViaClientExport` does below.
    */
   async renderPdf(templateConfig, options) {
+    if ((options == null ? void 0 : options.watermark) === true) {
+      const { injectWatermark: injectWatermark2 } = await Promise.resolve().then(() => canvasWatermark);
+      templateConfig = injectWatermark2(templateConfig, options.watermarkOptions);
+    }
     return this.renderPdfViaClientExport(templateConfig, {
       title: options == null ? void 0 : options.title,
       textMode: options == null ? void 0 : options.textMode,
@@ -34606,8 +34951,8 @@ class PixldocsRenderer {
     const shouldWatermark = watermark ?? resolved.price > 0;
     let configToRender = resolved.config;
     if (shouldWatermark) {
-      const { injectWatermark } = await import("./canvasWatermark-pkhacGge.js");
-      configToRender = injectWatermark(configToRender, watermarkOptions);
+      const { injectWatermark: injectWatermark2 } = await Promise.resolve().then(() => canvasWatermark);
+      configToRender = injectWatermark2(configToRender, watermarkOptions);
       const { injectPreviewBlur: injectPreviewBlur2 } = await Promise.resolve().then(() => previewBlur);
       configToRender = injectPreviewBlur2(configToRender);
     }
@@ -34804,7 +35149,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 import("./vectorPdfExport-B6m8o09g.js");
+      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-DV-TJwjP.js");
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -35082,6 +35427,37 @@ class PixldocsRenderer {
       new Promise((r) => setTimeout(r, Math.min(500, maxWaitMs)))
     ]);
   }
+  /**
+   * Flush BOTH process-global text-measurement caches after fonts are ready
+   * and BEFORE the capture canvas mounts.
+   *
+   * Why: anything that measured text before the webfonts finished loading —
+   * most notably `applyContentBoundsPagination` running inside
+   * `resolveFromForm` on a cold page (the EC2/MCP flow: resolve + render in
+   * one browser context) — populates the app measurement cache and Fabric's
+   * global char-width cache with FALLBACK metrics. `createText` then places
+   * center/right-aligned lines from those stale widths, so a right-aligned
+   * grid cell on a continuation page drew shifted left by
+   * (fallbackWidth − realWidth) px vs the editor (caught by
+   * tests/parity `auto-paginate`, a 9px shift). The later
+   * `waitForStableTextMetrics` pass re-primes glyph bounds but never moves
+   * the already-positioned box, so the flush must happen pre-mount.
+   *
+   * Only called from the headless PNG paths (`render`/`renderAllPages`),
+   * which already default to clearing the global char cache in
+   * `waitForStableTextMetrics` — the live-preview-adjacent PDF path keeps
+   * its `clearGlobalCharCache: false` behaviour untouched.
+   */
+  flushTextMeasurementCaches() {
+    try {
+      clearMeasurementCache();
+    } catch {
+    }
+    try {
+      clearFabricCharCache();
+    } catch {
+    }
+  }
   getNormalizedGradientStops(gradient) {
     const stops = Array.isArray(gradient == null ? void 0 : gradient.stops) ? gradient.stops.map((stop) => ({
       offset: Math.max(0, Math.min(1, Number((stop == null ? void 0 : stop.offset) ?? 0))),
@@ -37124,7 +37500,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-B6m8o09g.js");
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-DV-TJwjP.js");
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -37372,13 +37748,136 @@ async function getPublishedTemplate(options) {
   const rows = await res.json();
   return rows[0] ?? null;
 }
+const WATERMARK_ID_PREFIX = "__wm_";
+const DEFAULT_WATERMARK_OPACITY = 0.14;
+const DEFAULT_WATERMARK_FONT_SIZE = 18;
+const DEFAULT_WATERMARK_ANGLE = -30;
+function getWatermarkText() {
+  try {
+    const host = window.location.hostname;
+    if (host.includes("biomaker")) return "biomaker.app";
+  } catch {
+  }
+  return "pixldocs.com";
+}
+function getLuminance(color) {
+  if (!color || color === "transparent" || color === "none") return 1;
+  let r = 255, g = 255, b = 255;
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    const full = hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex;
+    const n = parseInt(full, 16);
+    r = n >> 16 & 255;
+    g = n >> 8 & 255;
+    b = n & 255;
+  } else {
+    const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (m) {
+      r = +m[1];
+      g = +m[2];
+      b = +m[3];
+    }
+  }
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+}
+function getWatermarkColor(bgColor) {
+  const lum = getLuminance(bgColor);
+  return lum < 0.45 ? "#cccccc" : "#808080";
+}
+function getPageBgColor(page, canvasBg) {
+  var _a2, _b2;
+  const settingsBg = (_a2 = page.settings) == null ? void 0 : _a2.backgroundColor;
+  if (settingsBg && settingsBg !== "transparent" && settingsBg !== "none") {
+    return settingsBg;
+  }
+  const children = page.children || [];
+  for (const child of children) {
+    if (child.type === "shape" && child.fill && child.fill !== "transparent" && child.fill !== "none") {
+      return child.fill;
+    }
+    if ((_b2 = child.children) == null ? void 0 : _b2.length) {
+      for (const gc of child.children) {
+        if (gc.type === "shape" && gc.fill && gc.fill !== "transparent" && gc.fill !== "none") {
+          return gc.fill;
+        }
+      }
+    }
+  }
+  return canvasBg;
+}
+function generateWatermarkElements(canvasWidth, canvasHeight, wmColor, options = {}) {
+  const elements = [];
+  const text = options.text ?? getWatermarkText();
+  const fontSize = options.fontSize ?? DEFAULT_WATERMARK_FONT_SIZE;
+  const angle = options.angle ?? DEFAULT_WATERMARK_ANGLE;
+  const opacity = options.opacity ?? DEFAULT_WATERMARK_OPACITY;
+  const estimatedTextWidth = text.length * fontSize * 0.55;
+  const spacingX = Math.max(160, estimatedTextWidth + 30);
+  const spacingY = 90;
+  const startX = -canvasWidth * 0.3;
+  const startY = -canvasHeight * 0.3;
+  const endX = canvasWidth * 1.5;
+  const endY = canvasHeight * 1.5;
+  let idx = 0;
+  for (let y = startY; y < endY; y += spacingY) {
+    for (let x = startX; x < endX; x += spacingX) {
+      elements.push({
+        id: `${WATERMARK_ID_PREFIX}${idx++}`,
+        type: "text",
+        left: x,
+        top: y,
+        width: 200,
+        height: 40,
+        text,
+        fontFamily: "Montserrat",
+        fontSize,
+        fontWeight: "600",
+        fill: wmColor,
+        angle,
+        selectable: false,
+        locked: true,
+        visible: true,
+        opacity,
+        scaleX: 1,
+        scaleY: 1,
+        letterSpacing: 4
+      });
+    }
+  }
+  return elements;
+}
+function injectWatermark(config, options = {}) {
+  var _a2, _b2, _c2;
+  const canvasWidth = ((_a2 = config.canvas) == null ? void 0 : _a2.width) || 612;
+  const canvasHeight = ((_b2 = config.canvas) == null ? void 0 : _b2.height) || 792;
+  const canvasBg = (_c2 = config.canvas) == null ? void 0 : _c2.backgroundColor;
+  return {
+    ...config,
+    pages: config.pages.map((page) => {
+      const pageBg = getPageBgColor(page, canvasBg);
+      const wmColor = getWatermarkColor(pageBg);
+      const watermarkElements = generateWatermarkElements(canvasWidth, canvasHeight, wmColor, options);
+      return {
+        ...page,
+        children: [
+          ...page.children || [],
+          ...watermarkElements
+        ]
+      };
+    })
+  };
+}
+const canvasWatermark = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  injectWatermark
+}, Symbol.toStringTag, { value: "Module" }));
 function setAutoShrinkDebug(enabled) {
   if (typeof window !== "undefined") {
     window.__pixldocsDebugAutoShrink = !!enabled;
   }
 }
 export {
-  resolveFontWeight as $,
+  resolveBlurElementExactIdsFromFlatFormKeys as $,
   API_URL as A,
   collectFontDescriptorsFromConfig as B,
   collectFontsFromConfig as C,
@@ -37399,23 +37898,24 @@ export {
   hasAnyPreviewBlur as R,
   injectPreviewBlur as S,
   TRIANGLE_STROKE_MITER_LIMIT as T,
-  isBundledAssetUrl as U,
-  isFontAvailable as V,
-  isPrivateUrl as W,
-  listPublishedTemplates as X,
-  loadGoogleFontCSS as Y,
-  normalizeFontFamily as Z,
-  resolveBlurElementExactIdsFromFlatFormKeys as _,
+  injectWatermark as U,
+  isBundledAssetUrl as V,
+  isFontAvailable as W,
+  isPrivateUrl as X,
+  listPublishedTemplates as Y,
+  loadGoogleFontCSS as Z,
+  normalizeFontFamily as _,
   getAbsoluteBounds as a,
-  resolveForRender as a0,
-  resolveFromForm as a1,
-  resolveTemplateData as a2,
-  rewriteSvgFontsForJsPDF as a3,
-  setAutoShrinkDebug as a4,
-  setBundledAssetPrefixes as a5,
-  warmResolvedTemplateForPreview as a6,
-  warmTemplateFromForm as a7,
-  canvasImageLoader as a8,
+  resolveFontWeight as a0,
+  resolveForRender as a1,
+  resolveFromForm as a2,
+  resolveTemplateData as a3,
+  rewriteSvgFontsForJsPDF as a4,
+  setAutoShrinkDebug as a5,
+  setBundledAssetPrefixes as a6,
+  warmResolvedTemplateForPreview as a7,
+  warmTemplateFromForm as a8,
+  canvasImageLoader as a9,
   getProxiedImageUrl as b,
   captureFabricCanvasSvgForPdf as c,
   getImageProxyFetchOptions as d,
@@ -37442,4 +37942,4 @@ export {
   awaitFontsForConfig as y,
   buildTeaserBlurFlatKeys as z
 };
-//# sourceMappingURL=index-Cvi3YYOq.js.map
+//# sourceMappingURL=index-CKhnRi3S.js.map