@insitue/sdk 0.1.3 → 0.1.4

package/dist/capture-only.js

@@ -1,7 +1,7 @@
 import {
   mountCaptureOnly
-} from "./chunk-PRCHVT5A.js";
-import "./chunk-RYS5Z2BU.js";
+} from "./chunk-TTH4NBFA.js";
+import "./chunk-65BGOX2M.js";
 export {
   mountCaptureOnly
 };

package/dist/{chunk-RYS5Z2BU.js → chunk-65BGOX2M.js}

@@ -1641,19 +1641,62 @@ async function toCanvas(node, options = {}) {
 }
 
 // src/capture.ts
-function crossOrigin(url) {
-  if (!url || url.startsWith("data:") || url.startsWith("blob:")) {
-    return false;
-  }
-  try {
-    return new URL(url, location.href).origin !== location.origin;
-  } catch {
-    return false;
-  }
+var IMAGE_PLACEHOLDER = "data:image/svg+xml;base64," + (typeof btoa !== "undefined" ? btoa(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#e8e8e8"/><path d="M0 0 L32 32 M32 0 L0 32" stroke="#b0b0b0" stroke-width="1.5"/></svg>'
+) : "");
+async function preResolveImages() {
+  const restorations = [];
+  const failedImages = /* @__PURE__ */ new Set();
+  const images = Array.from(
+    document.querySelectorAll("img")
+  ).filter(
+    (img) => !img.closest?.("#insitu-root, [data-insitu-layer]")
+  );
+  await Promise.all(
+    images.map(async (img) => {
+      const srcToFetch = img.currentSrc || img.src;
+      if (!srcToFetch || srcToFetch.startsWith("data:") || srcToFetch.startsWith("blob:")) {
+        return;
+      }
+      try {
+        const res = await fetch(srcToFetch, { cache: "force-cache" });
+        if (!res.ok) {
+          failedImages.add(img);
+          return;
+        }
+        const blob = await res.blob();
+        const dataUrl = await new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result);
+          reader.onerror = () => reject(reader.error);
+          reader.readAsDataURL(blob);
+        });
+        const origSrc = img.getAttribute("src");
+        const origSrcset = img.getAttribute("srcset");
+        restorations.push(() => {
+          if (origSrc != null) img.setAttribute("src", origSrc);
+          else img.removeAttribute("src");
+          if (origSrcset != null) img.setAttribute("srcset", origSrcset);
+          else img.removeAttribute("srcset");
+        });
+        img.removeAttribute("srcset");
+        img.src = dataUrl;
+        try {
+          await img.decode();
+        } catch {
+        }
+      } catch {
+        failedImages.add(img);
+      }
+    })
+  );
+  return {
+    restore: () => {
+      for (const r3 of restorations) r3();
+    },
+    failedImages
+  };
 }
