@pixldocs/canvas-renderer 0.3.15 → 0.3.17

package/dist/canvasWatermark-BgiyK4gu.js

@@ -0,0 +1,115 @@
+const WATERMARK_ID_PREFIX = "__wm_";
+function getWatermarkText() {
+  try {
+    const host = window.location.hostname;
+    if (host.includes("biomaker")) return "biomaker.app";
+  } catch {
+  }
+  return "pixldocs.com";
+}
+function getLuminance(color) {
+  if (!color || color === "transparent" || color === "none") return 1;
+  let r = 255, g = 255, b = 255;
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    const full = hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex;
+    const n = parseInt(full, 16);
+    r = n >> 16 & 255;
+    g = n >> 8 & 255;
+    b = n & 255;
+  } else {
+    const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (m) {
+      r = +m[1];
+      g = +m[2];
+      b = +m[3];
+    }
+  }
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+}
+function getWatermarkColor(bgColor) {
+  const lum = getLuminance(bgColor);
+  return lum < 0.45 ? "#cccccc" : "#808080";
+}
+function getPageBgColor(page, canvasBg) {
+  var _a;
+  const children = page.children || [];
+  for (const child of children) {
+    if (child.type === "shape" && child.fill && child.fill !== "transparent" && child.fill !== "none") {
+      return child.fill;
+    }
+    if ((_a = child.children) == null ? void 0 : _a.length) {
+      for (const gc of child.children) {
+        if (gc.type === "shape" && gc.fill && gc.fill !== "transparent" && gc.fill !== "none") {
+          return gc.fill;
+        }
+      }
+    }
+  }
+  return canvasBg;
+}
+function generateWatermarkElements(canvasWidth, canvasHeight, wmColor) {
+  const elements = [];
+  const text = getWatermarkText();
+  const fontSize = 18;
+  const angle = -30;
+  const estimatedTextWidth = text.length * fontSize * 0.55;
+  const spacingX = Math.max(160, estimatedTextWidth + 30);
+  const spacingY = 90;
+  const startX = -canvasWidth * 0.3;
+  const startY = -canvasHeight * 0.3;
+  const endX = canvasWidth * 1.5;
+  const endY = canvasHeight * 1.5;
+  let idx = 0;
+  for (let y = startY; y < endY; y += spacingY) {
+    for (let x = startX; x < endX; x += spacingX) {
+      elements.push({
+        id: `${WATERMARK_ID_PREFIX}${idx++}`,
+        type: "text",
+        left: x,
+        top: y,
+        width: 200,
+        height: 40,
+        text,
+        fontFamily: "Montserrat",
+        fontSize,
+        fontWeight: "600",
+        fill: wmColor,
+        angle,
+        selectable: false,
+        locked: true,
+        visible: true,
+        opacity: 0.14,
+        scaleX: 1,
+        scaleY: 1,
+        letterSpacing: 4
+      });
+    }
+  }
+  return elements;
+}
+function injectWatermark(config) {
+  var _a, _b, _c;
+  const canvasWidth = ((_a = config.canvas) == null ? void 0 : _a.width) || 612;
+  const canvasHeight = ((_b = config.canvas) == null ? void 0 : _b.height) || 792;
+  const canvasBg = (_c = config.canvas) == null ? void 0 : _c.backgroundColor;
+  return {
+    ...config,
+    pages: config.pages.map((page) => {
+      const pageBg = getPageBgColor(page, canvasBg);
+      const wmColor = getWatermarkColor(pageBg);
+      const watermarkElements = generateWatermarkElements(canvasWidth, canvasHeight, wmColor);
+      return {
+        ...page,
+        children: [
+          ...page.children || [],
+          ...watermarkElements
+        ]
+      };
+    })
+  };
+}
+export {
+  injectWatermark
+};
+//# sourceMappingURL=canvasWatermark-BgiyK4gu.js.map

