@insitue/sdk 0.1.8 → 0.1.9

package/dist/capture-only.js

@@ -1,7 +1,7 @@
 import {
   mountCaptureOnly
-} from "./chunk-KAHON3H3.js";
-import "./chunk-AMC2RGMK.js";
+} from "./chunk-BNREKX5C.js";
+import "./chunk-CPPXBTE5.js";
 export {
   mountCaptureOnly
 };

package/dist/{chunk-KAHON3H3.js → chunk-BNREKX5C.js}

@@ -11,7 +11,7 @@ import {
   setCaptureSettings,
   stopDisplayMedia,
   y
-} from "./chunk-AMC2RGMK.js";
+} from "./chunk-CPPXBTE5.js";
 
 // src/capture-only.ts
 var DEFAULT_INGEST = "https://www.insitue.com/api/v1/capture";
@@ -354,8 +354,8 @@ function CaptureOnlyApp(props) {
         k("span", {}, "\u{1F512} Secrets scrubbed automatically"),
         k(
           "span",
-          { title: `@insitue/sdk@${"0.1.8"}` },
-          `InSitue \xB7 v${"0.1.8"}`
+          { title: `@insitue/sdk@${"0.1.9"}` },
+          `InSitue \xB7 v${"0.1.9"}`
         )
       ]
     )

package/dist/{chunk-AMC2RGMK.js → chunk-CPPXBTE5.js}

@@ -1641,6 +1641,16 @@ 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>'
 ) : "");
@@ -1666,20 +1676,34 @@ async function renderViewportCrop(cropRect, pixelRatio) {
   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 failedImages = /* @__PURE__ */ new Set();
+  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 };
+  const drawnImgs = drawAbsoluteImagesOnto(
+    ctx,
+    cropRect,
+    pixelRatio,
+    failedImages
+  );
   const fullCanvas = await toCanvas(document.documentElement, {
     pixelRatio,
     cacheBust: true,
     backgroundColor,
     imagePlaceholder: IMAGE_PLACEHOLDER,
-    filter: (n2) => !(n2 instanceof Element && n2.closest?.("#insitu-root, [data-insitu-layer]"))
+    filter: (n2) => {
+      if (n2 instanceof Element && n2.closest?.("#insitu-root, [data-insitu-layer]")) {
+        return false;
+      }
+      if (n2 instanceof HTMLImageElement && drawnImgs.has(n2)) {
+        return false;
+      }
+      return true;
+    }
   });
   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),
@@ -1697,6 +1721,95 @@ async function renderViewportCrop(cropRect, pixelRatio) {
   detectUnrenderedImages(ctx, cropRect, out, pixelRatio, failedImages);
   return { dataUrl: out.toDataURL("image/png"), failedImages };
 }
