@insitue/sdk 0.1.3 → 0.1.5

package/dist/capture-only.js

@@ -1,7 +1,7 @@
 import {
   mountCaptureOnly
-} from "./chunk-PRCHVT5A.js";
-import "./chunk-RYS5Z2BU.js";
+} from "./chunk-Z7GTGO4C.js";
+import "./chunk-2QO63Y4R.js";
 export {
   mountCaptureOnly
 };

package/dist/{chunk-RYS5Z2BU.js → chunk-2QO63Y4R.js}

@@ -1641,19 +1641,75 @@ 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(cropRect) {
+  const restorations = [];
+  const failedImages = /* @__PURE__ */ new Set();
+  const PAD = 64;
+  const images = Array.from(
+    document.querySelectorAll("img")
+  ).filter((img) => {
+    if (img.closest?.("#insitu-root, [data-insitu-layer]")) return false;
+    if (!cropRect) return true;
+    const r3 = img.getBoundingClientRect();
+    if (r3.width <= 0 || r3.height <= 0) return false;
+    return r3.right >= cropRect.x - PAD && r3.left <= cropRect.x + cropRect.width + PAD && r3.bottom >= cropRect.y - PAD && r3.top <= cropRect.y + cropRect.height + PAD;
+  });
+  const PER_IMAGE_TIMEOUT_MS = 3e3;
+  await Promise.allSettled(
+    images.map(async (img) => {
+      const srcToFetch = img.currentSrc || img.src;
+      if (!srcToFetch || srcToFetch.startsWith("data:") || srcToFetch.startsWith("blob:")) {
+        return;
+      }
+      const ac = new AbortController();
+      const timer = setTimeout(() => ac.abort(), PER_IMAGE_TIMEOUT_MS);
+      try {
+        const res = await fetch(srcToFetch, {
+          cache: "force-cache",
+          signal: ac.signal
+        });
+        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);
+      } finally {
+        clearTimeout(timer);
+      }
+    })
+  );
+  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 +1731,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(cropRect);
+  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 +1785,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 +1800,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) {
@@ -1952,7 +2007,7 @@ async function buildBundle(sel) {
   const settings = getCaptureSettings();
   let screenshot;
   let screenshotUnavailable;
-  if (el instanceof HTMLElement) {
+  if (el instanceof HTMLElement || el instanceof SVGElement) {
     const context = findContextAncestor(el);
     const cr = context.getBoundingClientRect();
     const cropRect = new DOMRect(
@@ -1972,11 +2027,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) {
@@ -2044,7 +2097,14 @@ async function buildBundle(sel) {
     computedStyles: el ? curateComputedStyles(el) : {},
     tailwindClasses: el ? extractTailwindClasses(el) : [],
     ...screenshot ? { screenshot } : {},
-    ...screenshotUnavailable ? { screenshotUnavailable } : {},
+    // "Never silent" — if neither screenshot nor screenshotUnavailable
+    // got set above (an unexpected fallthrough), surface that fact
+    // so the widget never renders a blank where a result should be.
+    // The structured diagnostic below tells future-me exactly which
+    // branch ran, surfaced as `__insitu_capture__.bundle` in dev.
+    ...screenshotUnavailable ? { screenshotUnavailable } : !screenshot ? {
+      screenshotUnavailable: el ? `screenshot path didn't set a result (el=${el.tagName.toLowerCase()}; rasterisable=${el instanceof HTMLElement || el instanceof SVGElement})` : "no element selected"
+    } : {},
     viewport: {
       w: window.innerWidth,
       h: window.innerHeight,

package/dist/{chunk-VWPAKOUW.js → chunk-QL6QPM2A.js}

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

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

@@ -10,7 +10,7 @@ import {
   retryDisplayMedia,
   stopDisplayMedia,
   y
-} from "./chunk-RYS5Z2BU.js";
+} from "./chunk-2QO63Y4R.js";
 
 // src/capture-only.ts
 var DEFAULT_INGEST = "https://www.insitue.com/api/v1/capture";
@@ -260,9 +260,11 @@ function CaptureOnlyApp(props) {
       }) : bundle?.screenshotUnavailable ? k(
         "div",
         {
-          style: `font-size:12px;color:${C.faint};background:${C.surface2};border:1px solid ${C.line};border-radius:10px;padding:10px;margin-bottom:12px`
+          style: `font-size:12px;color:${C.faint};background:${C.surface2};border:1px solid ${C.line};border-radius:10px;padding:10px;margin-bottom:12px;word-break:break-word`
         },
-        "Screenshot unavailable \u2014 sending the rest."
+        // Surface the actual reason inline — helps diagnose
+        // when a capture lands empty without expecting it.
+        `Screenshot unavailable \u2014 ${bundle.screenshotUnavailable}`
       ) : null,
       // Nudge: the screenshot is structurally OK but some content
       // couldn't be embedded (non-CORS img / video / canvas). Offer
@@ -347,7 +349,14 @@ function CaptureOnlyApp(props) {
       {
         style: `display:flex;justify-content:space-between;padding:9px 16px;border-top:1px solid ${C.line};color:${C.faint};font-size:11px`
       },
-      [k("span", {}, "\u{1F512} Secrets scrubbed automatically"), k("span", {}, "InSitue")]
+      [
+        k("span", {}, "\u{1F512} Secrets scrubbed automatically"),
+        k(
+          "span",
+          { title: `@insitue/sdk@${"0.1.5"}` },
+          `InSitue \xB7 v${"0.1.5"}`
+        )
+      ]
     )
   ]);
 }

package/dist/index.d.ts

@@ -33,4 +33,10 @@ interface InSitueCaptureProps {
  */
 declare function InSitueCapture({ projectKey, endpoint, onCapture, }: InSitueCaptureProps): null;
 
-export { InSitue, InSitueCapture, type InSitueCaptureProps, type InSitueProps };
+/** Build-time-inlined version of `@insitue/sdk` (from package.json).
+ *  Exposed so the host app can self-verify which SDK build is loaded
+ *  — useful in dev when iterating across publishes. Also surfaced in
+ *  the capture widget footer so a screenshot proves the build. */
+declare const SDK_VERSION: string;
+
+export { InSitue, InSitueCapture, type InSitueCaptureProps, type InSitueProps, SDK_VERSION };

package/dist/index.js

@@ -1,10 +1,10 @@
 import {
   mountCaptureOnly
-} from "./chunk-PRCHVT5A.js";
+} from "./chunk-Z7GTGO4C.js";
 import {
   mountInSitue
-} from "./chunk-VWPAKOUW.js";
-import "./chunk-RYS5Z2BU.js";
+} from "./chunk-QL6QPM2A.js";
+import "./chunk-2QO63Y4R.js";
 
 // src/InSitue.tsx
 import { useEffect } from "react";
@@ -44,9 +44,13 @@ function InSitueCapture({
   }, [projectKey, endpoint, onCapture]);
   return null;
 }
+
+// src/index.ts
+var SDK_VERSION = "0.1.5";
 export {
   InSitue,
   InSitueCapture,
+  SDK_VERSION,
   mountCaptureOnly,
   mountInSitue
 };

package/dist/overlay.js

@@ -1,7 +1,7 @@
 import {
   mountInSitue
-} from "./chunk-VWPAKOUW.js";
-import "./chunk-RYS5Z2BU.js";
+} from "./chunk-QL6QPM2A.js";
+import "./chunk-2QO63Y4R.js";
 export {
   mountInSitue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insitue/sdk",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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",