qapture2 0.7.1 → 0.7.2

package/README.md

@@ -315,6 +315,22 @@ rewritten in place, and a render that still throws is retried once with
 decoration stripped. `npm run modern-css-test` proves it, and proves itself:
 it first asserts that raw html2canvas *still* dies on the same fixture.
 
+**v0.7.2 fixed the last of the mis-framing: clicking an element only captured
+the part of it that was on screen.** Dragged regions are clamped into the
+viewport before capture, so they were always safe — but an element *pick* is a
+raw `getBoundingClientRect()`, and a table column, a sidebar, a long form or a
+wide toolbar routinely extends past the fold. You got a fragment. And when the
+element started *above* the viewport, the crop slid down the page to fill its
+height, so the screenshot was the right size showing the wrong content — a
+failure with nothing on screen to reveal it.
+
+Captures now render the union of the viewport and the selection, so an element
+that leaves the screen in any direction is rendered whole, up to 4000px per
+side (past a four-viewport render budget the scale drops, not the framing).
+The exact engine can't photograph off-screen pixels, so there the selection is
+trimmed to the visible part instead — cropped, never displaced. `npm run
+element-capture-test` measures all three overflow directions.
+
 ### `exact` — opt-in, pixel-for-pixel
 
 Uses the Screen Capture API to photograph **this tab's real composited

package/dist/{chunk-WAOYPLZA.cjs → chunk-CIFJMD2B.cjs}

@@ -2537,6 +2537,8 @@ var FALLBACK_PAGE_BACKGROUND = "#ffffff";
 var MAX_SHOT_EDGE = 1800;
 var WEBP_QUALITY = 0.92;
 var STUCK_ATTR = "data-qa-stuck";
