qapture2 0.2.4 → 0.3.1

package/dist/{chunk-RC7ZUQ5X.js → chunk-2CAMCMJP.js}

@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, Component, useState, useCallback, useRef, useReducer, useContext, useLayoutEffect } from 'react';
+import React, { createContext, useEffect, Component, useState, useRef, useCallback, useMemo, useContext, useReducer, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -74,7 +74,7 @@ function createIdb(namespace) {
   if (!isIdbAvailable()) {
     return {
       getAll: () => Promise.resolve([]),
-      put: () => Promise.resolve(),
+      put: () => Promise.resolve(true),
       delete: () => Promise.resolve(),
       clear: () => Promise.resolve()
     };
@@ -91,7 +91,9 @@ function createIdb(namespace) {
     put: async (record) => {
       try {
         await run(dbName, NOTES_STORE, "readwrite", (s) => s.put(record));
+        return true;
       } catch {
+        return false;
       }
     },
     delete: async (id) => {
@@ -132,25 +134,6 @@ function deleteQaDatabase(namespace) {
 }
 
 // src/config/schema.ts
-var DEFAULT_THEME = {
-  primary: "#4f46e5",
-  // indigo-600
-  primaryDark: "#3730a3",
-  // indigo-800
-  accent: "#7c3aed",
-  // violet-600
-  accentDark: "#6d28d9",
-  // violet-700
-  sage: "#6b7280",
-  // gray-500
-  cream: "#f8fafc",
-  // slate-50
-  mauve: "#a78bfa",
-  // violet-400
-  surface: "#ffffff",
-  ink: "#1f2937"
-  // gray-800
-};
 var DEFAULTS = {
   namespace: "qapture",
   brandLabel: "Qapture",
@@ -158,7 +141,8 @@ var DEFAULTS = {
   rtl: false,
   visible: void 0,
   alwaysVisible: false,
-  hotkey: "shift+alt+q"
+  hotkey: "shift+alt+q",
+  captureContext: true
 };
 var VALID_RISKS = /* @__PURE__ */ new Set(["red", "amber", "green"]);
 function isNonEmptyString(v) {
@@ -175,28 +159,6 @@ function isValidBilingual(v) {
   }
   return false;
 }
-function coerceTheme(input) {
-  if (!input || typeof input !== "object") return { ...DEFAULT_THEME };
-  const out = { ...DEFAULT_THEME };
-  const keys = [
-    "primary",
-    "primaryDark",
-    "accent",
-    "accentDark",
-    "sage",
-    "cream",
-    "mauve",
-    "surface",
-    "ink"
-  ];
-  for (const k of keys) {
-    const v = input[k];
-    if (typeof v === "string" && v.trim().length > 0) {
-      out[k] = v.trim();
-    }
-  }
-  return out;
-}
 function coerceCredentials(raw, warnings) {
   if (!Array.isArray(raw)) return [];
   const out = [];
@@ -273,6 +235,13 @@ function coerceJourney(raw, warnings) {
         path: s["path"].trim(),
         what: s["what"]
       };
+      if (s["expect"] !== void 0) {
+        if (isValidBilingual(s["expect"])) {
+          step.expect = s["expect"];
+        } else {
+          warnings.push(`journey[${i}].steps[${j}] (path="${String(s["path"])}"): invalid "expect" \u2014 ignored`);
+        }
+      }
       if (s["risk"] !== void 0) {
         if (VALID_RISKS.has(s["risk"])) {
           step.risk = s["risk"];
@@ -295,6 +264,31 @@ function coerceJourney(raw, warnings) {
   }
   return out;
 }
+function warnMissingArabic(loginField, credentials, journey, warnings) {
+  const hasAr = (v) => typeof v === "object" && v !== null && isNonEmptyString(v.ar);
+  const usesArabic = isNonEmptyString(loginField.ar) || credentials.some((c) => isNonEmptyString(c.roleAr) || hasAr(c.hint)) || journey.some((lane) => hasAr(lane.role) || lane.steps.some((s) => hasAr(s.what) || hasAr(s.expect)));
+  if (!usesArabic) return;
+  const missing = [];
+  for (const lane of journey) {
+    for (const step of lane.steps) {
+      if (!hasAr(step.what)) missing.push(`journey "${lane.id}" \u2192 ${step.path} (what)`);
+      if (step.expect !== void 0 && !hasAr(step.expect)) {
+        missing.push(`journey "${lane.id}" \u2192 ${step.path} (expect)`);
+      }
+    }
+  }
+  for (const c of credentials) {
+    if (!isNonEmptyString(c.roleAr)) missing.push(`credentials role="${c.role}" (roleAr)`);
+    if (c.hint !== void 0 && !hasAr(c.hint)) missing.push(`credentials role="${c.role}" (hint.ar)`);
+  }
+  if (!missing.length) return;
+  const LIMIT = 6;
+  const shown = missing.slice(0, LIMIT).join("; ");
+  const rest = missing.length > LIMIT ? ` (+${missing.length - LIMIT} more)` : "";
+  warnings.push(
+    `Arabic is used elsewhere in this config, but ${missing.length} bilingual field(s) have no "ar" and will show English to an Arabic-language tester: ${shown}${rest}. Every {en, ar} pair needs BOTH filled in \u2014 a plain string or an {en}-only object reads identically to a bilingual field that was simply never translated.`
+  );
+}
 function coercePreamble(raw) {
   if (raw === null || raw === void 0) return null;
   if (typeof raw !== "object" || Array.isArray(raw)) return null;
@@ -309,7 +303,6 @@ function validateConfig(input) {
     return {
       config: {
         namespace: DEFAULTS.namespace,
-        theme: { ...DEFAULT_THEME },
         brand: { label: DEFAULTS.brandLabel },
         loginField: { ...DEFAULTS.loginField },
         credentials: [],
@@ -318,7 +311,8 @@ function validateConfig(input) {
         rtl: DEFAULTS.rtl,
         visible: DEFAULTS.visible,
         alwaysVisible: DEFAULTS.alwaysVisible,
-        hotkey: DEFAULTS.hotkey
+        hotkey: DEFAULTS.hotkey,
+        captureContext: DEFAULTS.captureContext
       },
       warnings
     };
@@ -328,7 +322,6 @@ function validateConfig(input) {
     return {
       config: {
         namespace: DEFAULTS.namespace,
-        theme: { ...DEFAULT_THEME },
         brand: { label: DEFAULTS.brandLabel },
         loginField: { ...DEFAULTS.loginField },
         credentials: [],
@@ -337,14 +330,19 @@ function validateConfig(input) {
         rtl: DEFAULTS.rtl,
         visible: DEFAULTS.visible,
         alwaysVisible: DEFAULTS.alwaysVisible,
-        hotkey: DEFAULTS.hotkey
+        hotkey: DEFAULTS.hotkey,
+        captureContext: DEFAULTS.captureContext
       },
       warnings
     };
   }
   const raw = input;
   const namespace = isNonEmptyString(raw["namespace"]) ? raw["namespace"].trim() : DEFAULTS.namespace;
-  const theme = coerceTheme(raw["theme"]);
+  if (raw["theme"] !== void 0) {
+    warnings.push(
+      'theme: custom themes were removed in Qapture 0.3.0 \u2014 the widget now ships one fixed, self-contained design. The "theme" key is ignored; remove it from your qa.config to silence this warning.'
+    );
+  }
   let brandLabel = DEFAULTS.brandLabel;
   if (raw["brand"] !== void 0 && raw["brand"] !== null && typeof raw["brand"] === "object") {
     const b = raw["brand"];
@@ -366,6 +364,7 @@ function validateConfig(input) {
   const rtl = typeof raw["rtl"] === "boolean" ? raw["rtl"] : DEFAULTS.rtl;
   const alwaysVisible = typeof raw["alwaysVisible"] === "boolean" ? raw["alwaysVisible"] : DEFAULTS.alwaysVisible;
   const hotkey = isNonEmptyString(raw["hotkey"]) ? raw["hotkey"].trim() : DEFAULTS.hotkey;
+  const captureContext = typeof raw["captureContext"] === "boolean" ? raw["captureContext"] : DEFAULTS.captureContext;
   let visible = DEFAULTS.visible;
   if (raw["visible"] !== void 0) {
     if (typeof raw["visible"] === "boolean") {
@@ -374,10 +373,10 @@ function validateConfig(input) {
       warnings.push("visible: expected boolean \u2014 using default (dev-only)");
     }
   }
+  warnMissingArabic(loginField, credentials, journey, warnings);
   return {
     config: {
       namespace,
-      theme,
       brand: { label: brandLabel },
       loginField,
       credentials,
@@ -386,7 +385,8 @@ function validateConfig(input) {
       rtl,
       visible,
       alwaysVisible,
-      hotkey
+      hotkey,
+      captureContext
     },
     warnings
   };
@@ -397,6 +397,103 @@ var QA_CSS = `
 /* \u2500\u2500 Reset \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 *, *::before, *::after { box-sizing: border-box; }
 
+/* \u2500\u2500 Design tokens (Graphite \u2014 v0.3.0) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   Single source of truth for every colour, shadow, radius, font, motion
+   duration, and z-index the widget uses. Nothing here is themeable \u2014
+   qapture 0.3.0 ships one fixed, self-contained design. */
+:host {
+  /* Surfaces */
+  --qa-surface-0: #101215;
+  --qa-surface-1: #181B20;
+  --qa-surface-2: #20242B;
+  --qa-surface-3: #2A2F37;
+
+  /* Ink */
+  --qa-ink-hi: #F4F5F7;
+  --qa-ink-mid: #A8AEB8;
+  --qa-ink-lo: #6B717C;
+  --qa-ink-faint: #4A4F58;
+
+  /* Accent */
+  --qa-accent: #4D9CFF;
+  --qa-accent-hover: #6FB0FF;
+  --qa-accent-active: #3B84E6;
+  --qa-on-accent: #0A0C10;
+  --qa-accent-tint: rgba(77,156,255,0.14);
+  --qa-accent-border: rgba(77,156,255,0.45);
+
+  /* Semantic */
+  --qa-danger: #FF6B6B;
+  --qa-danger-tint: rgba(255,107,107,0.14);
+  --qa-warn: #FBBF24;
+  --qa-warn-tint: rgba(251,191,36,0.14);
+  --qa-success: #34D399;
+  --qa-success-tint: rgba(52,211,153,0.14);
+  --qa-neutral: #5B616B;
+
+  /* Borders */
+  --qa-border-subtle: rgba(255,255,255,0.08);
+  --qa-border-strong: rgba(255,255,255,0.14);
+
+  /* Scrims */
+  --qa-scrim-dialog: rgba(8,9,12,0.50);
+  --qa-scrim-capture: rgba(8,9,12,0.32);
+  --qa-scrim-spot: rgba(8,9,12,0.55);
+
+  /* Elevation */
+  --qa-sheen: inset 0 1px 0 rgba(255,255,255,0.06);
+  --qa-elev-1: 0 1px 2px rgba(0,0,0,0.40);
+  --qa-elev-2: 0 8px 24px -8px rgba(0,0,0,0.55);
+  --qa-elev-3: 0 24px 60px -16px rgba(0,0,0,0.65);
+
+  /* Radius */
+  --qa-radius-sm: 6px;
+  --qa-radius-md: 10px;
+  --qa-radius-lg: 14px;
+
+  /* Fonts (same stack for Arabic \u2014 no separate Arabic typeface) */
+  --qa-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --qa-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+
+  /* Motion */
+  --qa-dur-1: 120ms;
+  --qa-dur-2: 180ms;
+  --qa-dur-3: 240ms;
+  --qa-ease: cubic-bezier(0.4,0,0.2,1);
+  --qa-ease-out: cubic-bezier(0.16,1,0.3,1);
+
+  /* Z-index scale */
+  --qa-z-fab: 9990;
+  --qa-z-panel: 9995;
+  --qa-z-capture-dim: 10090;
+  --qa-z-capture-highlight: 10092;
+  --qa-z-capture-region-move: 10093;
+  --qa-z-capture-region-handle: 10094;
+  --qa-z-capture-hint: 10095;
+  --qa-z-capture-ui: 10096;
+  --qa-z-toast: 10097;
+
+  font-family: var(--qa-font);
+  color: var(--qa-ink-hi);
+}
+
+/* Respect the user's OS-level motion preference: kill durations everywhere,
+   including the token defaults so any var(--qa-dur-*)-based rule inherits
+   the kill for free. */
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --qa-dur-1: 0ms;
+    --qa-dur-2: 0ms;
+    --qa-dur-3: 0ms;
+  }
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* \u2500\u2500 Position \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .qa-fixed    { position: fixed; }
 .qa-absolute { position: absolute; }
@@ -412,17 +509,18 @@ var QA_CSS = `
 .qa-left-half { left: 50%; }
 .qa-right-0  { right: 0; }
 
-/* z-index */
+/* z-index \u2014 values mirror the --qa-z-* tokens above; class NAMES are kept
+   verbatim (scripts/browser-test.mjs string-matches .qa-z-10093/.qa-z-10094). */
 .qa-z-1     { z-index: 1; }
 .qa-z-50    { z-index: 50; }
 .qa-z-100   { z-index: 100; }
-.qa-z-10090 { z-index: 10090; }
-.qa-z-10092 { z-index: 10092; }
+.qa-z-10090 { z-index: var(--qa-z-capture-dim); }
+.qa-z-10092 { z-index: var(--qa-z-capture-highlight); }
 /* region-handle layering */
-.qa-z-10093 { z-index: 10093; }
-.qa-z-10094 { z-index: 10094; }
-.qa-z-10095 { z-index: 10095; }
-.qa-z-10096 { z-index: 10096; }
+.qa-z-10093 { z-index: var(--qa-z-capture-region-move); }
+.qa-z-10094 { z-index: var(--qa-z-capture-region-handle); }
+.qa-z-10095 { z-index: var(--qa-z-capture-hint); }
+.qa-z-10096 { z-index: var(--qa-z-capture-ui); }
 
 /* \u2500\u2500 Display / Flex \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .qa-flex          { display: flex; }
@@ -536,7 +634,12 @@ var QA_CSS = `
 .qa-border-t       { border-top-width: 1px; border-top-style: solid; }
 .qa-border-b       { border-bottom-width: 1px; border-bottom-style: solid; }
 .qa-border-white   { border-color: #ffffff; }
-.qa-border-white-40 { border-color: rgba(255,255,255,0.40); }
+.qa-border-white-40 { border-color: var(--qa-border-strong); }
+
+/* Semantic border colour (combine with .qa-border for width+style) */
+.qa-border-subtle { border-color: var(--qa-border-subtle); }
+.qa-border-strong { border-color: var(--qa-border-strong); }
+.qa-border-accent  { border-color: var(--qa-accent-border); }
 
 /* \u2500\u2500 Rounded \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .qa-rounded      { border-radius: 0.25rem; }
@@ -550,6 +653,13 @@ var QA_CSS = `
 .qa-shadow-lg  { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
 .qa-shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
 
+/* Semantic elevation \u2014 each layers --qa-sheen (a 1px inner highlight) on top
+   of the matching --qa-elev-* drop shadow, so raised surfaces read as
+   subtly lit from above rather than flat dark rectangles. */
+.qa-elev-1 { box-shadow: var(--qa-elev-1), var(--qa-sheen); }
+.qa-elev-2 { box-shadow: var(--qa-elev-2), var(--qa-sheen); }
+.qa-elev-3 { box-shadow: var(--qa-elev-3), var(--qa-sheen); }
+
 /* \u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .qa-text-10   { font-size: 10px; }
 .qa-text-11   { font-size: 11px; }
@@ -560,7 +670,7 @@ var QA_CSS = `
 .qa-font-medium   { font-weight: 500; }
 .qa-font-semibold { font-weight: 600; }
 .qa-font-bold     { font-weight: 700; }
-.qa-font-mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+.qa-font-mono  { font-family: var(--qa-font-mono); }
 .qa-leading-relaxed { line-height: 1.625; }
 .qa-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .qa-whitespace-pre-wrap { white-space: pre-wrap; }
@@ -583,19 +693,53 @@ var QA_CSS = `
 /* \u2500\u2500 Colors \u2014 text \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .qa-text-white      { color: #ffffff; }
 .qa-text-current    { color: currentColor; }
-.qa-text-slate-300  { color: #cbd5e1; }
-.qa-text-slate-400  { color: #94a3b8; }
-.qa-text-slate-500  { color: #64748b; }
-.qa-text-green-600  { color: #16a34a; }
-.qa-text-red-500    { color: #ef4444; }
-.qa-text-red-600    { color: #dc2626; }
+/* legacy slate scale, restyled onto the ink levels in place */
+.qa-text-slate-300  { color: var(--qa-ink-faint); }
+.qa-text-slate-400  { color: var(--qa-ink-lo); }
+.qa-text-slate-500  { color: var(--qa-ink-mid); }
+.qa-text-green-600  { color: var(--qa-success); }
+.qa-text-red-500    { color: var(--qa-danger); }
+.qa-text-red-600    { color: var(--qa-danger); }
+
+/* Semantic text levels */
+.qa-text-hi        { color: var(--qa-ink-hi); }
+.qa-text-mid       { color: var(--qa-ink-mid); }
+.qa-text-lo        { color: var(--qa-ink-lo); }
+.qa-text-faint     { color: var(--qa-ink-faint); }
+.qa-text-accent    { color: var(--qa-accent); }
+.qa-text-on-accent { color: var(--qa-on-accent); }
+.qa-text-danger    { color: var(--qa-danger); }
+.qa-text-warn      { color: var(--qa-warn); }
+.qa-text-success   { color: var(--qa-success); }
 
 /* \u2500\u2500 Colors \u2014 background \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-.qa-bg-white        { background-color: #ffffff; }
-.qa-bg-white-25     { background-color: rgba(255,255,255,0.25); }
+/* legacy names, restyled onto Graphite tokens in place \u2014 components keep
+   using these class names unchanged. */
+.qa-bg-white        { background-color: var(--qa-surface-1); }
+.qa-bg-white-25     { background-color: var(--qa-surface-3); }
 .qa-bg-transparent  { background-color: transparent; }
-.qa-bg-black-3      { background-color: rgba(0,0,0,0.03); }
-.qa-bg-black-5      { background-color: rgba(0,0,0,0.05); }
+/* These two were 3%/5% black tints for a light theme, which is inert on a
+   dark surface. Restyled as low-alpha WHITE lifts of the same two
+   intensities \u2014 still legible as a step above the base surface. */
+.qa-bg-black-3      { background-color: rgba(255,255,255,0.03); }
+.qa-bg-black-5      { background-color: rgba(255,255,255,0.05); }
+
+/* Semantic surfaces */
+.qa-bg-0 { background-color: var(--qa-surface-0); }
+.qa-bg-1 { background-color: var(--qa-surface-1); }
+.qa-bg-2 { background-color: var(--qa-surface-2); }
+.qa-bg-3 { background-color: var(--qa-surface-3); }
+
+.qa-bg-accent {
+  background-color: var(--qa-accent);
+  color: var(--qa-on-accent);
+}
+.qa-bg-accent:hover { background-color: var(--qa-accent-hover); }
+
+.qa-bg-accent-tint  { background-color: var(--qa-accent-tint); }
+.qa-bg-danger-tint  { background-color: var(--qa-danger-tint); }
+.qa-bg-warn-tint    { background-color: var(--qa-warn-tint); }
+.qa-bg-success-tint { background-color: var(--qa-success-tint); }
 
 /* \u2500\u2500 Opacity \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .qa-opacity-0   { opacity: 0; }
@@ -614,8 +758,10 @@ var QA_CSS = `
 .qa-touch-none { touch-action: none; }
 .qa-touch-pan  { touch-action: pan-x pan-y; }
 
-.qa-focus-ring:focus {
-  outline: 2px solid var(--qa-primary, #4f46e5);
+/* Restyled onto :focus-visible (was :focus) so a mouse click no longer
+   leaves a persistent ring \u2014 only keyboard/AT focus does. */
+.qa-focus-ring:focus-visible {
+  outline: 2px solid var(--qa-accent);
   outline-offset: 2px;
 }
 
@@ -627,13 +773,14 @@ input:disabled,
 }
 
 /* Hover helpers */
-.qa-hover-bg-black-3:hover  { background-color: rgba(0,0,0,0.03); }
-.qa-hover-bg-black-5:hover  { background-color: rgba(0,0,0,0.05); }
-.qa-hover-bg-white-15:hover { background-color: rgba(255,255,255,0.15); }
+.qa-hover-bg-black-3:hover  { background-color: var(--qa-surface-2); }
+.qa-hover-bg-black-5:hover  { background-color: var(--qa-surface-3); }
+.qa-hover-bg-white-15:hover { background-color: var(--qa-surface-2); }
+.qa-hover-bg-2:hover        { background-color: var(--qa-surface-2); }
 .qa-hover-opacity-80:hover  { opacity: 0.80; }
 .qa-hover-opacity-100:hover { opacity: 1; }
-.qa-hover-text-red:hover    { color: #ef4444; }
-.qa-hover-text-slate-600:hover { color: #475569; }
+.qa-hover-text-red:hover    { color: var(--qa-danger); }
+.qa-hover-text-slate-600:hover { color: var(--qa-ink-hi); }
 
 /* Group-hover (child uses .qa-group-hover-opacity-80 inside a .qa-group parent) */
 .qa-group .qa-group-hover-opacity-80 { opacity: 0.40; }
@@ -657,13 +804,25 @@ input:disabled,
   50%       { opacity: 0.5; box-shadow: 0 0 0 8px transparent; }
 }
 
+@keyframes qaShimmer {
+  0%, 100% { opacity: 0.55; }
+  50%      { opacity: 1; }
+}
+
 .qa-animate-spin {
   animation: qaSpin 1s linear infinite;
 }
 
 .qa-animate-pulse-accent {
   animation: qaPulse 2s ease-in-out infinite;
-  color: var(--qa-accent, #7c3aed);
+  color: var(--qa-accent);
+}
+
+/* Loading placeholder rows (NoteList while notesLoading && !notes.length) */
+.qa-skeleton {
+  background-color: var(--qa-surface-2);
+  border-radius: var(--qa-radius-sm);
+  animation: qaShimmer 1.4s ease-in-out infinite;
 }
 
 /* \u2500\u2500 Print \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -750,6 +909,41 @@ input:disabled,
 
 /* \u2500\u2500 Extra space-y \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .qa-space-y-1\\.5 > * + * { margin-top: 0.375rem; }
+
+/* \u2500\u2500 Toast (NoticeHost) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.qa-toast-viewport {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 1rem;
+  z-index: var(--qa-z-toast);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  pointer-events: none;
+}
+.qa-toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: min(92vw, 360px);
+  padding: 0.625rem 0.75rem;
+  background-color: var(--qa-surface-2);
+  border: 1px solid var(--qa-border-subtle);
+  border-radius: var(--qa-radius-md);
+  box-shadow: var(--qa-elev-2), var(--qa-sheen);
+  color: var(--qa-ink-hi);
+  font-size: 13px;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity var(--qa-dur-2) var(--qa-ease-out),
+              transform var(--qa-dur-2) var(--qa-ease-out);
+}
+.qa-toast.qa-toast-in {
+  opacity: 1;
+  transform: translateY(0);
+}
 `;
 function injectStyles(root) {
   if (typeof CSSStyleSheet !== "undefined" && "adoptedStyleSheets" in Document.prototype) {
@@ -765,16 +959,295 @@ function injectStyles(root) {
   style.textContent = QA_CSS;
   root.appendChild(style);
 }
-function applyThemeVars(host, theme) {
-  host.style.setProperty("--qa-primary", theme.primary);
-  host.style.setProperty("--qa-primary-dark", theme.primaryDark);
-  host.style.setProperty("--qa-accent", theme.accent);
-  host.style.setProperty("--qa-accent-dark", theme.accentDark);
-  host.style.setProperty("--qa-sage", theme.sage);
-  host.style.setProperty("--qa-cream", theme.cream);
-  host.style.setProperty("--qa-mauve", theme.mauve);
-  host.style.setProperty("--qa-surface", theme.surface);
-  host.style.setProperty("--qa-ink", theme.ink);
+
+// src/lib/contextBuffer.ts
+var RING_CAP = 75;
+var MAX_MESSAGE_CHARS = 600;
+var MAX_HTML_CHARS = 600;
+var ring = [];
+var installed = false;
+var refCount = 0;
+var drainedUpTo = 0;
+var original = {};
+function push(ev) {
+  ring.push(ev);
+  if (ring.length > RING_CAP) {
+    const overflow = ring.length - RING_CAP;
+    ring = ring.slice(overflow);
+    drainedUpTo = Math.max(0, drainedUpTo - overflow);
+  }
+}
+function clip(s, max = MAX_MESSAGE_CHARS) {
+  const str = typeof s === "string" ? s : safeStringify(s);
+  return str.length > max ? `${str.slice(0, max)}\u2026` : str;
+}
+function safeStringify(v) {
+  if (v === null) return "null";
+  if (v === void 0) return "undefined";
+  if (typeof v === "string") return v;
+  if (v instanceof Error) return `${v.name}: ${v.message}`;
+  try {
+    return JSON.stringify(v) ?? String(v);
+  } catch {
+    return String(v);
+  }
+}
+function now() {
+  return Date.now();
+}
+function redactUrl(raw) {
+  const s = String(raw ?? "");
+  try {
+    const u = new URL(s, typeof location !== "undefined" ? location.href : "http://localhost");
+    const redacted = u.search ? "?\u2026" : "";
+    return `${u.origin}${u.pathname}${redacted}`;
+  } catch {
+    const cut = s.split(/[?#]/)[0];
+    return s.length > cut.length ? `${cut}?\u2026` : cut;
+  }
+}
+function installContextCapture() {
+  refCount += 1;
+  if (installed) return;
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  installed = true;
+  original.consoleError = console.error.bind(console);
+  original.consoleWarn = console.warn.bind(console);
+  console.error = (...args) => {
+    push({ t: now(), kind: "console", level: "error", message: clip(args.map(safeStringify).join(" ")) });
+    original.consoleError?.(...args);
+  };
+  console.warn = (...args) => {
+    push({ t: now(), kind: "console", level: "warn", message: clip(args.map(safeStringify).join(" ")) });
+    original.consoleWarn?.(...args);
+  };
+  original.onError = (e) => {
+    const ev = { t: now(), kind: "error", message: clip(e.message) };
+    if (e.error?.stack) ev.stack = clip(e.error.stack);
+    push(ev);
+  };
+  original.onRejection = (e) => {
+    const reason = e.reason;
+    const ev = {
+      t: now(),
+      kind: "error",
+      message: clip(reason instanceof Error ? `${reason.name}: ${reason.message}` : safeStringify(reason))
+    };
+    if (reason instanceof Error && reason.stack) ev.stack = clip(reason.stack);
+    push(ev);
+  };
+  window.addEventListener("error", original.onError);
+  window.addEventListener("unhandledrejection", original.onRejection);
+  if (typeof window.fetch === "function") {
+    original.fetch = window.fetch.bind(window);
+    window.fetch = async (input, init) => {
+      const started = now();
+      const method = (init?.method || (typeof input === "object" && "method" in input ? input.method : "GET") || "GET").toUpperCase();
+      const url = redactUrl(typeof input === "string" ? input : input instanceof URL ? input.href : input.url);
+      try {
+        const res = await original.fetch(input, init);
+        push({ t: started, kind: "network", method, url, status: res.status, durationMs: now() - started });
+        return res;
+      } catch (err) {
+        push({
+          t: started,
+          kind: "network",
+          method,
+          url,
+          status: null,
+          durationMs: now() - started,
+          error: clip(err instanceof Error ? err.message : safeStringify(err))
+        });
+        throw err;
+      }
+    };
+  }
+  if (typeof XMLHttpRequest !== "undefined") {
+    original.xhrOpen = XMLHttpRequest.prototype.open;
+    original.xhrSend = XMLHttpRequest.prototype.send;
+    XMLHttpRequest.prototype.open = function(method, url, ...rest) {
+      this.__qaMethod = String(method || "GET").toUpperCase();
+      this.__qaUrl = redactUrl(typeof url === "string" ? url : url.href);
+      return original.xhrOpen.call(this, method, url, ...rest);
+    };
+    XMLHttpRequest.prototype.send = function(...args) {
+      this.__qaStart = now();
+      const record = (error) => {
+        const ev = {
+          t: this.__qaStart ?? now(),
+          kind: "network",
+          method: this.__qaMethod ?? "GET",
+          url: this.__qaUrl ?? "",
+          status: error ? null : this.status,
+          durationMs: now() - (this.__qaStart ?? now())
+        };
+        if (error) ev.error = error;
+        push(ev);
+      };
+      this.addEventListener("load", () => record());
+      this.addEventListener("error", () => record("network error"));
+      this.addEventListener("timeout", () => record("timeout"));
+      return original.xhrSend.apply(this, args);
+    };
+  }
+}
+function uninstallContextCapture() {
+  if (refCount > 0) refCount -= 1;
+  if (!installed || refCount > 0) return;
+  installed = false;
+  if (original.consoleError) console.error = original.consoleError;
+  if (original.consoleWarn) console.warn = original.consoleWarn;
+  if (original.fetch) window.fetch = original.fetch;
+  if (original.xhrOpen) XMLHttpRequest.prototype.open = original.xhrOpen;
+  if (original.xhrSend) XMLHttpRequest.prototype.send = original.xhrSend;
+  if (original.onError) window.removeEventListener("error", original.onError);
+  if (original.onRejection) {
+    window.removeEventListener("unhandledrejection", original.onRejection);
+  }
+  ring = [];
+  drainedUpTo = 0;
+}
+function drainSinceLastNote() {
+  if (!installed) return [];
+  const slice = ring.slice(drainedUpTo);
+  drainedUpTo = ring.length;
+  return slice;
+}
+function collectEnvSnapshot(route) {
+  const snap = {
+    url: typeof location !== "undefined" ? redactUrl(location.href) : "",
+    route,
+    viewportW: typeof window !== "undefined" ? window.innerWidth : 0,
+    viewportH: typeof window !== "undefined" ? window.innerHeight : 0,
+    dpr: typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
+    userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "",
+    language: typeof navigator !== "undefined" ? navigator.language : "",
+    online: typeof navigator !== "undefined" ? navigator.onLine !== false : true,
+    timezone: ""
+  };
+  try {
+    snap.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone ?? "";
+  } catch {
+    snap.timezone = "";
+  }
+  try {
+    const nav = performance?.getEntriesByType?.("navigation")?.[0];
+    if (nav && Number.isFinite(nav.duration) && nav.duration > 0) {
+      snap.pageLoadMs = Math.round(nav.duration);
+    }
+  } catch {
+  }
+  try {
+    const mem = performance.memory;
+    if (mem?.usedJSHeapSize) snap.memoryUsedMB = Math.round(mem.usedJSHeapSize / 1048576);
+  } catch {
+  }
+  return snap;
+}
+function luminance(rgb) {
+  const [r, g, b] = rgb.map((c) => {
+    const v = c / 255;
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function parseRgb(color) {
+  const m = (color || "").match(/^rgba?\(([^)]+)\)$/i);
+  if (!m) return null;
+  const parts = m[1].split(/[,/\s]+/).filter(Boolean).map(parseFloat);
+  if (parts.length < 3 || parts.some((n) => Number.isNaN(n))) return null;
+  return [parts[0], parts[1], parts[2]];
+}
+var SENSITIVE_FORENSICS_ATTRS = ["value", "checked", "selected"];
+function sanitizeForForensics(el) {
+  const clone = el.cloneNode(true);
+  const nodes = [clone, ...Array.from(clone.querySelectorAll("*"))];
+  for (const node of nodes) {
+    for (const attr of SENSITIVE_FORENSICS_ATTRS) {
+      if (node.hasAttribute(attr)) node.removeAttribute(attr);
+    }
+    if (node.tagName === "TEXTAREA") node.textContent = "";
+  }
+  return clone;
+}
+function collectTargetForensics(el) {
+  const out = {};
+  if (!el || typeof window === "undefined") return out;
+  try {
+    out.html = clip(sanitizeForForensics(el).outerHTML, MAX_HTML_CHARS);
+  } catch {
+  }
+  try {
+    const cs = getComputedStyle(el);
+    out.styles = {
+      display: cs.display,
+      position: cs.position,
+      overflow: cs.overflow,
+      "z-index": cs.zIndex,
+      "font-size": cs.fontSize,
+      color: cs.color,
+      "background-color": cs.backgroundColor
+    };
+    const fg = parseRgb(cs.color);
+    const bg = parseRgb(cs.backgroundColor);
+    let contrastFlag = "unknown";
+    if (fg && bg) {
+      const l1 = luminance(fg);
+      const l2 = luminance(bg);
+      const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+      contrastFlag = ratio < 4.5 ? "low" : "ok";
+    }
+    const name = el.getAttribute("aria-label") || el.getAttribute("title") || el.innerText || el.textContent || "";
+    const tabIndexAttr = el.getAttribute("tabindex");
+    const nativelyFocusable = /^(a|button|input|select|textarea)$/i.test(el.tagName) && !el.disabled;
+    out.a11y = {
+      hasAccessibleName: name.trim().length > 0,
+      tabReachable: nativelyFocusable || tabIndexAttr !== null && tabIndexAttr !== "-1",
+      contrastFlag
+    };
+    const role = el.getAttribute("role");
+    if (role) out.a11y.role = role;
+  } catch {
+  }
+  return out;
+}
+
+// src/lib/journeyMatch.ts
+function normalizeRoute(route) {
+  const path = String(route ?? "").split(/[?#]/)[0];
+  if (path.length > 1 && path.endsWith("/")) return path.slice(0, -1);
+  return path || "/";
+}
+function segments(path) {
+  return normalizeRoute(path).split("/").filter(Boolean);
+}
+function matchesWithParams(stepPath, route) {
+  const stepSegs = segments(stepPath);
+  const routeSegs = segments(route);
+  if (stepSegs.length !== routeSegs.length) return false;
+  return stepSegs.every((seg, i) => {
+    const isParam = seg.startsWith(":") || seg.startsWith("[") && seg.endsWith("]");
+    return isParam || seg.toLowerCase() === routeSegs[i].toLowerCase();
+  });
+}
+function matchRouteToSteps(journey, route) {
+  if (!Array.isArray(journey) || !journey.length) return [];
+  const target = normalizeRoute(route);
+  const exact = [];
+  const param = [];
+  for (const lane of journey) {
+    if (!lane || !Array.isArray(lane.steps)) continue;
+    for (const step of lane.steps) {
+      if (!step || typeof step.path !== "string") continue;
+      const ref = { laneId: lane.id, path: step.path };
+      if (normalizeRoute(step.path).toLowerCase() === target.toLowerCase()) {
+        exact.push(ref);
+      } else if (matchesWithParams(step.path, target)) {
+        param.push(ref);
+      }
+    }
+  }
+  return [...exact, ...param];
 }
 
 // src/lib/storage.ts
@@ -886,7 +1359,36 @@ var STR = {
     use_this: "Use this",
     adjust: "Adjust",
     resize: "Resize",
-    confirm_region: "Confirm region"
+    confirm_region: "Confirm region",
+    capture_failed: "Screenshot failed",
+    retry: "Retry",
+    persist_failed: "Storage full \u2014 this note may not survive a reload",
+    note_deleted: "Note deleted",
+    notes_cleared: "All notes cleared",
+    undo: "Undo",
+    export_done: "Export downloaded",
+    export_failed: "Export failed",
+    copied: "Copied",
+    copy_failed: "Copy failed",
+    copy_prompt: "Copy as agent prompt",
+    severity_label: "Severity",
+    sev_bug: "Bug",
+    sev_question: "Question",
+    sev_polish: "Polish",
+    status_open: "Open",
+    status_verified: "Verified",
+    context_attached: "{n} runtime events attached",
+    start_walkthrough: "Start walkthrough",
+    step_of: "Step {n} of {m}",
+    next_step: "Next",
+    prev_step: "Back",
+    mark_pass: "Pass",
+    mark_fail: "Fail",
+    capture_here: "Capture here",
+    exit_walkthrough: "Exit",
+    evidence_n: "{n} attached",
+    no_evidence: "ticked, no capture",
+    expected_label: "Expected"
   },
   ar: {
     tab_notes: "\u0627\u0644\u0645\u0644\u0627\u062D\u0638\u0627\u062A",
@@ -937,7 +1439,36 @@ var STR = {
     use_this: "\u0627\u0633\u062A\u062E\u062F\u0645 \u0647\u0630\u0627",
     adjust: "\u062A\u0639\u062F\u064A\u0644",
     resize: "\u062A\u063A\u064A\u064A\u0631 \u0627\u0644\u062D\u062C\u0645",
-    confirm_region: "\u062A\u0623\u0643\u064A\u062F \u0627\u0644\u0645\u0646\u0637\u0642\u0629"
+    confirm_region: "\u062A\u0623\u0643\u064A\u062F \u0627\u0644\u0645\u0646\u0637\u0642\u0629",
+    capture_failed: "\u0641\u0634\u0644 \u0627\u0644\u062A\u0642\u0627\u0637 \u0627\u0644\u0635\u0648\u0631\u0629",
+    retry: "\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629",
+    persist_failed: "\u0645\u0633\u0627\u062D\u0629 \u0627\u0644\u062A\u062E\u0632\u064A\u0646 \u0645\u0645\u062A\u0644\u0626\u0629 \u2014 \u0642\u062F \u0644\u0627 \u062A\u0628\u0642\u0649 \u0647\u0630\u0647 \u0627\u0644\u0645\u0644\u0627\u062D\u0638\u0629 \u0628\u0639\u062F \u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u062A\u062D\u0645\u064A\u0644",
+    note_deleted: "\u062A\u0645 \u062D\u0630\u0641 \u0627\u0644\u0645\u0644\u0627\u062D\u0638\u0629",
+    notes_cleared: "\u062A\u0645 \u0645\u0633\u062D \u062C\u0645\u064A\u0639 \u0627\u0644\u0645\u0644\u0627\u062D\u0638\u0627\u062A",
+    undo: "\u062A\u0631\u0627\u062C\u0639",
+    export_done: "\u062A\u0645 \u062A\u0646\u0632\u064A\u0644 \u0627\u0644\u0645\u0644\u0641",
+    export_failed: "\u0641\u0634\u0644 \u0627\u0644\u062A\u0635\u062F\u064A\u0631",
+    copied: "\u062A\u0645 \u0627\u0644\u0646\u0633\u062E",
+    copy_failed: "\u0641\u0634\u0644 \u0627\u0644\u0646\u0633\u062E",
+    copy_prompt: "\u0646\u0633\u062E \u0643\u0645\u0648\u062C\u0651\u0647 \u0644\u0644\u0648\u0643\u064A\u0644",
+    severity_label: "\u0627\u0644\u0623\u0647\u0645\u064A\u0629",
+    sev_bug: "\u062E\u0644\u0644",
+    sev_question: "\u0633\u0624\u0627\u0644",
+    sev_polish: "\u062A\u062D\u0633\u064A\u0646",
+    status_open: "\u0645\u0641\u062A\u0648\u062D",
+    status_verified: "\u062A\u0645 \u0627\u0644\u062A\u062D\u0642\u0642",
+    context_attached: "{n} \u0645\u0646 \u0623\u062D\u062F\u0627\u062B \u0627\u0644\u062A\u0634\u063A\u064A\u0644 \u0645\u0631\u0641\u0642\u0629",
+    start_walkthrough: "\u0627\u0628\u062F\u0623 \u0627\u0644\u062C\u0648\u0644\u0629",
+    step_of: "\u0627\u0644\u062E\u0637\u0648\u0629 {n} \u0645\u0646 {m}",
+    next_step: "\u0627\u0644\u062A\u0627\u0644\u064A",
+    prev_step: "\u0627\u0644\u0633\u0627\u0628\u0642",
+    mark_pass: "\u0646\u062C\u0627\u062D",
+    mark_fail: "\u0641\u0634\u0644",
+    capture_here: "\u0627\u0644\u062A\u0642\u0637 \u0647\u0646\u0627",
+    exit_walkthrough: "\u062E\u0631\u0648\u062C",
+    evidence_n: "{n} \u0645\u0631\u0641\u0642",
+    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"
   }
 };
 function translate(lang, key, vars) {
@@ -957,10 +1488,14 @@ function pick(value, lang) {
 
 // src/lib/coverage.ts
 var RISK_COLORS = {
-  red: "#EF4444",
-  amber: "#F59E0B",
-  green: "#22C55E",
-  none: "#CBD5E1"
+  red: "#FF6B6B",
+  // --qa-danger
+  amber: "#FBBF24",
+  // --qa-warn
+  green: "#34D399",
+  // --qa-success
+  none: "#5B616B"
+  // --qa-neutral
 };
 function computeCoverage(journey, guideChecked) {
   const red = { total: 0, covered: 0 };
@@ -1020,33 +1555,103 @@ function computeCoverage(journey, guideChecked) {
   };
 }
 
-// src/lib/exportZip.ts
-function fmtTarget(t) {
+// src/lib/noteMarkdown.ts
+function oneLine(s) {
+  return String(s ?? "").replace(/\r?\n|\r/g, " ").trim();
+}
+function formatEvent(ev, t0) {
+  const rel = `${((ev.t - t0) / 1e3).toFixed(1)}s`;
+  if (ev.kind === "network") {
+    const status = ev.status === null ? ev.error ?? "failed" : String(ev.status);
+    return `[${rel}] ${ev.method} ${ev.url} \u2192 ${status} (${ev.durationMs}ms)`;
+  }
+  if (ev.kind === "console") {
+    return `[${rel}] console.${ev.level}: ${oneLine(ev.message)}`;
+  }
+  return `[${rel}] uncaught: ${oneLine(ev.message)}`;
+}
+function noteToMarkdown(note, opts) {
+  const brand = opts?.brand ?? "Qapture";
+  const idx = opts?.index;
   const lines = [];
-  lines.push(`- **Target:** ${t.kind === "region" ? "freeform region" : "element"}`);
-  if (t.selector) lines.push(`- **Selector:** \`${t.selector}\``);
-  if (t.tagName) lines.push(`- **Tag:** \`<${t.tagName}>\``);
-  if (t.text) lines.push(`- **Text:** ${t.text}`);
-  if (t.rect) {
-    lines.push(
-      `- **Position:** top ${t.rect.top}, left ${t.rect.left}, ${t.rect.width}\xD7${t.rect.height}`
-    );
+  lines.push(idx != null ? `## Point ${idx}` : `## ${brand} point`);
+  lines.push("");
+  lines.push(`- **Page:** ${oneLine(note.route) || "/"}`);
+  if (note.url) lines.push(`- **Full URL:** ${oneLine(note.url)}`);
+  lines.push(`- **When:** ${oneLine(note.timestamp)}`);
+  if (note.severity) lines.push(`- **Severity:** ${note.severity}`);
+  if (note.status) lines.push(`- **Status:** ${note.status}`);
+  if (note.journeyRef) {
+    lines.push(`- **Journey step:** ${oneLine(note.journeyRef.laneId)} \u2192 ${oneLine(note.journeyRef.path)}`);
+  }
+  const target = note.target;
+  if (target) {
+    lines.push(`- **Target:** ${target.kind}`);
+    if (target.selector) lines.push(`- **Selector:** \`${oneLine(target.selector)}\``);
+    if (target.tagName) lines.push(`- **Tag:** \`<${oneLine(target.tagName)}>\``);
+    if (target.text) lines.push(`- **Text:** ${oneLine(target.text)}`);
+    const r = target.rect;
+    if (r) {
+      lines.push(
+        `- **Position:** top ${Math.round(r.top)}, left ${Math.round(r.left)}, ${Math.round(r.width)}\xD7${Math.round(r.height)}`
+      );
+    }
   }
-  return lines;
-}
-function fmt(note, index) {
-  const num = index + 1;
-  const lines = [`## Point ${num}`];
-  lines.push(`- **Page:** ${note.route || note.url || "(unknown)"}`);
-  if (note.url && note.url !== note.route) lines.push(`- **Full URL:** ${note.url}`);
-  lines.push(`- **When:** ${note.timestamp}`);
-  if (note.target) {
-    lines.push(...fmtTarget(note.target));
+  if (idx != null && note.screenshot) {
+    lines.push(`- **Screenshot:** screenshots/point-${idx}.png`);
+  }
+  lines.push("");
+  lines.push(oneLine(note.description) ? note.description.trim() : "_(no description)_");
+  const ctx = note.context;
+  if (ctx) {
+    const env = ctx.env;
+    const events = Array.isArray(ctx.events) ? ctx.events : [];
+    lines.push("");
+    lines.push("<details><summary>Runtime context at capture</summary>");
+    lines.push("");
+    lines.push("```");
+    if (env) {
+      lines.push(`viewport   ${env.viewportW}\xD7${env.viewportH} @${env.dpr}x`);
+      if (env.language) lines.push(`language   ${env.language}`);
+      if (env.timezone) lines.push(`timezone   ${env.timezone}`);
+      lines.push(`online     ${env.online}`);
+      if (env.pageLoadMs != null) lines.push(`pageLoad   ${env.pageLoadMs}ms`);
+      if (env.memoryUsedMB != null) lines.push(`jsHeap     ${env.memoryUsedMB}MB`);
+      if (env.userAgent) lines.push(`userAgent  ${env.userAgent}`);
+    }
+    if (events.length) {
+      const t0 = Date.parse(note.timestamp) || (events[events.length - 1]?.t ?? 0);
+      lines.push("");
+      lines.push(`events (${events.length}, most recent last):`);
+      for (const ev of events) lines.push(`  ${formatEvent(ev, t0)}`);
+    } else {
+      lines.push("");
+      lines.push("events     (none recorded)");
+    }
+    lines.push("```");
+    const f = ctx.forensics;
+    if (f && (f.html || f.styles || f.a11y)) {
+      lines.push("");
+      lines.push("**Element forensics**");
+      lines.push("");
+      lines.push("```");
+      if (f.html) lines.push(`html    ${oneLine(f.html)}`);
+      if (f.styles) {
+        for (const [k, v] of Object.entries(f.styles)) lines.push(`${k.padEnd(7)} ${v}`);
+      }
+      if (f.a11y) {
+        if (f.a11y.role) lines.push(`role    ${f.a11y.role}`);
+        lines.push(`a11y    accessibleName=${f.a11y.hasAccessibleName} tabReachable=${f.a11y.tabReachable}` + (f.a11y.contrastFlag ? ` contrast=${f.a11y.contrastFlag}` : ""));
+      }
+      lines.push("```");
+    }
+    lines.push("");
+    lines.push("</details>");
   }
-  if (note.screenshot) lines.push(`- **Screenshot:** screenshots/point-${num}.png`);
-  lines.push("", note.description || "(no description)", "", "---", "");
   return lines.join("\n");
 }
+
+// src/lib/exportZip.ts
 function safeName(name, stamp) {
   const fallback = `qa-notes-${stamp.slice(0, 10)}`;
   let base = (name ?? "").trim().replace(/\.zip$/i, "");
@@ -1126,12 +1731,13 @@ ${list}`);
     sections.push("## Conventions\n\n(not provided)");
   }
   const creds = config.credentials ?? [];
+  const redactedCount = creds.filter((c) => !c.seeded).length;
   let credBlock;
   if (creds.length > 0) {
     const credRows = creds.map((c) => [
       c.role,
       c.login,
-      c.password || "(none)",
+      c.seeded ? c.password || "(none)" : "(redacted \u2014 not marked seeded)",
       c.seeded ? "seeded" : "manual",
       c.hint?.en ?? "\u2014"
     ]);
@@ -1142,12 +1748,13 @@ ${list}`);
   } else {
     credBlock = "(not provided)";
   }
+  const redactionNote = redactedCount > 0 ? ` ${redactedCount} credential${redactedCount === 1 ? "" : "s"} above ${redactedCount === 1 ? "is" : "are"} not marked \`seeded: true\`, so its password was withheld from this export \u2014 set \`seeded: true\` in \`credentials\` only for synthetic/throwaway values (e.g. from a seed script), never for a real account.` : "";
   sections.push(
     `## Login Context
 
 ${credBlock}
 
-> **WARNING:** These are DEV/TEST/SEED credentials only. Never forward, commit, or use in production.`
+> **WARNING:** These are DEV/TEST/SEED credentials only. Never forward, commit, or use in production.${redactionNote}`
   );
   const cov = computeCoverage(journey, guideChecked);
   const covTableRows = [
@@ -1224,7 +1831,14 @@ async function buildAndDownloadZip(notes, stamp, filename, config, guideChecked)
     "---",
     ""
   ].join("\n");
-  const notesMd = preambleMd + "\n\n---NOTES---\n\n" + notesHeader + notes.map((n, i) => fmt(n, i)).join("\n");
+  const noteBlocks = notes.map(
+    (n, i) => noteToMarkdown(n, { brand: brandLabel, index: i + 1 })
+  );
+  const notesBody = noteBlocks.length > 0 ? `${noteBlocks.join("\n\n---\n\n")}
+
+---
+` : "";
+  const notesMd = preambleMd + "\n\n---NOTES---\n\n" + notesHeader + notesBody;
   zip.file("notes.md", notesMd);
   notes.forEach((n, i) => {
     if (n.screenshot && shots) {
@@ -1259,7 +1873,13 @@ function safeLocation() {
 var QaContext = createContext(null);
 var LANG_KEY = "lang";
 var GUIDE_KEY = "guide";
+var GUIDE_FAILED_KEY = "guideFailed";
 var LOGIN_KEY = "logins";
+var PENDING_DELETE_KEY = "pendingDeleteIds";
+var NOTICE_QUEUE_CAP = 3;
+var NOTICE_DURATION_INFO = 4e3;
+var NOTICE_DURATION_ERROR = 6e3;
+var SOFT_DELETE_MS = 5e3;
 function QaProvider({
   config,
   children
@@ -1267,6 +1887,7 @@ function QaProvider({
   const [storage] = useState(() => createStorage(config.namespace));
   const [idb] = useState(() => createIdb(config.namespace));
   const [notes, setNotes] = useState([]);
+  const [notesLoading, setNotesLoading] = useState(true);
   const [isOpen, setIsOpen] = useState(false);
   const [activeTab, setActiveTab] = useState("notes");
   const [captureActive, setCaptureActive] = useState(false);
@@ -1279,23 +1900,64 @@ function QaProvider({
   const [guideChecked, setGuideChecked] = useState(
     () => new Set(storage.getJSON(GUIDE_KEY, []))
   );
+  const [guideFailed, setGuideFailed] = useState(
+    () => new Set(storage.getJSON(GUIDE_FAILED_KEY, []))
+  );
   const [loginsUsed, setLoginsUsed] = useState(
     () => new Set(storage.getJSON(LOGIN_KEY, []))
   );
+  const [notices, setNotices] = useState([]);
+  const noticeTimers = useRef(/* @__PURE__ */ new Map());
+  const [testAlong, setTestAlong] = useState({
+    active: false,
+    index: 0
+  });
+  const pendingDeletes = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const pendingClear = useRef(null);
+  const readPendingDeleteIds = useCallback(() => {
+    return new Set(storage.getJSON(PENDING_DELETE_KEY, []));
+  }, [storage]);
+  const addPendingDeleteIds = useCallback((ids) => {
+    if (ids.length === 0) return;
+    const current = readPendingDeleteIds();
+    for (const id of ids) current.add(id);
+    storage.setJSON(PENDING_DELETE_KEY, [...current]);
+  }, [storage, readPendingDeleteIds]);
+  const removePendingDeleteIds = useCallback((ids) => {
+    if (ids.length === 0) return;
+    const current = readPendingDeleteIds();
+    let changed = false;
+    for (const id of ids) {
+      if (current.delete(id)) changed = true;
+    }
+    if (changed) storage.setJSON(PENDING_DELETE_KEY, [...current]);
+  }, [storage, readPendingDeleteIds]);
   useEffect(() => {
     let alive = true;
     idb.getAll().then((rows) => {
       if (!alive) return;
-      const sorted = rows.slice().sort(
+      let live = rows;
+      const pendingIds = storage.getJSON(PENDING_DELETE_KEY, []);
+      if (pendingIds.length > 0) {
+        const pendingSet = new Set(pendingIds);
+        live = live.filter((n) => !pendingSet.has(n.id));
+        for (const id of pendingIds) void idb.delete(id);
+        storage.setJSON(PENDING_DELETE_KEY, []);
+      }
+      const sorted = live.slice().sort(
         (a, b) => a.timestamp < b.timestamp ? 1 : -1
       );
       setNotes(sorted);
     }).catch(() => {
+    }).finally(() => {
+      if (alive) setNotesLoading(false);
     });
     return () => {
       alive = false;
     };
-  }, [idb]);
+  }, [idb, storage]);
   const setLang = useCallback((l) => {
     setLangState(l);
     storage.setItem(LANG_KEY, l);
@@ -1308,27 +1970,160 @@ function QaProvider({
     (value2) => pick(value2, lang),
     [lang]
   );
+  const dismissNotice = useCallback((id) => {
+    const timer = noticeTimers.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      noticeTimers.current.delete(id);
+    }
+    setNotices((prev) => prev.filter((n) => n.id !== id));
+  }, []);
+  const notify = useCallback((message, opts) => {
+    const tone = opts?.tone ?? "info";
+    const id = opts?.id ?? uid();
+    const duration = opts?.duration ?? (tone === "error" ? NOTICE_DURATION_ERROR : NOTICE_DURATION_INFO);
+    const existingTimer = noticeTimers.current.get(id);
+    if (existingTimer) clearTimeout(existingTimer);
+    const notice = { id, message, tone, action: opts?.action, duration };
+    setNotices((prev) => {
+      const deduped = prev.filter((n) => n.id !== id);
+      const next = [...deduped, notice];
+      if (next.length <= NOTICE_QUEUE_CAP) return next;
+      const overflow = next.length - NOTICE_QUEUE_CAP;
+      for (const dropped of next.slice(0, overflow)) {
+        const droppedTimer = noticeTimers.current.get(dropped.id);
+        if (droppedTimer) {
+          clearTimeout(droppedTimer);
+          noticeTimers.current.delete(dropped.id);
+        }
+      }
+      return next.slice(overflow);
+    });
+    const timer = setTimeout(() => {
+      noticeTimers.current.delete(id);
+      setNotices((prev) => prev.filter((n) => n.id !== id));
+    }, duration);
+    noticeTimers.current.set(id, timer);
+    return id;
+  }, []);
+  const testAlongSteps = useMemo(() => {
+    const out = [];
+    for (const lane of journeyOrEmpty(config.journey)) {
+      const laneRole = pick2(lane.role);
+      const color = lane.color ?? "var(--qa-accent)";
+      for (const step of lane.steps ?? []) {
+        out.push({
+          key: `${lane.id}::${step.path}`,
+          laneId: lane.id,
+          laneRole,
+          color,
+          path: step.path,
+          what: step.what,
+          expect: step.expect,
+          risk: step.risk ?? "green"
+        });
+      }
+    }
+    return out;
+  }, [config.journey, pick2]);
+  const startTestAlong = useCallback(() => {
+    setTestAlong({ active: true, index: 0 });
+    setIsOpen(false);
+  }, []);
+  const exitTestAlong = useCallback(() => {
+    setTestAlong({ active: false, index: 0 });
+  }, []);
+  const gotoStep = useCallback((index) => {
+    setTestAlong((prev) => {
+      if (!prev.active) return prev;
+      const maxIndex = Math.max(0, testAlongSteps.length - 1);
+      const clamped = Math.max(0, Math.min(index, maxIndex));
+      if (clamped === prev.index) return prev;
+      return { ...prev, index: clamped };
+    });
+  }, [testAlongSteps.length]);
+  const gradeStep = useCallback((key, grade) => {
+    if (grade === "pass") {
+      setGuideChecked((prev) => {
+        const next = new Set(prev);
+        next.add(key);
+        storage.setJSON(GUIDE_KEY, [...next]);
+        return next;
+      });
+      setGuideFailed((prev) => {
+        const next = new Set(prev);
+        next.delete(key);
+        storage.setJSON(GUIDE_FAILED_KEY, [...next]);
+        return next;
+      });
+    } else {
+      setGuideFailed((prev) => {
+        const next = new Set(prev);
+        next.add(key);
+        storage.setJSON(GUIDE_FAILED_KEY, [...next]);
+        return next;
+      });
+      setGuideChecked((prev) => {
+        const next = new Set(prev);
+        next.delete(key);
+        storage.setJSON(GUIDE_KEY, [...next]);
+        return next;
+      });
+    }
+  }, [storage]);
+  const evidenceByStep = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (let i = notes.length - 1; i >= 0; i--) {
+      const note = notes[i];
+      const ref = note.journeyRef;
+      if (!ref) continue;
+      const key = `${ref.laneId}::${ref.path}`;
+      const arr = map.get(key);
+      if (arr) arr.push(note);
+      else map.set(key, [note]);
+    }
+    return map;
+  }, [notes]);
   const addNote = useCallback(
-    async ({
-      description,
-      screenshot,
-      target
-    }) => {
+    async (input) => {
       const loc = safeLocation();
+      const route = loc.pathname + (loc.search ? "?\u2026" : "");
+      let journeyRef;
+      if (testAlong.active) {
+        const step = testAlongSteps[testAlong.index];
+        if (step) journeyRef = { laneId: step.laneId, path: step.path };
+      } else {
+        const hits = matchRouteToSteps(config.journey, route);
+        if (hits.length) journeyRef = hits[0];
+      }
+      let context;
+      if (config.captureContext !== false) {
+        context = {
+          events: drainSinceLastNote(),
+          env: collectEnvSnapshot(route),
+          forensics: input.forensics
+        };
+      }
       const note = {
         id: uid(),
-        url: loc.href,
-        route: loc.pathname + loc.search,
+        url: redactUrl(loc.href),
+        route,
         timestamp: nowIso(),
-        description: (description || "").trim(),
-        screenshot: screenshot ?? void 0,
-        target: target ?? void 0
+        description: (input.description || "").trim(),
+        screenshot: input.screenshot ?? void 0,
+        target: input.target ?? void 0,
+        severity: input.severity,
+        status: input.status,
+        journeyRef,
+        context
       };
       setNotes((prev) => [note, ...prev]);
-      await idb.put(note);
-      return note;
+      const persisted = await idb.put(note);
+      if (!persisted) {
+        notify(t("persist_failed"), { tone: "error", id: "persist_failed" });
+      }
     },
-    [idb]
+    [idb, config.journey, config.captureContext, testAlong, testAlongSteps, notify, t]
   );
   const updateNote = useCallback(
     async (id, patch) => {
@@ -1343,27 +2138,132 @@ function QaProvider({
           } else if (patch.screenshot !== void 0) {
             next.screenshot = patch.screenshot;
           }
+          if (patch.severity !== void 0) next.severity = patch.severity;
+          if (patch.status !== void 0) next.status = patch.status;
           updated = next;
           return next;
         })
       );
       if (updated) {
-        await idb.put(updated);
+        const persisted = await idb.put(updated);
+        if (!persisted) {
+          notify(t("persist_failed"), { tone: "error", id: "persist_failed" });
+        }
       }
     },
-    [idb]
-  );
-  const deleteNote = useCallback(
-    async (id) => {
-      setNotes((prev) => prev.filter((n) => n.id !== id));
-      await idb.delete(id);
-    },
-    [idb]
+    [idb, notify, t]
   );
-  const clearAll = useCallback(async () => {
-    setNotes([]);
-    await idb.clear();
-  }, [idb]);
+  const deleteNote = useCallback(async (id) => {
+    let removedNote = null;
+    let removedAfterId = null;
+    let found = false;
+    setNotes((prev) => {
+      const idx = prev.findIndex((n) => n.id === id);
+      if (idx === -1) return prev;
+      found = true;
+      removedNote = prev[idx];
+      removedAfterId = prev[idx + 1]?.id ?? null;
+      return prev.filter((n) => n.id !== id);
+    });
+    if (!removedNote || !found) return;
+    const noteToRestore = removedNote;
+    const afterIdToRestore = removedAfterId;
+    const existingPending = pendingDeletes.current.get(id);
+    if (existingPending) clearTimeout(existingPending.timer);
+    addPendingDeleteIds([id]);
+    const timer = setTimeout(() => {
+      pendingDeletes.current.delete(id);
+      void idb.delete(id).then(() => removePendingDeleteIds([id]));
+    }, SOFT_DELETE_MS);
+    pendingDeletes.current.set(id, { note: noteToRestore, afterId: afterIdToRestore, timer });
+    notify(t("note_deleted"), {
+      duration: SOFT_DELETE_MS,
+      id: `delete-${id}`,
+      action: {
+        label: t("undo"),
+        onAction: () => {
+          const pending = pendingDeletes.current.get(id);
+          if (!pending) return;
+          clearTimeout(pending.timer);
+          pendingDeletes.current.delete(id);
+          removePendingDeleteIds([id]);
+          setNotes((prev) => {
+            if (prev.some((n) => n.id === id)) return prev;
+            const next = prev.slice();
+            const anchorIndex = pending.afterId != null ? next.findIndex((n) => n.id === pending.afterId) : -1;
+            const insertAt = anchorIndex === -1 ? next.length : anchorIndex;
+            next.splice(insertAt, 0, pending.note);
+            return next;
+          });
+        }
+      }
+    });
+  }, [idb, notify, t, addPendingDeleteIds, removePendingDeleteIds]);
+  const clearNotes = useCallback(async () => {
+    let snapshot = [];
+    setNotes((prev) => {
+      snapshot = prev;
+      return [];
+    });
+    if (pendingClear.current) clearTimeout(pendingClear.current.timer);
+    for (const [pendingId, pending] of pendingDeletes.current) {
+      clearTimeout(pending.timer);
+      dismissNotice(`delete-${pendingId}`);
+      void idb.delete(pendingId).then(() => removePendingDeleteIds([pendingId]));
+    }
+    pendingDeletes.current.clear();
+    const snapshotIds = snapshot.map((n) => n.id);
+    addPendingDeleteIds(snapshotIds);
+    const timer = setTimeout(() => {
+      pendingClear.current = null;
+      void Promise.all(snapshot.map((n) => idb.delete(n.id))).then(
+        () => removePendingDeleteIds(snapshotIds)
+      );
+    }, SOFT_DELETE_MS);
+    pendingClear.current = { notes: snapshot, timer };
+    notify(t("notes_cleared"), {
+      duration: SOFT_DELETE_MS,
+      id: "clear-all",
+      action: {
+        label: t("undo"),
+        onAction: () => {
+          const pending = pendingClear.current;
+          if (!pending) return;
+          clearTimeout(pending.timer);
+          pendingClear.current = null;
+          removePendingDeleteIds(pending.notes.map((n) => n.id));
+          setNotes(pending.notes);
+        }
+      }
+    });
+  }, [idb, notify, dismissNotice, t, addPendingDeleteIds, removePendingDeleteIds]);
+  const flushPendingDeletes = useCallback(() => {
+    for (const [pendingId, pending] of pendingDeletes.current) {
+      clearTimeout(pending.timer);
+      void idb.delete(pendingId).then(() => removePendingDeleteIds([pendingId]));
+    }
+    pendingDeletes.current.clear();
+    if (pendingClear.current) {
+      const { notes: clearedNotes } = pendingClear.current;
+      clearTimeout(pendingClear.current.timer);
+      pendingClear.current = null;
+      const clearedIds = clearedNotes.map((n) => n.id);
+      void Promise.all(clearedNotes.map((n) => idb.delete(n.id))).then(
+        () => removePendingDeleteIds(clearedIds)
+      );
+    }
+  }, [idb, removePendingDeleteIds]);
+  useEffect(() => {
+    if (typeof window === "undefined") return void 0;
+    const onBeforeUnload = () => flushPendingDeletes();
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", onBeforeUnload);
+      flushPendingDeletes();
+      for (const timer of noticeTimers.current.values()) clearTimeout(timer);
+      noticeTimers.current.clear();
+    };
+  }, [flushPendingDeletes]);
   const startCapture = useCallback(() => {
     setIsOpen(false);
     setCaptureActive(true);
@@ -1408,17 +2308,19 @@ function QaProvider({
     // Data
     notes,
     guideChecked,
+    guideFailed,
     loginsUsed,
     // UI state
     isOpen,
     activeTab,
     captureActive,
     isExporting,
+    notesLoading,
     // i18n
     lang,
     dir: lang === "ar" ? "rtl" : "ltr",
     // Config passthrough
-    theme: config.theme,
+    namespace: config.namespace,
     brand: config.brand,
     loginField: config.loginField,
     credentials: config.credentials,
@@ -1427,6 +2329,10 @@ function QaProvider({
     // i18n helpers
     t,
     pick: pick2,
+    // Notices
+    notices,
+    notify,
+    dismissNotice,
     // Actions
     setIsOpen,
     setActiveTab,
@@ -1434,15 +2340,26 @@ function QaProvider({
     addNote,
     updateNote,
     deleteNote,
-    clearAll,
+    clearNotes,
     startCapture,
     endCapture,
     toggleGuide,
     toggleLogin,
+    // Test-along
+    testAlong,
+    testAlongSteps,
+    startTestAlong,
+    exitTestAlong,
+    gotoStep,
+    gradeStep,
+    evidenceByStep,
     exportZip: exportZipFn
   };
   return /* @__PURE__ */ jsx(QaContext.Provider, { value, children });
 }
+function journeyOrEmpty(journey) {
+  return Array.isArray(journey) ? journey : [];
+}
 function useQa() {
   const ctx = useContext(QaContext);
   if (!ctx) throw new Error("useQa must be used inside <QaProvider>");
@@ -1452,6 +2369,37 @@ var ICONS = {
   Check: [
     ["path", { d: "M20 6 9 17l-5-5" }]
   ],
+  Bug: [
+    ["path", { d: "m8 2 1.88 1.88" }],
+    ["path", { d: "M14.12 3.88 16 2" }],
+    ["path", { d: "M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" }],
+    ["path", { d: "M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" }],
+    ["path", { d: "M12 20v-9" }],
+    ["path", { d: "M6.53 9C4.6 8.8 3 7.1 3 5" }],
+    ["path", { d: "M6 13H2" }],
+    ["path", { d: "M3 21c0-2.1 1.7-3.9 3.8-4" }],
+    ["path", { d: "M20.97 5c0 2.1-1.6 3.8-3.5 4" }],
+    ["path", { d: "M22 13h-4" }],
+    ["path", { d: "M17.2 17c2.1.1 3.8 1.9 3.8 4" }]
+  ],
+  AlertTriangle: [
+    ["path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }],
+    ["path", { d: "M12 9v4" }],
+    ["path", { d: "M12 17h.01" }]
+  ],
+  RotateCcw: [
+    ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }],
+    ["path", { d: "M3 3v5h5" }]
+  ],
+  ChevronLeft: [
+    ["path", { d: "m15 18-6-6 6-6" }]
+  ],
+  ChevronRight: [
+    ["path", { d: "m9 18 6-6-6-6" }]
+  ],
+  Play: [
+    ["polygon", { points: "6 3 20 12 6 21 6 3" }]
+  ],
   X: [
     ["path", { d: "M18 6 6 18" }],
     ["path", { d: "m6 6 12 12" }]
@@ -1625,27 +2573,41 @@ var DEFAULT_BOTTOM = "calc(5rem + env(safe-area-inset-bottom))";
 var FAB_SIZE_PX = 56;
 var EDGE_MARGIN = 12;
 var DRAG_THRESHOLD = 8;
-var FAB_POS_KEY = "qapture:fabpos";
+var LEGACY_FAB_POS_KEY = "qapture:fabpos";
+function fabPosKey(namespace) {
+  return `${namespace}:fabpos`;
+}
 function isFabPos(v) {
   if (!v || typeof v !== "object") return false;
   const o = v;
   return typeof o.left === "number" && Number.isFinite(o.left) && typeof o.bottom === "number" && Number.isFinite(o.bottom);
 }
-function loadFabPos() {
+function loadFabPos(namespace) {
   if (typeof window === "undefined") return null;
+  const key = fabPosKey(namespace);
   try {
-    const raw = window.localStorage.getItem(FAB_POS_KEY);
-    if (!raw) return null;
-    const parsed = JSON.parse(raw);
-    return isFabPos(parsed) ? parsed : null;
+    const raw = window.localStorage.getItem(key);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (isFabPos(parsed)) return parsed;
+    }
+    const legacyRaw = window.localStorage.getItem(LEGACY_FAB_POS_KEY);
+    if (!legacyRaw) return null;
+    const legacyParsed = JSON.parse(legacyRaw);
+    if (!isFabPos(legacyParsed)) return null;
+    try {
+      window.localStorage.setItem(key, JSON.stringify(legacyParsed));
+    } catch {
+    }
+    return legacyParsed;
   } catch {
     return null;
   }
 }
-function saveFabPos(pos) {
+function saveFabPos(namespace, pos) {
   if (typeof window === "undefined") return;
   try {
-    window.localStorage.setItem(FAB_POS_KEY, JSON.stringify(pos));
+    window.localStorage.setItem(fabPosKey(namespace), JSON.stringify(pos));
   } catch {
   }
 }
@@ -1662,9 +2624,9 @@ function clampFabPos(p, w = FAB_SIZE_PX, h = FAB_SIZE_PX) {
   };
 }
 function QaFab() {
-  const { isOpen, setIsOpen, notes, captureActive, theme } = useQa();
+  const { isOpen, setIsOpen, notes, captureActive, namespace } = useQa();
   const coarse = useCoarsePointer();
-  const [pos, setPos] = useState(() => loadFabPos());
+  const [pos, setPos] = useState(() => loadFabPos(namespace));
   const dragRef = useRef(null);
   const didDragRef = useRef(false);
   const [, setViewportTick] = useState(0);
@@ -1728,7 +2690,7 @@ function QaFab() {
       const dy = e.clientY - d.startY;
       const next = clampFabPos({ left: d.startLeft + dx, bottom: d.startBottom - dy }, d.width, d.height);
       setPos(next);
-      saveFabPos(next);
+      saveFabPos(namespace, next);
       didDragRef.current = true;
     }
   };
@@ -1748,9 +2710,7 @@ function QaFab() {
     bottom: applied ? `${applied.bottom}px` : DEFAULT_BOTTOM,
     width: "3.5rem",
     height: "3.5rem",
-    backgroundImage: `linear-gradient(135deg, ${theme.primary}, ${theme.accent})`,
-    boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04), 0 0 0 2px rgba(255,255,255,0.7)",
-    zIndex: 9990
+    zIndex: "var(--qa-z-fab)"
   };
   return /* @__PURE__ */ jsxs(
     "button",
@@ -1765,7 +2725,7 @@ function QaFab() {
       onPointerCancel: coarse ? onPointerCancel : void 0,
       "aria-label": "Qapture \u2014 testing notes",
       title: "Qapture",
-      className: `qa-fixed qa-flex qa-items-center qa-justify-center qa-rounded-full qa-text-white qa-print-hidden qa-fab-btn${coarse ? " qa-touch-none" : ""}`,
+      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" : ""}`,
       style: fabStyle,
       children: [
         !isOpen && /* @__PURE__ */ jsx(
@@ -1780,17 +2740,14 @@ function QaFab() {
         !isOpen && notes.length > 0 && /* @__PURE__ */ jsx(
           "span",
           {
-            className: "qa-absolute qa-flex qa-items-center qa-justify-center qa-rounded-full qa-text-xs qa-font-bold",
+            className: "qa-absolute qa-flex qa-items-center qa-justify-center qa-rounded-full qa-text-xs qa-font-bold qa-bg-1 qa-text-hi qa-border qa-border-subtle qa-elev-1",
             "aria-label": `${notes.length} notes`,
             style: {
               top: "-4px",
               right: "-4px",
               minWidth: "1.5rem",
               height: "1.5rem",
-              padding: "0 4px",
-              background: "#fff",
-              color: theme.primary,
-              boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+              padding: "0 4px"
             },
             children: notes.length
           }
@@ -1799,13 +2756,47 @@ function QaFab() {
     }
   );
 }
+var SEVERITIES = [
+  { value: "bug", labelKey: "sev_bug", icon: "Bug" },
+  { value: "question", labelKey: "sev_question" },
+  { value: "polish", labelKey: "sev_polish" }
+];
+function SeverityChipRow({
+  value,
+  onChange,
+  t
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "qa-mb-1 qa-text-11 qa-text-lo", children: t("severity_label") }),
+    /* @__PURE__ */ jsx("div", { className: "qa-flex qa-flex-wrap qa-gap-1.5", role: "radiogroup", "aria-label": t("severity_label"), children: SEVERITIES.map((s) => {
+      const active = value === s.value;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": active,
+          onClick: () => onChange(s.value),
+          className: `qa-tap qa-inline-flex qa-items-center qa-gap-1 qa-rounded-full qa-px-2 qa-py-1 qa-text-11 qa-font-medium qa-transition ${active ? "qa-bg-accent" : "qa-bg-3 qa-text-mid qa-hover-bg-2"}`,
+          style: { border: "none", cursor: "pointer" },
+          children: [
+            s.icon && /* @__PURE__ */ jsx(Icon, { name: s.icon, size: 12 }),
+            t(s.labelKey)
+          ]
+        },
+        s.value
+      );
+    }) })
+  ] });
+}
 function NoteEditor() {
-  const { addNote, startCapture, t, theme } = useQa();
+  const { addNote, startCapture, t } = useQa();
   const [open, setOpen] = useState(false);
   const [description, setDescription] = useState("");
   const [screenshot, setScreenshot] = useState(null);
   const [previewUrl, setPreviewUrl] = useState(null);
   const [dragOver, setDragOver] = useState(false);
+  const [severity, setSeverity] = useState("bug");
   const fileRef = useRef(null);
   const previewUrlRef = useRef(null);
   useEffect(() => {
@@ -1856,11 +2847,18 @@ function NoteEditor() {
     if (f?.type.startsWith("image/")) setImage(f);
     e.target.value = "";
   };
+  const resetForm = () => {
+    setOpen(false);
+    clearImage();
+    setDescription("");
+    setSeverity("bug");
+  };
   const save = async () => {
     if (!description.trim()) return;
-    await addNote({ description, screenshot: screenshot ?? void 0 });
+    await addNote({ description, screenshot: screenshot ?? void 0, severity });
     setDescription("");
     clearImage();
+    setSeverity("bug");
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", { className: "qa-space-y-2", children: [
@@ -1868,12 +2866,8 @@ function NoteEditor() {
       "button",
       {
         onClick: startCapture,
-        className: "qa-flex qa-w-full qa-items-center qa-justify-center qa-gap-2 qa-rounded-xl qa-px-4 qa-py-3 qa-text-sm qa-font-semibold qa-text-white qa-shadow-sm qa-transition qa-hover-brightness-105",
-        style: {
-          backgroundImage: `linear-gradient(135deg, ${theme.primary}, ${theme.accent})`,
-          border: "none",
-          cursor: "pointer"
-        },
+        className: "qa-tap qa-flex qa-w-full qa-items-center qa-justify-center qa-gap-2 qa-rounded-xl qa-bg-accent qa-px-4 qa-py-3 qa-text-sm qa-font-semibold qa-shadow-sm qa-transition qa-hover-brightness-105",
+        style: { border: "none", cursor: "pointer" },
         children: [
           /* @__PURE__ */ jsx(Icon, { name: "Crosshair", size: 16 }),
           t("capture_cta")
@@ -1884,13 +2878,8 @@ function NoteEditor() {
       "button",
       {
         onClick: () => setOpen(true),
-        className: "qa-flex qa-w-full qa-items-center qa-justify-center qa-gap-1 qa-rounded-lg qa-border qa-border-dashed qa-py-1.5 qa-text-xs qa-tap",
-        style: {
-          borderColor: `${theme.primary}33`,
-          color: theme.primary,
-          background: "transparent",
-          cursor: "pointer"
-        },
+        className: "qa-tap qa-flex qa-w-full qa-items-center qa-justify-center qa-gap-1 qa-rounded-lg qa-border qa-border-dashed qa-border-subtle qa-py-1.5 qa-text-xs qa-text-accent",
+        style: { background: "transparent", cursor: "pointer" },
         children: [
           /* @__PURE__ */ jsx(Icon, { name: "Plus", size: 14 }),
           t("quick_note")
@@ -1900,8 +2889,7 @@ function NoteEditor() {
       "div",
       {
         onPaste,
-        className: "qa-space-y-2 qa-rounded-xl qa-border qa-p-2.5",
-        style: { borderColor: `${theme.primary}1a`, background: theme.cream },
+        className: "qa-space-y-2 qa-rounded-xl qa-border qa-border-subtle qa-bg-2 qa-p-2.5",
         children: [
           /* @__PURE__ */ jsx(
             "textarea",
@@ -1911,10 +2899,10 @@ function NoteEditor() {
               onChange: (e) => setDescription(e.target.value),
               rows: 3,
               placeholder: t("desc_placeholder"),
-              className: "qa-w-full qa-resize-y qa-rounded-lg qa-border qa-px-2 qa-py-1.5 qa-text-sm qa-focus-ring",
-              style: { borderColor: `${theme.primary}33`, background: "#fff", color: "inherit" }
+              className: "qa-w-full qa-resize-y qa-rounded-lg qa-border qa-border-subtle qa-bg-1 qa-text-hi qa-px-2 qa-py-1.5 qa-text-sm qa-focus-ring"
             }
           ),
+          /* @__PURE__ */ jsx(SeverityChipRow, { value: severity, onChange: setSeverity, t }),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1924,11 +2912,7 @@ function NoteEditor() {
               },
               onDragLeave: () => setDragOver(false),
               onDrop,
-              className: "qa-rounded-lg qa-border qa-border-dashed qa-px-2 qa-py-2 qa-text-center qa-text-xs",
-              style: {
-                borderColor: dragOver ? theme.accent : `${theme.primary}33`,
-                background: dragOver ? `${theme.accent}12` : "#fff"
-              },
+              className: `qa-rounded-lg qa-border qa-border-dashed qa-px-2 qa-py-2 qa-text-center qa-text-xs ${dragOver ? "qa-border-accent qa-bg-accent-tint" : "qa-border-subtle qa-bg-1"}`,
               children: [
                 previewUrl ? /* @__PURE__ */ jsxs("div", { className: "qa-relative qa-inline-block", children: [
                   /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "preview", style: { maxHeight: "7rem", borderRadius: "0.25rem" } }),
@@ -1936,11 +2920,10 @@ function NoteEditor() {
                     "button",
                     {
                       onClick: clearImage,
-                      className: "qa-absolute qa-rounded-full qa-p-1 qa-text-white qa-tap-icon",
+                      className: "qa-tap-icon qa-absolute qa-rounded-full qa-bg-danger-tint qa-text-danger",
                       style: {
                         top: "-8px",
                         insetInlineEnd: "-8px",
-                        background: theme.primary,
                         border: "none",
                         cursor: "pointer"
                       },
@@ -1951,8 +2934,8 @@ function NoteEditor() {
                   "button",
                   {
                     onClick: () => fileRef.current?.click(),
-                    className: "qa-inline-flex qa-items-center qa-gap-1 qa-tap",
-                    style: { color: theme.primary, background: "transparent", border: "none", cursor: "pointer" },
+                    className: "qa-tap qa-inline-flex qa-items-center qa-gap-1 qa-text-accent",
+                    style: { background: "transparent", border: "none", cursor: "pointer" },
                     children: [
                       /* @__PURE__ */ jsx(Icon, { name: "ImagePlus", size: 16 }),
                       t("image_hint")
@@ -1976,28 +2959,19 @@ function NoteEditor() {
             /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: save,
+                onClick: () => void save(),
                 disabled: !description.trim(),
-                className: "qa-flex-1 qa-rounded-lg qa-px-3 qa-py-1.5 qa-text-sm qa-font-semibold qa-text-white qa-tap",
-                style: { background: theme.accent, border: "none", cursor: "pointer" },
+                className: "qa-tap qa-flex-1 qa-rounded-lg qa-bg-accent qa-px-3 qa-py-1.5 qa-text-sm qa-font-semibold",
+                style: { border: "none", cursor: "pointer" },
                 children: t("add_point")
               }
             ),
             /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: () => {
-                  setOpen(false);
-                  clearImage();
-                  setDescription("");
-                },
-                className: "qa-rounded-lg qa-border qa-px-3 qa-text-sm qa-tap",
-                style: {
-                  borderColor: `${theme.primary}33`,
-                  color: theme.primary,
-                  background: "transparent",
-                  cursor: "pointer"
-                },
+                onClick: resetForm,
+                className: "qa-tap qa-rounded-lg qa-border qa-border-subtle qa-px-3 qa-text-sm qa-text-mid",
+                style: { background: "transparent", cursor: "pointer" },
                 children: t("cancel")
               }
             )
@@ -2010,16 +2984,11 @@ 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, colors) {
+var ACCENT = "#4D9CFF";
+var DANGER = "#FF6B6B";
+function paint(rect) {
   if (typeof document === "undefined") return;
   if (!rect || rect.width < 1 || rect.height < 1) return;
-  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, {
@@ -2031,9 +3000,9 @@ function paint(rect, colors) {
     zIndex: "10098",
     pointerEvents: "none",
     borderRadius: "3px",
-    outline: `3px solid ${accent}`,
-    background: `${accent}22`,
-    boxShadow: `0 0 0 4px ${primary}55`,
+    outline: `3px solid ${ACCENT}`,
+    background: `${ACCENT}22`,
+    boxShadow: `0 0 0 4px ${DANGER}55`,
     transition: "opacity 0.45s ease",
     opacity: "1"
   });
@@ -2045,9 +3014,9 @@ function paint(rect, colors) {
     if (box.parentNode) box.remove();
   }, 1500);
 }
-function settleThenPaint(el, colors) {
-  const now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
-  const start = now();
+function settleThenPaint(el) {
+  const now2 = () => typeof performance !== "undefined" ? performance.now() : Date.now();
+  const start = now2();
   let last = null;
   let stableFrames = 0;
   const tick = () => {
@@ -2055,15 +3024,15 @@ function settleThenPaint(el, colors) {
     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);
+    if (stableFrames >= 2 || now2() - start >= SETTLE_TIMEOUT_MS) {
+      paint({ top: r.top, left: r.left, width: r.width, height: r.height });
       return;
     }
     requestAnimationFrame(tick);
   };
   requestAnimationFrame(tick);
 }
-function flashLocate(target, colors) {
+function flashLocate(target) {
   if (typeof document === "undefined" || !target) return;
   let el = null;
   if (target.selector) {
@@ -2075,7 +3044,7 @@ function flashLocate(target, colors) {
   }
   if (el) {
     el.scrollIntoView({ block: "center", inline: "center" });
-    settleThenPaint(el, colors);
+    settleThenPaint(el);
   } else if (target.rect) {
     let rect = target.rect;
     const snap = target.scroll;
@@ -2086,106 +3055,92 @@ function flashLocate(target, colors) {
         rect = { ...rect, left: rect.left - dx, top: rect.top - dy };
       }
     }
-    paint(rect, colors);
+    paint(rect);
   }
 }
 function LocationReveal({ target }) {
-  const { t, theme } = useQa();
+  const { t } = useQa();
   const [open, setOpen] = useState(false);
   if (!target) return null;
   const r = target.rect;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "qa-rounded-lg qa-border",
-      style: { borderColor: `${theme.primary}1a`, background: theme.cream },
-      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, style: { color: theme.sage } }),
-          /* @__PURE__ */ jsx("span", { className: "qa-font-medium", style: { color: theme.ink }, children: t("loc_captured") }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setOpen((o) => !o),
-              className: "qa-ms-auto qa-inline-flex qa-items-center qa-gap-1 qa-font-medium qa-tap",
-              style: { color: theme.primary, background: "transparent", border: "none", cursor: "pointer" },
-              children: [
-                open ? t("loc_hide") : t("loc_show"),
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    name: "ChevronDown",
-                    size: 14,
-                    style: {
-                      transition: "transform 150ms",
-                      transform: open ? "rotate(180deg)" : "rotate(0deg)"
-                    }
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        open && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "qa-space-y-1 qa-px-2 qa-pb-2 qa-text-11 qa-dir-ltr",
-            style: { color: theme.ink },
-            children: [
-              target.selector && /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-gap-1", children: [
-                /* @__PURE__ */ jsx("span", { className: "qa-opacity-50", children: "selector" }),
-                /* @__PURE__ */ jsx(
-                  "code",
-                  {
-                    className: "qa-min-w-0 qa-flex-1 qa-truncate qa-rounded qa-bg-white qa-px-1",
-                    title: target.selector,
-                    children: target.selector
-                  }
-                )
-              ] }),
-              target.tagName && /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("span", { className: "qa-opacity-50", children: "tag " }),
-                /* @__PURE__ */ jsxs("code", { className: "qa-rounded qa-bg-white qa-px-1", children: [
-                  "<",
-                  target.tagName,
-                  ">"
-                ] })
-              ] }),
-              target.text && /* @__PURE__ */ jsxs("div", { className: "qa-truncate", children: [
-                /* @__PURE__ */ jsx("span", { className: "qa-opacity-50", children: "text " }),
-                '"',
-                target.text,
-                '"'
-              ] }),
-              r && /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("span", { className: "qa-opacity-50", children: "pos " }),
-                Math.round(r.left),
-                ", ",
-                Math.round(r.top),
-                " \xB7 ",
-                Math.round(r.width),
-                "\xD7",
-                Math.round(r.height)
-              ] }),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  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: [
-                    /* @__PURE__ */ jsx(Icon, { name: "Crosshair", size: 12 }),
-                    /* @__PURE__ */ jsx(Icon, { name: "MapPinned", size: 12 }),
-                    t("loc_locate")
-                  ]
+  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" }),
+      /* @__PURE__ */ jsx("span", { className: "qa-font-medium qa-text-hi", children: t("loc_captured") }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setOpen((o) => !o),
+          className: "qa-ms-auto qa-inline-flex qa-items-center qa-gap-1 qa-font-medium qa-tap qa-text-accent",
+          style: { background: "transparent", border: "none", cursor: "pointer" },
+          children: [
+            open ? t("loc_hide") : t("loc_show"),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "ChevronDown",
+                size: 14,
+                style: {
+                  transition: "transform 150ms",
+                  transform: open ? "rotate(180deg)" : "rotate(0deg)"
                 }
-              )
-            ]
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsxs("div", { className: "qa-space-y-1 qa-px-2 qa-pb-2 qa-text-11 qa-dir-ltr qa-text-hi", children: [
+      target.selector && /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "qa-opacity-50", children: "selector" }),
+        /* @__PURE__ */ jsx(
+          "code",
+          {
+            className: "qa-min-w-0 qa-flex-1 qa-truncate qa-rounded qa-bg-3 qa-px-1",
+            title: target.selector,
+            children: target.selector
           }
         )
-      ]
-    }
-  );
+      ] }),
+      target.tagName && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "qa-opacity-50", children: "tag " }),
+        /* @__PURE__ */ jsxs("code", { className: "qa-rounded qa-bg-3 qa-px-1", children: [
+          "<",
+          target.tagName,
+          ">"
+        ] })
+      ] }),
+      target.text && /* @__PURE__ */ jsxs("div", { className: "qa-truncate", children: [
+        /* @__PURE__ */ jsx("span", { className: "qa-opacity-50", children: "text " }),
+        '"',
+        target.text,
+        '"'
+      ] }),
+      r && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "qa-opacity-50", children: "pos " }),
+        Math.round(r.left),
+        ", ",
+        Math.round(r.top),
+        " \xB7 ",
+        Math.round(r.width),
+        "\xD7",
+        Math.round(r.height)
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => flashLocate(target),
+          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-tap qa-bg-accent",
+          style: { border: "none", cursor: "pointer" },
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "Crosshair", size: 12 }),
+            /* @__PURE__ */ jsx(Icon, { name: "MapPinned", size: 12 }),
+            t("loc_locate")
+          ]
+        }
+      )
+    ] })
+  ] });
 }
 function useObjectUrl(blob) {
   const [url, setUrl] = useState(null);
@@ -2202,11 +3157,10 @@ function useObjectUrl(blob) {
 }
 function KindBadge({
   target,
-  t,
-  theme
+  t
 }) {
   if (!target) {
-    return /* @__PURE__ */ jsxs("span", { className: "qa-inline-flex qa-items-center qa-gap-1 qa-text-10 qa-text-slate-400", children: [
+    return /* @__PURE__ */ jsxs("span", { className: "qa-inline-flex qa-items-center qa-gap-1 qa-text-10 qa-text-lo", children: [
       /* @__PURE__ */ jsx(Icon, { name: "FileText", size: 12 }),
       t("kind_note")
     ] });
@@ -2215,8 +3169,7 @@ function KindBadge({
   return /* @__PURE__ */ jsxs(
     "span",
     {
-      className: "qa-inline-flex qa-items-center qa-gap-1 qa-rounded-full qa-px-1.5 qa-py-0.5 qa-text-10 qa-font-medium qa-text-white",
-      style: { background: region ? theme.accentDark : theme.primary },
+      className: `qa-inline-flex qa-items-center qa-gap-1 qa-rounded-full qa-px-1.5 qa-py-0.5 qa-text-10 qa-font-medium ${region ? "qa-bg-accent-tint qa-text-accent" : "qa-bg-3 qa-text-hi"}`,
       children: [
         /* @__PURE__ */ jsx(Icon, { name: region ? "Square" : "MousePointerClick", size: 10 }),
         region ? t("kind_region") : t("kind_element")
@@ -2224,13 +3177,59 @@ function KindBadge({
     }
   );
 }
+var SEVERITY_CLASS = {
+  bug: "qa-bg-danger-tint qa-text-danger",
+  question: "qa-bg-warn-tint qa-text-warn",
+  polish: "qa-bg-accent-tint qa-text-accent"
+};
+var SEVERITY_LABEL_KEY = {
+  bug: "sev_bug",
+  question: "sev_question",
+  polish: "sev_polish"
+};
+function SeverityChip({ severity, t }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `qa-inline-flex qa-items-center qa-gap-1 qa-rounded-full qa-px-1.5 qa-py-0.5 qa-text-10 qa-font-medium ${SEVERITY_CLASS[severity]}`,
+      children: [
+        severity === "bug" && /* @__PURE__ */ jsx(Icon, { name: "Bug", size: 10 }),
+        t(SEVERITY_LABEL_KEY[severity])
+      ]
+    }
+  );
+}
+function StatusPill({
+  status,
+  onToggle,
+  t
+}) {
+  const verified = status === "verified";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      "aria-label": t(verified ? "status_verified" : "status_open"),
+      className: `qa-tap qa-inline-flex qa-items-center qa-gap-1 qa-rounded-full qa-px-1.5 qa-py-0.5 qa-text-10 qa-font-medium qa-transition ${verified ? "qa-bg-success-tint qa-text-success" : "qa-bg-3 qa-text-mid qa-hover-bg-2"}`,
+      style: { border: "none", cursor: "pointer" },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: verified ? "CheckCircle2" : "Circle", size: 10 }),
+        t(verified ? "status_verified" : "status_open")
+      ]
+    }
+  );
+}
 function NoteItem({ note, index }) {
-  const { deleteNote, updateNote, t, theme } = useQa();
+  const { deleteNote, updateNote, notify, t } = useQa();
   const [editing, setEditing] = useState(false);
   const [desc, setDesc] = useState(note.description);
   const [img, setImg] = useState(note.screenshot ?? null);
   const fileRef = useRef(null);
   const thumbUrl = useObjectUrl(editing ? img ?? void 0 : note.screenshot);
+  const severity = note.severity ?? "bug";
+  const status = note.status ?? "open";
+  const contextEventCount = note.context?.events.length ?? 0;
   const startEdit = () => {
     setDesc(note.description);
     setImg(note.screenshot ?? null);
@@ -2259,188 +3258,178 @@ function NoteItem({ note, index }) {
     updateNote(note.id, patch);
     setEditing(false);
   };
-  return /* @__PURE__ */ jsxs(
-    "li",
-    {
-      className: "qa-rounded-xl qa-border qa-bg-white qa-p-3 qa-text-sm qa-shadow-sm",
-      style: { borderColor: `${theme.primary}14` },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "qa-mb-1 qa-flex qa-items-center qa-gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "qa-flex qa-h-5 qa-w-5 qa-items-center qa-justify-center qa-rounded-full qa-text-11 qa-font-bold qa-text-white",
-              style: { background: theme.accent },
-              children: index
-            }
-          ),
-          /* @__PURE__ */ jsx(KindBadge, { target: note.target, t, theme }),
-          /* @__PURE__ */ jsxs("div", { className: "qa-ms-auto qa-flex qa-items-center qa-gap-1.5", children: [
-            !editing && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: startEdit,
-                className: "qa-text-slate-300 qa-hover-text-slate-600 qa-tap-icon",
-                title: t("edit"),
-                "aria-label": t("edit"),
-                style: { background: "transparent", border: "none", cursor: "pointer" },
-                children: /* @__PURE__ */ jsx(Icon, { name: "Pencil", size: 14 })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => deleteNote(note.id),
-                className: "qa-text-slate-300 qa-hover-text-red qa-tap-icon",
-                "aria-label": "delete",
-                style: { background: "transparent", border: "none", cursor: "pointer" },
-                children: /* @__PURE__ */ jsx(Icon, { name: "Trash2", size: 16 })
-              }
-            )
-          ] })
-        ] }),
-        editing ? /* @__PURE__ */ jsxs("div", { className: "qa-space-y-2", onPaste, children: [
+  const toggleStatus = () => {
+    updateNote(note.id, { status: status === "open" ? "verified" : "open" });
+  };
+  const copyPrompt = async () => {
+    try {
+      if (!navigator.clipboard?.writeText) throw new Error("clipboard unavailable");
+      await navigator.clipboard.writeText(noteToMarkdown(note));
+      notify(t("copied"));
+    } catch {
+      notify(t("copy_failed"), { tone: "error" });
+    }
+  };
+  return /* @__PURE__ */ jsxs("li", { className: "qa-rounded-xl qa-border qa-border-subtle qa-bg-1 qa-elev-1 qa-p-3 qa-text-sm qa-text-hi", children: [
+    /* @__PURE__ */ jsxs("div", { className: "qa-mb-1 qa-flex qa-flex-wrap qa-items-center qa-gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "qa-flex qa-h-5 qa-w-5 qa-items-center qa-justify-center qa-rounded-full qa-text-11 qa-font-bold qa-bg-accent", children: index }),
+      /* @__PURE__ */ jsx(KindBadge, { target: note.target, t }),
+      /* @__PURE__ */ jsx(SeverityChip, { severity, t }),
+      /* @__PURE__ */ jsx(StatusPill, { status, onToggle: toggleStatus, t }),
+      /* @__PURE__ */ jsxs("div", { className: "qa-ms-auto qa-flex qa-items-center qa-gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => void copyPrompt(),
+            className: "qa-tap-icon qa-text-mid qa-hover-text-slate-600",
+            title: t("copy_prompt"),
+            "aria-label": t("copy_prompt"),
+            style: { background: "transparent", border: "none", cursor: "pointer" },
+            children: /* @__PURE__ */ jsx(Icon, { name: "Copy", size: 14 })
+          }
+        ),
+        !editing && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: startEdit,
+            className: "qa-tap-icon qa-text-mid qa-hover-text-slate-600",
+            title: t("edit"),
+            "aria-label": t("edit"),
+            style: { background: "transparent", border: "none", cursor: "pointer" },
+            children: /* @__PURE__ */ jsx(Icon, { name: "Pencil", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => deleteNote(note.id),
+            className: "qa-tap-icon qa-text-mid qa-hover-text-red",
+            "aria-label": "delete",
+            style: { background: "transparent", border: "none", cursor: "pointer" },
+            children: /* @__PURE__ */ jsx(Icon, { name: "Trash2", size: 16 })
+          }
+        )
+      ] })
+    ] }),
+    editing ? /* @__PURE__ */ jsxs("div", { className: "qa-space-y-2", onPaste, children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          autoFocus: true,
+          value: desc,
+          onChange: (e) => setDesc(e.target.value),
+          rows: 3,
+          className: "qa-w-full qa-resize-y qa-rounded-lg qa-border qa-border-subtle qa-bg-2 qa-text-hi qa-px-2 qa-py-1.5 qa-text-sm qa-focus-ring"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "qa-rounded-lg qa-border qa-border-dashed qa-border-subtle qa-p-2 qa-text-center qa-text-xs", children: [
+        thumbUrl ? /* @__PURE__ */ jsxs("div", { className: "qa-relative qa-inline-block", children: [
           /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              autoFocus: true,
-              value: desc,
-              onChange: (e) => setDesc(e.target.value),
-              rows: 3,
-              className: "qa-w-full qa-resize-y qa-rounded-lg qa-border qa-px-2 qa-py-1.5 qa-text-sm qa-focus-ring",
-              style: { borderColor: `${theme.primary}33`, background: "#fff", color: "inherit" }
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
+            "img",
             {
-              className: "qa-rounded-lg qa-border qa-border-dashed qa-p-2 qa-text-center qa-text-xs",
-              style: { borderColor: `${theme.primary}33` },
-              children: [
-                thumbUrl ? /* @__PURE__ */ jsxs("div", { className: "qa-relative qa-inline-block", children: [
-                  /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      src: thumbUrl,
-                      alt: "screenshot",
-                      style: { maxHeight: "7rem", borderRadius: "0.25rem" }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => setImg(null),
-                      className: "qa-absolute qa-rounded-full qa-p-1 qa-text-white qa-tap-icon",
-                      title: t("remove_image"),
-                      style: {
-                        top: "-8px",
-                        insetInlineEnd: "-8px",
-                        background: theme.primary,
-                        border: "none",
-                        cursor: "pointer"
-                      },
-                      children: /* @__PURE__ */ jsx(Icon, { name: "X", size: 12 })
-                    }
-                  )
-                ] }) : /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => fileRef.current?.click(),
-                    className: "qa-inline-flex qa-items-center qa-gap-1",
-                    style: { color: theme.primary, background: "transparent", border: "none", cursor: "pointer" },
-                    children: [
-                      /* @__PURE__ */ jsx(Icon, { name: "ImagePlus", size: 16 }),
-                      t("image_hint")
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ref: fileRef,
-                    type: "file",
-                    accept: "image/*",
-                    onChange: onFile,
-                    className: "qa-hidden"
-                  }
-                )
-              ]
+              src: thumbUrl,
+              alt: "screenshot",
+              style: { maxHeight: "7rem", borderRadius: "0.25rem" }
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-gap-2", children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: save,
-                disabled: !desc.trim(),
-                className: "qa-flex qa-flex-1 qa-items-center qa-justify-center qa-gap-1 qa-rounded-lg qa-px-3 qa-py-1.5 qa-text-sm qa-font-semibold qa-text-white qa-tap",
-                style: { background: theme.accent, border: "none", cursor: "pointer" },
-                children: [
-                  /* @__PURE__ */ jsx(Icon, { name: "Check", size: 16 }),
-                  t("save")
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setEditing(false),
-                className: "qa-rounded-lg qa-border qa-px-3 qa-text-sm qa-tap",
-                style: {
-                  borderColor: `${theme.primary}33`,
-                  color: theme.primary,
-                  background: "transparent",
-                  cursor: "pointer"
-                },
-                children: t("cancel")
-              }
-            )
-          ] })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: "qa-whitespace-pre-wrap qa-break-words",
-              style: { color: theme.ink },
-              children: note.description
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "qa-mt-1.5 qa-space-y-1.5 qa-text-11 qa-text-slate-500", children: [
-            /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-gap-1", children: [
-              /* @__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 })
-          ] }),
-          thumbUrl && /* @__PURE__ */ jsx(
-            "img",
+            "button",
             {
-              src: thumbUrl,
-              alt: "screenshot",
-              className: "qa-mt-2 qa-w-full qa-rounded-lg qa-border",
-              style: { borderColor: `${theme.primary}1a` }
+              onClick: () => setImg(null),
+              className: "qa-tap-icon qa-absolute qa-rounded-full qa-bg-danger-tint qa-text-danger",
+              title: t("remove_image"),
+              style: {
+                top: "-8px",
+                insetInlineEnd: "-8px",
+                border: "none",
+                cursor: "pointer"
+              },
+              children: /* @__PURE__ */ jsx(Icon, { name: "X", size: 12 })
             }
           )
-        ] })
-      ]
-    }
-  );
+        ] }) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => fileRef.current?.click(),
+            className: "qa-inline-flex qa-items-center qa-gap-1 qa-text-accent",
+            style: { background: "transparent", border: "none", cursor: "pointer" },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "ImagePlus", size: 16 }),
+              t("image_hint")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileRef,
+            type: "file",
+            accept: "image/*",
+            onChange: onFile,
+            className: "qa-hidden"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: save,
+            disabled: !desc.trim(),
+            className: "qa-tap qa-flex qa-flex-1 qa-items-center qa-justify-center qa-gap-1 qa-rounded-lg qa-bg-accent qa-px-3 qa-py-1.5 qa-text-sm qa-font-semibold",
+            style: { border: "none", cursor: "pointer" },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "Check", size: 16 }),
+              t("save")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setEditing(false),
+            className: "qa-tap qa-rounded-lg qa-border qa-border-subtle qa-px-3 qa-text-sm qa-text-mid",
+            style: { background: "transparent", cursor: "pointer" },
+            children: t("cancel")
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { className: "qa-whitespace-pre-wrap qa-break-words qa-text-hi", children: note.description }),
+      /* @__PURE__ */ jsxs("div", { className: "qa-mt-1.5 qa-space-y-1.5 qa-text-11 qa-text-lo", children: [
+        /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-gap-1", children: [
+          /* @__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 }),
+        contextEventCount > 0 && /* @__PURE__ */ jsx("div", { children: t("context_attached", { n: contextEventCount }) })
+      ] }),
+      thumbUrl && /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: thumbUrl,
+          alt: "screenshot",
+          className: "qa-mt-2 qa-w-full qa-rounded-lg qa-border qa-border-subtle"
+        }
+      )
+    ] })
+  ] });
 }
 function NoteList() {
-  const { notes, t, theme } = useQa();
+  const { notes, notesLoading, t } = useQa();
+  if (notesLoading && !notes.length) {
+    return /* @__PURE__ */ jsxs("ul", { className: "qa-space-y-2", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("li", { className: "qa-skeleton qa-rounded-xl", style: { height: "4.5rem" } }),
+      /* @__PURE__ */ jsx("li", { className: "qa-skeleton qa-rounded-xl", style: { height: "4.5rem" } }),
+      /* @__PURE__ */ jsx("li", { className: "qa-skeleton qa-rounded-xl", style: { height: "4.5rem" } })
+    ] });
+  }
   if (!notes.length) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "qa-rounded-xl qa-border qa-border-dashed qa-py-8 qa-text-center qa-text-sm qa-text-slate-400",
