npm - qapture2 - Versions diffs - 0.7.2 → 0.7.4 - Mend

qapture2 0.7.2 → 0.7.4

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 +34 -4
package/dist/{chunk-CIFJMD2B.cjs → chunk-7WHQBMVP.cjs} +150 -56
package/dist/{chunk-NVFFN7SC.js → chunk-ZAWR5VJR.js} +150 -56
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

@@ -326,10 +326,40 @@ 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.
+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.
+That upgrade is Chromium-only, because it depends on `preferCurrentTab`. On
+Safari and Firefox the redraw is the only engine there is — so from v0.7.4 the
+card says so outright and points you at Chrome, rather than leaving you to
+conclude the tool is broken. **If your app draws anything with inline SVG, a
+`<canvas>`, or video, do your screenshot QA in Chrome.** A redraw will render
+an SVG chart as bare outlines and a canvas as a blank box, every time, in any
+tool built this way.
 ### `exact` — opt-in, pixel-for-pixel

package/dist/{chunk-CIFJMD2B.cjs → chunk-7WHQBMVP.cjs} RENAMED Viewed

@@ -1782,6 +1782,9 @@ 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",
+    redraw_no_engine: "This browser cannot photograph a tab, so charts and canvases may come out wrong. Open the app in Chrome, Edge or Brave for true screenshots.",
     exact_on: "Pixel-exact screenshots on",
     exact_off: "Back to redrawn screenshots",
     exact_declined: "Staying on redrawn screenshots",
@@ -1976,6 +1979,9 @@ 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",
+    redraw_no_engine: "\u0644\u0627 \u064A\u0633\u062A\u0637\u064A\u0639 \u0647\u0630\u0627 \u0627\u0644\u0645\u062A\u0635\u0641\u062D \u062A\u0635\u0648\u064A\u0631 \u0627\u0644\u062A\u0628\u0648\u064A\u0628\u060C \u0644\u0630\u0627 \u0642\u062F \u062A\u0638\u0647\u0631 \u0627\u0644\u0645\u062E\u0637\u0637\u0627\u062A \u0648\u0627\u0644\u0644\u0648\u062D\u0627\u062A \u0628\u0634\u0643\u0644 \u062E\u0627\u0637\u0626. \u0627\u0641\u062A\u062D \u0627\u0644\u062A\u0637\u0628\u064A\u0642 \u0641\u064A Chrome \u0623\u0648 Edge \u0623\u0648 Brave \u0644\u0644\u062D\u0635\u0648\u0644 \u0639\u0644\u0649 \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",
@@ -2538,7 +2544,7 @@ 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;
+var MAX_RENDER_DEVICE_PIXELS = 16e6;
 function withTimeout(promise, ms) {
   let timer;
   return Promise.race([
@@ -2710,6 +2716,39 @@ function viewportSize() {
     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);
@@ -2746,9 +2785,10 @@ async function captureViaDom(rect, sx, sy, aggressiveColors = false) {
   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);
+  if (area * scale * scale > MAX_RENDER_DEVICE_PIXELS) {
+    scale = Math.sqrt(MAX_RENDER_DEVICE_PIXELS / area);
+  }
   const marked = markStuckElements();
   try {
     const full = await withTimeout(
@@ -8880,6 +8920,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);
@@ -8922,6 +8963,7 @@ function CaptureMode() {
         return;
       }
       setCaptureError(outcome.status === "failed");
+      setShotEngine(outcome.status === "ok" ? outcome.engine : null);
       setShot(blob);
       setShotUrl((old) => {
         if (old) URL.revokeObjectURL(old);
@@ -8986,7 +9028,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)
       });
     }
@@ -9033,7 +9077,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()
@@ -9644,7 +9691,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",
@@ -9652,66 +9699,113 @@ 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.jsx("span", { className: "qa-py-4 qa-text-xs qa-text-slate-400", children: t("no_shot") }),
+                  shotUrl && shotEngine === "dom" && (exactShots.status !== "live" && exactShots.supported ? /* @__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")
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ) : !exactShots.supported ? (
+                    // Safari and Firefox have no way to photograph the tab, so
+                    // there is nothing to offer — but saying NOTHING was the real
+                    // failure. A tester watching an SVG chart come back as bare
+                    // outlines concludes the tool is broken and files it as a bug,
+                    // over and over. Name the limit and name the way out.
                     /* @__PURE__ */ jsxRuntime.jsxs(
-                      "button",
+                      "span",
                       {
-                        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" },
+                        "data-qa-redraw-note": "true",
+                        className: "qa-mt-1.5 qa-block qa-text-center qa-text-10 qa-text-mid",
                         children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "RotateCcw", size: 13 }),
-                          t("retry")
+                          t("redraw_notice"),
+                          " ",
+                          t("redraw_no_engine")
                         ]
                       }
                     )
