@pixldocs/canvas-renderer 0.5.457 → 0.5.459

package/dist/{index-BWYQI5Fp.js → index-BzvyPXLB.js}

@@ -277,6 +277,172 @@ function findCommonAncestorGroup(selectedIds, pageChildren) {
   }
   return null;
 }
+let activeThemeColors = {};
+function setMarkdownThemeColors(c) {
+  activeThemeColors = { ...c };
+}
+function resolveColorToken(token, theme) {
+  const raw = token.trim();
+  const t = raw.toLowerCase();
+  if (t === "primary") return theme.primary;
+  if (t === "secondary") return theme.secondary;
+  if (/^#([0-9a-f]{3,8})$/i.test(raw)) return raw;
+  if (/^(rgb|rgba|hsl|hsla)\(/i.test(raw)) return raw;
+  if (/^[a-z]+$/i.test(raw)) return raw;
+  return void 0;
+}
+function mergeStyle(a, b) {
+  return { ...a, ...b };
+}
+function tokenize(input, theme) {
+  const runs = [];
+  const stack = [];
+  let buf = "";
+  const activeStyle = () => {
+    let s = {};
+    for (const e of stack) s = mergeStyle(s, e.style);
+    return s;
+  };
+  const flush = () => {
+    if (buf.length === 0) return;
+    runs.push({ text: buf, style: activeStyle() });
+    buf = "";
+  };
+  let i = 0;
+  const n = input.length;
+  const peek = (s, at = i) => input.startsWith(s, at);
+  const findUnescaped = (needle, from) => {
+    let p = from;
+    while (p < n) {
+      if (input[p] === "\\" && p + 1 < n) {
+        p += 2;
+        continue;
+      }
+      if (input.startsWith(needle, p)) return p;
+      p++;
+    }
+    return -1;
+  };
+  const tryOpenBracket = () => {
+    if (input[i] !== "[") return -1;
+    const m = /^\[(c|bg)=([^\]]+)\]/.exec(input.slice(i));
+    if (!m) return -1;
+    const kind = m[1];
+    const tokenRaw = m[2];
+    const closer = kind === "c" ? "[/c]" : "[/bg]";
+    if (findUnescaped(closer, i + m[0].length) === -1) return -1;
+    const color = resolveColorToken(tokenRaw, theme);
+    const style = {};
+    if (color) {
+      if (kind === "c") style.fill = color;
+      else style.textBackgroundColor = color;
+    }
+    flush();
+    stack.push({ kind, style, closer });
+    return i + m[0].length;
+  };
+  const tryCloseBracket = () => {
+    for (let s = stack.length - 1; s >= 0; s--) {
+      const top = stack[s];
+      if (top.kind !== "c" && top.kind !== "bg") continue;
+      if (peek(top.closer)) {
+        if (s !== stack.length - 1) stack.length = s + 1;
+        flush();
+        stack.pop();
+        return i + top.closer.length;
+      }
+      break;
+    }
+    return -1;
+  };
+  const toggle = (delim, kind, style) => {
+    if (!peek(delim)) return null;
+    const topIdx = stack.findIndex((e) => e.kind === kind);
+    if (topIdx >= 0) {
+      if (topIdx !== stack.length - 1) return null;
+      flush();
+      stack.length = topIdx;
+      return i + delim.length;
+    }
+    if (findUnescaped(delim, i + delim.length) === -1) return null;
+    flush();
+    stack.push({ kind, style, closer: delim });
+    return i + delim.length;
+  };
+  while (i < n) {
+    const ch = input[i];
+    if (ch === "\\" && i + 1 < n) {
+      buf += input[i + 1];
+      i += 2;
+      continue;
+    }
+    if (ch === "[") {
+      const closed = tryCloseBracket();
+      if (closed > 0) {
+        i = closed;
+        continue;
+      }
+      const opened = tryOpenBracket();
+      if (opened > 0) {
+        i = opened;
+        continue;
+      }
+    }
+    let next;
+    if ((next = toggle("**", "bold", { fontWeight: 700 })) !== null) {
+      i = next;
+      continue;
+    }
+    if ((next = toggle("__", "under", { underline: true })) !== null) {
+      i = next;
+      continue;
+    }
+    if ((next = toggle("~~", "strike", { linethrough: true })) !== null) {
+      i = next;
+      continue;
+    }
+    if ((next = toggle("==", "highlight", { textBackgroundColor: theme.secondary || "#ffe066" })) !== null) {
+      i = next;
+      continue;
+    }
+    if ((next = toggle("*", "italic", { fontStyle: "italic" })) !== null) {
+      i = next;
+      continue;
+    }
+    buf += ch;
+    i++;
+  }
+  flush();
+  return runs;
+}
+function parseTextMarkdown(input, themeColors) {
+  const theme = activeThemeColors;
+  const runs = tokenize(input ?? "", theme);
+  let plain = "";
+  const styles = {};
+  let lineIdx = 0;
+  let charIdx = 0;
+  let hasFormatting = false;
+  for (const run of runs) {
+    const styleHasContent = Object.keys(run.style).length > 0;
+    if (styleHasContent) hasFormatting = true;
+    for (const ch of run.text) {
+      if (ch === "\n") {
+        plain += "\n";
+        lineIdx++;
+        charIdx = 0;
+        continue;
+      }
+      plain += ch;
+      if (styleHasContent) {
+        if (!styles[lineIdx]) styles[lineIdx] = {};
+        styles[lineIdx][charIdx] = { ...run.style };
+      }
+      charIdx++;
+    }
+  }
+  return { plainText: plain, styles, hasFormatting };
+}
 const heightCache = /* @__PURE__ */ new Map();
 const CACHE_TTL = 5e3;
 const WIDTH_BUCKET_PX = 8;
@@ -333,10 +499,21 @@ function getTextboxWidthFitMetrics(textbox, targetWidth) {
     fitsWidth: maxLineWidth <= targetWidth + 1
   };
 }
