@pixldocs/canvas-renderer 0.5.188 → 0.5.189

package/README.md

@@ -483,7 +483,7 @@ const blurFieldIds = ['text-reference-name', 'text-phone', 'text-address'];
   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+)
+### Biodata teaser previews — blur by flat form key (v0.5.187+, hardened in v0.5.189)
 
 Form-driven apps (BioMaker, the pixldocs.com Use page, etc.) already
 speak the **flat form-key** language produced by `applyFormDataToConfig`
@@ -499,7 +499,10 @@ Instead of reverse-engineering `config.__cloneIdMap` keys or the
 flat keys straight to `<PixldocsPreview>` and the package resolves them:
 
 ```tsx
-import { PixldocsPreview } from '@pixldocs/canvas-renderer';
+import {
+  PixldocsPreview,
+  buildTeaserBlurFlatKeys,
+} from '@pixldocs/canvas-renderer';
 
 // e.g. for a biodata teaser: blur every detail-row VALUE after row 3.
 const blurFlatFormKeys = buildTeaserBlurFlatKeys(sectionState, schema, {
@@ -509,11 +512,14 @@ const blurFlatFormKeys = buildTeaserBlurFlatKeys(sectionState, schema, {
 
 <PixldocsPreview
   config={displayConfig}
+  pageIndex={pageIndex}
   frostedBlur
   blurFlatFormKeys={blurFlatFormKeys}
   // Optional — defaults to { bindings: 'value' } so only `*_value` keys
-  // are honoured. Pass 'all' to blur labels / titles too.
-  blurFlatFormKeyOptions={{ bindings: 'value' }}
+  // are honoured. Pass 'all' to blur labels / titles too. `pageIndex` is
+  // forwarded into the resolver so verification scopes to the page
+  // currently being rendered (recommended for stacked multi-page previews).
+  blurFlatFormKeyOptions={{ bindings: 'value', pageIndex }}
 />
 ```
 