-var IMAGE_PLACEHOLDER = "data:image/svg+xml;utf8," + encodeURIComponent(
-  `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#e8e8e8"/><path d="M0 0 L32 32 M32 0 L0 32" stroke="#b0b0b0" stroke-width="1.5"/></svg>`
-);
 function findContextAncestor(el) {
   const minW = 420;
   const minH = 140;
@@ -1675,37 +1718,42 @@ async function renderViewportCrop(cropRect, pixelRatio) {
   const bodyBg = getComputedStyle(document.body).backgroundColor;
   const htmlBg = getComputedStyle(document.documentElement).backgroundColor;
   const backgroundColor = bodyBg && bodyBg !== "rgba(0, 0, 0, 0)" && bodyBg !== "transparent" ? bodyBg : htmlBg && htmlBg !== "rgba(0, 0, 0, 0)" && htmlBg !== "transparent" ? htmlBg : "#ffffff";
-  const fullCanvas = await toCanvas(document.documentElement, {
-    pixelRatio,
-    cacheBust: true,
-    backgroundColor,
-    imagePlaceholder: IMAGE_PLACEHOLDER,
-    // Only filter out our own overlay layers — leave cross-origin
-    // <img>s in place so embedImages can fetch+inline them.
-    filter: (n2) => !(n2 instanceof Element && n2.closest?.("#insitu-root, [data-insitu-layer]"))
-  });
-  const sx = window.scrollX;
-  const sy = window.scrollY;
-  const out = document.createElement("canvas");
-  out.width = Math.max(1, Math.round(cropRect.width * pixelRatio));
-  out.height = Math.max(1, Math.round(cropRect.height * pixelRatio));
-  const ctx = out.getContext("2d");
-  if (!ctx) return null;
-  ctx.drawImage(
-    fullCanvas,
-    Math.round((cropRect.x + sx) * pixelRatio),
-    Math.round((cropRect.y + sy) * pixelRatio),
-    Math.round(cropRect.width * pixelRatio),
-    Math.round(cropRect.height * pixelRatio),
-    0,
-    0,
-    out.width,
-    out.height
-  );
-  if (looksBlankUniform(ctx, out.width, out.height)) {
-    return null;
+  const { restore: restoreImages, failedImages } = await preResolveImages();
+  try {
+    const fullCanvas = await toCanvas(document.documentElement, {
+      pixelRatio,
+      // cacheBust off — we've already swapped srcs to data URLs.
+      cacheBust: false,
+      backgroundColor,
+      imagePlaceholder: IMAGE_PLACEHOLDER,
+      // Strip only our own overlay layers.
+      filter: (n2) => !(n2 instanceof Element && n2.closest?.("#insitu-root, [data-insitu-layer]"))
+    });
+    const sx = window.scrollX;
+    const sy = window.scrollY;
+    const out = document.createElement("canvas");
+    out.width = Math.max(1, Math.round(cropRect.width * pixelRatio));
+    out.height = Math.max(1, Math.round(cropRect.height * pixelRatio));
+    const ctx = out.getContext("2d");
+    if (!ctx) return { dataUrl: null, failedImages };
+    ctx.drawImage(
+      fullCanvas,
+      Math.round((cropRect.x + sx) * pixelRatio),
+      Math.round((cropRect.y + sy) * pixelRatio),
+      Math.round(cropRect.width * pixelRatio),
+      Math.round(cropRect.height * pixelRatio),
+      0,
+      0,
+      out.width,
+      out.height
+    );
+    if (looksBlankUniform(ctx, out.width, out.height)) {
+      return { dataUrl: null, failedImages };
+    }
+    return { dataUrl: out.toDataURL("image/png"), failedImages };
+  } finally {
+    restoreImages();
   }
-  return out.toDataURL("image/png");
 }
 function looksBlankUniform(ctx, w3, h3) {
   if (w3 < 4 || h3 < 4) return false;
@@ -1724,7 +1772,7 @@ function looksBlankUniform(ctx, w3, h3) {
   }
   return new Set(samples).size === 1;
 }
-function assessCaptureQuality(cropRect) {
+function assessCaptureQuality(cropRect, failedImages) {
   const out = {
     unembeddableImages: 0,
     hasVideo: false,
@@ -1739,13 +1787,7 @@ function assessCaptureQuality(cropRect) {
     const overlaps = r3.right >= cropRect.x && r3.left <= cropRect.x + cropRect.width && r3.bottom >= cropRect.y && r3.top <= cropRect.y + cropRect.height;
     if (!overlaps) continue;
     if (el instanceof HTMLImageElement) {
-      const src = el.currentSrc || el.src;
-      if (!src) continue;
-      const browserLoaded = el.complete && el.naturalWidth > 0;
-      const corsSafe = !crossOrigin(src) || el.crossOrigin != null;
-      if (!browserLoaded || !corsSafe) {
-        out.unembeddableImages++;
-      }
+      if (failedImages.has(el)) out.unembeddableImages++;
     } else if (el instanceof HTMLVideoElement) {
       if (r3.width > 0 && r3.height > 0) out.hasVideo = true;
     } else if (el instanceof HTMLCanvasElement) {
@@ -1972,11 +2014,9 @@ async function buildBundle(sel) {
       let layer1Result = null;
       let quality = null;
       if (!skipLayer1) {
-        layer1Result = await renderViewportCrop(
-          cropRect,
-          Math.min(dpr, 1.5)
-        );
-        quality = assessCaptureQuality(cropRect);
+        const r3 = await renderViewportCrop(cropRect, Math.min(dpr, 1.5));
+        layer1Result = r3.dataUrl;
+        quality = assessCaptureQuality(cropRect, r3.failedImages);
       }
       const imperfect = !layer1Result || quality != null && (quality.unembeddableImages > 0 || quality.hasVideo || quality.hasCanvas);
       if (imperfect || skipLayer1) {

package/dist/{chunk-VWPAKOUW.js → chunk-7GRJ5SZQ.js}

@@ -15,7 +15,7 @@ import {
   setCaptureSettings,
   stopDisplayMedia,
   y
-} from "./chunk-RYS5Z2BU.js";
+} from "./chunk-65BGOX2M.js";
 
 // src/client.ts
 var CompanionClient = class {

package/dist/{chunk-PRCHVT5A.js → chunk-TTH4NBFA.js}

@@ -10,7 +10,7 @@ import {
   retryDisplayMedia,
   stopDisplayMedia,
   y
-} from "./chunk-RYS5Z2BU.js";
+} from "./chunk-65BGOX2M.js";
 
 // src/capture-only.ts
 var DEFAULT_INGEST = "https://www.insitue.com/api/v1/capture";

package/dist/index.js

@@ -1,10 +1,10 @@
 import {
   mountCaptureOnly
-} from "./chunk-PRCHVT5A.js";
+} from "./chunk-TTH4NBFA.js";
 import {
   mountInSitue
-} from "./chunk-VWPAKOUW.js";
-import "./chunk-RYS5Z2BU.js";
+} from "./chunk-7GRJ5SZQ.js";
+import "./chunk-65BGOX2M.js";
 
 // src/InSitue.tsx
 import { useEffect } from "react";

package/dist/overlay.js

@@ -1,7 +1,7 @@
 import {
   mountInSitue
-} from "./chunk-VWPAKOUW.js";
-import "./chunk-RYS5Z2BU.js";
+} from "./chunk-7GRJ5SZQ.js";
+import "./chunk-65BGOX2M.js";
 export {
   mountInSitue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insitue/sdk",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "InSitue capture SDK — drop one snippet into your deployed app; your users point at a bug, InSitue opens a verified pull request.",
   "license": "MIT",
   "type": "module",