-                  ] })
-                ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "qa-py-4 qa-text-xs qa-text-slate-400", children: t("no_shot") })
+                  ) : null)
+                ]
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(LocationReveal, { target: selection }),
@@ -10005,5 +10099,5 @@ function Qapture({ config }) {
 exports.Qapture = Qapture;
 exports.deleteQaDatabase = deleteQaDatabase;
 exports.initQaStudio = initQaStudio;
-//# sourceMappingURL=chunk-CIFJMD2B.cjs.map
-//# sourceMappingURL=chunk-CIFJMD2B.cjs.map
+//# sourceMappingURL=chunk-7WHQBMVP.cjs.map
+//# sourceMappingURL=chunk-7WHQBMVP.cjs.map

package/dist/{chunk-NVFFN7SC.js → chunk-ZAWR5VJR.js} RENAMED Viewed

@@ -1775,6 +1775,9 @@ 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",
+    redraw_no_engine: "This browser cannot photograph a tab, so charts and canvases may come out wrong. Open the app in Chrome, Edge or Brave for true screenshots.",
     exact_on: "Pixel-exact screenshots on",
     exact_off: "Back to redrawn screenshots",
     exact_declined: "Staying on redrawn screenshots",
@@ -1969,6 +1972,9 @@ 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",
+    redraw_no_engine: "\u0644\u0627 \u064A\u0633\u062A\u0637\u064A\u0639 \u0647\u0630\u0627 \u0627\u0644\u0645\u062A\u0635\u0641\u062D \u062A\u0635\u0648\u064A\u0631 \u0627\u0644\u062A\u0628\u0648\u064A\u0628\u060C \u0644\u0630\u0627 \u0642\u062F \u062A\u0638\u0647\u0631 \u0627\u0644\u0645\u062E\u0637\u0637\u0627\u062A \u0648\u0627\u0644\u0644\u0648\u062D\u0627\u062A \u0628\u0634\u0643\u0644 \u062E\u0627\u0637\u0626. \u0627\u0641\u062A\u062D \u0627\u0644\u062A\u0637\u0628\u064A\u0642 \u0641\u064A Chrome \u0623\u0648 Edge \u0623\u0648 Brave \u0644\u0644\u062D\u0635\u0648\u0644 \u0639\u0644\u0649 \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",
@@ -2531,7 +2537,7 @@ 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;
+var MAX_RENDER_DEVICE_PIXELS = 16e6;
 function withTimeout(promise, ms) {
   let timer;
   return Promise.race([
@@ -2703,6 +2709,39 @@ function viewportSize() {
     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);
@@ -2739,9 +2778,10 @@ async function captureViaDom(rect, sx, sy, aggressiveColors = false) {
   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);
+  if (area * scale * scale > MAX_RENDER_DEVICE_PIXELS) {
+    scale = Math.sqrt(MAX_RENDER_DEVICE_PIXELS / area);
+  }
   const marked = markStuckElements();
   try {
     const full = await withTimeout(
@@ -8873,6 +8913,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);
@@ -8915,6 +8956,7 @@ function CaptureMode() {
         return;
       }
       setCaptureError(outcome.status === "failed");
+      setShotEngine(outcome.status === "ok" ? outcome.engine : null);
       setShot(blob);
       setShotUrl((old) => {
         if (old) URL.revokeObjectURL(old);
@@ -8979,7 +9021,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)
       });
     }
@@ -9026,7 +9070,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()
@@ -9637,7 +9684,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",
@@ -9645,66 +9692,113 @@ 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__ */ jsx("span", { className: "qa-py-4 qa-text-xs qa-text-slate-400", children: t("no_shot") }),
+                  shotUrl && shotEngine === "dom" && (exactShots.status !== "live" && exactShots.supported ? /* @__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")
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ) : !exactShots.supported ? (
+                    // Safari and Firefox have no way to photograph the tab, so
+                    // there is nothing to offer — but saying NOTHING was the real
+                    // failure. A tester watching an SVG chart come back as bare
+                    // outlines concludes the tool is broken and files it as a bug,
+                    // over and over. Name the limit and name the way out.
                     /* @__PURE__ */ jsxs(
-                      "button",
+                      "span",
                       {
-                        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" },
+                        "data-qa-redraw-note": "true",
+                        className: "qa-mt-1.5 qa-block qa-text-center qa-text-10 qa-text-mid",
                         children: [
-                          /* @__PURE__ */ jsx(Icon, { name: "RotateCcw", size: 13 }),
-                          t("retry")
+                          t("redraw_notice"),
+                          " ",
+                          t("redraw_no_engine")
                         ]
                       }
                     )
-                  ] })
-                ) : /* @__PURE__ */ jsx("span", { className: "qa-py-4 qa-text-xs qa-text-slate-400", children: t("no_shot") })
+                  ) : null)
+                ]
               }
             ),
             /* @__PURE__ */ jsx(LocationReveal, { target: selection }),