+var MAX_CAPTURE_EDGE = 4e3;
+var MAX_RENDER_VIEWPORTS = 4;
 function withTimeout(promise, ms) {
   let timer;
   return Promise.race([
@@ -2702,20 +2704,60 @@ function cropCanvas(full, rect, scale) {
   ctx.drawImage(full, sx, sy, sw, sh, 0, 0, sw, sh);
   return out;
 }
+function viewportSize() {
+  return {
+    vw: document.documentElement.clientWidth || window.innerWidth,
+    vh: document.documentElement.clientHeight || window.innerHeight
+  };
+}
+function intersectViewport(rect) {
+  const { vw, vh } = viewportSize();
+  const left = Math.max(0, rect.left);
+  const top = Math.max(0, rect.top);
+  const right = Math.min(vw, rect.left + rect.width);
+  const bottom = Math.min(vh, rect.top + rect.height);
+  if (right - left < 2 || bottom - top < 2) return null;
+  return { left, top, width: right - left, height: bottom - top };
+}
+function planRender(rect, sx, sy, vw, vh) {
+  let left = rect.left + sx;
+  let top = rect.top + sy;
+  let width = rect.width;
+  let height = rect.height;
+  if (width > MAX_CAPTURE_EDGE) {
+    left = Math.max(left, Math.min(sx, left + width - MAX_CAPTURE_EDGE));
+    width = MAX_CAPTURE_EDGE;
+  }
+  if (height > MAX_CAPTURE_EDGE) {
+    top = Math.max(top, Math.min(sy, top + height - MAX_CAPTURE_EDGE));
+    height = MAX_CAPTURE_EDGE;
+  }
+  const x = Math.floor(Math.min(sx, left));
+  const y = Math.floor(Math.min(sy, top));
+  const right = Math.ceil(Math.max(sx + vw, left + width));
+  const bottom = Math.ceil(Math.max(sy + vh, top + height));
+  return {
+    render: { x, y, width: right - x, height: bottom - y },
+    crop: { left: left - x, top: top - y, width, height }
+  };
+}
 async function captureViaDom(rect, sx, sy, aggressiveColors = false) {
   const { default: html2canvas } = await import('html2canvas');
-  const scale = Math.min(window.devicePixelRatio || 1, 2);
-  const vw = document.documentElement.clientWidth || window.innerWidth;
-  const vh = document.documentElement.clientHeight || window.innerHeight;
+  const { vw, vh } = viewportSize();
+  const plan = planRender(rect, sx, sy, vw, vh);
+  let scale = Math.min(window.devicePixelRatio || 1, 2);
+  const budget = vw * vh * MAX_RENDER_VIEWPORTS;
+  const area = plan.render.width * plan.render.height;
+  if (area > budget) scale *= Math.sqrt(budget / area);
   const marked = markStuckElements();
   try {
     const full = await withTimeout(
       html2canvas(document.body, {
-        // Render exactly the current viewport, in document coordinates.
-        x: sx,
-        y: sy,
-        width: vw,
-        height: vh,
+        // The box to render, in document coordinates.
+        x: plan.render.x,
+        y: plan.render.y,
+        width: plan.render.width,
+        height: plan.render.height,
         scale,
         useCORS: true,
         allowTaint: true,
@@ -2724,6 +2766,10 @@ async function captureViaDom(rect, sx, sy, aggressiveColors = false) {
         // CSS Color 4 treatment the document walk applies.
         backgroundColor: safeBackgroundColor(resolvePageBackground(), FALLBACK_PAGE_BACKGROUND),
         logging: false,
+        // The clone's own scroll + viewport, which is what `position: fixed`
+        // resolves against. It stays the LIVE viewport even when the render
+        // box is bigger, so fixed chrome is drawn where the tester sees it
+        // rather than smeared over the whole render.
         scrollX: sx,
         scrollY: sy,
         windowWidth: vw,
@@ -2737,7 +2783,7 @@ async function captureViaDom(rect, sx, sy, aggressiveColors = false) {
       HTML2CANVAS_TIMEOUT_MS
     );
     if (!full) return null;
-    return cropCanvas(full, rect, scale);
+    return cropCanvas(full, plan.crop, scale);
   } finally {
     unmarkStuckElements(marked);
   }
@@ -2750,8 +2796,10 @@ async function captureRegion(rect, scroll, prefer = "auto") {
   const sx = scroll?.x ?? window.scrollX;
   const sy = scroll?.y ?? window.scrollY;
   if (prefer !== "dom" && getExactCaptureStatus() === "live") {
+    const visible = intersectViewport(rect);
+    if (!visible) return { status: "empty" };
     try {
-      const canvas = await withOverlayHidden(() => grabExactRegion(rect));
+      const canvas = await withOverlayHidden(() => grabExactRegion(visible));
       if (canvas) {
         const blob = await encodeShot(canvas);
         if (blob) return { status: "ok", blob, engine: "exact" };
@@ -9957,5 +10005,5 @@ function Qapture({ config }) {
 exports.Qapture = Qapture;
 exports.deleteQaDatabase = deleteQaDatabase;
 exports.initQaStudio = initQaStudio;
-//# sourceMappingURL=chunk-WAOYPLZA.cjs.map
-//# sourceMappingURL=chunk-WAOYPLZA.cjs.map
+//# sourceMappingURL=chunk-CIFJMD2B.cjs.map
+//# sourceMappingURL=chunk-CIFJMD2B.cjs.map

package/dist/{chunk-JSEFC2VP.js → chunk-NVFFN7SC.js}

@@ -2530,6 +2530,8 @@ var FALLBACK_PAGE_BACKGROUND = "#ffffff";
 var MAX_SHOT_EDGE = 1800;
 var WEBP_QUALITY = 0.92;
 var STUCK_ATTR = "data-qa-stuck";
+var MAX_CAPTURE_EDGE = 4e3;
+var MAX_RENDER_VIEWPORTS = 4;
 function withTimeout(promise, ms) {
   let timer;
   return Promise.race([
@@ -2695,20 +2697,60 @@ function cropCanvas(full, rect, scale) {
   ctx.drawImage(full, sx, sy, sw, sh, 0, 0, sw, sh);
   return out;
 }
+function viewportSize() {
+  return {
+    vw: document.documentElement.clientWidth || window.innerWidth,
+    vh: document.documentElement.clientHeight || window.innerHeight
+  };
+}
+function intersectViewport(rect) {
+  const { vw, vh } = viewportSize();
+  const left = Math.max(0, rect.left);
+  const top = Math.max(0, rect.top);
+  const right = Math.min(vw, rect.left + rect.width);
+  const bottom = Math.min(vh, rect.top + rect.height);
+  if (right - left < 2 || bottom - top < 2) return null;
+  return { left, top, width: right - left, height: bottom - top };
+}
+function planRender(rect, sx, sy, vw, vh) {
+  let left = rect.left + sx;
+  let top = rect.top + sy;
+  let width = rect.width;
+  let height = rect.height;
+  if (width > MAX_CAPTURE_EDGE) {
+    left = Math.max(left, Math.min(sx, left + width - MAX_CAPTURE_EDGE));
+    width = MAX_CAPTURE_EDGE;
+  }
+  if (height > MAX_CAPTURE_EDGE) {
+    top = Math.max(top, Math.min(sy, top + height - MAX_CAPTURE_EDGE));
+    height = MAX_CAPTURE_EDGE;
+  }
+  const x = Math.floor(Math.min(sx, left));
+  const y = Math.floor(Math.min(sy, top));
+  const right = Math.ceil(Math.max(sx + vw, left + width));
+  const bottom = Math.ceil(Math.max(sy + vh, top + height));
+  return {
+    render: { x, y, width: right - x, height: bottom - y },
+    crop: { left: left - x, top: top - y, width, height }
+  };
+}
 async function captureViaDom(rect, sx, sy, aggressiveColors = false) {
   const { default: html2canvas } = await import('html2canvas');
-  const scale = Math.min(window.devicePixelRatio || 1, 2);
-  const vw = document.documentElement.clientWidth || window.innerWidth;
-  const vh = document.documentElement.clientHeight || window.innerHeight;
+  const { vw, vh } = viewportSize();
+  const plan = planRender(rect, sx, sy, vw, vh);
+  let scale = Math.min(window.devicePixelRatio || 1, 2);
+  const budget = vw * vh * MAX_RENDER_VIEWPORTS;
+  const area = plan.render.width * plan.render.height;
+  if (area > budget) scale *= Math.sqrt(budget / area);
   const marked = markStuckElements();
   try {
     const full = await withTimeout(
       html2canvas(document.body, {
-        // Render exactly the current viewport, in document coordinates.
-        x: sx,
-        y: sy,
-        width: vw,
-        height: vh,
+        // The box to render, in document coordinates.
+        x: plan.render.x,
+        y: plan.render.y,
+        width: plan.render.width,
+        height: plan.render.height,
         scale,
         useCORS: true,
         allowTaint: true,
@@ -2717,6 +2759,10 @@ async function captureViaDom(rect, sx, sy, aggressiveColors = false) {
         // CSS Color 4 treatment the document walk applies.
         backgroundColor: safeBackgroundColor(resolvePageBackground(), FALLBACK_PAGE_BACKGROUND),
         logging: false,
+        // The clone's own scroll + viewport, which is what `position: fixed`
+        // resolves against. It stays the LIVE viewport even when the render
+        // box is bigger, so fixed chrome is drawn where the tester sees it
+        // rather than smeared over the whole render.
         scrollX: sx,
         scrollY: sy,
         windowWidth: vw,
@@ -2730,7 +2776,7 @@ async function captureViaDom(rect, sx, sy, aggressiveColors = false) {
       HTML2CANVAS_TIMEOUT_MS
     );
     if (!full) return null;
-    return cropCanvas(full, rect, scale);
+    return cropCanvas(full, plan.crop, scale);
   } finally {
     unmarkStuckElements(marked);
   }
@@ -2743,8 +2789,10 @@ async function captureRegion(rect, scroll, prefer = "auto") {
   const sx = scroll?.x ?? window.scrollX;
   const sy = scroll?.y ?? window.scrollY;
   if (prefer !== "dom" && getExactCaptureStatus() === "live") {
+    const visible = intersectViewport(rect);
+    if (!visible) return { status: "empty" };
     try {
-      const canvas = await withOverlayHidden(() => grabExactRegion(rect));
+      const canvas = await withOverlayHidden(() => grabExactRegion(visible));
       if (canvas) {
         const blob = await encodeShot(canvas);
         if (blob) return { status: "ok", blob, engine: "exact" };
@@ -9948,5 +9996,5 @@ function Qapture({ config }) {
 }
 
 export { Qapture, deleteQaDatabase, initQaStudio };
-//# sourceMappingURL=chunk-JSEFC2VP.js.map
-//# sourceMappingURL=chunk-JSEFC2VP.js.map
+//# sourceMappingURL=chunk-NVFFN7SC.js.map
+//# sourceMappingURL=chunk-NVFFN7SC.js.map

package/dist/index.cjs

@@ -1,24 +1,24 @@
 'use strict';
 
-var chunkWAOYPLZA_cjs = require('./chunk-WAOYPLZA.cjs');
+var chunkCIFJMD2B_cjs = require('./chunk-CIFJMD2B.cjs');
 
 
 
 Object.defineProperty(exports, "QaStudio", {
   enumerable: true,
-  get: function () { return chunkWAOYPLZA_cjs.Qapture; }
+  get: function () { return chunkCIFJMD2B_cjs.Qapture; }
 });
 Object.defineProperty(exports, "Qapture", {
   enumerable: true,
-  get: function () { return chunkWAOYPLZA_cjs.Qapture; }
+  get: function () { return chunkCIFJMD2B_cjs.Qapture; }
 });
 Object.defineProperty(exports, "deleteQaDatabase", {
   enumerable: true,
-  get: function () { return chunkWAOYPLZA_cjs.deleteQaDatabase; }
+  get: function () { return chunkCIFJMD2B_cjs.deleteQaDatabase; }
 });
 Object.defineProperty(exports, "initQaStudio", {
   enumerable: true,
-  get: function () { return chunkWAOYPLZA_cjs.initQaStudio; }
+  get: function () { return chunkCIFJMD2B_cjs.initQaStudio; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Qapture as QaStudio, Qapture, deleteQaDatabase, initQaStudio } from './chunk-JSEFC2VP.js';
+export { Qapture as QaStudio, Qapture, deleteQaDatabase, initQaStudio } from './chunk-NVFFN7SC.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/next.cjs

@@ -1,21 +1,21 @@
 "use client";
 'use strict';
 
-var chunkWAOYPLZA_cjs = require('./chunk-WAOYPLZA.cjs');
+var chunkCIFJMD2B_cjs = require('./chunk-CIFJMD2B.cjs');
 
 
 
 Object.defineProperty(exports, "QaStudio", {
   enumerable: true,
-  get: function () { return chunkWAOYPLZA_cjs.Qapture; }
+  get: function () { return chunkCIFJMD2B_cjs.Qapture; }
 });
 Object.defineProperty(exports, "Qapture", {
   enumerable: true,
-  get: function () { return chunkWAOYPLZA_cjs.Qapture; }
+  get: function () { return chunkCIFJMD2B_cjs.Qapture; }
 });
 Object.defineProperty(exports, "initQaStudio", {
   enumerable: true,
-  get: function () { return chunkWAOYPLZA_cjs.initQaStudio; }
+  get: function () { return chunkCIFJMD2B_cjs.initQaStudio; }
 });
 //# sourceMappingURL=next.cjs.map
 //# sourceMappingURL=next.cjs.map

package/dist/next.js

@@ -1,4 +1,4 @@
 "use client";
-export { Qapture as QaStudio, Qapture, initQaStudio } from './chunk-JSEFC2VP.js';
+export { Qapture as QaStudio, Qapture, initQaStudio } from './chunk-NVFFN7SC.js';
 //# sourceMappingURL=next.js.map
 //# sourceMappingURL=next.js.map

package/dist/standalone.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkWAOYPLZA_cjs = require('./chunk-WAOYPLZA.cjs');
+var chunkCIFJMD2B_cjs = require('./chunk-CIFJMD2B.cjs');
 
 // src/standalone.ts
 if (typeof window !== "undefined" && typeof customElements !== "undefined" && !customElements.get("qapture-widget")) {
@@ -38,7 +38,7 @@ if (typeof window !== "undefined" && typeof customElements !== "undefined" && !c
 
 Object.defineProperty(exports, "initQaStudio", {
   enumerable: true,
-  get: function () { return chunkWAOYPLZA_cjs.initQaStudio; }
+  get: function () { return chunkCIFJMD2B_cjs.initQaStudio; }
 });
 //# sourceMappingURL=standalone.cjs.map
 //# sourceMappingURL=standalone.cjs.map

package/dist/standalone.js

@@ -1,4 +1,4 @@
-export { initQaStudio } from './chunk-JSEFC2VP.js';
+export { initQaStudio } from './chunk-NVFFN7SC.js';
 
 // src/standalone.ts
 if (typeof window !== "undefined" && typeof customElements !== "undefined" && !customElements.get("qapture-widget")) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qapture2",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Drop-in, AI-aware in-browser QA capture widget. A tester annotates the live app (element/region + auto-screenshot + note), tracks a graded testing journey, and exports a ZIP your own coding agent reads. Ships zero AI.",
   "type": "module",
   "license": "MIT",
@@ -89,6 +89,7 @@
     "standalone-smoke": "node scripts/standalone-smoke.mjs",
     "browser-test": "node scripts/browser-test.mjs",
     "capture-accuracy-test": "node scripts/capture-accuracy-test.mjs",
+    "element-capture-test": "node scripts/element-capture-test.mjs",
     "loop-features-test": "node scripts/loop-features-test.mjs",
     "walk-test": "node scripts/walk-test.mjs",
     "modern-css-test": "node scripts/modern-css-test.mjs",