@pixldocs/canvas-renderer 0.5.222 → 0.5.225

package/dist/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-BKJxI43i.cjs");
+const index = require("./index-6nrov1rx.cjs");
 exports.DEPLOYMENT_VERSION_MARKER = index.DEPLOYMENT_VERSION_MARKER;
 exports.FONT_FALLBACK_DEVANAGARI = index.FONT_FALLBACK_DEVANAGARI;
 exports.FONT_FALLBACK_MATH = index.FONT_FALLBACK_MATH;

package/dist/index.d.ts

@@ -9,6 +9,7 @@ import { isBundledAssetUrl } from '../../../src/lib/canvasImageLoader';
 import { isPrivateUrl } from '../../../src/lib/canvasImageLoader';
 import { jsPDF } from 'jspdf';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 import { resolveBlurElementExactIdsFromFlatFormKeys } from '../../../src/lib/previewBlur';
 import { ResolveBlurOptions } from '../../../src/lib/previewBlur';
 import { SectionFormState } from '../../../src/lib/inferFormSchemaFromTemplate';
@@ -430,6 +431,8 @@ declare interface PixldocsPreviewBaseProps {
     onReady?: () => void;
     /** Called when resolution or rendering fails */
     onError?: (error: Error) => void;
+    /** Optional custom UI shown while the live preview is preparing */
+    loadingFallback?: ReactNode;
     /** Allow package previews to skip the blocking font-ready wait used by app preview */
     skipFontReadyWait?: boolean;
     /**

package/dist/index.js

@@ -1,4 +1,4 @@
-import { D, F, o, q, s, P, t, u, v, w, x, y, z, B, C, E, G, H, I, J, K, L, M, b, N, O, Q, R, S, U, V, W, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5 } from "./index-DxL--cfL.js";
+import { D, F, o, q, s, P, t, u, v, w, x, y, z, B, C, E, G, H, I, J, K, L, M, b, N, O, Q, R, S, U, V, W, X, Y, Z, _, $, a0, a1, a2, a3, a4, a5 } from "./index-BpViFQMO.js";
 export {
   D as DEPLOYMENT_VERSION_MARKER,
   F as FONT_FALLBACK_DEVANAGARI,

package/dist/{vectorPdfExport-CDMnc_eW.cjs → vectorPdfExport-CVeK--lR.cjs}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jspdf = require("jspdf");
 const svg2pdf_js = require("svg2pdf.js");
 const fabric = require("fabric");
-const index = require("./index-BKJxI43i.cjs");
+const index = require("./index-6nrov1rx.cjs");
 const pdfFonts = require("./pdfFonts-BTj2f465.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -1003,6 +1003,100 @@ function parseInlineSvgStyleDeclarations(styleText) {
     };
   }).filter((x) => !!x);
 }
+function shortPdfDebug(value, max = 180) {
+  if (!value) return null;
+  const str = String(value).replace(/\s+/g, " ").trim();
+  return str.length > max ? `${str.slice(0, max)}…` : str;
+}
+function logSvgGradientClipDiagnostics(stage, svg, context) {
+  try {
+    const gradients = Array.from(svg.querySelectorAll("linearGradient, radialGradient"));
+    const images = Array.from(svg.querySelectorAll("image"));
+    const nestedSvgs = Array.from(svg.querySelectorAll("svg")).filter((node) => node !== svg);
+    const gradientRefs = [];
+    Array.from(svg.querySelectorAll("*")).forEach((el) => {
+      const fill = el.getAttribute("fill") || getInlineStyleValue(el, "fill");
+      const stroke = el.getAttribute("stroke") || getInlineStyleValue(el, "stroke");
+      const fillId = extractGradientIdFromPaint(fill);
+      const strokeId = extractGradientIdFromPaint(stroke);
+      if (!fillId && !strokeId) return;
+      gradientRefs.push({
+        tag: el.tagName,
+        id: el.getAttribute("id"),
+        className: el.getAttribute("class"),
+        fill: shortPdfDebug(fill, 80),
+        stroke: shortPdfDebug(stroke, 80),
+        fillRule: el.getAttribute("fill-rule") || getInlineStyleValue(el, "fill-rule"),
+        transform: shortPdfDebug(el.getAttribute("transform"), 120),
+        dStart: shortPdfDebug(el.getAttribute("d"), 160)
+      });
+    });
+    console.log("[client-pdf-export][gradient-svg-diag]", {
+      stage,
+      ...context,
+      root: {
+        width: svg.getAttribute("width"),
+        height: svg.getAttribute("height"),
+        viewBox: svg.getAttribute("viewBox")
+      },
+      counts: {
+        gradients: gradients.length,
+        gradientRefs: gradientRefs.length,
+        images: images.length,
+        nestedSvgs: nestedSvgs.length,
+        paths: svg.querySelectorAll("path").length,
+        clips: svg.querySelectorAll("clipPath").length,
+        masks: svg.querySelectorAll("mask").length
+      },
+      gradients: gradients.slice(0, 8).map((g) => ({
+        tag: g.tagName,
+        id: g.getAttribute("id"),
+        units: g.getAttribute("gradientUnits"),
+        transform: g.getAttribute("gradientTransform"),
+        x1: g.getAttribute("x1"),
+        y1: g.getAttribute("y1"),
+        x2: g.getAttribute("x2"),
+        y2: g.getAttribute("y2"),
+        stops: Array.from(g.querySelectorAll("stop")).map((s) => ({ offset: s.getAttribute("offset"), color: s.getAttribute("stop-color"), opacity: s.getAttribute("stop-opacity") })).slice(0, 5)
+      })),
+      images: images.slice(0, 8).map((img) => ({
+        id: img.getAttribute("id"),
+        href: shortPdfDebug(getSvgImageHref(img), 220),
+        x: img.getAttribute("x"),
+        y: img.getAttribute("y"),
+        width: img.getAttribute("width"),
+        height: img.getAttribute("height"),
+        transform: shortPdfDebug(img.getAttribute("transform"), 140),
+        clipPath: img.getAttribute("clip-path"),
+        preserveAspectRatio: img.getAttribute("preserveAspectRatio")
+      })),
+      clipPaths: Array.from(svg.querySelectorAll("clipPath")).slice(0, 8).map((clip) => ({
+        id: clip.getAttribute("id"),
+        units: clip.getAttribute("clipPathUnits"),
+        transform: shortPdfDebug(clip.getAttribute("transform"), 140),
+        rects: Array.from(clip.querySelectorAll("rect")).slice(0, 3).map((rect) => ({
+          x: rect.getAttribute("x"),
+          y: rect.getAttribute("y"),
+          width: rect.getAttribute("width"),
+          height: rect.getAttribute("height"),
+          transform: shortPdfDebug(rect.getAttribute("transform"), 140)
+        }))
+      })),
+      nestedSvgs: nestedSvgs.slice(0, 8).map((node) => ({
+        id: node.getAttribute("id"),
+        x: node.getAttribute("x"),
+        y: node.getAttribute("y"),
+        width: node.getAttribute("width"),
+        height: node.getAttribute("height"),
+        viewBox: node.getAttribute("viewBox"),
+        transform: shortPdfDebug(node.getAttribute("transform"), 140)
+      })),
+      gradientRefs: gradientRefs.slice(0, 10)
+    });
+  } catch (err) {
+    console.warn("[client-pdf-export][gradient-svg-diag] failed", { stage, err });
+  }
+}
 function logGradientBindingDiagnostics(svg) {
   const gradientCount = svg.querySelectorAll("linearGradient, radialGradient").length;
   if (gradientCount === 0) return;
@@ -1366,7 +1460,39 @@ function decodeSvgDataUri(href) {
     }
   }
 }
-function inlineNestedSvgImageDataUris(svgString, domParser = new DOMParser()) {
+async function readNestedSvgImageMarkup(href) {
+  if (!href) return null;
+  if (href.startsWith("data:image/svg+xml")) return decodeSvgDataUri(href);
+  if (/\.svg(?:[?#]|$)/i.test(href) || href.startsWith("blob:")) {
+    const urls = [];
+    const addUrl = (url) => {
+      if (url && !urls.includes(url)) urls.push(url);
+    };
+    if (href.startsWith("blob:")) {
+      addUrl(href);
+    } else {
+      addUrl(index.getProxiedImageUrl(href));
+      addUrl(href);
+      try {
+        const proxyUrl = new URL(`${index.API_URL}/image-proxy`);
+        proxyUrl.searchParams.set("url", href);
+        addUrl(proxyUrl.toString());
+      } catch {
+      }
+    }
+    for (const url of urls) {
+      try {
+        const res = await fetch(url, { cache: "no-store", ...index.getImageProxyFetchOptions() });
+        if (!res.ok) continue;
+        const text = await res.text();
+        if (/<svg[\s>]/i.test(text)) return text;
+      } catch {
+      }
+    }
+  }
+  return null;
+}
+async function inlineNestedSvgImageDataUris(svgString, domParser = new DOMParser()) {
   var _a;
   try {
     const doc = domParser.parseFromString(svgString, "image/svg+xml");
@@ -1374,42 +1500,102 @@ function inlineNestedSvgImageDataUris(svgString, domParser = new DOMParser()) {
     const root = doc.documentElement;
     if (!root || root.tagName.toLowerCase() !== "svg") return svgString;
     let changed = false;
+    let inlined = 0;
+    let failed = 0;
     const images = Array.from(doc.querySelectorAll("image"));
-    for (const img of images) {
+    logSvgGradientClipDiagnostics("inline-pass:start", root, { imageCount: images.length });
+    for (const [imageIndex, img] of images.entries()) {
       const href = img.getAttribute("href") || img.getAttributeNS("http://www.w3.org/1999/xlink", "href");
-      if (!href || !href.startsWith("data:image/svg+xml")) continue;
+      if (!href) continue;
       try {
-        const svgContent = decodeSvgDataUri(href);
-        if (!svgContent || !/<svg[\s>]/i.test(svgContent)) continue;
+        const svgContent = await readNestedSvgImageMarkup(href);
+        if (!svgContent || !/<svg[\s>]/i.test(svgContent)) {
+          if (/\.svg(?:[?#]|$)/i.test(href) || href.startsWith("blob:") || href.startsWith("data:image/svg+xml")) {
+            console.warn("[client-pdf-export][gradient-svg-diag] inline source not readable", {
+              imageIndex,
+              href: shortPdfDebug(href, 260),
+              x: img.getAttribute("x"),
+              y: img.getAttribute("y"),
+              width: img.getAttribute("width"),
+              height: img.getAttribute("height"),
+              transform: shortPdfDebug(img.getAttribute("transform"), 160)
+            });
+          }
+          continue;
+        }
         const innerDoc = domParser.parseFromString(svgContent, "image/svg+xml");
         if (innerDoc.querySelector("parsererror")) continue;
         const innerSvg = innerDoc.documentElement;
         if (!innerSvg || innerSvg.tagName.toLowerCase() !== "svg") continue;
+        const sourceId = img.getAttribute("id") || `image-${imageIndex}`;
+        prefixSvgIds(innerSvg, `inline-${sourceId}`);
         const ix = parseFloat(img.getAttribute("x") || "0") || 0;
         const iy = parseFloat(img.getAttribute("y") || "0") || 0;
         const iw = parseFloat(img.getAttribute("width") || "0");
         const ih = parseFloat(img.getAttribute("height") || "0");
-        if (!(iw > 0 && ih > 0)) continue;
-        const nestedSvg = doc.importNode(innerSvg, true);
-        const vb = nestedSvg.getAttribute("viewBox");
-        if (!vb) {
-          nestedSvg.setAttribute("viewBox", `0 0 ${iw} ${ih}`);
+        if (!(iw > 0 && ih > 0)) {
+          console.warn("[client-pdf-export][gradient-svg-diag] inline skipped: image has invalid frame", {
+            imageIndex,
+            href: shortPdfDebug(href, 260),
+            x: img.getAttribute("x"),
+            y: img.getAttribute("y"),
+            width: img.getAttribute("width"),
+            height: img.getAttribute("height"),
+            innerViewBox: innerSvg.getAttribute("viewBox")
+          });
+          continue;
         }
-        nestedSvg.setAttribute("x", "0");
-        nestedSvg.setAttribute("y", "0");
-        nestedSvg.setAttribute("width", String(iw));
-        nestedSvg.setAttribute("height", String(ih));
-        nestedSvg.setAttribute(
-          "preserveAspectRatio",
-          img.getAttribute("preserveAspectRatio") || nestedSvg.getAttribute("preserveAspectRatio") || "xMidYMid meet"
-        );
         const g = doc.createElementNS("http://www.w3.org/2000/svg", "g");
         const existingTransform = img.getAttribute("transform") || "";
+        const vb = (innerSvg.getAttribute("viewBox") || "").trim().split(/[\s,]+/).map((n) => Number.parseFloat(n));
+        const [vbX, vbY, vbW, vbH] = vb.length === 4 && vb.every((n) => Number.isFinite(n)) && vb[2] > 0 && vb[3] > 0 ? vb : [0, 0, iw, ih];
+        const par = img.getAttribute("preserveAspectRatio") || innerSvg.getAttribute("preserveAspectRatio") || "xMidYMid meet";
+        const parParts = par.trim().split(/\s+/).filter(Boolean);
+        const align = parParts[0] === "defer" ? parParts[1] || "xMidYMid" : parParts[0] || "xMidYMid";
+        const meetOrSlice = parParts[0] === "defer" ? parParts[2] || "meet" : parParts[1] || "meet";
+        let sx = iw / vbW;
+        let sy = ih / vbH;
+        let ox = 0;
+        let oy = 0;
+        if (align !== "none") {
+          const s = meetOrSlice === "slice" ? Math.max(sx, sy) : Math.min(sx, sy);
+          sx = s;
+          sy = s;
+          const extraW = iw - vbW * s;
+          const extraH = ih - vbH * s;
+          if (align.includes("xMid")) ox = extraW / 2;
+          else if (align.includes("xMax")) ox = extraW;
+          if (align.includes("YMid")) oy = extraH / 2;
+          else if (align.includes("YMax")) oy = extraH;
+        }
         let transform = existingTransform;
-        transform += `${transform ? " " : ""}translate(${ix},${iy})`;
+        transform += `${transform ? " " : ""}translate(${ix + ox},${iy + oy}) scale(${sx},${sy}) translate(${-vbX},${-vbY})`;
         if (transform) {
           g.setAttribute("transform", transform);
         }
+        logSvgGradientClipDiagnostics("inline-pass:image-inlined", innerSvg, {
+          imageIndex,
+          sourceId,
+          href: shortPdfDebug(href, 260),
+          imageFrame: { x: ix, y: iy, width: iw, height: ih },
+          innerRoot: {
+            width: innerSvg.getAttribute("width"),
+            height: innerSvg.getAttribute("height"),
+            viewBox: innerSvg.getAttribute("viewBox"),
+            preserveAspectRatio: innerSvg.getAttribute("preserveAspectRatio")
+          },
+          appliedTransform: transform
+        });
+        const imageClipPath = img.getAttribute("clip-path") || getInlineStyleValue(img, "clip-path");
+        const dropImageClipPath = isRedundantImageClipPathForInlineSvg(root, imageClipPath, ix, iy, iw, ih);
+        if (dropImageClipPath) {
+          console.log("[client-pdf-export][gradient-svg-diag] dropped redundant inline SVG image clipPath", {
+            imageIndex,
+            sourceId,
+            clipPath: imageClipPath,
+            imageFrame: { x: ix, y: iy, width: iw, height: ih }
+          });
+        }
         const passthroughAttrs = /* @__PURE__ */ new Set([
           "id",
           "class",
@@ -1423,21 +1609,123 @@ function inlineNestedSvgImageDataUris(svgString, domParser = new DOMParser()) {
           "pointer-events"
         ]);
         Array.from(img.attributes).forEach((attr) => {
+          if (dropImageClipPath && attr.name === "clip-path") return;
+          if (dropImageClipPath && attr.name === "style") {
+            const kept = parseInlineSvgStyleDeclarations(attr.value).filter((decl) => decl.key !== "clip-path").map((decl) => `${decl.key}: ${decl.value}`).join("; ");
+            if (kept) g.setAttribute("style", kept);
+            return;
+          }
           if (passthroughAttrs.has(attr.name)) {
             g.setAttribute(attr.name, attr.value);
           }
         });
-        g.appendChild(nestedSvg);
+        for (const child of Array.from(innerSvg.childNodes)) {
+          g.appendChild(doc.importNode(child, true));
+        }
         (_a = img.parentNode) == null ? void 0 : _a.replaceChild(g, img);
         changed = true;
+        inlined++;
       } catch {
+        failed++;
       }
     }
