@pixldocs/canvas-renderer 0.5.186 → 0.5.188

package/README.md

@@ -482,3 +482,87 @@ const blurFieldIds = ['text-reference-name', 'text-phone', 'text-address'];
   **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.
+
+### Biodata teaser previews — blur by flat form key (v0.5.187+)
+
+Form-driven apps (BioMaker, the pixldocs.com Use page, etc.) already
+speak the **flat form-key** language produced by `applyFormDataToConfig`
+— e.g.
+
+```
+field_<treeNodeId>_<entryIdx1>_<fieldKey>
+field_<parentTree>_<pi>_field_<childTree>_<ci>_<fieldKey>     // nested
+```
+
+Instead of reverse-engineering `config.__cloneIdMap` keys or the
+`__cN` / `_eN` clone suffixes on canvas element ids, you can pass those
+flat keys straight to `<PixldocsPreview>` and the package resolves them:
+
+```tsx
+import { PixldocsPreview } from '@pixldocs/canvas-renderer';
+
+// e.g. for a biodata teaser: blur every detail-row VALUE after row 3.
+const blurFlatFormKeys = buildTeaserBlurFlatKeys(sectionState, schema, {
+  afterRow: 3,
+  bindings: 'value',
+});
+
+<PixldocsPreview
+  config={displayConfig}
+  frostedBlur
+  blurFlatFormKeys={blurFlatFormKeys}
+  // Optional — defaults to { bindings: 'value' } so only `*_value` keys
+  // are honoured. Pass 'all' to blur labels / titles too.
+  blurFlatFormKeyOptions={{ bindings: 'value' }}
+/>
+```
+
+Notes:
+
+- Matching is done on `config.__cloneIdMap` and handles all alias
+  variants (`grp-…_4_value`, `…_4_field_detail_section_N_field_N_value`,
+  with or without the wrapper `field_` prefix). Unknown keys are
+  silently ignored — the package never blurs an element it can't
+  positively identify, so a stale key won't accidentally blur the full
+  name, photo, or section titles.
+- Defaults to `bindings: 'value'`, i.e. only flat keys whose last
+  segment is `value` resolve. This is exactly the biodata teaser
+  pattern: blur row values, leave labels / section titles / full-name /
+  photo sharp. Switch to `'all'` if you want labels blurred too.
+- This only drives the live preview overlay. For the watermarked
+  PNG/PDF download path, resolve the same keys to exact ids and bake
+  them in (see below).
+
+#### Watermarked downloads — same resolver + `injectPreviewBlur`
+
+```ts
+import {
+  injectPreviewBlur,
+  resolveBlurElementExactIdsFromFlatFormKeys,
+} from '@pixldocs/canvas-renderer';
+
+const exactIds = resolveBlurElementExactIdsFromFlatFormKeys(
+  resolvedConfig,
+  blurFlatFormKeys,
+  // { bindings: 'value' } by default
+);
+
+const exportConfig = injectPreviewBlur(resolvedConfig, {
+  extraElementExactIds: new Set(exactIds),
+});
+
+// Hand `exportConfig` to renderer.renderAllPages / renderPdf / …
+```
+
+Same resolution path as the live preview — so the on-screen overlay and
+the downloaded PNG/PDF blur exactly the same elements.
+
+#### Parity note
+
+The pixldocs.com **Use page** (the in-app paid-template preview, including
+the Biodata preset's 🔒 per-field checkboxes) and external consumers
+(BioMaker, etc.) both call **the same `resolveBlurElementExactIdsFromFlatFormKeys`**
+function — there is now exactly one resolver shared across the entire
+stack. Anything that blurs correctly in one place blurs identically in
+the other; visual/UX bugs introduced in one pipeline cannot diverge
+silently from the other.

package/dist/{index-_ogxqALr.cjs → index-0rk-MRGy.cjs}

@@ -16133,6 +16133,162 @@ async function getTemplateForm(options) {
     initialSectionState
   };
 }