+function getRenderedTextForMeasurement(element) {
+  const raw = element.text ?? "";
+  if (!raw) return "";
+  if (element.formattingEnabled !== true) return raw;
+  try {
+    const { plainText } = parseTextMarkdown(raw);
+    return plainText || "";
+  } catch {
+    return raw;
+  }
+}
 function getCacheKey(element) {
   const widthPx = typeof element.width === "number" ? element.width : 200;
   return JSON.stringify({
-    text: element.text,
+    text: getRenderedTextForMeasurement(element),
     widthBucket: bucketWidth(widthPx),
     fontSize: element.fontSize,
     fontFamily: element.fontFamily,
@@ -360,7 +537,8 @@ function measureTextHeight(element) {
   if (element.type !== "text") {
     return element.height || 20;
   }
-  const textToMeasure = element.text || " ";
+  const rendered = getRenderedTextForMeasurement(element);
+  const textToMeasure = rendered || " ";
   const cacheKey = getCacheKey(element);
   const cached = heightCache.get(cacheKey);
   if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
@@ -9294,225 +9472,59 @@ function buildRoundedRectPath$1(width, height, radii) {
     `L ${bl} ${height}`,
     bl > 0 ? `A ${bl} ${bl} 0 0 1 0 ${height - bl}` : `L 0 ${height}`,
     `L 0 ${tl}`,
-    tl > 0 ? `A ${tl} ${tl} 0 0 1 ${tl} 0` : `L 0 0`,
-    "Z"
-  ].join(" ");
-}
-function getTrianglePoints(x, y, width, height) {
-  return [
-    { x: x + width / 2, y },
-    { x: x + width, y: y + height },
-    { x, y: y + height }
-  ];
-}
-function buildRoundedTrianglePath(w, h, rTop, rBR, rBL) {
-  const A = { x: w / 2, y: 0 };
-  const B = { x: w, y: h };
-  const C = { x: 0, y: h };
-  const maxR = Math.min(w, h) / 2;
-  const rt = Math.min(Math.max(0, rTop), maxR);
-  const rbr = Math.min(Math.max(0, rBR), maxR);
-  const rbl = Math.min(Math.max(0, rBL), maxR);
-  const unitVec = (p1, p2) => {
-    const dx = p2.x - p1.x;
-    const dy = p2.y - p1.y;
-    const len = Math.sqrt(dx * dx + dy * dy);
-    return len > 0 ? { x: dx / len, y: dy / len } : { x: 0, y: 0 };
-  };
-  const cornerSegment = (prev, curr, next, r) => {
-    if (r <= 0) {
-      return `L ${curr.x} ${curr.y}`;
-    }
-    const uPrev = unitVec(curr, prev);
-    const uNext = unitVec(curr, next);
-    const startX2 = curr.x + uPrev.x * r;
-    const startY2 = curr.y + uPrev.y * r;
-    const endX = curr.x + uNext.x * r;
-    const endY = curr.y + uNext.y * r;
-    return `L ${startX2} ${startY2} Q ${curr.x} ${curr.y} ${endX} ${endY}`;
-  };
-  const uCA = unitVec(C, A);
-  const startX = C.x + uCA.x * (rbl > 0 ? rbl : 0);
-  const startY = C.y + uCA.y * (rbl > 0 ? rbl : 0);
-  const actualStartX = rbl > 0 ? startX : C.x;
-  const actualStartY = rbl > 0 ? startY : C.y;
-  const parts = [
-    `M ${actualStartX} ${actualStartY}`,
-    cornerSegment(C, A, B, rt),
-    // top corner
-    cornerSegment(A, B, C, rbr),
-    // bottom-right corner
-    cornerSegment(B, C, A, rbl),
-    // bottom-left corner
-    "Z"
-  ];
-  return parts.join(" ");
-}
-let activeThemeColors = {};
-function setMarkdownThemeColors(c) {
-  activeThemeColors = { ...c };
-}
-function resolveColorToken(token, theme) {
-  const raw = token.trim();
-  const t = raw.toLowerCase();
-  if (t === "primary") return theme.primary;
-  if (t === "secondary") return theme.secondary;
-  if (/^#([0-9a-f]{3,8})$/i.test(raw)) return raw;
-  if (/^(rgb|rgba|hsl|hsla)\(/i.test(raw)) return raw;
-  if (/^[a-z]+$/i.test(raw)) return raw;
-  return void 0;
-}
-function mergeStyle(a, b) {
-  return { ...a, ...b };
-}
-function tokenize(input, theme) {
-  const runs = [];
-  const stack = [];
-  let buf = "";
-  const activeStyle = () => {
-    let s = {};
-    for (const e of stack) s = mergeStyle(s, e.style);
-    return s;
-  };
-  const flush = () => {
-    if (buf.length === 0) return;
-    runs.push({ text: buf, style: activeStyle() });
-    buf = "";
-  };
-  let i = 0;
-  const n = input.length;
-  const peek = (s, at = i) => input.startsWith(s, at);
-  const findUnescaped = (needle, from) => {
-    let p = from;
-    while (p < n) {
-      if (input[p] === "\\" && p + 1 < n) {
-        p += 2;
-        continue;
-      }
-      if (input.startsWith(needle, p)) return p;
-      p++;
-    }
-    return -1;
-  };
-  const tryOpenBracket = () => {
-    if (input[i] !== "[") return -1;
-    const m = /^\[(c|bg)=([^\]]+)\]/.exec(input.slice(i));
-    if (!m) return -1;
-    const kind = m[1];
-    const tokenRaw = m[2];
-    const closer = kind === "c" ? "[/c]" : "[/bg]";
-    if (findUnescaped(closer, i + m[0].length) === -1) return -1;
-    const color = resolveColorToken(tokenRaw, theme);
-    const style = {};
-    if (color) {
-      if (kind === "c") style.fill = color;
-      else style.textBackgroundColor = color;
-    }
-    flush();
-    stack.push({ kind, style, closer });
-    return i + m[0].length;
-  };
-  const tryCloseBracket = () => {
-    for (let s = stack.length - 1; s >= 0; s--) {
-      const top = stack[s];
-      if (top.kind !== "c" && top.kind !== "bg") continue;
-      if (peek(top.closer)) {
-        if (s !== stack.length - 1) stack.length = s + 1;
-        flush();
-        stack.pop();
-        return i + top.closer.length;
-      }
-      break;
-    }
-    return -1;
-  };
-  const toggle = (delim, kind, style) => {
-    if (!peek(delim)) return null;
-    const topIdx = stack.findIndex((e) => e.kind === kind);
-    if (topIdx >= 0) {
-      if (topIdx !== stack.length - 1) return null;
-      flush();
-      stack.length = topIdx;
-      return i + delim.length;
-    }
-    if (findUnescaped(delim, i + delim.length) === -1) return null;
-    flush();
-    stack.push({ kind, style, closer: delim });
-    return i + delim.length;
-  };
-  while (i < n) {
-    const ch = input[i];
-    if (ch === "\\" && i + 1 < n) {
-      buf += input[i + 1];
-      i += 2;
-      continue;
-    }
-    if (ch === "[") {
-      const closed = tryCloseBracket();
-      if (closed > 0) {
-        i = closed;
-        continue;
-      }
-      const opened = tryOpenBracket();
-      if (opened > 0) {
-        i = opened;
-        continue;
-      }
-    }
-    let next;
-    if ((next = toggle("**", "bold", { fontWeight: 700 })) !== null) {
-      i = next;
-      continue;
-    }
-    if ((next = toggle("__", "under", { underline: true })) !== null) {
-      i = next;
-      continue;
-    }
-    if ((next = toggle("~~", "strike", { linethrough: true })) !== null) {
-      i = next;
-      continue;
-    }
-    if ((next = toggle("==", "highlight", { textBackgroundColor: theme.secondary || "#ffe066" })) !== null) {
-      i = next;
-      continue;
-    }
-    if ((next = toggle("*", "italic", { fontStyle: "italic" })) !== null) {
-      i = next;
-      continue;
-    }
-    buf += ch;
-    i++;
-  }
-  flush();
-  return runs;
-}
-function parseTextMarkdown(input, themeColors) {
-  const theme = activeThemeColors;
-  const runs = tokenize(input ?? "", theme);
-  let plain = "";
-  const styles = {};
-  let lineIdx = 0;
-  let charIdx = 0;
-  let hasFormatting = false;
-  for (const run of runs) {
-    const styleHasContent = Object.keys(run.style).length > 0;
-    if (styleHasContent) hasFormatting = true;
-    for (const ch of run.text) {
-      if (ch === "\n") {
-        plain += "\n";
-        lineIdx++;
-        charIdx = 0;
-        continue;
-      }
-      plain += ch;
-      if (styleHasContent) {
-        if (!styles[lineIdx]) styles[lineIdx] = {};
-        styles[lineIdx][charIdx] = { ...run.style };
-      }
-      charIdx++;
+    tl > 0 ? `A ${tl} ${tl} 0 0 1 ${tl} 0` : `L 0 0`,
+    "Z"
+  ].join(" ");
+}
+function getTrianglePoints(x, y, width, height) {
+  return [
+    { x: x + width / 2, y },
+    { x: x + width, y: y + height },
+    { x, y: y + height }
+  ];
+}
+function buildRoundedTrianglePath(w, h, rTop, rBR, rBL) {
+  const A = { x: w / 2, y: 0 };
+  const B = { x: w, y: h };
+  const C = { x: 0, y: h };
+  const maxR = Math.min(w, h) / 2;
+  const rt = Math.min(Math.max(0, rTop), maxR);
+  const rbr = Math.min(Math.max(0, rBR), maxR);
+  const rbl = Math.min(Math.max(0, rBL), maxR);
+  const unitVec = (p1, p2) => {
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    return len > 0 ? { x: dx / len, y: dy / len } : { x: 0, y: 0 };
+  };
+  const cornerSegment = (prev, curr, next, r) => {
+    if (r <= 0) {
+      return `L ${curr.x} ${curr.y}`;
     }
-  }
-  return { plainText: plain, styles, hasFormatting };
+    const uPrev = unitVec(curr, prev);
+    const uNext = unitVec(curr, next);
+    const startX2 = curr.x + uPrev.x * r;
+    const startY2 = curr.y + uPrev.y * r;
+    const endX = curr.x + uNext.x * r;
+    const endY = curr.y + uNext.y * r;
+    return `L ${startX2} ${startY2} Q ${curr.x} ${curr.y} ${endX} ${endY}`;
+  };
+  const uCA = unitVec(C, A);
+  const startX = C.x + uCA.x * (rbl > 0 ? rbl : 0);
+  const startY = C.y + uCA.y * (rbl > 0 ? rbl : 0);
+  const actualStartX = rbl > 0 ? startX : C.x;
+  const actualStartY = rbl > 0 ? startY : C.y;
+  const parts = [
+    `M ${actualStartX} ${actualStartY}`,
+    cornerSegment(C, A, B, rt),
+    // top corner
+    cornerSegment(A, B, C, rbr),
+    // bottom-right corner
+    cornerSegment(B, C, A, rbl),
+    // bottom-left corner
+    "Z"
+  ];
+  return parts.join(" ");
 }
 function angleToCoords(angleDeg) {
   const rad = angleDeg * Math.PI / 180;
@@ -21115,9 +21127,14 @@ function setInTree(nodes, elementId, targetProperty, value) {
       }
       if (targetProperty === "text" && node.type === "text") {
         const overflowPolicy = String(node.overflowPolicy ?? "grow-and-push");
-        if (overflowPolicy !== "auto-shrink") {
-          delete node.height;
+        if (overflowPolicy === "auto-shrink") {
+          const explicitH = typeof node.height === "number" ? node.height : 0;
+          const existingMin = Math.max(0, Number(node.minBoxHeight) || 0);
+          if (explicitH > 0 && existingMin <= 0) {
+            node.minBoxHeight = explicitH;
+          }
         }
+        delete node.height;
       }
       return true;
     }
@@ -25218,6 +25235,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(?:\?.*)?$/, "") : 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;
@@ -25233,6 +25333,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;
@@ -25395,6 +25528,38 @@ function PixldocsPreview(props) {
   const config = isResolveMode ? resolvedConfig : props.config;
   const previewKey = useMemo(() => `${pageIndex}`, [pageIndex]);
   const fontSignature = useMemo(() => computeFontSignature(config), [config]);
+  const imageSignature = useMemo(() => computeImageSignature(config), [config]);
+  const [imagesReady, setImagesReady] = useState(true);
+  const firstImageRef = useMemo(() => ({ first: true }), []);
+  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]);
   useEffect(() => {
     if (isResolveMode) return;
     if (!config) {
@@ -25477,7 +25642,7 @@ function PixldocsPreview(props) {
     /* @__PURE__ */ 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__ */ jsx(
             PreviewCanvas,
@@ -25523,7 +25688,7 @@ function PixldocsPreview(props) {
         ]
       }
     ),
-    !canvasSettled && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: loadingFallback ?? /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
+    (!canvasSettled || !imagesReady) && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: loadingFallback ?? /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
 function normalizeSvgDimensions(svg, targetWidth, targetHeight) {
@@ -26044,9 +26209,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.457";
+const resolvedPackageVersion = "0.5.459";
 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.459";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -26860,7 +27025,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 import("./vectorPdfExport-DHunvQTF.js");
+      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-De64EUqT.js");
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -29180,7 +29345,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-DHunvQTF.js");
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-De64EUqT.js");
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -29428,89 +29593,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(?:\?.*)?$/, "") : 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;
@@ -29580,4 +29662,4 @@ export {
   buildTeaserBlurFlatKeys as y,
   collectFontDescriptorsFromConfig as z
 };
-//# sourceMappingURL=index-BWYQI5Fp.js.map
+//# sourceMappingURL=index-BzvyPXLB.js.map