@pixldocs/canvas-renderer 0.5.77 → 0.5.79

package/dist/index.d.ts

@@ -256,7 +256,7 @@ export declare function normalizeFontFamily(fontStack: string): string;
  * Package version banner. Bump alongside package.json so we can confirm
  * (via browser:log) that the deployed bundle matches the expected build.
  */
-export declare const PACKAGE_VERSION = "0.5.77";
+export declare const PACKAGE_VERSION = "0.5.79";
 
 export declare interface PageSettings {
     backgroundColor?: string;

package/dist/index.js

@@ -11645,6 +11645,232 @@ function applyContentBoundsPagination(config) {
   if (!mutated) return config;
   return { ...config, pages: resultPages };
 }
+function normalizeFontFamily(fontStack) {
+  const first = fontStack.split(",")[0].trim();
+  return first.replace(/^['"]|['"]$/g, "");
+}
+const loadedFonts = /* @__PURE__ */ new Set();
+const loadingPromises = /* @__PURE__ */ new Map();
+function withTimeout(promise, timeoutMs = 4e3) {
+  let timeoutId;
+  return Promise.race([
+    promise,
+    new Promise((resolve) => {
+      timeoutId = setTimeout(resolve, timeoutMs);
+    })
+  ]).finally(() => {
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+}
+async function loadGoogleFontCSS(rawFontFamily) {
+  if (!rawFontFamily || typeof document === "undefined") return;
+  const fontFamily = normalizeFontFamily(rawFontFamily);
+  if (!fontFamily) return;
+  if (loadedFonts.has(fontFamily)) return;
+  const existing = loadingPromises.get(fontFamily);
+  if (existing) return existing;
+  const promise = (async () => {
+    try {
+      const encoded = encodeURIComponent(fontFamily);
+      const url = `https://fonts.googleapis.com/css?family=${encoded}:300,400,500,600,700&display=swap`;
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = url;
+      link.crossOrigin = "anonymous";
+      await new Promise((resolve, reject) => {
+        link.onload = () => resolve();
+        link.onerror = () => reject(new Error(`Failed to load font: ${fontFamily}`));
+        document.head.appendChild(link);
+      });
+      loadedFonts.add(fontFamily);
+    } catch (e) {
+      console.warn(`[@pixldocs/canvas-renderer] Font load failed: ${fontFamily}`, e);
+    }
+  })();
+  loadingPromises.set(fontFamily, promise);
+  await promise;
+  loadingPromises.delete(fontFamily);
+}
+function collectFontsFromConfig(config) {
+  var _a;
+  const fonts = /* @__PURE__ */ new Set();
+  fonts.add("Open Sans");
+  fonts.add("Hind");
+  function walk(nodes) {
+    var _a2;
+    if (!nodes) return;
+    for (const node of nodes) {
+      if (node.fontFamily) fonts.add(normalizeFontFamily(node.fontFamily));
+      if ((_a2 = node.smartProps) == null ? void 0 : _a2.fontFamily) fonts.add(normalizeFontFamily(node.smartProps.fontFamily));
+      if (node.styles && Array.isArray(node.styles)) {
+        for (const lineStyle of node.styles) {
+          if (lineStyle && typeof lineStyle === "object") {
+            for (const charStyle of Object.values(lineStyle)) {
+              if (charStyle == null ? void 0 : charStyle.fontFamily) fonts.add(normalizeFontFamily(charStyle.fontFamily));
+            }
+          }
+        }
+      }
+      if (node.children) walk(node.children);
+    }
+  }
+  for (const page of config.pages || []) {
+    walk(page.children || []);
+  }
+  if ((_a = config.themeConfig) == null ? void 0 : _a.variables) {
+    for (const def of Object.values(config.themeConfig.variables)) {
+      if (def.value && typeof def.value === "string" && !def.value.startsWith("#") && !def.value.startsWith("rgb")) {
+        if (def.label && /font/i.test(def.label)) {
+          fonts.add(normalizeFontFamily(def.value));
+        }
+      }
+    }
+  }
+  return fonts;
+}
+function collectFontDescriptorsFromConfig(config) {
+  var _a;
+  const seen = /* @__PURE__ */ new Set();
+  const descriptors = [];
+  function add(family, weight, style) {
+    const f = normalizeFontFamily(family);
+    if (!f) return;
+    const w = weight ?? 400;
+    const s = style ?? "normal";
+    const key = `${f}|${w}|${s}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    descriptors.push({ family: f, weight: w, style: s });
+  }
+  function walk(nodes) {
+    var _a2;
+    if (!nodes) return;
+    for (const node of nodes) {
+      if (node.fontFamily) {
+        add(node.fontFamily, node.fontWeight, node.fontStyle);
+        if (node.type === "text") {
+          for (const w of [300, 400, 500, 600, 700]) {
+            add(node.fontFamily, w, node.fontStyle);
+          }
+        }
+      }
+      if ((_a2 = node.smartProps) == null ? void 0 : _a2.fontFamily) {
+        add(node.smartProps.fontFamily, node.smartProps.fontWeight, node.smartProps.fontStyle);
+      }
+      if (node.styles) {
+        const styleEntries = Array.isArray(node.styles) ? node.styles : Object.values(node.styles);
+        for (const lineStyle of styleEntries) {
+          if (lineStyle && typeof lineStyle === "object") {
+            for (const charStyle of Object.values(lineStyle)) {
+              if (charStyle == null ? void 0 : charStyle.fontFamily) {
+                add(charStyle.fontFamily, charStyle.fontWeight, charStyle.fontStyle);
+              }
+            }
+          }
+        }
+      }
+      if (node.children) walk(node.children);
+    }
+  }
+  add("Open Sans", 400, "normal");
+  add("Hind", 400, "normal");
+  add("Hind", 700, "normal");
+  for (const page of config.pages || []) {
+    walk(page.children || []);
+  }
+  if ((_a = config.themeConfig) == null ? void 0 : _a.variables) {
+    for (const def of Object.values(config.themeConfig.variables)) {
+      if (def.value && typeof def.value === "string" && !def.value.startsWith("#") && !def.value.startsWith("rgb")) {
+        if (def.label && /font/i.test(def.label)) {
+          add(def.value);
+        }
+      }
+    }
+  }
+  return descriptors;
+}
+async function ensureFontsForResolvedConfig(config) {
+  if (typeof document === "undefined") return;
+  const descriptors = collectFontDescriptorsFromConfig(config);
+  const families = new Set(descriptors.map((d) => d.family));
+  await withTimeout(Promise.all([...families].map((f) => loadGoogleFontCSS(f))), 3500);
+  if (document.fonts) {
+    descriptors.forEach((d) => {
+      const stylePrefix = d.style === "italic" ? "italic " : "";
+      const weightStr = String(d.weight);
+      const spec = `${stylePrefix}${weightStr} 16px "${d.family}"`;
+      document.fonts.load(spec).catch(() => {
+      });
+    });
+  }
+}
+function configHasAutoShrinkText$1(config) {
+  var _a;
+  if (!((_a = config == null ? void 0 : config.pages) == null ? void 0 : _a.length)) return false;
+  const walk = (nodes) => {
+    for (const node of nodes || []) {
+      if (!node) continue;
+      if (node.type === "text" && node.overflowPolicy === "auto-shrink") return true;
+      if (Array.isArray(node.children) && node.children.length && walk(node.children)) return true;
+    }
+    return false;
+  };
+  for (const page of config.pages) {
+    if (walk(page.children || [])) return true;
+  }
+  return false;
+}
+async function awaitFontsForConfig(config, maxWaitMs) {
+  if (typeof document === "undefined" || !document.fonts) return;
+  await ensureFontsForResolvedConfig(config);
+  const descriptors = collectFontDescriptorsFromConfig(config);
+  if (descriptors.length === 0) return;
+  const loads = Promise.all(
+    descriptors.map((d) => {
+      const stylePrefix = d.style === "italic" ? "italic " : "";
+      const spec = `${stylePrefix}${d.weight} 16px "${d.family}"`;
+      return document.fonts.load(spec).catch(() => []);
+    })
+  ).then(() => void 0);
+  await Promise.race([
+    loads,
+    new Promise((resolve) => setTimeout(resolve, maxWaitMs))
+  ]);
+  await Promise.race([
+    document.fonts.ready.catch(() => void 0).then(() => void 0),
+    new Promise((r) => setTimeout(r, Math.min(500, maxWaitMs)))
+  ]);
+  const checkSpecs = [];
+  for (const d of descriptors) {
+    const stylePrefix = d.style === "italic" ? "italic " : "";
+    checkSpecs.push(`${stylePrefix}${d.weight} 16px "${d.family}"`);
+  }
+  const startedAt = Date.now();
+  const pollBudget = Math.min(maxWaitMs, 2500);
+  const allReady = () => {
+    for (const spec of checkSpecs) {
+      try {
+        if (!document.fonts.check(spec)) return false;
+      } catch {
+      }
+    }
+    return true;
+  };
+  while (!allReady() && Date.now() - startedAt < pollBudget) {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  }
+  await new Promise(
+    (resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+  );
+}
+async function awaitFontsBeforeTextReflow(config) {
+  if (typeof document === "undefined" || !configHasAutoShrinkText$1(config)) return;
+  try {
+    await awaitFontsForConfig(config, 4e3);
+  } catch (error) {
+    console.warn("[@pixldocs/canvas-renderer] Font wait before text reflow failed:", error);
+  }
+}
 function repeatablePageToSection(page) {
   return {
     id: page.id,
@@ -11838,6 +12064,7 @@ async function resolveTemplateData(options) {
     }
   }
   const repeatablePagesInput = deriveRepeatablePagesFromTemplate(config, inlineFormSchema, mergedFormData);
+  await awaitFontsBeforeTextReflow(config);
   const resolvedConfig = applyFormDataToConfig(
     config,
     mappings,
@@ -11982,6 +12209,7 @@ async function resolveFromForm(options) {
     };
     collectFormats(formConfig.sections);
   }
+  await awaitFontsBeforeTextReflow(templateConfig);
   let resolvedConfig = applyFormDataToConfig(
     templateConfig,
     mappings,
@@ -12160,224 +12388,6 @@ function paintRepeatableSections(config, repeatableSections) {
     }
   }
 }
-function normalizeFontFamily(fontStack) {
-  const first = fontStack.split(",")[0].trim();
-  return first.replace(/^['"]|['"]$/g, "");
-}
-const loadedFonts = /* @__PURE__ */ new Set();
-const loadingPromises = /* @__PURE__ */ new Map();
-function withTimeout(promise, timeoutMs = 4e3) {
-  let timeoutId;
-  return Promise.race([
-    promise,
-    new Promise((resolve) => {
-      timeoutId = setTimeout(resolve, timeoutMs);
-    })
-  ]).finally(() => {
-    if (timeoutId) clearTimeout(timeoutId);
-  });
-}
-async function loadGoogleFontCSS(rawFontFamily) {
-  if (!rawFontFamily || typeof document === "undefined") return;
-  const fontFamily = normalizeFontFamily(rawFontFamily);
-  if (!fontFamily) return;
-  if (loadedFonts.has(fontFamily)) return;
-  const existing = loadingPromises.get(fontFamily);
-  if (existing) return existing;
-  const promise = (async () => {
-    try {
-      const encoded = encodeURIComponent(fontFamily);
-      const url = `https://fonts.googleapis.com/css?family=${encoded}:300,400,500,600,700&display=swap`;
-      const link = document.createElement("link");
-      link.rel = "stylesheet";
-      link.href = url;
-      link.crossOrigin = "anonymous";
-      await new Promise((resolve, reject) => {
-        link.onload = () => resolve();
-        link.onerror = () => reject(new Error(`Failed to load font: ${fontFamily}`));
-        document.head.appendChild(link);
-      });
-      loadedFonts.add(fontFamily);
-    } catch (e) {
-      console.warn(`[@pixldocs/canvas-renderer] Font load failed: ${fontFamily}`, e);
-    }
-  })();
-  loadingPromises.set(fontFamily, promise);
-  await promise;
-  loadingPromises.delete(fontFamily);
-}
-function collectFontsFromConfig(config) {
-  var _a;
-  const fonts = /* @__PURE__ */ new Set();
-  fonts.add("Open Sans");
-  fonts.add("Hind");
-  function walk(nodes) {
-    var _a2;
-    if (!nodes) return;
-    for (const node of nodes) {
-      if (node.fontFamily) fonts.add(normalizeFontFamily(node.fontFamily));
-      if ((_a2 = node.smartProps) == null ? void 0 : _a2.fontFamily) fonts.add(normalizeFontFamily(node.smartProps.fontFamily));
-      if (node.styles && Array.isArray(node.styles)) {
-        for (const lineStyle of node.styles) {
-          if (lineStyle && typeof lineStyle === "object") {
-            for (const charStyle of Object.values(lineStyle)) {
-              if (charStyle == null ? void 0 : charStyle.fontFamily) fonts.add(normalizeFontFamily(charStyle.fontFamily));
-            }
-          }
-        }
-      }
-      if (node.children) walk(node.children);
-    }
-  }
-  for (const page of config.pages || []) {
-    walk(page.children || []);
-  }
-  if ((_a = config.themeConfig) == null ? void 0 : _a.variables) {
-    for (const def of Object.values(config.themeConfig.variables)) {
-      if (def.value && typeof def.value === "string" && !def.value.startsWith("#") && !def.value.startsWith("rgb")) {
-        if (def.label && /font/i.test(def.label)) {
-          fonts.add(normalizeFontFamily(def.value));
-        }
-      }
-    }
-  }
-  return fonts;
-}
-function collectFontDescriptorsFromConfig(config) {
-  var _a;
-  const seen = /* @__PURE__ */ new Set();
-  const descriptors = [];
-  function add(family, weight, style) {
-    const f = normalizeFontFamily(family);
-    if (!f) return;
-    const w = weight ?? 400;
-    const s = style ?? "normal";
-    const key = `${f}|${w}|${s}`;
-    if (seen.has(key)) return;
-    seen.add(key);
-    descriptors.push({ family: f, weight: w, style: s });
-  }
-  function walk(nodes) {
-    var _a2;
-    if (!nodes) return;
-    for (const node of nodes) {
-      if (node.fontFamily) {
-        add(node.fontFamily, node.fontWeight, node.fontStyle);
-        if (node.type === "text") {
-          for (const w of [300, 400, 500, 600, 700]) {
-            add(node.fontFamily, w, node.fontStyle);
-          }
-        }
-      }
-      if ((_a2 = node.smartProps) == null ? void 0 : _a2.fontFamily) {
-        add(node.smartProps.fontFamily, node.smartProps.fontWeight, node.smartProps.fontStyle);
-      }
-      if (node.styles) {
-        const styleEntries = Array.isArray(node.styles) ? node.styles : Object.values(node.styles);
-        for (const lineStyle of styleEntries) {
-          if (lineStyle && typeof lineStyle === "object") {
-            for (const charStyle of Object.values(lineStyle)) {
-              if (charStyle == null ? void 0 : charStyle.fontFamily) {
-                add(charStyle.fontFamily, charStyle.fontWeight, charStyle.fontStyle);
-              }
-            }
-          }
-        }
-      }
-      if (node.children) walk(node.children);
-    }
-  }
-  add("Open Sans", 400, "normal");
-  add("Hind", 400, "normal");
-  add("Hind", 700, "normal");
-  for (const page of config.pages || []) {
-    walk(page.children || []);
-  }
-  if ((_a = config.themeConfig) == null ? void 0 : _a.variables) {
-    for (const def of Object.values(config.themeConfig.variables)) {
-      if (def.value && typeof def.value === "string" && !def.value.startsWith("#") && !def.value.startsWith("rgb")) {
-        if (def.label && /font/i.test(def.label)) {
-          add(def.value);
-        }
-      }
-    }
-  }
-  return descriptors;
-}
-async function ensureFontsForResolvedConfig(config) {
-  if (typeof document === "undefined") return;
-  const descriptors = collectFontDescriptorsFromConfig(config);
-  const families = new Set(descriptors.map((d) => d.family));
-  await withTimeout(Promise.all([...families].map((f) => loadGoogleFontCSS(f))), 3500);
-  if (document.fonts) {
-    descriptors.forEach((d) => {
-      const stylePrefix = d.style === "italic" ? "italic " : "";
-      const weightStr = String(d.weight);
-      const spec = `${stylePrefix}${weightStr} 16px "${d.family}"`;
-      document.fonts.load(spec).catch(() => {
-      });
-    });
-  }
-}
-function configHasAutoShrinkText$1(config) {
-  var _a;
-  if (!((_a = config == null ? void 0 : config.pages) == null ? void 0 : _a.length)) return false;
-  const walk = (nodes) => {
-    for (const node of nodes || []) {
-      if (!node) continue;
-      if (node.type === "text" && node.overflowPolicy === "auto-shrink") return true;
-      if (Array.isArray(node.children) && node.children.length && walk(node.children)) return true;
-    }
-    return false;
-  };
-  for (const page of config.pages) {
-    if (walk(page.children || [])) return true;
-  }
-  return false;
-}
-async function awaitFontsForConfig(config, maxWaitMs) {
-  if (typeof document === "undefined" || !document.fonts) return;
-  await ensureFontsForResolvedConfig(config);
-  const descriptors = collectFontDescriptorsFromConfig(config);
-  if (descriptors.length === 0) return;
-  const loads = Promise.all(
-    descriptors.map((d) => {
-      const stylePrefix = d.style === "italic" ? "italic " : "";
-      const spec = `${stylePrefix}${d.weight} 16px "${d.family}"`;
-      return document.fonts.load(spec).catch(() => []);
-    })
-  ).then(() => void 0);
-  await Promise.race([
-    loads,
-    new Promise((resolve) => setTimeout(resolve, maxWaitMs))
-  ]);
-  await Promise.race([
-    document.fonts.ready.catch(() => void 0).then(() => void 0),
-    new Promise((r) => setTimeout(r, Math.min(500, maxWaitMs)))
-  ]);
-  const checkSpecs = [];
-  for (const d of descriptors) {
-    const stylePrefix = d.style === "italic" ? "italic " : "";
-    checkSpecs.push(`${stylePrefix}${d.weight} 16px "${d.family}"`);
-  }
-  const startedAt = Date.now();
-  const pollBudget = Math.min(maxWaitMs, 2500);
-  const allReady = () => {
-    for (const spec of checkSpecs) {
-      try {
-        if (!document.fonts.check(spec)) return false;
-      } catch {
-      }
-    }
-    return true;
-  };
-  while (!allReady() && Date.now() - startedAt < pollBudget) {
-    await new Promise((resolve) => setTimeout(resolve, 50));
-  }
-  await new Promise(
-    (resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
-  );
-}
 const PREVIEW_DEBUG_PREFIX = "[canvas-renderer][preview-debug]";
 function countUnderlinedNodes(config) {
   var _a;
@@ -12568,7 +12578,7 @@ function PixldocsPreview(props) {
     !canvasSettled && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
-const PACKAGE_VERSION = "0.5.77";
+const PACKAGE_VERSION = "0.5.79";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -15478,6 +15488,25 @@ async function convertTextDecorationsToLines(svg) {
     }
   }
 }
+async function convertSvgTextDecorationsToLinesString(svgStr) {
+  if (typeof DOMParser === "undefined" || typeof XMLSerializer === "undefined") {
+    return svgStr;
+  }
+  if (!/text-decoration/i.test(svgStr) && !/underline/i.test(svgStr)) {
+    return svgStr;
+  }
+  try {
+    const parser = new DOMParser();
+    const docEl = parser.parseFromString(svgStr, "image/svg+xml");
+    const rootSvg = docEl.documentElement;
+    if (!rootSvg) return svgStr;
+    await convertTextDecorationsToLines(rootSvg);
+    const serializer = new XMLSerializer();
+    return serializer.serializeToString(rootSvg);
+  } catch {
+    return svgStr;
+  }
+}
 async function rasterizeShadowMarkers(svg) {
   var _a, _b, _c, _d, _e;
   if (typeof window === "undefined" || typeof document === "undefined") return;
@@ -15746,6 +15775,14 @@ async function assemblePdfFromSvgs(svgResults, options = {}) {
     const shouldStripBg = stripPageBackground ?? hasGradient;
     const shouldOutlineText = options.outlineText !== false;
     let pageSvg = page.svg;
+    try {
+      pageSvg = await convertSvgTextDecorationsToLinesString(pageSvg);
+    } catch (underlineErr) {
+      console.warn(
+        "[canvas-renderer][pdf] underline-to-line conversion failed (raw stage):",
+        underlineErr
+      );
+    }
     if (shouldOutlineText) {
       try {
         const { convertAllTextToPath } = await import("./svgTextToPath-BP0Kppla.js");