package/dist/canvasWatermark-BgiyK4gu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasWatermark-BgiyK4gu.js","sources":["../../../src/lib/canvasWatermark.ts"],"sourcesContent":["/**\n * Injects diagonal \"PixlDocs\" watermark text elements into a TemplateConfig's pages.\n * The watermark elements are rendered as actual canvas text objects,\n * making them impossible to remove via browser inspect.\n */\n\nimport type { TemplateConfig, CanvasElement } from '@/types/editor';\n\nconst WATERMARK_ID_PREFIX = '__wm_';\n\n/** Determine watermark text based on current domain */\nfunction getWatermarkText(): string {\n  try {\n    const host = window.location.hostname;\n    if (host.includes('biomaker')) return 'biomaker.app';\n  } catch {}\n  return 'pixldocs.com';\n}\n\n/** Parse a hex/rgb color to luminance (0=black, 1=white) */\nfunction getLuminance(color: string | undefined): number {\n  if (!color || color === 'transparent' || color === 'none') return 1; // assume light\n  let r = 255, g = 255, b = 255;\n  if (color.startsWith('#')) {\n    const hex = color.slice(1);\n    const full = hex.length === 3 ? hex.split('').map(c => c + c).join('') : hex;\n    const n = parseInt(full, 16);\n    r = (n >> 16) & 255;\n    g = (n >> 8) & 255;\n    b = n & 255;\n  } else {\n    const m = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n    if (m) { r = +m[1]; g = +m[2]; b = +m[3]; }\n  }\n  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n}\n\n/** Pick watermark color that contrasts with page background */\nfunction getWatermarkColor(bgColor: string | undefined): string {\n  const lum = getLuminance(bgColor);\n  // Dark bg → light watermark, Light bg → dark watermark\n  return lum < 0.45 ? '#cccccc' : '#808080';\n}\n\n/** Find the dominant background color of a page */\nfunction getPageBgColor(page: { children?: any[] }, canvasBg?: string): string | undefined {\n  const children = page.children || [];\n  for (const child of children) {\n    if (child.type === 'shape' && child.fill && child.fill !== 'transparent' && child.fill !== 'none') {\n      return child.fill;\n    }\n    // Check inside groups (background groups)\n    if (child.children?.length) {\n      for (const gc of child.children) {\n        if (gc.type === 'shape' && gc.fill && gc.fill !== 'transparent' && gc.fill !== 'none') {\n          return gc.fill;\n        }\n      }\n    }\n  }\n  return canvasBg;\n}\n\n/** Generate watermark text elements for a given canvas size */\nfunction generateWatermarkElements(\n  canvasWidth: number,\n  canvasHeight: number,\n  wmColor: string,\n): CanvasElement[] {\n  const elements: CanvasElement[] = [];\n  const text = getWatermarkText();\n  const fontSize = 18;\n  const angle = -30;\n  // Adjust spacing based on text length to prevent overlap\n  const estimatedTextWidth = text.length * fontSize * 0.55;\n  const spacingX = Math.max(160, estimatedTextWidth + 30);\n  const spacingY = 90;\n\n  const startX = -canvasWidth * 0.3;\n  const startY = -canvasHeight * 0.3;\n  const endX = canvasWidth * 1.5;\n  const endY = canvasHeight * 1.5;\n\n  let idx = 0;\n  for (let y = startY; y < endY; y += spacingY) {\n    for (let x = startX; x < endX; x += spacingX) {\n      elements.push({\n        id: `${WATERMARK_ID_PREFIX}${idx++}`,\n        type: 'text',\n        left: x,\n        top: y,\n        width: 200,\n        height: 40,\n        text,\n        fontFamily: 'Montserrat',\n        fontSize,\n        fontWeight: '600',\n        fill: wmColor,\n        angle,\n        selectable: false,\n        locked: true,\n        visible: true,\n        opacity: 0.14,\n        scaleX: 1,\n        scaleY: 1,\n        letterSpacing: 4,\n      } as CanvasElement);\n    }\n  }\n  return elements;\n}\n\n/**\n * Returns a new config with watermark elements injected into every page.\n * The original config is NOT mutated.\n */\nexport function injectWatermark(config: TemplateConfig): TemplateConfig {\n  const canvasWidth = config.canvas?.width || 612;\n  const canvasHeight = config.canvas?.height || 792;\n  const canvasBg = (config.canvas as any)?.backgroundColor;\n\n  return {\n    ...config,\n    pages: config.pages.map((page) => {\n      const pageBg = getPageBgColor(page as any, canvasBg);\n      const wmColor = getWatermarkColor(pageBg);\n      const watermarkElements = generateWatermarkElements(canvasWidth, canvasHeight, wmColor);\n      return {\n        ...page,\n        children: [\n          ...(page.children || []),\n          ...watermarkElements,\n        ],\n      };\n    }),\n  };\n}\n\n/** Check if an element ID is a watermark element */\nexport function isWatermarkElement(id: string): boolean {\n  return id.startsWith(WATERMARK_ID_PREFIX);\n}\n"],"names":[],"mappings":"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"}

package/dist/canvasWatermark-C7Jk6O8G.cjs

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const WATERMARK_ID_PREFIX = "__wm_";
+function getWatermarkText() {
+  try {
+    const host = window.location.hostname;
+    if (host.includes("biomaker")) return "biomaker.app";
+  } catch {
+  }
+  return "pixldocs.com";
+}
+function getLuminance(color) {
+  if (!color || color === "transparent" || color === "none") return 1;
+  let r = 255, g = 255, b = 255;
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    const full = hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex;
+    const n = parseInt(full, 16);
+    r = n >> 16 & 255;
+    g = n >> 8 & 255;
+    b = n & 255;
+  } else {
+    const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (m) {
+      r = +m[1];
+      g = +m[2];
+      b = +m[3];
+    }
+  }
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+}
+function getWatermarkColor(bgColor) {
+  const lum = getLuminance(bgColor);
+  return lum < 0.45 ? "#cccccc" : "#808080";
+}
+function getPageBgColor(page, canvasBg) {
+  var _a;
+  const children = page.children || [];
+  for (const child of children) {
+    if (child.type === "shape" && child.fill && child.fill !== "transparent" && child.fill !== "none") {
+      return child.fill;
+    }
+    if ((_a = child.children) == null ? void 0 : _a.length) {
+      for (const gc of child.children) {
+        if (gc.type === "shape" && gc.fill && gc.fill !== "transparent" && gc.fill !== "none") {
+          return gc.fill;
+        }
+      }
+    }
+  }
+  return canvasBg;
+}
+function generateWatermarkElements(canvasWidth, canvasHeight, wmColor) {
+  const elements = [];
+  const text = getWatermarkText();
+  const fontSize = 18;
+  const angle = -30;
+  const estimatedTextWidth = text.length * fontSize * 0.55;
+  const spacingX = Math.max(160, estimatedTextWidth + 30);
+  const spacingY = 90;
+  const startX = -canvasWidth * 0.3;
+  const startY = -canvasHeight * 0.3;
+  const endX = canvasWidth * 1.5;
+  const endY = canvasHeight * 1.5;
+  let idx = 0;
+  for (let y = startY; y < endY; y += spacingY) {
+    for (let x = startX; x < endX; x += spacingX) {
+      elements.push({
+        id: `${WATERMARK_ID_PREFIX}${idx++}`,
+        type: "text",
+        left: x,
+        top: y,
+        width: 200,
+        height: 40,
+        text,
+        fontFamily: "Montserrat",
+        fontSize,
+        fontWeight: "600",
+        fill: wmColor,
+        angle,
+        selectable: false,
+        locked: true,
+        visible: true,
+        opacity: 0.14,
+        scaleX: 1,
+        scaleY: 1,
+        letterSpacing: 4
+      });
+    }
+  }
+  return elements;
+}
+function injectWatermark(config) {
+  var _a, _b, _c;
+  const canvasWidth = ((_a = config.canvas) == null ? void 0 : _a.width) || 612;
+  const canvasHeight = ((_b = config.canvas) == null ? void 0 : _b.height) || 792;
+  const canvasBg = (_c = config.canvas) == null ? void 0 : _c.backgroundColor;
+  return {
+    ...config,
+    pages: config.pages.map((page) => {
+      const pageBg = getPageBgColor(page, canvasBg);
+      const wmColor = getWatermarkColor(pageBg);
+      const watermarkElements = generateWatermarkElements(canvasWidth, canvasHeight, wmColor);
+      return {
+        ...page,
+        children: [
+          ...page.children || [],
+          ...watermarkElements
+        ]
+      };
+    })
+  };
+}
+exports.injectWatermark = injectWatermark;
+//# sourceMappingURL=canvasWatermark-C7Jk6O8G.cjs.map

