@pixldocs/canvas-renderer 0.5.457 → 0.5.458

package/dist/{index-C-zHLTyR.cjs → index-CScn1p9A.cjs}

@@ -25236,6 +25236,89 @@ const previewBlur = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   injectPreviewBlur,
   resolveBlurElementExactIdsFromFlatFormKeys
 }, Symbol.toStringTag, { value: "Module" }));
+function collectImageUrls(config) {
+  const urls = [];
+  const walk = (nodes) => {
+    for (const node of nodes) {
+      if (!node || node.visible === false) continue;
+      const src = typeof node.src === "string" ? node.src.trim() : "";
+      const imageUrl = typeof node.imageUrl === "string" ? node.imageUrl.trim() : "";
+      if (node.type === "image") {
+        const url = src || imageUrl;
+        if (url) urls.push(url);
+      }
+      if (Array.isArray(node.children) && node.children.length > 0) {
+        walk(node.children);
+      }
+    }
+  };
+  for (const page of config.pages || []) {
+    walk(page.children || []);
+  }
+  return urls;
+}
+function normalizeAssetUrl(rawUrl, imageProxyUrl) {
+  if (!rawUrl) return null;
+  if (rawUrl.startsWith("data:") || rawUrl.startsWith("blob:")) return null;
+  if (rawUrl.startsWith("/") && !rawUrl.startsWith("//")) {
+    if (typeof window !== "undefined") return new URL(rawUrl, window.location.origin).toString();
+    return null;
+  }
+  try {
+    const h = new URL(rawUrl).hostname.toLowerCase();
+    if (h === "localhost" || h === "127.0.0.1" || h === "0.0.0.0" || h.endsWith(".local") || /^(10\.|192\.168\.|169\.254\.)/.test(h)) {
+      if (typeof window !== "undefined" && new URL(rawUrl).origin === window.location.origin) {
+        return rawUrl;
+      }
+      return null;
+    }
+  } catch {
+    return null;
+  }
+  const supabaseUrl = typeof globalThis.__VITE_SUPABASE_URL === "string" ? globalThis.__VITE_SUPABASE_URL : "";
+  if (supabaseUrl && rawUrl.includes(supabaseUrl)) {
+    const signedMatch = rawUrl.match(/\/storage\/v1\/object\/sign\/([^?]+)/);
+    if (signedMatch) return `${supabaseUrl}/storage/v1/object/public/${signedMatch[1]}`;
+    if (rawUrl.includes("/storage/v1/object/public/")) return rawUrl;
+  }
+  const proxyBase = imageProxyUrl ? imageProxyUrl.replace(/\/image-proxy(?:\?.*)?$/, "") : exports.API_URL;
+  if (proxyBase) {
+    return `${proxyBase}/image-proxy?url=${encodeURIComponent(rawUrl)}`;
+  }
+  return rawUrl;
+}
+const CONCURRENCY = 6;
+async function prefetchUrls(urls, signal) {
+  const unique = [...new Set(urls)];
+  if (unique.length === 0) return;
+  let i = 0;
+  const next = async () => {
+    while (i < unique.length) {
+      if (signal == null ? void 0 : signal.aborted) return;
+      const url = unique[i++];
+      try {
+        await fetch(url, { signal, mode: "cors", credentials: "omit" });
+      } catch {
+      }
+    }
+  };
+  const workers = Array.from({ length: Math.min(CONCURRENCY, unique.length) }, () => next());
+  await Promise.all(workers);
+}
+async function warmResolvedTemplateForPreview(config, options) {
+  const { signal, imageProxyUrl } = options ?? {};
+  await ensureFontsForResolvedConfig(config);
+  if (signal == null ? void 0 : signal.aborted) return;
+  const rawUrls = collectImageUrls(config);
+  const resolvedUrls = rawUrls.map((u) => normalizeAssetUrl(u, imageProxyUrl)).filter((u) => u !== null);
+  await prefetchUrls(resolvedUrls, signal);
+}
+async function warmTemplateFromForm(options) {
+  const { signal, imageProxyUrl, ...resolveOpts } = options;
+  const resolved = await resolveFromForm(resolveOpts);
+  if (signal == null ? void 0 : signal.aborted) return;
+  await warmResolvedTemplateForPreview(resolved.config, { signal, imageProxyUrl });
+}
 const PREVIEW_DEBUG_PREFIX = "[canvas-renderer][preview-debug]";
 function computeFontSignature(config) {
   var _a2;
@@ -25251,6 +25334,39 @@ function computeFontSignature(config) {
   for (const page of config.pages) walk(page.children || []);
   return Array.from(fams).sort().join("|");
 }
+function computeImageSignature(config) {
+  var _a2;
+  if (!((_a2 = config == null ? void 0 : config.pages) == null ? void 0 : _a2.length)) return "";
+  try {
+    const urls = collectImageUrls(config);
+    return urls.length === 0 ? "" : urls.slice().sort().join("|");
+  } catch {
+    return "";
+  }
+}
+function preloadImageUrl(url, proxyBase) {
+  return new Promise((resolve) => {
+    if (!url || url.startsWith("data:") || url.startsWith("blob:")) return resolve();
+    let done = false;
+    const finish = () => {
+      if (!done) {
+        done = true;
+        resolve();
+      }
+    };
+    const isHttp = /^https?:/i.test(url);
+    const target = isHttp && proxyBase && !url.includes("/image-proxy?") ? `${proxyBase.replace(/\/+$/, "")}?url=${encodeURIComponent(url)}` : url;
+    const img = new Image();
+    try {
+      img.crossOrigin = "anonymous";
+    } catch {
+    }
+    img.onload = finish;
+    img.onerror = finish;
+    img.src = target;
+    setTimeout(finish, 6e3);
+  });
+}
 function countUnderlinedNodes(config) {
   var _a2;
   if (!((_a2 = config == null ? void 0 : config.pages) == null ? void 0 : _a2.length)) return 0;
@@ -25413,6 +25529,38 @@ function PixldocsPreview(props) {
   const config = isResolveMode ? resolvedConfig : props.config;
   const previewKey = react.useMemo(() => `${pageIndex}`, [pageIndex]);
   const fontSignature = react.useMemo(() => computeFontSignature(config), [config]);
+  const imageSignature = react.useMemo(() => computeImageSignature(config), [config]);
+  const [imagesReady, setImagesReady] = react.useState(true);
+  const firstImageRef = react.useMemo(() => ({ first: true }), []);
+  react.useEffect(() => {
+    if (!config) {
+      setImagesReady(true);
+      return;
+    }
+    if (firstImageRef.first) {
+      firstImageRef.first = false;
+      setImagesReady(true);
+      return;
+    }
+    let urls = [];
+    try {
+      urls = collectImageUrls(config);
+    } catch {
+      urls = [];
+    }
+    if (urls.length === 0) {
+      setImagesReady(true);
+      return;
+    }
+    setImagesReady(false);
+    let cancelled = false;
+    Promise.all(urls.map((u) => preloadImageUrl(u, imageProxyUrl))).then(() => {
+      if (!cancelled) setImagesReady(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [imageSignature, imageProxyUrl]);
   react.useEffect(() => {
     if (isResolveMode) return;
     if (!config) {
@@ -25495,7 +25643,7 @@ function PixldocsPreview(props) {
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        style: hasOverlays ? { visibility: canvasSettled ? "visible" : "hidden", position: "relative", width: canvasW * zoom, height: canvasH * zoom } : { visibility: canvasSettled ? "visible" : "hidden" },
+        style: hasOverlays ? { visibility: canvasSettled && imagesReady ? "visible" : "hidden", position: "relative", width: canvasW * zoom, height: canvasH * zoom } : { visibility: canvasSettled && imagesReady ? "visible" : "hidden" },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             PreviewCanvas,
@@ -25541,7 +25689,7 @@ function PixldocsPreview(props) {
         ]
       }
     ),
-    !canvasSettled && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: loadingFallback ?? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
+    (!canvasSettled || !imagesReady) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: loadingFallback ?? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
 function normalizeSvgDimensions(svg, targetWidth, targetHeight) {
@@ -26062,9 +26210,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.457";
+const resolvedPackageVersion = "0.5.458";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.457";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.458";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -26878,7 +27026,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-Qi65Srzj.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-DySc4jWC.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -29198,7 +29346,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-Qi65Srzj.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-DySc4jWC.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -29446,89 +29594,6 @@ async function getPublishedTemplate(options) {
   const rows = await res.json();
   return rows[0] ?? null;
 }
-function collectImageUrls(config) {
-  const urls = [];
-  const walk = (nodes) => {
-    for (const node of nodes) {
-      if (!node || node.visible === false) continue;
-      const src = typeof node.src === "string" ? node.src.trim() : "";
-      const imageUrl = typeof node.imageUrl === "string" ? node.imageUrl.trim() : "";
-      if (node.type === "image") {
-        const url = src || imageUrl;
-        if (url) urls.push(url);
-      }
-      if (Array.isArray(node.children) && node.children.length > 0) {
-        walk(node.children);
-      }
-    }
-  };
-  for (const page of config.pages || []) {
-    walk(page.children || []);
-  }
-  return urls;
-}
-function normalizeAssetUrl(rawUrl, imageProxyUrl) {
-  if (!rawUrl) return null;
-  if (rawUrl.startsWith("data:") || rawUrl.startsWith("blob:")) return null;
-  if (rawUrl.startsWith("/") && !rawUrl.startsWith("//")) {
-    if (typeof window !== "undefined") return new URL(rawUrl, window.location.origin).toString();
-    return null;
-  }
-  try {
-    const h = new URL(rawUrl).hostname.toLowerCase();
-    if (h === "localhost" || h === "127.0.0.1" || h === "0.0.0.0" || h.endsWith(".local") || /^(10\.|192\.168\.|169\.254\.)/.test(h)) {
-      if (typeof window !== "undefined" && new URL(rawUrl).origin === window.location.origin) {
-        return rawUrl;
-      }
-      return null;
-    }
-  } catch {
-    return null;
-  }
-  const supabaseUrl = typeof globalThis.__VITE_SUPABASE_URL === "string" ? globalThis.__VITE_SUPABASE_URL : "";
-  if (supabaseUrl && rawUrl.includes(supabaseUrl)) {
-    const signedMatch = rawUrl.match(/\/storage\/v1\/object\/sign\/([^?]+)/);
-    if (signedMatch) return `${supabaseUrl}/storage/v1/object/public/${signedMatch[1]}`;
-    if (rawUrl.includes("/storage/v1/object/public/")) return rawUrl;
-  }
-  const proxyBase = imageProxyUrl ? imageProxyUrl.replace(/\/image-proxy(?:\?.*)?$/, "") : exports.API_URL;
-  if (proxyBase) {
-    return `${proxyBase}/image-proxy?url=${encodeURIComponent(rawUrl)}`;
-  }
-  return rawUrl;
-}
-const CONCURRENCY = 6;
-async function prefetchUrls(urls, signal) {
-  const unique = [...new Set(urls)];
-  if (unique.length === 0) return;
-  let i = 0;
-  const next = async () => {
-    while (i < unique.length) {
-      if (signal == null ? void 0 : signal.aborted) return;
-      const url = unique[i++];
-      try {
-        await fetch(url, { signal, mode: "cors", credentials: "omit" });
-      } catch {
-      }
-    }
-  };
-  const workers = Array.from({ length: Math.min(CONCURRENCY, unique.length) }, () => next());
-  await Promise.all(workers);
-}
-async function warmResolvedTemplateForPreview(config, options) {
-  const { signal, imageProxyUrl } = options ?? {};
-  await ensureFontsForResolvedConfig(config);
-  if (signal == null ? void 0 : signal.aborted) return;
-  const rawUrls = collectImageUrls(config);
-  const resolvedUrls = rawUrls.map((u) => normalizeAssetUrl(u, imageProxyUrl)).filter((u) => u !== null);
-  await prefetchUrls(resolvedUrls, signal);
-}
-async function warmTemplateFromForm(options) {
-  const { signal, imageProxyUrl, ...resolveOpts } = options;
-  const resolved = await resolveFromForm(resolveOpts);
-  if (signal == null ? void 0 : signal.aborted) return;
-  await warmResolvedTemplateForPreview(resolved.config, { signal, imageProxyUrl });
-}
 function setAutoShrinkDebug(enabled) {
   if (typeof window !== "undefined") {
     window.__pixldocsDebugAutoShrink = !!enabled;
@@ -29595,4 +29660,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-C-zHLTyR.cjs.map
+//# sourceMappingURL=index-CScn1p9A.cjs.map