@yoamigo.com/core 0.3.10 → 0.3.12

package/dist/index.js

@@ -693,19 +693,40 @@ var BuilderSelectionManager = class {
         el.style.display = "none";
       });
       const canvas = await html2canvas(document.body, {
-        scale: 0.5,
-        // Lower resolution for placeholder
+        scale: 1,
+        // Full resolution
         logging: false,
         useCORS: true,
-        allowTaint: true,
-        backgroundColor: "#ffffff"
-        // White background for JPEG (null would render as black)
+        backgroundColor: null,
+        // No background - preserve page's actual background
+        windowHeight: document.body.scrollHeight,
+        // Full page height
+        height: document.body.scrollHeight,
+        // Full page height
+        scrollX: 0,
+        // Render from left (no visible scroll)
+        scrollY: 0,
+        // Render from top (no visible scroll)
+        onclone: async (clonedDoc) => {
+          clonedDoc.querySelectorAll('img[loading="lazy"]').forEach((img) => {
+            img.removeAttribute("loading");
+          });
+          await Promise.all(
+            Array.from(clonedDoc.querySelectorAll("img")).map(
+              (img) => img.complete && img.naturalHeight !== 0 ? Promise.resolve() : new Promise((r) => {
+                img.onload = r;
+                img.onerror = r;
+              })
+            )
+          );
+          await clonedDoc.fonts?.ready;
+        }
       });
       overlays.forEach((el) => {
         ;
         el.style.display = "";
       });
-      const dataUrl = canvas.toDataURL("image/jpeg", 0.6);
+      const dataUrl = canvas.toDataURL("image/jpeg", 0.8);
       this.sendToParent({
         type: "SCREENSHOT_READY",
         dataUrl
@@ -731,7 +752,6 @@ var BuilderSelectionManager = class {
         scale: 1,
         logging: false,
         useCORS: true,
-        allowTaint: true,
         backgroundColor: null
         // Preserve transparency if any
       });
@@ -939,33 +959,60 @@ var BuilderSelectionManager = class {
         ;
         el.style.display = "none";
       });
-      const originalScrollY = window.scrollY;
-      window.scrollTo(0, 0);
-      await new Promise((resolve) => requestAnimationFrame(resolve));
+      const scrollHeight = document.body.scrollHeight;
+      console.log("[BuilderSelection] capturePageAsArrayBuffer - scrollHeight:", scrollHeight);
       const canvas = await html2canvas(document.body, {
-        scale: 0.5,
-        // Lower resolution for reasonable file size
-        logging: false,
+        scale: 1,
+        // Full resolution
+        logging: true,
+        // Enable logging for debugging
         useCORS: true,
-        allowTaint: true,
         backgroundColor: "#ffffff",
-        windowHeight: document.body.scrollHeight,
+        // White background to avoid transparent canvas issues
+        windowHeight: scrollHeight,
         // Full page height
-        height: document.body.scrollHeight
+        height: scrollHeight,
+        scrollX: 0,
+        // Render from left (no visible scroll)
+        scrollY: 0,
+        // Render from top (no visible scroll)
+        onclone: async (clonedDoc) => {
+          console.log("[BuilderSelection] onclone called");
+          const lazyImages = clonedDoc.querySelectorAll('img[loading="lazy"]');
+          console.log("[BuilderSelection] Found lazy images:", lazyImages.length);
+          lazyImages.forEach((img) => {
+            img.removeAttribute("loading");
+          });
+          const allImages = Array.from(clonedDoc.querySelectorAll("img"));
+          console.log("[BuilderSelection] Total images to wait for:", allImages.length);
+          await Promise.all(
+            allImages.map(
+              (img) => img.complete && img.naturalHeight !== 0 ? Promise.resolve() : new Promise((r) => {
+                img.onload = r;
+                img.onerror = r;
+              })
+            )
+          );
+          console.log("[BuilderSelection] All images loaded");
+          await clonedDoc.fonts?.ready;
+          console.log("[BuilderSelection] Fonts ready");
+        }
       });
-      window.scrollTo(0, originalScrollY);
+      console.log("[BuilderSelection] Canvas created:", canvas.width, "x", canvas.height);
       overlays.forEach((el) => {
         ;
         el.style.display = "";
       });
       const blob = await new Promise((resolve) => {
-        canvas.toBlob((b) => resolve(b), "image/jpeg", 0.6);
+        canvas.toBlob((b) => resolve(b), "image/jpeg", 0.8);
       });
       if (!blob) {
         console.error("[BuilderSelection] Failed to create blob from canvas");
         return null;
       }
+      console.log("[BuilderSelection] Blob created, size:", blob.size, "bytes");
       const buffer = await blob.arrayBuffer();
