@pixldocs/canvas-renderer 0.3.11 → 0.3.13

package/dist/index.d.ts

@@ -36,6 +36,8 @@ export declare interface CanvasSize {
     height: number;
 }
 
+export declare function collectFontDescriptorsFromConfig(config: TemplateConfig): FontDescriptor[];
+
 /**
  * Collect all font families used in a template config.
  */
@@ -52,6 +54,35 @@ export declare interface DynamicField {
     [key: string]: any;
 }
 
+/**
+ * Ensure all fonts required by a fully-resolved TemplateConfig are loaded
+ * and available to Fabric/Canvas before rendering.
+ *
+ * This is the **single API** consumers (and the renderer internally) should
+ * call to guarantee font parity with EC2 `/render-from-form`.
+ *
+ * It:
+ * 1. Walks ALL text nodes (including clones/repeatables) collecting
+ *    fontFamily + fontWeight + fontStyle.
+ * 2. Loads each unique family via Google Fonts CSS v1 (idempotent).
+ * 3. Explicitly loads each weight+style combo via `document.fonts.load()`.
+ * 4. Awaits `document.fonts.ready` so Fabric never paints with fallback faces.
+ *
+ * Idempotent — safe to call multiple times for the same config.
+ */
+export declare function ensureFontsForResolvedConfig(config: TemplateConfig): Promise<void>;
+
+/**
+ * Walk a fully-resolved TemplateConfig and collect every unique
+ * { fontFamily, fontWeight, fontStyle } tuple from all text nodes
+ * (including clones, repeatable children, and per-character Fabric styles).
+ */
+export declare interface FontDescriptor {
+    family: string;
+    weight: number | string;
+    style: string;
+}
+
 export { InferredSection }
 
 /**

package/dist/index.js

@@ -10462,9 +10462,8 @@ async function loadGoogleFontCSS(rawFontFamily) {
         loadedFonts.add(fontFamily);
         return;
       }
-      const weights = "100;200;300;400;500;600;700;800;900";
       const encoded = encodeURIComponent(fontFamily);
-      const url = `https://fonts.googleapis.com/css2?family=${encoded}:ital,wght@0,${weights};1,${weights}&display=swap`;
+      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;
@@ -10497,6 +10496,15 @@ function collectFontsFromConfig(config) {
     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);
     }
   }
@@ -10514,6 +10522,76 @@ function collectFontsFromConfig(config) {
   }
   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 ((_a2 = node.smartProps) == null ? void 0 : _a2.fontFamily) {
+        add(node.smartProps.fontFamily, node.smartProps.fontWeight, node.smartProps.fontStyle);
+      }
+      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) {
+                add(charStyle.fontFamily, charStyle.fontWeight, charStyle.fontStyle);
+              }
+            }
+          }
+        }
+      }
+      if (node.children) walk(node.children);
+    }
+  }
+  add("Open Sans", 400, "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 Promise.all([...families].map((f) => loadGoogleFontCSS(f)));
+  if (document.fonts) {
+    const loadPromises = descriptors.map((d) => {
+      const stylePrefix = d.style === "italic" ? "italic " : "";
+      const weightStr = String(d.weight);
+      const spec = `${stylePrefix}${weightStr} 16px "${d.family}"`;
+      return document.fonts.load(spec).catch(() => {
+      });
+    });
+    await Promise.all(loadPromises);
+    await document.fonts.ready;
+  }
+}
 class PixldocsRenderer {
   constructor(config) {
     __publicField(this, "config");
@@ -10534,8 +10612,7 @@ class PixldocsRenderer {
     if (!page) {
       throw new Error(`Page index ${pageIndex} not found (template has ${templateConfig.pages.length} pages)`);
     }
-    const fonts = collectFontsFromConfig(templateConfig);
-    await Promise.all([...fonts].map((f) => loadGoogleFontCSS(f)));
+    await ensureFontsForResolvedConfig(templateConfig);
     const { setPackageApiUrl: setPackageApiUrl2 } = await Promise.resolve().then(() => appApi);
     setPackageApiUrl2(this.config.imageProxyUrl);
     const dataUrl = await this.renderPageViaPreviewCanvas(
@@ -10763,7 +10840,9 @@ export {
   PixldocsPreview,
   PixldocsRenderer,
   applyThemeToConfig,
+  collectFontDescriptorsFromConfig,
   collectFontsFromConfig,
+  ensureFontsForResolvedConfig,
   loadGoogleFontCSS,
   normalizeFontFamily,
   resolveFromForm,