@m2farhood-2/qapture 0.2.0

package/dist/chunk-OPZF4IVW.js

@@ -0,0 +1,3823 @@
+import React, { createContext, useEffect, Component, useState, useCallback, useReducer, useContext, useRef, useLayoutEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/index.ts
+
+// 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",
+  loginField: { en: "Username", ar: "\u0627\u0633\u0645 \u0627\u0644\u0645\u0633\u062A\u062E\u062F\u0645" },
+  rtl: false,
+  visible: void 0,
+  alwaysVisible: false,
+  hotkey: "shift+alt+q"
+};
+var VALID_RISKS = /* @__PURE__ */ new Set(["red", "amber", "green"]);
+function isNonEmptyString(v) {
+  return typeof v === "string" && v.trim().length > 0;
+}
+function isValidBilingual(v) {
+  if (typeof v === "string") return true;
+  if (v !== null && typeof v === "object") {
+    const o = v;
+    return typeof o["en"] === "string";
+  }
+  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 = [];
+  for (let i = 0; i < raw.length; i++) {
+    const c = raw[i];
+    if (!c || typeof c !== "object") {
+      warnings.push(`credentials[${i}]: not an object \u2014 skipped`);
+      continue;
+    }
+    if (!isNonEmptyString(c["role"])) {
+      warnings.push(`credentials[${i}]: missing or empty "role" \u2014 skipped`);
+      continue;
+    }
+    if (!isNonEmptyString(c["login"])) {
+      warnings.push(`credentials[${i}] (role="${String(c["role"])}"): missing or empty "login" \u2014 skipped`);
+      continue;
+    }
+    const cred = {
+      role: c["role"].trim(),
+      login: c["login"].trim(),
+      password: isNonEmptyString(c["password"]) ? c["password"].trim() : ""
+    };
+    if (isNonEmptyString(c["roleAr"])) cred.roleAr = c["roleAr"].trim();
+    if (typeof c["seeded"] === "boolean") cred.seeded = c["seeded"];
+    if (c["hint"] !== null && c["hint"] !== void 0 && typeof c["hint"] === "object") {
+      const h = c["hint"];
+      if (typeof h["en"] === "string") {
+        cred.hint = { en: h["en"] };
+        if (typeof h["ar"] === "string") cred.hint.ar = h["ar"];
+      }
+    }
+    out.push(cred);
+  }
+  return out;
+}
+function coerceJourney(raw, warnings) {
+  if (!Array.isArray(raw)) return [];
+  const out = [];
+  for (let i = 0; i < raw.length; i++) {
+    const lane = raw[i];
+    if (!lane || typeof lane !== "object") {
+      warnings.push(`journey[${i}]: not an object \u2014 skipped`);
+      continue;
+    }
+    if (!isNonEmptyString(lane["id"])) {
+      warnings.push(`journey[${i}]: missing or empty "id" \u2014 skipped`);
+      continue;
+    }
+    if (!isValidBilingual(lane["role"])) {
+      warnings.push(`journey[${i}] (id="${String(lane["id"])}"): invalid "role" \u2014 skipped`);
+      continue;
+    }
+    if (!Array.isArray(lane["steps"])) {
+      warnings.push(`journey[${i}] (id="${String(lane["id"])}"): "steps" is not an array \u2014 lane skipped`);
+      continue;
+    }
+    const steps = [];
+    const rawSteps = lane["steps"];
+    for (let j = 0; j < rawSteps.length; j++) {
+      const s = rawSteps[j];
+      if (!s || typeof s !== "object") {
+        warnings.push(`journey[${i}].steps[${j}]: not an object \u2014 skipped`);
+        continue;
+      }
+      if (!isNonEmptyString(s["path"])) {
+        warnings.push(`journey[${i}].steps[${j}]: missing or empty "path" \u2014 skipped`);
+        continue;
+      }
+      if (!isValidBilingual(s["what"])) {
+        warnings.push(`journey[${i}].steps[${j}] (path="${String(s["path"])}"): invalid "what" \u2014 skipped`);
+        continue;
+      }
+      const step = {
+        path: s["path"].trim(),
+        what: s["what"]
+      };
+      if (s["risk"] !== void 0) {
+        if (VALID_RISKS.has(s["risk"])) {
+          step.risk = s["risk"];
+        } else {
+          warnings.push(`journey[${i}].steps[${j}]: invalid risk "${String(s["risk"])}" \u2014 ignored`);
+        }
+      }
+      if (isNonEmptyString(s["riskWhy"])) step.riskWhy = s["riskWhy"];
+      steps.push(step);
+    }
+    const resolved = {
+      id: lane["id"].trim(),
+      role: lane["role"],
+      steps
+    };
+    if (isNonEmptyString(lane["color"])) resolved.color = lane["color"].trim();
+    out.push(resolved);
+  }
+  return out;
+}
+function coercePreamble(raw) {
+  if (raw === null || raw === void 0) return null;
+  if (typeof raw !== "object" || Array.isArray(raw)) return null;
+  return raw;
+}
+function validateConfig(input) {
+  const warnings = [];
+  if (input === void 0 || input === null) {
+    return {
+      config: {
+        namespace: DEFAULTS.namespace,
+        theme: { ...DEFAULT_THEME },
+        brand: { label: DEFAULTS.brandLabel },
+        loginField: { ...DEFAULTS.loginField },
+        credentials: [],
+        journey: [],
+        preamble: null,
+        rtl: DEFAULTS.rtl,
+        visible: DEFAULTS.visible,
+        alwaysVisible: DEFAULTS.alwaysVisible,
+        hotkey: DEFAULTS.hotkey
+      },
+      warnings
+    };
+  }
+  if (typeof input !== "object" || Array.isArray(input)) {
+    warnings.push("config: expected an object \u2014 using defaults");
+    return {
+      config: {
+        namespace: DEFAULTS.namespace,
+        theme: { ...DEFAULT_THEME },
+        brand: { label: DEFAULTS.brandLabel },
+        loginField: { ...DEFAULTS.loginField },
+        credentials: [],
+        journey: [],
+        preamble: null,
+        rtl: DEFAULTS.rtl,
+        visible: DEFAULTS.visible,
+        alwaysVisible: DEFAULTS.alwaysVisible,
+        hotkey: DEFAULTS.hotkey
+      },
+      warnings
+    };
+  }
+  const raw = input;
+  const namespace = isNonEmptyString(raw["namespace"]) ? raw["namespace"].trim() : DEFAULTS.namespace;
+  const theme = coerceTheme(raw["theme"]);
+  let brandLabel = DEFAULTS.brandLabel;
+  if (raw["brand"] !== void 0 && raw["brand"] !== null && typeof raw["brand"] === "object") {
+    const b = raw["brand"];
+    if (isNonEmptyString(b["label"])) brandLabel = b["label"].trim();
+  }
+  let loginField = { ...DEFAULTS.loginField };
+  if (raw["loginField"] !== void 0 && typeof raw["loginField"] === "object" && raw["loginField"] !== null) {
+    const lf = raw["loginField"];
+    if (typeof lf["en"] === "string") {
+      loginField = { en: lf["en"] };
+      if (typeof lf["ar"] === "string") loginField.ar = lf["ar"];
+    } else {
+      warnings.push('loginField: missing "en" key \u2014 using default');
+    }
+  }
+  const credentials = raw["credentials"] !== void 0 ? coerceCredentials(raw["credentials"], warnings) : [];
+  const journey = raw["journey"] !== void 0 ? coerceJourney(raw["journey"], warnings) : [];
+  const preamble = raw["preamble"] !== void 0 ? coercePreamble(raw["preamble"]) : null;
+  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;
+  let visible = DEFAULTS.visible;
+  if (raw["visible"] !== void 0) {
+    if (typeof raw["visible"] === "boolean") {
+      visible = raw["visible"];
+    } else {
+      warnings.push("visible: expected boolean \u2014 using default (dev-only)");
+    }
+  }
+  return {
+    config: {
+      namespace,
+      theme,
+      brand: { label: brandLabel },
+      loginField,
+      credentials,
+      journey,
+      preamble,
+      rtl,
+      visible,
+      alwaysVisible,
+      hotkey
+    },
+    warnings
+  };
+}
+
+// src/lib/styles.ts
+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 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; }
+.qa-relative { position: relative; }
+.qa-sticky   { position: sticky; }
+.qa-inset-0  { inset: 0; }
+.qa-top-0    { top: 0; }
+.qa-top-4    { top: 1rem; }
+.qa-top-auto { top: auto; }
+.qa-bottom-0 { bottom: 0; }
+.qa-bottom-4 { bottom: 1rem; }
+.qa-left-0   { left: 0; }
+.qa-left-half { left: 50%; }
+.qa-right-0  { right: 0; }
+
+/* z-index */
+.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; }
+/* 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; }
+
+/* \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; }
+.qa-inline-flex   { display: inline-flex; }
+.qa-block         { display: block; }
+.qa-inline-block  { display: inline-block; }
+.qa-hidden        { display: none; }
+.qa-flex-1        { flex: 1 1 0%; }
+.qa-flex-col      { flex-direction: column; }
+.qa-flex-wrap     { flex-wrap: wrap; }
+.qa-items-center  { align-items: center; }
+.qa-items-start   { align-items: flex-start; }
+.qa-items-end     { align-items: flex-end; }
+.qa-justify-center  { justify-content: center; }
+.qa-justify-between { justify-content: space-between; }
+.qa-justify-start   { justify-content: flex-start; }
+.qa-justify-end     { justify-content: flex-end; }
+.qa-shrink-0  { flex-shrink: 0; }
+.qa-grow      { flex-grow: 1; }
+.qa-ms-auto   { margin-inline-start: auto; }
+.qa-me-auto   { margin-inline-end: auto; }
+
+/* gap */
+.qa-gap-1    { gap: 0.25rem; }
+.qa-gap-1\\.5  { gap: 0.375rem; }
+.qa-gap-2    { gap: 0.5rem; }
+.qa-gap-2\\.5  { gap: 0.625rem; }
+.qa-gap-3    { gap: 0.75rem; }
+.qa-gap-x-3  { column-gap: 0.75rem; }
+.qa-gap-y-1  { row-gap: 0.25rem; }
+
+/* space-y (margin-top on siblings) */
+.qa-space-y-1   > * + * { margin-top: 0.25rem; }
+.qa-space-y-2   > * + * { margin-top: 0.5rem; }
+.qa-space-y-2\\.5 > * + * { margin-top: 0.625rem; }
+.qa-space-y-3   > * + * { margin-top: 0.75rem; }
+
+/* \u2500\u2500 Size \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-w-full  { width: 100%; }
+.qa-h-full  { height: 100%; }
+.qa-w-px    { width: 1px; }
+.qa-h-px    { height: 1px; }
+.qa-w-2     { width: 0.5rem; }
+.qa-h-2     { height: 0.5rem; }
+.qa-w-2\\.5   { width: 0.625rem; }
+.qa-h-2\\.5   { height: 0.625rem; }
+.qa-w-3     { width: 0.75rem; }
+.qa-h-3     { height: 0.75rem; }
+.qa-w-3\\.5   { width: 0.875rem; }
+.qa-h-3\\.5   { height: 0.875rem; }
+.qa-w-4     { width: 1rem; }
+.qa-h-4     { height: 1rem; }
+.qa-w-5     { width: 1.25rem; }
+.qa-h-5     { height: 1.25rem; }
+.qa-w-6     { width: 1.5rem; }
+.qa-h-6     { height: 1.5rem; }
+.qa-h-1     { height: 0.25rem; }
+.qa-h-1\\.5   { height: 0.375rem; }
+.qa-min-w-0 { min-width: 0; }
+.qa-min-h-0 { min-height: 0; }
+.qa-max-w-xs  { max-width: 16rem; }   /* 256px */
+.qa-max-w-sm  { max-width: 20rem; }   /* 320px */
+.qa-max-w-md  { max-width: 24rem; }   /* 384px */
+.qa-max-h-28  { max-height: 7rem; }   /* 112px */
+.qa-max-h-32  { max-height: 8rem; }   /* 128px */
+.qa-min-h-16  { min-height: 4rem; }   /* 64px */
+.qa-overflow-hidden   { overflow: hidden; }
+.qa-overflow-y-auto   { overflow-y: auto; }
+.qa-overflow-x-hidden { overflow-x: hidden; }
+.qa-resize-y          { resize: vertical; }
+
+/* \u2500\u2500 Spacing \u2014 padding \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-p-0    { padding: 0; }
+.qa-p-1    { padding: 0.25rem; }
+.qa-p-2    { padding: 0.5rem; }
+.qa-p-2\\.5  { padding: 0.625rem; }
+.qa-p-3    { padding: 0.75rem; }
+.qa-p-4    { padding: 1rem; }
+.qa-px-1   { padding-inline: 0.25rem; }
+.qa-px-1\\.5 { padding-inline: 0.375rem; }
+.qa-px-2   { padding-inline: 0.5rem; }
+.qa-px-3   { padding-inline: 0.75rem; }
+.qa-px-4   { padding-inline: 1rem; }
+.qa-py-0\\.5 { padding-block: 0.125rem; }
+.qa-py-1   { padding-block: 0.25rem; }
+.qa-py-1\\.5 { padding-block: 0.375rem; }
+.qa-py-2   { padding-block: 0.5rem; }
+.qa-py-4   { padding-block: 1rem; }
+.qa-py-8   { padding-block: 2rem; }
+.qa-ps-6   { padding-inline-start: 1.5rem; }
+.qa-pe-2   { padding-inline-end: 0.5rem; }
+
+/* \u2500\u2500 Spacing \u2014 margin \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-m-0      { margin: 0; }
+.qa-mb-1     { margin-bottom: 0.25rem; }
+.qa-mb-2     { margin-bottom: 0.5rem; }
+.qa-mb-3     { margin-bottom: 0.75rem; }
+.qa-mt-1     { margin-top: 0.25rem; }
+.qa-mt-1\\.5   { margin-top: 0.375rem; }
+.qa-mt-2     { margin-top: 0.5rem; }
+.qa-ms-1     { margin-inline-start: 0.25rem; }
+.qa-ms-1\\.5   { margin-inline-start: 0.375rem; }
+.qa-ms-auto  { margin-inline-start: auto; }
+.qa-me-1     { margin-inline-end: 0.25rem; }
+
+/* \u2500\u2500 Border \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-border         { border-width: 1px; border-style: solid; }
+.qa-border-2       { border-width: 2px; border-style: solid; }
+.qa-border-0       { border: none; }
+.qa-border-dashed  { border-style: dashed; }
+.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); }
+
+/* \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; }
+.qa-rounded-md   { border-radius: 0.375rem; }
+.qa-rounded-lg   { border-radius: 0.5rem; }
+.qa-rounded-xl   { border-radius: 0.75rem; }
+.qa-rounded-full { border-radius: 9999px; }
+
+/* \u2500\u2500 Shadows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-shadow-sm  { box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1); }
+.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); }
+
+/* \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; }
+.qa-text-xs   { font-size: 0.75rem;  line-height: 1rem; }
+.qa-text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
+.qa-text-base { font-size: 1rem;     line-height: 1.5rem; }
+.qa-font-normal   { font-weight: 400; }
+.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-leading-relaxed { line-height: 1.625; }
+.qa-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.qa-whitespace-pre-wrap { white-space: pre-wrap; }
+.qa-break-words { overflow-wrap: break-word; word-break: break-word; }
+.qa-text-start  { text-align: start; }
+.qa-text-center { text-align: center; }
+.qa-text-end    { text-align: end; }
+.qa-select-all  { user-select: all; }
+
+/* \u2500\u2500 Touch density tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+:host { --qa-tap: 0px; }
+@media (pointer: coarse) {
+  :host { --qa-tap: 44px; }
+  .qa-text-10 { font-size: 11px; }
+  .qa-text-11 { font-size: 12px; }
+}
+.qa-tap      { min-height: var(--qa-tap); }
+.qa-tap-icon { min-width: var(--qa-tap); min-height: var(--qa-tap); display: inline-flex; align-items: center; justify-content: center; }
+
+/* \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; }
+
+/* \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); }
+.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); }
+
+/* \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; }
+.qa-opacity-30  { opacity: 0.30; }
+.qa-opacity-40  { opacity: 0.40; }
+.qa-opacity-50  { opacity: 0.50; }
+.qa-opacity-55  { opacity: 0.55; }
+.qa-opacity-80  { opacity: 0.80; }
+.qa-opacity-100 { opacity: 1; }
+
+/* \u2500\u2500 Interactions / State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-cursor-crosshair    { cursor: crosshair; }
+.qa-cursor-default      { cursor: default; }
+.qa-cursor-pointer      { cursor: pointer; }
+.qa-pointer-events-none { pointer-events: none; }
+.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);
+  outline-offset: 2px;
+}
+
+button:disabled,
+input:disabled,
+.qa-disabled {
+  opacity: 0.40;
+  pointer-events: none;
+}
+
+/* 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-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; }
+
+/* Group-hover (child uses .qa-group-hover-opacity-80 inside a .qa-group parent) */
+.qa-group .qa-group-hover-opacity-80 { opacity: 0.40; }
+.qa-group:hover .qa-group-hover-opacity-80 { opacity: 0.80; }
+
+/* last-child margin reset */
+.qa-last-mb-0:last-child { margin-bottom: 0; }
+
+/* \u2500\u2500 Transitions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-transition     { transition-property: color,background-color,border-color,opacity,box-shadow,transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }
+.qa-transition-all { transition: all 150ms cubic-bezier(0.4,0,0.2,1); }
+
+/* \u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@keyframes qaSpin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes qaPulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.5; box-shadow: 0 0 0 8px transparent; }
+}
+
+.qa-animate-spin {
+  animation: qaSpin 1s linear infinite;
+}
+
+.qa-animate-pulse-accent {
+  animation: qaPulse 2s ease-in-out infinite;
+  color: var(--qa-accent, #7c3aed);
+}
+
+/* \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 */
+@media print {
+  .qa-print-hidden { display: none !important; }
+}
+
+/* \u2500\u2500 Transform \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-translate-x-neg-half  { transform: translateX(-50%); }
+.qa-translate-y-neg-full  { transform: translateY(-100%); }
+
+/* \u2500\u2500 Misc \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-w-320  { width: 320px; }
+.qa-dir-ltr { direction: ltr; }
+
+/* \u2500\u2500 Panel size \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-w-panel    { width: min(93vw, 420px); }
+.qa-max-h-74vh { max-height: 74vh; max-height: min(74vh, 74dvh); }
+
+/* \u2500\u2500 Extra 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 */
+.qa-rounded-2xl { border-radius: 1rem; }
+
+/* \u2500\u2500 Extra padding (top / bottom) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-pt-1  { padding-top: 0.25rem; }
+.qa-pt-2  { padding-top: 0.5rem; }
+.qa-pt-3  { padding-top: 0.75rem; }
+.qa-pb-1  { padding-bottom: 0.25rem; }
+.qa-pb-2  { padding-bottom: 0.5rem; }
+.qa-pb-3  { padding-bottom: 0.75rem; }
+
+/* \u2500\u2500 Extra margin-top \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-mt-0\\.5 { margin-top: 0.125rem; }
+
+/* \u2500\u2500 Panel slide-in / slide-out animation \u2500\u2500\u2500\u2500\u2500\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-panel-anim {
+  opacity: 0;
+  transform: translateY(16px) scale(0.98);
+  transition: opacity 200ms cubic-bezier(0.4,0,0.2,1),
+              transform 200ms cubic-bezier(0.4,0,0.2,1);
+}
+.qa-panel-anim.qa-panel-in {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+/* \u2500\u2500 Capture-card fade-in animation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-card-anim {
+  opacity: 0;
+  transform: scale(0.96);
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+.qa-card-anim.qa-card-in {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* \u2500\u2500 FAB button interactions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-fab-btn {
+  transition: transform 150ms cubic-bezier(0.4,0,0.2,1),
+              box-shadow 150ms cubic-bezier(0.4,0,0.2,1);
+  cursor: pointer;
+  border: none;
+}
+.qa-fab-btn:hover  { transform: scale(1.06); }
+.qa-fab-btn:active { transform: scale(0.94); }
+.qa-fab-btn:focus-visible {
+  outline: 3px solid rgba(255,255,255,0.6);
+  outline-offset: 2px;
+}
+
+/* \u2500\u2500 Tab indicator bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-tab-indicator {
+  position: absolute;
+  bottom: -1px;
+  height: 2px;
+  border-radius: 9999px;
+  transition: left 200ms cubic-bezier(0.4,0,0.2,1),
+              width 200ms cubic-bezier(0.4,0,0.2,1);
+  pointer-events: none;
+}
+
+/* \u2500\u2500 brightness hover (capture / note buttons) \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-hover-brightness-105:hover { filter: brightness(1.05); }
+
+/* \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; }
+`;
+function injectStyles(root) {
+  if (typeof CSSStyleSheet !== "undefined" && "adoptedStyleSheets" in Document.prototype) {
+    try {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(QA_CSS);
+      root.adoptedStyleSheets = [sheet];
+      return;
+    } catch {
+    }
+  }
+  const style = document.createElement("style");
+  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/storage.ts
+function isStorageAvailable() {
+  if (typeof window === "undefined") return false;
+  try {
+    const probe = "__qa_probe__";
+    window.localStorage.setItem(probe, "1");
+    window.localStorage.removeItem(probe);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function createStorage(namespace) {
+  const prefix = `${namespace}:`;
+  const fallback = /* @__PURE__ */ new Map();
+  const available = isStorageAvailable();
+  function fullKey(key) {
+    return `${prefix}${key}`;
+  }
+  function getItem(key) {
+    if (available) {
+      try {
+        return window.localStorage.getItem(fullKey(key));
+      } catch {
+      }
+    }
+    return fallback.get(fullKey(key)) ?? null;
+  }
+  function setItem(key, value) {
+    if (available) {
+      try {
+        window.localStorage.setItem(fullKey(key), value);
+        return;
+      } catch {
+      }
+    }
+    fallback.set(fullKey(key), value);
+  }
+  function getJSON(key, fb) {
+    const raw = getItem(key);
+    if (raw === null) return fb;
+    try {
+      return JSON.parse(raw);
+    } catch {
+      return fb;
+    }
+  }
+  function setJSON(key, value) {
+    try {
+      setItem(key, JSON.stringify(value));
+    } catch {
+    }
+  }
+  return { getItem, setItem, getJSON, setJSON };
+}
+
+// src/lib/idb.ts
+var DB_VERSION = 2;
+var NOTES_STORE = "notes";
+var META_STORE = "meta";
+var dbCache = /* @__PURE__ */ new Map();
+function isIdbAvailable() {
+  return typeof indexedDB !== "undefined";
+}
+function openDB(dbName) {
+  const cached = dbCache.get(dbName);
+  if (cached) return cached;
+  const promise = new Promise((resolve, reject) => {
+    let req;
+    try {
+      req = indexedDB.open(dbName, DB_VERSION);
+    } catch (err) {
+      dbCache.delete(dbName);
+      reject(err);
+      return;
+    }
+    req.onupgradeneeded = (e) => {
+      const db = e.target.result;
+      const oldVersion = e.oldVersion;
+      switch (true) {
+        case oldVersion < 1:
+          if (!db.objectStoreNames.contains(NOTES_STORE)) {
+            db.createObjectStore(NOTES_STORE, { keyPath: "id" });
+          }
+        // falls through
+        case oldVersion < 2:
+          if (!db.objectStoreNames.contains(META_STORE)) {
+            db.createObjectStore(META_STORE, { keyPath: "key" });
+          }
+          break;
+      }
+    };
+    req.onsuccess = (e) => resolve(e.target.result);
+    req.onerror = (e) => {
+      dbCache.delete(dbName);
+      reject(e.target.error);
+    };
+  });
+  dbCache.set(dbName, promise);
+  return promise;
+}
+function run(dbName, store, mode, fn) {
+  return openDB(dbName).then(
+    (db) => new Promise((resolve, reject) => {
+      const tx = db.transaction(store, mode);
+      const s = tx.objectStore(store);
+      let result;
+      const req = fn(s);
+      if (req) {
+        req.onsuccess = () => {
+          result = req.result;
+        };
+      }
+      tx.oncomplete = () => resolve(result);
+      tx.onerror = () => reject(tx.error);
+      tx.onabort = () => reject(tx.error);
+    })
+  );
+}
+function createIdb(namespace) {
+  const dbName = `${namespace}-db`;
+  if (!isIdbAvailable()) {
+    return {
+      getAll: () => Promise.resolve([]),
+      put: () => Promise.resolve(),
+      delete: () => Promise.resolve(),
+      clear: () => Promise.resolve()
+    };
+  }
+  return {
+    getAll: async () => {
+      try {
+        const rows = await run(dbName, NOTES_STORE, "readonly", (s) => s.getAll());
+        return rows ?? [];
+      } catch {
+        return [];
+      }
+    },
+    put: async (record) => {
+      try {
+        await run(dbName, NOTES_STORE, "readwrite", (s) => s.put(record));
+      } catch {
+      }
+    },
+    delete: async (id) => {
+      try {
+        await run(dbName, NOTES_STORE, "readwrite", (s) => s.delete(id));
+      } catch {
+      }
+    },
+    clear: async () => {
+      try {
+        await run(dbName, NOTES_STORE, "readwrite", (s) => s.clear());
+      } catch {
+      }
+    }
+  };
+}
+
+// src/lib/strings.ts
+var STR = {
+  en: {
+    tab_notes: "Notes",
+    tab_logins: "Logins",
+    tab_guide: "Guide",
+    export: "Export",
+    delete_all_q: "Delete all {n}?",
+    yes: "Yes",
+    no: "No",
+    clear_all: "Clear all points",
+    capture_cta: "Capture from page",
+    quick_note: "quick note (no selection)",
+    desc_placeholder: "Describe the change / bug / idea\u2026",
+    image_hint: "paste, drag, or click to add an image",
+    add_point: "Add point",
+    cancel: "Cancel",
+    save: "Save",
+    edit: "Edit",
+    remove_image: "Remove image",
+    add_image: "Add image",
+    no_points: "No points yet.",
+    no_points_hint: 'Hit "{cta}" to start.',
+    kind_note: "note",
+    kind_element: "element",
+    kind_region: "region",
+    cap_click: "Click an element",
+    cap_drag: "Drag to draw a region",
+    sel_region: "Region selected",
+    sel_element: "Element selected",
+    capturing: "capturing screenshot\u2026",
+    no_shot: "no screenshot (location saved)",
+    annotate_placeholder: "What do you want to do here? (add / remove / change\u2026)",
+    save_point: "Save point",
+    reselect: "Reselect",
+    save_hint: "\u2318/Ctrl + Enter to save",
+    login_with: "Log in with {field} + password.",
+    used_count: "{n}/{m} used",
+    used: "used",
+    loc_captured: "Place captured",
+    loc_show: "Show captured location",
+    loc_hide: "Hide location",
+    loc_locate: "Locate on page",
+    journey_title: "Testing journey",
+    export_name_title: "Name your export",
+    export_name_placeholder: "file name",
+    tap_element: "Tap an element",
+    draw_region: "Draw region",
+    use_this: "Use this",
+    adjust: "Adjust",
+    resize: "Resize",
+    confirm_region: "Confirm region"
+  },
+  ar: {
+    tab_notes: "\u0627\u0644\u0645\u0644\u0627\u062D\u0638\u0627\u062A",
+    tab_logins: "\u0627\u0644\u062F\u062E\u0648\u0644",
+    tab_guide: "\u0627\u0644\u062F\u0644\u064A\u0644",
+    export: "\u062A\u0635\u062F\u064A\u0631",
+    delete_all_q: "\u062D\u0630\u0641 \u0643\u0644 {n}\u061F",
+    yes: "\u0646\u0639\u0645",
+    no: "\u0644\u0627",
+    clear_all: "\u0645\u0633\u062D \u0643\u0644 \u0627\u0644\u0646\u0642\u0627\u0637",
+    capture_cta: "\u0627\u0644\u062A\u0642\u0627\u0637 \u0645\u0646 \u0627\u0644\u0635\u0641\u062D\u0629",
+    quick_note: "\u0645\u0644\u0627\u062D\u0638\u0629 \u0633\u0631\u064A\u0639\u0629 (\u0628\u062F\u0648\u0646 \u062A\u062D\u062F\u064A\u062F)",
+    desc_placeholder: "\u0635\u0650\u0641 \u0627\u0644\u062A\u063A\u064A\u064A\u0631 / \u0627\u0644\u062E\u0644\u0644 / \u0627\u0644\u0641\u0643\u0631\u0629\u2026",
+    image_hint: "\u0627\u0644\u0635\u0642 \u0623\u0648 \u0627\u0633\u062D\u0628 \u0623\u0648 \u0627\u0646\u0642\u0631 \u0644\u0625\u0636\u0627\u0641\u0629 \u0635\u0648\u0631\u0629",
+    add_point: "\u0625\u0636\u0627\u0641\u0629 \u0646\u0642\u0637\u0629",
+    cancel: "\u0625\u0644\u063A\u0627\u0621",
+    save: "\u062D\u0641\u0638",
+    edit: "\u062A\u0639\u062F\u064A\u0644",
+    remove_image: "\u062D\u0630\u0641 \u0627\u0644\u0635\u0648\u0631\u0629",
+    add_image: "\u0625\u0636\u0627\u0641\u0629 \u0635\u0648\u0631\u0629",
+    no_points: "\u0644\u0627 \u062A\u0648\u062C\u062F \u0646\u0642\u0627\u0637 \u0628\u0639\u062F.",
+    no_points_hint: "\u0627\u0636\u063A\u0637 \xAB{cta}\xBB \u0644\u0644\u0628\u062F\u0621.",
+    kind_note: "\u0645\u0644\u0627\u062D\u0638\u0629",
+    kind_element: "\u0639\u0646\u0635\u0631",
+    kind_region: "\u0645\u0646\u0637\u0642\u0629",
+    cap_click: "\u0627\u0646\u0642\u0631 \u0639\u0644\u0649 \u0639\u0646\u0635\u0631",
+    cap_drag: "\u0627\u0633\u062D\u0628 \u0644\u0631\u0633\u0645 \u0645\u0646\u0637\u0642\u0629",
+    sel_region: "\u062A\u0645 \u062A\u062D\u062F\u064A\u062F \u0645\u0646\u0637\u0642\u0629",
+    sel_element: "\u062A\u0645 \u062A\u062D\u062F\u064A\u062F \u0639\u0646\u0635\u0631",
+    capturing: "\u064A\u062A\u0645 \u0627\u0644\u062A\u0642\u0627\u0637 \u0627\u0644\u0635\u0648\u0631\u0629\u2026",
+    no_shot: "\u0628\u062F\u0648\u0646 \u0635\u0648\u0631\u0629 (\u062A\u0645 \u062D\u0641\u0638 \u0627\u0644\u0645\u0648\u0642\u0639)",
+    annotate_placeholder: "\u0645\u0627\u0630\u0627 \u062A\u0631\u064A\u062F \u0623\u0646 \u062A\u0641\u0639\u0644 \u0647\u0646\u0627\u061F (\u0625\u0636\u0627\u0641\u0629 / \u062D\u0630\u0641 / \u062A\u063A\u064A\u064A\u0631\u2026)",
+    save_point: "\u062D\u0641\u0638 \u0627\u0644\u0646\u0642\u0637\u0629",
+    reselect: "\u0625\u0639\u0627\u062F\u0629 \u0627\u0644\u062A\u062D\u062F\u064A\u062F",
+    save_hint: "\u2318/Ctrl + Enter \u0644\u0644\u062D\u0641\u0638",
+    login_with: "\u0633\u062C\u0651\u0644 \u0627\u0644\u062F\u062E\u0648\u0644 \u0628\u0640 {field} + \u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631.",
+    used_count: "{n}/{m} \u0645\u064F\u0633\u062A\u062E\u062F\u064E\u0645",
+    used: "\u0645\u064F\u0633\u062A\u062E\u062F\u064E\u0645",
+    loc_captured: "\u062A\u0645 \u0627\u0644\u062A\u0642\u0627\u0637 \u0627\u0644\u0645\u0648\u0642\u0639",
+    loc_show: "\u0625\u0638\u0647\u0627\u0631 \u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0645\u064F\u0644\u062A\u0642\u064E\u0637",
+    loc_hide: "\u0625\u062E\u0641\u0627\u0621 \u0627\u0644\u0645\u0648\u0642\u0639",
+    loc_locate: "\u0625\u0638\u0647\u0627\u0631 \u0639\u0644\u0649 \u0627\u0644\u0635\u0641\u062D\u0629",
+    journey_title: "\u0631\u062D\u0644\u0629 \u0627\u0644\u0627\u062E\u062A\u0628\u0627\u0631",
+    export_name_title: "\u0633\u0645\u0650\u0651 \u0645\u0644\u0641 \u0627\u0644\u062A\u0635\u062F\u064A\u0631",
+    export_name_placeholder: "\u0627\u0633\u0645 \u0627\u0644\u0645\u0644\u0641",
+    tap_element: "\u0627\u0646\u0642\u0631 \u0639\u0644\u0649 \u0639\u0646\u0635\u0631",
+    draw_region: "\u0627\u0631\u0633\u0645 \u0645\u0646\u0637\u0642\u0629",
+    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"
+  }
+};
+function translate(lang, key, vars) {
+  const map = STR[lang] ?? STR.en;
+  const s = map[key] ?? STR.en[key] ?? key;
+  if (!vars) return s;
+  return s.replace(
+    /\{(\w+)\}/g,
+    (_, k) => vars[k] != null ? String(vars[k]) : `{${k}}`
+  );
+}
+function pick(value, lang) {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  return value[lang] ?? value.en ?? "";
+}
+
+// src/lib/coverage.ts
+var RISK_COLORS = {
+  red: "#EF4444",
+  amber: "#F59E0B",
+  green: "#22C55E",
+  none: "#CBD5E1"
+};
+function computeCoverage(journey, guideChecked) {
+  const red = { total: 0, covered: 0 };
+  const amber = { total: 0, covered: 0 };
+  const green = { total: 0, covered: 0 };
+  const uncoveredReds = [];
+  const coveredReds = [];
+  for (const lane of journey) {
+    const laneLabel = typeof lane.role === "string" ? lane.role : lane.role.en;
+    for (const step of lane.steps) {
+      const key = `${lane.id}::${step.path}`;
+      const covered = guideChecked.has(key);
+      const risk = step.risk ?? "green";
+      if (risk === "red") {
+        red.total++;
+        if (covered) {
+          red.covered++;
+          coveredReds.push({ lane: laneLabel, path: step.path });
+        } else {
+          uncoveredReds.push({
+            lane: laneLabel,
+            path: step.path,
+            riskWhy: step.riskWhy
+          });
+        }
+      } else if (risk === "amber") {
+        amber.total++;
+        if (covered) amber.covered++;
+      } else {
+        green.total++;
+        if (covered) green.covered++;
+      }
+    }
+  }
+  const totalTotal = red.total + amber.total + green.total;
+  const totalCovered = red.covered + amber.covered + green.covered;
+  const redScore = red.total === 0 ? 1 : red.covered / red.total;
+  let tier;
+  if (redScore >= 1) {
+    tier = "Complete";
+  } else if (redScore >= 0.8) {
+    tier = "Full";
+  } else if (redScore >= 0.5) {
+    tier = "Adequate";
+  } else {
+    tier = "Minimal";
+  }
+  return {
+    red,
+    amber,
+    green,
+    total: { total: totalTotal, covered: totalCovered },
+    redScore,
+    tier,
+    uncoveredReds,
+    coveredReds
+  };
+}
+
+// src/lib/exportZip.ts
+function fmtTarget(t) {
+  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}`
+    );
+  }
+  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 (note.screenshot) lines.push(`- **Screenshot:** screenshots/point-${num}.png`);
+  lines.push("", note.description || "(no description)", "", "---", "");
+  return lines.join("\n");
+}
+function safeName(name, stamp) {
+  const fallback = `qa-notes-${stamp.slice(0, 10)}`;
+  let base = (name ?? "").trim().replace(/\.zip$/i, "");
+  base = base.replace(/[\\/:*?"<>|]+/g, "-").replace(/\s+/g, " ").slice(0, 80).trim();
+  return `${base || fallback}.zip`;
+}
+function toStrings(val) {
+  if (val == null) return [];
+  if (Array.isArray(val)) return val.filter((l) => String(l).trim().length > 0);
+  return val.split("\n").filter((l) => l.trim().length > 0);
+}
+function mdTable(headers, rows) {
+  const sep = headers.map(() => "---");
+  const lines = [
+    `| ${headers.join(" | ")} |`,
+    `| ${sep.join(" | ")} |`,
+    ...rows.map((r) => `| ${r.map((c) => c.replace(/\|/g, "\\|")).join(" | ")} |`)
+  ];
+  return lines.join("\n");
+}
+function fmtPct(n, d) {
+  if (d === 0) return "N/A";
+  return `${Math.round(n / d * 100)}%`;
+}
+function buildPreamble(config, guideChecked, stamp, noteCount) {
+  const sections = [];
+  const p = config.preamble ?? {};
+  const brandLabel = config.brand?.label ?? "Qapture";
+  const projectName = typeof p.projectName === "string" && p.projectName.trim() ? p.projectName.trim() : brandLabel;
+  const loginLabel = config.loginField?.en ?? "Login";
+  const journey = config.journey ?? [];
+  sections.push(
+    "<!-- Qapture Export Preamble \u2014 read before acting on any point. NO AI is bundled in Qapture \u2014 YOU are the AI reading this. -->"
+  );
+  const oneLiner = typeof p.oneLiner === "string" && p.oneLiner.trim() ? `
+> ${p.oneLiner.trim()}` : "";
+  sections.push(
+    `# ${projectName} \u2014 QA Handoff${oneLiner}
+
+Exported: ${stamp}  
+Points: ${noteCount}`
+  );
+  const stack = typeof p.stack === "string" && p.stack.trim() ? p.stack.trim() : "(not provided)";
+  const runArr = toStrings(p.runCommands);
+  const runValue = runArr.length > 0 ? runArr.map((c) => `\`${c}\``).join(", ") : "(not provided)";
+  sections.push(
+    `## Project
+
+${mdTable(
+      ["Field", "Value"],
+      [
+        ["Name", projectName],
+        ["Stack", stack],
+        ["Run commands", runValue]
+      ]
+    )}`
+  );
+  if (config.theme) {
+    const tokenRows = Object.entries(config.theme).map(
+      ([k, v]) => [k, typeof v === "string" ? v : String(v)]
+    );
+    sections.push(
+      `## Theme Tokens
+
+${mdTable(["Token", "Hex"], tokenRows)}`
+    );
+  } else {
+    sections.push("## Theme Tokens\n\n(not provided)");
+  }
+  const conventions = toStrings(p.conventions);
+  if (conventions.length > 0) {
+    const list = conventions.map((c, i) => `${i + 1}. ${c}`).join("\n");
+    sections.push(`## Conventions
+
+${list}`);
+  } else {
+    sections.push("## Conventions\n\n(not provided)");
+  }
+  const creds = config.credentials ?? [];
+  let credBlock;
+  if (creds.length > 0) {
+    const credRows = creds.map((c) => [
+      c.role,
+      c.login,
+      c.password || "(none)",
+      c.seeded ? "seeded" : "manual",
+      c.hint?.en ?? "\u2014"
+    ]);
+    credBlock = mdTable(
+      ["Role", loginLabel, "Password", "Status", "Hint"],
+      credRows
+    );
+  } else {
+    credBlock = "(not provided)";
+  }
+  sections.push(
+    `## Login Context
+
+${credBlock}
+
+> **WARNING:** These are DEV/TEST/SEED credentials only. Never forward, commit, or use in production.`
+  );
+  const cov = computeCoverage(journey, guideChecked);
+  const covTableRows = [
+    ["RED", String(cov.red.total), String(cov.red.covered), String(cov.red.total - cov.red.covered), fmtPct(cov.red.covered, cov.red.total)],
+    ["AMBER", String(cov.amber.total), String(cov.amber.covered), String(cov.amber.total - cov.amber.covered), fmtPct(cov.amber.covered, cov.amber.total)],
+    ["GREEN", String(cov.green.total), String(cov.green.covered), String(cov.green.total - cov.green.covered), fmtPct(cov.green.covered, cov.green.total)],
+    ["TOTAL", String(cov.total.total), String(cov.total.covered), String(cov.total.total - cov.total.covered), fmtPct(cov.total.covered, cov.total.total)]
+  ];
+  const uncoveredList = cov.uncoveredReds.length > 0 ? cov.uncoveredReds.map((r) => {
+    const why = r.riskWhy ? ` \u2014 ${r.riskWhy}` : "";
+    return `- [ ] [${r.lane}] ${r.path}${why}`;
+  }).join("\n") : "(none)";
+  const coveredList = cov.coveredReds.length > 0 ? cov.coveredReds.map((r) => `- [x] [${r.lane}] ${r.path}`).join("\n") : "(none)";
+  sections.push(
+    `## Coverage Report
+
+${mdTable(["Risk", "Total", "Covered", "Uncovered", "Coverage %"], covTableRows)}
+
+Coverage tier: **${cov.tier}**
+
+### Uncovered RED zones (verify before shipping)
+
+${uncoveredList}
+
+### Covered RED zones
+
+${coveredList}
+
+> Supervision note: Flag any uncovered RED zones that are directly related to the change requests in this batch \u2014 but do not block delivery on unrelated uncovered reds.`
+  );
+  const verifySteps = toStrings(p.verifySteps);
+  if (verifySteps.length > 0) {
+    const list = verifySteps.map((s, i) => `${i + 1}. ${s}`).join("\n");
+    sections.push(`## How to Verify a Fix
+
+${list}`);
+  } else {
+    sections.push("## How to Verify a Fix\n\n(not provided)");
+  }
+  const invariants = toStrings(p.invariants);
+  if (invariants.length > 0) {
+    const list = invariants.map((s, i) => `${i + 1}. ${s}`).join("\n");
+    sections.push(`## Invariants (Do Not Break)
+
+${list}`);
+  } else {
+    sections.push("## Invariants (Do Not Break)\n\n(not provided)");
+  }
+  const additionalContext = typeof p.additionalContext === "string" && p.additionalContext.trim() ? p.additionalContext.trim() : "(none)";
+  sections.push(`## Additional Context
+
+${additionalContext}`);
+  return sections.join("\n\n");
+}
+async function buildAndDownloadZip(notes, stamp, filename, config, guideChecked) {
+  if (typeof document === "undefined") return;
+  const { default: JSZip } = await import('jszip');
+  const zip = new JSZip();
+  const shots = zip.folder("screenshots");
+  const resolvedChecked = guideChecked ?? /* @__PURE__ */ new Set();
+  const resolvedConfig = config ?? {};
+  const preambleMd = buildPreamble(resolvedConfig, resolvedChecked, stamp, notes.length);
+  const brandLabel = resolvedConfig.brand?.label ?? "Qapture";
+  const notesHeader = [
+    `# ${brandLabel} Testing Notes`,
+    "",
+    `Exported: ${stamp}`,
+    `Total points: ${notes.length}`,
+    "",
+    "Each point below is a requested change, bug, or observation captured while",
+    "testing. Where present, a screenshot of the exact element/region is in the",
+    "screenshots/ folder, referenced by point number.",
+    "",
+    "---",
+    ""
+  ].join("\n");
+  const notesMd = preambleMd + "\n\n---NOTES---\n\n" + notesHeader + notes.map((n, i) => fmt(n, i)).join("\n");
+  zip.file("notes.md", notesMd);
+  notes.forEach((n, i) => {
+    if (n.screenshot && shots) {
+      shots.file(`point-${i + 1}.png`, n.screenshot);
+    }
+  });
+  const blob = await zip.generateAsync({ type: "blob" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = safeName(filename, stamp);
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 2e3);
+}
+function uid() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return Date.now().toString(36) + Math.random().toString(36).slice(2);
+}
+var nowIso = () => (/* @__PURE__ */ new Date()).toISOString();
+function safeLocation() {
+  if (typeof window === "undefined") return { href: "", pathname: "", search: "" };
+  return {
+    href: window.location.href,
+    pathname: window.location.pathname,
+    search: window.location.search
+  };
+}
+var QaContext = createContext(null);
+var LANG_KEY = "lang";
+var GUIDE_KEY = "guide";
+var LOGIN_KEY = "logins";
+function QaProvider({
+  config,
+  children
+}) {
+  const [storage] = useState(() => createStorage(config.namespace));
+  const [idb] = useState(() => createIdb(config.namespace));
+  const [notes, setNotes] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState("notes");
+  const [captureActive, setCaptureActive] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+  const [lang, setLangState] = useState(() => {
+    const saved = storage.getItem(LANG_KEY);
+    if (saved === "ar" || saved === "en") return saved;
+    return config.rtl ? "ar" : "en";
+  });
+  const [guideChecked, setGuideChecked] = useState(
+    () => new Set(storage.getJSON(GUIDE_KEY, []))
+  );
+  const [loginsUsed, setLoginsUsed] = useState(
+    () => new Set(storage.getJSON(LOGIN_KEY, []))
+  );
+  useEffect(() => {
+    let alive = true;
+    idb.getAll().then((rows) => {
+      if (!alive) return;
+      const sorted = rows.slice().sort(
+        (a, b) => a.timestamp < b.timestamp ? 1 : -1
+      );
+      setNotes(sorted);
+    }).catch(() => {
+    });
+    return () => {
+      alive = false;
+    };
+  }, [idb]);
+  const setLang = useCallback((l) => {
+    setLangState(l);
+    storage.setItem(LANG_KEY, l);
+  }, [storage]);
+  const t = useCallback(
+    (key, vars) => translate(lang, key, vars),
+    [lang]
+  );
+  const pick2 = useCallback(
+    (value2) => pick(value2, lang),
+    [lang]
+  );
+  const addNote = useCallback(
+    async ({
+      description,
+      screenshot,
+      target
+    }) => {
+      const loc = safeLocation();
+      const note = {
+        id: uid(),
+        url: loc.href,
+        route: loc.pathname + loc.search,
+        timestamp: nowIso(),
+        description: (description || "").trim(),
+        screenshot: screenshot ?? void 0,
+        target: target ?? void 0
+      };
+      setNotes((prev) => [note, ...prev]);
+      await idb.put(note);
+      return note;
+    },
+    [idb]
+  );
+  const updateNote = useCallback(
+    async (id, patch) => {
+      let updated = null;
+      setNotes(
+        (prev) => prev.map((n) => {
+          if (n.id !== id) return n;
+          const next = { ...n };
+          if (patch.description != null) next.description = patch.description.trim();
+          if (patch.screenshot === null) {
+            next.screenshot = void 0;
+          } else if (patch.screenshot !== void 0) {
+            next.screenshot = patch.screenshot;
+          }
+          updated = next;
+          return next;
+        })
+      );
+      if (updated) {
+        await idb.put(updated);
+      }
+    },
+    [idb]
+  );
+  const deleteNote = useCallback(
+    async (id) => {
+      setNotes((prev) => prev.filter((n) => n.id !== id));
+      await idb.delete(id);
+    },
+    [idb]
+  );
+  const clearAll = useCallback(async () => {
+    setNotes([]);
+    await idb.clear();
+  }, [idb]);
+  const startCapture = useCallback(() => {
+    setIsOpen(false);
+    setCaptureActive(true);
+  }, []);
+  const endCapture = useCallback((reopen = true) => {
+    setCaptureActive(false);
+    if (reopen) setIsOpen(true);
+  }, []);
+  const toggleGuide = useCallback((key) => {
+    setGuideChecked((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      storage.setJSON(GUIDE_KEY, [...next]);
+      return next;
+    });
+  }, [storage]);
+  const toggleLogin = useCallback((key) => {
+    setLoginsUsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      storage.setJSON(LOGIN_KEY, [...next]);
+      return next;
+    });
+  }, [storage]);
+  const exportZipFn = useCallback(
+    async (filename) => {
+      if (!notes.length || isExporting) return;
+      setIsExporting(true);
+      try {
+        await buildAndDownloadZip(notes, nowIso(), filename, config, guideChecked);
+      } catch (err) {
+        console.error("[QA] export failed", err);
+      } finally {
+        setIsExporting(false);
+      }
+    },
+    [notes, isExporting, config, guideChecked]
+  );
+  const value = {
+    // Data
+    notes,
+    guideChecked,
+    loginsUsed,
+    // UI state
+    isOpen,
+    activeTab,
+    captureActive,
+    isExporting,
+    // i18n
+    lang,
+    dir: lang === "ar" ? "rtl" : "ltr",
+    // Config passthrough
+    theme: config.theme,
+    brand: config.brand,
+    loginField: config.loginField,
+    credentials: config.credentials,
+    journey: config.journey,
+    preamble: config.preamble,
+    // i18n helpers
+    t,
+    pick: pick2,
+    // Actions
+    setIsOpen,
+    setActiveTab,
+    setLang,
+    addNote,
+    updateNote,
+    deleteNote,
+    clearAll,
+    startCapture,
+    endCapture,
+    toggleGuide,
+    toggleLogin,
+    exportZip: exportZipFn
+  };
+  return /* @__PURE__ */ jsx(QaContext.Provider, { value, children });
+}
+function useQa() {
+  const ctx = useContext(QaContext);
+  if (!ctx) throw new Error("useQa must be used inside <QaProvider>");
+  return ctx;
+}
+var ICONS = {
+  Check: [
+    ["path", { d: "M20 6 9 17l-5-5" }]
+  ],
+  X: [
+    ["path", { d: "M18 6 6 18" }],
+    ["path", { d: "m6 6 12 12" }]
+  ],
+  Loader2: [
+    ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }]
+  ],
+  MousePointerClick: [
+    ["path", { d: "m9 9 5 12 1.8-5.2L21 14Z" }],
+    ["path", { d: "M7.2 2.2 8 5.1" }],
+    ["path", { d: "m5.1 8-2.9-.8" }],
+    ["path", { d: "M14 4.1 12 6" }],
+    ["path", { d: "m6 12-1.9 2" }]
+  ],
+  Square: [
+    ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }]
+  ],
+  ImagePlus: [
+    ["path", { d: "M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7" }],
+    ["line", { x1: "16", x2: "22", y1: "5", y2: "5" }],
+    ["line", { x1: "19", x2: "19", y1: "2", y2: "8" }],
+    ["circle", { cx: "9", cy: "9", r: "2" }],
+    ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }]
+  ],
+  CheckCircle2: [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["path", { d: "m9 12 2 2 4-4" }]
+  ],
+  Crosshair: [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["line", { x1: "22", x2: "18", y1: "12", y2: "12" }],
+    ["line", { x1: "6", x2: "2", y1: "12", y2: "12" }],
+    ["line", { x1: "12", x2: "12", y1: "6", y2: "2" }],
+    ["line", { x1: "12", x2: "12", y1: "22", y2: "18" }]
+  ],
+  Trash2: [
+    ["path", { d: "M3 6h18" }],
+    ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }],
+    ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }],
+    ["line", { x1: "10", x2: "10", y1: "11", y2: "17" }],
+    ["line", { x1: "14", x2: "14", y1: "11", y2: "17" }]
+  ],
+  MapPin: [
+    ["path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }],
+    ["circle", { cx: "12", cy: "10", r: "3" }]
+  ],
+  FileText: [
+    ["path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }],
+    ["polyline", { points: "14 2 14 8 20 8" }],
+    ["line", { x1: "16", x2: "8", y1: "13", y2: "13" }],
+    ["line", { x1: "16", x2: "8", y1: "17", y2: "17" }],
+    ["line", { x1: "10", x2: "8", y1: "9", y2: "9" }]
+  ],
+  Pencil: [
+    ["path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }],
+    ["path", { d: "m15 5 4 4" }]
+  ],
+  Download: [
+    ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }],
+    ["polyline", { points: "7 10 12 15 17 10" }],
+    ["line", { x1: "12", x2: "12", y1: "15", y2: "3" }]
+  ],
+  Trash: [
+    ["path", { d: "M3 6h18" }],
+    ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }],
+    ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }]
+  ],
+  StickyNote: [
+    ["path", { d: "M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z" }],
+    ["path", { d: "M15 3v6h6" }]
+  ],
+  KeyRound: [
+    ["path", { d: "M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z" }],
+    ["circle", { cx: "16.5", cy: "7.5", r: ".5" }]
+  ],
+  Map: [
+    ["polygon", { points: "3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21" }],
+    ["line", { x1: "9", x2: "9", y1: "3", y2: "18" }],
+    ["line", { x1: "15", x2: "15", y1: "6", y2: "21" }]
+  ],
+  ClipboardList: [
+    ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1" }],
+    ["path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }],
+    ["path", { d: "M12 11h4" }],
+    ["path", { d: "M12 16h4" }],
+    ["path", { d: "M8 11h.01" }],
+    ["path", { d: "M8 16h.01" }]
+  ],
+  Copy: [
+    ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }],
+    ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }]
+  ],
+  CircleUser: [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["circle", { cx: "12", cy: "10", r: "3" }],
+    ["path", { d: "M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662" }]
+  ],
+  Circle: [
+    ["circle", { cx: "12", cy: "12", r: "10" }]
+  ],
+  Plus: [
+    ["path", { d: "M5 12h14" }],
+    ["path", { d: "M12 5v14" }]
+  ],
+  MapPinned: [
+    ["path", { d: "M18 8c0 4.5-6 9-6 9s-6-4.5-6-9a6 6 0 0 1 12 0" }],
+    ["circle", { cx: "12", cy: "8", r: "2" }],
+    ["path", { d: "M8.835 14H5a1 1 0 0 0-.9.7l-2 6c-.1.1-.1.2-.1.3 0 .6.4 1 1 1h18c.6 0 1-.4 1-1 0-.1 0-.2-.1-.3l-2-6a1 1 0 0 0-.9-.7h-3.835" }]
+  ],
+  ChevronDown: [
+    ["path", { d: "m6 9 6 6 6-6" }]
+  ]
+};
+function Icon({
+  name,
+  size = 24,
+  className,
+  style,
+  strokeWidth = 2
+}) {
+  const descriptors = ICONS[name];
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      style,
+      "aria-hidden": "true",
+      children: descriptors.map(
+        ([tag, rawAttrs], idx) => renderSvgElement(tag, rawAttrs, idx)
+      )
+    }
+  );
+}
+function renderSvgElement(tag, attrs, key) {
+  return React.createElement(tag, { key, ...attrs });
+}
+function QaFab() {
+  const { isOpen, setIsOpen, notes, captureActive, theme } = useQa();
+  if (captureActive) return null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-qa-overlay": "true",
+      dir: "ltr",
+      onClick: () => setIsOpen(!isOpen),
+      "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",
+      style: {
+        left: "calc(1.25rem + env(safe-area-inset-left))",
+        bottom: "calc(5rem + env(safe-area-inset-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
+      },
+      children: [
+        !isOpen && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "qa-absolute qa-inset-0 qa-rounded-full qa-opacity-60 qa-animate-pulse-accent",
+            style: { pointerEvents: "none" },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(Icon, { name: isOpen ? "X" : "ClipboardList", size: 24 }),
+        !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",
+            "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)"
+            },
+            children: notes.length
+          }
+        )
+      ]
+    }
+  );
+}
+function NoteEditor() {
+  const { addNote, startCapture, t, theme } = 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 fileRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+    };
+  }, []);
+  const setImage = useCallback((blob) => {
+    if (!blob) return;
+    setScreenshot(blob);
+    setPreviewUrl((old) => {
+      if (old) URL.revokeObjectURL(old);
+      return URL.createObjectURL(blob);
+    });
+  }, []);
+  const clearImage = () => {
+    setScreenshot(null);
+    setPreviewUrl((o) => {
+      if (o) URL.revokeObjectURL(o);
+      return null;
+    });
+  };
+  const onPaste = (e) => {
+    const item = Array.from(e.clipboardData?.items ?? []).find(
+      (i) => i.type.startsWith("image/")
+    );
+    if (item) {
+      const b = item.getAsFile();
+      if (b) {
+        e.preventDefault();
+        setImage(b);
+      }
+    }
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDragOver(false);
+    const f = Array.from(e.dataTransfer.files ?? []).find(
+      (x) => x.type.startsWith("image/")
+    );
+    if (f) setImage(f);
+  };
+  const onFile = (e) => {
+    const f = e.target.files?.[0];
+    if (f?.type.startsWith("image/")) setImage(f);
+    e.target.value = "";
+  };
+  const save = async () => {
+    if (!description.trim()) return;
+    await addNote({ description, screenshot: screenshot ?? void 0 });
+    setDescription("");
+    clearImage();
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "qa-space-y-2", children: [
+    /* @__PURE__ */ jsxs(
+      "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"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "Crosshair", size: 16 }),
+          t("capture_cta")
+        ]
+      }
+    ),
+    !open ? /* @__PURE__ */ jsxs(
+      "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"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "Plus", size: 14 }),
+          t("quick_note")
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onPaste,
+        className: "qa-space-y-2 qa-rounded-xl qa-border qa-p-2.5",
+        style: { borderColor: `${theme.primary}1a`, background: theme.cream },
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              autoFocus: true,
+              value: description,
+              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" }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onDragOver: (e) => {
+                e.preventDefault();
+                setDragOver(true);
+              },
+              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"
+              },
+              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" } }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: clearImage,
+                      className: "qa-absolute qa-rounded-full qa-p-1 qa-text-white qa-tap-icon",
+                      style: {
+                        top: "-8px",
+                        insetInlineEnd: "-8px",
+                        background: theme.primary,
+                        border: "none",
+                        cursor: "pointer"
+                      },
+                      children: /* @__PURE__ */ jsx(Icon, { name: "Trash2", size: 12 })
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxs(
+                  "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" },
+                    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__ */ jsx(
+              "button",
+              {
+                onClick: 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" },
+                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"
+                },
+                children: t("cancel")
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/lib/highlight.ts
+function readCssVar(name, fallback) {
+  if (typeof document === "undefined") return fallback;
+  const val = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return val || fallback;
+}
+function paint(rect, color) {
+  if (typeof document === "undefined") return;
+  if (!rect || rect.width < 1 || rect.height < 1) return;
+  const accent = readCssVar("--qa-accent", "#7c3aed");
+  const primary = readCssVar("--qa-primary", "#4f46e5");
+  const box = document.createElement("div");
+  box.setAttribute("data-qa-overlay", "true");
+  Object.assign(box.style, {
+    position: "fixed",
+    top: `${rect.top}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    zIndex: "10098",
+    pointerEvents: "none",
+    borderRadius: "3px",
+    outline: `3px solid ${accent}`,
+    background: `${accent}22`,
+    boxShadow: `0 0 0 4px ${primary}55`,
+    transition: "opacity 0.45s ease",
+    opacity: "1"
+  });
+  document.body.appendChild(box);
+  setTimeout(() => {
+    box.style.opacity = "0";
+  }, 1e3);
+  setTimeout(() => {
+    if (box.parentNode) box.remove();
+  }, 1500);
+}
+function flashLocate(target, color) {
+  if (typeof document === "undefined" || !target) return;
+  let el = null;
+  if (target.selector) {
+    try {
+      el = document.querySelector(target.selector);
+    } catch {
+      el = null;
+    }
+  }
+  if (el) {
+    el.scrollIntoView({ block: "center", inline: "center" });
+    requestAnimationFrame(() => {
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      paint({ top: r.top, left: r.left, width: r.width, height: r.height });
+    });
+  } else if (target.rect) {
+    paint(target.rect);
+  }
+}
+function LocationReveal({ target }) {
+  const { t, theme } = 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),
+                  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")
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function useObjectUrl(blob) {
+  const [url, setUrl] = useState(null);
+  useEffect(() => {
+    if (!blob) {
+      setUrl(null);
+      return;
+    }
+    const u = URL.createObjectURL(blob);
+    setUrl(u);
+    return () => URL.revokeObjectURL(u);
+  }, [blob]);
+  return url;
+}
+function KindBadge({
+  target,
+  t,
+  theme
+}) {
+  if (!target) {
+    return /* @__PURE__ */ jsxs("span", { className: "qa-inline-flex qa-items-center qa-gap-1 qa-text-10 qa-text-slate-400", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "FileText", size: 12 }),
+      t("kind_note")
+    ] });
+  }
+  const region = target.kind === "region";
+  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 },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: region ? "Square" : "MousePointerClick", size: 10 }),
+        region ? t("kind_region") : t("kind_element")
+      ]
+    }
+  );
+}
+function NoteItem({ note, index }) {
+  const { deleteNote, updateNote, t, theme } = 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 startEdit = () => {
+    setDesc(note.description);
+    setImg(note.screenshot ?? null);
+    setEditing(true);
+  };
+  const onFile = (e) => {
+    const f = e.target.files?.[0];
+    if (f?.type.startsWith("image/")) setImg(f);
+    e.target.value = "";
+  };
+  const onPaste = (e) => {
+    const it = Array.from(e.clipboardData?.items ?? []).find(
+      (i) => i.type.startsWith("image/")
+    );
+    if (it) {
+      const b = it.getAsFile();
+      if (b) {
+        e.preventDefault();
+        setImg(b);
+      }
+    }
+  };
+  const save = () => {
+    const patch = { description: desc };
+    if (img !== (note.screenshot ?? null)) patch.screenshot = img;
+    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: [
+          /* @__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",
+            {
+              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"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__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",
+            {
+              src: thumbUrl,
+              alt: "screenshot",
+              className: "qa-mt-2 qa-w-full qa-rounded-lg qa-border",
+              style: { borderColor: `${theme.primary}1a` }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function NoteList() {
+  const { notes, t, theme } = useQa();
+  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__ */ jsx("ul", { className: "qa-space-y-2", children: notes.map((n, i) => /* @__PURE__ */ jsx(NoteItem, { note: n, index: notes.length - i }, n.id)) });
+}
+function CopyField({ value, ink }) {
+  const [done, setDone] = useState(false);
+  const copy = async () => {
+    if (value === "\u2014") return;
+    if (typeof navigator === "undefined" || !navigator.clipboard) return;
+    try {
+      await navigator.clipboard.writeText(value);
+      setDone(true);
+      setTimeout(() => setDone(false), 1100);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: copy,
+      disabled: value === "\u2014",
+      dir: "ltr",
+      className: "qa-group qa-inline-flex qa-items-center qa-gap-1.5 qa-rounded-md qa-px-1.5 qa-py-0.5 qa-font-mono qa-text-xs qa-hover-bg-black-5",
+      style: { background: "transparent", border: "none", cursor: value === "\u2014" ? "default" : "pointer" },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { color: ink }, children: value }),
+        value !== "\u2014" && (done ? /* @__PURE__ */ jsx(Icon, { name: "Check", size: 12, className: "qa-text-green-600" }) : /* @__PURE__ */ jsx(Icon, { name: "Copy", size: 12, className: "qa-opacity-40 qa-group-hover-opacity-80" }))
+      ]
+    }
+  );
+}
+function CredentialsSection() {
+  const { loginsUsed, toggleLogin, t, lang, pick: pick2, loginField, credentials, theme } = 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: [
+    /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-justify-between qa-gap-2 qa-text-xs", children: [
+      /* @__PURE__ */ jsx("span", { className: "qa-text-slate-500", children: t("login_with", { field }) }),
+      /* @__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 },
+          children: t("used_count", { n: usedCount, m: credentials.length })
+        }
+      )
+    ] }),
+    credentials.map((c) => {
+      const used = loginsUsed.has(c.role);
+      const label = lang === "ar" && c.roleAr ? c.roleAr : c.role;
+      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"
+          },
+          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 }),
+              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",
+                  style: {
+                    color: used ? theme.sage : "#94a3b8",
+                    background: "transparent",
+                    border: "none",
+                    cursor: c.seeded ? "pointer" : "default"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: used ? "CheckCircle2" : "Circle", size: 16 }),
+                    t("used")
+                  ]
+                }
+              )
+            ] }),
+            c.seeded && /* @__PURE__ */ jsxs("div", { className: "qa-mt-1.5 qa-flex qa-flex-wrap qa-items-center qa-gap-x-3 qa-gap-y-1 qa-ps-6", children: [
+              /* @__PURE__ */ jsx(CopyField, { value: c.login, ink: theme.ink }),
+              /* @__PURE__ */ jsx("span", { className: "qa-text-slate-300", children: "\xB7" }),
+              /* @__PURE__ */ jsx(CopyField, { value: c.password, ink: theme.ink })
+            ] })
+          ]
+        },
+        c.role
+      );
+    })
+  ] });
+}
+var keyOf = (id, path) => `${id}::${path}`;
+function Lane({
+  group,
+  checked,
+  toggle,
+  pick: pick2
+}) {
+  const { theme, lang } = useQa();
+  const { id, color = theme.primary, 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(
+          "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 }
+              }
+            )
+          }
+        ),
+        /* @__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) => {
+            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__ */ jsx(
+                    "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: color,
+                        background: on ? color : "#fff",
+                        zIndex: 1
+                      },
+                      children: on && /* @__PURE__ */ jsx(Icon, { name: "Check", size: 10, strokeWidth: 3, className: "qa-text-white" })
+                    }
+                  ),
+                  /* @__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)
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ) }, s.path);
+          })
+        ] })
+      ]
+    }
+  );
+}
+function GuideSection() {
+  const { guideChecked, toggleGuide, t, journey, pick: pick2, theme, lang } = 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}%` }
+            }
+          ) })
+        ]
+      }
+    ),
+    journey.map((g) => /* @__PURE__ */ jsx(
+      Lane,
+      {
+        group: g,
+        checked: guideChecked,
+        toggle: toggleGuide,
+        pick: pick2
+      },
+      g.id
+    )),
+    journey.length === 0 && /* @__PURE__ */ jsx("p", { className: "qa-py-8 qa-text-center qa-text-sm qa-text-slate-400", children: t("tab_guide") })
+  ] });
+}
+var TABS = [
+  { key: "notes", labelKey: "tab_notes", icon: "StickyNote" },
+  { key: "logins", labelKey: "tab_logins", icon: "KeyRound" },
+  { key: "guide", labelKey: "tab_guide", icon: "Map" }
+];
+function todayName() {
+  return `qa-notes-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
+}
+function panelReducer(state, action) {
+  switch (action.type) {
+    case "open":
+      if (state === "hidden" || state === "exiting") return "entering";
+      return state;
+    case "close":
+      if (state === "visible" || state === "entering") return "exiting";
+      return state;
+    case "done":
+      if (state === "entering") return "visible";
+      if (state === "exiting") return "hidden";
+      return state;
+  }
+}
+function QaPanel() {
+  const {
+    isOpen,
+    activeTab,
+    setActiveTab,
+    notes,
+    exportZip,
+    isExporting,
+    clearAll,
+    t,
+    lang,
+    setLang,
+    dir,
+    brand,
+    theme,
+    journey,
+    guideChecked
+  } = useQa();
+  const [confirmClear, setConfirmClear] = useState(false);
+  const [naming, setNaming] = useState(false);
+  const [filename, setFilename] = useState("");
+  const [phase, dispatch] = useReducer(panelReducer, "hidden");
+  const [showIn, setShowIn] = useState(false);
+  useEffect(() => {
+    if (isOpen) dispatch({ type: "open" });
+    else dispatch({ type: "close" });
+  }, [isOpen]);
+  useEffect(() => {
+    if (phase === "entering") {
+      const id = requestAnimationFrame(() => setShowIn(true));
+      return () => cancelAnimationFrame(id);
+    }
+    if (phase === "exiting") {
+      setShowIn(false);
+    }
+    if (phase === "hidden") {
+      setShowIn(false);
+    }
+    if (phase === "visible") {
+      setShowIn(true);
+    }
+    return void 0;
+  }, [phase]);
+  const handleTransitionEnd = useCallback((e) => {
+    if (e.target !== e.currentTarget) return;
+    if (e.propertyName !== "opacity") return;
+    dispatch({ type: "done" });
+  }, []);
+  const [isIpadLandscape, setIsIpadLandscape] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return void 0;
+    }
+    const mql = window.matchMedia(
+      "(pointer: coarse) and (min-width: 768px) and (orientation: landscape)"
+    );
+    setIsIpadLandscape(mql.matches);
+    const handleChange = (e) => setIsIpadLandscape(e.matches);
+    if (typeof mql.addEventListener === "function") {
+      mql.addEventListener("change", handleChange);
+      return () => mql.removeEventListener("change", handleChange);
+    }
+    mql.addListener(handleChange);
+    return () => mql.removeListener(handleChange);
+  }, []);
+  if (phase === "hidden") return null;
+  const openNaming = () => {
+    setFilename(todayName());
+    setNaming(true);
+  };
+  const doExport = () => {
+    setNaming(false);
+    void exportZip(filename);
+  };
+  const namingCoverage = naming ? computeCoverage(journey, guideChecked) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "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" : ""}`,
+      style: {
+        // Floating popover position (default). Fully overridden below when
+        // docked as an iPad-landscape side-sheet.
+        left: isIpadLandscape ? "auto" : "calc(1rem + env(safe-area-inset-left))",
+        right: isIpadLandscape ? "0" : void 0,
+        top: isIpadLandscape ? "0" : void 0,
+        bottom: isIpadLandscape ? "0" : dir === "rtl" ? "calc(9rem + env(safe-area-inset-bottom))" : "calc(8.75rem + env(safe-area-inset-bottom))",
+        height: isIpadLandscape ? "100dvh" : void 0,
+        width: isIpadLandscape ? "min(92vw, 420px)" : void 0,
+        // qa-max-h-74vh (class) would otherwise cap the sheet well short of
+        // 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
+      },
+      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(
+                "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
+          }
+        ),
+        /* @__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: () => 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")
+                    ]
+                  }
+                ) })
+              ] }),
+              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)" },
+            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` },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: "qa-mb-2 qa-text-sm qa-font-semibold",
+                      style: { color: theme.ink },
+                      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` },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            autoFocus: true,
+                            value: filename,
+                            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" })
+                      ]
+                    }
+                  ),
+                  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?`
+                    }
+                  ),
+                  /* @__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" },
+                        children: [
+                          /* @__PURE__ */ jsx(Icon, { name: "Check", size: 16 }),
+                          t("export")
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "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"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(Icon, { name: "X", size: 16 }),
+                          t("cancel")
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function TabsBar({
+  activeTab,
+  setActiveTab,
+  t,
+  theme
+}) {
+  const tabRefs = useRef([]);
+  const barRef = useRef(null);
+  const containerRef = useRef(null);
+  const reposition = useCallback(() => {
+    const idx = TABS.findIndex((tab) => tab.key === activeTab);
+    const btn = tabRefs.current[idx];
+    const bar = barRef.current;
+    if (!btn || !bar) return;
+    bar.style.left = `${btn.offsetLeft + 8}px`;
+    bar.style.width = `${Math.max(0, btn.offsetWidth - 16)}px`;
+  }, [activeTab]);
+  useLayoutEffect(() => {
+    reposition();
+  }, [reposition]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(reposition);
+    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: [
+    TABS.map((tab, i) => {
+      const on = activeTab === tab.key;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: (el) => {
+            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"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: tab.icon, size: 16 }),
+            t(tab.labelKey)
+          ]
+        },
+        tab.key
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: barRef,
+        className: "qa-tab-indicator",
+        style: { background: theme.accent },
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+
+// src/lib/capture.ts
+function toBlob(canvas) {
+  return new Promise((resolve) => {
+    if (canvas.toBlob) {
+      canvas.toBlob((b) => resolve(b), "image/png");
+    } else {
+      const dataUrl = canvas.toDataURL("image/png");
+      const bin = atob(dataUrl.split(",")[1]);
+      const arr = new Uint8Array(bin.length);
+      for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
+      resolve(new Blob([arr], { type: "image/png" }));
+    }
+  });
+}
+async function captureRegion(rect, scroll) {
+  if (typeof document === "undefined" || typeof window === "undefined") return null;
+  if (!rect || rect.width < 2 || rect.height < 2) return null;
+  const sx = scroll?.x ?? window.scrollX;
+  const sy = scroll?.y ?? window.scrollY;
+  try {
+    const { default: html2canvas } = await import('html2canvas');
+    const scale = Math.min(window.devicePixelRatio || 1, 2);
+    const canvas = await html2canvas(document.body, {
+      x: sx + rect.left,
+      y: sy + rect.top,
+      width: rect.width,
+      height: rect.height,
+      scale,
+      useCORS: true,
+      allowTaint: true,
+      backgroundColor: null,
+      logging: false,
+      scrollX: sx,
+      scrollY: sy,
+      // Viewport-only clone (not the full document) — see iOS canvas-cap
+      // rationale above. Keeps the offscreen render surface ~viewport*scale.
+      windowWidth: window.innerWidth,
+      windowHeight: window.innerHeight,
+      ignoreElements: (el) => el.nodeType === 1 && typeof el.hasAttribute === "function" && el.hasAttribute("data-qa-overlay")
+    });
+    return await toBlob(canvas);
+  } catch (err) {
+    console.warn("[QA] region capture failed:", err);
+    return null;
+  }
+}
+
+// src/lib/selector.ts
+function isCleanId(id) {
+  return !!id && /^[a-zA-Z][\w-]*$/.test(id) && id.length <= 40;
+}
+function esc(value) {
+  return typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value;
+}
+function nthOfTypePath(el, maxDepth = 6) {
+  if (typeof document === "undefined" || !document.body) return "";
+  const parts = [];
+  let node = el;
+  let depth = 0;
+  while (node && node.nodeType === 1 && node !== document.body && depth < maxDepth) {
+    const current = node;
+    const tag = current.tagName.toLowerCase();
+    const parent = current.parentElement;
+    if (!parent) {
+      parts.unshift(tag);
+      break;
+    }
+    const sameTag = Array.from(parent.children).filter(
+      (c) => c.tagName === current.tagName
+    );
+    if (sameTag.length === 1) {
+      parts.unshift(tag);
+    } else {
+      parts.unshift(`${tag}:nth-of-type(${sameTag.indexOf(current) + 1})`);
+    }
+    node = parent;
+    depth++;
+  }
+  return parts.join(" > ");
+}
+function getStableSelector(el) {
+  if (typeof document === "undefined") return "";
+  if (!el || el.nodeType !== 1) return "";
+  const tag = el.tagName.toLowerCase();
+  const htmlEl = el;
+  if (isCleanId(htmlEl.id)) return `#${esc(htmlEl.id)}`;
+  for (const attr of ["data-testid", "data-test", "data-cy", "data-id", "data-key"]) {
+    const val = el.getAttribute(attr);
+    if (val) return `[${attr}="${esc(val)}"]`;
+  }
+  if (["button", "a", "input", "select", "textarea"].includes(tag)) {
+    const label = el.getAttribute("aria-label");
+    if (label) return `${tag}[aria-label="${esc(label)}"]`;
+  }
+  const name = el.getAttribute("name");
+  if (name && ["input", "select", "textarea"].includes(tag)) {
+    return `${tag}[name="${esc(name)}"]`;
+  }
+  return nthOfTypePath(el);
+}
+function isCoarsePointer() {
+  if (typeof window === "undefined") return false;
+  try {
+    if (window.matchMedia && window.matchMedia("(pointer: coarse)").matches) return true;
+  } catch {
+  }
+  return typeof navigator !== "undefined" && (navigator.maxTouchPoints || 0) > 0;
+}
+function useCoarsePointer() {
+  const [coarse, setCoarse] = useState(() => isCoarsePointer());
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(pointer: coarse)");
+    const on = () => setCoarse(isCoarsePointer());
+    if (mq.addEventListener) mq.addEventListener("change", on);
+    else if (mq.addListener) mq.addListener(on);
+    return () => {
+      if (mq.removeEventListener) mq.removeEventListener("change", on);
+      else if (mq.removeListener) mq.removeListener(on);
+    };
+  }, []);
+  return coarse;
+}
+
+// src/lib/scrollLock.ts
+var locked = false;
+var prevHtmlOverflow = "";
+var prevBodyOverflow = "";
+function lockPageScroll() {
+  if (typeof document === "undefined" || locked) return;
+  const html = document.documentElement;
+  const body = document.body;
+  prevHtmlOverflow = html.style.overflow;
+  prevBodyOverflow = body ? body.style.overflow : "";
+  html.style.overflow = "hidden";
+  if (body) body.style.overflow = "hidden";
+  locked = true;
+}
+function unlockPageScroll() {
+  if (typeof document === "undefined" || !locked) return;
+  document.documentElement.style.overflow = prevHtmlOverflow;
+  if (document.body) document.body.style.overflow = prevBodyOverflow;
+  locked = false;
+}
+var DRAG_THRESHOLD = 6;
+var TOUCH_DRAG_THRESHOLD = 12;
+var MIN_REGION_SIZE = 8;
+var REGION_HANDLES = [
+  { edge: "nw", top: "0%", left: "0%", cursor: "nwse-resize" },
+  { edge: "n", top: "0%", left: "50%", cursor: "ns-resize" },
+  { edge: "ne", top: "0%", left: "100%", cursor: "nesw-resize" },
+  { edge: "w", top: "50%", left: "0%", cursor: "ew-resize" },
+  { edge: "e", top: "50%", left: "100%", cursor: "ew-resize" },
+  { edge: "sw", top: "100%", left: "0%", cursor: "nesw-resize" },
+  { edge: "s", top: "100%", left: "50%", cursor: "ns-resize" },
+  { edge: "se", top: "100%", left: "100%", cursor: "nwse-resize" }
+];
+function CaptureMode() {
+  const { addNote, endCapture, t, dir, theme } = useQa();
+  const coarse = useCoarsePointer();
+  const layerRef = useRef(null);
+  const [phase, setPhase] = useState("selecting");
+  const [hover, setHover] = useState(null);
+  const [drag, setDrag] = useState(null);
+  const dragRef = useRef(null);
+  const [selection, setSelection] = useState(null);
+  const [candidate, setCandidate] = useState(null);
+  const [regionMode, setRegionMode] = useState(false);
+  const [shot, setShot] = useState(null);
+  const [shotUrl, setShotUrl] = useState(null);
+  const [capturing, setCapturing] = useState(false);
+  const [description, setDescription] = useState("");
+  const taRef = useRef(null);
+  const activePointerId = useRef(null);
+  const pointerKind = useRef("mouse");
+  const scrollSnap = useRef({ x: 0, y: 0 });
+  const handleDragRef = useRef(null);
+  const [cardIn, setCardIn] = useState(false);
+  const elementUnder = useCallback((x, y) => {
+    const layer = layerRef.current;
+    if (!layer) return null;
+    const prev = layer.style.pointerEvents;
+    layer.style.pointerEvents = "none";
+    const el = document.elementFromPoint(x, y);
+    layer.style.pointerEvents = prev;
+    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);
+    setCapturing(true);
+    lockPageScroll();
+    try {
+      const blob = await captureRegion(sel.rect, scrollSnap.current);
+      setShot(blob);
+      setShotUrl((old) => {
+        if (old) URL.revokeObjectURL(old);
+        return blob ? URL.createObjectURL(blob) : null;
+      });
+    } finally {
+      unlockPageScroll();
+      setCapturing(false);
+    }
+  }, []);
+  useEffect(() => {
+    if (phase !== "annotating") {
+      setCardIn(false);
+      return;
+    }
+    const id = requestAnimationFrame(() => setCardIn(true));
+    return () => cancelAnimationFrame(id);
+  }, [phase]);
+  const onPointerDown = (e) => {
+    if (phase !== "selecting") return;
+    pointerKind.current = e.pointerType;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    if (activePointerId.current !== null) return;
+    activePointerId.current = e.pointerId;
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    if (e.pointerType === "mouse" || coarse && regionMode) {
+      dragRef.current = { x0: e.clientX, y0: e.clientY, rect: null };
+    }
+  };
+  const onPointerMove = (e) => {
+    if (phase !== "selecting") return;
+    if (dragRef.current && activePointerId.current === e.pointerId) {
+      const d = dragRef.current;
+      const rect = {
+        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({ ...d, rect });
+      return;
+    }
+    if (!coarse) {
+      const el = elementUnder(e.clientX, e.clientY);
+      if (!el) {
+        setHover(null);
+        return;
+      }
+      const r = el.getBoundingClientRect();
+      setHover({
+        rect: { top: r.top, left: r.left, width: r.width, height: r.height },
+        selector: getStableSelector(el)
+      });
+    }
+  };
+  const onPointerUp = (e) => {
+    if (phase !== "selecting") return;
+    if (activePointerId.current !== e.pointerId) return;
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    activePointerId.current = null;
+    const d = dragRef.current;
+    dragRef.current = null;
+    const threshold = pointerKind.current === "mouse" ? DRAG_THRESHOLD : 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 };
+    if (moved && d) {
+      const rect = {
+        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);
+      }
+    } 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 (coarse) {
+        setCandidate(sel);
+        setHover({ rect: sel.rect, selector: sel.selector || "" });
+        setPhase("confirming");
+      } else {
+        void beginAnnotation(sel);
+      }
+    }
+  };
+  const onPointerCancel = (e) => {
+    if (activePointerId.current === e.pointerId) {
+      activePointerId.current = null;
+      dragRef.current = null;
+      setDrag(null);
+    }
+  };
+  const onHandlePointerDown = useCallback(
+    (edge) => (e) => {
+      e.stopPropagation();
+      if (!candidate) return;
+      try {
+        e.currentTarget.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      handleDragRef.current = {
+        edge,
+        pointerId: e.pointerId,
+        startRect: { ...candidate.rect },
+        startX: e.clientX,
+        startY: e.clientY
+      };
+    },
+    [candidate]
+  );
+  const onHandlePointerMove = useCallback((e) => {
+    const hd = handleDragRef.current;
+    if (!hd || hd.pointerId !== e.pointerId) return;
+    e.stopPropagation();
+    const dx = e.clientX - hd.startX;
+    const dy = e.clientY - hd.startY;
+    const { startRect, edge } = hd;
+    let { top, left, width, height } = startRect;
+    if (edge === "move") {
+      left = startRect.left + dx;
+      top = startRect.top + dy;
+    } 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);
+      }
+    }
+    setCandidate((prev) => prev ? { ...prev, rect: { top, left, width, height } } : prev);
+  }, []);
+  const onHandlePointerUp = useCallback((e) => {
+    const hd = handleDragRef.current;
+    if (!hd || hd.pointerId !== e.pointerId) return;
+    e.stopPropagation();
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    handleDragRef.current = null;
+  }, []);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        endCapture();
+      }
+    };
+    document.addEventListener("keydown", onKey, true);
+    return () => document.removeEventListener("keydown", onKey, true);
+  }, [endCapture]);
+  useEffect(() => {
+    if (phase === "annotating" && taRef.current) taRef.current.focus();
+  }, [phase]);
+  useEffect(() => () => {
+    if (shotUrl) URL.revokeObjectURL(shotUrl);
+  }, [shotUrl]);
+  useEffect(() => () => {
+    unlockPageScroll();
+  }, []);
+  const save = async () => {
+    if (!selection || !description.trim()) return;
+    const target = {
+      kind: selection.kind,
+      selector: selection.selector,
+      text: selection.text,
+      tagName: selection.tagName,
+      rect: {
+        top: Math.round(selection.rect.top),
+        left: Math.round(selection.rect.left),
+        width: Math.round(selection.rect.width),
+        height: Math.round(selection.rect.height)
+      }
+    };
+    await addNote({ description, screenshot: shot ?? void 0, target });
+    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;
+    let left = r.left;
+    left = Math.min(left, window.innerWidth - 340);
+    left = Math.max(12, left);
+    return {
+      top,
+      left,
+      transform: placeAbove ? "translateY(-100%)" : "none"
+    };
+  }, []);
+  const popStyle = selection ? popStyleFor(selection.rect) : {};
+  const confirmPopStyle = candidate ? popStyleFor(candidate.rect) : {};
+  const activeRect = drag?.rect ?? candidate?.rect ?? selection?.rect ?? hover?.rect ?? null;
+  const isRegion = !!drag?.rect || candidate?.kind === "region" || selection?.kind === "region";
+  const confirmingRegion = phase === "confirming" && candidate?.kind === "region" && coarse;
+  return /* @__PURE__ */ jsxs("div", { "data-qa-overlay": "true", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: layerRef,
+        onPointerMove,
+        onPointerDown,
+        onPointerUp,
+        onPointerCancel,
+        className: "qa-fixed qa-inset-0 qa-z-10090",
+        style: {
+          cursor: phase === "selecting" && !coarse ? "crosshair" : "default",
+          touchAction: coarse ? regionMode ? "none" : "pan-x pan-y" : "auto",
+          background: "rgba(58,42,46,0.18)"
+        }
+      }
+    ),
+    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 },
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-items-center qa-gap-1.5", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "MousePointerClick", size: 16 }),
+            t("cap_click")
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "qa-opacity-50", children: "\xB7" }),
+          /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-items-center qa-gap-1.5", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "Square", size: 16 }),
+            t("cap_drag")
+          ] }),
+          /* @__PURE__ */ jsx(
+            "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" },
+              children: "Esc"
+            }
+          )
+        ]
+      }
+    ),
+    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 },
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "qa-flex qa-items-center qa-gap-1.5", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "MousePointerClick", size: 16 }),
+            t("tap_element")
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "qa-opacity-50", children: "\xB7" }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setRegionMode((v) => !v),
+              "aria-pressed": regionMode,
+              className: "qa-tap qa-flex qa-items-center qa-gap-1.5 qa-rounded-full qa-px-2 qa-py-0.5 qa-text-xs",
+              style: {
+                border: "1px solid rgba(255,255,255,0.4)",
+                background: regionMode ? "rgba(255,255,255,0.35)" : "transparent",
+                color: "#fff",
+                cursor: "pointer"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "Square", size: 16 }),
+                t("draw_region")
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "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" },
+              children: "Esc"
+            }
+          )
+        ]
+      }
+    ),
+    activeRect && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "qa-fixed qa-z-10092 qa-rounded",
+        style: {
+          top: activeRect.top,
+          left: activeRect.left,
+          width: activeRect.width,
+          height: activeRect.height,
+          pointerEvents: confirmingRegion ? "auto" : "none",
+          outline: `2px ${isRegion ? "dashed" : "solid"} ${theme.accent}`,
+          outlineOffset: "1px",
+          background: `${theme.accent}1f`,
+          boxShadow: phase === "annotating" ? "0 0 0 9999px rgba(58,42,46,0.28)" : "none"
+        },
+        children: [
+          (phase === "selecting" || phase === "confirming") && hover?.selector && !drag && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "qa-absolute qa-rounded qa-px-1.5 qa-py-0.5 qa-text-11 qa-text-white qa-truncate",
+              style: {
+                top: "-1.5rem",
+                left: 0,
+                maxWidth: "260px",
+                background: theme.primary
+              },
+              children: hover.selector
+            }
+          ),
+          drag?.rect && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "qa-absolute qa-rounded qa-px-1.5 qa-py-0.5 qa-text-11 qa-text-white",
+              style: {
+                bottom: "-1.5rem",
+                right: 0,
+                background: theme.accentDark
+              },
+              children: [
+                Math.round(drag.rect.width),
+                " \xD7 ",
+                Math.round(drag.rect.height)
+              ]
+            }
+          ),
+          confirmingRegion && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "qa-absolute qa-inset-0 qa-z-10093",
+                onPointerDown: onHandlePointerDown("move"),
+                onPointerMove: onHandlePointerMove,
+                onPointerUp: onHandlePointerUp,
+                onPointerCancel: onHandlePointerUp,
+                style: { touchAction: "none", cursor: "move" }
+              }
+            ),
+            REGION_HANDLES.map(({ edge, top, left, cursor }) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "button",
+                "aria-label": t("resize"),
+                className: "qa-tap-icon qa-z-10094 qa-absolute qa-rounded-full",
+                onPointerDown: onHandlePointerDown(edge),
+                onPointerMove: onHandlePointerMove,
+                onPointerUp: onHandlePointerUp,
+                onPointerCancel: onHandlePointerUp,
+                style: {
+                  top,
+                  left,
+                  transform: "translate(-50%, -50%)",
+                  touchAction: "none",
+                  cursor,
+                  background: `${theme.accent}33`
+                },
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "qa-rounded-full",
+                    style: {
+                      width: 16,
+                      height: 16,
+                      background: theme.accent,
+                      border: "2px solid #fff",
+                      boxShadow: "0 1px 3px rgba(0,0,0,0.35)",
+                      pointerEvents: "none"
+                    }
+                  }
+                )
+              },
+              edge
+            ))
+          ] })
+        ]
+      }
+    ),
+    phase === "confirming" && candidate && coarse && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-qa-overlay": "true",
+        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",
+        style: {
+          ...confirmPopStyle,
+          background: theme.surface,
+          borderColor: `${theme.primary}22`
+        },
+        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" },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "Check", size: 16 }),
+                t("use_this")
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                setCandidate(null);
+                setHover(null);
+                setPhase("selecting");
+              },
+              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"
+              },
+              children: t("adjust")
+            }
+          )
+        ]
+      }
+    ),
+    phase === "annotating" && selection && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "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" : ""}`,
+        style: {
+          ...popStyle,
+          background: theme.surface,
+          borderColor: `${theme.primary}22`,
+          fontFamily: dir === "rtl" ? "'Tajawal', sans-serif" : "'Nunito', system-ui, sans-serif"
+        },
+        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-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
+                },
+                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(
+                  "img",
+                  {
+                    src: shotUrl,
+                    alt: "capture",
+                    className: "qa-max-h-32 qa-rounded-md"
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "qa-py-4 qa-text-xs qa-text-slate-400", children: t("no_shot") })
+              }
+            ),
+            /* @__PURE__ */ jsx(LocationReveal, { target: selection }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: taRef,
+                value: description,
+                onChange: (e) => setDescription(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void save();
+                },
+                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" }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "qa-flex qa-items-center qa-gap-2", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  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" },
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "Check", size: 16 }),
+                    t("save_point")
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setPhase("selecting");
+                    setSelection(null);
+                    setShot(null);
+                    setDescription("");
+                  },
+                  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"
+                  },
+                  children: t("reselect")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "qa-text-center qa-text-10 qa-text-slate-400", children: t("save_hint") })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function isProduction() {
+  try {
+    const proc = globalThis.process;
+    return proc?.env?.["NODE_ENV"] === "production";
+  } catch {
+    return false;
+  }
+}
+function parseHotkey(hotkey) {
+  if (!hotkey) return null;
+  const parts = hotkey.toLowerCase().split("+");
+  const key = parts[parts.length - 1];
+  if (!key) return null;
+  return {
+    shift: parts.includes("shift"),
+    alt: parts.includes("alt"),
+    ctrl: parts.includes("ctrl") || parts.includes("control"),
+    meta: parts.includes("meta") || parts.includes("cmd"),
+    key
+  };
+}
+var QaErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { caught: false };
+  }
+  static getDerivedStateFromError() {
+    return { caught: true };
+  }
+  componentDidCatch(err, info) {
+    console.error("[Qapture] Caught error in overlay:", err, info);
+  }
+  render() {
+    if (this.state.caught) return null;
+    return this.props.children;
+  }
+};
+function CaptureGate() {
+  const { captureActive } = useQa();
+  return captureActive ? /* @__PURE__ */ jsx(CaptureMode, {}) : null;
+}
+function QaRootInner({ config }) {
+  const shouldShowInitially = config.alwaysVisible === true || config.visible === true || config.visible === void 0 && !isProduction();
+  const [visible, setVisible] = useState(shouldShowInitially);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const hk = parseHotkey(config.hotkey);
+    if (!hk) return;
+    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);
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [config.hotkey]);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(QaFab, {}),
+    /* @__PURE__ */ jsx(QaPanel, {}),
+    /* @__PURE__ */ jsx(CaptureGate, {})
+  ] });
+}
+function QaRoot({ config }) {
+  return /* @__PURE__ */ jsx(QaErrorBoundary, { children: /* @__PURE__ */ jsx(QaProvider, { config, children: /* @__PURE__ */ jsx(QaRootInner, { config }) }) });
+}
+
+// src/mount/ShadowMount.ts
+function mountQaStudio(config) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return { destroy() {
+    } };
+  }
+  const host = document.createElement("qapture-overlay");
+  host.setAttribute("data-qa-overlay", "true");
+  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 }));
+  return {
+    destroy() {
+      try {
+        root.unmount();
+      } catch {
+      }
+      if (host.parentNode) host.remove();
+      if (typeof document !== "undefined") {
+        document.body.querySelectorAll(":scope > [data-qa-overlay]").forEach((el) => el.remove());
+      }
+    }
+  };
+}
+
+// src/index.ts
+function initQaStudio(config) {
+  if (typeof window === "undefined") {
+    return { destroy() {
+    } };
+  }
+  const { config: resolved, warnings } = validateConfig(config);
+  for (const w of warnings) {
+    console.warn("[Qapture]", w);
+  }
+  return mountQaStudio(resolved);
+}
+function Qapture({ config }) {
+  useEffect(() => {
+    const instance = initQaStudio(config);
+    return () => instance.destroy();
+  }, []);
+  return null;
+}
+
+export { Qapture, initQaStudio };
+//# sourceMappingURL=chunk-OPZF4IVW.js.map
+//# sourceMappingURL=chunk-OPZF4IVW.js.map