@loupekit/sdk 0.4.0-next.10 → 0.4.1-next.11

package/dist/index.js

@@ -1935,10 +1935,18 @@ function captureElementContext(el2) {
   }
   return { html, styles };
 }
+var CAPTURE_TIMEOUT = 6e3;
+function withTimeout(p, ms) {
+  return Promise.race([p, new Promise((resolve) => setTimeout(() => resolve(void 0), ms))]);
+}
 async function fontsReady() {
   try {
     const fonts = document.fonts;
-    if (fonts?.ready) await fonts.ready;
+    if (!fonts?.ready) return;
+    await Promise.race([
+      fonts.ready,
+      new Promise((resolve) => setTimeout(resolve, 800))
+    ]);
   } catch {
   }
 }
@@ -1951,14 +1959,15 @@ function captureFilter(node) {
 async function captureScreenshot(el2) {
   try {
     await fontsReady();
-    return await domToPng(el2, {
-      scale: Math.min(window.devicePixelRatio || 1, 2),
-      backgroundColor: getComputedStyle(document.body).backgroundColor || "#ffffff",
-      // Give cross-origin font/asset fetches time to embed (default is short) so
-      // the capture matches the page instead of falling back to system fonts.
-      timeout: 3e4,
-      filter: captureFilter
-    });
+    return await withTimeout(
+      domToPng(el2, {
+        scale: Math.min(window.devicePixelRatio || 1, 2),
+        backgroundColor: getComputedStyle(document.body).backgroundColor || "#ffffff",
+        timeout: CAPTURE_TIMEOUT,
+        filter: captureFilter
+      }),
+      CAPTURE_TIMEOUT + 2e3
+    );
   } catch (err) {
     console.warn("[loupe] screenshot capture failed", err);
     return void 0;
@@ -1970,12 +1979,16 @@ async function captureRegionScreenshot(rect) {
     const scale = Math.min(window.devicePixelRatio || 1, 2);
     const container = regionContainer(rect);
     const origin = container.getBoundingClientRect();
-    const full = await domToPng(container, {
-      scale,
-      backgroundColor: getComputedStyle(document.body).backgroundColor || "#ffffff",
-      timeout: 3e4,
-      filter: captureFilter
-    });
+    const full = await withTimeout(
+      domToPng(container, {
+        scale,
+        backgroundColor: getComputedStyle(document.body).backgroundColor || "#ffffff",
+        timeout: CAPTURE_TIMEOUT,
+        filter: captureFilter
+      }),
+      CAPTURE_TIMEOUT + 2e3
+    );
+    if (!full) return void 0;
     const redact = Array.from(document.querySelectorAll("[data-loupe-redact]")).map(
       (n) => n.getBoundingClientRect()
     );
@@ -2405,11 +2418,15 @@ var LoupeApp = class {
         };
       }
     }
-    const capture = this.cfg.captureRegion ?? captureRegionScreenshot;
-    const screenshot = await capture(vp);
     this.selbox.style.display = "none";
     const region = { x: vp.x + window.scrollX, y: vp.y + window.scrollY, w: vp.w, h: vp.h, rel };
-    this.openComposer({ kind: "region", region, element: centerEl, screenshot }, vp.x + vp.w, vp.y);
+    const target = { kind: "region", region, element: centerEl };
+    this.openComposer(target, vp.x + vp.w, vp.y);
+    const capture = this.cfg.captureRegion ?? captureRegionScreenshot;
+    this.pendingShot = capture(vp);
+    void this.pendingShot.then((shot) => {
+      if (shot && this.pending === target) target.screenshot = shot;
+    }).catch(() => void 0);
   }
   /** elementFromPoint, ignoring our own UI. */
   pick(x, y) {
@@ -2458,8 +2475,7 @@ var LoupeApp = class {
     const chk = el("label", "chk");
     const box = document.createElement("input");
     box.type = "checkbox";
-    box.checked = target.kind === "region" ? !!target.screenshot : true;
-    if (target.kind === "region" && !target.screenshot) box.disabled = true;
+    box.checked = true;
     chk.append(box, document.createTextNode("Attach screenshot"));
     const btns = el("div", "btns");
     const cancel = el("button", "ghost", "Cancel");
@@ -2482,6 +2498,7 @@ var LoupeApp = class {
   closeComposer() {
     this.composer.style.display = "none";
     this.pending = null;
+    this.pendingShot = void 0;
   }
   async submit(target, body, withShot) {
     if (!body) return;
@@ -2502,7 +2519,7 @@ var LoupeApp = class {
       offset = this.targetOffset;
       anchoredEl = target.element;
     } else {
-      screenshot = withShot ? target.screenshot : void 0;
+      screenshot = withShot ? target.screenshot ?? await this.pendingShot : void 0;
       region = target.region;
       offset = { x: 0, y: 0 };
       if (target.element) {