package/dist/canvasWatermark-C7Jk6O8G.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasWatermark-C7Jk6O8G.cjs","sources":["../../../src/lib/canvasWatermark.ts"],"sourcesContent":["/**\n * Injects diagonal \"PixlDocs\" watermark text elements into a TemplateConfig's pages.\n * The watermark elements are rendered as actual canvas text objects,\n * making them impossible to remove via browser inspect.\n */\n\nimport type { TemplateConfig, CanvasElement } from '@/types/editor';\n\nconst WATERMARK_ID_PREFIX = '__wm_';\n\n/** Determine watermark text based on current domain */\nfunction getWatermarkText(): string {\n  try {\n    const host = window.location.hostname;\n    if (host.includes('biomaker')) return 'biomaker.app';\n  } catch {}\n  return 'pixldocs.com';\n}\n\n/** Parse a hex/rgb color to luminance (0=black, 1=white) */\nfunction getLuminance(color: string | undefined): number {\n  if (!color || color === 'transparent' || color === 'none') return 1; // assume light\n  let r = 255, g = 255, b = 255;\n  if (color.startsWith('#')) {\n    const hex = color.slice(1);\n    const full = hex.length === 3 ? hex.split('').map(c => c + c).join('') : hex;\n    const n = parseInt(full, 16);\n    r = (n >> 16) & 255;\n    g = (n >> 8) & 255;\n    b = n & 255;\n  } else {\n    const m = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n    if (m) { r = +m[1]; g = +m[2]; b = +m[3]; }\n  }\n  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n}\n\n/** Pick watermark color that contrasts with page background */\nfunction getWatermarkColor(bgColor: string | undefined): string {\n  const lum = getLuminance(bgColor);\n  // Dark bg → light watermark, Light bg → dark watermark\n  return lum < 0.45 ? '#cccccc' : '#808080';\n}\n\n/** Find the dominant background color of a page */\nfunction getPageBgColor(page: { children?: any[] }, canvasBg?: string): string | undefined {\n  const children = page.children || [];\n  for (const child of children) {\n    if (child.type === 'shape' && child.fill && child.fill !== 'transparent' && child.fill !== 'none') {\n      return child.fill;\n    }\n    // Check inside groups (background groups)\n    if (child.children?.length) {\n      for (const gc of child.children) {\n        if (gc.type === 'shape' && gc.fill && gc.fill !== 'transparent' && gc.fill !== 'none') {\n          return gc.fill;\n        }\n      }\n    }\n  }\n  return canvasBg;\n}\n\n/** Generate watermark text elements for a given canvas size */\nfunction generateWatermarkElements(\n  canvasWidth: number,\n  canvasHeight: number,\n  wmColor: string,\n): CanvasElement[] {\n  const elements: CanvasElement[] = [];\n  const text = getWatermarkText();\n  const fontSize = 18;\n  const angle = -30;\n  // Adjust spacing based on text length to prevent overlap\n  const estimatedTextWidth = text.length * fontSize * 0.55;\n  const spacingX = Math.max(160, estimatedTextWidth + 30);\n  const spacingY = 90;\n\n  const startX = -canvasWidth * 0.3;\n  const startY = -canvasHeight * 0.3;\n  const endX = canvasWidth * 1.5;\n  const endY = canvasHeight * 1.5;\n\n  let idx = 0;\n  for (let y = startY; y < endY; y += spacingY) {\n    for (let x = startX; x < endX; x += spacingX) {\n      elements.push({\n        id: `${WATERMARK_ID_PREFIX}${idx++}`,\n        type: 'text',\n        left: x,\n        top: y,\n        width: 200,\n        height: 40,\n        text,\n        fontFamily: 'Montserrat',\n        fontSize,\n        fontWeight: '600',\n        fill: wmColor,\n        angle,\n        selectable: false,\n        locked: true,\n        visible: true,\n        opacity: 0.14,\n        scaleX: 1,\n        scaleY: 1,\n        letterSpacing: 4,\n      } as CanvasElement);\n    }\n  }\n  return elements;\n}\n\n/**\n * Returns a new config with watermark elements injected into every page.\n * The original config is NOT mutated.\n */\nexport function injectWatermark(config: TemplateConfig): TemplateConfig {\n  const canvasWidth = config.canvas?.width || 612;\n  const canvasHeight = config.canvas?.height || 792;\n  const canvasBg = (config.canvas as any)?.backgroundColor;\n\n  return {\n    ...config,\n    pages: config.pages.map((page) => {\n      const pageBg = getPageBgColor(page as any, canvasBg);\n      const wmColor = getWatermarkColor(pageBg);\n      const watermarkElements = generateWatermarkElements(canvasWidth, canvasHeight, wmColor);\n      return {\n        ...page,\n        children: [\n          ...(page.children || []),\n          ...watermarkElements,\n        ],\n      };\n    }),\n  };\n}\n\n/** Check if an element ID is a watermark element */\nexport function isWatermarkElement(id: string): boolean {\n  return id.startsWith(WATERMARK_ID_PREFIX);\n}\n"],"names":[],"mappings":"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"}

package/dist/index.cjs

@@ -10093,7 +10093,7 @@ async function resolveTemplateData(options) {
   const defaultData = template.default_data;
   if (defaultData) config = applyFormDataSimple(config, defaultData);
   if (formData && Object.keys(formData).length > 0) config = applyFormDataSimple(config, formData);
-  return { config, templateName: template.name || "Untitled", templateId };
+  return { config, templateName: template.name || "Untitled", templateId, price: template.price ?? 0 };
 }
 async function resolveFromForm(options) {
   var _a, _b, _c, _d;
@@ -10234,7 +10234,8 @@ async function resolveFromForm(options) {
   return {
     config: resolvedConfig,
     templateName: templateRow.name || "Untitled",
-    templateId
+    templateId,
+    price: templateRow.price ?? 0
   };
 }
 function flattenAll(nodes) {
@@ -10684,7 +10685,7 @@ class PixldocsRenderer {
    * This is the primary external API for the package.
    */
   async renderFromForm(options) {
-    const { templateId, formSchemaId, sectionState, themeId, ...renderOpts } = options;
+    const { templateId, formSchemaId, sectionState, themeId, watermark, ...renderOpts } = options;
     const resolved = await resolveFromForm({
       templateId,
       formSchemaId,
@@ -10693,7 +10694,13 @@ class PixldocsRenderer {
       supabaseUrl: this.config.supabaseUrl,
       supabaseAnonKey: this.config.supabaseAnonKey
     });
-    return this.renderAllPages(resolved.config, renderOpts);
+    const shouldWatermark = watermark ?? resolved.price > 0;
+    let configToRender = resolved.config;
+    if (shouldWatermark) {
+      const { injectWatermark } = await Promise.resolve().then(() => require("./canvasWatermark-C7Jk6O8G.cjs"));
+      configToRender = injectWatermark(configToRender);
+    }
+    return this.renderAllPages(configToRender, renderOpts);
   }
   /**
    * Convenience: fetch by ID with simple flat data and render.
@@ -10708,50 +10715,85 @@ class PixldocsRenderer {
     return this.render(resolved.config, options);
   }
   // ─── Internal: render a page using the full PreviewCanvas engine ───
-  /**
-   * Wait until every image on the Fabric canvas inside the container has loaded.
-   * 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) {
+  getExpectedImageCount(config, pageIndex) {
+    const page = config.pages[pageIndex];
+    if (!(page == null ? void 0 : page.children)) return 0;
+    let count = 0;
+    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" && (src || imageUrl)) count += 1;
+        if (Array.isArray(node.children) && node.children.length > 0) {
+          walk(node.children);
+        }
+      }
+    };
+    walk(page.children);
+    return count;
+  }
+  waitForCanvasImages(container, expectedImageCount, maxWaitMs = 15e3, pollMs = 120) {
     return new Promise((resolve) => {
       const start = Date.now();
+      let stableFrames = 0;
+      const isRenderableImage = (value) => value instanceof HTMLImageElement && value.complete && value.naturalWidth > 0 && value.naturalHeight > 0;
+      const collectRenderableImages = (obj, seen) => {
+        if (!obj || typeof obj !== "object") return;
+        const candidates = [obj._element, obj._originalElement, obj._filteredEl, obj._cacheCanvasEl];
+        for (const candidate of candidates) {
+          if (isRenderableImage(candidate)) {
+            seen.add(candidate);
+          } else if (candidate instanceof HTMLImageElement) {
+            return false;
+          }
+        }
+        const nested = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
+        for (const child of nested) {
+          if (collectRenderableImages(child, seen) === false) return false;
+        }
+        return true;
+      };
+      const getFabricCanvas = () => {
+        const registry2 = window.__fabricCanvasRegistry;
+        if (registry2 instanceof Map) {
+          for (const entry of registry2.values()) {
+            const canvas = entry == null ? void 0 : entry.canvas;
+            const el = (canvas == null ? void 0 : canvas.lowerCanvasEl) || (canvas == null ? void 0 : canvas.upperCanvasEl);
+            if (el && container.contains(el)) return canvas;
+          }
+        }
+        return null;
+      };
+      const settle = () => requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
       const check = () => {
-        const images = container.querySelectorAll("img");
-        let allLoaded = true;
-        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;
-              }
-            }
+        const elapsed = Date.now() - start;
+        const domImages = Array.from(container.querySelectorAll("img"));
+        const allDomLoaded = domImages.every((img) => img.complete && img.naturalWidth > 0 && img.naturalHeight > 0);
+        const fabricCanvas = getFabricCanvas();
+        const fabricObjects = fabricCanvas && typeof fabricCanvas.getObjects === "function" ? fabricCanvas.getObjects() : [];
+        const renderableImages = /* @__PURE__ */ new Set();
+        const fabricReady = fabricObjects.every((obj) => collectRenderableImages(obj, renderableImages) !== false);
+        const actualImageCount = Math.max(domImages.length, renderableImages.size);
+        !!fabricCanvas && !!(fabricCanvas.lowerCanvasEl || fabricCanvas.upperCanvasEl);
+        const hasExpectedAssets = expectedImageCount === 0 ? true : actualImageCount >= expectedImageCount;
+        const ready = allDomLoaded && fabricReady && hasExpectedAssets;
+        if (ready) {
+          stableFrames += 1;
+          if (stableFrames >= 2) {
+            settle();
+            return;
           }
+        } else {
+          stableFrames = 0;
         }
-        if (allLoaded || Date.now() - start > maxWaitMs) {
-          requestAnimationFrame(() => setTimeout(resolve, 400));
+        if (elapsed >= maxWaitMs) {
+          settle();
           return;
         }
         setTimeout(check, pollMs);
       };
-      setTimeout(check, 500);
+      setTimeout(check, 0);
     });
   }
   getNormalizedGradientStops(gradient) {
@@ -10852,7 +10894,8 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
-        this.waitForCanvasImages(container).then(() => {
+        const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
+        this.waitForCanvasImages(container, expectedImageCount).then(() => {
           try {
             const fabricCanvas = container.querySelector("canvas.upper-canvas, canvas");
             if (!fabricCanvas) {