@pixldocs/canvas-renderer 0.5.496 → 0.5.497

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

@@ -112,6 +112,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,
@@ -129,7 +138,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,
@@ -975,49 +984,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;
@@ -6386,8 +6361,13 @@ async function loadImageAsync(element, placeholder, fc, fabricRef, syncLockedRef
     });
     const imgLoadOptions = url.startsWith("data:") || url.startsWith("blob:") ? {} : { crossOrigin: "anonymous" };
     const img = await fabric__namespace.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",
@@ -6585,9 +6565,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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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,
@@ -6597,12 +6679,14 @@ const canvasImageLoader = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.d
   fetchSvgTextPublic,
   getNormalizedSvgUrl,
   getProxiedImageUrl,
+  hideEditorChromeForExport,
   isBundledAssetUrl,
   isEmptyImagePlaceholderGroup,
   isPrivateUrl,
   isSvgImage,
   loadImageAsync,
   loadSvgDimensions,
+  markPlaceholderAsBrokenImage,
   normalizeSvgImageDimensions,
   parseSvgDimensionsFromText,
   preloadImage,
@@ -18114,6 +18198,7 @@ const PageCanvas = react.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) => {
@@ -25439,6 +25524,7 @@ const PageCanvas = react.forwardRef(
       } else if (obj instanceof fabric__namespace.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);
@@ -26083,6 +26169,13 @@ const PageCanvas = react.forwardRef(
         const img = await fabric__namespace.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");
@@ -26449,6 +26542,19 @@ const PageCanvas = react.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 = react.useCallback(
@@ -34119,6 +34225,14 @@ 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 : "";
       const alphaGradient = objectNeedsAlphaGradientRaster(obj);
       if ((isTextboxLike(obj) || imageId || alphaGradient) && typeof obj.toSVG === "function") {
@@ -34226,9 +34340,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.496";
+const resolvedPackageVersion = "0.5.497";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.496";
+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;
@@ -34667,6 +34781,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;
@@ -34682,6 +34801,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);
@@ -34709,6 +34829,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++) {
@@ -34735,8 +34856,8 @@ class PixldocsRenderer {
     const shouldWatermark = watermark ?? resolved.price > 0;
     let configToRender = resolved.config;
     if (shouldWatermark) {
-      const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-B0ab38Ok.cjs"));
-      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);
     }
@@ -34795,8 +34916,8 @@ class PixldocsRenderer {
     const shouldWatermark = watermark ?? resolved.price > 0;
     let configToRender = resolved.config;
     if (shouldWatermark) {
-      const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-B0ab38Ok.cjs"));
-      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);
     }
@@ -34816,6 +34937,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,
@@ -34844,8 +34969,8 @@ class PixldocsRenderer {
     const shouldWatermark = watermark ?? resolved.price > 0;
     let configToRender = resolved.config;
     if (shouldWatermark) {
-      const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-B0ab38Ok.cjs"));
-      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);
     }
@@ -35042,7 +35167,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-B2KtFs76.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-De8UFmDy.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -35320,6 +35445,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))),
@@ -37362,7 +37518,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-B2KtFs76.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-De8UFmDy.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -37610,6 +37766,129 @@ 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;
@@ -37656,6 +37935,7 @@ exports.getWorldAngleDeg = getWorldAngleDeg$1;
 exports.hasAnyPreviewBlur = hasAnyPreviewBlur;
 exports.hasEdgeFade = hasEdgeFade;
 exports.injectPreviewBlur = injectPreviewBlur;
+exports.injectWatermark = injectWatermark;
 exports.isBundledAssetUrl = isBundledAssetUrl;
 exports.isElement = isElement;
 exports.isFontAvailable = isFontAvailable;
@@ -37677,4 +37957,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-CZtvER5z.cjs.map
+//# sourceMappingURL=index-CZm1oVfa.cjs.map