@pixldocs/canvas-renderer 0.5.183 → 0.5.184

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

@@ -16162,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,
@@ -16186,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);
@@ -16223,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);
@@ -16302,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..." }) });
   }
@@ -16310,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..." }) })
   ] });
 }
@@ -16499,9 +16579,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.183";
+const resolvedPackageVersion = "0.5.184";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.183";
+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;
@@ -16800,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-B2SedQxb.cjs"));
+      const { injectPreviewBlur } = await Promise.resolve().then(() => require("./previewBlur-Dbd6dn62.cjs"));
       configToRender = injectPreviewBlur(configToRender);
     }
     return this.renderAllPages(configToRender, renderOpts);
@@ -16859,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-B2SedQxb.cjs"));
+      const { injectPreviewBlur } = await Promise.resolve().then(() => require("./previewBlur-Dbd6dn62.cjs"));
       configToRender = injectPreviewBlur(configToRender);
     }
     return this.renderAllPageSvgs(configToRender);
@@ -16903,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-B2SedQxb.cjs"));
+      const { injectPreviewBlur } = await Promise.resolve().then(() => require("./previewBlur-Dbd6dn62.cjs"));
       configToRender = injectPreviewBlur(configToRender);
     }
     return this.renderPdfViaClientExport(configToRender, {
@@ -17009,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-B73_TC4T.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-BIgSi-Ef.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -19154,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-B73_TC4T.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-BIgSi-Ef.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -19548,4 +19628,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-B1BBI3Bg.cjs.map
+//# sourceMappingURL=index-DUJw7ypl.cjs.map