@pixldocs/canvas-renderer 0.5.189 → 0.5.191

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+, hardened in v0.5.189)
+### Biodata teaser previews — blur by flat form key (v0.5.187+, hardened in v0.5.189, pagination-safe in v0.5.190)
 
 Form-driven apps (BioMaker, the pixldocs.com Use page, etc.) already
 speak the **flat form-key** language produced by `applyFormDataToConfig`
@@ -530,11 +530,17 @@ Notes:
   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`.
+  match a real element are dropped silently.
+- **As of v0.5.190** `applyContentBoundsPagination` rewrites
+  `__cloneIdMap` after pagination so flat keys for overflow rows that
+  moved to continuation pages still resolve to ids that exist on the
+  tree (clones inherit `__sourceId` from the original element). If the
+  map is still stale for any reason, the resolver also falls back to
+  walking the page tree and matching `__sourceId` / `__baseNodeId`
+  against the raw resolved ids — the same strategy the theming pipeline
+  uses to track paginated clones. End result: frosted blur for row N
+  appears on whichever page row N actually renders on, even when
+  content-bounds pagination moved it.
 - 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
@@ -606,3 +612,43 @@ 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.
+
+## Reliable PDF photo embedding across browsers (v0.5.191+)
+
+Form-driven apps that embed **user-uploaded photos** (biodatas, resumes,
+ID cards…) historically hit a Safari/iOS bug where the downloaded PDF
+rendered without the photos even though the on-screen preview was fine.
+The svg2pdf fast path internally re-rasterises `data:image/*` sources
+through a tainted offscreen canvas roundtrip, which Safari silently drops
+for large camera-roll JPEGs.
+
+v0.5.191 fixes this with two new options:
+
+```ts
+const renderer = new PixldocsRenderer({
+  supabaseUrl, supabaseAnonKey,
+  // Force the per-element Fabric → jsPDF.addImage path on every export.
+  // Recommended for biodata-style flows that always have user photos.
+  forcePerElementPdf: true,           // true | false | 'auto' (default)
+  // Down-scale any data:image/* whose longest edge > 2048 to JPEG-0.85
+  // before mounting into Fabric. Prevents Safari from silently dropping
+  // multi-megapixel camera-roll JPEGs in jsPDF.addImage.
+  maxImageEdgePx: 2048,               // 0 to disable
+});
+
+const pdf = await renderer.renderPdfFromForm({
+  templateId, formSchemaId, sectionState, title,
+  // Per-call overrides also accepted:
+  // forcePerElementPdf: 'auto',
+  // maxImageEdgePx: 2400,
+});
+```
+
+**Defaults:** `forcePerElementPdf: 'auto'` enables the safe path only when
+the resolved config contains a `data:image/(jpeg|png|webp)` source **and**
+the host is Safari / iOS (incl. iPadOS desktop spoof). Editors and
+non-Safari hosts keep the vector fast path unchanged.
+
+Hosts that previously monkey-patched `captureFabricCanvasSvgForPdf` to
+throw (the unofficial BioMaker workaround) can delete that patch after
+upgrading.

package/dist/{index-CmrxeQ_K.cjs → index-BJR7zaam.cjs}

@@ -13327,6 +13327,7 @@ function isStaticOnNewPage(node) {
 function cloneNodeWithNewIds(node) {
   const base = node.__baseNodeId;
   const source = node.__sourceId;
+  const effectiveSource = source ?? node.id;
   if (isGroup(node)) {
     const g = node;
     const cloned2 = {
@@ -13335,14 +13336,14 @@ function cloneNodeWithNewIds(node) {
       children: (g.children ?? []).map(cloneNodeWithNewIds)
     };
     if (base != null) cloned2.__baseNodeId = base;
-    if (source != null) cloned2.__sourceId = source;
+    cloned2.__sourceId = effectiveSource;
     return cloned2;
   }
   const el = node;
   const prefix = el.type === "text" ? "text" : el.type === "image" ? "img" : el.type === "shape" ? "shape" : "line";
   const cloned = { ...el, id: generateId(prefix) };
   if (base != null) cloned.__baseNodeId = base;
-  if (source != null) cloned.__sourceId = source;
+  cloned.__sourceId = effectiveSource;
   return cloned;
 }
 function cloneNodeWithStableIds(node, baseId2, path) {
@@ -13648,7 +13649,51 @@ function applyContentBoundsPagination(config) {
     resultPages.push(...paginated);
   }
   if (!mutated) return config;
-  return { ...config, pages: resultPages };
+  const next = { ...config, pages: resultPages };
+  remapCloneIdMapAfterPagination(next);
+  return next;
+}
+function remapCloneIdMapAfterPagination(config) {
+  const cloneIdMap = config.__cloneIdMap;
+  if (!cloneIdMap || typeof cloneIdMap !== "object") return;
+  const allIds = /* @__PURE__ */ new Set();
+  const sourceToNew = /* @__PURE__ */ new Map();
+  const walk = (node) => {
+    if (!node || typeof node !== "object") return;
+    const n = node;
+    if (typeof n.id === "string") {
+      allIds.add(n.id);
+      const src = n.__sourceId;
+      if (typeof src === "string" && src !== n.id) {
+        const arr = sourceToNew.get(src);
+        if (arr) arr.push(n.id);
+        else sourceToNew.set(src, [n.id]);
+      }
+    }
+    const children = n.children;
+    if (Array.isArray(children)) for (const c of children) walk(c);
+  };
+  for (const page of config.pages ?? []) {
+    const ch = page.children;
+    if (Array.isArray(ch)) for (const c of ch) walk(c);
+  }
+  const updated = {};
+  for (const [key, val] of Object.entries(cloneIdMap)) {
+    const oldIds = Array.isArray(val) ? val : [val];
+    const newIds = [];
+    for (const oid of oldIds) {
+      if (typeof oid !== "string") continue;
+      if (allIds.has(oid)) newIds.push(oid);
+      const clones = sourceToNew.get(oid);
+      if (clones) {
+        for (const c of clones) if (allIds.has(c)) newIds.push(c);
+      }
+    }
+    if (newIds.length === 0) continue;
+    const uniq = Array.from(new Set(newIds));
+    updated[key] = uniq.length === 1 ? uniq[0] : uniq;
+  }
+  config.__cloneIdMap = updated;
 }
 const __vite_import_meta_env__ = {};
 const FONT_WEIGHT_LABELS = {
@@ -16274,6 +16319,32 @@ function collectPageTreeElementIds(config, pageIndex = "all") {
   }
   return out;
 }