@@ -9996,5 +10090,5 @@ function Qapture({ config }) {
 }
 export { Qapture, deleteQaDatabase, initQaStudio };
-//# sourceMappingURL=chunk-NVFFN7SC.js.map
-//# sourceMappingURL=chunk-NVFFN7SC.js.map
+//# sourceMappingURL=chunk-ZAWR5VJR.js.map
+//# sourceMappingURL=chunk-ZAWR5VJR.js.map

package/dist/index.cjs CHANGED Viewed

@@ -1,24 +1,24 @@
 'use strict';
-var chunkCIFJMD2B_cjs = require('./chunk-CIFJMD2B.cjs');
+var chunk7WHQBMVP_cjs = require('./chunk-7WHQBMVP.cjs');
 Object.defineProperty(exports, "QaStudio", {
   enumerable: true,
-  get: function () { return chunkCIFJMD2B_cjs.Qapture; }
+  get: function () { return chunk7WHQBMVP_cjs.Qapture; }
 });
 Object.defineProperty(exports, "Qapture", {
   enumerable: true,
-  get: function () { return chunkCIFJMD2B_cjs.Qapture; }
+  get: function () { return chunk7WHQBMVP_cjs.Qapture; }
 });
 Object.defineProperty(exports, "deleteQaDatabase", {
   enumerable: true,
-  get: function () { return chunkCIFJMD2B_cjs.deleteQaDatabase; }
+  get: function () { return chunk7WHQBMVP_cjs.deleteQaDatabase; }
 });
 Object.defineProperty(exports, "initQaStudio", {
   enumerable: true,
-  get: function () { return chunkCIFJMD2B_cjs.initQaStudio; }
+  get: function () { return chunk7WHQBMVP_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-NVFFN7SC.js';
+export { Qapture as QaStudio, Qapture, deleteQaDatabase, initQaStudio } from './chunk-ZAWR5VJR.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/next.cjs CHANGED Viewed

@@ -1,21 +1,21 @@
 "use client";
 'use strict';
-var chunkCIFJMD2B_cjs = require('./chunk-CIFJMD2B.cjs');
+var chunk7WHQBMVP_cjs = require('./chunk-7WHQBMVP.cjs');
 Object.defineProperty(exports, "QaStudio", {
   enumerable: true,
-  get: function () { return chunkCIFJMD2B_cjs.Qapture; }
+  get: function () { return chunk7WHQBMVP_cjs.Qapture; }
 });
 Object.defineProperty(exports, "Qapture", {
   enumerable: true,
-  get: function () { return chunkCIFJMD2B_cjs.Qapture; }
+  get: function () { return chunk7WHQBMVP_cjs.Qapture; }
 });
 Object.defineProperty(exports, "initQaStudio", {
   enumerable: true,
-  get: function () { return chunkCIFJMD2B_cjs.initQaStudio; }
+  get: function () { return chunk7WHQBMVP_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-NVFFN7SC.js';
+export { Qapture as QaStudio, Qapture, initQaStudio } from './chunk-ZAWR5VJR.js';
 //# sourceMappingURL=next.js.map
 //# sourceMappingURL=next.js.map

package/dist/standalone.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var chunkCIFJMD2B_cjs = require('./chunk-CIFJMD2B.cjs');
+var chunk7WHQBMVP_cjs = require('./chunk-7WHQBMVP.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 chunkCIFJMD2B_cjs.initQaStudio; }
+  get: function () { return chunk7WHQBMVP_cjs.initQaStudio; }
 });
 //# sourceMappingURL=standalone.cjs.map
 //# sourceMappingURL=standalone.cjs.map

package/dist/standalone.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export { initQaStudio } from './chunk-NVFFN7SC.js';
+export { initQaStudio } from './chunk-ZAWR5VJR.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.2",
+  "version": "0.7.4",
   "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",
@@ -90,6 +90,7 @@
     "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",
+    "svg-vars-test": "node scripts/svg-vars-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",