@pixldocs/canvas-renderer 0.5.182 → 0.5.184

package/dist/{index-CUINpGhe.cjs → index-DUJw7ypl.cjs}

@@ -3430,6 +3430,7 @@ const setupFontLoadingListener = (canvas, afterRerender, options = {}) => {
   };
 };
 preloadAllFonts();
+const EMPTY_IMAGE_PLACEHOLDER_DATA_URL = "data:image/png;base64,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";
 const svgTextCache = /* @__PURE__ */ new Map();
 const htmlImageCache = /* @__PURE__ */ new Map();
 const MAX_CACHE_ENTRIES = 200;
@@ -3662,7 +3663,7 @@ async function normalizeSvgImageDimensions(fabricImage, imageUrl, sourceFormat)
     fabricImage.setCoords();
   }
 }
-const EMPTY_IMAGE_PLACEHOLDER_URL = "/image-placeholder.png";
+const EMPTY_IMAGE_PLACEHOLDER_URL = EMPTY_IMAGE_PLACEHOLDER_DATA_URL;
 let placeholderTileImage = null;
 let placeholderTilePromise = null;
 function loadPlaceholderTile() {
@@ -16161,7 +16162,39 @@ function countUnderlinedNodes(config) {
   for (const page of config.pages) walk(page.children || []);
   return count;
 }
+function getNum(v, fallback = 0) {
+  return typeof v === "number" && Number.isFinite(v) ? v : fallback;
+}
+function collectBlurBounds(node, parentLeft, parentTop, inheritedBlur, out) {
+  if (!node || typeof node !== "object") return;
+  const isBlurred = inheritedBlur || node.previewBlur === true;
+  const absLeft = parentLeft + getNum(node.left, 0);
+  const absTop = parentTop + getNum(node.top, 0);
+  if (node.type === "group") {
+    const children = node.children || node.elements;
+    if (Array.isArray(children)) {
+      for (const c of children) collectBlurBounds(c, absLeft, absTop, isBlurred, out);
+    }
+    return;
+  }
+  if (!isBlurred) return;
+  const sx = getNum(node.scaleX, 1) || 1;
+  const sy = getNum(node.scaleY, 1) || 1;
+  const w = Math.max(4, getNum(node.width, 0) * sx);
+  const h = Math.max(4, getNum(node.height, 0) * sy);
+  out.push({ left: absLeft, top: absTop, width: w, height: h });
+}
+function computeFrostedBoundsForPage(config, pageIndex) {
+  var _a;
+  const page = (_a = config == null ? void 0 : config.pages) == null ? void 0 : _a[pageIndex];
+  const children = (page == null ? void 0 : page.children) || (page == null ? void 0 : page.elements);
+  if (!Array.isArray(children)) return [];
+  const out = [];
+  for (const c of children) collectBlurBounds(c, 0, 0, false, out);
+  return out;
+}
 function PixldocsPreview(props) {
+  var _a, _b;
   const {
     pageIndex = 0,
     zoom = 1,
@@ -16185,7 +16218,9 @@ function PixldocsPreview(props) {
     // `captureSvgViaPreviewCanvas`) already pass `skipFontReadyWait: false`
     // for this exact reason — that's why the downloaded PDF was correct
     // while the on-screen preview wasn't.
-    skipFontReadyWait = false
+    skipFontReadyWait = false,
+    frostedBlur = true,
+    frostedBlurOptions
   } = props;
   react.useEffect(() => {
     setPackageApiUrl(imageProxyUrl);
@@ -16222,10 +16257,10 @@ function PixldocsPreview(props) {
       supabaseUrl: p.supabaseUrl,
       supabaseAnonKey: p.supabaseAnonKey
     }).then((resolved) => {
-      var _a, _b;
+      var _a2, _b2;
       if (!cancelled) {
         console.log(PREVIEW_DEBUG_PREFIX, "resolve-done", {
-          pages: ((_b = (_a = resolved.config) == null ? void 0 : _a.pages) == null ? void 0 : _b.length) ?? 0,
+          pages: ((_b2 = (_a2 = resolved.config) == null ? void 0 : _a2.pages) == null ? void 0 : _b2.length) ?? 0,
           underlinedNodes: countUnderlinedNodes(resolved.config)
         });
         setResolvedConfig(resolved.config);
@@ -16301,6 +16336,16 @@ function PixldocsPreview(props) {
     setCanvasSettled(true);
     onReady == null ? void 0 : onReady();
   }, [onReady, pageIndex]);
+  const frostedBounds = react.useMemo(
+    () => frostedBlur ? computeFrostedBoundsForPage(config, pageIndex) : [],
+    [frostedBlur, config, pageIndex]
+  );
+  const blurPx = (frostedBlurOptions == null ? void 0 : frostedBlurOptions.blurPx) ?? 5;
+  const satPct = (frostedBlurOptions == null ? void 0 : frostedBlurOptions.saturatePct) ?? 130;
+  const bgTint = (frostedBlurOptions == null ? void 0 : frostedBlurOptions.background) ?? "rgba(255,255,255,0.12)";
+  const canvasW = getNum((_a = config == null ? void 0 : config.canvas) == null ? void 0 : _a.width, 0);
+  const canvasH = getNum((_b = config == null ? void 0 : config.canvas) == null ? void 0 : _b.height, 0);
+  const hasOverlays = frostedBounds.length > 0 && canvasW > 0 && canvasH > 0;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
@@ -16309,19 +16354,55 @@ function PixldocsPreview(props) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...style, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { visibility: canvasSettled ? "visible" : "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      PreviewCanvas,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        config,
-        pageIndex,
-        zoom,
-        absoluteZoom,
-        skipFontReadyWait,
-        onDynamicFieldClick,
-        onReady: handleCanvasReady
-      },
-      previewKey
-    ) }),
+        style: hasOverlays ? { visibility: canvasSettled ? "visible" : "hidden", position: "relative", width: canvasW * zoom, height: canvasH * zoom } : { visibility: canvasSettled ? "visible" : "hidden" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PreviewCanvas,
+            {
+              config,
+              pageIndex,
+              zoom,
+              absoluteZoom,
+              skipFontReadyWait,
+              onDynamicFieldClick,
+              onReady: handleCanvasReady
+            },
+            previewKey
+          ),
+          hasOverlays && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                pointerEvents: "none",
+                zIndex: 5
+              },
+              children: frostedBounds.map((b, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: b.left * zoom,
+                    top: b.top * zoom,
+                    width: b.width * zoom,
+                    height: b.height * zoom,
+                    borderRadius: 0,
+                    backdropFilter: `blur(${blurPx}px) saturate(${satPct}%)`,
+                    WebkitBackdropFilter: `blur(${blurPx}px) saturate(${satPct}%)`,
+                    background: bgTint
+                  }
+                },
+                `frost-${pageIndex}-${i}`
+              ))
+            }
+          )
+        ]
+      }
+    ),
     !canvasSettled && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
