@pixldocs/canvas-renderer 0.5.184 → 0.5.186

package/README.md

@@ -406,3 +406,79 @@ rectangle (the closest pure-vector approximation), unchanged.
 
 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.
+
+### Shortcut: pass blur field ids straight to `<PixldocsPreview>` (v0.5.186+)
+
+If you're using the React `<PixldocsPreview>` component (rather than the
+imperative renderer), you don't need to call `injectPreviewBlur` yourself.
+Just pass the field ids directly as a prop:
+
+```tsx
+import { PixldocsPreview } from '@pixldocs/canvas-renderer';
+
+// Source / base ids straight from your form schema.
+// Every cloned instance across pages + repeatable entries is auto-matched.
+const blurFieldIds = ['text-reference-name', 'text-phone', 'text-address'];
+
+<PixldocsPreview
+  templateId={templateId}
+  formSchemaId={formSchemaId}
+  sectionState={sectionState}
+  supabaseUrl={SUPABASE_URL}
+  supabaseAnonKey={SUPABASE_ANON_KEY}
+  blurFieldIds={blurFieldIds}
+/>
+```
+
+- `blurFieldIds`: matched by **base id** — cloned suffixes (`_1`, `_2_3`, …)
+  are stripped before comparison, so one entry blurs every clone of that
+  element across all pages / repeatable entries.
+- `blurElementExactIds`: optional companion prop for targeting a single
+  specific clone (no base-id stripping).
+- The preview still respects any `previewBlur: true` flags already baked
+  into the resolved config — `blurFieldIds` is purely additive.
+- This only affects the live React preview overlay. For watermarked
+  **downloads** (PNG/PDF) you still want to run `injectPreviewBlur(...)` on
+  the resolved config before handing it to the imperative renderer, so the
+  blur is baked into the exported pixels.

package/dist/{index-D2deevHj.js → index-Xg0sHfrw.js}

@@ -16147,15 +16147,18 @@ function countUnderlinedNodes(config) {
 function getNum(v, fallback = 0) {
   return typeof v === "number" && Number.isFinite(v) ? v : fallback;
 }
-function collectBlurBounds(node, parentLeft, parentTop, inheritedBlur, out) {
+function collectBlurBounds(node, parentLeft, parentTop, inheritedBlur, extraBaseIds, extraExactIds, out) {
   if (!node || typeof node !== "object") return;
-  const isBlurred = inheritedBlur || node.previewBlur === true;
+  const matchesBase = !!(extraBaseIds && typeof node.id === "string" && extraBaseIds.has(baseId(node.id)));
+  const matchesExact = !!(extraExactIds && typeof node.id === "string" && extraExactIds.has(node.id));
+  const isBlurred = inheritedBlur || node.previewBlur === true || matchesBase || matchesExact;
   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);
+      for (const c of children)
+        collectBlurBounds(c, absLeft, absTop, isBlurred, extraBaseIds, extraExactIds, out);
     }
     return;
   }
@@ -16166,13 +16169,14 @@ function collectBlurBounds(node, parentLeft, parentTop, inheritedBlur, out) {
   const h = Math.max(4, getNum(node.height, 0) * sy);
   out.push({ left: absLeft, top: absTop, width: w, height: h });
 }
-function computeFrostedBoundsForPage(config, pageIndex) {
+function computeFrostedBoundsForPage(config, pageIndex, extraBaseIds, extraExactIds) {
   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);
+  for (const c of children)
+    collectBlurBounds(c, 0, 0, false, extraBaseIds, extraExactIds, out);
   return out;
 }
 function PixldocsPreview(props) {
@@ -16202,7 +16206,9 @@ function PixldocsPreview(props) {
     // while the on-screen preview wasn't.
     skipFontReadyWait = false,
     frostedBlur = true,
-    frostedBlurOptions
+    frostedBlurOptions,
+    blurFieldIds,
+    blurElementExactIds
   } = props;
   useEffect(() => {
     setPackageApiUrl(imageProxyUrl);
@@ -16318,9 +16324,17 @@ function PixldocsPreview(props) {
     setCanvasSettled(true);
     onReady == null ? void 0 : onReady();
   }, [onReady, pageIndex]);
+  const blurBaseSet = useMemo(
+    () => blurFieldIds && blurFieldIds.length ? new Set(blurFieldIds) : void 0,
+    [blurFieldIds ? blurFieldIds.join("|") : ""]
+  );
+  const blurExactSet = useMemo(
+    () => blurElementExactIds && blurElementExactIds.length ? new Set(blurElementExactIds) : void 0,
+    [blurElementExactIds ? blurElementExactIds.join("|") : ""]
+  );
   const frostedBounds = useMemo(
-    () => frostedBlur ? computeFrostedBoundsForPage(config, pageIndex) : [],
-    [frostedBlur, config, pageIndex]
+    () => frostedBlur ? computeFrostedBoundsForPage(config, pageIndex, blurBaseSet, blurExactSet) : [],
+    [frostedBlur, config, pageIndex, blurBaseSet, blurExactSet]
   );
   const blurPx = (frostedBlurOptions == null ? void 0 : frostedBlurOptions.blurPx) ?? 5;
   const satPct = (frostedBlurOptions == null ? void 0 : frostedBlurOptions.saturatePct) ?? 130;
@@ -16561,9 +16575,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.184";
+const resolvedPackageVersion = "0.5.186";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.184";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.186";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -16862,7 +16876,7 @@ class PixldocsRenderer {
     if (shouldWatermark) {
       const { injectWatermark } = await import("./canvasWatermark-pkhacGge.js");
       configToRender = injectWatermark(configToRender, watermarkOptions);
-      const { injectPreviewBlur } = await import("./previewBlur-Dwbjk5sM.js");
+      const { injectPreviewBlur } = await import("./previewBlur-CDBjIIjX.js");
       configToRender = injectPreviewBlur(configToRender);
     }
     return this.renderAllPages(configToRender, renderOpts);
@@ -16921,7 +16935,7 @@ class PixldocsRenderer {
     if (shouldWatermark) {
       const { injectWatermark } = await import("./canvasWatermark-pkhacGge.js");
       configToRender = injectWatermark(configToRender, watermarkOptions);
-      const { injectPreviewBlur } = await import("./previewBlur-Dwbjk5sM.js");
+      const { injectPreviewBlur } = await import("./previewBlur-CDBjIIjX.js");
       configToRender = injectPreviewBlur(configToRender);
     }
     return this.renderAllPageSvgs(configToRender);
@@ -16965,7 +16979,7 @@ class PixldocsRenderer {
     if (shouldWatermark) {
       const { injectWatermark } = await import("./canvasWatermark-pkhacGge.js");
       configToRender = injectWatermark(configToRender, watermarkOptions);
-      const { injectPreviewBlur } = await import("./previewBlur-Dwbjk5sM.js");
+      const { injectPreviewBlur } = await import("./previewBlur-CDBjIIjX.js");
       configToRender = injectPreviewBlur(configToRender);
     }
     return this.renderPdfViaClientExport(configToRender, {
@@ -17071,7 +17085,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-CBUTexHq.js");
+      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-v3mr9nks.js");
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -19216,7 +19230,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-CBUTexHq.js");
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-v3mr9nks.js");
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -19613,4 +19627,4 @@ export {
   awaitFontsForConfig as y,
   collectFontDescriptorsFromConfig as z
 };
-//# sourceMappingURL=index-D2deevHj.js.map
+//# sourceMappingURL=index-Xg0sHfrw.js.map