@insitue/sdk 0.1.6 → 0.1.8

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-UWKF2IKW.js";
-import "./chunk-TQEOC7QZ.js";
+} from "./chunk-KAHON3H3.js";
+import "./chunk-AMC2RGMK.js";
 export {
   mountCaptureOnly
 };

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

@@ -1644,72 +1644,6 @@ async function toCanvas(node, options = {}) {
 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
-  };
-}
 function findContextAncestor(el) {
   const minW = 420;
   const minH = 140;
@@ -1731,43 +1665,37 @@ 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 { 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 };
-    }
-    detectUnrenderedImages(ctx, cropRect, out, pixelRatio, failedImages);
-    return { dataUrl: out.toDataURL("image/png"), failedImages };
-  } finally {
-    restoreImages();
+  const failedImages = /* @__PURE__ */ new Set();
+  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]"))
+  });
+  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 };
   }
+  detectUnrenderedImages(ctx, cropRect, out, pixelRatio, failedImages);
+  return { dataUrl: out.toDataURL("image/png"), failedImages };
 }
 function detectUnrenderedImages(cropCtx, cropRect, cropCanvas, pixelRatio, failedImages) {
   const imgs = Array.from(

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

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

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

@@ -8,9 +8,10 @@ import {
   k,
   onDisplayMediaChange,
   retryDisplayMedia,
+  setCaptureSettings,
   stopDisplayMedia,
   y
-} from "./chunk-TQEOC7QZ.js";
+} from "./chunk-AMC2RGMK.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.6"}` },
-          `InSitue \xB7 v${"0.1.6"}`
+          { title: `@insitue/sdk@${"0.1.8"}` },
+          `InSitue \xB7 v${"0.1.8"}`
         )
       ]
     )
@@ -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/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-UWKF2IKW.js";
+} from "./chunk-KAHON3H3.js";
 import {
   mountInSitue
-} from "./chunk-V2VYHBQC.js";
-import "./chunk-TQEOC7QZ.js";
+} from "./chunk-DBHURN5L.js";
+import "./chunk-AMC2RGMK.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.6";
+var SDK_VERSION = "0.1.8";
 export {
   InSitue,
   InSitueCapture,

package/dist/overlay.js

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

package/package.json

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