+      console.log("[BuilderSelection] ArrayBuffer ready, size:", buffer.byteLength);
       return buffer;
     } catch (error) {
       console.error("[BuilderSelection] Page capture failed:", error);

package/dist/lib.js

@@ -652,19 +652,40 @@ var BuilderSelectionManager = class {
         el.style.display = "none";
       });
       const canvas = await html2canvas(document.body, {
-        scale: 0.5,
-        // Lower resolution for placeholder
+        scale: 1,
+        // Full resolution
         logging: false,
         useCORS: true,
-        allowTaint: true,
-        backgroundColor: "#ffffff"
-        // White background for JPEG (null would render as black)
+        backgroundColor: null,
+        // No background - preserve page's actual background
+        windowHeight: document.body.scrollHeight,
+        // Full page height
+        height: document.body.scrollHeight,
+        // Full page height
+        scrollX: 0,
+        // Render from left (no visible scroll)
+        scrollY: 0,
+        // Render from top (no visible scroll)
+        onclone: async (clonedDoc) => {
+          clonedDoc.querySelectorAll('img[loading="lazy"]').forEach((img) => {
+            img.removeAttribute("loading");
+          });
+          await Promise.all(
+            Array.from(clonedDoc.querySelectorAll("img")).map(
+              (img) => img.complete && img.naturalHeight !== 0 ? Promise.resolve() : new Promise((r) => {
+                img.onload = r;
+                img.onerror = r;
+              })
+            )
+          );
+          await clonedDoc.fonts?.ready;
+        }
       });
       overlays.forEach((el) => {
         ;
         el.style.display = "";
       });
-      const dataUrl = canvas.toDataURL("image/jpeg", 0.6);
+      const dataUrl = canvas.toDataURL("image/jpeg", 0.8);
       this.sendToParent({
         type: "SCREENSHOT_READY",
         dataUrl
@@ -690,7 +711,6 @@ var BuilderSelectionManager = class {
         scale: 1,
         logging: false,
         useCORS: true,
-        allowTaint: true,
         backgroundColor: null
         // Preserve transparency if any
       });
@@ -898,33 +918,60 @@ var BuilderSelectionManager = class {
         ;
         el.style.display = "none";
       });
-      const originalScrollY = window.scrollY;
-      window.scrollTo(0, 0);
-      await new Promise((resolve) => requestAnimationFrame(resolve));
+      const scrollHeight = document.body.scrollHeight;
+      console.log("[BuilderSelection] capturePageAsArrayBuffer - scrollHeight:", scrollHeight);
       const canvas = await html2canvas(document.body, {
-        scale: 0.5,
-        // Lower resolution for reasonable file size
-        logging: false,
+        scale: 1,
+        // Full resolution
+        logging: true,
+        // Enable logging for debugging
         useCORS: true,
-        allowTaint: true,
         backgroundColor: "#ffffff",
-        windowHeight: document.body.scrollHeight,
+        // White background to avoid transparent canvas issues
+        windowHeight: scrollHeight,
         // Full page height
-        height: document.body.scrollHeight
+        height: scrollHeight,
+        scrollX: 0,
+        // Render from left (no visible scroll)
+        scrollY: 0,
+        // Render from top (no visible scroll)
+        onclone: async (clonedDoc) => {
+          console.log("[BuilderSelection] onclone called");
+          const lazyImages = clonedDoc.querySelectorAll('img[loading="lazy"]');
+          console.log("[BuilderSelection] Found lazy images:", lazyImages.length);
+          lazyImages.forEach((img) => {
+            img.removeAttribute("loading");
+          });
+          const allImages = Array.from(clonedDoc.querySelectorAll("img"));
+          console.log("[BuilderSelection] Total images to wait for:", allImages.length);
+          await Promise.all(
+            allImages.map(
+              (img) => img.complete && img.naturalHeight !== 0 ? Promise.resolve() : new Promise((r) => {
+                img.onload = r;
+                img.onerror = r;
+              })
+            )
+          );
+          console.log("[BuilderSelection] All images loaded");
+          await clonedDoc.fonts?.ready;
+          console.log("[BuilderSelection] Fonts ready");
+        }
       });
-      window.scrollTo(0, originalScrollY);
+      console.log("[BuilderSelection] Canvas created:", canvas.width, "x", canvas.height);
       overlays.forEach((el) => {
         ;
         el.style.display = "";
       });
       const blob = await new Promise((resolve) => {
-        canvas.toBlob((b) => resolve(b), "image/jpeg", 0.6);
+        canvas.toBlob((b) => resolve(b), "image/jpeg", 0.8);
       });
       if (!blob) {
         console.error("[BuilderSelection] Failed to create blob from canvas");
         return null;
       }
+      console.log("[BuilderSelection] Blob created, size:", blob.size, "bytes");
       const buffer = await blob.arrayBuffer();
+      console.log("[BuilderSelection] ArrayBuffer ready, size:", buffer.byteLength);
       return buffer;
     } catch (error) {
       console.error("[BuilderSelection] Page capture failed:", error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoamigo.com/core",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "description": "Core components, router, and utilities for YoAmigo templates",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",