-        style: { borderColor: `${theme.primary}22` },
-        children: [
-          t("no_points"),
-          /* @__PURE__ */ jsx("br", {}),
-          t("no_points_hint", { cta: t("capture_cta") })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { className: "qa-rounded-xl qa-border qa-border-dashed qa-border-subtle qa-py-8 qa-text-center qa-text-sm qa-text-lo", children: [
+      t("no_points"),
+      /* @__PURE__ */ jsx("br", {}),
+      t("no_points_hint", { cta: t("capture_cta") })
+    ] });
   }
   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)) });
 }
@@ -2472,17 +3461,27 @@ function EyeIcon({ open, size = 12, className }) {
   );
 }
 var MASK = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
-function CopyField({ value, ink, maskable = false }) {
+function CopyField({
+  value,
+  maskable = false,
+  notify,
+  t
+}) {
   const [done, setDone] = useState(false);
   const [revealed, setRevealed] = useState(true);
   const copy = async () => {
     if (value === "\u2014") return;
-    if (typeof navigator === "undefined" || !navigator.clipboard) return;
+    if (typeof navigator === "undefined" || !navigator.clipboard) {
+      notify(t("copy_failed"), { tone: "error", id: "credentials-copy-failed" });
+      return;
+    }
     try {
       await navigator.clipboard.writeText(value);
       setDone(true);
       setTimeout(() => setDone(false), 1100);
+      notify(t("copied"), { tone: "success", id: "credentials-copy" });
     } catch {
+      notify(t("copy_failed"), { tone: "error", id: "credentials-copy-failed" });
     }
   };
   const hidden = maskable && !revealed && value !== "\u2014";
@@ -2491,14 +3490,14 @@ function CopyField({ value, ink, maskable = false }) {
     /* @__PURE__ */ jsxs(
       "button",
       {
-        onClick: copy,
+        onClick: () => void 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" }))
+          /* @__PURE__ */ jsx("span", { className: "qa-text-hi", children: displayValue }),
+          value !== "\u2014" && (done ? /* @__PURE__ */ jsx(Icon, { name: "Check", size: 12, className: "qa-text-success" }) : /* @__PURE__ */ jsx(Icon, { name: "Copy", size: 12, className: "qa-opacity-40 qa-group-hover-opacity-80" }))
         ]
       }
     ),
@@ -2517,7 +3516,7 @@ function CopyField({ value, ink, maskable = false }) {
   ] });
 }
 function CredentialsSection() {
-  const { loginsUsed, toggleLogin, t, lang, pick: pick2, loginField, credentials, theme } = useQa();
+  const { loginsUsed, toggleLogin, t, lang, pick: pick2, loginField, credentials, notify } = useQa();
   const usedCount = credentials.filter((c) => loginsUsed.has(c.role)).length;
   const field = pick2(loginField);
   return /* @__PURE__ */ jsxs("div", { className: "qa-space-y-2.5", children: [
@@ -2526,8 +3525,8 @@ function CredentialsSection() {
       /* @__PURE__ */ jsx(
         "span",
         {
-          className: "qa-shrink-0 qa-rounded-full qa-px-2 qa-py-0.5 qa-font-medium qa-text-white",
-          style: { background: theme.sage },
+          className: "qa-shrink-0 qa-rounded-full qa-px-2 qa-py-0.5 qa-font-medium",
+          style: { background: "var(--qa-success)", color: "var(--qa-on-accent)" },
           children: t("used_count", { n: usedCount, m: credentials.length })
         }
       )
@@ -2538,24 +3537,20 @@ function CredentialsSection() {
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "qa-rounded-xl qa-border qa-p-2.5 qa-shadow-sm qa-transition",
-          style: {
-            borderColor: used ? theme.sage : `${theme.primary}14`,
-            background: used ? `${theme.sage}12` : "#fff"
-          },
+          className: `qa-rounded-xl qa-border qa-p-2.5 qa-elev-1 qa-transition ${used ? "qa-bg-success-tint" : "qa-bg-1"}`,
+          style: { borderColor: used ? "var(--qa-success)" : "var(--qa-border-subtle)" },
           children: [
             /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-gap-2", children: [
-              /* @__PURE__ */ jsx(Icon, { name: "CircleUser", size: 16, className: "qa-shrink-0", style: { color: theme.primary } }),
-              /* @__PURE__ */ jsx("span", { className: "qa-text-sm qa-font-semibold", style: { color: theme.ink }, children: label }),
+              /* @__PURE__ */ jsx(Icon, { name: "CircleUser", size: 16, className: "qa-shrink-0 qa-text-accent" }),
+              /* @__PURE__ */ jsx("span", { className: "qa-text-sm qa-font-semibold qa-text-hi", children: label }),
               c.hint && /* @__PURE__ */ jsx("span", { className: "qa-text-10 qa-text-slate-400", children: pick2(c.hint) }),
               /* @__PURE__ */ jsxs(
                 "button",
                 {
                   onClick: () => toggleLogin(c.role),
                   disabled: !c.seeded,
-                  className: "qa-ms-auto qa-inline-flex qa-items-center qa-gap-1 qa-text-xs",
+                  className: `qa-ms-auto qa-inline-flex qa-items-center qa-gap-1 qa-text-xs ${used ? "qa-text-success" : "qa-text-lo"}`,
                   style: {
-                    color: used ? theme.sage : "#94a3b8",
                     background: "transparent",
                     border: "none",
                     cursor: c.seeded ? "pointer" : "default"
@@ -2568,9 +3563,9 @@ 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(CopyField, { value: c.login, notify, t }),
               /* @__PURE__ */ jsx("span", { className: "qa-text-slate-300", children: "\xB7" }),
-              /* @__PURE__ */ jsx(CopyField, { value: c.password, ink: theme.ink, maskable: true })
+              /* @__PURE__ */ jsx(CopyField, { value: c.password, notify, t, maskable: true })
             ] })
           ]
         },
@@ -2580,193 +3575,192 @@ function CredentialsSection() {
   ] });
 }
 var keyOf = (id, path) => `${id}::${path}`;
+var DEFAULT_LANE_COLOR = "#4D9CFF";
 function Lane({
   group,
   checked,
   toggle,
   pick: pick2
 }) {
-  const { theme, lang } = useQa();
-  const { id, color = theme.primary, steps } = group;
+  const { lang, t, guideFailed, evidenceByStep } = useQa();
+  const { id, color = DEFAULT_LANE_COLOR, steps } = group;
   const done = steps.filter((s) => checked.has(keyOf(id, s.path))).length;
   const pct = steps.length > 0 ? Math.round(done / steps.length * 100) : 0;
   const uncoveredRedCount = steps.filter(
     (s) => s.risk === "red" && !checked.has(keyOf(id, s.path))
   ).length;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "qa-rounded-xl qa-border qa-bg-white qa-p-3 qa-shadow-sm",
-      style: { borderColor: `${theme.primary}14` },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "qa-mb-2 qa-flex qa-items-center qa-gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "qa-h-2.5 qa-w-2.5 qa-rounded-full",
-              style: { background: color }
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "qa-text-sm qa-font-bold", style: { color: theme.ink }, children: pick2(group.role) }),
-          /* @__PURE__ */ jsxs("span", { className: "qa-ms-auto qa-text-11 qa-font-medium qa-text-slate-400", children: [
-            done,
-            "/",
-            steps.length
-          ] }),
-          uncoveredRedCount > 0 && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "qa-rounded qa-px-1 qa-text-10 qa-font-medium",
-              style: { background: "#FEF2F2", color: RISK_COLORS.red },
-              title: lang === "ar" ? `${uncoveredRedCount} \u0645\u0646\u0637\u0642\u0629 \u062D\u0645\u0631\u0627\u0621 \u063A\u064A\u0631 \u0645\u063A\u0637\u0627\u0629` : `${uncoveredRedCount} uncovered red zone(s)`,
-              children: lang === "ar" ? `\u0623\u062D\u0645\u0631: ${uncoveredRedCount}` : `red: ${uncoveredRedCount}`
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: "qa-rounded-xl qa-border qa-border-subtle qa-bg-2 qa-p-3 qa-elev-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "qa-mb-2 qa-flex qa-items-center qa-gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "qa-h-2.5 qa-w-2.5 qa-rounded-full",
+          style: { background: color }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "qa-text-sm qa-font-bold qa-text-hi", children: pick2(group.role) }),
+      /* @__PURE__ */ jsxs("span", { className: "qa-ms-auto qa-text-11 qa-font-medium qa-text-slate-400", children: [
+        done,
+        "/",
+        steps.length
+      ] }),
+      uncoveredRedCount > 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "qa-bg-danger-tint qa-text-danger qa-rounded qa-px-1 qa-text-10 qa-font-medium",
+          title: lang === "ar" ? `${uncoveredRedCount} \u0645\u0646\u0637\u0642\u0629 \u062D\u0645\u0631\u0627\u0621 \u063A\u064A\u0631 \u0645\u063A\u0637\u0627\u0629` : `${uncoveredRedCount} uncovered red zone(s)`,
+          children: lang === "ar" ? `\u0623\u062D\u0645\u0631: ${uncoveredRedCount}` : `red: ${uncoveredRedCount}`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "qa-mb-3 qa-h-1.5 qa-overflow-hidden qa-rounded-full",
+        style: { background: `${color}22` },
+        children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "qa-mb-3 qa-h-1.5 qa-overflow-hidden qa-rounded-full",
-            style: { background: `${color}22` },
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "qa-h-full qa-rounded-full qa-transition-all",
-                style: { width: `${pct}%`, background: color }
-              }
-            )
+            className: "qa-h-full qa-rounded-full qa-transition-all",
+            style: { width: `${pct}%`, background: color }
           }
