qapture2 0.7.8 → 0.8.0

package/dist/{chunk-2JX7YU2P.js → chunk-RJV6FTIB.js}

@@ -51,10 +51,10 @@ function openDB(dbName) {
   dbCache.set(dbName, promise);
   return promise;
 }
-function run(dbName, store, mode2, fn) {
+function run(dbName, store, mode, fn) {
   return openDB(dbName).then(
     (db) => new Promise((resolve, reject) => {
-      const tx = db.transaction(store, mode2);
+      const tx = db.transaction(store, mode);
       const s = tx.objectStore(store);
       let result;
       const req = fn(s);
@@ -509,6 +509,7 @@ ul, ol { list-style: none; margin: 0; padding: 0; }
   /* Z-index scale */
   --qa-z-fab: 9990;
   --qa-z-panel: 9995;
+  --qa-z-capture-still: 10089;
   --qa-z-capture-dim: 10090;
   --qa-z-capture-highlight: 10092;
   --qa-z-capture-region-move: 10093;
@@ -558,6 +559,8 @@ ul, ol { list-style: none; margin: 0; padding: 0; }
 .qa-z-1     { z-index: 1; }
 .qa-z-50    { z-index: 50; }
 .qa-z-100   { z-index: 100; }
+/* the frozen still, directly beneath the dim so the scrim tints it too */
+.qa-z-10089 { z-index: var(--qa-z-capture-still); }
 .qa-z-10090 { z-index: var(--qa-z-capture-dim); }
 .qa-z-10092 { z-index: var(--qa-z-capture-highlight); }
 /* region-handle layering */
@@ -1734,6 +1737,8 @@ var STR = {
     loc_show: "Show captured location",
     loc_hide: "Hide location",
     loc_locate: "Locate on page",
+    loc_other_page: "This one was filed on {path}, not the page you are on.",
+    loc_go_there: "Go to {path}",
     journey_title: "Testing journey",
     journey_generic: "No test plan was set up for this project, so this is a general one that fits any app. Work through it, or ask whoever set up Qapture to add the real journey to qa.config.",
     export_name_title: "Name your export",
@@ -1774,7 +1779,7 @@ var STR = {
     no_evidence: "ticked, no capture",
     expected_label: "Expected",
     exact_label: "Pixel-exact shots",
-    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.",
+    exact_hint: "Screenshots become a real photo instead of a redraw. Each capture asks to share this tab (or, in Safari and Firefox, this window), takes one frame, and hands the screen straight back \u2014 nothing keeps recording, and 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 the screen at all, so charts and canvases may come out wrong. Open the app on a desktop browser for true screenshots.",
@@ -1783,7 +1788,7 @@ var STR = {
     exact_off: "Back to redrawn screenshots",
     exact_declined: "Staying on redrawn screenshots",
     exact_turn_on: "Turn on",
-    exact_unsupported: "Needs Chrome, Edge or Brave on desktop",
+    exact_unsupported: "Needs a desktop browser \u2014 phones cannot photograph the screen",
     sync_title: "Save to a folder",
     sync_hint: "Every note is written to your disk the moment you save it \u2014 nothing is lost if this browser dies.",
     sync_choose: "Choose folder",
@@ -1889,6 +1894,7 @@ var STR = {
     capture_screen: "Whole screen",
     walk_title: "Walkthrough",
     walk_take_me: "Take me to {path}",
+    walk_taking_you: "Taking you there\u2026",
     walk_reload_hint: "Reload the page instead (use this if the app didn't move)",
     walk_note_title: "Point {n}",
     walk_still_broken: "Still broken",
@@ -1939,6 +1945,8 @@ var STR = {
     loc_show: "\u0625\u0638\u0647\u0627\u0631 \u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0645\u064F\u0644\u062A\u0642\u064E\u0637",
     loc_hide: "\u0625\u062E\u0641\u0627\u0621 \u0627\u0644\u0645\u0648\u0642\u0639",
     loc_locate: "\u0625\u0638\u0647\u0627\u0631 \u0639\u0644\u0649 \u0627\u0644\u0635\u0641\u062D\u0629",
+    loc_other_page: "\u0633\u064F\u062C\u0651\u0644\u062A \u0647\u0630\u0647 \u0641\u064A {path}\u060C \u0648\u0644\u064A\u0633\u062A \u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u062A\u064A \u0623\u0646\u062A \u0641\u064A\u0647\u0627.",
+    loc_go_there: "\u0627\u0630\u0647\u0628 \u0625\u0644\u0649 {path}",
     journey_title: "\u0631\u062D\u0644\u0629 \u0627\u0644\u0627\u062E\u062A\u0628\u0627\u0631",
     journey_generic: "\u0644\u0645 \u064A\u062A\u0645 \u0625\u0639\u062F\u0627\u062F \u062E\u0637\u0629 \u0627\u062E\u062A\u0628\u0627\u0631 \u0644\u0647\u0630\u0627 \u0627\u0644\u0645\u0634\u0631\u0648\u0639\u060C \u0644\u0630\u0644\u0643 \u0647\u0630\u0647 \u062E\u0637\u0629 \u0639\u0627\u0645\u0629 \u062A\u0635\u0644\u062D \u0644\u0623\u064A \u062A\u0637\u0628\u064A\u0642. \u0627\u0639\u0645\u0644 \u0628\u0647\u0627\u060C \u0623\u0648 \u0627\u0637\u0644\u0628 \u0645\u0645\u0646 \u062B\u0628\u0651\u062A Qapture \u0623\u0646 \u064A\u0636\u064A\u0641 \u0631\u062D\u0644\u0629 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0641\u064A qa.config.",
     export_name_title: "\u0633\u0645\u0650\u0651 \u0645\u0644\u0641 \u0627\u0644\u062A\u0635\u062F\u064A\u0631",
@@ -1979,7 +1987,7 @@ 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 \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.",
+    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. \u062A\u0637\u0644\u0628 \u0643\u0644 \u0644\u0642\u0637\u0629 \u0625\u0630\u0646 \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 \u062A\u0623\u062E\u0630 \u0625\u0637\u0627\u0631\u064B\u0627 \u0648\u0627\u062D\u062F\u064B\u0627\u060C \u062B\u0645 \u062A\u0639\u064A\u062F \u0627\u0644\u0634\u0627\u0634\u0629 \u0641\u0648\u0631\u064B\u0627 \u2014 \u0644\u0627 \u062A\u0633\u062C\u064A\u0644 \u0645\u0633\u062A\u0645\u0631\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\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.",
@@ -1988,7 +1996,7 @@ var STR = {
     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",
     exact_turn_on: "\u062A\u0641\u0639\u064A\u0644",
-    exact_unsupported: "\u064A\u062A\u0637\u0644\u0628 Chrome \u0623\u0648 Edge \u0623\u0648 Brave \u0639\u0644\u0649 \u0633\u0637\u062D \u0627\u0644\u0645\u0643\u062A\u0628",
+    exact_unsupported: "\u064A\u062A\u0637\u0644\u0628 \u0645\u062A\u0635\u0641\u062D \u0633\u0637\u062D \u0645\u0643\u062A\u0628 \u2014 \u0627\u0644\u0647\u0648\u0627\u062A\u0641 \u0644\u0627 \u062A\u0633\u062A\u0637\u064A\u0639 \u062A\u0635\u0648\u064A\u0631 \u0627\u0644\u0634\u0627\u0634\u0629",
     sync_title: "\u0627\u0644\u062D\u0641\u0638 \u0641\u064A \u0645\u062C\u0644\u062F",
     sync_hint: "\u062A\u064F\u0643\u062A\u0628 \u0643\u0644 \u0645\u0644\u0627\u062D\u0638\u0629 \u0639\u0644\u0649 \u0627\u0644\u0642\u0631\u0635 \u0644\u062D\u0638\u0629 \u062D\u0641\u0638\u0647\u0627 \u2014 \u0644\u0627 \u0634\u064A\u0621 \u064A\u0636\u064A\u0639 \u0625\u0630\u0627 \u062A\u0639\u0637\u0651\u0644 \u0627\u0644\u0645\u062A\u0635\u0641\u062D.",
     sync_choose: "\u0627\u062E\u062A\u0631 \u0627\u0644\u0645\u062C\u0644\u062F",
@@ -2094,6 +2102,7 @@ var STR = {
     capture_screen: "\u0627\u0644\u0634\u0627\u0634\u0629 \u0643\u0627\u0645\u0644\u0629",
     walk_title: "\u0627\u0644\u062C\u0648\u0644\u0629",
     walk_take_me: "\u062E\u0630\u0646\u064A \u0625\u0644\u0649 {path}",
+    walk_taking_you: "\u062C\u0627\u0631\u064D \u0646\u0642\u0644\u0643\u2026",
     walk_reload_hint: "\u0623\u0639\u062F \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0635\u0641\u062D\u0629 \u0628\u062F\u0644\u064B\u0627 \u0645\u0646 \u0630\u0644\u0643 (\u0627\u0633\u062A\u062E\u062F\u0645\u0647 \u0625\u0630\u0627 \u0644\u0645 \u064A\u0646\u062A\u0642\u0644 \u0627\u0644\u062A\u0637\u0628\u064A\u0642)",
     walk_note_title: "\u0627\u0644\u0646\u0642\u0637\u0629 {n}",
     walk_still_broken: "\u0645\u0627 \u0632\u0627\u0644 \u0645\u0639\u0637\u0644\u064B\u0627",
@@ -2292,7 +2301,7 @@ function solveFrom(tl, br, candidates, vw, vh, frameW, frameH) {
   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 mapping = { scaleX, scaleY, originX, originY };
   const farX = originX + vw * scaleX;
   const farY = originY + vh * scaleY;
   const slack = Math.max(4, frameW * 0.01);
@@ -2311,7 +2320,7 @@ function solveFrom(tl, br, candidates, vw, vh, frameW, frameH) {
     verified++;
   }
   if (verified === 0) return null;
-  return mapping2;
+  return mapping;
 }
 function mapRectToFrame(rect, m, frameW, frameH) {
   const x0 = m.originX + rect.left * m.scaleX;
@@ -2323,73 +2332,49 @@ function mapRectToFrame(rect, m, frameW, frameH) {
   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;
-var track = null;
-var video = null;
-var grabber = null;
-var declined = false;
 function isExactCaptureSupported() {
   if (typeof navigator === "undefined" || typeof document === "undefined") return false;
   const md = navigator.mediaDevices;
   return !!md && typeof md.getDisplayMedia === "function";
 }
-var mode = "tab";
-var mapping = null;
-var mappingSignature = "";
+var armed = false;
+var declined = false;
+var frozen = null;
+var lastMode = null;
+function armExactCapture() {
+  if (!isExactCaptureSupported()) return false;
+  armed = true;
+  declined = false;
+  return true;
+}
+function disarmExactCapture() {
+  armed = false;
+  releaseFrozenFrame();
+}
+function resetExactCaptureDecline() {
+  declined = false;
+}
 function getExactCaptureStatus() {
   if (!isExactCaptureSupported()) return "unsupported";
-  if (track && track.readyState === "live") return "live";
+  if (armed) return "live";
   if (declined) return "declined";
   return "idle";
 }
-function teardown() {
-  if (video) {
-    try {
-      video.pause();
-    } catch {
-    }
-    video.srcObject = null;
-    video.remove();
-  }
-  if (stream) {
-    for (const t of stream.getTracks()) {
-      try {
-        t.stop();
-      } catch {
-      }
-    }
-  }
-  video = null;
-  stream = null;
-  track = null;
-  grabber = null;
-  mode = "tab";
-  mapping = null;
-  mappingSignature = "";
-}
-function stopExactCapture() {
-  teardown();
+function getFrozenFrame() {
+  return frozen;
 }
-function resetExactCaptureDecline() {
-  declined = false;
+function releaseFrozenFrame() {
+  if (frozen) {
+    frozen.canvas.width = 0;
+    frozen.canvas.height = 0;
+  }
+  frozen = null;
 }
 function waitFor(test, timeoutMs) {
   if (test()) return Promise.resolve(true);
@@ -2429,17 +2414,28 @@ function nextPresentedFrame(el) {
     });
   });
 }
-function validateFrameMapping(frameW, frameH) {
+function looksLikeViewport(frameW, frameH) {
   if (!frameW || !frameH) return false;
   const vw = window.innerWidth;
   const vh = window.innerHeight;
   if (!vw || !vh) return false;
-  const frameAspect = frameW / frameH;
-  const viewAspect = vw / vh;
-  return Math.abs(frameAspect - viewAspect) / viewAspect <= ASPECT_TOLERANCE;
+  return Math.abs(frameW / frameH - vw / vh) / (vw / vh) <= ASPECT_TOLERANCE;
+}
+async function withOverlayHidden(fn) {
+  const hosts = Array.from(
+    document.querySelectorAll("body > [data-qa-overlay]")
+  );
+  const previous = hosts.map((el) => el.style.visibility);
+  for (const el of hosts) el.style.visibility = "hidden";
+  try {
+    return await fn();
+  } finally {
+    hosts.forEach((el, i) => {
+      el.style.visibility = previous[i];
+    });
+  }
 }
-async function grabFrameCanvas() {
-  if (!video) return null;
+async function grabFrameCanvas(video, grabber) {
   await nextPresentedFrame(video);
   let source = video;
   let w = video.videoWidth;
@@ -2470,11 +2466,10 @@ async function grabFrameCanvas() {
   bitmap?.close?.();
   return c;
 }
-async function calibrate() {
-  if (!video) return false;
+async function calibrate(video, grabber) {
   const vw = window.innerWidth;
   const vh = window.innerHeight;
-  if (vw <= MARKER_SIZE || vh <= MARKER_SIZE) return false;
+  if (vw <= MARKER_SIZE || vh <= MARKER_SIZE) return null;
   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;";
@@ -2488,10 +2483,10 @@ async function calibrate() {
   document.body.appendChild(card);
   try {
     await new Promise((r) => setTimeout(r, CALIBRATION_SETTLE_MS));
-    const frame = await grabFrameCanvas();
-    if (!frame) return false;
+    const frame = await grabFrameCanvas(video, grabber);
+    if (!frame) return null;
     const ctx = frame.getContext("2d", { willReadFrequently: true });
-    if (!ctx) return false;
+    if (!ctx) return null;
     const { data } = ctx.getImageData(0, 0, frame.width, frame.height);
     const found = deriveMapping(
       findMarkerCandidates(data, frame.width, frame.height),
@@ -2500,20 +2495,40 @@ async function calibrate() {
       frame.width,
       frame.height
     );
-    if (!found) return false;
-    mapping = found;
-    mappingSignature = environmentSignature();
-    return true;
+    frame.width = 0;
+    frame.height = 0;
+    return found;
   } catch {
-    return false;
+    return null;
   } finally {
     card.remove();
   }
 }
-async function startExactCapture() {
-  if (!isExactCaptureSupported()) return false;
-  if (track && track.readyState === "live" && video) return true;
-  if (stream) teardown();
+async function freezeViewport() {
+  if (!isExactCaptureSupported()) return null;
+  releaseFrozenFrame();
+  let stream = null;
+  let el = null;
+  const release = () => {
+    if (el) {
+      try {
+        el.pause();
+      } catch {
+      }
+      el.srcObject = null;
+      el.remove();
+      el = null;
+    }
+    if (stream) {
+      for (const t of stream.getTracks()) {
+        try {
+          t.stop();
+        } catch {
+        }
+      }
+      stream = null;
+    }
+  };
   try {
     const dpr = Math.min(window.devicePixelRatio || 1, 2);
     const constraints = {
@@ -2531,121 +2546,103 @@ async function startExactCapture() {
       surfaceSwitching: "exclude",
       systemAudio: "exclude"
     };
-    const s = await navigator.mediaDevices.getDisplayMedia(constraints);
-    const t = s.getVideoTracks()[0];
-    if (!t) {
-      for (const x of s.getTracks()) x.stop();
+    stream = await navigator.mediaDevices.getDisplayMedia(constraints);
+    const track = stream.getVideoTracks()[0];
+    if (!track) {
       declined = true;
-      return false;
+      return null;
     }
-    const settings = t.getSettings();
+    const settings = track.getSettings();
     const sharedTab = !settings.displaySurface || settings.displaySurface === "browser";
-    const el = document.createElement("video");
+    el = document.createElement("video");
     el.setAttribute("data-qa-overlay", "true");
     el.muted = true;
     el.playsInline = true;
     el.style.cssText = "position:fixed;top:0;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;";
-    el.srcObject = s;
+    el.srcObject = stream;
     document.body.appendChild(el);
     try {
       await el.play();
     } catch {
     }
-    const ready = await waitFor(() => el.videoWidth > 0 && el.videoHeight > 0, VIDEO_READY_TIMEOUT_MS);
-    const giveUp = () => {
-      el.remove();
-      for (const x of s.getTracks()) x.stop();
+    const video = el;
+    const ready = await waitFor(
+      () => video.videoWidth > 0 && video.videoHeight > 0,
+      VIDEO_READY_TIMEOUT_MS
+    );
+    if (!ready) {
       declined = true;
-      return false;
-    };
-    if (!ready) return giveUp();
-    const isDirect = sharedTab && validateFrameMapping(el.videoWidth, el.videoHeight);
-    stream = s;
-    track = t;
-    video = el;
+      return null;
+    }
     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;
-      }
+    const grabber = IC ? new IC(track) : null;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const mode = sharedTab && looksLikeViewport(video.videoWidth, video.videoHeight) ? "tab" : "surface";
+    const mapping = mode === "surface" ? await calibrate(video, grabber) : null;
+    if (mode === "surface" && !mapping) {
+      declined = true;
+      return null;
     }
-    t.addEventListener("ended", () => {
-      teardown();
-    });
-    return true;
+    const raw = await withOverlayHidden(() => grabFrameCanvas(video, grabber));
+    if (!raw) return null;
+    let page;
+    if (mode === "surface" && mapping) {
+      const box = mapRectToFrame(
+        { left: 0, top: 0, width: vw, height: vh },
+        mapping,
+        raw.width,
+        raw.height
+      );
+      if (!box) return null;
+      page = document.createElement("canvas");
+      page.width = box.sw;
+      page.height = box.sh;
+      const ctx = page.getContext("2d");
+      if (!ctx) return null;
+      ctx.drawImage(raw, box.sx, box.sy, box.sw, box.sh, 0, 0, box.sw, box.sh);
+      raw.width = 0;
+      raw.height = 0;
+    } else {
+      page = raw;
+    }
+    frozen = {
+      canvas: page,
+      mode,
+      viewportWidth: vw,
+      viewportHeight: vh,
+      takenAt: Date.now()
+    };
+    lastMode = mode;
+    return frozen;
   } catch {
     declined = true;
-    teardown();
-    return false;
+    return null;
+  } finally {
+    release();
   }
 }
-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;
-  let frameH;
-  let bitmap = null;
-  if (grabber) {
-    try {
-      bitmap = await grabber.grabFrame();
-      source = bitmap;
-      frameW = bitmap.width;
-      frameH = bitmap.height;
-    } catch {
-      source = video;
-      frameW = video.videoWidth;
-      frameH = video.videoHeight;
-    }
-  } else {
-    source = video;
-    frameW = video.videoWidth;
-    frameH = video.videoHeight;
-  }
-  try {
-    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;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return null;
-    ctx.drawImage(source, sx, sy, sw, sh, 0, 0, sw, sh);
-    return canvas;
-  } catch {
+function cropFrozenRegion(rect) {
+  const f = frozen;
+  if (!f || !f.canvas.width || !f.canvas.height) return null;
+  if (!f.viewportWidth || !f.viewportHeight) return null;
+  if (window.innerWidth !== f.viewportWidth || window.innerHeight !== f.viewportHeight) {
     return null;
-  } finally {
-    if (bitmap && typeof bitmap.close === "function") bitmap.close();
   }
+  const scaleX = f.canvas.width / f.viewportWidth;
+  const scaleY = f.canvas.height / f.viewportHeight;
+  const sx = Math.max(0, Math.min(f.canvas.width, Math.round(rect.left * scaleX)));
+  const sy = Math.max(0, Math.min(f.canvas.height, Math.round(rect.top * scaleY)));
+  const sw = Math.min(f.canvas.width - sx, Math.round(rect.width * scaleX));
+  const sh = Math.min(f.canvas.height - sy, Math.round(rect.height * scaleY));
+  if (sw < 1 || sh < 1) return null;
+  const out = document.createElement("canvas");
+  out.width = sw;
+  out.height = sh;
+  const ctx = out.getContext("2d");
+  if (!ctx) return null;
+  ctx.drawImage(f.canvas, sx, sy, sw, sh, 0, 0, sw, sh);
+  return out;
 }
 
 // src/lib/cssColors.ts
@@ -2884,20 +2881,6 @@ function shotExtension(blob) {
   if (type === "image/jpeg") return "jpg";
   return "png";
 }
-async function withOverlayHidden(fn) {
-  const hosts = Array.from(
-    document.querySelectorAll("body > [data-qa-overlay]")
-  );
-  const previous = hosts.map((el) => el.style.visibility);
-  for (const el of hosts) el.style.visibility = "hidden";
-  try {
-    return await fn();
-  } finally {
-    hosts.forEach((el, i) => {
-      el.style.visibility = previous[i];
-    });
-  }
-}
 function markStuckElements() {
   let all;
   try {
@@ -3112,17 +3095,17 @@ async function captureRegion(rect, scroll, prefer = "auto") {
   if (!rect || rect.width < 2 || rect.height < 2) return { status: "empty" };
   const sx = scroll?.x ?? window.scrollX;
   const sy = scroll?.y ?? window.scrollY;
-  if (prefer !== "dom" && getExactCaptureStatus() === "live") {
+  if (prefer !== "dom" && getFrozenFrame()) {
     const visible = intersectViewport(rect);
     if (!visible) return { status: "empty" };
     try {
-      const canvas = await withOverlayHidden(() => grabExactRegion(visible));
+      const canvas = cropFrozenRegion(visible);
       if (canvas) {
         const blob = await encodeShot(canvas);
         if (blob) return { status: "ok", blob, engine: "exact" };
       }
     } catch (err) {
-      console.warn("[QA] exact capture failed, falling back to DOM render:", err);
+      console.warn("[QA] cropping the still failed, falling back to DOM render:", err);
     }
     if (prefer === "exact") return { status: "failed" };
   }
@@ -4211,6 +4194,14 @@ var DENSE_NOTES_KEY = "denseNotes";
 var PANEL_OPEN_KEY = "panelOpen";
 var ACTIVE_TAB_KEY = "activeTab";
 var WALK_KEY = "walk";
+var SOFT_NAV_PROOF_MS = 700;
+var SIGNATURE_SEP = String.fromCharCode(0);
+function pageSignature() {
+  if (typeof document === "undefined" || !document.body) return "";
+  const body = document.body;
+  const text = body.textContent || "";
+  return [document.title, body.childElementCount, text.length, text.slice(0, 200)].join(SIGNATURE_SEP);
+}
 var GUIDE_SKIPPED_KEY = "guideSkipped";
 var NOTICE_QUEUE_CAP = 3;
 var NOTICE_DURATION_INFO = 4e3;
@@ -4267,8 +4258,12 @@ function QaProvider({
   const [loginsUsed, setLoginsUsed] = useState(
     () => new Set(storage.getJSON(LOGIN_KEY, []))
   );
-  const [exactStatus, setExactStatus] = useState(() => getExactCaptureStatus());
+  const [exactStatus, setExactStatus] = useState(() => {
+    if (storage.getItem(EXACT_SHOTS_KEY) === "1") armExactCapture();
+    return getExactCaptureStatus();
+  });
   const exactSupported = isExactCaptureSupported();
+  const [frozenAt, setFrozenAt] = useState(null);
   const [syncState, setSyncState] = useState(() => getFsSyncState());
   const [syncTick, setSyncTick] = useState(0);
   const [lastCampaign, setLastCampaign] = useState(
@@ -4769,20 +4764,26 @@ function QaProvider({
       flushPendingDeletes();
       for (const timer of noticeTimers.current.values()) clearTimeout(timer);
       noticeTimers.current.clear();
-      stopExactCapture();
+      releaseFrozenFrame();
     };
   }, [flushPendingDeletes]);
   const startCapture = useCallback((prefill) => {
     setIsOpen(false);
     setCapturePrefill(prefill ?? "");
     setCaptureActive(true);
-    if (storage.getItem(EXACT_SHOTS_KEY) === "1" && isExactCaptureSupported() && getExactCaptureStatus() !== "live") {
+    setFrozenAt(null);
+    if (storage.getItem(EXACT_SHOTS_KEY) === "1" && isExactCaptureSupported()) {
       resetExactCaptureDecline();
-      void startExactCapture().then(() => setExactStatus(getExactCaptureStatus()));
+      void freezeViewport().then((frame) => {
+        setFrozenAt(frame?.takenAt ?? null);
+        setExactStatus(getExactCaptureStatus());
+      });
     }
   }, [storage]);
   const endCapture = useCallback((reopen = true) => {
     setCaptureActive(false);
+    releaseFrozenFrame();
+    setFrozenAt(null);
     if (reopen) setIsOpen(true);
   }, []);
   const toggleGuide = useCallback((key) => {
@@ -4823,16 +4824,32 @@ function QaProvider({
     exportZipRef.current = exportZipFn;
   }, [exportZipFn]);
   const enableExactShots = useCallback(async () => {
-    resetExactCaptureDecline();
-    const ok = await startExactCapture();
+    const ok = armExactCapture();
     setExactStatus(getExactCaptureStatus());
     storage.setItem(EXACT_SHOTS_KEY, ok ? "1" : "0");
     notify(ok ? t("exact_on") : t("exact_declined"), { tone: ok ? "success" : "info", id: "exact-shots" });
     return ok;
   }, [storage, notify, t]);
+  const photographNow = useCallback(async () => {
+    if (!armExactCapture()) {
+      setExactStatus(getExactCaptureStatus());
+      notify(t("exact_declined"), { tone: "info", id: "exact-shots" });
+      return false;
+    }
+    storage.setItem(EXACT_SHOTS_KEY, "1");
+    const frame = await freezeViewport();
+    setFrozenAt(frame?.takenAt ?? null);
+    setExactStatus(getExactCaptureStatus());
+    notify(frame ? t("exact_on") : t("exact_declined"), {
+      tone: frame ? "success" : "info",
+      id: "exact-shots"
+    });
+    return !!frame;
+  }, [storage, notify, t]);
   const disableExactShots = useCallback(() => {
-    stopExactCapture();
+    disarmExactCapture();
     storage.setItem(EXACT_SHOTS_KEY, "0");
+    setFrozenAt(null);
     setExactStatus(getExactCaptureStatus());
   }, [storage]);
   const rememberCampaign = useCallback((next) => {
@@ -5247,16 +5264,23 @@ function QaProvider({
   const walkNavigate = useCallback((path, hard = false) => {
     if (typeof window === "undefined" || !path) return;
     const target = path.startsWith("/") ? path : `/${path}`;
-    if (hard) {
+    if (hard || target === window.location.pathname) {
       window.location.assign(target);
       return;
     }
+    const before = pageSignature();
     try {
-      window.history.pushState({}, "", target);
-      window.dispatchEvent(new PopStateEvent("popstate"));
+      window.history.pushState(window.history.state, "", target);
+      window.dispatchEvent(new PopStateEvent("popstate", { state: window.history.state }));
     } catch {
       window.location.assign(target);
+      return;
     }
+    window.setTimeout(() => {
+      if (window.location.pathname !== target) return;
+      if (pageSignature() !== before) return;
+      window.location.assign(target);
+    }, SOFT_NAV_PROOF_MS);
   }, []);
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -5344,8 +5368,9 @@ function QaProvider({
     gradeStep,
     evidenceByStep,
     // v0.4 — screenshots
-    exactShots: { supported: exactSupported, status: exactStatus },
+    exactShots: { supported: exactSupported, status: exactStatus, frozenAt },
     enableExactShots,
+    photographNow,
     disableExactShots,
     // v0.4 — folder sync. syncTick is read here purely so this object is
     // rebuilt when fsSync's module state changes (path/campaign live outside
@@ -6139,11 +6164,17 @@ function flashLocate(target) {
     paint(rect);
   }
 }
-function LocationReveal({ target }) {
-  const { t } = useQa();
+function LocationReveal({
+  target,
+  route
+}) {
+  const { t, walkNavigate } = useQa();
   const [open, setOpen] = useState(false);
   if (!target) return null;
   const r = target.rect;
+  const notePath = (route || "").split("?")[0].split("#")[0];
+  const here = typeof window === "undefined" ? "" : window.location.pathname;
+  const elsewhere = !!notePath && notePath !== here;
   return /* @__PURE__ */ jsxs("div", { className: "qa-rounded-lg qa-border qa-border-subtle qa-bg-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-gap-1.5 qa-px-2 qa-py-1.5 qa-text-11", children: [
       /* @__PURE__ */ jsx(Icon, { name: "CheckCircle2", size: 14, className: "qa-text-success" }),
@@ -6207,7 +6238,21 @@ function LocationReveal({ target }) {
         "\xD7",
         Math.round(r.height)
       ] }),
-      /* @__PURE__ */ jsxs(
+      elsewhere ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: "qa-mt-1 qa-mb-1 qa-m-0 qa-text-lo", children: t("loc_other_page", { path: notePath }) }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => walkNavigate(notePath),
+            className: "qa-inline-flex qa-items-center qa-gap-1 qa-rounded-md qa-px-2 qa-py-1 qa-font-medium qa-tap qa-bg-accent",
+            style: { border: "none", cursor: "pointer" },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "MapPinned", size: 12 }),
+              t("loc_go_there", { path: notePath })
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(
         "button",
         {
           onClick: () => flashLocate(target),
@@ -6925,7 +6970,7 @@ function NoteItem({
               /* @__PURE__ */ jsx(Icon, { name: "MapPin", size: 12, className: "qa-shrink-0" }),
               /* @__PURE__ */ jsx("span", { className: "qa-truncate qa-dir-ltr", title: note.url, children: note.route })
             ] }),
-            note.target && /* @__PURE__ */ jsx(LocationReveal, { target: note.target }),
+            note.target && /* @__PURE__ */ jsx(LocationReveal, { target: note.target, route: note.route }),
             contextEventCount > 0 && /* @__PURE__ */ jsx("div", { children: t("context_attached", { n: contextEventCount }) }),
             stepCount > 0 && /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-gap-1", children: [
               /* @__PURE__ */ jsx(Icon, { name: "ClipboardList", size: 12, className: "qa-shrink-0" }),
@@ -8669,6 +8714,20 @@ var RISK_COLOR = {
   amber: "var(--qa-warn)",
   green: "var(--qa-success)"
 };
+function useCurrentPath() {
+  const [path, setPath] = useState(() => typeof window === "undefined" ? "" : window.location.pathname);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const sync = () => setPath(window.location.pathname);
+    window.addEventListener("popstate", sync);
+    window.addEventListener("hashchange", sync);
+    return () => {
+      window.removeEventListener("popstate", sync);
+      window.removeEventListener("hashchange", sync);
+    };
+  }, []);
+  return path;
+}
 function WalkHud() {
   const {
     dir,
@@ -8688,10 +8747,13 @@ function WalkHud() {
     startCapture,
     updateNote,
     retestNote,
-    notes
+    notes,
+    notesLoading
   } = useQa();
   const index = Math.min(walk.index, Math.max(0, walkStops.length - 1));
   const stop = walkStops[index];
+  const currentPath = useCurrentPath();
+  const [going, setGoing] = useState(false);
   const backIcon = dir === "rtl" ? "ChevronRight" : "ChevronLeft";
   const nextIcon = dir === "rtl" ? "ChevronLeft" : "ChevronRight";
   useEffect(() => {
@@ -8705,8 +8767,9 @@ function WalkHud() {
     if (latest?.target) flashLocate(latest.target);
   }, [index, walk.source]);
   useEffect(() => {
+    if (notesLoading) return;
     if (walk.active && walkStops.length === 0) exitWalk();
-  }, [walk.active, walkStops.length, exitWalk]);
+  }, [walk.active, walkStops.length, exitWalk, notesLoading]);
   if (!walk.active || !stop) return null;
   const atLast = index >= walkStops.length - 1;
   let title;
@@ -8867,7 +8930,7 @@ function WalkHud() {
       )
     ] });
   }
-  const onThisPage = stop.path === ANY_PAGE || typeof window !== "undefined" && stop.path === window.location.pathname;
+  const onThisPage = stop.path === ANY_PAGE || stop.path === currentPath;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -8903,12 +8966,24 @@ function WalkHud() {
             "button",
             {
               type: "button",
-              onClick: () => walkNavigate(stop.path),
+              disabled: going,
+              onClick: () => {
+                setGoing(true);
+                walkNavigate(stop.path);
+                window.setTimeout(() => setGoing(false), 900);
+              },
               className: "qa-tap qa-inline-flex qa-flex-1 qa-items-center qa-justify-center qa-gap-1.5 qa-rounded-lg qa-bg-accent qa-px-2 qa-py-1.5 qa-text-11 qa-font-semibold",
-              style: { border: "none", cursor: "pointer" },
+              style: { border: "none", cursor: going ? "default" : "pointer" },
               children: [
-                /* @__PURE__ */ jsx(Icon, { name: "MapPinned", size: 13 }),
-                t("walk_take_me", { path: stop.path })
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: going ? "Loader2" : "MapPinned",
+                    size: 13,
+                    className: going ? "qa-animate-spin" : void 0
+                  }
+                ),
+                going ? t("walk_taking_you") : t("walk_take_me", { path: stop.path })
               ]
             }
           ),
@@ -9128,7 +9203,7 @@ function CaptureMode() {
     compactCapture,
     setCompactCapture,
     exactShots,
-    enableExactShots,
+    photographNow,
     capturePrefill
   } = useQa();
   const coarse = useCoarsePointer();
@@ -9142,6 +9217,7 @@ function CaptureMode() {
   const [candidate, setCandidate] = useState(null);
   const [regionMode, setRegionMode] = useState(false);
   const [shot, setShot] = useState(null);
+  const stillRef = useRef(null);
   const [shotEngine, setShotEngine] = useState(null);
   const [shotUrl, setShotUrl] = useState(null);
   const [capturing, setCapturing] = useState(false);
@@ -9434,6 +9510,18 @@ function CaptureMode() {
   useEffect(() => () => {
     unlockPageScroll();
   }, []);
+  useEffect(() => {
+    const host = stillRef.current;
+    const frame = getFrozenFrame();
+    if (!host || !frame) return;
+    const canvas = frame.canvas;
+    canvas.style.cssText = "display:block;width:100%;height:100%;";
+    host.appendChild(canvas);
+    return () => {
+      if (canvas.parentNode === host) host.removeChild(canvas);
+      canvas.removeAttribute("style");
+    };
+  }, [exactShots.frozenAt]);
   const save = async () => {
     if (!selection || !description.trim()) return;
     const target = {
@@ -9492,6 +9580,16 @@ function CaptureMode() {
   const isRegion = !!drag?.rect || candidate?.kind === "region" || selection?.kind === "region";
   const confirmingRegion = phase === "confirming" && candidate?.kind === "region" && coarse;
   return /* @__PURE__ */ jsxs("div", { "data-qa-overlay": "true", "data-qa-capture-root": "true", ref: overlayRootRef, children: [
+    exactShots.frozenAt !== null && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: stillRef,
+        "aria-hidden": "true",
+        "data-qa-capture-still": "true",
+        className: "qa-fixed qa-inset-0 qa-z-10089",
+        style: { pointerEvents: "none", overflow: "hidden" }
+      }
+    ),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -9550,7 +9648,7 @@ function CaptureMode() {
           ) : /* @__PURE__ */ jsxs(
             "button",
             {
-              onClick: () => void enableExactShots(),
+              onClick: () => void photographNow(),
               title: t("exact_hint"),
               className: "qa-tap qa-flex qa-items-center qa-gap-1 qa-rounded-full qa-border qa-border-white-40 qa-px-2 qa-py-0.5 qa-text-11 qa-text-hi qa-hover-bg-white-15",
               style: { background: "transparent", cursor: "pointer" },
@@ -9994,8 +10092,8 @@ function CaptureMode() {
                           {
                             type: "button",
                             onClick: () => void (async () => {
-                              const granted = await enableExactShots();
-                              if (granted && selection) void runCapture(selection.rect);
+                              const shot2 = await photographNow();
+                              if (shot2 && 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",
@@ -10319,5 +10417,5 @@ function Qapture({ config }) {
 }
 
 export { Qapture, deleteQaDatabase, initQaStudio };
-//# sourceMappingURL=chunk-2JX7YU2P.js.map
-//# sourceMappingURL=chunk-2JX7YU2P.js.map
+//# sourceMappingURL=chunk-RJV6FTIB.js.map
+//# sourceMappingURL=chunk-RJV6FTIB.js.map