+function drawAbsoluteImagesOnto(ctx, cropRect, pixelRatio, failedImages) {
+  const drawn = /* @__PURE__ */ new Set();
+  const imgs = Array.from(
+    document.querySelectorAll("img")
+  ).filter(
+    (img) => !img.closest?.("#insitu-root, [data-insitu-layer]")
+  );
+  for (const img of imgs) {
+    const r3 = img.getBoundingClientRect();
+    if (r3.width <= 0 || r3.height <= 0) continue;
+    const cs = getComputedStyle(img);
+    if (cs.position !== "absolute" && cs.position !== "fixed") continue;
+    if (r3.right < cropRect.x || r3.left > cropRect.x + cropRect.width || r3.bottom < cropRect.y || r3.top > cropRect.y + cropRect.height) {
+      continue;
+    }
+    const src = img.currentSrc || img.src;
+    if (!src) continue;
+    if (crossOrigin(src) && img.crossOrigin !== "anonymous" && img.crossOrigin !== "use-credentials") {
+      failedImages.add(img);
+      continue;
+    }
+    if (!img.complete || img.naturalWidth === 0 || img.naturalHeight === 0) {
+      failedImages.add(img);
+      continue;
+    }
+    const dest = {
+      x: (r3.left - cropRect.x) * pixelRatio,
+      y: (r3.top - cropRect.y) * pixelRatio,
+      w: r3.width * pixelRatio,
+      h: r3.height * pixelRatio
+    };
+    const source = computeObjectFitSource(img, cs);
+    try {
+      ctx.drawImage(
+        img,
+        source.sx,
+        source.sy,
+        source.sw,
+        source.sh,
+        dest.x,
+        dest.y,
+        dest.w,
+        dest.h
+      );
+      drawn.add(img);
+    } catch {
+      failedImages.add(img);
+    }
+  }
+  return drawn;
+}
+function computeObjectFitSource(img, cs) {
+  const nw = img.naturalWidth;
+  const nh = img.naturalHeight;
+  const r3 = img.getBoundingClientRect();
+  const dw = r3.width;
+  const dh = r3.height;
+  if (!nw || !nh || !dw || !dh) {
+    return { sx: 0, sy: 0, sw: nw || 1, sh: nh || 1 };
+  }
+  const fit = cs.objectFit || "fill";
+  if (fit === "fill") {
+    return { sx: 0, sy: 0, sw: nw, sh: nh };
+  }
+  const destAR = dw / dh;
+  const srcAR = nw / nh;
+  if (fit === "cover") {
+    if (srcAR > destAR) {
+      const sw = nh * destAR;
+      return { sx: (nw - sw) / 2, sy: 0, sw, sh: nh };
+    }
+    const sh = nw / destAR;
+    return { sx: 0, sy: (nh - sh) / 2, sw: nw, sh };
+  }
+  if (fit === "contain" || fit === "scale-down") {
+    return { sx: 0, sy: 0, sw: nw, sh: nh };
+  }
+  if (fit === "none") {
+    const sw = Math.min(nw, dw);
+    const sh = Math.min(nh, dh);
+    return {
+      sx: (nw - sw) / 2,
+      sy: (nh - sh) / 2,
+      sw,
+      sh
+    };
+  }
+  return { sx: 0, sy: 0, sw: nw, sh: nh };
+}
 function detectUnrenderedImages(cropCtx, cropRect, cropCanvas, pixelRatio, failedImages) {
   const imgs = Array.from(
     document.querySelectorAll("img")

package/dist/{chunk-DBHURN5L.js → chunk-DSHJX2LF.js}

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

package/dist/index.js

@@ -1,10 +1,10 @@
 import {
   mountCaptureOnly
-} from "./chunk-KAHON3H3.js";
+} from "./chunk-BNREKX5C.js";
 import {
   mountInSitue
-} from "./chunk-DBHURN5L.js";
-import "./chunk-AMC2RGMK.js";
+} from "./chunk-DSHJX2LF.js";
+import "./chunk-CPPXBTE5.js";
 
 // src/InSitue.tsx
 import { useEffect } from "react";
@@ -52,7 +52,7 @@ function InSitueCapture({
 }
 
 // src/index.ts
-var SDK_VERSION = "0.1.8";
+var SDK_VERSION = "0.1.9";
 export {
   InSitue,
   InSitueCapture,

package/dist/overlay.js

@@ -1,7 +1,7 @@
 import {
   mountInSitue
-} from "./chunk-DBHURN5L.js";
-import "./chunk-AMC2RGMK.js";
+} from "./chunk-DSHJX2LF.js";
+import "./chunk-CPPXBTE5.js";
 export {
   mountInSitue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insitue/sdk",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "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",
@@ -50,9 +50,12 @@
   "devDependencies": {
     "@types/node": "^22.9.0",
     "@types/react": "^19.0.0",
+    "@vitest/browser": "^3.2.4",
+    "playwright": "^1.60.0",
     "react": "^19.0.0",
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
+    "vitest": "^3.2.4",
     "@insitue/capture-core": "0.0.0"
   },
   "repository": {
@@ -84,6 +87,8 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }