npm - qapture2 - Versions diffs - 0.7.1 → 0.7.3 - Mend

qapture2 0.7.1 → 0.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +40 -0
package/dist/{chunk-JSEFC2VP.js → chunk-BM3ESR2O.js} +191 -69
package/dist/{chunk-WAOYPLZA.cjs → chunk-C5WJFSMN.cjs} +191 -69
package/dist/index.cjs +5 -5
package/dist/index.js +1 -1
package/dist/next.cjs +4 -4
package/dist/next.js +1 -1
package/dist/standalone.cjs +2 -2
package/dist/standalone.js +1 -1
package/package.json +2 -1

package/README.md CHANGED Viewed

@@ -315,6 +315,46 @@ 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 ~64 MB device-pixel 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 four cases.
+**v0.7.3 corrected the half of that which was wrong.** Chasing an element's
+whole box is only right when the whole box is *drawn*. Inside a scroll
+container it isn't: a dashboard scrolls an inner `overflow:auto` box, so a
+3000px column inside a 700px box is 700px of pixels and 2300px of nothing.
+0.7.2 rendered the nothing — measured at 23.3% element, 76.7% empty page, with
+the real content squeezed from 1040px wide to 312px by the long-edge cap.
+Captures are now clipped to what the browser actually paints: the element's box
+intersected with every ancestor that clips it, on either axis, up to `<html>`.
+The viewport is deliberately not a clipper, so a long form on an ordinary
+scrolling page still captures in full. Same fixture after: 100% element, full
+1040×1400. The hover outline is clipped identically, so what you highlight is
+what you get.
+### "The screenshot looks simulated"
+Because by default it is. The DOM engine re-draws your page; fonts shift,
+shadows and gradients flatten, `<canvas>` and video come out blank. From
+v0.7.3 a redrawn capture says so under the preview and offers a one-tap **Use
+real screenshots**, which grants tab-share and re-shoots the same selection
+with the exact engine below. Chromium desktop only — on Safari and Firefox the
+redraw is the only engine there is, so for screenshot-critical QA, test in
+Chrome.
 ### `exact` — opt-in, pixel-for-pixel
 Uses the Screen Capture API to photograph **this tab's real composited

package/dist/{chunk-JSEFC2VP.js → chunk-BM3ESR2O.js} RENAMED Viewed

@@ -1775,6 +1775,8 @@ var STR = {
     expected_label: "Expected",
     exact_label: "Pixel-exact shots",
     exact_hint: "Screenshots become a real photo of the tab instead of a redraw. Asks once to share this tab; nothing leaves your device.",
+    redraw_notice: "This is a redraw of the page, not a real photo.",
+    redraw_action: "Use real screenshots",
     exact_on: "Pixel-exact screenshots on",
     exact_off: "Back to redrawn screenshots",
     exact_declined: "Staying on redrawn screenshots",
@@ -1969,6 +1971,8 @@ var STR = {
     expected_label: "\u0627\u0644\u0645\u062A\u0648\u0642\u0639",
     exact_label: "\u0644\u0642\u0637\u0627\u062A \u0645\u0637\u0627\u0628\u0642\u0629 \u062A\u0645\u0627\u0645\u064B\u0627",
     exact_hint: "\u062A\u0635\u0628\u062D \u0627\u0644\u0644\u0642\u0637\u0629 \u0635\u0648\u0631\u0629 \u062D\u0642\u064A\u0642\u064A\u0629 \u0644\u0644\u062A\u0628\u0648\u064A\u0628 \u0628\u062F\u0644 \u0625\u0639\u0627\u062F\u0629 \u0631\u0633\u0645\u0647. \u064A\u064F\u0637\u0644\u0628 \u0627\u0644\u0625\u0630\u0646 \u0645\u0631\u0629 \u0648\u0627\u062D\u062F\u0629\u060C \u0648\u0644\u0627 \u0634\u064A\u0621 \u064A\u063A\u0627\u062F\u0631 \u062C\u0647\u0627\u0632\u0643.",
+    redraw_notice: "\u0647\u0630\u0647 \u0625\u0639\u0627\u062F\u0629 \u0631\u0633\u0645 \u0644\u0644\u0635\u0641\u062D\u0629\u060C \u0648\u0644\u064A\u0633\u062A \u0635\u0648\u0631\u0629 \u062D\u0642\u064A\u0642\u064A\u0629.",
+    redraw_action: "\u0627\u0633\u062A\u062E\u062F\u0645 \u0644\u0642\u0637\u0627\u062A \u062D\u0642\u064A\u0642\u064A\u0629",
     exact_on: "\u062A\u0645 \u062A\u0641\u0639\u064A\u0644 \u0627\u0644\u0644\u0642\u0637\u0627\u062A \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0629",
     exact_off: "\u0627\u0644\u0639\u0648\u062F\u0629 \u0625\u0644\u0649 \u0627\u0644\u0644\u0642\u0637\u0627\u062A \u0627\u0644\u0645\u064F\u0639\u0627\u062F \u0631\u0633\u0645\u0647\u0627",
     exact_declined: "\u0633\u0646\u0628\u0642\u0649 \u0639\u0644\u0649 \u0627\u0644\u0644\u0642\u0637\u0627\u062A \u0627\u0644\u0645\u064F\u0639\u0627\u062F \u0631\u0633\u0645\u0647\u0627",
@@ -2530,6 +2534,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_DEVICE_PIXELS = 16e6;
 function withTimeout(promise, ms) {
   let timer;
   return Promise.race([
@@ -2695,20 +2701,94 @@ 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 clipToPaintedArea(el, rect) {
+  let left = rect.left;
+  let top = rect.top;
+  let right = rect.left + rect.width;
+  let bottom = rect.top + rect.height;
+  let node = el.parentElement;
+  while (node) {
+    let style;
+    try {
+      style = getComputedStyle(node);
+    } catch {
+      break;
+    }
+    const clipsX = style.overflowX !== "visible";
+    const clipsY = style.overflowY !== "visible";
+    if (clipsX || clipsY) {
+      const b = node.getBoundingClientRect();
+      const padLeft = b.left + node.clientLeft;
+      const padTop = b.top + node.clientTop;
+      if (clipsX) {
+        left = Math.max(left, padLeft);
+        right = Math.min(right, padLeft + node.clientWidth);
+      }
+      if (clipsY) {
+        top = Math.max(top, padTop);
+        bottom = Math.min(bottom, padTop + node.clientHeight);
+      }
+    }
+    node = node.parentElement;
+  }
+  if (right - left < 2 || bottom - top < 2) return rect;
+  return { left, top, width: right - left, height: bottom - top };
+}
+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 area = plan.render.width * plan.render.height;
+  if (area * scale * scale > MAX_RENDER_DEVICE_PIXELS) {
+    scale = Math.sqrt(MAX_RENDER_DEVICE_PIXELS / 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 +2797,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 +2814,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 +2827,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" };
@@ -8825,6 +8911,7 @@ function CaptureMode() {
   const [candidate, setCandidate] = useState(null);
   const [regionMode, setRegionMode] = useState(false);
   const [shot, setShot] = useState(null);
+  const [shotEngine, setShotEngine] = useState(null);
   const [shotUrl, setShotUrl] = useState(null);
   const [capturing, setCapturing] = useState(false);
   const [captureError, setCaptureError] = useState(false);
@@ -8867,6 +8954,7 @@ function CaptureMode() {
         return;
       }
       setCaptureError(outcome.status === "failed");
+      setShotEngine(outcome.status === "ok" ? outcome.engine : null);
       setShot(blob);
       setShotUrl((old) => {
         if (old) URL.revokeObjectURL(old);
@@ -8931,7 +9019,9 @@ function CaptureMode() {
       }
       const r = el.getBoundingClientRect();
       setHover({
-        rect: { top: r.top, left: r.left, width: r.width, height: r.height },
+        // Highlight only what will actually be captured, so the outline is a
+        // promise the screenshot can keep.
+        rect: clipToPaintedArea(el, { top: r.top, left: r.left, width: r.width, height: r.height }),
         selector: getStableSelector(el)
       });
     }
@@ -8978,7 +9068,10 @@ function CaptureMode() {
     const r = el.getBoundingClientRect();
     const sel = {
       kind: "element",
-      rect: { top: r.top, left: r.left, width: r.width, height: r.height },
+      // What the browser PAINTS of this element, not its full bounding box —
+      // a row inside a scrolled table is only ever drawn where the table shows
+      // it. See clipToPaintedArea().
+      rect: clipToPaintedArea(el, { top: r.top, left: r.left, width: r.width, height: r.height }),
       selector: getStableSelector(el),
       text: (el.innerText ?? el.textContent ?? "").trim().slice(0, 120),
       tagName: el.tagName.toLowerCase()
@@ -9589,7 +9682,7 @@ function CaptureMode() {
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "qa-space-y-2 qa-p-3", children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs(
               "div",
               {
                 className: "qa-flex qa-min-h-16 qa-items-center qa-justify-center qa-rounded-lg qa-border",
@@ -9597,66 +9690,95 @@ function CaptureMode() {
                   borderColor: "var(--qa-border-subtle)",
                   background: "var(--qa-surface-0)"
                 },
-                children: capturing ? /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-items-center qa-gap-2 qa-py-4 qa-text-xs qa-text-accent", children: [
-                  /* @__PURE__ */ jsx(Icon, { name: "Loader2", size: 16, className: "qa-animate-spin" }),
-                  t("capturing")
-                ] }) : shotUrl ? /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setDrawing(true),
-                    title: t("draw_label"),
-                    "aria-label": t("draw_label"),
-                    className: "qa-relative qa-group qa-tap",
-                    style: { background: "transparent", border: "none", padding: 0, cursor: "pointer" },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "img",
-                        {
-                          src: shotUrl,
-                          alt: "capture",
-                          className: "qa-max-h-32 qa-rounded-md"
-                        }
-                      ),
+                children: [
+                  capturing ? /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-items-center qa-gap-2 qa-py-4 qa-text-xs qa-text-accent", children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "Loader2", size: 16, className: "qa-animate-spin" }),
+                    t("capturing")
+                  ] }) : shotUrl ? /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDrawing(true),
+                      title: t("draw_label"),
+                      "aria-label": t("draw_label"),
+                      className: "qa-relative qa-group qa-tap",
+                      style: { background: "transparent", border: "none", padding: 0, cursor: "pointer" },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: shotUrl,
+                            alt: "capture",
+                            className: "qa-max-h-32 qa-rounded-md"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: "qa-absolute qa-inline-flex qa-items-center qa-gap-1 qa-rounded-full qa-px-1.5 qa-py-0.5 qa-text-10",
+                            style: {
+                              bottom: 4,
+                              insetInlineEnd: 4,
+                              background: "var(--qa-surface-1)",
+                              color: "var(--qa-ink-hi)",
+                              border: "1px solid var(--qa-border-subtle)"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(Icon, { name: "Pencil", size: 10 }),
+                              t("draw_label")
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ) : captureError ? (
+                    // The render broke rather than being skipped — offer a retry
+                    // against the same selection instead of a dead-end message.
+                    /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-flex-col qa-items-center qa-gap-2 qa-py-3", children: [
+                      /* @__PURE__ */ jsx("span", { className: "qa-text-xs qa-text-red-600", children: t("capture_failed") }),
                       /* @__PURE__ */ jsxs(
-                        "span",
+                        "button",
                         {
-                          className: "qa-absolute qa-inline-flex qa-items-center qa-gap-1 qa-rounded-full qa-px-1.5 qa-py-0.5 qa-text-10",
-                          style: {
-                            bottom: 4,
-                            insetInlineEnd: 4,
-                            background: "var(--qa-surface-1)",
-                            color: "var(--qa-ink-hi)",
-                            border: "1px solid var(--qa-border-subtle)"
-                          },
+                          type: "button",
+                          onClick: () => selection && void runCapture(selection.rect),
+                          className: "qa-tap qa-inline-flex qa-items-center qa-gap-1.5 qa-rounded-md qa-border qa-border-subtle qa-px-2 qa-py-1 qa-text-xs qa-text-mid qa-focus-ring",
+                          style: { background: "transparent", cursor: "pointer" },
                           children: [
-                            /* @__PURE__ */ jsx(Icon, { name: "Pencil", size: 10 }),
-                            t("draw_label")
+                            /* @__PURE__ */ jsx(Icon, { name: "RotateCcw", size: 13 }),
+                            t("retry")
                           ]
                         }
                       )
-                    ]
-                  }
-                ) : captureError ? (
-                  // The render broke rather than being skipped — offer a retry
-                  // against the same selection instead of a dead-end message.
-                  /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-flex-col qa-items-center qa-gap-2 qa-py-3", children: [
-                    /* @__PURE__ */ jsx("span", { className: "qa-text-xs qa-text-red-600", children: t("capture_failed") }),
-                    /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => selection && void runCapture(selection.rect),
-                        className: "qa-tap qa-inline-flex qa-items-center qa-gap-1.5 qa-rounded-md qa-border qa-border-subtle qa-px-2 qa-py-1 qa-text-xs qa-text-mid qa-focus-ring",
-                        style: { background: "transparent", cursor: "pointer" },
-                        children: [
-                          /* @__PURE__ */ jsx(Icon, { name: "RotateCcw", size: 13 }),
-                          t("retry")
-                        ]
-                      }
-                    )
-                  ] })
-                ) : /* @__PURE__ */ jsx("span", { className: "qa-py-4 qa-text-xs qa-text-slate-400", children: t("no_shot") })
+                    ] })
+                  ) : /* @__PURE__ */ jsx("span", { className: "qa-py-4 qa-text-xs qa-text-slate-400", children: t("no_shot") }),
+                  shotUrl && shotEngine === "dom" && exactShots.supported && exactShots.status !== "live" && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      "data-qa-redraw-offer": "true",
+                      className: "qa-mt-1.5 qa-flex qa-items-center qa-justify-center qa-flex-wrap qa-gap-1.5 qa-text-10 qa-text-mid",
+                      children: [
+                        t("redraw_notice"),
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => void (async () => {
+                              const granted = await enableExactShots();
+                              if (granted && selection) void runCapture(selection.rect);
+                            })(),
+                            title: t("exact_hint"),
+                            className: "qa-tap qa-inline-flex qa-items-center qa-gap-1 qa-rounded-full qa-border qa-border-subtle qa-px-1.5 qa-py-0.5 qa-text-10 qa-text-hi qa-focus-ring",
+                            style: { background: "transparent", cursor: "pointer" },
+                            children: [
+                              /* @__PURE__ */ jsx(Icon, { name: "Camera", size: 10 }),
+                              t("redraw_action")
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
               }
             ),
             /* @__PURE__ */ jsx(LocationReveal, { target: selection }),
@@ -9948,5 +10070,5 @@ function Qapture({ config }) {
 }
 export { Qapture, deleteQaDatabase, initQaStudio };
-//# sourceMappingURL=chunk-JSEFC2VP.js.map
-//# sourceMappingURL=chunk-JSEFC2VP.js.map
+//# sourceMappingURL=chunk-BM3ESR2O.js.map
+//# sourceMappingURL=chunk-BM3ESR2O.js.map

package/dist/{chunk-WAOYPLZA.cjs → chunk-C5WJFSMN.cjs} RENAMED Viewed

@@ -1782,6 +1782,8 @@ var STR = {
     expected_label: "Expected",
     exact_label: "Pixel-exact shots",
     exact_hint: "Screenshots become a real photo of the tab instead of a redraw. Asks once to share this tab; nothing leaves your device.",
+    redraw_notice: "This is a redraw of the page, not a real photo.",
+    redraw_action: "Use real screenshots",
     exact_on: "Pixel-exact screenshots on",
     exact_off: "Back to redrawn screenshots",
     exact_declined: "Staying on redrawn screenshots",
@@ -1976,6 +1978,8 @@ var STR = {
     expected_label: "\u0627\u0644\u0645\u062A\u0648\u0642\u0639",
     exact_label: "\u0644\u0642\u0637\u0627\u062A \u0645\u0637\u0627\u0628\u0642\u0629 \u062A\u0645\u0627\u0645\u064B\u0627",
     exact_hint: "\u062A\u0635\u0628\u062D \u0627\u0644\u0644\u0642\u0637\u0629 \u0635\u0648\u0631\u0629 \u062D\u0642\u064A\u0642\u064A\u0629 \u0644\u0644\u062A\u0628\u0648\u064A\u0628 \u0628\u062F\u0644 \u0625\u0639\u0627\u062F\u0629 \u0631\u0633\u0645\u0647. \u064A\u064F\u0637\u0644\u0628 \u0627\u0644\u0625\u0630\u0646 \u0645\u0631\u0629 \u0648\u0627\u062D\u062F\u0629\u060C \u0648\u0644\u0627 \u0634\u064A\u0621 \u064A\u063A\u0627\u062F\u0631 \u062C\u0647\u0627\u0632\u0643.",
+    redraw_notice: "\u0647\u0630\u0647 \u0625\u0639\u0627\u062F\u0629 \u0631\u0633\u0645 \u0644\u0644\u0635\u0641\u062D\u0629\u060C \u0648\u0644\u064A\u0633\u062A \u0635\u0648\u0631\u0629 \u062D\u0642\u064A\u0642\u064A\u0629.",
+    redraw_action: "\u0627\u0633\u062A\u062E\u062F\u0645 \u0644\u0642\u0637\u0627\u062A \u062D\u0642\u064A\u0642\u064A\u0629",
     exact_on: "\u062A\u0645 \u062A\u0641\u0639\u064A\u0644 \u0627\u0644\u0644\u0642\u0637\u0627\u062A \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0629",
     exact_off: "\u0627\u0644\u0639\u0648\u062F\u0629 \u0625\u0644\u0649 \u0627\u0644\u0644\u0642\u0637\u0627\u062A \u0627\u0644\u0645\u064F\u0639\u0627\u062F \u0631\u0633\u0645\u0647\u0627",
     exact_declined: "\u0633\u0646\u0628\u0642\u0649 \u0639\u0644\u0649 \u0627\u0644\u0644\u0642\u0637\u0627\u062A \u0627\u0644\u0645\u064F\u0639\u0627\u062F \u0631\u0633\u0645\u0647\u0627",
@@ -2537,6 +2541,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_DEVICE_PIXELS = 16e6;
 function withTimeout(promise, ms) {
   let timer;
   return Promise.race([
@@ -2702,20 +2708,94 @@ 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 clipToPaintedArea(el, rect) {
+  let left = rect.left;
+  let top = rect.top;
+  let right = rect.left + rect.width;
+  let bottom = rect.top + rect.height;
+  let node = el.parentElement;
+  while (node) {
+    let style;
+    try {
+      style = getComputedStyle(node);
+    } catch {
+      break;
+    }
+    const clipsX = style.overflowX !== "visible";
+    const clipsY = style.overflowY !== "visible";
+    if (clipsX || clipsY) {
+      const b = node.getBoundingClientRect();
+      const padLeft = b.left + node.clientLeft;
+      const padTop = b.top + node.clientTop;
+      if (clipsX) {
+        left = Math.max(left, padLeft);
+        right = Math.min(right, padLeft + node.clientWidth);
+      }
+      if (clipsY) {
+        top = Math.max(top, padTop);
+        bottom = Math.min(bottom, padTop + node.clientHeight);
+      }
+    }
+    node = node.parentElement;
+  }
+  if (right - left < 2 || bottom - top < 2) return rect;
+  return { left, top, width: right - left, height: bottom - top };
+}
+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 area = plan.render.width * plan.render.height;
+  if (area * scale * scale > MAX_RENDER_DEVICE_PIXELS) {
+    scale = Math.sqrt(MAX_RENDER_DEVICE_PIXELS / 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 +2804,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 +2821,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 +2834,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" };
@@ -8832,6 +8918,7 @@ function CaptureMode() {
   const [candidate, setCandidate] = React.useState(null);
   const [regionMode, setRegionMode] = React.useState(false);
   const [shot, setShot] = React.useState(null);
+  const [shotEngine, setShotEngine] = React.useState(null);
   const [shotUrl, setShotUrl] = React.useState(null);
   const [capturing, setCapturing] = React.useState(false);
   const [captureError, setCaptureError] = React.useState(false);
@@ -8874,6 +8961,7 @@ function CaptureMode() {
         return;
       }
       setCaptureError(outcome.status === "failed");
+      setShotEngine(outcome.status === "ok" ? outcome.engine : null);
       setShot(blob);
       setShotUrl((old) => {
         if (old) URL.revokeObjectURL(old);
@@ -8938,7 +9026,9 @@ function CaptureMode() {
       }
       const r = el.getBoundingClientRect();
       setHover({
-        rect: { top: r.top, left: r.left, width: r.width, height: r.height },
+        // Highlight only what will actually be captured, so the outline is a
+        // promise the screenshot can keep.
+        rect: clipToPaintedArea(el, { top: r.top, left: r.left, width: r.width, height: r.height }),
         selector: getStableSelector(el)
       });
     }
@@ -8985,7 +9075,10 @@ function CaptureMode() {
     const r = el.getBoundingClientRect();
     const sel = {
       kind: "element",
-      rect: { top: r.top, left: r.left, width: r.width, height: r.height },
+      // What the browser PAINTS of this element, not its full bounding box —
+      // a row inside a scrolled table is only ever drawn where the table shows
+      // it. See clipToPaintedArea().
+      rect: clipToPaintedArea(el, { top: r.top, left: r.left, width: r.width, height: r.height }),
       selector: getStableSelector(el),
       text: (el.innerText ?? el.textContent ?? "").trim().slice(0, 120),
       tagName: el.tagName.toLowerCase()
@@ -9596,7 +9689,7 @@ function CaptureMode() {
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "qa-space-y-2 qa-p-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 className: "qa-flex qa-min-h-16 qa-items-center qa-justify-center qa-rounded-lg qa-border",
@@ -9604,66 +9697,95 @@ function CaptureMode() {
                   borderColor: "var(--qa-border-subtle)",
                   background: "var(--qa-surface-0)"
                 },
-                children: capturing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "qa-flex qa-items-center qa-gap-2 qa-py-4 qa-text-xs qa-text-accent", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "Loader2", size: 16, className: "qa-animate-spin" }),
-                  t("capturing")
-                ] }) : shotUrl ? /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setDrawing(true),
-                    title: t("draw_label"),
-                    "aria-label": t("draw_label"),
-                    className: "qa-relative qa-group qa-tap",
-                    style: { background: "transparent", border: "none", padding: 0, cursor: "pointer" },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "img",
-                        {
-                          src: shotUrl,
-                          alt: "capture",
-                          className: "qa-max-h-32 qa-rounded-md"
-                        }
-                      ),
+                children: [
+                  capturing ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "qa-flex qa-items-center qa-gap-2 qa-py-4 qa-text-xs qa-text-accent", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "Loader2", size: 16, className: "qa-animate-spin" }),
+                    t("capturing")
+                  ] }) : shotUrl ? /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setDrawing(true),
+                      title: t("draw_label"),
+                      "aria-label": t("draw_label"),
+                      className: "qa-relative qa-group qa-tap",
+                      style: { background: "transparent", border: "none", padding: 0, cursor: "pointer" },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "img",
+                          {
+                            src: shotUrl,
+                            alt: "capture",
+                            className: "qa-max-h-32 qa-rounded-md"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          "span",
+                          {
+                            className: "qa-absolute qa-inline-flex qa-items-center qa-gap-1 qa-rounded-full qa-px-1.5 qa-py-0.5 qa-text-10",
+                            style: {
+                              bottom: 4,
+                              insetInlineEnd: 4,
+                              background: "var(--qa-surface-1)",
+                              color: "var(--qa-ink-hi)",
+                              border: "1px solid var(--qa-border-subtle)"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "Pencil", size: 10 }),
+                              t("draw_label")
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ) : captureError ? (
+                    // The render broke rather than being skipped — offer a retry
+                    // against the same selection instead of a dead-end message.
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "qa-flex qa-flex-col qa-items-center qa-gap-2 qa-py-3", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "qa-text-xs qa-text-red-600", children: t("capture_failed") }),
                       /* @__PURE__ */ jsxRuntime.jsxs(
-                        "span",
+                        "button",
                         {
-                          className: "qa-absolute qa-inline-flex qa-items-center qa-gap-1 qa-rounded-full qa-px-1.5 qa-py-0.5 qa-text-10",
-                          style: {
-                            bottom: 4,
-                            insetInlineEnd: 4,
-                            background: "var(--qa-surface-1)",
-                            color: "var(--qa-ink-hi)",
-                            border: "1px solid var(--qa-border-subtle)"
-                          },
+                          type: "button",
+                          onClick: () => selection && void runCapture(selection.rect),
+                          className: "qa-tap qa-inline-flex qa-items-center qa-gap-1.5 qa-rounded-md qa-border qa-border-subtle qa-px-2 qa-py-1 qa-text-xs qa-text-mid qa-focus-ring",
+                          style: { background: "transparent", cursor: "pointer" },
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "Pencil", size: 10 }),
-                            t("draw_label")
+                            /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "RotateCcw", size: 13 }),
+                            t("retry")
                           ]
                         }
                       )
