qapture2 0.7.4 → 0.7.6

package/README.md

@@ -353,13 +353,22 @@ 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.
+**From v0.7.6 this works in Safari and Firefox too.** They have no tab capture,
+but they can share a *window*, and Qapture works out where your page sits
+inside that frame — by measuring, not by guessing at toolbar heights. On the
+first capture the page is covered for a fifth of a second by a dark card with
+four coloured corners; the engine photographs it, finds the corners and solves
+for the mapping. That dark flash is the measurement. If it can't verify the
+result it refuses the grant and falls back to redrawing, because a screenshot
+of the wrong pixels is worse than no screenshot.
+
+Chromium still takes the direct path (`preferCurrentTab`), unchanged and still
+0.0px. Only iOS/iPadOS have no Screen Capture API at all, and there the card
+says so.
+
+**If your app draws anything with inline SVG, a `<canvas>`, or video, turn real
+screenshots on.** 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-7WHQBMVP.cjs → chunk-CNNNWLTX.cjs}

@@ -58,10 +58,10 @@ function openDB(dbName) {
   dbCache.set(dbName, promise);
   return promise;
 }
-function run(dbName, store, mode, fn) {
+function run(dbName, store, mode2, fn) {
   return openDB(dbName).then(
     (db) => new Promise((resolve, reject) => {
-      const tx = db.transaction(store, mode);
+      const tx = db.transaction(store, mode2);
       const s = tx.objectStore(store);
       let result;
       const req = fn(s);
@@ -1781,10 +1781,11 @@ var STR = {
     no_evidence: "ticked, no capture",
     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.",
+    exact_hint: "Screenshots become a real photo instead of a redraw. Asks once to share this tab (or, in Safari and Firefox, this window); 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.",
+    redraw_no_engine: "This browser cannot photograph the screen at all, so charts and canvases may come out wrong. Open the app on a desktop browser for true screenshots.",
+    fab_title: "Qapture \u2014 click to open, drag to move it out of the way",
     exact_on: "Pixel-exact screenshots on",
     exact_off: "Back to redrawn screenshots",
     exact_declined: "Staying on redrawn screenshots",
@@ -1978,10 +1979,11 @@ var STR = {
     no_evidence: "\u0645\u064F\u0639\u0644\u0651\u0645 \u0628\u062F\u0648\u0646 \u0627\u0644\u062A\u0642\u0627\u0637",
     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.",
+    exact_hint: "\u062A\u0635\u0628\u062D \u0627\u0644\u0644\u0642\u0637\u0629 \u0635\u0648\u0631\u0629 \u062D\u0642\u064A\u0642\u064A\u0629 \u0628\u062F\u0644 \u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0631\u0633\u0645. \u064A\u064F\u0637\u0644\u0628 \u0627\u0644\u0625\u0630\u0646 \u0645\u0631\u0629 \u0648\u0627\u062D\u062F\u0629 \u0644\u0645\u0634\u0627\u0631\u0643\u0629 \u0627\u0644\u062A\u0628\u0648\u064A\u0628 (\u0623\u0648 \u0627\u0644\u0646\u0627\u0641\u0630\u0629 \u0641\u064A Safari \u0648Firefox)\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.",
+    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\u0634\u0627\u0634\u0629 \u0625\u0637\u0644\u0627\u0642\u064B\u0627\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 \u0639\u0644\u0649 \u0645\u062A\u0635\u0641\u062D \u0633\u0637\u062D \u0645\u0643\u062A\u0628 \u0644\u0644\u062D\u0635\u0648\u0644 \u0639\u0644\u0649 \u0644\u0642\u0637\u0627\u062A \u062D\u0642\u064A\u0642\u064A\u0629.",
+    fab_title: "Qapture \u2014 \u0627\u0636\u063A\u0637 \u0644\u0644\u0641\u062A\u062D\u060C \u0648\u0627\u0633\u062D\u0628 \u0644\u062A\u062D\u0631\u064A\u0643\u0647 \u0645\u0646 \u0645\u0643\u0627\u0646\u0647",
     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",
@@ -2180,8 +2182,168 @@ function computeCoverage(journey, guideChecked, skipped) {
   };
 }
 
+// src/lib/frameCalibration.ts
+var MARKER_SIZE = 28;
+var MARKERS = [
+  { key: "tl", color: [255, 0, 0] },
+  { key: "tr", color: [0, 255, 0] },
+  { key: "bl", color: [0, 0, 255] },
+  { key: "br", color: [255, 0, 255] }
+];
+function markerCentres(vw, vh) {
+  const h = MARKER_SIZE / 2;
+  return {
+    tl: { x: h, y: h },
+    tr: { x: vw - h, y: h },
+    bl: { x: h, y: vh - h },
+    br: { x: vw - h, y: vh - h }
+  };
+}
+function dist2(r, g, b, c) {
+  const dr = r - c[0];
+  const dg = g - c[1];
+  const db = b - c[2];
+  return dr * dr + dg * dg + db * db;
+}
+var COLOR_TOLERANCE_2 = 90 * 90;
+var CLUSTER_CELL = 8;
+var MAX_CANDIDATES = 4;
+function findMarkerCandidates(data, width, height) {
+  const cols = Math.ceil(width / CLUSTER_CELL);
+  const rows = Math.ceil(height / CLUSTER_CELL);
+  const cells = {};
+  for (const m of MARKERS) cells[m.key] = new Int32Array(cols * rows);
+  for (let y = 0; y < height; y++) {
+    const row = y * width * 4;
+    const cy = y / CLUSTER_CELL | 0;
+    for (let x = 0; x < width; x++) {
+      const i = row + x * 4;
+      if (data[i + 3] < 128) continue;
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+      if (Math.max(r, g, b) - Math.min(r, g, b) < 60) continue;
+      for (const m of MARKERS) {
+        if (dist2(r, g, b, m.color) <= COLOR_TOLERANCE_2) {
+          cells[m.key][cy * cols + (x / CLUSTER_CELL | 0)]++;
+          break;
+        }
+      }
+    }
+  }
+  const out = {};
+  for (const m of MARKERS) {
+    const grid = cells[m.key];
+    const seen = new Uint8Array(cols * rows);
+    const blobs = [];
+    for (let start = 0; start < grid.length; start++) {
+      if (!grid[start] || seen[start]) continue;
+      const queue = [start];
+      seen[start] = 1;
+      let sumX = 0;
+      let sumY = 0;
+      let total = 0;
+      while (queue.length) {
+        const idx = queue.pop();
+        const n = grid[idx];
+        const cx = idx % cols;
+        const cy = idx / cols | 0;
+        sumX += (cx * CLUSTER_CELL + CLUSTER_CELL / 2) * n;
+        sumY += (cy * CLUSTER_CELL + CLUSTER_CELL / 2) * n;
+        total += n;
+        for (let dy = -1; dy <= 1; dy++) {
+          for (let dx = -1; dx <= 1; dx++) {
+            const nx = cx + dx;
+            const ny = cy + dy;
+            if (nx < 0 || ny < 0 || nx >= cols || ny >= rows) continue;
+            const nIdx = ny * cols + nx;
+            if (seen[nIdx] || !grid[nIdx]) continue;
+            seen[nIdx] = 1;
+            queue.push(nIdx);
+          }
+        }
+      }
+      if (total < 16) continue;
+      blobs.push({ x: sumX / total, y: sumY / total, count: total });
+    }
+    blobs.sort((a, b) => b.count - a.count);
+    out[m.key] = blobs.slice(0, MAX_CANDIDATES);
+  }
+  return out;
+}
+var VERIFY_TOLERANCE = 0.02;
+var SQUARENESS_TOLERANCE = 0.05;
+function deriveMapping(candidates, vw, vh, frameW, frameH) {
+  const tls = candidates.tl ?? [];
+  const brs = candidates.br ?? [];
+  for (const tl of tls) {
+    for (const br of brs) {
+      const m = solveFrom(tl, br, candidates, vw, vh, frameW, frameH);
+      if (m) return m;
+    }
+  }
+  return null;
+}
+function solveFrom(tl, br, candidates, vw, vh, frameW, frameH) {
+  if (!(vw > MARKER_SIZE) || !(vh > MARKER_SIZE)) return null;
+  const centres = markerCentres(vw, vh);
+  const spanCssX = centres.br.x - centres.tl.x;
+  const spanCssY = centres.br.y - centres.tl.y;
+  if (spanCssX <= 0 || spanCssY <= 0) return null;
+  const scaleX = (br.x - tl.x) / spanCssX;
+  const scaleY = (br.y - tl.y) / spanCssY;
+  if (!(scaleX > 0.05) || !(scaleY > 0.05)) return null;
+  if (!Number.isFinite(scaleX) || !Number.isFinite(scaleY)) return null;
+  if (Math.abs(scaleX - scaleY) / Math.max(scaleX, scaleY) > SQUARENESS_TOLERANCE) return null;
+  const originX = tl.x - centres.tl.x * scaleX;
+  const originY = tl.y - centres.tl.y * scaleY;
+  const mapping2 = { scaleX, scaleY, originX, originY };
+  const farX = originX + vw * scaleX;
+  const farY = originY + vh * scaleY;
+  const slack = Math.max(4, frameW * 0.01);
+  if (originX < -slack || originY < -slack || farX > frameW + slack || farY > frameH + slack) {
+    return null;
+  }
+  const tolerance = Math.max(6, Math.max(frameW, frameH) * VERIFY_TOLERANCE);
+  let verified = 0;
+  for (const key of ["tr", "bl"]) {
+    const hits = candidates[key] ?? [];
+    if (!hits.length) continue;
+    const want = centres[key];
+    const px = originX + want.x * scaleX;
+    const py = originY + want.y * scaleY;
+    if (!hits.some((h) => Math.hypot(px - h.x, py - h.y) <= tolerance)) return null;
+    verified++;
+  }
+  if (verified === 0) return null;
+  return mapping2;
+}
+function mapRectToFrame(rect, m, frameW, frameH) {
+  const x0 = m.originX + rect.left * m.scaleX;
+  const y0 = m.originY + rect.top * m.scaleY;
+  const sx = Math.max(0, Math.min(frameW, Math.round(x0)));
+  const sy = Math.max(0, Math.min(frameH, Math.round(y0)));
+  const sw = Math.min(frameW - sx, Math.round(rect.width * m.scaleX));
+  const sh = Math.min(frameH - sy, Math.round(rect.height * m.scaleY));
+  if (sw < 1 || sh < 1) return null;
+  return { sx, sy, sw, sh };
+}
+function environmentSignature() {
+  if (typeof window === "undefined") return "";
+  return [
+    window.innerWidth,
+    window.innerHeight,
+    window.outerWidth,
+    window.outerHeight,
+    window.screenX,
+    window.screenY,
+    Math.round((window.devicePixelRatio || 1) * 100)
+  ].join("x");
+}
+
 // src/lib/screenCapture.ts
 var ASPECT_TOLERANCE = 0.08;
+var CALIBRATION_SETTLE_MS = 220;
 var FRESH_FRAME_TIMEOUT_MS = 500;
 var VIDEO_READY_TIMEOUT_MS = 4e3;
 var stream = null;
@@ -2189,22 +2351,14 @@ var track = null;
 var video = null;
 var grabber = null;
 var declined = false;
-function supportsPreferCurrentTab() {
-  const nav = navigator;
-  const brands = nav.userAgentData?.brands;
-  if (Array.isArray(brands) && brands.length) {
-    return brands.some((b) => /chromium/i.test(b.brand));
-  }
-  const ua = navigator.userAgent || "";
-  if (/CriOS|FxiOS|EdgiOS|Firefox/i.test(ua)) return false;
-  return /Chrome|Chromium|Edg\//i.test(ua);
-}
 function isExactCaptureSupported() {
   if (typeof navigator === "undefined" || typeof document === "undefined") return false;
   const md = navigator.mediaDevices;
-  if (!md || typeof md.getDisplayMedia !== "function") return false;
-  return supportsPreferCurrentTab();
+  return !!md && typeof md.getDisplayMedia === "function";
 }
+var mode = "tab";
+var mapping = null;
+var mappingSignature = "";
 function getExactCaptureStatus() {
   if (!isExactCaptureSupported()) return "unsupported";
   if (track && track.readyState === "live") return "live";
@@ -2232,6 +2386,9 @@ function teardown() {
   stream = null;
   track = null;
   grabber = null;
+  mode = "tab";
+  mapping = null;
+  mappingSignature = "";
 }
 function stopExactCapture() {
   teardown();
@@ -2286,6 +2443,78 @@ function validateFrameMapping(frameW, frameH) {
   const viewAspect = vw / vh;
   return Math.abs(frameAspect - viewAspect) / viewAspect <= ASPECT_TOLERANCE;
 }
+async function grabFrameCanvas() {
+  if (!video) return null;
+  await nextPresentedFrame(video);
+  let source = video;
+  let w = video.videoWidth;
+  let h = video.videoHeight;
+  let bitmap = null;
+  if (grabber) {
+    try {
+      bitmap = await grabber.grabFrame();
+      source = bitmap;
+      w = bitmap.width;
+      h = bitmap.height;
+    } catch {
+    }
+  }
+  if (!w || !h) {
+    bitmap?.close?.();
+    return null;
+  }
+  const c = document.createElement("canvas");
+  c.width = w;
+  c.height = h;
+  const ctx = c.getContext("2d", { willReadFrequently: true });
+  if (!ctx) {
+    bitmap?.close?.();
+    return null;
+  }
+  ctx.drawImage(source, 0, 0);
+  bitmap?.close?.();
+  return c;
+}
+async function calibrate() {
+  if (!video) return false;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  if (vw <= MARKER_SIZE || vh <= MARKER_SIZE) return false;
+  const card = document.createElement("div");
+  card.setAttribute("data-qa-calibration", "true");
+  card.style.cssText = "position:fixed;inset:0;z-index:2147483647;background:#0a0a0a;pointer-events:none;contain:strict;";
+  const centres = markerCentres(vw, vh);
+  for (const m of MARKERS) {
+    const dot = document.createElement("div");
+    const c = centres[m.key];
+    dot.style.cssText = `position:absolute;width:${MARKER_SIZE}px;height:${MARKER_SIZE}px;left:${c.x - MARKER_SIZE / 2}px;top:${c.y - MARKER_SIZE / 2}px;background:rgb(${m.color[0]},${m.color[1]},${m.color[2]});`;
+    card.appendChild(dot);
+  }
+  document.body.appendChild(card);
+  try {
+    await new Promise((r) => setTimeout(r, CALIBRATION_SETTLE_MS));
+    const frame = await grabFrameCanvas();
+    if (!frame) return false;
+    const ctx = frame.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return false;
+    const { data } = ctx.getImageData(0, 0, frame.width, frame.height);
+    const found = deriveMapping(
+      findMarkerCandidates(data, frame.width, frame.height),
+      vw,
+      vh,
+      frame.width,
+      frame.height
+    );
+    if (!found) return false;
+    mapping = found;
+    mappingSignature = environmentSignature();
+    return true;
+  } catch {
+    return false;
+  } finally {
+    card.remove();
+  }
+}
 async function startExactCapture() {
   if (!isExactCaptureSupported()) return false;
   if (track && track.readyState === "live" && video) return true;
@@ -2315,11 +2544,7 @@ async function startExactCapture() {
       return false;
     }
     const settings = t.getSettings();
-    if (settings.displaySurface && settings.displaySurface !== "browser") {
-      for (const x of s.getTracks()) x.stop();
-      declined = true;
-      return false;
-    }
+    const sharedTab = !settings.displaySurface || settings.displaySurface === "browser";
     const el = document.createElement("video");
     el.setAttribute("data-qa-overlay", "true");
     el.muted = true;
@@ -2332,17 +2557,31 @@ async function startExactCapture() {
     } catch {
     }
     const ready = await waitFor(() => el.videoWidth > 0 && el.videoHeight > 0, VIDEO_READY_TIMEOUT_MS);
-    if (!ready || !validateFrameMapping(el.videoWidth, el.videoHeight)) {
+    const giveUp = () => {
       el.remove();
       for (const x of s.getTracks()) x.stop();
       declined = true;
       return false;
-    }
+    };
+    if (!ready) return giveUp();
+    const isDirect = sharedTab && validateFrameMapping(el.videoWidth, el.videoHeight);
     stream = s;
     track = t;
     video = el;
     const IC = window.ImageCapture;
     grabber = IC ? new IC(t) : null;
+    if (isDirect) {
+      mode = "tab";
+      mapping = null;
+      mappingSignature = "";
+    } else {
+      mode = "surface";
+      if (!await calibrate()) {
+        teardown();
+        declined = true;
+        return false;
+      }
+    }
     t.addEventListener("ended", () => {
       teardown();
     });
@@ -2355,6 +2594,11 @@ async function startExactCapture() {
 }
 async function grabExactRegion(rect) {
   if (!track || track.readyState !== "live" || !video) return null;
+  if (mode === "surface") {
+    if (!mapping || environmentSignature() !== mappingSignature) {
+      if (!await calibrate()) return null;
+    }
+  }
   await nextPresentedFrame(video);
   let source;
   let frameW;
@@ -2377,13 +2621,24 @@ async function grabExactRegion(rect) {
     frameH = video.videoHeight;
   }
   try {
-    if (!validateFrameMapping(frameW, frameH)) return null;
-    const scaleX = frameW / window.innerWidth;
-    const scaleY = frameH / window.innerHeight;
-    const sx = Math.max(0, Math.min(frameW, Math.round(rect.left * scaleX)));
-    const sy = Math.max(0, Math.min(frameH, Math.round(rect.top * scaleY)));
-    const sw = Math.max(1, Math.min(frameW - sx, Math.round(rect.width * scaleX)));
-    const sh = Math.max(1, Math.min(frameH - sy, Math.round(rect.height * scaleY)));
+    let sx;
+    let sy;
+    let sw;
+    let sh;
+    if (mode === "surface") {
+      if (!mapping) return null;
+      const mapped = mapRectToFrame(rect, mapping, frameW, frameH);
+      if (!mapped) return null;
+      ({ sx, sy, sw, sh } = mapped);
+    } else {
+      if (!validateFrameMapping(frameW, frameH)) return null;
+      const scaleX = frameW / window.innerWidth;
+      const scaleY = frameH / window.innerHeight;
+      sx = Math.max(0, Math.min(frameW, Math.round(rect.left * scaleX)));
+      sy = Math.max(0, Math.min(frameH, Math.round(rect.top * scaleY)));
+      sw = Math.max(1, Math.min(frameW - sx, Math.round(rect.width * scaleX)));
+      sh = Math.max(1, Math.min(frameH - sy, Math.round(rect.height * scaleY)));
+    }
     const canvas = document.createElement("canvas");
     canvas.width = sw;
     canvas.height = sh;
@@ -5306,29 +5561,6 @@ function Icon({
 function renderSvgElement(tag, attrs, key) {
   return React__default.default.createElement(tag, { key, ...attrs });
 }
-function isCoarsePointer() {
-  if (typeof window === "undefined") return false;
-  try {
-    if (window.matchMedia && window.matchMedia("(pointer: coarse)").matches) return true;
-  } catch {
-  }
-  return typeof navigator !== "undefined" && (navigator.maxTouchPoints || 0) > 0;
-}
-function useCoarsePointer() {
-  const [coarse, setCoarse] = React.useState(() => isCoarsePointer());
-  React.useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) return;
-    const mq = window.matchMedia("(pointer: coarse)");
-    const on = () => setCoarse(isCoarsePointer());
-    if (mq.addEventListener) mq.addEventListener("change", on);
-    else if (mq.addListener) mq.addListener(on);
-    return () => {
-      if (mq.removeEventListener) mq.removeEventListener("change", on);
-      else if (mq.removeListener) mq.removeListener(on);
-    };
-  }, []);
-  return coarse;
-}
 var DEFAULT_LEFT = "calc(1.25rem + env(safe-area-inset-left))";
 var DEFAULT_BOTTOM = "calc(5rem + env(safe-area-inset-bottom))";
 var FAB_SIZE_PX = 56;
@@ -5385,8 +5617,7 @@ function clampFabPos(p, w = FAB_SIZE_PX, h = FAB_SIZE_PX) {
   };
 }
 function QaFab() {
-  const { isOpen, setIsOpen, notes, captureActive, namespace } = useQa();
-  const coarse = useCoarsePointer();
+  const { isOpen, setIsOpen, notes, captureActive, namespace, t } = useQa();
   const [pos, setPos] = React.useState(() => loadFabPos(namespace));
   const dragRef = React.useRef(null);
   const didDragRef = React.useRef(false);
@@ -5404,6 +5635,7 @@ function QaFab() {
   if (captureActive) return null;
   const onPointerDown = (e) => {
     if (dragRef.current) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
     didDragRef.current = false;
     const target = e.currentTarget;
     const rect = target.getBoundingClientRect();
@@ -5465,7 +5697,7 @@ function QaFab() {
     }
     setIsOpen(!isOpen);
   };
-  const applied = coarse && pos ? clampFabPos(pos) : null;
+  const applied = pos ? clampFabPos(pos) : null;
   const fabStyle = {
     left: applied ? `${applied.left}px` : DEFAULT_LEFT,
     bottom: applied ? `${applied.bottom}px` : DEFAULT_BOTTOM,
@@ -5480,13 +5712,13 @@ function QaFab() {
       "data-qa-overlay": "true",
       dir: "ltr",
       onClick: handleClick,
-      onPointerDown: coarse ? onPointerDown : void 0,
-      onPointerMove: coarse ? onPointerMove : void 0,
-      onPointerUp: coarse ? onPointerUp : void 0,
-      onPointerCancel: coarse ? onPointerCancel : void 0,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
       "aria-label": "Qapture \u2014 testing notes",
-      title: "Qapture",
-      className: `qa-fixed qa-flex qa-items-center qa-justify-center qa-rounded-full qa-bg-accent qa-elev-2 qa-print-hidden qa-fab-btn${coarse ? " qa-touch-none" : ""}`,
+      title: t("fab_title"),
+      className: "qa-fixed qa-flex qa-items-center qa-justify-center qa-rounded-full qa-bg-accent qa-elev-2 qa-print-hidden qa-fab-btn qa-touch-none",
       style: fabStyle,
       children: [
         !isOpen && /* @__PURE__ */ jsxRuntime.jsx(
@@ -7803,6 +8035,29 @@ function GuideSection() {
     ))
   ] });
 }
+function isCoarsePointer() {
+  if (typeof window === "undefined") return false;
+  try {
+    if (window.matchMedia && window.matchMedia("(pointer: coarse)").matches) return true;
+  } catch {
+  }
+  return typeof navigator !== "undefined" && (navigator.maxTouchPoints || 0) > 0;
+}
+function useCoarsePointer() {
+  const [coarse, setCoarse] = React.useState(() => isCoarsePointer());
+  React.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(pointer: coarse)");
+    const on = () => setCoarse(isCoarsePointer());
+    if (mq.addEventListener) mq.addEventListener("change", on);
+    else if (mq.addListener) mq.addListener(on);
+    return () => {
+      if (mq.removeEventListener) mq.removeEventListener("change", on);
+      else if (mq.removeListener) mq.removeListener(on);
+    };
+  }, []);
+  return coarse;
+}
 var TABS = [
   { key: "notes", labelKey: "tab_notes", icon: "StickyNote" },
   { key: "logins", labelKey: "tab_logins", icon: "KeyRound" },
@@ -10099,5 +10354,5 @@ function Qapture({ config }) {
 exports.Qapture = Qapture;
 exports.deleteQaDatabase = deleteQaDatabase;
 exports.initQaStudio = initQaStudio;
-//# sourceMappingURL=chunk-7WHQBMVP.cjs.map
-//# sourceMappingURL=chunk-7WHQBMVP.cjs.map
+//# sourceMappingURL=chunk-CNNNWLTX.cjs.map
+//# sourceMappingURL=chunk-CNNNWLTX.cjs.map

package/dist/{chunk-ZAWR5VJR.js → chunk-NM3IDVEL.js}

@@ -51,10 +51,10 @@ function openDB(dbName) {
   dbCache.set(dbName, promise);
   return promise;
 }
-function run(dbName, store, mode, fn) {
+function run(dbName, store, mode2, fn) {
   return openDB(dbName).then(
     (db) => new Promise((resolve, reject) => {
-      const tx = db.transaction(store, mode);
+      const tx = db.transaction(store, mode2);
       const s = tx.objectStore(store);
       let result;
       const req = fn(s);
@@ -1774,10 +1774,11 @@ var STR = {
     no_evidence: "ticked, no capture",
     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.",
+    exact_hint: "Screenshots become a real photo instead of a redraw. Asks once to share this tab (or, in Safari and Firefox, this window); 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.",
+    redraw_no_engine: "This browser cannot photograph the screen at all, so charts and canvases may come out wrong. Open the app on a desktop browser for true screenshots.",
+    fab_title: "Qapture \u2014 click to open, drag to move it out of the way",
     exact_on: "Pixel-exact screenshots on",
     exact_off: "Back to redrawn screenshots",
     exact_declined: "Staying on redrawn screenshots",
@@ -1971,10 +1972,11 @@ var STR = {
     no_evidence: "\u0645\u064F\u0639\u0644\u0651\u0645 \u0628\u062F\u0648\u0646 \u0627\u0644\u062A\u0642\u0627\u0637",
     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.",
+    exact_hint: "\u062A\u0635\u0628\u062D \u0627\u0644\u0644\u0642\u0637\u0629 \u0635\u0648\u0631\u0629 \u062D\u0642\u064A\u0642\u064A\u0629 \u0628\u062F\u0644 \u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0631\u0633\u0645. \u064A\u064F\u0637\u0644\u0628 \u0627\u0644\u0625\u0630\u0646 \u0645\u0631\u0629 \u0648\u0627\u062D\u062F\u0629 \u0644\u0645\u0634\u0627\u0631\u0643\u0629 \u0627\u0644\u062A\u0628\u0648\u064A\u0628 (\u0623\u0648 \u0627\u0644\u0646\u0627\u0641\u0630\u0629 \u0641\u064A Safari \u0648Firefox)\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.",
+    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\u0634\u0627\u0634\u0629 \u0625\u0637\u0644\u0627\u0642\u064B\u0627\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 \u0639\u0644\u0649 \u0645\u062A\u0635\u0641\u062D \u0633\u0637\u062D \u0645\u0643\u062A\u0628 \u0644\u0644\u062D\u0635\u0648\u0644 \u0639\u0644\u0649 \u0644\u0642\u0637\u0627\u062A \u062D\u0642\u064A\u0642\u064A\u0629.",
+    fab_title: "Qapture \u2014 \u0627\u0636\u063A\u0637 \u0644\u0644\u0641\u062A\u062D\u060C \u0648\u0627\u0633\u062D\u0628 \u0644\u062A\u062D\u0631\u064A\u0643\u0647 \u0645\u0646 \u0645\u0643\u0627\u0646\u0647",
     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",
@@ -2173,8 +2175,168 @@ function computeCoverage(journey, guideChecked, skipped) {
   };
 }
 
+// src/lib/frameCalibration.ts
+var MARKER_SIZE = 28;
+var MARKERS = [
+  { key: "tl", color: [255, 0, 0] },
+  { key: "tr", color: [0, 255, 0] },
+  { key: "bl", color: [0, 0, 255] },
+  { key: "br", color: [255, 0, 255] }
+];
+function markerCentres(vw, vh) {
+  const h = MARKER_SIZE / 2;
+  return {
+    tl: { x: h, y: h },
+    tr: { x: vw - h, y: h },
+    bl: { x: h, y: vh - h },
+    br: { x: vw - h, y: vh - h }
+  };
+}
+function dist2(r, g, b, c) {
+  const dr = r - c[0];
+  const dg = g - c[1];
+  const db = b - c[2];
+  return dr * dr + dg * dg + db * db;
+}
+var COLOR_TOLERANCE_2 = 90 * 90;
+var CLUSTER_CELL = 8;
+var MAX_CANDIDATES = 4;
+function findMarkerCandidates(data, width, height) {
+  const cols = Math.ceil(width / CLUSTER_CELL);
+  const rows = Math.ceil(height / CLUSTER_CELL);
+  const cells = {};
+  for (const m of MARKERS) cells[m.key] = new Int32Array(cols * rows);
+  for (let y = 0; y < height; y++) {
+    const row = y * width * 4;
+    const cy = y / CLUSTER_CELL | 0;
+    for (let x = 0; x < width; x++) {
+      const i = row + x * 4;
+      if (data[i + 3] < 128) continue;
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+      if (Math.max(r, g, b) - Math.min(r, g, b) < 60) continue;
+      for (const m of MARKERS) {
+        if (dist2(r, g, b, m.color) <= COLOR_TOLERANCE_2) {
+          cells[m.key][cy * cols + (x / CLUSTER_CELL | 0)]++;
+          break;
+        }
+      }
+    }
+  }
+  const out = {};
+  for (const m of MARKERS) {
+    const grid = cells[m.key];
+    const seen = new Uint8Array(cols * rows);
+    const blobs = [];
+    for (let start = 0; start < grid.length; start++) {
+      if (!grid[start] || seen[start]) continue;
+      const queue = [start];
+      seen[start] = 1;
+      let sumX = 0;
+      let sumY = 0;
+      let total = 0;
+      while (queue.length) {
+        const idx = queue.pop();
+        const n = grid[idx];
+        const cx = idx % cols;
+        const cy = idx / cols | 0;
+        sumX += (cx * CLUSTER_CELL + CLUSTER_CELL / 2) * n;
+        sumY += (cy * CLUSTER_CELL + CLUSTER_CELL / 2) * n;
+        total += n;
+        for (let dy = -1; dy <= 1; dy++) {
+          for (let dx = -1; dx <= 1; dx++) {
+            const nx = cx + dx;
+            const ny = cy + dy;
+            if (nx < 0 || ny < 0 || nx >= cols || ny >= rows) continue;
+            const nIdx = ny * cols + nx;
+            if (seen[nIdx] || !grid[nIdx]) continue;
+            seen[nIdx] = 1;
+            queue.push(nIdx);
+          }
+        }
+      }
+      if (total < 16) continue;
+      blobs.push({ x: sumX / total, y: sumY / total, count: total });
+    }
+    blobs.sort((a, b) => b.count - a.count);
+    out[m.key] = blobs.slice(0, MAX_CANDIDATES);
+  }
+  return out;
+}
+var VERIFY_TOLERANCE = 0.02;
+var SQUARENESS_TOLERANCE = 0.05;
+function deriveMapping(candidates, vw, vh, frameW, frameH) {
+  const tls = candidates.tl ?? [];
+  const brs = candidates.br ?? [];
+  for (const tl of tls) {
+    for (const br of brs) {
+      const m = solveFrom(tl, br, candidates, vw, vh, frameW, frameH);
+      if (m) return m;
+    }
+  }
+  return null;
+}
+function solveFrom(tl, br, candidates, vw, vh, frameW, frameH) {
+  if (!(vw > MARKER_SIZE) || !(vh > MARKER_SIZE)) return null;
+  const centres = markerCentres(vw, vh);
+  const spanCssX = centres.br.x - centres.tl.x;
+  const spanCssY = centres.br.y - centres.tl.y;
+  if (spanCssX <= 0 || spanCssY <= 0) return null;
+  const scaleX = (br.x - tl.x) / spanCssX;
+  const scaleY = (br.y - tl.y) / spanCssY;
+  if (!(scaleX > 0.05) || !(scaleY > 0.05)) return null;
+  if (!Number.isFinite(scaleX) || !Number.isFinite(scaleY)) return null;
+  if (Math.abs(scaleX - scaleY) / Math.max(scaleX, scaleY) > SQUARENESS_TOLERANCE) return null;
+  const originX = tl.x - centres.tl.x * scaleX;
+  const originY = tl.y - centres.tl.y * scaleY;
+  const mapping2 = { scaleX, scaleY, originX, originY };
+  const farX = originX + vw * scaleX;
+  const farY = originY + vh * scaleY;
+  const slack = Math.max(4, frameW * 0.01);
+  if (originX < -slack || originY < -slack || farX > frameW + slack || farY > frameH + slack) {
+    return null;
+  }
+  const tolerance = Math.max(6, Math.max(frameW, frameH) * VERIFY_TOLERANCE);
+  let verified = 0;
+  for (const key of ["tr", "bl"]) {
+    const hits = candidates[key] ?? [];
+    if (!hits.length) continue;
+    const want = centres[key];
+    const px = originX + want.x * scaleX;
+    const py = originY + want.y * scaleY;
+    if (!hits.some((h) => Math.hypot(px - h.x, py - h.y) <= tolerance)) return null;
+    verified++;
+  }
+  if (verified === 0) return null;
+  return mapping2;
+}
+function mapRectToFrame(rect, m, frameW, frameH) {
+  const x0 = m.originX + rect.left * m.scaleX;
+  const y0 = m.originY + rect.top * m.scaleY;
+  const sx = Math.max(0, Math.min(frameW, Math.round(x0)));
+  const sy = Math.max(0, Math.min(frameH, Math.round(y0)));
+  const sw = Math.min(frameW - sx, Math.round(rect.width * m.scaleX));
+  const sh = Math.min(frameH - sy, Math.round(rect.height * m.scaleY));
+  if (sw < 1 || sh < 1) return null;
+  return { sx, sy, sw, sh };
+}
+function environmentSignature() {
+  if (typeof window === "undefined") return "";
+  return [
+    window.innerWidth,
+    window.innerHeight,
+    window.outerWidth,
+    window.outerHeight,
+    window.screenX,
+    window.screenY,
+    Math.round((window.devicePixelRatio || 1) * 100)
+  ].join("x");
+}
+
 // src/lib/screenCapture.ts
 var ASPECT_TOLERANCE = 0.08;
+var CALIBRATION_SETTLE_MS = 220;
 var FRESH_FRAME_TIMEOUT_MS = 500;
 var VIDEO_READY_TIMEOUT_MS = 4e3;
 var stream = null;
@@ -2182,22 +2344,14 @@ var track = null;
 var video = null;
 var grabber = null;
 var declined = false;
-function supportsPreferCurrentTab() {
-  const nav = navigator;
-  const brands = nav.userAgentData?.brands;
-  if (Array.isArray(brands) && brands.length) {
-    return brands.some((b) => /chromium/i.test(b.brand));
-  }
-  const ua = navigator.userAgent || "";
-  if (/CriOS|FxiOS|EdgiOS|Firefox/i.test(ua)) return false;
-  return /Chrome|Chromium|Edg\//i.test(ua);
-}
 function isExactCaptureSupported() {
   if (typeof navigator === "undefined" || typeof document === "undefined") return false;
   const md = navigator.mediaDevices;
-  if (!md || typeof md.getDisplayMedia !== "function") return false;
-  return supportsPreferCurrentTab();
+  return !!md && typeof md.getDisplayMedia === "function";
 }
+var mode = "tab";
+var mapping = null;
+var mappingSignature = "";
 function getExactCaptureStatus() {
   if (!isExactCaptureSupported()) return "unsupported";
   if (track && track.readyState === "live") return "live";
@@ -2225,6 +2379,9 @@ function teardown() {
   stream = null;
   track = null;
   grabber = null;
+  mode = "tab";
+  mapping = null;
+  mappingSignature = "";
 }
 function stopExactCapture() {
   teardown();
@@ -2279,6 +2436,78 @@ function validateFrameMapping(frameW, frameH) {
   const viewAspect = vw / vh;
   return Math.abs(frameAspect - viewAspect) / viewAspect <= ASPECT_TOLERANCE;
 }
+async function grabFrameCanvas() {
+  if (!video) return null;
+  await nextPresentedFrame(video);
+  let source = video;
+  let w = video.videoWidth;
+  let h = video.videoHeight;
+  let bitmap = null;
+  if (grabber) {
+    try {
+      bitmap = await grabber.grabFrame();
+      source = bitmap;
+      w = bitmap.width;
+      h = bitmap.height;
+    } catch {
+    }
+  }
+  if (!w || !h) {
+    bitmap?.close?.();
+    return null;
+  }
+  const c = document.createElement("canvas");
+  c.width = w;
+  c.height = h;
+  const ctx = c.getContext("2d", { willReadFrequently: true });
+  if (!ctx) {
+    bitmap?.close?.();
+    return null;
+  }
+  ctx.drawImage(source, 0, 0);
+  bitmap?.close?.();
+  return c;
+}
+async function calibrate() {
+  if (!video) return false;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  if (vw <= MARKER_SIZE || vh <= MARKER_SIZE) return false;
+  const card = document.createElement("div");
+  card.setAttribute("data-qa-calibration", "true");
+  card.style.cssText = "position:fixed;inset:0;z-index:2147483647;background:#0a0a0a;pointer-events:none;contain:strict;";
+  const centres = markerCentres(vw, vh);
+  for (const m of MARKERS) {
+    const dot = document.createElement("div");
+    const c = centres[m.key];
+    dot.style.cssText = `position:absolute;width:${MARKER_SIZE}px;height:${MARKER_SIZE}px;left:${c.x - MARKER_SIZE / 2}px;top:${c.y - MARKER_SIZE / 2}px;background:rgb(${m.color[0]},${m.color[1]},${m.color[2]});`;
+    card.appendChild(dot);
+  }
+  document.body.appendChild(card);
+  try {
+    await new Promise((r) => setTimeout(r, CALIBRATION_SETTLE_MS));
+    const frame = await grabFrameCanvas();
+    if (!frame) return false;
+    const ctx = frame.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return false;
+    const { data } = ctx.getImageData(0, 0, frame.width, frame.height);
+    const found = deriveMapping(
+      findMarkerCandidates(data, frame.width, frame.height),
+      vw,
+      vh,
+      frame.width,
+      frame.height
+    );
+    if (!found) return false;
+    mapping = found;
+    mappingSignature = environmentSignature();
+    return true;
+  } catch {
+    return false;
+  } finally {
+    card.remove();
+  }
+}
 async function startExactCapture() {
   if (!isExactCaptureSupported()) return false;
   if (track && track.readyState === "live" && video) return true;
@@ -2308,11 +2537,7 @@ async function startExactCapture() {
       return false;
     }
     const settings = t.getSettings();
-    if (settings.displaySurface && settings.displaySurface !== "browser") {
-      for (const x of s.getTracks()) x.stop();
-      declined = true;
-      return false;
-    }
+    const sharedTab = !settings.displaySurface || settings.displaySurface === "browser";
     const el = document.createElement("video");
     el.setAttribute("data-qa-overlay", "true");
     el.muted = true;
@@ -2325,17 +2550,31 @@ async function startExactCapture() {
     } catch {
     }
     const ready = await waitFor(() => el.videoWidth > 0 && el.videoHeight > 0, VIDEO_READY_TIMEOUT_MS);
-    if (!ready || !validateFrameMapping(el.videoWidth, el.videoHeight)) {
+    const giveUp = () => {
       el.remove();
       for (const x of s.getTracks()) x.stop();
       declined = true;
       return false;
-    }
+    };
+    if (!ready) return giveUp();
+    const isDirect = sharedTab && validateFrameMapping(el.videoWidth, el.videoHeight);
     stream = s;
     track = t;
     video = el;
     const IC = window.ImageCapture;
     grabber = IC ? new IC(t) : null;
+    if (isDirect) {
+      mode = "tab";
+      mapping = null;
+      mappingSignature = "";
+    } else {
+      mode = "surface";
+      if (!await calibrate()) {
+        teardown();
+        declined = true;
+        return false;
+      }
+    }
     t.addEventListener("ended", () => {
       teardown();
     });
@@ -2348,6 +2587,11 @@ async function startExactCapture() {
 }
 async function grabExactRegion(rect) {
   if (!track || track.readyState !== "live" || !video) return null;
+  if (mode === "surface") {
+    if (!mapping || environmentSignature() !== mappingSignature) {
+      if (!await calibrate()) return null;
+    }
+  }
   await nextPresentedFrame(video);
   let source;
   let frameW;
@@ -2370,13 +2614,24 @@ async function grabExactRegion(rect) {
     frameH = video.videoHeight;
   }
   try {
-    if (!validateFrameMapping(frameW, frameH)) return null;
-    const scaleX = frameW / window.innerWidth;
-    const scaleY = frameH / window.innerHeight;
-    const sx = Math.max(0, Math.min(frameW, Math.round(rect.left * scaleX)));
-    const sy = Math.max(0, Math.min(frameH, Math.round(rect.top * scaleY)));
-    const sw = Math.max(1, Math.min(frameW - sx, Math.round(rect.width * scaleX)));
-    const sh = Math.max(1, Math.min(frameH - sy, Math.round(rect.height * scaleY)));
+    let sx;
+    let sy;
+    let sw;
+    let sh;
+    if (mode === "surface") {
+      if (!mapping) return null;
+      const mapped = mapRectToFrame(rect, mapping, frameW, frameH);
+      if (!mapped) return null;
+      ({ sx, sy, sw, sh } = mapped);
+    } else {
+      if (!validateFrameMapping(frameW, frameH)) return null;
+      const scaleX = frameW / window.innerWidth;
+      const scaleY = frameH / window.innerHeight;
+      sx = Math.max(0, Math.min(frameW, Math.round(rect.left * scaleX)));
+      sy = Math.max(0, Math.min(frameH, Math.round(rect.top * scaleY)));
+      sw = Math.max(1, Math.min(frameW - sx, Math.round(rect.width * scaleX)));
+      sh = Math.max(1, Math.min(frameH - sy, Math.round(rect.height * scaleY)));
+    }
     const canvas = document.createElement("canvas");
     canvas.width = sw;
     canvas.height = sh;
@@ -5299,29 +5554,6 @@ function Icon({
 function renderSvgElement(tag, attrs, key) {
   return React.createElement(tag, { key, ...attrs });
 }
-function isCoarsePointer() {
-  if (typeof window === "undefined") return false;
-  try {
-    if (window.matchMedia && window.matchMedia("(pointer: coarse)").matches) return true;
-  } catch {
-  }
-  return typeof navigator !== "undefined" && (navigator.maxTouchPoints || 0) > 0;
-}
-function useCoarsePointer() {
-  const [coarse, setCoarse] = useState(() => isCoarsePointer());
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) return;
-    const mq = window.matchMedia("(pointer: coarse)");
-    const on = () => setCoarse(isCoarsePointer());
-    if (mq.addEventListener) mq.addEventListener("change", on);
-    else if (mq.addListener) mq.addListener(on);
-    return () => {
-      if (mq.removeEventListener) mq.removeEventListener("change", on);
-      else if (mq.removeListener) mq.removeListener(on);
-    };
-  }, []);
-  return coarse;
-}
 var DEFAULT_LEFT = "calc(1.25rem + env(safe-area-inset-left))";
 var DEFAULT_BOTTOM = "calc(5rem + env(safe-area-inset-bottom))";
 var FAB_SIZE_PX = 56;
@@ -5378,8 +5610,7 @@ function clampFabPos(p, w = FAB_SIZE_PX, h = FAB_SIZE_PX) {
   };
 }
 function QaFab() {
-  const { isOpen, setIsOpen, notes, captureActive, namespace } = useQa();
-  const coarse = useCoarsePointer();
+  const { isOpen, setIsOpen, notes, captureActive, namespace, t } = useQa();
   const [pos, setPos] = useState(() => loadFabPos(namespace));
   const dragRef = useRef(null);
   const didDragRef = useRef(false);
@@ -5397,6 +5628,7 @@ function QaFab() {
   if (captureActive) return null;
   const onPointerDown = (e) => {
     if (dragRef.current) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
     didDragRef.current = false;
     const target = e.currentTarget;
     const rect = target.getBoundingClientRect();
@@ -5458,7 +5690,7 @@ function QaFab() {
     }
     setIsOpen(!isOpen);
   };
-  const applied = coarse && pos ? clampFabPos(pos) : null;
+  const applied = pos ? clampFabPos(pos) : null;
   const fabStyle = {
     left: applied ? `${applied.left}px` : DEFAULT_LEFT,
     bottom: applied ? `${applied.bottom}px` : DEFAULT_BOTTOM,
@@ -5473,13 +5705,13 @@ function QaFab() {
       "data-qa-overlay": "true",
       dir: "ltr",
       onClick: handleClick,
-      onPointerDown: coarse ? onPointerDown : void 0,
-      onPointerMove: coarse ? onPointerMove : void 0,
-      onPointerUp: coarse ? onPointerUp : void 0,
-      onPointerCancel: coarse ? onPointerCancel : void 0,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
       "aria-label": "Qapture \u2014 testing notes",
-      title: "Qapture",
-      className: `qa-fixed qa-flex qa-items-center qa-justify-center qa-rounded-full qa-bg-accent qa-elev-2 qa-print-hidden qa-fab-btn${coarse ? " qa-touch-none" : ""}`,
+      title: t("fab_title"),
+      className: "qa-fixed qa-flex qa-items-center qa-justify-center qa-rounded-full qa-bg-accent qa-elev-2 qa-print-hidden qa-fab-btn qa-touch-none",
       style: fabStyle,
       children: [
         !isOpen && /* @__PURE__ */ jsx(
@@ -7796,6 +8028,29 @@ function GuideSection() {
     ))
   ] });
 }
+function isCoarsePointer() {
+  if (typeof window === "undefined") return false;
+  try {
+    if (window.matchMedia && window.matchMedia("(pointer: coarse)").matches) return true;
+  } catch {
+  }
+  return typeof navigator !== "undefined" && (navigator.maxTouchPoints || 0) > 0;
+}
+function useCoarsePointer() {
+  const [coarse, setCoarse] = useState(() => isCoarsePointer());
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(pointer: coarse)");
+    const on = () => setCoarse(isCoarsePointer());
+    if (mq.addEventListener) mq.addEventListener("change", on);
+    else if (mq.addListener) mq.addListener(on);
+    return () => {
+      if (mq.removeEventListener) mq.removeEventListener("change", on);
+      else if (mq.removeListener) mq.removeListener(on);
+    };
+  }, []);
+  return coarse;
+}
 var TABS = [
   { key: "notes", labelKey: "tab_notes", icon: "StickyNote" },
   { key: "logins", labelKey: "tab_logins", icon: "KeyRound" },
@@ -10090,5 +10345,5 @@ function Qapture({ config }) {
 }
 
 export { Qapture, deleteQaDatabase, initQaStudio };
-//# sourceMappingURL=chunk-ZAWR5VJR.js.map
-//# sourceMappingURL=chunk-ZAWR5VJR.js.map
+//# sourceMappingURL=chunk-NM3IDVEL.js.map
+//# sourceMappingURL=chunk-NM3IDVEL.js.map

package/dist/index.cjs

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

package/dist/next.cjs

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

package/dist/standalone.cjs

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

package/dist/standalone.js

@@ -1,4 +1,4 @@
-export { initQaStudio } from './chunk-ZAWR5VJR.js';
+export { initQaStudio } from './chunk-NM3IDVEL.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.4",
+  "version": "0.7.6",
   "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",
@@ -86,6 +86,7 @@
     "selector-smoke": "node scripts/selector-smoke.mjs",
     "capture-timeout-smoke": "node scripts/capture-timeout-smoke.mjs",
     "fs-sync-smoke": "node scripts/fs-sync-smoke.mjs",
+    "frame-calibration-smoke": "node scripts/frame-calibration-smoke.mjs",
     "standalone-smoke": "node scripts/standalone-smoke.mjs",
     "browser-test": "node scripts/browser-test.mjs",
     "capture-accuracy-test": "node scripts/capture-accuracy-test.mjs",
@@ -94,7 +95,7 @@
     "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",
-    "verify": "npm run typecheck && npm run typecheck:bin && npm run build && npm run smoke && npm run export-smoke && npm run cli-smoke && npm run cli-detectors-smoke && npm run selector-smoke && npm run capture-timeout-smoke && npm run fs-sync-smoke && npm run standalone-smoke",
+    "verify": "npm run typecheck && npm run typecheck:bin && npm run build && npm run smoke && npm run export-smoke && npm run cli-smoke && npm run cli-detectors-smoke && npm run selector-smoke && npm run capture-timeout-smoke && npm run fs-sync-smoke && npm run frame-calibration-smoke && npm run standalone-smoke",
     "play": "npm --prefix playground run dev"
   },
   "engines": {