@@ -16498,9 +16579,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.182";
+const resolvedPackageVersion = "0.5.184";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.182";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.184";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -16799,7 +16880,7 @@ class PixldocsRenderer {
     if (shouldWatermark) {
       const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-B0ab38Ok.cjs"));
       configToRender = injectWatermark(configToRender, watermarkOptions);
-      const { injectPreviewBlur } = await Promise.resolve().then(() => require("./previewBlur-D1laq3kn.cjs"));
+      const { injectPreviewBlur } = await Promise.resolve().then(() => require("./previewBlur-Dbd6dn62.cjs"));
       configToRender = injectPreviewBlur(configToRender);
     }
     return this.renderAllPages(configToRender, renderOpts);
@@ -16858,7 +16939,7 @@ class PixldocsRenderer {
     if (shouldWatermark) {
       const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-B0ab38Ok.cjs"));
       configToRender = injectWatermark(configToRender, watermarkOptions);
-      const { injectPreviewBlur } = await Promise.resolve().then(() => require("./previewBlur-D1laq3kn.cjs"));
+      const { injectPreviewBlur } = await Promise.resolve().then(() => require("./previewBlur-Dbd6dn62.cjs"));
       configToRender = injectPreviewBlur(configToRender);
     }
     return this.renderAllPageSvgs(configToRender);
@@ -16902,7 +16983,7 @@ class PixldocsRenderer {
     if (shouldWatermark) {
       const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-B0ab38Ok.cjs"));
       configToRender = injectWatermark(configToRender, watermarkOptions);
-      const { injectPreviewBlur } = await Promise.resolve().then(() => require("./previewBlur-D1laq3kn.cjs"));
+      const { injectPreviewBlur } = await Promise.resolve().then(() => require("./previewBlur-Dbd6dn62.cjs"));
       configToRender = injectPreviewBlur(configToRender);
     }
     return this.renderPdfViaClientExport(configToRender, {
@@ -17008,7 +17089,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-0dwbE8Kn.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-BIgSi-Ef.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -19153,7 +19234,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-0dwbE8Kn.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-BIgSi-Ef.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -19547,4 +19628,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-CUINpGhe.cjs.map
+//# sourceMappingURL=index-DUJw7ypl.cjs.map