@pixldocs/canvas-renderer 0.5.183 → 0.5.185

package/README.md

@@ -367,6 +367,32 @@ Preview-blur is gated identically to the watermark: it only runs when
 `watermark === true` (or, by default, when `template.price > 0` and the user
 hasn't paid). Clean / paid downloads always render the original content.
 
+### Live `backdrop-filter` overlay in `<PixldocsPreview>`
+
+The React `<PixldocsPreview>` component automatically renders a real CSS
+`backdrop-filter: blur()` frosted-glass overlay on top of every element
+marked `previewBlur: true`. Bounds are auto-derived from the config
+(groups respected), so no extra wiring is required.
+
+Defaults: `blur(5px) saturate(130%)` with a `rgba(255,255,255,0.12)` tint,
+square corners, no stroke, no shadow — identical to the in-app preview on
+pixldocs.com.
+
+Opt-out or tune via props:
+
+```tsx
+<PixldocsPreview
+  config={config}
+  // disable entirely
+  frostedBlur={false}
+  // or tune
+  frostedBlurOptions={{ blurPx: 6, saturatePct: 140, background: 'rgba(255,255,255,0.15)' }}
+/>
+```
+
+The imperative PNG / PDF export paths still use the static translucent
+rectangle (the closest pure-vector approximation), unchanged.
+
 ```ts
 // In your template config
 {
@@ -380,3 +406,44 @@ hasn't paid). Clean / paid downloads always render the original content.
 
 No API change is required on the consumer side — the same `renderFromForm`,
 `renderPdfFromForm`, etc. respect the flag automatically.
+
+### Example: per-field blur for a biodata form (use page)
+
+On pixldocs.com's Use page for the Biodata preset, every form field renders
+a small **🔒 Blur in preview** checkbox next to it. Toggling it redacts only
+that field's text in the watermarked preview — perfect for hiding reference
+rows, phone numbers, or addresses behind the paywall while leaving the rest
+of the biodata visible. Paid / clean downloads always render the original
+content.
+
+Under the hood the flow is:
+
+1. Keep a `Set<string>` of "blurred field ids" in component state — each id
+   encodes the field's path (single field, repeatable entry, or nested
+   repeatable entry), e.g.
+   `__bioPreviewBlur__:nested:family:1:siblings:2:name`.
+2. Resolve each blurred field id to the **exact cloned element ids** in the
+   paginated config (a single repeatable field may map to N cloned elements,
+   one per entry).
+3. Pass that set to `injectPreviewBlur` as `extraElementExactIds` (or
+   `extraElementBaseIds` if you only know the source/base id), then render
+   the returned config like any other.
+
+```tsx
+import { injectPreviewBlur } from '@pixldocs/canvas-renderer';
+
+// `blurredElementIds` = the resolved Set<string> of exact cloned element ids
+// you built from the user's checkbox state.
+const previewConfig = injectPreviewBlur(paginatedConfig, {
+  extraElementExactIds: blurredElementIds,
+});
+
+// Then render `previewConfig` with <PixldocsPreview config={previewConfig} />
+// or `renderer.renderAllPages(previewConfig)`. The live React preview will
+// additionally upgrade the static rectangles to real CSS
+// `backdrop-filter: blur()` overlays automatically.
+```
+
+This is exactly how the Biodata preset on pixldocs.com wires its per-field
+🔒 checkboxes — no template authoring required, the user picks at runtime
+which fields stay visible in the watermarked preview.

package/dist/{index-IYEhmMeo.js → index-NWuzIM_r.js}

@@ -16144,7 +16144,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,
@@ -16168,7 +16200,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;
   useEffect(() => {
     setPackageApiUrl(imageProxyUrl);
@@ -16205,10 +16239,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);
@@ -16284,6 +16318,16 @@ function PixldocsPreview(props) {
     setCanvasSettled(true);
     onReady == null ? void 0 : onReady();
   }, [onReady, pageIndex]);
+  const frostedBounds = 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__ */ jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
@@ -16292,19 +16336,55 @@ function PixldocsPreview(props) {
     return /* @__PURE__ */ jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
   return /* @__PURE__ */ jsxs("div", { className, style: { ...style, position: "relative" }, children: [
-    /* @__PURE__ */ jsx("div", { style: { visibility: canvasSettled ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx(
-      PreviewCanvas,
+    /* @__PURE__ */ 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__ */ jsx(
+            PreviewCanvas,
+            {
+              config,
+              pageIndex,
+              zoom,
+              absoluteZoom,
+              skipFontReadyWait,
+              onDynamicFieldClick,
+              onReady: handleCanvasReady
+            },
+            previewKey
+          ),
+          hasOverlays && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                pointerEvents: "none",
+                zIndex: 5
+              },
+              children: frostedBounds.map((b, i) => /* @__PURE__ */ 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__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
@@ -16481,9 +16561,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.183";
+const resolvedPackageVersion = "0.5.185";
 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.185";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -16782,7 +16862,7 @@ class PixldocsRenderer {
     if (shouldWatermark) {
       const { injectWatermark } = await import("./canvasWatermark-pkhacGge.js");
       configToRender = injectWatermark(configToRender, watermarkOptions);
-      const { injectPreviewBlur } = await import("./previewBlur-Dkg1mMKM.js");
+      const { injectPreviewBlur } = await import("./previewBlur-B5SlBl4a.js");
       configToRender = injectPreviewBlur(configToRender);
     }
     return this.renderAllPages(configToRender, renderOpts);
@@ -16841,7 +16921,7 @@ class PixldocsRenderer {
     if (shouldWatermark) {
       const { injectWatermark } = await import("./canvasWatermark-pkhacGge.js");
       configToRender = injectWatermark(configToRender, watermarkOptions);
-      const { injectPreviewBlur } = await import("./previewBlur-Dkg1mMKM.js");
+      const { injectPreviewBlur } = await import("./previewBlur-B5SlBl4a.js");
       configToRender = injectPreviewBlur(configToRender);
     }
     return this.renderAllPageSvgs(configToRender);
@@ -16885,7 +16965,7 @@ class PixldocsRenderer {
     if (shouldWatermark) {
       const { injectWatermark } = await import("./canvasWatermark-pkhacGge.js");
       configToRender = injectWatermark(configToRender, watermarkOptions);
-      const { injectPreviewBlur } = await import("./previewBlur-Dkg1mMKM.js");
+      const { injectPreviewBlur } = await import("./previewBlur-B5SlBl4a.js");
       configToRender = injectPreviewBlur(configToRender);
     }
     return this.renderPdfViaClientExport(configToRender, {
@@ -16991,7 +17071,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-C09pvz-H.js");
+      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-CfmlwA1-.js");
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -19136,7 +19216,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-C09pvz-H.js");
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-CfmlwA1-.js");
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -19533,4 +19613,4 @@ export {
   awaitFontsForConfig as y,
   collectFontDescriptorsFromConfig as z
 };
-//# sourceMappingURL=index-IYEhmMeo.js.map
+//# sourceMappingURL=index-NWuzIM_r.js.map