@pixldocs/canvas-renderer 0.3.13 → 0.3.15

package/dist/index.cjs

@@ -10388,79 +10388,6 @@ function paintRepeatableSections(config, repeatableSections) {
     }
   }
 }
-function PixldocsPreview(props) {
-  const {
-    pageIndex = 0,
-    zoom = 1,
-    absoluteZoom = false,
-    imageProxyUrl,
-    className,
-    style,
-    onDynamicFieldClick,
-    onReady,
-    onError
-  } = props;
-  react.useEffect(() => {
-    setPackageApiUrl(imageProxyUrl);
-  }, [imageProxyUrl]);
-  const [resolvedConfig, setResolvedConfig] = react.useState(null);
-  const [isLoading, setIsLoading] = react.useState(false);
-  const isResolveMode = !("config" in props && props.config);
-  react.useEffect(() => {
-    if (!isResolveMode) {
-      setResolvedConfig(null);
-      return;
-    }
-    const p = props;
-    if (!p.templateId || !p.formSchemaId || !p.supabaseUrl || !p.supabaseAnonKey) return;
-    let cancelled = false;
-    setIsLoading(true);
-    resolveFromForm({
-      templateId: p.templateId,
-      formSchemaId: p.formSchemaId,
-      sectionState: p.sectionState,
-      themeId: p.themeId,
-      supabaseUrl: p.supabaseUrl,
-      supabaseAnonKey: p.supabaseAnonKey
-    }).then((resolved) => {
-      if (!cancelled) {
-        setResolvedConfig(resolved.config);
-        setIsLoading(false);
-      }
-    }).catch((err) => {
-      if (!cancelled) {
-        setIsLoading(false);
-        onError == null ? void 0 : onError(err instanceof Error ? err : new Error(String(err)));
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    isResolveMode,
-    // For resolve mode, re-resolve when these change
-    isResolveMode ? props.templateId : void 0,
-    isResolveMode ? props.formSchemaId : void 0,
-    isResolveMode ? JSON.stringify(props.sectionState) : void 0,
-    isResolveMode ? props.themeId : void 0
-  ]);
-  const config = isResolveMode ? resolvedConfig : props.config;
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
-  }
-  if (!config) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: /* @__PURE__ */ jsxRuntime.jsx(
-    PreviewCanvas,
-    {
-      config,
-      pageIndex,
-      zoom,
-      absoluteZoom,
-      onDynamicFieldClick,
-      onReady
-    }
-  ) });
-}
 function normalizeFontFamily(fontStack) {
   const first = fontStack.split(",")[0].trim();
   return first.replace(/^['"]|['"]$/g, "");
@@ -10475,12 +10402,7 @@ async function loadGoogleFontCSS(rawFontFamily) {
   const existing = loadingPromises.get(fontFamily);
   if (existing) return existing;
   const promise = (async () => {
-    var _a;
     try {
-      if ((_a = document.fonts) == null ? void 0 : _a.check(`16px "${fontFamily}"`)) {
-        loadedFonts.add(fontFamily);
-        return;
-      }
       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");
@@ -10509,6 +10431,7 @@ 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;
@@ -10561,12 +10484,18 @@ function collectFontDescriptorsFromConfig(config) {
     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 && Array.isArray(node.styles)) {
-        for (const lineStyle of node.styles) {
+      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) {
@@ -10580,6 +10509,8 @@ function collectFontDescriptorsFromConfig(config) {
     }
   }
   add("Open Sans", 400, "normal");
+  add("Hind", 400, "normal");
+  add("Hind", 700, "normal");
   for (const page of config.pages || []) {
     walk(page.children || []);
   }
@@ -10611,6 +10542,95 @@ async function ensureFontsForResolvedConfig(config) {
     await document.fonts.ready;
   }
 }
+function PixldocsPreview(props) {
+  const {
+    pageIndex = 0,
+    zoom = 1,
+    absoluteZoom = false,
+    imageProxyUrl,
+    className,
+    style,
+    onDynamicFieldClick,
+    onReady,
+    onError
+  } = props;
+  react.useEffect(() => {
+    setPackageApiUrl(imageProxyUrl);
+  }, [imageProxyUrl]);
+  const [resolvedConfig, setResolvedConfig] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [fontsReady, setFontsReady] = react.useState(false);
+  const isResolveMode = !("config" in props && props.config);
+  react.useEffect(() => {
+    if (!isResolveMode) {
+      setResolvedConfig(null);
+      return;
+    }
+    const p = props;
+    if (!p.templateId || !p.formSchemaId || !p.supabaseUrl || !p.supabaseAnonKey) return;
+    let cancelled = false;
+    setIsLoading(true);
+    resolveFromForm({
+      templateId: p.templateId,
+      formSchemaId: p.formSchemaId,
+      sectionState: p.sectionState,
+      themeId: p.themeId,
+      supabaseUrl: p.supabaseUrl,
+      supabaseAnonKey: p.supabaseAnonKey
+    }).then((resolved) => {
+      if (!cancelled) {
+        setResolvedConfig(resolved.config);
+        ensureFontsForResolvedConfig(resolved.config).then(() => {
+          if (!cancelled) {
+            setFontsReady(true);
+            setIsLoading(false);
+          }
+        }).catch(() => {
+          if (!cancelled) {
+            setFontsReady(true);
+            setIsLoading(false);
+          }
+        });
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setIsLoading(false);
+        onError == null ? void 0 : onError(err instanceof Error ? err : new Error(String(err)));
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    isResolveMode,
+    // For resolve mode, re-resolve when these change
+    isResolveMode ? props.templateId : void 0,
+    isResolveMode ? props.formSchemaId : void 0,
+    isResolveMode ? JSON.stringify(props.sectionState) : void 0,
+    isResolveMode ? props.themeId : void 0
+  ]);
+  const config = isResolveMode ? resolvedConfig : props.config;
+  react.useEffect(() => {
+    if (isResolveMode || !config) return;
+    setFontsReady(false);
+    ensureFontsForResolvedConfig(config).then(() => setFontsReady(true)).catch(() => setFontsReady(true));
+  }, [isResolveMode, config]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
+  }
+  if (!config) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: /* @__PURE__ */ jsxRuntime.jsx(
+    PreviewCanvas,
+    {
+      config,
+      pageIndex,
+      zoom,
+      absoluteZoom,
+      onDynamicFieldClick,
+      onReady
+    }
+  ) });
+}
 class PixldocsRenderer {
   constructor(config) {
     __publicField(this, "config");
@@ -10690,7 +10710,8 @@ class PixldocsRenderer {
   // ─── Internal: render a page using the full PreviewCanvas engine ───
   /**
    * Wait until every image on the Fabric canvas inside the container has loaded.
-   * Polls img elements since we can't hook into Fabric's internal load events.
+   * Checks both DOM <img> elements AND Fabric canvas image objects to ensure
+   * all async assets are fully painted before capture.
    */
   waitForCanvasImages(container, maxWaitMs = 15e3, pollMs = 200) {
     return new Promise((resolve) => {
@@ -10701,6 +10722,29 @@ class PixldocsRenderer {
         images.forEach((img) => {
           if (!img.complete) allLoaded = false;
         });
+        if (allLoaded) {
+          const canvasEl = container.querySelector("canvas.lower-canvas, canvas");
+          const fabricCanvas = canvasEl && canvasEl.__fabric;
+          if (fabricCanvas && typeof fabricCanvas.getObjects === "function") {
+            for (const obj of fabricCanvas.getObjects()) {
+              const el = obj._element || obj._originalElement;
+              if (el instanceof HTMLImageElement && !el.complete) {
+                allLoaded = false;
+                break;
+              }
+              if (obj._objects) {
+                for (const child of obj._objects) {
+                  const childEl = child._element || child._originalElement;
+                  if (childEl instanceof HTMLImageElement && !childEl.complete) {
+                    allLoaded = false;
+                    break;
+                  }
+                }
+                if (!allLoaded) break;
+              }
+            }
+          }
+        }
         if (allLoaded || Date.now() - start > maxWaitMs) {
           requestAnimationFrame(() => setTimeout(resolve, 400));
           return;