+function collectIdsBySourceMatch(config, targetIds, pageIndex = "all") {
+  const targets = /* @__PURE__ */ new Set();
+  for (const t of targetIds) if (typeof t === "string" && t) targets.add(t);
+  if (targets.size === 0) return [];
+  const pages = config == null ? void 0 : config.pages;
+  if (!Array.isArray(pages)) return [];
+  const visitPages = pageIndex === "all" ? pages : pages[pageIndex] != null ? [pages[pageIndex]] : [];
+  const out = /* @__PURE__ */ new Set();
+  const walk = (node) => {
+    if (!node || typeof node !== "object") return;
+    const src = typeof node.__sourceId === "string" ? node.__sourceId : void 0;
+    const base = typeof node.__baseNodeId === "string" ? node.__baseNodeId : void 0;
+    if (typeof node.id === "string") {
+      if (targets.has(node.id)) out.add(node.id);
+      else if (src && targets.has(src)) out.add(node.id);
+      else if (base && targets.has(base)) 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 visitPages) {
+    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 Array.from(out);
+}
 function resolveBlurElementExactIdsFromFlatFormKeys(config, flatFormKeys, options) {
   const cloneIdMap = (config == null ? void 0 : config.__cloneIdMap) || {};
   if (!cloneIdMap || typeof cloneIdMap !== "object") return [];
@@ -16307,7 +16378,8 @@ function resolveBlurElementExactIdsFromFlatFormKeys(config, flatFormKeys, option
   if (treeIds.size === 0) return Array.from(out);
   const verified = [];
   for (const id of out) if (treeIds.has(id)) verified.push(id);
-  return verified;
+  if (verified.length > 0) return verified;
+  return collectIdsBySourceMatch(config, out, (options == null ? void 0 : options.pageIndex) ?? "all");
 }
 function buildTeaserBlurFlatKeys(sectionState, sections, options) {
   const afterRow = Math.max(0, options.afterRow | 0);
@@ -16835,9 +16907,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.189";
+const resolvedPackageVersion = "0.5.191";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.189";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.191";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -16864,6 +16936,96 @@ function isFabricTextboxLike(obj) {
 function isFabricGroupLike(obj) {
   return !!obj && (obj instanceof fabric__namespace.Group || obj.type === "group" || Array.isArray(obj._objects) && typeof obj.getObjects === "function");
 }
+function configHasUserDataImage(config) {
+  let found = false;
+  const isRasterDataUrl = (u) => typeof u === "string" && /^data:image\/(jpeg|jpg|png|webp)[;,]/i.test(u);
+  const walk = (nodes) => {
+    if (found || !Array.isArray(nodes)) return;
+    for (const node of nodes) {
+      if (!node || typeof node !== "object") continue;
+      if (node.type === "image" && (isRasterDataUrl(node.src) || isRasterDataUrl(node.imageUrl))) {
+        found = true;
+        return;
+      }
+      if (Array.isArray(node.children)) walk(node.children);
+    }
+  };
+  for (const page of config.pages ?? []) {
+    walk((page == null ? void 0 : page.children) ?? []);
+    if (found) break;
+  }
+  return found;
+}
+function detectSafariOrIos() {
+  try {
+    if (typeof navigator === "undefined") return false;
+    const ua = navigator.userAgent || "";
+    const vendor = navigator.vendor || "";
+    const isIOS = /iPad|iPhone|iPod/.test(ua) || // iPadOS 13+ reports as Mac with touch
+    /Macintosh/.test(ua) && typeof navigator.maxTouchPoints === "number" && navigator.maxTouchPoints > 1;
+    const isSafariDesktop = /Safari/.test(ua) && /Apple/.test(vendor) && !/Chrome|CriOS|Chromium|Edg|FxiOS/.test(ua);
+    return isIOS || isSafariDesktop;
+  } catch {
+    return false;
+  }
+}
+async function downscaleConfigRasterImages(config, maxEdgePx) {
+  if (!maxEdgePx || maxEdgePx <= 0) return 0;
+  if (typeof document === "undefined") return 0;
+  const targets = [];
+  const isRasterDataUrl = (u) => typeof u === "string" && /^data:image\/(jpeg|jpg|png|webp)[;,]/i.test(u);
+  const walk = (nodes) => {
+    if (!Array.isArray(nodes)) return;
+    for (const node of nodes) {
+      if (!node || typeof node !== "object") continue;
+      if (node.type === "image") {
+        if (isRasterDataUrl(node.src)) targets.push({ node, field: "src" });
+        else if (isRasterDataUrl(node.imageUrl)) targets.push({ node, field: "imageUrl" });
+      }
+      if (Array.isArray(node.children)) walk(node.children);
+    }
+  };
+  for (const page of config.pages ?? []) walk((page == null ? void 0 : page.children) ?? []);
+  if (targets.length === 0) return 0;
+  const shrinkOne = async (dataUrl) => {
+    try {
+      const img = await new Promise((resolve, reject) => {
+        const el = new Image();
+        el.onload = () => resolve(el);
+        el.onerror = (e) => reject(e);
+        el.decoding = "sync";
+        el.src = dataUrl;
+      });
+      const w = img.naturalWidth, h = img.naturalHeight;
+      if (!w || !h) return null;
+      const longest = Math.max(w, h);
+      if (longest <= maxEdgePx) return null;
+      const scale = maxEdgePx / longest;
+      const tw = Math.max(1, Math.round(w * scale));
+      const th = Math.max(1, Math.round(h * scale));
+      const canvas = document.createElement("canvas");
+      canvas.width = tw;
+      canvas.height = th;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return null;
+      ctx.fillStyle = "#ffffff";
+      ctx.fillRect(0, 0, tw, th);
+      ctx.drawImage(img, 0, 0, tw, th);
+      return canvas.toDataURL("image/jpeg", 0.85);
+    } catch {
+      return null;
+    }
+  };
+  let shrunk = 0;
+  for (const { node, field } of targets) {
+    const next = await shrinkOne(String(node[field]));
+    if (next) {
+      node[field] = next;
+      shrunk++;
+    }
+  }
+  return shrunk;
+}
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -17216,7 +17378,9 @@ class PixldocsRenderer {
   async renderPdf(templateConfig, options) {
     return this.renderPdfViaClientExport(templateConfig, {
       title: options == null ? void 0 : options.title,
-      textMode: options == null ? void 0 : options.textMode
+      textMode: options == null ? void 0 : options.textMode,
+      forcePerElementPdf: options == null ? void 0 : options.forcePerElementPdf,
+      maxImageEdgePx: options == null ? void 0 : options.maxImageEdgePx
     });
   }
   /**
@@ -17224,7 +17388,7 @@ class PixldocsRenderer {
    * This is the primary PDF export API — mirrors renderFromForm() but returns a PDF.
    */
   async renderPdfFromForm(options) {
-    const { templateId, formSchemaId, sectionState, themeId, watermark, watermarkOptions, prefetched, title, fontBaseUrl, textMode } = options;
+    const { templateId, formSchemaId, sectionState, themeId, watermark, watermarkOptions, prefetched, title, fontBaseUrl, textMode, forcePerElementPdf, maxImageEdgePx } = options;
     const resolved = await resolveFromForm({
       templateId,
       formSchemaId,
@@ -17245,7 +17409,9 @@ class PixldocsRenderer {
     return this.renderPdfViaClientExport(configToRender, {
       title: title ?? resolved.config.name,
       watermark: shouldWatermark,
-      textMode
+      textMode,
+      forcePerElementPdf,
+      maxImageEdgePx
     });
   }
   async renderById(templateId, formData, options) {
@@ -17286,6 +17452,31 @@ class PixldocsRenderer {
     const { setPackageApiUrl: setPackageApiUrl2 } = await Promise.resolve().then(() => appApi);
     setPackageApiUrl2(this.config.imageProxyUrl);
     const cloned = JSON.parse(JSON.stringify(templateConfig));
+    const callForce = options.forcePerElementPdf;
+    const cfgForce = this.config.forcePerElementPdf;
+    const forceMode = callForce !== void 0 ? callForce : cfgForce !== void 0 ? cfgForce : "auto";
+    const hasUserDataImage = configHasUserDataImage(cloned);
+    const isSafariLike = detectSafariOrIos();
+    const shouldForcePerElement = forceMode === true ? true : forceMode === false ? false : hasUserDataImage && isSafariLike;
+    const maxEdgeOpt = options.maxImageEdgePx ?? this.config.maxImageEdgePx;
+    const effectiveMaxEdge = typeof maxEdgeOpt === "number" ? Math.max(0, maxEdgeOpt | 0) : shouldForcePerElement ? 2048 : 0;
+    if (effectiveMaxEdge > 0) {
+      try {
+        const downscaled = await downscaleConfigRasterImages(cloned, effectiveMaxEdge);
+        if (downscaled > 0) {
+          console.log(`[canvas-renderer][pdf-unified] downscaled ${downscaled} raster image(s) to <=${effectiveMaxEdge}px edge`);
+        }
+      } catch (e) {
+        console.warn("[canvas-renderer][pdf-unified] image downscale pass failed (continuing with originals):", e);
+      }
+    }
+    console.log("[canvas-renderer][pdf-unified] export switches", {
+      forceMode,
+      hasUserDataImage,
+      isSafariLike,
+      shouldForcePerElement,
+      effectiveMaxEdge
+    });
     const stampPrefix = `__pixldocs_pdf_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
     const pageIds = cloned.pages.map((p, i) => {
       const id = `${stampPrefix}_p${i}`;
@@ -17345,7 +17536,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-BAAJU0RL.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-D_2mdcwO.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -17355,7 +17546,8 @@ class PixldocsRenderer {
         title: options.title,
         watermark: !!options.watermark,
         returnBlob: true,
-        pdfTextMode: options.textMode ?? (cloned == null ? void 0 : cloned.pdfTextMode) ?? ((_a = cloned.canvas) == null ? void 0 : _a.n) ?? "auto"
+        pdfTextMode: options.textMode ?? (cloned == null ? void 0 : cloned.pdfTextMode) ?? ((_a = cloned.canvas) == null ? void 0 : _a.n) ?? "auto",
+        skipLiveCanvasSvgFastPath: shouldForcePerElement
       });
       if (!result || typeof result === "undefined") {
         throw new Error("exportMultiPagePdf returned no blob (returnBlob path failed)");
@@ -19490,7 +19682,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-BAAJU0RL.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-D_2mdcwO.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -19887,4 +20079,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-CmrxeQ_K.cjs.map
+//# sourceMappingURL=index-BJR7zaam.cjs.map