+const OVERLAY_ID_PREFIX = "__pb_";
+function getNumber(v, fallback = 0) {
+  return typeof v === "number" && Number.isFinite(v) ? v : fallback;
+}
+function resolveSize(node, key) {
+  const v = node == null ? void 0 : node[key];
+  if (typeof v === "number" && Number.isFinite(v)) return v;
+  return 0;
+}
+function collectOverlays(node, parentLeft, parentTop, inheritedBlur, extraBaseIds, extraExactIds, out) {
+  if (!node || typeof node !== "object") return;
+  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 + getNumber(node.left, 0);
+  const absTop = parentTop + getNumber(node.top, 0);
+  if (node.type === "group") {
+    const children = node.children || node.elements;
+    if (Array.isArray(children)) {
+      for (const child of children) {
+        collectOverlays(child, absLeft, absTop, isBlurred, extraBaseIds, extraExactIds, out);
+      }
+    }
+    return;
+  }
+  if (!isBlurred) return;
+  const scaleX = getNumber(node.scaleX, 1) || 1;
+  const scaleY = getNumber(node.scaleY, 1) || 1;
+  const w = Math.max(4, resolveSize(node, "width") * scaleX);
+  const h = Math.max(4, resolveSize(node, "height") * scaleY);
+  out.push({
+    left: absLeft,
+    top: absTop,
+    width: w,
+    height: h,
+    hintFill: typeof node.fill === "string" ? node.fill : void 0
+  });
+}
+function parseColor$1(c) {
+  if (!c) return null;
+  const s = c.trim();
+  const hex = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (hex) {
+    let h = hex[1];
+    if (h.length === 3) h = h.split("").map((x) => x + x).join("");
+    return {
+      r: parseInt(h.slice(0, 2), 16),
+      g: parseInt(h.slice(2, 4), 16),
+      b: parseInt(h.slice(4, 6), 16)
+    };
+  }
+  const rgb = s.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+  if (rgb) return { r: +rgb[1], g: +rgb[2], b: +rgb[3] };
+  return null;
+}
+function buildOverlay(b, idx) {
+  const c = parseColor$1(b.hintFill);
+  const lum = c ? (0.299 * c.r + 0.587 * c.g + 0.114 * c.b) / 255 : 0.2;
+  const isLightGlass = lum < 0.5;
+  const baseFill = isLightGlass ? "rgba(245,245,245,0.68)" : "rgba(30,30,30,0.62)";
+  return {
+    id: `${OVERLAY_ID_PREFIX}${idx}`,
+    type: "shape",
+    shapeType: "rounded-rect",
+    left: b.left,
+    top: b.top,
+    width: b.width,
+    height: b.height,
+    cornerRadius: 0,
+    fill: baseFill,
+    stroke: "transparent",
+    strokeWidth: 0,
+    opacity: 1,
+    selectable: false,
+    locked: true,
+    visible: true,
+    scaleX: 1,
+    scaleY: 1
+  };
+}
+function injectPreviewBlur(config, options) {
+  const cloned = typeof structuredClone === "function" ? structuredClone(config) : JSON.parse(JSON.stringify(config));
+  const extraBase = (options == null ? void 0 : options.extraElementBaseIds) && options.extraElementBaseIds.size > 0 ? options.extraElementBaseIds : void 0;
+  const extraExact = (options == null ? void 0 : options.extraElementExactIds) && options.extraElementExactIds.size > 0 ? options.extraElementExactIds : void 0;
+  let idx = 0;
+  for (const page of cloned.pages || []) {
+    const children = page.children || page.elements;
+    if (!Array.isArray(children)) continue;
+    const overlays = [];
+    for (const child of children) {
+      collectOverlays(child, 0, 0, false, extraBase, extraExact, overlays);
+    }
+    if (overlays.length === 0) continue;
+    for (const b of overlays) {
+      children.push(buildOverlay(b, idx++));
+    }
+  }
+  return cloned;
+}
+function hasAnyPreviewBlur(config) {
+  function walk(node) {
+    if (!node || typeof node !== "object") return false;
+    if (node.previewBlur === true) return true;
+    const children = node.children || node.elements;
+    if (Array.isArray(children)) {
+      for (const c of children) if (walk(c)) return true;
+    }
+    return false;
+  }
+  for (const page of config.pages || []) if (walk(page)) return true;
+  return false;
+}
+function stripFieldPrefix(s) {
+  return s.startsWith("field_") ? s.slice("field_".length) : s;
+}
+function addAllToSet(val, out) {
+  if (!val) return false;
+  if (Array.isArray(val)) {
+    for (const v of val) out.add(v);
+    return val.length > 0;
+  }
+  out.add(val);
+  return true;
+}
+function resolveBlurElementExactIdsFromFlatFormKeys(config, flatFormKeys, options) {
+  const cloneIdMap = (config == null ? void 0 : config.__cloneIdMap) || {};
+  if (!cloneIdMap || typeof cloneIdMap !== "object") return [];
+  const bindings = (options == null ? void 0 : options.bindings) ?? "value";
+  const out = /* @__PURE__ */ new Set();
+  for (const rawId of flatFormKeys) {
+    if (typeof rawId !== "string" || !rawId) continue;
+    if (bindings === "value" && !rawId.endsWith("_value")) continue;
+    const candidates = [rawId];
+    if (rawId.startsWith("field_")) {
+      const topStripped = stripFieldPrefix(rawId);
+      candidates.push(topStripped);
+      const nestedIdx = topStripped.indexOf("_field_");
+      if (nestedIdx >= 0) {
+        const nestedStripped = topStripped.slice(0, nestedIdx + 1) + topStripped.slice(nestedIdx + 1 + "field_".length);
+        candidates.push(nestedStripped);
+      }
+    }
+    for (const k of candidates) {
+      if (k in cloneIdMap) {
+        if (addAllToSet(cloneIdMap[k], out)) break;
+      }
+    }
+  }
+  return Array.from(out);
+}
+const previewBlur = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  hasAnyPreviewBlur,
+  injectPreviewBlur,
+  resolveBlurElementExactIdsFromFlatFormKeys
+}, Symbol.toStringTag, { value: "Module" }));
 const PREVIEW_DEBUG_PREFIX = "[canvas-renderer][preview-debug]";
 function computeFontSignature(config) {
   var _a;
@@ -16226,7 +16382,9 @@ function PixldocsPreview(props) {
     frostedBlur = true,
     frostedBlurOptions,
     blurFieldIds,
-    blurElementExactIds
+    blurElementExactIds,
+    blurFlatFormKeys,
+    blurFlatFormKeyOptions
   } = props;
   react.useEffect(() => {
     setPackageApiUrl(imageProxyUrl);
@@ -16347,8 +16505,26 @@ function PixldocsPreview(props) {
     [blurFieldIds ? blurFieldIds.join("|") : ""]
   );
   const blurExactSet = react.useMemo(
-    () => blurElementExactIds && blurElementExactIds.length ? new Set(blurElementExactIds) : void 0,
-    [blurElementExactIds ? blurElementExactIds.join("|") : ""]
+    () => {
+      const merged = /* @__PURE__ */ new Set();
+      if (blurElementExactIds) for (const id of blurElementExactIds) merged.add(id);
+      if (config && blurFlatFormKeys && blurFlatFormKeys.length) {
+        for (const id of resolveBlurElementExactIdsFromFlatFormKeys(
+          config,
+          blurFlatFormKeys,
+          blurFlatFormKeyOptions
+        )) {
+          merged.add(id);
+        }
+      }
+      return merged.size > 0 ? merged : void 0;
+    },
+    [
+      blurElementExactIds ? blurElementExactIds.join("|") : "",
+      blurFlatFormKeys ? blurFlatFormKeys.join("|") : "",
+      blurFlatFormKeyOptions == null ? void 0 : blurFlatFormKeyOptions.bindings,
+      config
+    ]
   );
   const frostedBounds = react.useMemo(
     () => frostedBlur ? computeFrostedBoundsForPage(config, pageIndex, blurBaseSet, blurExactSet) : [],
@@ -16593,9 +16769,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.186";
+const resolvedPackageVersion = "0.5.188";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.186";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.188";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -16894,8 +17070,8 @@ 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-D2aWUrre.cjs"));
-      configToRender = injectPreviewBlur(configToRender);
+      const { injectPreviewBlur: injectPreviewBlur2 } = await Promise.resolve().then(() => previewBlur);
+      configToRender = injectPreviewBlur2(configToRender);
     }
     return this.renderAllPages(configToRender, renderOpts);
   }
@@ -16953,8 +17129,8 @@ 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-D2aWUrre.cjs"));
-      configToRender = injectPreviewBlur(configToRender);
+      const { injectPreviewBlur: injectPreviewBlur2 } = await Promise.resolve().then(() => previewBlur);
+      configToRender = injectPreviewBlur2(configToRender);
     }
     return this.renderAllPageSvgs(configToRender);
   }