-        ),
-        /* @__PURE__ */ jsxs("ol", { className: "qa-relative qa-ms-1.5", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "qa-absolute qa-top-1 qa-bottom-0 qa-w-px",
-              style: { insetInlineStart: "7px", background: `${color}40`, bottom: "4px" }
-            }
-          ),
-          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;
-            const dotTitle = !s.risk ? lang === "ar" ? "\u0644\u0645 \u064A\u062A\u0645 \u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u062E\u0627\u0637\u0631 \u0628\u0639\u062F" : "not graded yet" : s.riskWhy ?? s.risk;
-            return /* @__PURE__ */ jsx("li", { className: "qa-relative qa-mb-2 qa-last-mb-0", children: /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => toggle(k),
-                className: "qa-flex qa-w-full qa-items-start qa-gap-2.5 qa-rounded-lg qa-p-1 qa-text-start qa-hover-bg-black-3",
-                style: { background: "transparent", border: "none", cursor: "pointer" },
-                children: [
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("ol", { className: "qa-relative qa-ms-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "qa-absolute qa-top-1 qa-bottom-0 qa-w-px",
+          style: { insetInlineStart: "7px", background: `${color}40`, bottom: "4px" }
+        }
+      ),
+      steps.map((s, i) => {
+        const k = keyOf(id, s.path);
+        const on = checked.has(k);
+        const failed = guideFailed.has(k);
+        const evidence = evidenceByStep.get(k);
+        const evidenceCount = evidence ? evidence.length : 0;
+        const riskColor = s.risk ? RISK_COLORS[s.risk] : RISK_COLORS.none;
+        const dotTitle = !s.risk ? lang === "ar" ? "\u0644\u0645 \u064A\u062A\u0645 \u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u062E\u0627\u0637\u0631 \u0628\u0639\u062F" : "not graded yet" : s.riskWhy ?? s.risk;
+        return /* @__PURE__ */ jsx("li", { className: "qa-relative qa-mb-2 qa-last-mb-0", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => toggle(k),
+            className: `qa-flex qa-w-full qa-items-start qa-gap-2.5 qa-rounded-lg qa-p-1 qa-text-start qa-hover-bg-black-3${failed ? " qa-bg-danger-tint" : ""}`,
+            style: { background: failed ? void 0 : "transparent", border: "none", cursor: "pointer" },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "qa-relative qa-z-1 qa-mt-0.5 qa-flex qa-h-4 qa-w-4 qa-shrink-0 qa-items-center qa-justify-center qa-rounded-full qa-border-2 qa-transition",
+                  style: {
+                    borderColor: failed ? "var(--qa-danger)" : color,
+                    background: on ? color : failed ? "var(--qa-danger-tint)" : "var(--qa-surface-1)",
+                    zIndex: 1
+                  },
+                  children: [
+                    on && /* @__PURE__ */ jsx(Icon, { name: "Check", size: 10, strokeWidth: 3, className: "qa-text-white" }),
+                    !on && failed && /* @__PURE__ */ jsx(Icon, { name: "AlertTriangle", size: 9, strokeWidth: 2.5, className: "qa-text-danger" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "qa-min-w-0", children: [
+                /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-items-center qa-gap-1", children: [
                   /* @__PURE__ */ jsx(
-                    "span",
+                    "code",
                     {
-                      className: "qa-relative qa-z-1 qa-mt-0.5 qa-flex qa-h-4 qa-w-4 qa-shrink-0 qa-items-center qa-justify-center qa-rounded-full qa-border-2 qa-transition",
+                      className: "qa-rounded qa-px-1 qa-text-11 qa-font-semibold qa-dir-ltr qa-text-hi",
                       style: {
-                        borderColor: color,
-                        background: on ? color : "#fff",
-                        zIndex: 1
+                        background: failed ? "var(--qa-danger-tint)" : `${color}14`,
+                        textDecoration: on ? "line-through" : "none",
+                        opacity: on ? 0.55 : 1
                       },
-                      children: on && /* @__PURE__ */ jsx(Icon, { name: "Check", size: 10, strokeWidth: 3, className: "qa-text-white" })
+                      children: s.path
                     }
                   ),
-                  /* @__PURE__ */ jsxs("span", { className: "qa-min-w-0", children: [
-                    /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-items-center qa-gap-1", children: [
-                      /* @__PURE__ */ jsx(
-                        "code",
-                        {
-                          className: "qa-rounded qa-px-1 qa-text-11 qa-font-semibold qa-dir-ltr",
-                          style: {
-                            background: `${color}14`,
-                            color: theme.ink,
-                            textDecoration: on ? "line-through" : "none",
-                            opacity: on ? 0.55 : 1
-                          },
-                          children: s.path
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "qa-inline-block qa-rounded-full qa-shrink-0",
-                          style: {
-                            width: "6px",
-                            height: "6px",
-                            background: riskColor,
-                            flexShrink: 0
-                          },
-                          title: dotTitle
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: "qa-mt-0.5 qa-block qa-text-11 qa-leading-relaxed qa-text-slate-500",
-                        style: { opacity: on ? 0.5 : 1 },
-                        children: pick2(s.what)
-                      }
-                    )
-                  ] })
-                ]
-              }
-            ) }, `${k}-${i}`);
-          })
-        ] })
-      ]
-    }
-  );
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "qa-inline-block qa-rounded-full qa-shrink-0",
+                      style: {
+                        width: "6px",
+                        height: "6px",
+                        background: riskColor,
+                        flexShrink: 0
+                      },
+                      title: dotTitle
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "qa-mt-0.5 qa-block qa-text-11 qa-leading-relaxed qa-text-slate-500",
+                    style: { opacity: on ? 0.5 : 1 },
+                    children: pick2(s.what)
+                  }
+                ),
+                evidenceCount > 0 && /* @__PURE__ */ jsx("span", { className: "qa-mt-1 qa-inline-flex qa-items-center qa-rounded qa-bg-accent-tint qa-text-accent qa-px-1 qa-text-10 qa-font-medium", children: t("evidence_n", { n: evidenceCount }) }),
+                evidenceCount === 0 && on && /* @__PURE__ */ jsx("span", { className: "qa-mt-1 qa-inline-flex qa-items-center qa-rounded qa-bg-warn-tint qa-text-warn qa-px-1 qa-text-10 qa-font-medium", children: t("no_evidence") })
+              ] })
+            ]
+          }
+        ) }, `${k}-${i}`);
+      })
+    ] })
+  ] });
 }
 function GuideSection() {
-  const { guideChecked, toggleGuide, t, journey, pick: pick2, theme, lang } = useQa();
+  const { guideChecked, toggleGuide, t, journey, pick: pick2, lang, startTestAlong } = useQa();
   const all = journey.flatMap((g) => g.steps.map((s) => keyOf(g.id, s.path)));
   const done = all.filter((k) => guideChecked.has(k)).length;
   const pct = all.length > 0 ? Math.round(done / all.length * 100) : 0;
   const coverage = computeCoverage(journey, guideChecked);
   return /* @__PURE__ */ jsxs("div", { className: "qa-space-y-3", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "qa-rounded-xl qa-p-3 qa-text-white qa-shadow-sm",
-        style: { backgroundImage: `linear-gradient(135deg, ${theme.primary}, ${theme.accent})` },
-        children: [
-          coverage.red.total > 0 && /* @__PURE__ */ jsxs("div", { className: "qa-mb-1 qa-flex qa-items-center qa-gap-1.5 qa-text-11", children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "qa-rounded qa-px-1 qa-font-bold",
-                style: { background: "rgba(0,0,0,0.25)" },
-                children: lang === "ar" ? "\u0623\u062D\u0645\u0631" : "RED"
-              }
-            ),
-            /* @__PURE__ */ jsxs("span", { className: "qa-dir-ltr qa-font-semibold", children: [
-              coverage.red.covered,
-              "/",
-              coverage.red.total,
-              " ",
-              lang === "ar" ? "\u0645\u063A\u0637\u0649" : "covered"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-justify-between qa-text-sm qa-font-semibold", children: [
-            /* @__PURE__ */ jsx("span", { children: t("journey_title") }),
-            /* @__PURE__ */ jsxs("span", { className: "qa-dir-ltr", children: [
-              done,
-              "/",
-              all.length,
-              " \xB7 ",
-              pct,
-              "%"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "qa-mt-2 qa-h-2 qa-overflow-hidden qa-rounded-full qa-bg-white-25", children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "qa-h-full qa-rounded-full qa-bg-white qa-transition-all",
-              style: { width: `${pct}%` }
-            }
-          ) })
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxs("div", { className: "qa-rounded-xl qa-border qa-border-accent qa-bg-accent-tint qa-p-3 qa-elev-1", children: [
+      coverage.red.total > 0 && /* @__PURE__ */ jsxs("div", { className: "qa-mb-1 qa-flex qa-items-center qa-gap-1.5 qa-text-11", children: [
+        /* @__PURE__ */ jsx("span", { className: "qa-bg-danger-tint qa-text-danger qa-rounded qa-px-1 qa-font-bold", children: lang === "ar" ? "\u0623\u062D\u0645\u0631" : "RED" }),
+        /* @__PURE__ */ jsxs("span", { className: "qa-dir-ltr qa-font-semibold qa-text-hi", children: [
+          coverage.red.covered,
+          "/",
+          coverage.red.total,
+          " ",
+          lang === "ar" ? "\u0645\u063A\u0637\u0649" : "covered"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-justify-between qa-text-sm qa-font-semibold qa-text-hi", children: [
+        /* @__PURE__ */ jsx("span", { children: t("journey_title") }),
+        /* @__PURE__ */ jsxs("span", { className: "qa-dir-ltr", children: [
+          done,
+          "/",
+          all.length,
+          " \xB7 ",
+          pct,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "qa-mt-2 qa-h-2 qa-overflow-hidden qa-rounded-full qa-bg-3", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "qa-h-full qa-rounded-full qa-bg-accent qa-transition-all",
+          style: { width: `${pct}%` }
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "qa-mt-2 qa-flex qa-justify-end", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: startTestAlong,
+          disabled: all.length === 0,
+          className: "qa-tap qa-inline-flex qa-items-center qa-gap-1.5 qa-rounded-full qa-bg-accent qa-border-0 qa-cursor-pointer qa-px-3 qa-py-1 qa-text-xs qa-font-semibold qa-focus-ring",
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "Play", size: 13 }),
+            t("start_walkthrough")
+          ]
+        }
+      ) })
+    ] }),
     journey.map((g) => /* @__PURE__ */ jsx(
       Lane,
       {
@@ -2824,13 +3818,13 @@ function QaPanel() {
     notes,
     exportZip,
     isExporting,
-    clearAll,
+    clearNotes,
+    startCapture,
     t,
     lang,
     setLang,
     dir,
     brand,
-    theme,
     journey,
     guideChecked
   } = useQa();
@@ -2936,6 +3930,14 @@ function QaPanel() {
   useEffect(() => {
     if (!isOpen) setKeyboardLift(0);
   }, [isOpen]);
+  useEffect(() => {
+    if (!naming) return void 0;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") setNaming(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [naming]);
   const keyboardLiftActive = coarse && !isIpadLandscape;
   const appliedKeyboardLift = keyboardLiftActive ? keyboardLift : 0;
   if (phase === "hidden") return null;
@@ -2957,7 +3959,7 @@ function QaPanel() {
       "data-qa-overlay": "true",
       dir,
       onTransitionEnd: handleTransitionEnd,
-      className: `qa-fixed qa-flex qa-flex-col qa-overflow-hidden qa-rounded-2xl qa-border qa-shadow-2xl qa-print-hidden qa-w-panel qa-max-h-74vh qa-panel-anim${showIn ? " qa-panel-in" : ""}`,
+      className: `qa-fixed qa-flex qa-flex-col qa-overflow-hidden qa-rounded-2xl qa-border qa-border-subtle qa-elev-3 qa-print-hidden qa-w-panel qa-max-h-74vh qa-bg-1 qa-panel-anim${showIn ? " qa-panel-in" : ""}`,
       style: {
         // Floating popover position (default). Fully overridden below when
         // docked as an iPad-landscape side-sheet.
@@ -2971,10 +3973,7 @@ function QaPanel() {
         // full height — neutralize it only in the docked sheet variant.
         maxHeight: isIpadLandscape ? "none" : void 0,
         borderRadius: isIpadLandscape ? 0 : void 0,
-        background: theme.surface,
-        borderColor: `${theme.primary}22`,
-        fontFamily: lang === "ar" ? "'Tajawal', sans-serif" : "'Nunito', system-ui, sans-serif",
-        zIndex: 9990,
+        zIndex: "var(--qa-z-panel)",
         // Keyboard-avoidance lift (coarse/touch only — see effect above).
         // undefined ⇒ !keyboardLiftActive, so desktop and the iPad-landscape
         // side-sheet render this property exactly as before (the class's own
@@ -2982,156 +3981,141 @@ function QaPanel() {
         transition: keyboardLiftActive ? PANEL_TRANSITION_WITH_LIFT : void 0
       },
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "qa-flex qa-items-center qa-gap-2 qa-px-4 qa-py-3 qa-text-white",
-            style: { backgroundImage: `linear-gradient(135deg, ${theme.primary}, ${theme.accent})` },
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "qa-text-sm qa-font-bold qa-dir-ltr",
-                  style: { fontFamily: "'Cormorant Garamond', Georgia, serif", letterSpacing: "-0.02em" },
-                  dir: "ltr",
-                  children: brand.label
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "qa-rounded-full qa-bg-white-25 qa-px-2 qa-text-xs qa-font-medium", children: notes.length }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "qa-ms-auto qa-flex qa-items-center qa-overflow-hidden qa-rounded-lg qa-text-11 qa-font-semibold",
-                  dir: "ltr",
-                  style: { background: "rgba(255,255,255,0.15)" },
-                  children: ["en", "ar"].map((l) => /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => setLang(l),
-                      className: "qa-px-2 qa-py-1 qa-transition qa-tap",
-                      style: {
-                        background: lang === l ? "#ffffff" : "transparent",
-                        color: lang === l ? theme.primary : "#fff",
-                        border: "none",
-                        cursor: "pointer"
-                      },
-                      children: l === "en" ? "EN" : "\u0639"
-                    },
-                    l
-                  ))
-                }
-              ),
-              /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-gap-2 qa-px-4 qa-py-3 qa-bg-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-items-center qa-gap-1.5 qa-dir-ltr", dir: "ltr", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "qa-shrink-0",
+                style: { width: 6, height: 6, background: "var(--qa-accent)" }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "qa-text-hi", style: { fontSize: 13, fontWeight: 600 }, children: brand.label })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "qa-rounded-full qa-bg-3 qa-text-mid qa-px-2 qa-text-xs qa-font-medium", children: notes.length }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "qa-ms-auto qa-flex qa-items-center qa-overflow-hidden qa-rounded-lg qa-text-11 qa-font-semibold qa-bg-2",
+              dir: "ltr",
+              children: ["en", "ar"].map((l) => /* @__PURE__ */ jsx(
                 "button",
                 {
-                  onClick: openNaming,
-                  disabled: !notes.length || isExporting,
-                  title: t("export"),
-                  className: "qa-inline-flex qa-items-center qa-gap-1.5 qa-rounded-lg qa-px-2.5 qa-py-1.5 qa-text-xs qa-font-medium qa-hover-bg-white-15 qa-tap",
-                  style: { background: "rgba(255,255,255,0.15)", color: "#fff", border: "none", cursor: "pointer" },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Icon,
-                      {
-                        name: isExporting ? "Loader2" : "Download",
-                        size: 14,
-                        className: isExporting ? "qa-animate-spin" : void 0
-                      }
-                    ),
-                    t("export")
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TabsBar,
-          {
-            activeTab,
-            setActiveTab,
-            t,
-            theme,
-            lang
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "qa-h-px", style: { background: `${theme.primary}14` } }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "qa-flex-1 qa-space-y-3 qa-overflow-y-auto qa-p-3",
-            style: { background: `${theme.cream}80` },
-            children: [
-              activeTab === "notes" && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(NoteEditor, {}),
-                /* @__PURE__ */ jsx(NoteList, {}),
-                notes.length > 0 && /* @__PURE__ */ jsx("div", { className: "qa-pt-1 qa-text-center", children: confirmClear ? /* @__PURE__ */ jsxs("span", { className: "qa-text-xs qa-text-slate-500", children: [
-                  t("delete_all_q", { n: notes.length }),
-                  " ",
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => {
-                        void clearAll();
-                        setConfirmClear(false);
-                      },
-                      className: "qa-font-semibold qa-text-red-600 qa-tap",
-                      style: { background: "transparent", border: "none", cursor: "pointer" },
-                      children: t("yes")
-                    }
-                  ),
-                  " / ",
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => setConfirmClear(false),
-                      className: "qa-tap",
-                      style: { color: theme.primary, background: "transparent", border: "none", cursor: "pointer" },
-                      children: t("no")
-                    }
-                  )
-                ] }) : /* @__PURE__ */ jsxs(
-                  "button",
+                  onClick: () => setLang(l),
+                  className: `qa-px-2 qa-py-1 qa-transition qa-tap ${lang === l ? "qa-bg-accent" : "qa-bg-transparent qa-text-mid"}`,
+                  style: { border: "none", cursor: "pointer" },
+                  children: l === "en" ? "EN" : "\u0639"
+                },
+                l
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: startCapture,
+              title: t("capture_cta"),
+              "aria-label": t("capture_cta"),
+              className: "qa-tap-icon qa-rounded-lg qa-border qa-border-subtle qa-bg-transparent qa-text-hi qa-hover-bg-2 qa-transition",
+              style: { cursor: "pointer" },
+              children: /* @__PURE__ */ jsx(Icon, { name: "Crosshair", size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: openNaming,
+              disabled: !notes.length || isExporting,
+              title: t("export"),
+              className: "qa-inline-flex qa-items-center qa-gap-1.5 qa-rounded-lg qa-border qa-border-subtle qa-bg-transparent qa-px-2.5 qa-py-1.5 qa-text-xs qa-font-medium qa-text-hi qa-hover-bg-2 qa-transition qa-tap",
+              style: { cursor: "pointer" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
                   {
-                    onClick: () => setConfirmClear(true),
-                    className: "qa-inline-flex qa-items-center qa-gap-1 qa-text-xs qa-text-slate-400 qa-hover-text-red",
-                    style: { background: "transparent", border: "none", cursor: "pointer" },
-                    children: [
-                      /* @__PURE__ */ jsx(Icon, { name: "Trash", size: 12 }),
-                      t("clear_all")
-                    ]
+                    name: isExporting ? "Loader2" : "Download",
+                    size: 14,
+                    className: isExporting ? "qa-animate-spin" : void 0
                   }
-                ) })
-              ] }),
-              activeTab === "logins" && /* @__PURE__ */ jsx(CredentialsSection, {}),
-              activeTab === "guide" && /* @__PURE__ */ jsx(GuideSection, {})
-            ]
+                ),
+                t("export")
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          TabsBar,
+          {
+            activeTab,
+            setActiveTab,
+            t,
+            lang
           }
         ),
+        /* @__PURE__ */ jsx("div", { className: "qa-h-px qa-bg-3" }),
+        /* @__PURE__ */ jsxs("div", { className: "qa-flex-1 qa-space-y-3 qa-overflow-y-auto qa-p-3 qa-bg-0", children: [
+          activeTab === "notes" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(NoteEditor, {}),
+            /* @__PURE__ */ jsx(NoteList, {}),
+            notes.length > 0 && /* @__PURE__ */ jsx("div", { className: "qa-pt-1 qa-text-center", children: confirmClear ? /* @__PURE__ */ jsxs("span", { className: "qa-text-xs qa-text-mid", children: [
+              t("delete_all_q", { n: notes.length }),
+              " ",
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    void clearNotes();
+                    setConfirmClear(false);
+                  },
+                  className: "qa-font-semibold qa-text-danger qa-tap",
+                  style: { background: "transparent", border: "none", cursor: "pointer" },
+                  children: t("yes")
+                }
+              ),
+              " / ",
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setConfirmClear(false),
+                  className: "qa-text-accent qa-tap",
+                  style: { background: "transparent", border: "none", cursor: "pointer" },
+                  children: t("no")
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setConfirmClear(true),
+                className: "qa-inline-flex qa-items-center qa-gap-1 qa-text-xs qa-text-lo qa-hover-text-red",
+                style: { background: "transparent", border: "none", cursor: "pointer" },
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "Trash", size: 12 }),
+                  t("clear_all")
+                ]
+              }
+            ) })
+          ] }),
+          activeTab === "logins" && /* @__PURE__ */ jsx(CredentialsSection, {}),
+          activeTab === "guide" && /* @__PURE__ */ jsx(GuideSection, {})
+        ] }),
         naming && /* @__PURE__ */ jsx(
           "div",
           {
             className: "qa-absolute qa-inset-0 qa-z-50 qa-flex qa-items-center qa-justify-center qa-p-5",
-            style: { background: "rgba(58,42,46,0.45)" },
+            style: { background: "var(--qa-scrim-dialog)" },
+            onClick: () => setNaming(false),
             children: /* @__PURE__ */ jsxs(
               "div",
               {
-                className: "qa-w-full qa-rounded-xl qa-border qa-bg-white qa-p-4 qa-shadow-2xl",
-                style: { borderColor: `${theme.primary}22` },
+                className: "qa-w-full qa-rounded-xl qa-border qa-border-subtle qa-bg-2 qa-p-4 qa-elev-3",
+                onClick: (e) => e.stopPropagation(),
                 children: [
-                  /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      className: "qa-mb-2 qa-text-sm qa-font-semibold",
-                      style: { color: theme.ink },
-                      children: t("export_name_title")
-                    }
-                  ),
+                  /* @__PURE__ */ jsx("p", { className: "qa-mb-2 qa-text-sm qa-font-semibold qa-text-hi", children: t("export_name_title") }),
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: "qa-flex qa-items-center qa-rounded-lg qa-border qa-dir-ltr",
-                      style: { borderColor: `${theme.primary}33` },
+                      className: "qa-flex qa-items-center qa-rounded-lg qa-border qa-border-subtle qa-dir-ltr",
                       children: [
                         /* @__PURE__ */ jsx(
                           "input",
@@ -3141,32 +4125,24 @@ function QaPanel() {
                             onChange: (e) => setFilename(e.target.value),
                             onKeyDown: (e) => {
                               if (e.key === "Enter") doExport();
-                              if (e.key === "Escape") setNaming(false);
                             },
                             placeholder: t("export_name_placeholder"),
                             className: "qa-min-w-0 qa-flex-1 qa-rounded-lg qa-px-2 qa-py-1.5 qa-text-sm qa-border-0",
                             style: { outline: "none", background: "transparent", color: "inherit" }
                           }
                         ),
-                        /* @__PURE__ */ jsx("span", { className: "qa-px-2 qa-text-xs qa-text-slate-400", children: ".zip" })
+                        /* @__PURE__ */ jsx("span", { className: "qa-px-2 qa-text-xs qa-text-lo", children: ".zip" })
                       ]
                     }
                   ),
-                  namingCoverage && namingCoverage.uncoveredReds.length > 0 && /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      className: "qa-mt-2 qa-text-11",
-                      style: { color: "#F59E0B" },
-                      children: lang === "ar" ? `\u26A0 ${namingCoverage.uncoveredReds.length} \u0645\u0646\u0637\u0642\u0629/\u0645\u0646\u0627\u0637\u0642 \u062D\u0645\u0631\u0627\u0621 \u0644\u0645 \u064A\u062A\u0645 \u0627\u0644\u062A\u062D\u0642\u0642 \u0645\u0646\u0647\u0627 \u2014 \u062A\u0635\u062F\u064A\u0631 \u0639\u0644\u0649 \u0623\u064A \u062D\u0627\u0644\u061F` : `\u26A0 ${namingCoverage.uncoveredReds.length} red zone(s) not yet verified \u2014 export anyway?`
-                    }
-                  ),
+                  namingCoverage && namingCoverage.uncoveredReds.length > 0 && /* @__PURE__ */ jsx("p", { className: "qa-mt-2 qa-text-11 qa-text-warn", children: lang === "ar" ? `\u26A0 ${namingCoverage.uncoveredReds.length} \u0645\u0646\u0637\u0642\u0629/\u0645\u0646\u0627\u0637\u0642 \u062D\u0645\u0631\u0627\u0621 \u0644\u0645 \u064A\u062A\u0645 \u0627\u0644\u062A\u062D\u0642\u0642 \u0645\u0646\u0647\u0627 \u2014 \u062A\u0635\u062F\u064A\u0631 \u0639\u0644\u0649 \u0623\u064A \u062D\u0627\u0644\u061F` : `\u26A0 ${namingCoverage.uncoveredReds.length} red zone(s) not yet verified \u2014 export anyway?` }),
                   /* @__PURE__ */ jsxs("div", { className: "qa-mt-3 qa-flex qa-gap-2", children: [
                     /* @__PURE__ */ jsxs(
                       "button",
                       {
                         onClick: doExport,
-                        className: "qa-flex qa-flex-1 qa-items-center qa-justify-center qa-gap-1.5 qa-rounded-lg qa-px-3 qa-py-2 qa-text-sm qa-font-semibold qa-text-white qa-tap",
-                        style: { background: theme.accent, border: "none", cursor: "pointer" },
+                        className: "qa-flex qa-flex-1 qa-items-center qa-justify-center qa-gap-1.5 qa-rounded-lg qa-bg-accent qa-px-3 qa-py-2 qa-text-sm qa-font-semibold qa-tap",
+                        style: { border: "none", cursor: "pointer" },
                         children: [
                           /* @__PURE__ */ jsx(Icon, { name: "Check", size: 16 }),
                           t("export")
@@ -3177,13 +4153,8 @@ function QaPanel() {
                       "button",
                       {
                         onClick: () => setNaming(false),
-                        className: "qa-inline-flex qa-items-center qa-gap-1 qa-rounded-lg qa-border qa-px-3 qa-py-2 qa-text-sm qa-tap",
-                        style: {
-                          borderColor: `${theme.primary}33`,
-                          color: theme.primary,
-                          background: "transparent",
-                          cursor: "pointer"
-                        },
+                        className: "qa-inline-flex qa-items-center qa-gap-1 qa-rounded-lg qa-border qa-border-subtle qa-px-3 qa-py-2 qa-text-sm qa-text-hi qa-tap",
+                        style: { background: "transparent", cursor: "pointer" },
                         children: [
                           /* @__PURE__ */ jsx(Icon, { name: "X", size: 16 }),
                           t("cancel")
@@ -3204,7 +4175,6 @@ function TabsBar({
   activeTab,
   setActiveTab,
   t,
-  theme,
   lang
 }) {
   const tabRefs = useRef([]);
@@ -3228,7 +4198,7 @@ function TabsBar({
     ro.observe(container);
     return () => ro.disconnect();
   }, [reposition]);
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "qa-flex qa-px-2 qa-pt-2 qa-relative", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "qa-flex qa-px-2 qa-pt-2 qa-relative qa-bg-1", children: [
     TABS.map((tab, i) => {
       const on = activeTab === tab.key;
       return /* @__PURE__ */ jsxs(
@@ -3238,13 +4208,8 @@ function TabsBar({
             tabRefs.current[i] = el;
           },
           onClick: () => setActiveTab(tab.key),
-          className: "qa-relative qa-flex qa-flex-1 qa-items-center qa-justify-center qa-gap-1.5 qa-py-2 qa-text-sm qa-font-medium qa-transition qa-tap",
-          style: {
-            color: on ? theme.primary : "#94a3b8",
-            background: "transparent",
-            border: "none",
-            cursor: "pointer"
-          },
+          className: `qa-relative qa-flex qa-flex-1 qa-items-center qa-justify-center qa-gap-1.5 qa-py-2 qa-text-sm qa-font-medium qa-transition qa-tap ${on ? "qa-text-accent" : "qa-text-mid"}`,
+          style: { background: "transparent", border: "none", cursor: "pointer" },
           children: [
             /* @__PURE__ */ jsx(Icon, { name: tab.icon, size: 16 }),
             t(tab.labelKey)
@@ -3258,20 +4223,265 @@ function TabsBar({
       {
         ref: barRef,
         className: "qa-tab-indicator",
-        style: { background: theme.accent },
+        style: { background: "var(--qa-accent)" },
         "aria-hidden": "true"
       }
     )
   ] });
 }
+function toneIcon(tone) {
+  switch (tone) {
+    case "success":
+      return { name: "Check", colorClass: "qa-text-success" };
+    case "error":
+      return { name: "AlertTriangle", colorClass: "qa-text-danger" };
+    default:
+      return { name: "X", colorClass: "qa-text-accent" };
+  }
+}
+function Toast({ notice }) {
+  const { dismissNotice } = useQa();
+  const icon = toneIcon(notice.tone);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "qa-toast qa-toast-in qa-bg-2 qa-border qa-border-subtle qa-elev-2 qa-text-hi qa-flex qa-items-center qa-gap-2 qa-rounded-md qa-px-3 qa-py-2",
+      style: { fontSize: 13 },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon.name, size: 16, className: `qa-shrink-0 ${icon.colorClass}` }),
+        /* @__PURE__ */ jsx("span", { className: "qa-min-w-0 qa-flex-1", children: notice.message }),
+        notice.action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              notice.action?.onAction();
+              dismissNotice(notice.id);
+            },
+            className: "qa-tap qa-text-accent qa-focus-ring qa-shrink-0 qa-rounded qa-px-2 qa-py-1 qa-font-semibold",
+            style: { background: "transparent", border: "none", cursor: "pointer", fontSize: 13, pointerEvents: "auto" },
+            children: notice.action.label
+          }
+        )
+      ]
+    }
+  );
+}
+function NoticeHost() {
+  const { notices, dir } = useQa();
+  const politeNotices = notices.filter((n) => n.tone !== "error");
+  const errorNotices = notices.filter((n) => n.tone === "error");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-qa-overlay": "true",
+      dir,
+      className: "qa-toast-viewport qa-print-hidden qa-fixed",
+      style: { zIndex: "var(--qa-z-toast)", pointerEvents: "none" },
+      children: [
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "qa-flex qa-flex-col qa-items-center qa-gap-2", children: politeNotices.map((n) => /* @__PURE__ */ jsx(Toast, { notice: n }, n.id)) }),
+        /* @__PURE__ */ jsx("div", { "aria-live": "assertive", className: "qa-flex qa-flex-col qa-items-center qa-gap-2", children: errorNotices.map((n) => /* @__PURE__ */ jsx(Toast, { notice: n }, n.id)) })
+      ]
+    }
+  );
+}
+function TestAlongHud() {
+  const {
+    dir,
+    t,
+    pick: pick2,
+    testAlong,
+    testAlongSteps,
+    gotoStep,
+    gradeStep,
+    exitTestAlong,
+    startCapture,
+    evidenceByStep
+  } = useQa();
+  const index = testAlong.index;
+  const steps = testAlongSteps;
+  const currentStep = steps[index];
+  const backIcon = dir === "rtl" ? "ChevronRight" : "ChevronLeft";
+  const nextIcon = dir === "rtl" ? "ChevronLeft" : "ChevronRight";
+  useEffect(() => {
+    const step = steps[index];
+    if (!step) return;
+    const notesForStep = evidenceByStep.get(step.key);
+    if (!notesForStep || notesForStep.length === 0) return;
+    const latest = notesForStep[notesForStep.length - 1];
+    if (latest.target) flashLocate(latest.target);
+  }, [testAlong.index]);
+  if (!testAlong.active) return null;
+  const atFirst = index <= 0;
+  const atLast = index >= steps.length - 1;
+  const riskColor = RISK_COLORS[currentStep?.risk ?? "green"];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-qa-overlay": "true",
+      dir,
+      className: "qa-fixed qa-print-hidden",
+      style: {
+        left: "env(safe-area-inset-left)",
+        right: "env(safe-area-inset-right)",
+        bottom: "env(safe-area-inset-bottom)",
+        zIndex: "var(--qa-z-panel)",
+        padding: "0.75rem",
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "region",
+          "aria-label": t("journey_title"),
+          className: "qa-flex qa-flex-col qa-gap-2 qa-bg-1 qa-border qa-border-subtle qa-elev-3 qa-rounded-xl qa-p-3",
+          style: { maxWidth: "32rem", marginInline: "auto", pointerEvents: "auto" },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "qa-shrink-0 qa-rounded-full",
+                  style: { width: 8, height: 8, backgroundColor: riskColor }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "qa-text-11 qa-font-semibold qa-text-mid", children: t("step_of", { n: index + 1, m: steps.length }) }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: exitTestAlong,
+                  className: "qa-tap qa-ms-auto qa-inline-flex qa-items-center qa-gap-1 qa-rounded-lg qa-px-2 qa-py-1 qa-text-11 qa-font-medium qa-text-lo qa-hover-bg-2 qa-focus-ring qa-transition",
+                  style: { background: "transparent", border: "none", cursor: "pointer" },
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "X", size: 14 }),
+                    t("exit_walkthrough")
+                  ]
+                }
+              )
+            ] }),
+            currentStep && /* @__PURE__ */ jsxs("div", { className: "qa-min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "qa-text-sm qa-font-medium qa-text-hi qa-break-words", children: pick2(currentStep.what) }),
+              currentStep.expect && /* @__PURE__ */ jsxs("p", { className: "qa-text-11 qa-text-mid qa-mt-1 qa-break-words", children: [
+                /* @__PURE__ */ jsxs("span", { className: "qa-font-semibold", children: [
+                  t("expected_label"),
+                  ": "
+                ] }),
+                pick2(currentStep.expect)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-flex-wrap qa-items-center qa-gap-2", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => gotoStep(index - 1),
+                  disabled: atFirst,
+                  className: "qa-tap qa-shrink-0 qa-inline-flex qa-items-center qa-gap-1 qa-rounded-lg qa-border qa-border-subtle qa-px-2 qa-py-1.5 qa-text-xs qa-font-medium qa-text-hi qa-hover-bg-2 qa-focus-ring qa-transition",
+                  style: { background: "transparent", cursor: "pointer" },
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: backIcon, size: 14 }),
+                    t("prev_step")
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => currentStep && gradeStep(currentStep.key, "fail"),
+                  disabled: !currentStep,
+                  className: "qa-tap qa-flex-1 qa-inline-flex qa-items-center qa-justify-center qa-gap-1.5 qa-rounded-lg qa-bg-danger-tint qa-text-danger qa-text-xs qa-font-semibold qa-focus-ring qa-transition",
+                  style: { border: "none", cursor: "pointer", minWidth: "4.5rem" },
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "AlertTriangle", size: 14 }),
+                    t("mark_fail")
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => currentStep && gradeStep(currentStep.key, "pass"),
+                  disabled: !currentStep,
+                  className: "qa-tap qa-flex-1 qa-inline-flex qa-items-center qa-justify-center qa-gap-1.5 qa-rounded-lg qa-bg-success-tint qa-text-success qa-text-xs qa-font-semibold qa-focus-ring qa-transition",
+                  style: { border: "none", cursor: "pointer", minWidth: "4.5rem" },
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "Check", size: 14 }),
+                    t("mark_pass")
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => startCapture(),
+                  className: "qa-tap qa-flex-1 qa-inline-flex qa-items-center qa-justify-center qa-gap-1.5 qa-rounded-lg qa-bg-accent qa-text-xs qa-font-semibold qa-focus-ring qa-transition",
+                  style: { border: "none", cursor: "pointer", minWidth: "6rem" },
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "Crosshair", size: 14 }),
+                    t("capture_here")
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => gotoStep(index + 1),
+                  disabled: atLast,
+                  className: "qa-tap qa-shrink-0 qa-inline-flex qa-items-center qa-gap-1 qa-rounded-lg qa-border qa-border-subtle qa-px-2 qa-py-1.5 qa-text-xs qa-font-medium qa-text-hi qa-hover-bg-2 qa-focus-ring qa-transition",
+                  style: { background: "transparent", cursor: "pointer" },
+                  children: [
+                    t("next_step"),
+                    /* @__PURE__ */ jsx(Icon, { name: nextIcon, size: 14 })
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
 
 // src/lib/capture.ts
 var HTML2CANVAS_TIMEOUT_MS = 1e4;
+var FALLBACK_PAGE_BACKGROUND = "#ffffff";
 function withTimeout(promise, ms) {
+  let timer;
   return Promise.race([
     promise,
-    new Promise((resolve) => setTimeout(() => resolve(null), ms))
-  ]);
+    new Promise((resolve) => {
+      timer = setTimeout(() => resolve(null), ms);
+    })
+  ]).finally(() => {
+    if (timer !== void 0) clearTimeout(timer);
+  });
+}
+function isTransparent(color) {
+  const c = (color || "").trim().toLowerCase();
+  if (!c || c === "transparent") return true;
+  const m = c.match(/^rgba?\(([^)]+)\)$/);
+  if (!m) return false;
+  const parts = m[1].split(/[,/\s]+/).filter(Boolean);
+  return parts.length >= 4 && parseFloat(parts[3]) === 0;
+}
+function resolvePageBackground() {
+  if (typeof getComputedStyle !== "function") return FALLBACK_PAGE_BACKGROUND;
+  for (const el of [document.body, document.documentElement]) {
+    if (!el) continue;
+    try {
+      const bg = getComputedStyle(el).backgroundColor;
+      if (!isTransparent(bg)) return bg;
+    } catch {
+    }
+  }
+  return FALLBACK_PAGE_BACKGROUND;
 }
 function toBlob(canvas) {
   return new Promise((resolve) => {
@@ -3287,8 +4497,10 @@ function toBlob(canvas) {
   });
 }
 async function captureRegion(rect, scroll) {
-  if (typeof document === "undefined" || typeof window === "undefined") return null;
-  if (!rect || rect.width < 2 || rect.height < 2) return null;
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    return { status: "empty" };
+  }
+  if (!rect || rect.width < 2 || rect.height < 2) return { status: "empty" };
   const sx = scroll?.x ?? window.scrollX;
   const sy = scroll?.y ?? window.scrollY;
   try {
@@ -3303,7 +4515,8 @@ async function captureRegion(rect, scroll) {
         scale,
         useCORS: true,
         allowTaint: true,
-        backgroundColor: null,
+        // The page's own background, never null — see resolvePageBackground().
+        backgroundColor: resolvePageBackground(),
         logging: false,
         scrollX: sx,
         scrollY: sy,
@@ -3315,11 +4528,12 @@ async function captureRegion(rect, scroll) {
       }),
       HTML2CANVAS_TIMEOUT_MS
     );
-    if (!canvas) return null;
-    return await toBlob(canvas);
+    if (!canvas) return { status: "failed" };
+    const blob = await toBlob(canvas);
+    return blob ? { status: "ok", blob } : { status: "failed" };
   } catch (err) {
     console.warn("[QA] region capture failed:", err);
-    return null;
+    return { status: "failed" };
   }
 }
 