+    if (inlined > 0 || failed > 0) {
+      console.log("[client-pdf-export] nested SVG image inline pass", { inlined, failed, imageCount: images.length, changed });
+      logSvgGradientClipDiagnostics("inline-pass:done", doc.documentElement, { inlined, failed, imageCount: images.length, changed });
+    }
     return changed ? new XMLSerializer().serializeToString(doc.documentElement) : svgString;
   } catch {
     return svgString;
   }
 }
+function parseSvgLength(value, fallback) {
+  if (!value) return fallback;
+  const trimmed = value.trim();
+  if (!trimmed || trimmed.endsWith("%")) return fallback;
+  const parsed = Number.parseFloat(trimmed);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+function isIdentitySvgMatrix(value) {
+  var _a;
+  if (!value) return true;
+  const nums = ((_a = value.match(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi)) == null ? void 0 : _a.map(Number)) ?? [];
+  return nums.length === 6 && Math.abs(nums[0] - 1) < 1e-3 && Math.abs(nums[1]) < 1e-3 && Math.abs(nums[2]) < 1e-3 && Math.abs(nums[3] - 1) < 1e-3 && Math.abs(nums[4]) < 1e-3 && Math.abs(nums[5]) < 1e-3;
+}
+function isRedundantImageClipPathForInlineSvg(root, clipPathRef, ix, iy, iw, ih) {
+  const clipId = extractGradientIdFromPaint(clipPathRef);
+  if (!clipId || !(iw > 0 && ih > 0)) return false;
+  let clip = null;
+  for (const el of root.querySelectorAll("[id]")) {
+    if (el.getAttribute("id") === clipId) {
+      clip = el;
+      break;
+    }
+  }
+  if (!clip || clip.tagName.toLowerCase() !== "clippath") return false;
+  const units = (clip.getAttribute("clipPathUnits") || "userSpaceOnUse").toLowerCase();
+  const rects = Array.from(clip.children).filter((el) => el.tagName.toLowerCase() === "rect");
+  if (rects.length !== 1 || rects[0].parentElement !== clip) return false;
+  const rect = rects[0];
+  if (!isIdentitySvgMatrix(rect.getAttribute("transform"))) return false;
+  const rx = Number.parseFloat(rect.getAttribute("x") || "0") || 0;
+  const ry = Number.parseFloat(rect.getAttribute("y") || "0") || 0;
+  const rw = Number.parseFloat(rect.getAttribute("width") || "0");
+  const rh = Number.parseFloat(rect.getAttribute("height") || "0");
+  if (!(rw > 0 && rh > 0)) return false;
+  const near = (a, b) => Math.abs(a - b) <= Math.max(1, Math.max(Math.abs(a), Math.abs(b)) * 0.01);
+  if (units === "objectboundingbox") return near(rx, 0) && near(ry, 0) && near(rw, 1) && near(rh, 1);
+  return near(rx, ix) && near(ry, iy) && near(rw, iw) && near(rh, ih);
+}
+function flattenNestedSvgViewports(rootSvg) {
+  const nestedSvgs = Array.from(rootSvg.querySelectorAll("svg")).filter((svg) => svg !== rootSvg).reverse();
+  if (nestedSvgs.length === 0) return;
+  let flattened = 0;
+  for (const nestedSvg of nestedSvgs) {
+    const parent = nestedSvg.parentNode;
+    const doc = nestedSvg.ownerDocument;
+    if (!parent || !doc) continue;
+    const vb = (nestedSvg.getAttribute("viewBox") || "").trim().split(/[\s,]+/).map((n) => Number.parseFloat(n));
+    const hasViewBox = vb.length === 4 && vb.every((n) => Number.isFinite(n)) && vb[2] > 0 && vb[3] > 0;
+    const [vbX, vbY, vbW, vbH] = hasViewBox ? vb : [0, 0, 0, 0];
+    const width = parseSvgLength(nestedSvg.getAttribute("width"), hasViewBox ? vbW : 0);
+    const height = parseSvgLength(nestedSvg.getAttribute("height"), hasViewBox ? vbH : 0);
+    if (!(width > 0 && height > 0)) continue;
+    const x = Number.parseFloat(nestedSvg.getAttribute("x") || "0") || 0;
+    const y = Number.parseFloat(nestedSvg.getAttribute("y") || "0") || 0;
+    const par = nestedSvg.getAttribute("preserveAspectRatio") || "xMidYMid meet";
+    const parParts = par.trim().split(/\s+/).filter(Boolean);
+    const align = parParts[0] === "defer" ? parParts[1] || "xMidYMid" : parParts[0] || "xMidYMid";
+    const meetOrSlice = parParts[0] === "defer" ? parParts[2] || "meet" : parParts[1] || "meet";
+    let sx = hasViewBox ? width / vbW : 1;
+    let sy = hasViewBox ? height / vbH : 1;
+    let ox = 0;
+    let oy = 0;
+    if (hasViewBox && align !== "none") {
+      const s = meetOrSlice === "slice" ? Math.max(sx, sy) : Math.min(sx, sy);
+      sx = s;
+      sy = s;
+      const extraW = width - vbW * s;
+      const extraH = height - vbH * s;
+      if (align.includes("xMid")) ox = extraW / 2;
+      else if (align.includes("xMax")) ox = extraW;
+      if (align.includes("YMid")) oy = extraH / 2;
+      else if (align.includes("YMax")) oy = extraH;
+    }
+    const g = doc.createElementNS("http://www.w3.org/2000/svg", "g");
+    const existingTransform = nestedSvg.getAttribute("transform") || "";
+    const viewBoxTransform = hasViewBox ? `translate(${x + ox},${y + oy}) scale(${sx},${sy}) translate(${-vbX},${-vbY})` : `translate(${x},${y})`;
+    g.setAttribute("transform", `${existingTransform}${existingTransform ? " " : ""}${viewBoxTransform}`);
+    for (const attr of Array.from(nestedSvg.attributes)) {
+      if (["id", "class", "style", "opacity", "display", "visibility", "clip-path", "mask", "filter", "pointer-events"].includes(attr.name)) {
+        g.setAttribute(attr.name, attr.value);
+      }
+    }
+    for (const child of Array.from(nestedSvg.childNodes)) g.appendChild(child);
+    parent.replaceChild(g, nestedSvg);
+    flattened++;
+  }
+  if (flattened > 0) console.log("[client-pdf-export] flattened nested SVG viewport(s)", { flattened });
+}
 function hasInvalidSvgNumericToken(value) {
   return typeof value === "string" && /\b(?:NaN|-?Infinity|undefined|null)\b/.test(value);
 }
@@ -2319,11 +2607,12 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
   var _a;
   try {
     const parser = new DOMParser();
-    const processedSvg = inlineNestedSvgImageDataUris(rawSvg, parser);
+    const processedSvg = await inlineNestedSvgImageDataUris(rawSvg, parser);
     const doc = parser.parseFromString(processedSvg, "image/svg+xml");
     if (doc.querySelector("parsererror")) return null;
     const svg = doc.documentElement;
     if (!svg || svg.tagName.toLowerCase() !== "svg") return null;
+    logSvgGradientClipDiagnostics("prepare:parsed-after-inline", svg, { pageKey, pageWidth, pageHeight, processedLength: processedSvg.length });
     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     if (/xlink:href/i.test(processedSvg) && !svg.getAttribute("xmlns:xlink")) {
       svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
@@ -2333,14 +2622,18 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     svg.setAttribute("viewBox", `0 0 ${pageWidth} ${pageHeight}`);
     sanitizeSvgTreeForPdf(svg);
     normalizeSvgViewBoxOrigin(svg);
+    flattenNestedSvgViewports(svg);
+    logSvgGradientClipDiagnostics("prepare:after-flatten-nested-viewports", svg, { pageKey, pageWidth, pageHeight });
     disambiguateNestedSvgIds(svg);
     expandSvgUseElements(svg, pageKey);
     let svgToDraw = normalizeSvgExplicitColors(svg);
+    logSvgGradientClipDiagnostics("prepare:after-explicit-colors", svgToDraw, { pageKey, pageWidth, pageHeight });
     inlineComputedStyles(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     normalizeSvgGradientStopOffsets(svgToDraw);
     expandSvgGradientHrefs(svgToDraw);
     prefixSvgIds(svgToDraw, pageKey);
+    logSvgGradientClipDiagnostics("prepare:after-gradient-normalize-prefix", svgToDraw, { pageKey, pageWidth, pageHeight });
     bakeGroupOpacityIntoChildren(svgToDraw);
     stripSuspiciousFullPageOverlayNodes(svgToDraw);
     if (options == null ? void 0 : options.stripPageBackground) {
@@ -2362,8 +2655,10 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     const rewritten = rewriteSvgFontsForJsPDFWithSourceMeta(new XMLSerializer().serializeToString(svgToDraw));
     const rewrittenDoc = parser.parseFromString(rewritten, "image/svg+xml");
     if (!rewrittenDoc.querySelector("parsererror") && ((_a = rewrittenDoc.documentElement) == null ? void 0 : _a.tagName.toLowerCase()) === "svg") {
+      logSvgGradientClipDiagnostics("prepare:final-before-svg2pdf", rewrittenDoc.documentElement, { pageKey, pageWidth, pageHeight, rewrittenLength: rewritten.length });
       return rewrittenDoc.documentElement;
     }
+    logSvgGradientClipDiagnostics("prepare:final-before-svg2pdf", svgToDraw, { pageKey, pageWidth, pageHeight });
     return svgToDraw;
   } catch {
     return null;
@@ -2787,7 +3082,7 @@ function resolveSvgGradientRefsToSolid(svg, elementId) {
 function disambiguateNestedSvgIds(rootSvg) {
   const nestedSvgs = Array.from(rootSvg.querySelectorAll("svg"));
   const toProcess = nestedSvgs.filter((s) => s !== rootSvg);
-  if (toProcess.length < 2) return;
+  if (toProcess.length === 0) return;
   toProcess.forEach((nested, idx) => {
     prefixSvgIds(nested, `n${idx}`);
   });
@@ -2902,6 +3197,8 @@ function normalizeSvgViewBoxOrigin(svg) {
   if (parts.length !== 4) return;
   const [vx, vy, vw, vh] = parts;
   if (vw <= 0 || vh <= 0) return;
+  svg.setAttribute("width", String(vw));
+  svg.setAttribute("height", String(vh));
   if (Math.abs(vx) < 1e-3 && Math.abs(vy) < 1e-3) return;
   const doc = svg.ownerDocument;
   if (!doc) return;
@@ -2974,7 +3271,7 @@ async function fetchSvgAsElement(imageUrl, colorMap) {
 async function getRecoloredSvgDataUrl(imageUrl, colorMap) {
   if (!colorMap || Object.keys(colorMap).length === 0) return null;
   try {
-    const { getNormalizedSvgUrl } = await Promise.resolve().then(() => require("./index-BKJxI43i.cjs")).then((n) => n.canvasImageLoader);
+    const { getNormalizedSvgUrl } = await Promise.resolve().then(() => require("./index-6nrov1rx.cjs")).then((n) => n.canvasImageLoader);
     return await getNormalizedSvgUrl(imageUrl, colorMap);
   } catch {
     return null;
@@ -3783,7 +4080,7 @@ async function fetchImageAsBase64(imageUrl, opts = {}) {
     }
     let fetchUrl = imageUrl;
     if (imageUrl.startsWith("http://") || imageUrl.startsWith("https://")) {
-      const { isPrivateUrl } = await Promise.resolve().then(() => require("./index-BKJxI43i.cjs")).then((n) => n.canvasImageLoader);
+      const { isPrivateUrl } = await Promise.resolve().then(() => require("./index-6nrov1rx.cjs")).then((n) => n.canvasImageLoader);
       if (isPrivateUrl(imageUrl)) return null;
       const proxyUrl = new URL(`${index.API_URL}/image-proxy`);
       proxyUrl.searchParams.set("url", imageUrl);
@@ -5288,9 +5585,8 @@ async function exportFabricCanvasToVectorPdf(_fabricCanvas, options) {
   const orientation = width > height ? "landscape" : "portrait";
   const pdf = new jspdf.jsPDF({
     orientation,
-    unit: "px",
+    unit: "pt",
     format: [width, height],
-    hotfixes: ["px_scaling"],
     compress: true
   });
   if (title) {
@@ -5467,9 +5763,8 @@ async function __exportMultiPagePdfInner(pages, options) {
   const orientation = firstPage.width > firstPage.height ? "landscape" : "portrait";
   const pdf = new jspdf.jsPDF({
     orientation,
-    unit: "px",
+    unit: "pt",
     format: [firstPage.width, firstPage.height],
-    hotfixes: ["px_scaling"],
     // Always keep PDF object/stream compression on. The UI's image-compression
     // switch controls raster resampling/JPEG quality, not lossless PDF packing;
     // disabling this made "uncompressed image" PDFs balloon with no quality gain.
@@ -5882,4 +6177,4 @@ exports.exportMultiPagePdf = exportMultiPagePdf;
 exports.logTextMeasurementDiagnostic = logTextMeasurementDiagnostic;
 exports.preparePagesForExport = preparePagesForExport;
 exports.rewriteSvgFontsForJsPDFWithSourceMeta = rewriteSvgFontsForJsPDFWithSourceMeta;
-//# sourceMappingURL=vectorPdfExport-CDMnc_eW.cjs.map
+//# sourceMappingURL=vectorPdfExport-CVeK--lR.cjs.map