@@ -16997,8 +17173,8 @@ 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-D2aWUrre.cjs"));
-      configToRender = injectPreviewBlur(configToRender);
+      const { injectPreviewBlur: injectPreviewBlur2 } = await Promise.resolve().then(() => previewBlur);
+      configToRender = injectPreviewBlur2(configToRender);
     }
     return this.renderPdfViaClientExport(configToRender, {
       title: title ?? resolved.config.name,
@@ -17103,7 +17279,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-Dh3el4F0.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-B2Cf-9eT.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -19248,7 +19424,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-Dh3el4F0.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-B2Cf-9eT.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -19598,7 +19774,6 @@ exports.applyThemeToConfig = applyThemeToConfig;
 exports.assemblePdfFromSvgs = assemblePdfFromSvgs;
 exports.awaitFontsForConfig = awaitFontsForConfig;
 exports.bakeEdgeFade = bakeEdgeFade;
-exports.baseId = baseId;
 exports.buildRoundedTrianglePath = buildRoundedTrianglePath;
 exports.canvasImageLoader = canvasImageLoader;
 exports.captureFabricCanvasSvgForPdf = captureFabricCanvasSvgForPdf;
@@ -19622,7 +19797,9 @@ exports.getPublishedTemplate = getPublishedTemplate;
 exports.getRoundedRectRadii = getRoundedRectRadii;
 exports.getTemplateForm = getTemplateForm;
 exports.getTrianglePoints = getTrianglePoints;
+exports.hasAnyPreviewBlur = hasAnyPreviewBlur;
 exports.hasEdgeFade = hasEdgeFade;
+exports.injectPreviewBlur = injectPreviewBlur;
 exports.isBundledAssetUrl = isBundledAssetUrl;
 exports.isElement = isElement;
 exports.isFontAvailable = isFontAvailable;
@@ -19634,6 +19811,7 @@ exports.normalizeFontFamily = normalizeFontFamily;
 exports.normalizeShapeType = normalizeShapeType;
 exports.parseTextMarkdown = parseTextMarkdown;
 exports.renderSmartElementToSvg = renderSmartElementToSvg;
+exports.resolveBlurElementExactIdsFromFlatFormKeys = resolveBlurElementExactIdsFromFlatFormKeys;
 exports.resolveFontWeight = resolveFontWeight;
 exports.resolveFromForm = resolveFromForm;
 exports.resolveTemplateData = resolveTemplateData;
@@ -19642,4 +19820,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-_ogxqALr.cjs.map
+//# sourceMappingURL=index-0rk-MRGy.cjs.map