@insitue/sdk 0.1.7 → 0.1.9

package/dist/capture-only.d.ts

@@ -20,6 +20,17 @@ interface CaptureOnlyOptions {
      * `window.__insitu_capture__` (useful for prod validation).
      */
     onCapture?: (draft: IssueDraft, bundle: CaptureBundle) => void;
+    /**
+     * Force the pixel-perfect (`getDisplayMedia`) path for every
+     * capture from mount. Costs a one-time tab-share permission per
+     * session in exchange for screenshots that are guaranteed to
+     * match what the user actually saw — bypasses every html-to-image
+     * quirk (next/image srcset, video frames, canvas content,
+     * cross-origin assets). Use in dev/dogfood where capture quality
+     * matters more than permission UX; leave off for prod end-users
+     * who shouldn't see a permission dialog uninvited.
+     */
+    defaultPixelPerfect?: boolean;
 }
 declare function mountCaptureOnly(opts?: CaptureOnlyOptions): () => void;
 

package/dist/capture-only.js

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

package/dist/{chunk-3ZUAZAJB.js → chunk-BNREKX5C.js}

@@ -8,9 +8,10 @@ import {
   k,
   onDisplayMediaChange,
   retryDisplayMedia,
+  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";
@@ -353,8 +354,8 @@ function CaptureOnlyApp(props) {
         k("span", {}, "\u{1F512} Secrets scrubbed automatically"),
         k(
           "span",
-          { title: `@insitue/sdk@${"0.1.7"}` },
-          `InSitue \xB7 v${"0.1.7"}`
+          { title: `@insitue/sdk@${"0.1.9"}` },
+          `InSitue \xB7 v${"0.1.9"}`
         )
       ]
     )
@@ -362,6 +363,9 @@ function CaptureOnlyApp(props) {
 }
 function mountCaptureOnly(opts = {}) {
   installRuntimeCollectors();
+  if (opts.defaultPixelPerfect === true) {
+    setCaptureSettings({ alwaysPixelPerfect: true });
+  }
   const host = document.createElement("div");
   host.id = "insitu-capture-root";
   host.setAttribute("data-insitu", "");

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.d.ts

@@ -21,6 +21,18 @@ interface InSitueCaptureProps {
      * (neither set): console + JSON download + `window.__insitu_capture__`.
      */
     onCapture?: (draft: IssueDraft, bundle: CaptureBundle) => void;
+    /**
+     * Default the user's "Always pixel-perfect screenshots" setting
+     * to `true` on mount — every capture uses the `getDisplayMedia`
+     * OS-compositor path, paying a one-time tab-share permission per
+     * session in exchange for screenshots that are pixel-accurate
+     * across any content (next/image, video, canvas, cross-origin).
+     *
+     * Recommended for dev / dogfood, where capture quality matters
+     * more than the permission UX. Not the default — production
+     * end-users shouldn't see a permission dialog they didn't ask for.
+     */
+    defaultPixelPerfect?: boolean;
 }
 /**
  * `<InSitueCapture />` — the prod capture-only path. UNLIKE
@@ -31,7 +43,7 @@ interface InSitueCaptureProps {
  * The simplest path: set `projectKey` and the SDK POSTs captures to
  * the InSitue cloud automatically.
  */
-declare function InSitueCapture({ projectKey, endpoint, onCapture, }: InSitueCaptureProps): null;
+declare function InSitueCapture({ projectKey, endpoint, onCapture, defaultPixelPerfect, }: InSitueCaptureProps): null;
 
 /** Build-time-inlined version of `@insitue/sdk` (from package.json).
  *  Exposed so the host app can self-verify which SDK build is loaded

package/dist/index.js

@@ -1,10 +1,10 @@
 import {
   mountCaptureOnly
-} from "./chunk-3ZUAZAJB.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";
@@ -27,26 +27,32 @@ function InSitue({ port }) {
 function InSitueCapture({
   projectKey,
   endpoint,
-  onCapture
+  onCapture,
+  defaultPixelPerfect
 }) {
   useEffect(() => {
     let active = true;
     let dispose;
     void import("./capture-only.js").then((m) => {
       if (active) {
-        dispose = m.mountCaptureOnly({ projectKey, endpoint, onCapture });
+        dispose = m.mountCaptureOnly({
+          projectKey,
+          endpoint,
+          onCapture,
+          defaultPixelPerfect
+        });
       }
     });
     return () => {
       active = false;
       dispose?.();
     };
-  }, [projectKey, endpoint, onCapture]);
+  }, [projectKey, endpoint, onCapture, defaultPixelPerfect]);
   return null;
 }
 
 // src/index.ts
-var SDK_VERSION = "0.1.7";
+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.7",
+  "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"
   }
 }