qapture2 0.2.2 → 0.2.4

package/dist/{chunk-L6VS36GE.js → chunk-RC7ZUQ5X.js}

@@ -2,7 +2,134 @@ import React, { createContext, useEffect, Component, useState, useCallback, useR
 import ReactDOM from 'react-dom/client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/index.ts
+// src/lib/idb.ts
+var DB_VERSION = 2;
+var NOTES_STORE = "notes";
+var META_STORE = "meta";
+var dbCache = /* @__PURE__ */ new Map();
+function isIdbAvailable() {
+  return typeof indexedDB !== "undefined";
+}
+function openDB(dbName) {
+  const cached = dbCache.get(dbName);
+  if (cached) return cached;
+  const promise = new Promise((resolve, reject) => {
+    let req;
+    try {
+      req = indexedDB.open(dbName, DB_VERSION);
+    } catch (err) {
+      dbCache.delete(dbName);
+      reject(err);
+      return;
+    }
+    req.onupgradeneeded = (e) => {
+      const db = e.target.result;
+      const oldVersion = e.oldVersion;
+      switch (true) {
+        case oldVersion < 1:
+          if (!db.objectStoreNames.contains(NOTES_STORE)) {
+            db.createObjectStore(NOTES_STORE, { keyPath: "id" });
+          }
+        // falls through
+        case oldVersion < 2:
+          if (!db.objectStoreNames.contains(META_STORE)) {
+            db.createObjectStore(META_STORE, { keyPath: "key" });
+          }
+          break;
+      }
+    };
+    req.onsuccess = (e) => resolve(e.target.result);
+    req.onerror = (e) => {
+      dbCache.delete(dbName);
+      reject(e.target.error);
+    };
+    req.onblocked = () => {
+      dbCache.delete(dbName);
+      reject(new Error(`IndexedDB open blocked for "${dbName}" \u2014 another tab has an older connection open`));
+    };
+  });
+  dbCache.set(dbName, promise);
+  return promise;
+}
+function run(dbName, store, mode, fn) {
+  return openDB(dbName).then(
+    (db) => new Promise((resolve, reject) => {
+      const tx = db.transaction(store, mode);
+      const s = tx.objectStore(store);
+      let result;
+      const req = fn(s);
+      if (req) {
+        req.onsuccess = () => {
+          result = req.result;
+        };
+      }
+      tx.oncomplete = () => resolve(result);
+      tx.onerror = () => reject(tx.error);
+      tx.onabort = () => reject(tx.error);
+    })
+  );
+}
+function createIdb(namespace) {
+  const dbName = `${namespace}-db`;
+  if (!isIdbAvailable()) {
+    return {
+      getAll: () => Promise.resolve([]),
+      put: () => Promise.resolve(),
+      delete: () => Promise.resolve(),
+      clear: () => Promise.resolve()
+    };
+  }
+  return {
+    getAll: async () => {
+      try {
+        const rows = await run(dbName, NOTES_STORE, "readonly", (s) => s.getAll());
+        return rows ?? [];
+      } catch {
+        return [];
+      }
+    },
+    put: async (record) => {
+      try {
+        await run(dbName, NOTES_STORE, "readwrite", (s) => s.put(record));
+      } catch {
+      }
+    },
+    delete: async (id) => {
+      try {
+        await run(dbName, NOTES_STORE, "readwrite", (s) => s.delete(id));
+      } catch {
+      }
+    },
+    clear: async () => {
+      try {
+        await run(dbName, NOTES_STORE, "readwrite", (s) => s.clear());
+      } catch {
+      }
+    }
+  };
+}
+function deleteQaDatabase(namespace) {
+  const dbName = `${namespace}-db`;
+  if (!isIdbAvailable()) return Promise.resolve();
+  const cached = dbCache.get(dbName);
+  dbCache.delete(dbName);
+  const closed = cached ? cached.then((db) => db.close()).catch(() => {
+  }) : Promise.resolve();
+  return closed.then(
+    () => new Promise((resolve, reject) => {
+      let req;
+      try {
+        req = indexedDB.deleteDatabase(dbName);
+      } catch (err) {
+        reject(err);
+        return;
+      }
+      req.onsuccess = () => resolve();
+      req.onerror = (e) => reject(e.target.error);
+      req.onblocked = () => reject(new Error(`IndexedDB deleteDatabase blocked for "${dbName}" \u2014 another connection is still open`));
+    })
+  );
+}
 
 // src/config/schema.ts
 var DEFAULT_THEME = {
@@ -37,6 +164,9 @@ var VALID_RISKS = /* @__PURE__ */ new Set(["red", "amber", "green"]);
 function isNonEmptyString(v) {
   return typeof v === "string" && v.trim().length > 0;
 }
+function stripNewlines(v) {
+  return v.replace(/\r\n|\r|\n/g, " ");
+}
 function isValidBilingual(v) {
   if (typeof v === "string") return true;
   if (v !== null && typeof v === "object") {
@@ -85,17 +215,17 @@ function coerceCredentials(raw, warnings) {
       continue;
     }
     const cred = {
-      role: c["role"].trim(),
-      login: c["login"].trim(),
-      password: isNonEmptyString(c["password"]) ? c["password"].trim() : ""
+      role: stripNewlines(c["role"].trim()),
+      login: stripNewlines(c["login"].trim()),
+      password: isNonEmptyString(c["password"]) ? stripNewlines(c["password"].trim()) : ""
     };
-    if (isNonEmptyString(c["roleAr"])) cred.roleAr = c["roleAr"].trim();
+    if (isNonEmptyString(c["roleAr"])) cred.roleAr = stripNewlines(c["roleAr"].trim());
     if (typeof c["seeded"] === "boolean") cred.seeded = c["seeded"];
     if (c["hint"] !== null && c["hint"] !== void 0 && typeof c["hint"] === "object") {
       const h = c["hint"];
       if (typeof h["en"] === "string") {
-        cred.hint = { en: h["en"] };
-        if (typeof h["ar"] === "string") cred.hint.ar = h["ar"];
+        cred.hint = { en: stripNewlines(h["en"]) };
+        if (typeof h["ar"] === "string") cred.hint.ar = stripNewlines(h["ar"]);
       }
     }
     out.push(cred);
@@ -153,9 +283,11 @@ function coerceJourney(raw, warnings) {
       if (isNonEmptyString(s["riskWhy"])) step.riskWhy = s["riskWhy"];
       steps.push(step);
     }
+    const rawRole = lane["role"];
+    const role = typeof rawRole === "string" ? stripNewlines(rawRole) : { en: stripNewlines(rawRole.en), ...typeof rawRole.ar === "string" ? { ar: stripNewlines(rawRole.ar) } : {} };
     const resolved = {
       id: lane["id"].trim(),
-      role: lane["role"],
+      role,
       steps
     };
     if (isNonEmptyString(lane["color"])) resolved.color = lane["color"].trim();
@@ -166,7 +298,10 @@ function coerceJourney(raw, warnings) {
 function coercePreamble(raw) {
   if (raw === null || raw === void 0) return null;
   if (typeof raw !== "object" || Array.isArray(raw)) return null;
-  return raw;
+  const p = { ...raw };
+  if (typeof p.projectName === "string") p.projectName = stripNewlines(p.projectName);
+  if (typeof p.stack === "string") p.stack = stripNewlines(p.stack);
+  return p;
 }
 function validateConfig(input) {
   const warnings = [];
@@ -658,11 +793,12 @@ function createStorage(namespace) {
   const prefix = `${namespace}:`;
   const fallback = /* @__PURE__ */ new Map();
   const available = isStorageAvailable();
+  let degraded = false;
   function fullKey(key) {
     return `${prefix}${key}`;
   }
   function getItem(key) {
-    if (available) {
+    if (available && !degraded) {
       try {
         return window.localStorage.getItem(fullKey(key));
       } catch {
@@ -671,11 +807,12 @@ function createStorage(namespace) {
     return fallback.get(fullKey(key)) ?? null;
   }
   function setItem(key, value) {
-    if (available) {
+    if (available && !degraded) {
       try {
         window.localStorage.setItem(fullKey(key), value);
         return;
       } catch {
+        degraded = true;
       }
     }
     fallback.set(fullKey(key), value);
@@ -698,109 +835,6 @@ function createStorage(namespace) {
   return { getItem, setItem, getJSON, setJSON };
 }
 
-// src/lib/idb.ts
-var DB_VERSION = 2;
-var NOTES_STORE = "notes";
-var META_STORE = "meta";
-var dbCache = /* @__PURE__ */ new Map();
-function isIdbAvailable() {
-  return typeof indexedDB !== "undefined";
-}
-function openDB(dbName) {
-  const cached = dbCache.get(dbName);
-  if (cached) return cached;
-  const promise = new Promise((resolve, reject) => {
-    let req;
-    try {
-      req = indexedDB.open(dbName, DB_VERSION);
-    } catch (err) {
-      dbCache.delete(dbName);
-      reject(err);
-      return;
-    }
-    req.onupgradeneeded = (e) => {
-      const db = e.target.result;
-      const oldVersion = e.oldVersion;
-      switch (true) {
-        case oldVersion < 1:
-          if (!db.objectStoreNames.contains(NOTES_STORE)) {
-            db.createObjectStore(NOTES_STORE, { keyPath: "id" });
-          }
-        // falls through
-        case oldVersion < 2:
-          if (!db.objectStoreNames.contains(META_STORE)) {
-            db.createObjectStore(META_STORE, { keyPath: "key" });
-          }
-          break;
-      }
-    };
-    req.onsuccess = (e) => resolve(e.target.result);
-    req.onerror = (e) => {
-      dbCache.delete(dbName);
-      reject(e.target.error);
-    };
-  });
-  dbCache.set(dbName, promise);
-  return promise;
-}
-function run(dbName, store, mode, fn) {
-  return openDB(dbName).then(
-    (db) => new Promise((resolve, reject) => {
-      const tx = db.transaction(store, mode);
-      const s = tx.objectStore(store);
-      let result;
-      const req = fn(s);
-      if (req) {
-        req.onsuccess = () => {
-          result = req.result;
-        };
-      }
-      tx.oncomplete = () => resolve(result);
-      tx.onerror = () => reject(tx.error);
-      tx.onabort = () => reject(tx.error);
-    })
-  );
-}
-function createIdb(namespace) {
-  const dbName = `${namespace}-db`;
-  if (!isIdbAvailable()) {
-    return {
-      getAll: () => Promise.resolve([]),
-      put: () => Promise.resolve(),
-      delete: () => Promise.resolve(),
-      clear: () => Promise.resolve()
-    };
-  }
-  return {
-    getAll: async () => {
-      try {
-        const rows = await run(dbName, NOTES_STORE, "readonly", (s) => s.getAll());
-        return rows ?? [];
-      } catch {
-        return [];
-      }
-    },
-    put: async (record) => {
-      try {
-        await run(dbName, NOTES_STORE, "readwrite", (s) => s.put(record));
-      } catch {
-      }
-    },
-    delete: async (id) => {
-      try {
-        await run(dbName, NOTES_STORE, "readwrite", (s) => s.delete(id));
-      } catch {
-      }
-    },
-    clear: async () => {
-      try {
-        await run(dbName, NOTES_STORE, "readwrite", (s) => s.clear());
-      } catch {
-      }
-    }
-  };
-}
-
 // src/lib/strings.ts
 var STR = {
   en: {
@@ -1029,7 +1063,7 @@ function mdTable(headers, rows) {
   const lines = [
     `| ${headers.join(" | ")} |`,
     `| ${sep.join(" | ")} |`,
-    ...rows.map((r) => `| ${r.map((c) => c.replace(/\|/g, "\\|")).join(" | ")} |`)
+    ...rows.map((r) => `| ${r.map((c) => c.replace(/\|/g, "\\|").replace(/\r\n|\r|\n/g, " ")).join(" | ")} |`)
   ];
   return lines.join("\n");
 }
@@ -1633,6 +1667,17 @@ function QaFab() {
   const [pos, setPos] = useState(() => loadFabPos());
   const dragRef = useRef(null);
   const didDragRef = useRef(false);
+  const [, setViewportTick] = useState(0);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onViewportChange = () => setViewportTick((n) => n + 1);
+    window.addEventListener("resize", onViewportChange);
+    window.addEventListener("orientationchange", onViewportChange);
+    return () => {
+      window.removeEventListener("resize", onViewportChange);
+      window.removeEventListener("orientationchange", onViewportChange);
+    };
+  }, []);
   if (captureActive) return null;
   const onPointerDown = (e) => {
     if (dragRef.current) return;
@@ -1762,9 +1807,13 @@ function NoteEditor() {
   const [previewUrl, setPreviewUrl] = useState(null);
   const [dragOver, setDragOver] = useState(false);
   const fileRef = useRef(null);
+  const previewUrlRef = useRef(null);
+  useEffect(() => {
+    previewUrlRef.current = previewUrl;
+  }, [previewUrl]);
   useEffect(() => {
     return () => {
-      if (previewUrl) URL.revokeObjectURL(previewUrl);
+      if (previewUrlRef.current) URL.revokeObjectURL(previewUrlRef.current);
     };
   }, []);
   const setImage = useCallback((blob) => {
@@ -1960,16 +2009,17 @@ function NoteEditor() {
 }
 
 // src/lib/highlight.ts
+var SETTLE_TIMEOUT_MS = 400;
 function readCssVar(name, fallback) {
   if (typeof document === "undefined") return fallback;
   const val = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
   return val || fallback;
 }
-function paint(rect, color) {
+function paint(rect, colors) {
   if (typeof document === "undefined") return;
   if (!rect || rect.width < 1 || rect.height < 1) return;
-  const accent = readCssVar("--qa-accent", "#7c3aed");
-  const primary = readCssVar("--qa-primary", "#4f46e5");
+  const accent = colors?.accent ?? readCssVar("--qa-accent", "#7c3aed");
+  const primary = colors?.primary ?? readCssVar("--qa-primary", "#4f46e5");
   const box = document.createElement("div");
   box.setAttribute("data-qa-overlay", "true");
   Object.assign(box.style, {
@@ -1995,7 +2045,25 @@ function paint(rect, color) {
     if (box.parentNode) box.remove();
   }, 1500);
 }
-function flashLocate(target, color) {
+function settleThenPaint(el, colors) {
+  const now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
+  const start = now();
+  let last = null;
+  let stableFrames = 0;
+  const tick = () => {
+    const r = el.getBoundingClientRect();
+    const unchanged = !!last && r.top === last.top && r.left === last.left && r.width === last.width && r.height === last.height;
+    stableFrames = unchanged ? stableFrames + 1 : 0;
+    last = r;
+    if (stableFrames >= 2 || now() - start >= SETTLE_TIMEOUT_MS) {
+      paint({ top: r.top, left: r.left, width: r.width, height: r.height }, colors);
+      return;
+    }
+    requestAnimationFrame(tick);
+  };
+  requestAnimationFrame(tick);
+}
+function flashLocate(target, colors) {
   if (typeof document === "undefined" || !target) return;
   let el = null;
   if (target.selector) {
@@ -2007,13 +2075,18 @@ function flashLocate(target, color) {
   }
   if (el) {
     el.scrollIntoView({ block: "center", inline: "center" });
-    requestAnimationFrame(() => {
-      if (!el) return;
-      const r = el.getBoundingClientRect();
-      paint({ top: r.top, left: r.left, width: r.width, height: r.height });
-    });
+    settleThenPaint(el, colors);
   } else if (target.rect) {
-    paint(target.rect);
+    let rect = target.rect;
+    const snap = target.scroll;
+    if (snap) {
+      const dx = window.scrollX - snap.x;
+      const dy = window.scrollY - snap.y;
+      if (dx || dy) {
+        rect = { ...rect, left: rect.left - dx, top: rect.top - dy };
+      }
+    }
+    paint(rect, colors);
   }
 }
 function LocationReveal({ target }) {
@@ -2097,7 +2170,7 @@ function LocationReveal({ target }) {
               /* @__PURE__ */ jsxs(
                 "button",
                 {
-                  onClick: () => flashLocate(target),
+                  onClick: () => flashLocate(target, { primary: theme.primary, accent: theme.accent }),
                   className: "qa-mt-1 qa-inline-flex qa-items-center qa-gap-1 qa-rounded-md qa-px-2 qa-py-1 qa-font-medium qa-text-white qa-tap",
                   style: { background: theme.accent, border: "none", cursor: "pointer" },
                   children: [
@@ -2371,8 +2444,37 @@ function NoteList() {
   }
   return /* @__PURE__ */ jsx("ul", { className: "qa-space-y-2", children: notes.map((n, i) => /* @__PURE__ */ jsx(NoteItem, { note: n, index: notes.length - i }, n.id)) });
 }
-function CopyField({ value, ink }) {
+function EyeIcon({ open, size = 12, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: open ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+        /* @__PURE__ */ jsx("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+        /* @__PURE__ */ jsx("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+        /* @__PURE__ */ jsx("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+      ] })
+    }
+  );
+}
+var MASK = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
+function CopyField({ value, ink, maskable = false }) {
   const [done, setDone] = useState(false);
+  const [revealed, setRevealed] = useState(true);
   const copy = async () => {
     if (value === "\u2014") return;
     if (typeof navigator === "undefined" || !navigator.clipboard) return;
@@ -2383,20 +2485,36 @@ function CopyField({ value, ink }) {
     } catch {
     }
   };
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick: copy,
-      disabled: value === "\u2014",
-      dir: "ltr",
-      className: "qa-group qa-inline-flex qa-items-center qa-gap-1.5 qa-rounded-md qa-px-1.5 qa-py-0.5 qa-font-mono qa-text-xs qa-hover-bg-black-5",
-      style: { background: "transparent", border: "none", cursor: value === "\u2014" ? "default" : "pointer" },
-      children: [
-        /* @__PURE__ */ jsx("span", { style: { color: ink }, children: value }),
-        value !== "\u2014" && (done ? /* @__PURE__ */ jsx(Icon, { name: "Check", size: 12, className: "qa-text-green-600" }) : /* @__PURE__ */ jsx(Icon, { name: "Copy", size: 12, className: "qa-opacity-40 qa-group-hover-opacity-80" }))
-      ]
-    }
-  );
+  const hidden = maskable && !revealed && value !== "\u2014";
+  const displayValue = hidden ? MASK : value;
+  return /* @__PURE__ */ jsxs("span", { className: "qa-inline-flex qa-items-center qa-gap-1", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: copy,
+        disabled: value === "\u2014",
+        dir: "ltr",
+        className: "qa-group qa-inline-flex qa-items-center qa-gap-1.5 qa-rounded-md qa-px-1.5 qa-py-0.5 qa-font-mono qa-text-xs qa-hover-bg-black-5",
+        style: { background: "transparent", border: "none", cursor: value === "\u2014" ? "default" : "pointer" },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { color: ink }, children: displayValue }),
+          value !== "\u2014" && (done ? /* @__PURE__ */ jsx(Icon, { name: "Check", size: 12, className: "qa-text-green-600" }) : /* @__PURE__ */ jsx(Icon, { name: "Copy", size: 12, className: "qa-opacity-40 qa-group-hover-opacity-80" }))
+        ]
+      }
+    ),
+    maskable && value !== "\u2014" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setRevealed((r) => !r),
+        "aria-label": revealed ? "Hide password" : "Show password",
+        title: revealed ? "Hide password" : "Show password",
+        className: "qa-inline-flex qa-items-center qa-rounded-md qa-p-0.5 qa-opacity-40 qa-hover-opacity-80",
+        style: { background: "transparent", border: "none", cursor: "pointer" },
+        children: /* @__PURE__ */ jsx(EyeIcon, { open: revealed, size: 12 })
+      }
+    )
+  ] });
 }
 function CredentialsSection() {
   const { loginsUsed, toggleLogin, t, lang, pick: pick2, loginField, credentials, theme } = useQa();
@@ -2414,7 +2532,7 @@ function CredentialsSection() {
         }
       )
     ] }),
-    credentials.map((c) => {
+    credentials.map((c, i) => {
       const used = loginsUsed.has(c.role);
       const label = lang === "ar" && c.roleAr ? c.roleAr : c.role;
       return /* @__PURE__ */ jsxs(
@@ -2452,11 +2570,11 @@ function CredentialsSection() {
             c.seeded && /* @__PURE__ */ jsxs("div", { className: "qa-mt-1.5 qa-flex qa-flex-wrap qa-items-center qa-gap-x-3 qa-gap-y-1 qa-ps-6", children: [
               /* @__PURE__ */ jsx(CopyField, { value: c.login, ink: theme.ink }),
               /* @__PURE__ */ jsx("span", { className: "qa-text-slate-300", children: "\xB7" }),
-              /* @__PURE__ */ jsx(CopyField, { value: c.password, ink: theme.ink })
+              /* @__PURE__ */ jsx(CopyField, { value: c.password, ink: theme.ink, maskable: true })
             ] })
           ]
         },
-        c.role
+        `${c.role}-${i}`
       );
     })
   ] });
@@ -2527,7 +2645,7 @@ function Lane({
               style: { insetInlineStart: "7px", background: `${color}40`, bottom: "4px" }
             }
           ),
-          steps.map((s) => {
+          steps.map((s, i) => {
             const k = keyOf(id, s.path);
             const on = checked.has(k);
             const riskColor = s.risk ? RISK_COLORS[s.risk] : RISK_COLORS.none;
@@ -2591,7 +2709,7 @@ function Lane({
                   ] })
                 ]
               }
-            ) }, s.path);
+            ) }, `${k}-${i}`);
           })
         ] })
       ]
@@ -2735,6 +2853,8 @@ function QaPanel() {
     }
     if (phase === "hidden") {
       setShowIn(false);
+      setNaming(false);
+      setConfirmClear(false);
     }
     if (phase === "visible") {
       setShowIn(true);
@@ -2931,7 +3051,8 @@ function QaPanel() {
             activeTab,
             setActiveTab,
             t,
-            theme
+            theme,
+            lang
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "qa-h-px", style: { background: `${theme.primary}14` } }),
@@ -3083,7 +3204,8 @@ function TabsBar({
   activeTab,
   setActiveTab,
   t,
-  theme
+  theme,
+  lang
 }) {
   const tabRefs = useRef([]);
   const barRef = useRef(null);
@@ -3095,7 +3217,7 @@ function TabsBar({
     if (!btn || !bar) return;
     bar.style.left = `${btn.offsetLeft + 8}px`;
     bar.style.width = `${Math.max(0, btn.offsetWidth - 16)}px`;
-  }, [activeTab]);
+  }, [activeTab, lang]);
   useLayoutEffect(() => {
     reposition();
   }, [reposition]);
@@ -3144,6 +3266,13 @@ function TabsBar({
 }
 
 // src/lib/capture.ts
+var HTML2CANVAS_TIMEOUT_MS = 1e4;
+function withTimeout(promise, ms) {
+  return Promise.race([
+    promise,
+    new Promise((resolve) => setTimeout(() => resolve(null), ms))
+  ]);
+}
 function toBlob(canvas) {
   return new Promise((resolve) => {
     if (canvas.toBlob) {
@@ -3165,24 +3294,28 @@ async function captureRegion(rect, scroll) {
   try {
     const { default: html2canvas } = await import('html2canvas');
     const scale = Math.min(window.devicePixelRatio || 1, 2);
-    const canvas = await html2canvas(document.body, {
-      x: sx + rect.left,
-      y: sy + rect.top,
-      width: rect.width,
-      height: rect.height,
-      scale,
-      useCORS: true,
-      allowTaint: true,
-      backgroundColor: null,
-      logging: false,
-      scrollX: sx,
-      scrollY: sy,
-      // Viewport-only clone (not the full document) — see iOS canvas-cap
-      // rationale above. Keeps the offscreen render surface ~viewport*scale.
-      windowWidth: window.innerWidth,
-      windowHeight: window.innerHeight,
-      ignoreElements: (el) => el.nodeType === 1 && typeof el.hasAttribute === "function" && el.hasAttribute("data-qa-overlay")
-    });
+    const canvas = await withTimeout(
+      html2canvas(document.body, {
+        x: sx + rect.left,
+        y: sy + rect.top,
+        width: rect.width,
+        height: rect.height,
+        scale,
+        useCORS: true,
+        allowTaint: true,
+        backgroundColor: null,
+        logging: false,
+        scrollX: sx,
+        scrollY: sy,
+        // Viewport-only clone (not the full document) — see iOS canvas-cap
+        // rationale above. Keeps the offscreen render surface ~viewport*scale.
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight,
+        ignoreElements: (el) => el.nodeType === 1 && typeof el.hasAttribute === "function" && el.hasAttribute("data-qa-overlay")
+      }),
+      HTML2CANVAS_TIMEOUT_MS
+    );
+    if (!canvas) return null;
     return await toBlob(canvas);
   } catch (err) {
     console.warn("[QA] region capture failed:", err);
@@ -3195,7 +3328,8 @@ function isCleanId(id) {
   return !!id && /^[a-zA-Z][\w-]*$/.test(id) && id.length <= 40;
 }
 function esc(value) {
-  return typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value;
+  if (typeof CSS !== "undefined" && CSS.escape) return CSS.escape(value);
+  return value.replace(/[\\"]/g, "\\$&");
 }
 function nthOfTypePath(el, maxDepth = 6) {
   if (typeof document === "undefined" || !document.body) return "";
@@ -3223,46 +3357,68 @@ function nthOfTypePath(el, maxDepth = 6) {
   }
   return parts.join(" > ");
 }
+function isUniqueSelector(selector) {
+  if (!selector) return false;
+  try {
+    return document.querySelectorAll(selector).length === 1;
+  } catch {
+    return false;
+  }
+}
 function getStableSelector(el) {
   if (typeof document === "undefined") return "";
   if (!el || el.nodeType !== 1) return "";
   const tag = el.tagName.toLowerCase();
   const htmlEl = el;
-  if (isCleanId(htmlEl.id)) return `#${esc(htmlEl.id)}`;
+  if (isCleanId(htmlEl.id)) {
+    const candidate = `#${esc(htmlEl.id)}`;
+    if (isUniqueSelector(candidate)) return candidate;
+  }
   for (const attr of ["data-testid", "data-test", "data-cy", "data-id", "data-key"]) {
     const val = el.getAttribute(attr);
-    if (val) return `[${attr}="${esc(val)}"]`;
+    if (val) {
+      const candidate = `[${attr}="${esc(val)}"]`;
+      if (isUniqueSelector(candidate)) return candidate;
+    }
   }
   if (["button", "a", "input", "select", "textarea"].includes(tag)) {
     const label = el.getAttribute("aria-label");
-    if (label) return `${tag}[aria-label="${esc(label)}"]`;
+    if (label) {
+      const candidate = `${tag}[aria-label="${esc(label)}"]`;
+      if (isUniqueSelector(candidate)) return candidate;
+    }
   }
   const name = el.getAttribute("name");
   if (name && ["input", "select", "textarea"].includes(tag)) {
-    return `${tag}[name="${esc(name)}"]`;
+    const candidate = `${tag}[name="${esc(name)}"]`;
+    if (isUniqueSelector(candidate)) return candidate;
   }
   return nthOfTypePath(el);
 }
 
 // src/lib/scrollLock.ts
-var locked = false;
+var lockCount = 0;
 var prevHtmlOverflow = "";
 var prevBodyOverflow = "";
 function lockPageScroll() {
-  if (typeof document === "undefined" || locked) return;
-  const html = document.documentElement;
-  const body = document.body;
-  prevHtmlOverflow = html.style.overflow;
-  prevBodyOverflow = body ? body.style.overflow : "";
-  html.style.overflow = "hidden";
-  if (body) body.style.overflow = "hidden";
-  locked = true;
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    const html = document.documentElement;
+    const body = document.body;
+    prevHtmlOverflow = html.style.overflow;
+    prevBodyOverflow = body ? body.style.overflow : "";
+    html.style.overflow = "hidden";
+    if (body) body.style.overflow = "hidden";
+  }
+  lockCount++;
 }
 function unlockPageScroll() {
-  if (typeof document === "undefined" || !locked) return;
-  document.documentElement.style.overflow = prevHtmlOverflow;
-  if (document.body) document.body.style.overflow = prevBodyOverflow;
-  locked = false;
+  if (typeof document === "undefined" || lockCount === 0) return;
+  lockCount--;
+  if (lockCount === 0) {
+    document.documentElement.style.overflow = prevHtmlOverflow;
+    if (document.body) document.body.style.overflow = prevBodyOverflow;
+  }
 }
 var DRAG_THRESHOLD2 = 6;
 var TOUCH_DRAG_THRESHOLD = 12;
@@ -3281,6 +3437,7 @@ function CaptureMode() {
   const { addNote, endCapture, t, dir, theme } = useQa();
   const coarse = useCoarsePointer();
   const layerRef = useRef(null);
+  const overlayRootRef = useRef(null);
   const [phase, setPhase] = useState("selecting");
   const [hover, setHover] = useState(null);
   const [drag, setDrag] = useState(null);
@@ -3297,6 +3454,10 @@ function CaptureMode() {
   const pointerKind = useRef("mouse");
   const scrollSnap = useRef({ x: 0, y: 0 });
   const handleDragRef = useRef(null);
+  const mountedRef = useRef(true);
+  useEffect(() => () => {
+    mountedRef.current = false;
+  }, []);
   const [cardIn, setCardIn] = useState(false);
   const elementUnder = useCallback((x, y) => {
     const layer = layerRef.current;
@@ -3319,6 +3480,10 @@ function CaptureMode() {
     lockPageScroll();
     try {
       const blob = await captureRegion(sel.rect, scrollSnap.current);
+      if (!mountedRef.current) {
+        if (blob) URL.revokeObjectURL(URL.createObjectURL(blob));
+        return;
+      }
       setShot(blob);
       setShotUrl((old) => {
         if (old) URL.revokeObjectURL(old);
@@ -3326,7 +3491,7 @@ function CaptureMode() {
       });
     } finally {
       unlockPageScroll();
-      setCapturing(false);
+      if (mountedRef.current) setCapturing(false);
     }
   }, []);
   useEffect(() => {
@@ -3495,6 +3660,38 @@ function CaptureMode() {
     document.addEventListener("keydown", onKey, true);
     return () => document.removeEventListener("keydown", onKey, true);
   }, [endCapture]);
+  useEffect(() => {
+    const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const onKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      const root = overlayRootRef.current;
+      if (!root) return;
+      const focusable = Array.from(
+        root.querySelectorAll(FOCUSABLE_SELECTOR)
+      ).filter((el) => !el.hasAttribute("disabled") && el.offsetParent !== null);
+      if (focusable.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      const activeInside = !!active && root.contains(active);
+      if (e.shiftKey) {
+        if (!activeInside || active === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (!activeInside || active === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, []);
   useEffect(() => {
     if (phase === "annotating" && taRef.current) taRef.current.focus();
   }, [phase]);
@@ -3516,7 +3713,8 @@ function CaptureMode() {
         left: Math.round(selection.rect.left),
         width: Math.round(selection.rect.width),
         height: Math.round(selection.rect.height)
-      }
+      },
+      scroll: { ...scrollSnap.current }
     };
     await addNote({ description, screenshot: shot ?? void 0, target });
     endCapture();
@@ -3540,7 +3738,7 @@ function CaptureMode() {
   const activeRect = drag?.rect ?? candidate?.rect ?? selection?.rect ?? hover?.rect ?? null;
   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", children: [
+  return /* @__PURE__ */ jsxs("div", { "data-qa-overlay": "true", ref: overlayRootRef, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -3552,7 +3750,7 @@ function CaptureMode() {
         className: "qa-fixed qa-inset-0 qa-z-10090",
         style: {
           cursor: phase === "selecting" && !coarse ? "crosshair" : "default",
-          touchAction: coarse ? regionMode ? "none" : "pan-x pan-y" : "auto",
+          touchAction: coarse ? "none" : "auto",
           background: "rgba(58,42,46,0.18)"
         }
       }
@@ -4009,6 +4207,6 @@ function Qapture({ config }) {
   return null;
 }
 
-export { Qapture, initQaStudio };
-//# sourceMappingURL=chunk-L6VS36GE.js.map
-//# sourceMappingURL=chunk-L6VS36GE.js.map
+export { Qapture, deleteQaDatabase, initQaStudio };
+//# sourceMappingURL=chunk-RC7ZUQ5X.js.map
+//# sourceMappingURL=chunk-RC7ZUQ5X.js.map