@@ -3423,6 +4637,26 @@ function unlockPageScroll() {
 var DRAG_THRESHOLD2 = 6;
 var TOUCH_DRAG_THRESHOLD = 12;
 var MIN_REGION_SIZE = 8;
+var SEVERITIES2 = ["bug", "question", "polish"];
+var SEVERITY_ICON = {
+  bug: "Bug",
+  question: "AlertTriangle",
+  polish: "Pencil"
+};
+var SEVERITY_LABEL_KEY2 = {
+  bug: "sev_bug",
+  question: "sev_question",
+  polish: "sev_polish"
+};
+function clampRegionRect(rect) {
+  const vw = typeof window !== "undefined" ? window.innerWidth : rect.left + rect.width;
+  const vh = typeof window !== "undefined" ? window.innerHeight : rect.top + rect.height;
+  const width = Math.min(Math.max(MIN_REGION_SIZE, rect.width), Math.max(MIN_REGION_SIZE, vw));
+  const height = Math.min(Math.max(MIN_REGION_SIZE, rect.height), Math.max(MIN_REGION_SIZE, vh));
+  const left = Math.min(Math.max(0, rect.left), Math.max(0, vw - width));
+  const top = Math.min(Math.max(0, rect.top), Math.max(0, vh - height));
+  return { top, left, width, height };
+}
 var REGION_HANDLES = [
   { edge: "nw", top: "0%", left: "0%", cursor: "nwse-resize" },
   { edge: "n", top: "0%", left: "50%", cursor: "ns-resize" },
@@ -3434,7 +4668,7 @@ var REGION_HANDLES = [
   { edge: "se", top: "100%", left: "100%", cursor: "nwse-resize" }
 ];
 function CaptureMode() {
-  const { addNote, endCapture, t, dir, theme } = useQa();
+  const { addNote, endCapture, t, dir } = useQa();
   const coarse = useCoarsePointer();
   const layerRef = useRef(null);
   const overlayRootRef = useRef(null);
@@ -3448,7 +4682,10 @@ function CaptureMode() {
   const [shot, setShot] = useState(null);
   const [shotUrl, setShotUrl] = useState(null);
   const [capturing, setCapturing] = useState(false);
+  const [captureError, setCaptureError] = useState(false);
   const [description, setDescription] = useState("");
+  const [severity, setSeverity] = useState("bug");
+  const [targetForensics, setTargetForensics] = useState(void 0);
   const taRef = useRef(null);
   const activePointerId = useRef(null);
   const pointerKind = useRef("mouse");
@@ -3469,31 +4706,39 @@ function CaptureMode() {
     if (!el || el.closest?.("[data-qa-overlay]")) return null;
     return el;
   }, []);
-  const beginAnnotation = useCallback(async (sel) => {
-    setSelection(sel);
-    setCandidate(null);
-    setHover(null);
-    setRegionMode(false);
-    setPhase("annotating");
-    setCardIn(false);
+  const runCapture = useCallback(async (rect) => {
     setCapturing(true);
+    setCaptureError(false);
     lockPageScroll();
     try {
-      const blob = await captureRegion(sel.rect, scrollSnap.current);
+      const outcome = await captureRegion(rect, scrollSnap.current);
+      const blob = outcome.status === "ok" ? outcome.blob : null;
+      const url = blob ? URL.createObjectURL(blob) : null;
       if (!mountedRef.current) {
-        if (blob) URL.revokeObjectURL(URL.createObjectURL(blob));
+        if (url) URL.revokeObjectURL(url);
         return;
       }
+      setCaptureError(outcome.status === "failed");
       setShot(blob);
       setShotUrl((old) => {
         if (old) URL.revokeObjectURL(old);
-        return blob ? URL.createObjectURL(blob) : null;
+        return url;
       });
     } finally {
       unlockPageScroll();
       if (mountedRef.current) setCapturing(false);
     }
   }, []);
+  const beginAnnotation = useCallback(async (sel) => {
+    setSelection(sel);
+    setCandidate(null);
+    setHover(null);
+    setRegionMode(false);
+    setSeverity("bug");
+    setPhase("annotating");
+    setCardIn(false);
+    await runCapture(sel.rect);
+  }, [runCapture]);
   useEffect(() => {
     if (phase !== "annotating") {
       setCardIn(false);
@@ -3552,42 +4797,50 @@ function CaptureMode() {
     activePointerId.current = null;
     const d = dragRef.current;
     dragRef.current = null;
+    setDrag(null);
     const threshold = pointerKind.current === "mouse" ? DRAG_THRESHOLD2 : TOUCH_DRAG_THRESHOLD;
     const moved = d !== null && Math.hypot(e.clientX - d.x0, e.clientY - d.y0) > threshold;
     scrollSnap.current = { x: window.scrollX, y: window.scrollY };
+    let regionRect = null;
     if (moved && d) {
-      const rect = {
+      const rawRect = {
         left: Math.min(d.x0, e.clientX),
         top: Math.min(d.y0, e.clientY),
         width: Math.abs(e.clientX - d.x0),
         height: Math.abs(e.clientY - d.y0)
       };
-      setDrag(null);
-      const sel = { kind: "region", rect };
-      if (coarse) {
-        setCandidate(sel);
-        setPhase("confirming");
-      } else {
-        void beginAnnotation(sel);
+      if (rawRect.width >= MIN_REGION_SIZE || rawRect.height >= MIN_REGION_SIZE) {
+        regionRect = clampRegionRect(rawRect);
       }
-    } else {
-      const el = elementUnder(e.clientX, e.clientY);
-      if (!el) return;
-      const r = el.getBoundingClientRect();
-      const sel = {
-        kind: "element",
-        rect: { top: r.top, left: r.left, width: r.width, height: r.height },
-        selector: getStableSelector(el),
-        text: (el.innerText ?? el.textContent ?? "").trim().slice(0, 120),
-        tagName: el.tagName.toLowerCase()
-      };
+    }
+    if (regionRect) {
+      const sel2 = { kind: "region", rect: regionRect };
+      setTargetForensics(void 0);
       if (coarse) {
-        setCandidate(sel);
-        setHover({ rect: sel.rect, selector: sel.selector || "" });
+        setCandidate(sel2);
         setPhase("confirming");
       } else {
-        void beginAnnotation(sel);
+        void beginAnnotation(sel2);
       }
+      return;
+    }
+    const el = elementUnder(e.clientX, e.clientY);
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const sel = {
+      kind: "element",
+      rect: { top: r.top, left: r.left, width: r.width, height: r.height },
+      selector: getStableSelector(el),
+      text: (el.innerText ?? el.textContent ?? "").trim().slice(0, 120),
+      tagName: el.tagName.toLowerCase()
+    };
+    setTargetForensics(collectTargetForensics(el));
+    if (coarse) {
+      setCandidate(sel);
+      setHover({ rect: sel.rect, selector: sel.selector || "" });
+      setPhase("confirming");
+    } else {
+      void beginAnnotation(sel);
     }
   };
   const onPointerCancel = (e) => {
@@ -3622,23 +4875,29 @@ function CaptureMode() {
     const dx = e.clientX - hd.startX;
     const dy = e.clientY - hd.startY;
     const { startRect, edge } = hd;
-    let { top, left, width, height } = startRect;
+    let top = startRect.top;
+    let left = startRect.left;
+    let right = startRect.left + startRect.width;
+    let bottom = startRect.top + startRect.height;
     if (edge === "move") {
       left = startRect.left + dx;
       top = startRect.top + dy;
+      right = left + startRect.width;
+      bottom = top + startRect.height;
     } else {
-      if (edge.includes("e")) width = Math.max(MIN_REGION_SIZE, startRect.width + dx);
-      if (edge.includes("w")) {
-        width = Math.max(MIN_REGION_SIZE, startRect.width - dx);
-        left = startRect.left + (startRect.width - width);
-      }
-      if (edge.includes("s")) height = Math.max(MIN_REGION_SIZE, startRect.height + dy);
-      if (edge.includes("n")) {
-        height = Math.max(MIN_REGION_SIZE, startRect.height - dy);
-        top = startRect.top + (startRect.height - height);
-      }
+      if (edge.includes("e")) right += dx;
+      if (edge.includes("w")) left += dx;
+      if (edge.includes("s")) bottom += dy;
+      if (edge.includes("n")) top += dy;
     }
-    setCandidate((prev) => prev ? { ...prev, rect: { top, left, width, height } } : prev);
+    const rawRect = {
+      left: Math.min(left, right),
+      top: Math.min(top, bottom),
+      width: Math.abs(right - left),
+      height: Math.abs(bottom - top)
+    };
+    const rect = clampRegionRect(rawRect);
+    setCandidate((prev) => prev ? { ...prev, rect } : prev);
   }, []);
   const onHandlePointerUp = useCallback((e) => {
     const hd = handleDragRef.current;
@@ -3675,7 +4934,8 @@ function CaptureMode() {
       }
       const first = focusable[0];
       const last = focusable[focusable.length - 1];
-      const active = document.activeElement;
+      const rootNode = root.getRootNode();
+      const active = rootNode.activeElement;
       const activeInside = !!active && root.contains(active);
       if (e.shiftKey) {
         if (!activeInside || active === first) {
@@ -3716,21 +4976,31 @@ function CaptureMode() {
       },
       scroll: { ...scrollSnap.current }
     };
-    await addNote({ description, screenshot: shot ?? void 0, target });
+    await addNote({
+      description,
+      screenshot: shot ?? void 0,
+      target,
+      severity,
+      forensics: selection.kind === "element" ? targetForensics : void 0
+    });
     endCapture();
   };
   const popStyleFor = useCallback((r) => {
     if (typeof window === "undefined") return {};
-    const below = r.top + r.height + 12;
-    const placeAbove = below + 220 > window.innerHeight;
-    const top = placeAbove ? Math.max(12, r.top - 12) : below;
+    const margin = 12;
+    const spaceBelow = window.innerHeight - (r.top + r.height + margin);
+    const spaceAbove = r.top - margin;
+    const placeAbove = spaceBelow < spaceAbove;
+    const top = placeAbove ? Math.max(margin, r.top - margin) : r.top + r.height + margin;
     let left = r.left;
     left = Math.min(left, window.innerWidth - 340);
-    left = Math.max(12, left);
+    left = Math.max(margin, left);
+    const available = (placeAbove ? spaceAbove : spaceBelow) - margin;
     return {
       top,
       left,
-      transform: placeAbove ? "translateY(-100%)" : "none"
+      transform: placeAbove ? "translateY(-100%)" : "none",
+      maxHeight: `max(${margin * 4}px, ${Math.max(0, available)}px)`
     };
   }, []);
   const popStyle = selection ? popStyleFor(selection.rect) : {};
@@ -3738,7 +5008,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", ref: overlayRootRef, children: [
+  return /* @__PURE__ */ jsxs("div", { "data-qa-overlay": "true", "data-qa-capture-root": "true", ref: overlayRootRef, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -3751,15 +5021,14 @@ function CaptureMode() {
         style: {
           cursor: phase === "selecting" && !coarse ? "crosshair" : "default",
           touchAction: coarse ? "none" : "auto",
-          background: "rgba(58,42,46,0.18)"
+          background: "var(--qa-scrim-capture)"
         }
       }
     ),
     phase === "selecting" && !coarse && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "qa-fixed qa-left-half qa-top-4 qa-z-10095 qa-translate-x-neg-half qa-flex qa-items-center qa-gap-3 qa-rounded-full qa-px-4 qa-py-2 qa-text-sm qa-text-white qa-shadow-lg",
-        style: { background: theme.primary },
+        className: "qa-fixed qa-left-half qa-top-4 qa-z-10095 qa-translate-x-neg-half qa-flex qa-items-center qa-gap-3 qa-rounded-full qa-border qa-border-subtle qa-bg-2 qa-px-4 qa-py-2 qa-text-sm qa-text-hi qa-elev-2",
         children: [
           /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-items-center qa-gap-1.5", children: [
             /* @__PURE__ */ jsx(Icon, { name: "MousePointerClick", size: 16 }),
@@ -3774,8 +5043,8 @@ function CaptureMode() {
             "button",
             {
               onClick: () => endCapture(),
-              className: "qa-tap-icon qa-ms-1 qa-rounded-full qa-border qa-border-white-40 qa-px-2 qa-py-0.5 qa-text-xs qa-hover-bg-white-15",
-              style: { background: "transparent", color: "#fff", cursor: "pointer" },
+              className: "qa-tap-icon qa-ms-1 qa-rounded-full qa-border qa-border-white-40 qa-px-2 qa-py-0.5 qa-text-xs qa-text-hi qa-hover-bg-white-15",
+              style: { background: "transparent", cursor: "pointer" },
               children: "Esc"
             }
           )
@@ -3785,8 +5054,7 @@ function CaptureMode() {
     phase === "selecting" && coarse && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "qa-fixed qa-left-half qa-top-4 qa-z-10095 qa-translate-x-neg-half qa-flex qa-items-center qa-gap-3 qa-rounded-full qa-px-4 qa-py-2 qa-text-sm qa-text-white qa-shadow-lg",
-        style: { background: theme.primary },
+        className: "qa-fixed qa-left-half qa-top-4 qa-z-10095 qa-translate-x-neg-half qa-flex qa-items-center qa-gap-3 qa-rounded-full qa-border qa-border-subtle qa-bg-2 qa-px-4 qa-py-2 qa-text-sm qa-text-hi qa-elev-2",
         children: [
           /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-items-center qa-gap-1.5", children: [
             /* @__PURE__ */ jsx(Icon, { name: "MousePointerClick", size: 16 }),
@@ -3815,8 +5083,8 @@ function CaptureMode() {
             "button",
             {
               onClick: () => endCapture(),
-              className: "qa-tap-icon qa-ms-1 qa-rounded-full qa-border qa-border-white-40 qa-px-2 qa-py-0.5 qa-text-xs qa-hover-bg-white-15",
-              style: { background: "transparent", color: "#fff", cursor: "pointer" },
+              className: "qa-tap-icon qa-ms-1 qa-rounded-full qa-border qa-border-white-40 qa-px-2 qa-py-0.5 qa-text-xs qa-text-hi qa-hover-bg-white-15",
+              style: { background: "transparent", cursor: "pointer" },
               children: "Esc"
             }
           )
@@ -3833,10 +5101,10 @@ function CaptureMode() {
           width: activeRect.width,
           height: activeRect.height,
           pointerEvents: confirmingRegion ? "auto" : "none",
-          outline: `2px ${isRegion ? "dashed" : "solid"} ${theme.accent}`,
+          outline: `2px ${isRegion ? "dashed" : "solid"} var(--qa-accent)`,
           outlineOffset: "1px",
-          background: `${theme.accent}1f`,
-          boxShadow: phase === "annotating" ? "0 0 0 9999px rgba(58,42,46,0.28)" : "none"
+          background: "var(--qa-accent-tint)",
+          boxShadow: phase === "annotating" ? "0 0 0 9999px var(--qa-scrim-spot)" : "none"
         },
         children: [
           (phase === "selecting" || phase === "confirming") && hover?.selector && !drag && /* @__PURE__ */ jsx(
@@ -3847,7 +5115,7 @@ function CaptureMode() {
                 top: "-1.5rem",
                 left: 0,
                 maxWidth: "260px",
-                background: theme.primary
+                background: "var(--qa-surface-3)"
               },
               children: hover.selector
             }
@@ -3859,7 +5127,7 @@ function CaptureMode() {
               style: {
                 bottom: "-1.5rem",
                 right: 0,
-                background: theme.accentDark
+                background: "var(--qa-accent-active)"
               },
               children: [
                 Math.round(drag.rect.width),
@@ -3896,7 +5164,7 @@ function CaptureMode() {
                   transform: "translate(-50%, -50%)",
                   touchAction: "none",
                   cursor,
-                  background: `${theme.accent}33`
+                  background: "var(--qa-accent-tint)"
                 },
                 children: /* @__PURE__ */ jsx(
                   "span",
@@ -3905,7 +5173,7 @@ function CaptureMode() {
                     style: {
                       width: 16,
                       height: 16,
-                      background: theme.accent,
+                      background: "var(--qa-accent)",
                       border: "2px solid #fff",
                       boxShadow: "0 1px 3px rgba(0,0,0,0.35)",
                       pointerEvents: "none"
@@ -3926,19 +5194,19 @@ function CaptureMode() {
         dir,
         role: "group",
         "aria-label": candidate.kind === "region" ? t("confirm_region") : t("use_this"),
-        className: "qa-fixed qa-z-10096 qa-flex qa-items-center qa-gap-2 qa-rounded-full qa-border qa-px-3 qa-py-2 qa-shadow-lg",
+        className: "qa-fixed qa-z-10096 qa-flex qa-items-center qa-gap-2 qa-rounded-full qa-border qa-px-3 qa-py-2 qa-elev-2",
         style: {
           ...confirmPopStyle,
-          background: theme.surface,
-          borderColor: `${theme.primary}22`
+          background: "var(--qa-surface-1)",
+          borderColor: "var(--qa-border-subtle)"
         },
         children: [
           /* @__PURE__ */ jsxs(
             "button",
             {
               onClick: () => void beginAnnotation(candidate),
-              className: "qa-tap qa-flex qa-items-center qa-gap-1.5 qa-rounded-full qa-px-3 qa-py-2 qa-text-sm qa-font-semibold qa-text-white",
-              style: { background: theme.accent, border: "none", cursor: "pointer" },
+              className: "qa-tap qa-flex qa-items-center qa-gap-1.5 qa-rounded-full qa-px-3 qa-py-2 qa-text-sm qa-font-semibold qa-bg-accent",
+              style: { border: "none", cursor: "pointer" },
               children: [
                 /* @__PURE__ */ jsx(Icon, { name: "Check", size: 16 }),
                 t("use_this")
@@ -3952,14 +5220,10 @@ function CaptureMode() {
                 setCandidate(null);
                 setHover(null);
                 setPhase("selecting");
+                setTargetForensics(void 0);
               },
-              className: "qa-tap qa-rounded-full qa-border qa-px-3 qa-py-2 qa-text-sm",
-              style: {
-                borderColor: `${theme.primary}33`,
-                color: theme.primary,
-                background: "transparent",
-                cursor: "pointer"
-              },
+              className: "qa-tap qa-rounded-full qa-border qa-border-subtle qa-px-3 qa-py-2 qa-text-sm qa-text-mid",
+              style: { background: "transparent", cursor: "pointer" },
               children: t("adjust")
             }
           )
@@ -3971,70 +5235,111 @@ function CaptureMode() {
       {
         "data-qa-overlay": "true",
         dir,
-        className: `qa-fixed qa-z-10096 qa-w-320 qa-overflow-hidden qa-rounded-xl qa-border qa-shadow-2xl qa-card-anim${cardIn ? " qa-card-in" : ""}`,
+        className: `qa-fixed qa-z-10096 qa-w-320 qa-overflow-hidden qa-rounded-xl qa-border qa-border-subtle qa-elev-3 qa-card-anim${cardIn ? " qa-card-in" : ""}`,
         style: {
           ...popStyle,
-          background: theme.surface,
-          borderColor: `${theme.primary}22`,
-          fontFamily: dir === "rtl" ? "'Tajawal', sans-serif" : "'Nunito', system-ui, sans-serif"
+          // popStyle's maxHeight caps this to whatever room is actually
+          // available above/below the target; overflowY lets the card
+          // itself scroll internally rather than ever rendering content
+          // (most importantly the Save button) somewhere the page's own
+          // scroll — locked during capture — can't reach. overflowX stays
+          // hidden so the qa-overflow-hidden class's rounded-corner
+          // clipping is preserved on that axis.
+          overflowY: "auto",
+          overflowX: "hidden",
+          background: "var(--qa-surface-1)"
         },
         children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "qa-flex qa-items-center qa-gap-2 qa-px-3 qa-py-2 qa-text-white",
-              style: { background: theme.primary },
-              children: [
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    name: selection.kind === "region" ? "Square" : "MousePointerClick",
-                    size: 16
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "qa-text-xs qa-font-semibold", children: selection.kind === "region" ? t("sel_region") : t("sel_element") }),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => endCapture(),
-                    className: "qa-tap-icon qa-ms-auto qa-opacity-80 qa-hover-opacity-100",
-                    style: { background: "transparent", border: "none", cursor: "pointer", color: "#fff" },
-                    children: /* @__PURE__ */ jsx(Icon, { name: "X", size: 16 })
-                  }
-                )
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-gap-2 qa-px-3 qa-py-2 qa-bg-2 qa-border-b qa-border-subtle qa-text-hi", children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: selection.kind === "region" ? "Square" : "MousePointerClick",
+                size: 16
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "qa-text-xs qa-font-semibold", children: selection.kind === "region" ? t("sel_region") : t("sel_element") }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => endCapture(),
+                className: "qa-tap-icon qa-ms-auto qa-opacity-80 qa-hover-opacity-100",
+                style: { background: "transparent", border: "none", cursor: "pointer", color: "var(--qa-ink-hi)" },
+                children: /* @__PURE__ */ jsx(Icon, { name: "X", size: 16 })
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxs("div", { className: "qa-space-y-2 qa-p-3", children: [
             /* @__PURE__ */ jsx(
               "div",
               {
                 className: "qa-flex qa-min-h-16 qa-items-center qa-justify-center qa-rounded-lg qa-border",
                 style: {
-                  borderColor: `${theme.primary}1a`,
-                  background: theme.cream
+                  borderColor: "var(--qa-border-subtle)",
+                  background: "var(--qa-surface-0)"
                 },
-                children: capturing ? /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    className: "qa-flex qa-items-center qa-gap-2 qa-py-4 qa-text-xs",
-                    style: { color: theme.primary },
-                    children: [
-                      /* @__PURE__ */ jsx(Icon, { name: "Loader2", size: 16, className: "qa-animate-spin" }),
-                      t("capturing")
-                    ]
-                  }
-                ) : shotUrl ? /* @__PURE__ */ jsx(
+                children: capturing ? /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-items-center qa-gap-2 qa-py-4 qa-text-xs qa-text-accent", children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "Loader2", size: 16, className: "qa-animate-spin" }),
+                  t("capturing")
+                ] }) : shotUrl ? /* @__PURE__ */ jsx(
                   "img",
                   {
                     src: shotUrl,
                     alt: "capture",
                     className: "qa-max-h-32 qa-rounded-md"
                   }
+                ) : captureError ? (
+                  // The render broke rather than being skipped — offer a retry
+                  // against the same selection instead of a dead-end message.
+                  /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-flex-col qa-items-center qa-gap-2 qa-py-3", children: [
+                    /* @__PURE__ */ jsx("span", { className: "qa-text-xs qa-text-red-600", children: t("capture_failed") }),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => selection && void runCapture(selection.rect),
+                        className: "qa-tap qa-inline-flex qa-items-center qa-gap-1.5 qa-rounded-md qa-border qa-border-subtle qa-px-2 qa-py-1 qa-text-xs qa-text-mid qa-focus-ring",
+                        children: [
+                          /* @__PURE__ */ jsx(Icon, { name: "RotateCcw", size: 13 }),
+                          t("retry")
+                        ]
+                      }
+                    )
+                  ] })
                 ) : /* @__PURE__ */ jsx("span", { className: "qa-py-4 qa-text-xs qa-text-slate-400", children: t("no_shot") })
               }
             ),
             /* @__PURE__ */ jsx(LocationReveal, { target: selection }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "group",
+                "aria-label": t("severity_label"),
+                className: "qa-flex qa-items-center qa-flex-wrap qa-gap-1.5",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "qa-text-11 qa-text-mid qa-me-1", children: t("severity_label") }),
+                  SEVERITIES2.map((sev) => {
+                    const active = severity === sev;
+                    const toneClass = sev === "bug" ? "qa-bg-danger-tint qa-text-danger" : sev === "question" ? "qa-bg-warn-tint qa-text-warn" : "qa-bg-accent-tint qa-text-accent";
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setSeverity(sev),
+                        "aria-pressed": active,
+                        className: `qa-tap qa-inline-flex qa-items-center qa-gap-1 qa-rounded-full qa-border qa-border-subtle qa-px-2 qa-py-1 qa-text-11 qa-focus-ring ${active ? toneClass : "qa-bg-2 qa-text-mid"}`,
+                        style: { cursor: "pointer" },
+                        children: [
+                          /* @__PURE__ */ jsx(Icon, { name: SEVERITY_ICON[sev], size: 12 }),
+                          t(SEVERITY_LABEL_KEY2[sev])
+                        ]
+                      },
+                      sev
+                    );
+                  })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx(
               "textarea",
               {
@@ -4046,8 +5351,7 @@ function CaptureMode() {
                 },
                 rows: 3,
                 placeholder: t("annotate_placeholder"),
-                className: "qa-w-full qa-resize-y qa-rounded-lg qa-border qa-px-2 qa-py-1.5 qa-text-sm qa-focus-ring",
-                style: { borderColor: `${theme.primary}33`, background: "#fff", color: "inherit" }
+                className: "qa-w-full qa-resize-y qa-rounded-lg qa-border qa-border-subtle qa-bg-0 qa-text-hi qa-px-2 qa-py-1.5 qa-text-sm qa-focus-ring"
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-gap-2", children: [
@@ -4056,8 +5360,8 @@ function CaptureMode() {
                 {
                   onClick: () => void save(),
                   disabled: !description.trim(),
-                  className: "qa-tap qa-flex qa-flex-1 qa-items-center qa-justify-center qa-gap-1.5 qa-rounded-lg qa-px-3 qa-py-2 qa-text-sm qa-font-semibold qa-text-white",
-                  style: { background: theme.accent, border: "none", cursor: "pointer" },
+                  className: "qa-tap qa-flex qa-flex-1 qa-items-center qa-justify-center qa-gap-1.5 qa-rounded-lg qa-px-3 qa-py-2 qa-text-sm qa-font-semibold qa-bg-accent",
+                  style: { border: "none", cursor: "pointer" },
                   children: [
                     /* @__PURE__ */ jsx(Icon, { name: "Check", size: 16 }),
                     t("save_point")
@@ -4072,14 +5376,11 @@ function CaptureMode() {
                     setSelection(null);
                     setShot(null);
                     setDescription("");
+                    setSeverity("bug");
+                    setTargetForensics(void 0);
                   },
-                  className: "qa-tap qa-rounded-lg qa-border qa-px-3 qa-py-2 qa-text-sm",
-                  style: {
-                    borderColor: `${theme.primary}33`,
-                    color: theme.primary,
-                    background: "transparent",
-                    cursor: "pointer"
-                  },
+                  className: "qa-tap qa-rounded-lg qa-border qa-border-subtle qa-px-3 qa-py-2 qa-text-sm qa-text-mid",
+                  style: { background: "transparent", cursor: "pointer" },
                   children: t("reselect")
                 }
               )
@@ -4133,8 +5434,9 @@ function CaptureGate() {
   return captureActive ? /* @__PURE__ */ jsx(CaptureMode, {}) : null;
 }
 function QaRootInner({ config }) {
+  const { isOpen, setIsOpen, testAlong } = useQa();
   const shouldShowInitially = config.alwaysVisible === true || config.visible === true || config.visible === void 0 && !isProduction();
-  const [visible, setVisible] = useState(shouldShowInitially);
+  const [widgetShown, setWidgetShown] = useState(shouldShowInitially);
   useEffect(() => {
     if (typeof document === "undefined") return;
     const hk = parseHotkey(config.hotkey);
@@ -4142,16 +5444,22 @@ function QaRootInner({ config }) {
     const handler = (e) => {
       if (e.key.toLowerCase() === hk.key && !!e.shiftKey === hk.shift && !!e.altKey === hk.alt && !!e.ctrlKey === hk.ctrl && !!e.metaKey === hk.meta) {
         e.preventDefault();
-        setVisible((v) => !v);
+        if (!widgetShown) {
+          setWidgetShown(true);
+          setIsOpen(true);
+        } else {
+          setIsOpen(!isOpen);
+        }
       }
     };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [config.hotkey]);
-  if (!visible) return null;
+  }, [config.hotkey, widgetShown, isOpen, setIsOpen]);
+  if (!widgetShown) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(QaFab, {}),
-    /* @__PURE__ */ jsx(QaPanel, {}),
+    testAlong.active ? /* @__PURE__ */ jsx(TestAlongHud, {}) : /* @__PURE__ */ jsx(QaPanel, {}),
+    /* @__PURE__ */ jsx(NoticeHost, {}),
     /* @__PURE__ */ jsx(CaptureGate, {})
   ] });
 }
@@ -4170,18 +5478,23 @@ function mountQaStudio(config) {
   document.body.appendChild(host);
   const shadow = host.attachShadow({ mode: "open" });
   injectStyles(shadow);
-  applyThemeVars(host, config.theme);
   const root = ReactDOM.createRoot(shadow);
   root.render(React.createElement(QaRoot, { config }));
+  if (config.captureContext !== false) {
+    installContextCapture();
+  }
   return {
     destroy() {
+      if (config.captureContext !== false) {
+        uninstallContextCapture();
+      }
       try {
         root.unmount();
       } catch {
       }
       if (host.parentNode) host.remove();
       if (typeof document !== "undefined") {
-        document.body.querySelectorAll(":scope > [data-qa-overlay]").forEach((el) => el.remove());
+        document.body.querySelectorAll(":scope > [data-qa-overlay]:not(qapture-overlay)").forEach((el) => el.remove());
       }
     }
   };
@@ -4202,11 +5515,13 @@ function initQaStudio(config) {
 function Qapture({ config }) {
   useEffect(() => {
     const instance = initQaStudio(config);
-    return () => instance.destroy();
+    return () => {
+      queueMicrotask(() => instance.destroy());
+    };
   }, []);
   return null;
 }
 
 export { Qapture, deleteQaDatabase, initQaStudio };
-//# sourceMappingURL=chunk-RC7ZUQ5X.js.map
-//# sourceMappingURL=chunk-RC7ZUQ5X.js.map
+//# sourceMappingURL=chunk-2CAMCMJP.js.map
+//# sourceMappingURL=chunk-2CAMCMJP.js.map