-                    ]
-                  }
-                ) : captureError ? (
-                  // The render broke rather than being skipped — offer a retry
-                  // against the same selection instead of a dead-end message.
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "qa-flex qa-flex-col qa-items-center qa-gap-2 qa-py-3", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "qa-text-xs qa-text-red-600", children: t("capture_failed") }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => selection && void runCapture(selection.rect),
-                        className: "qa-tap qa-inline-flex qa-items-center qa-gap-1.5 qa-rounded-md qa-border qa-border-subtle qa-px-2 qa-py-1 qa-text-xs qa-text-mid qa-focus-ring",
-                        style: { background: "transparent", cursor: "pointer" },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "RotateCcw", size: 13 }),
-                          t("retry")
-                        ]
-                      }
-                    )
-                  ] })
-                ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "qa-py-4 qa-text-xs qa-text-slate-400", children: t("no_shot") })
+                    ] })
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "qa-py-4 qa-text-xs qa-text-slate-400", children: t("no_shot") }),
+                  shotUrl && shotEngine === "dom" && exactShots.supported && exactShots.status !== "live" && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      "data-qa-redraw-offer": "true",
+                      className: "qa-mt-1.5 qa-flex qa-items-center qa-justify-center qa-flex-wrap qa-gap-1.5 qa-text-10 qa-text-mid",
+                      children: [
+                        t("redraw_notice"),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => void (async () => {
+                              const granted = await enableExactShots();
+                              if (granted && selection) void runCapture(selection.rect);
+                            })(),
+                            title: t("exact_hint"),
+                            className: "qa-tap qa-inline-flex qa-items-center qa-gap-1 qa-rounded-full qa-border qa-border-subtle qa-px-1.5 qa-py-0.5 qa-text-10 qa-text-hi qa-focus-ring",
+                            style: { background: "transparent", cursor: "pointer" },
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "Camera", size: 10 }),
+                              t("redraw_action")
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(LocationReveal, { target: selection }),
@@ -9957,5 +10079,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-C5WJFSMN.cjs.map
+//# sourceMappingURL=chunk-C5WJFSMN.cjs.map

package/dist/index.cjs CHANGED Viewed

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

package/dist/index.js CHANGED Viewed

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

package/dist/next.cjs CHANGED Viewed

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

package/dist/next.js CHANGED Viewed

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

package/dist/standalone.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var chunkWAOYPLZA_cjs = require('./chunk-WAOYPLZA.cjs');
+var chunkC5WJFSMN_cjs = require('./chunk-C5WJFSMN.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 chunkC5WJFSMN_cjs.initQaStudio; }
 });
 //# sourceMappingURL=standalone.cjs.map
 //# sourceMappingURL=standalone.cjs.map

package/dist/standalone.js CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "qapture2",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "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",