@@ -521,10 +527,22 @@ 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.
+  with or without the wrapper `field_` prefix). **As of v0.5.189**
+  every resolved id is then verified against the actual rendered page
+  tree (`config.pages[*]`) — stale or alias map entries that don't
+  match a real element are dropped silently. This eliminates the
+  "phantom frost rectangle near a section title" class of bug that
+  showed up in templates with nested repeatables, where
+  `__cloneIdMap` returned ids like `text-…__cgroup-…_e4` but the
+  rendered tree used `text-…__cgrp-…_pN_grp-…_eN`.
+- Pass `pageIndex` in `blurFlatFormKeyOptions` to scope verification
+  to a single page — clones that landed on a different page will not
+  contribute overlays to this page. This is the recommended pattern
+  for stacked multi-page previews. Default is `'all'` (verify across
+  every page).
+- Use `skipTreeVerification: true` only if you fully trust your
+  `__cloneIdMap` (e.g. you just built the config in-process and
+  haven't mutated the tree since).
 - 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 /
@@ -533,6 +551,26 @@ Notes:
   PNG/PDF download path, resolve the same keys to exact ids and bake
   them in (see below).
 
+#### `buildTeaserBlurFlatKeys(sectionState, sections, options)`
+
+Emits the flat form-keys for every repeatable-section entry **after**
+`afterRow` (1-indexed). Walks nested repeatables recursively.
+
+- `sectionState` — the same `SectionFormState` you'd hand to
+  `resolveFromForm` / `<PixldocsPreview sectionState={…}>`.
+- `sections` — `InferredSection[]` for the active form schema (you
+  already have these from `inferFormSchemaFromTemplate` or from the
+  `form_schemas` row converted via `fromFormDefSections`).
+- `options.afterRow` — keep the first N entries sharp; blur entries
+  `N+1, N+2, …`.
+- `options.bindings` — `'value'` (default) emits only `_value` keys
+  (the canonical biodata teaser pattern); `'all'` emits every entry
+  field key.
+
+Returned keys can be fed straight into the `blurFlatFormKeys` prop
+above and into `resolveBlurElementExactIdsFromFlatFormKeys` for the
+watermarked download path below.
+
 #### Watermarked downloads — same resolver + `injectPreviewBlur`
 
 ```ts
@@ -544,7 +582,9 @@ import {
 const exactIds = resolveBlurElementExactIdsFromFlatFormKeys(
   resolvedConfig,
   blurFlatFormKeys,
-  // { bindings: 'value' } by default
+  // { bindings: 'value', pageIndex: 'all' } by default. For the
+  // download path you usually want 'all' since the export covers
+  // every page.
 );
 
 const exportConfig = injectPreviewBlur(resolvedConfig, {

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

@@ -16257,6 +16257,23 @@ function addAllToSet(val, out) {
   out.add(val);
   return true;
 }
+function collectPageTreeElementIds(config, pageIndex = "all") {
+  const out = /* @__PURE__ */ new Set();
+  const pages = config == null ? void 0 : config.pages;
+  if (!Array.isArray(pages)) return out;
+  const targets = pageIndex === "all" ? pages : pages[pageIndex] != null ? [pages[pageIndex]] : [];
+  const walk = (node) => {
+    if (!node || typeof node !== "object") return;
+    if (typeof node.id === "string") out.add(node.id);
+    const children = node.children || node.elements;
+    if (Array.isArray(children)) for (const c of children) walk(c);
+  };
+  for (const page of targets) {
+    const children = (page == null ? void 0 : page.children) || (page == null ? void 0 : page.elements);
+    if (Array.isArray(children)) for (const c of children) walk(c);
+  }
+  return out;
+}
 function resolveBlurElementExactIdsFromFlatFormKeys(config, flatFormKeys, options) {
   const cloneIdMap = (config == null ? void 0 : config.__cloneIdMap) || {};
   if (!cloneIdMap || typeof cloneIdMap !== "object") return [];
@@ -16281,10 +16298,59 @@ function resolveBlurElementExactIdsFromFlatFormKeys(config, flatFormKeys, option
       }
     }
   }
-  return Array.from(out);
+  if (out.size === 0) return [];
+  if (options == null ? void 0 : options.skipTreeVerification) return Array.from(out);
+  const treeIds = collectPageTreeElementIds(
+    config,
+    (options == null ? void 0 : options.pageIndex) ?? "all"
+  );
+  if (treeIds.size === 0) return Array.from(out);
+  const verified = [];
+  for (const id of out) if (treeIds.has(id)) verified.push(id);
+  return verified;
+}
+function buildTeaserBlurFlatKeys(sectionState, sections, options) {
+  const afterRow = Math.max(0, options.afterRow | 0);
+  const bindings = options.bindings ?? "value";
+  const out = [];
+  if (!sectionState || !Array.isArray(sections)) return out;
+  const repeatables = sections.filter((s) => (s == null ? void 0 : s.type) === "repeatable");
+  const childrenByParent = /* @__PURE__ */ new Map();
+  for (const r of repeatables) {
+    if (!r.parentId) continue;
+    const arr = childrenByParent.get(r.parentId) || [];
+    arr.push(r);
+    childrenByParent.set(r.parentId, arr);
+  }
+  const emitForEntryFields = (section, keyPrefix, entryIdx1) => {
+    const fields = section.entryFields || [];
+    for (const f of fields) {
+      if (!(f == null ? void 0 : f.key)) continue;
+      if (bindings === "value" && f.key !== "value") continue;
+      out.push(`${keyPrefix}_${f.key}`);
+    }
+  };
+  const walkRepeatable = (section, parentKeyPrefix) => {
+    const entries = sectionState == null ? void 0 : sectionState[section.id];
+    if (!Array.isArray(entries)) return;
+    for (let i = 0; i < entries.length; i++) {
+      const entryIdx1 = i + 1;
+      const isBlurred = entryIdx1 > afterRow;
+      const keyPrefix = parentKeyPrefix ? `${parentKeyPrefix}_field_${section.id}_${entryIdx1}` : `field_${section.id}_${entryIdx1}`;
+      if (isBlurred) emitForEntryFields(section, keyPrefix);
+      const children = childrenByParent.get(section.id) || [];
+      for (const child of children) walkRepeatable(child, keyPrefix);
+    }
+  };
+  for (const r of repeatables) {
+    if (r.parentId) continue;
+    walkRepeatable(r, "");
+  }
+  return out;
 }
 const previewBlur = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
+  buildTeaserBlurFlatKeys,
   hasAnyPreviewBlur,
   injectPreviewBlur,
   resolveBlurElementExactIdsFromFlatFormKeys
@@ -16769,9 +16835,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.188";
+const resolvedPackageVersion = "0.5.189";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.188";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.189";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -17279,7 +17345,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-B2Cf-9eT.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-BAAJU0RL.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -19424,7 +19490,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-B2Cf-9eT.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-BAAJU0RL.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -19775,6 +19841,7 @@ exports.assemblePdfFromSvgs = assemblePdfFromSvgs;
 exports.awaitFontsForConfig = awaitFontsForConfig;
 exports.bakeEdgeFade = bakeEdgeFade;
 exports.buildRoundedTrianglePath = buildRoundedTrianglePath;
+exports.buildTeaserBlurFlatKeys = buildTeaserBlurFlatKeys;
 exports.canvasImageLoader = canvasImageLoader;
 exports.captureFabricCanvasSvgForPdf = captureFabricCanvasSvgForPdf;
 exports.collectFontDescriptorsFromConfig = collectFontDescriptorsFromConfig;
@@ -19820,4 +19887,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-0rk-MRGy.cjs.map
+//# sourceMappingURL=index-CmrxeQ_K.cjs.map