@koraidv/react 1.7.10 → 1.8.0

package/dist/index.mjs

@@ -47,16 +47,22 @@ function useKoraIDV() {
     currentChallenge: null,
     completedChallenges: 0,
     isLoading: false,
-    error: null
+    error: null,
+    lastChallengeError: null
   });
   const [selectedDocumentType, setSelectedDocumentType] = useState(null);
   const [documentFrontCaptured, setDocumentFrontCaptured] = useState(false);
   const startVerification = useCallback(
-    async (externalId, tier = "standard") => {
+    async (externalId, tier = "standard", expectedFirstName, expectedLastName) => {
       setState((prev) => ({ ...prev, isLoading: true, error: null }));
       try {
         await sdk.startVerification(
-          { externalId, tier },
+          {
+            externalId,
+            tier,
+            expectedFirstName,
+            expectedLastName
+          },
           {
             onStepChange: (step) => {
               setState((prev) => ({ ...prev, step }));
@@ -241,14 +247,20 @@ function useKoraIDV() {
             ...prev,
             completedChallenges: nextIndex,
             currentChallenge: nextChallenge,
-            isLoading: false
+            isLoading: false,
+            // Clear any prior retake message — the user just succeeded.
+            lastChallengeError: null
           }));
           if (!nextChallenge) {
             setState((prev) => ({ ...prev, step: "processing" }));
           }
           return true;
         }
-        setState((prev) => ({ ...prev, isLoading: false }));
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          lastChallengeError: retakeMessageForChallenge(currentChallenge.type)
+        }));
         return false;
       } catch (error) {
         setState((prev) => ({
@@ -299,7 +311,8 @@ function useKoraIDV() {
       currentChallenge: null,
       completedChallenges: 0,
       isLoading: false,
-      error: null
+      error: null,
+      lastChallengeError: null
     });
   }, [sdk]);
   const retry = useCallback(() => {
@@ -326,9 +339,27 @@ function useKoraIDV() {
     sdk
   };
 }
+function retakeMessageForChallenge(type) {
+  switch (type) {
+    case "blink":
+      return "We didn't catch the blink \u2014 close both eyes briefly and try again.";
+    case "smile":
+      return "We didn't catch the smile \u2014 show your teeth and try again.";
+    case "turn_left":
+      return "Turn your head a bit further to the left and try again.";
+    case "turn_right":
+      return "Turn your head a bit further to the right and try again.";
+    case "nod_up":
+      return "Tilt your head a bit higher and try again.";
+    case "nod_down":
+      return "Tilt your head a bit lower and try again.";
+    default:
+      return "That attempt didn't pass \u2014 follow the prompt and try again.";
+  }
+}
 
 // src/components/VerificationFlow.tsx
-import { useEffect as useEffect8, useState as useState6 } from "react";
+import { useEffect as useEffect11, useState as useState9 } from "react";
 import { KoraError as KoraError2, KoraErrorCode } from "@koraidv/core";
 
 // src/components/styles.ts
@@ -395,6 +426,36 @@ function injectKeyframes() {
       from { opacity: 0; transform: translateY(8px); }
       to { opacity: 1; transform: translateY(0); }
     }
+    /* \u2500\u2500\u2500 VisualGuides motion (v1.8.0) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    @keyframes kora-head-turn-right {
+      0%, 100% { transform: rotate(0deg); }
+      50% { transform: rotate(22deg); }
+    }
+    @keyframes kora-head-turn-left {
+      0%, 100% { transform: rotate(0deg); }
+      50% { transform: rotate(-22deg); }
+    }
+    @keyframes kora-head-tilt-up {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-6px) rotate(-6deg); }
+    }
+    @keyframes kora-head-tilt-down {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(6px) rotate(6deg); }
+    }
+    @keyframes kora-smile {
+      0%, 100% { transform: scaleY(0.5); }
+      50% { transform: scaleY(1.2); }
+    }
+    @keyframes kora-blink {
+      0%, 80%, 100% { transform: scaleY(1); }
+      88% { transform: scaleY(0.05); }
+    }
+    @keyframes kora-nfc-wave {
+      0% { opacity: 0; transform: translateX(-4px); }
+      40% { opacity: 1; }
+      100% { opacity: 0; transform: translateX(6px); }
+    }
   `;
   document.head.appendChild(style);
 }
@@ -1308,7 +1369,7 @@ var styles = {
 };
 
 // src/components/DesignSystem.tsx
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function StepProgressBar({ total, current, isDark = false }) {
   return /* @__PURE__ */ jsx2("div", { style: styles.progressBar, children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ jsx2(
@@ -1381,10 +1442,26 @@ function ScoreMetricRow({ label, score, icon, status, message }) {
     }
   );
 }
-function ProcessingScreen({ steps }) {
+var DEFAULT_AUTO_STEPS = [
+  "Document analyzed",
+  "Checking face match",
+  "Finalizing results"
+];
+function ProcessingScreen({ steps, autoAdvance = true }) {
   useEffect2(() => {
     injectKeyframes();
   }, []);
+  const [autoIndex, setAutoIndex] = useState2(0);
+  useEffect2(() => {
+    if (steps || !autoAdvance) return;
+    if (autoIndex >= DEFAULT_AUTO_STEPS.length - 1) return;
+    const t = setTimeout(() => setAutoIndex((i) => i + 1), 1400);
+    return () => clearTimeout(t);
+  }, [autoIndex, steps, autoAdvance]);
+  const renderedSteps = steps ? steps : DEFAULT_AUTO_STEPS.map((label, i) => ({
+    label,
+    status: i < autoIndex ? "done" : i === autoIndex ? "active" : "pending"
+  }));
   return /* @__PURE__ */ jsxs("div", { style: styles.processingContainer, children: [
     /* @__PURE__ */ jsxs("div", { style: styles.spinnerContainer, children: [
       /* @__PURE__ */ jsx2(
@@ -1435,7 +1512,7 @@ function ProcessingScreen({ steps }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx2("div", { style: styles.processingSteps, children: steps.map((step, i) => /* @__PURE__ */ jsxs("div", { style: styles.processingStep, children: [
+    /* @__PURE__ */ jsx2("div", { style: styles.processingSteps, children: renderedSteps.map((step, i) => /* @__PURE__ */ jsxs("div", { style: styles.processingStep, children: [
       /* @__PURE__ */ jsx2(
         "div",
         {
@@ -1603,11 +1680,11 @@ function ConsentItem({
 }
 
 // src/components/CountrySelectionScreen.tsx
-import { useState as useState2, useMemo as useMemo2 } from "react";
+import { useState as useState3, useMemo as useMemo2 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function CountrySelectionScreen({ countries, onSelect, onCancel }) {
-  const [selected, setSelected] = useState2(null);
-  const [searchQuery, setSearchQuery] = useState2("");
+  const [selected, setSelected] = useState3(null);
+  const [searchQuery, setSearchQuery] = useState3("");
   const filteredCountries = useMemo2(() => {
     const countryList = countries || [];
     if (!searchQuery.trim()) return countryList;
@@ -1757,8 +1834,243 @@ function getIcon(type) {
 }
 
 // src/components/DocumentCaptureScreen.tsx
-import { useRef as useRef2, useEffect as useEffect3, useState as useState3, useCallback as useCallback2 } from "react";
-import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useRef as useRef3, useEffect as useEffect5, useState as useState5, useCallback as useCallback2 } from "react";
+
+// src/components/VisualGuides.tsx
+import { useEffect as useEffect3 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function visualGuideForChallenge(challengeType) {
+  switch (challengeType) {
+    case "turn_left":
+      return "livenessTurnLeft";
+    case "turn_right":
+      return "livenessTurnRight";
+    case "nod_up":
+      return "livenessLookUp";
+    case "nod_down":
+      return "livenessLookDown";
+    case "smile":
+      return "livenessSmile";
+    case "blink":
+      return "livenessBlink";
+    default:
+      return null;
+  }
+}
+function VisualGuide({ kind, size = 96 }) {
+  useEffect3(() => {
+    injectKeyframes();
+  }, []);
+  const common = { width: size, height: size, viewBox: "0 0 100 100" };
+  const fg = colors.teal;
+  const dim = "rgba(255,255,255,0.3)";
+  switch (kind) {
+    case "docFront":
+      return /* @__PURE__ */ jsx6(DocFront, { ...common, fg, dim });
+    case "docBack":
+      return /* @__PURE__ */ jsx6(DocBack, { ...common, fg, dim });
+    case "selfie":
+      return /* @__PURE__ */ jsx6(Selfie, { ...common, fg, dim });
+    case "nfcScan":
+      return /* @__PURE__ */ jsx6(NfcScan, { ...common, fg, dim });
+    case "livenessTurnLeft":
+      return /* @__PURE__ */ jsx6(HeadTurn, { ...common, fg, dim, right: false });
+    case "livenessTurnRight":
+      return /* @__PURE__ */ jsx6(HeadTurn, { ...common, fg, dim, right: true });
+    case "livenessLookUp":
+      return /* @__PURE__ */ jsx6(HeadTilt, { ...common, fg, dim, up: true });
+    case "livenessLookDown":
+      return /* @__PURE__ */ jsx6(HeadTilt, { ...common, fg, dim, up: false });
+    case "livenessSmile":
+      return /* @__PURE__ */ jsx6(Smile, { ...common, fg, dim });
+    case "livenessBlink":
+      return /* @__PURE__ */ jsx6(Blink, { ...common, fg, dim });
+  }
+}
+function DocFront({ width, height, viewBox, fg, dim }) {
+  return /* @__PURE__ */ jsxs5("svg", { width, height, viewBox, fill: "none", children: [
+    /* @__PURE__ */ jsx6("rect", { x: "8", y: "26", width: "84", height: "48", rx: "5", stroke: fg, strokeWidth: "2.5" }),
+    /* @__PURE__ */ jsx6("rect", { x: "14", y: "34", width: "22", height: "28", rx: "2", fill: dim }),
+    /* @__PURE__ */ jsx6("rect", { x: "42", y: "36", width: "44", height: "3", rx: "1.5", fill: fg }),
+    /* @__PURE__ */ jsx6("rect", { x: "42", y: "44", width: "36", height: "2.5", rx: "1.25", fill: dim }),
+    /* @__PURE__ */ jsx6("rect", { x: "42", y: "50", width: "40", height: "2.5", rx: "1.25", fill: dim }),
+    /* @__PURE__ */ jsx6("rect", { x: "42", y: "56", width: "30", height: "2.5", rx: "1.25", fill: dim })
+  ] });
+}
+function DocBack({ width, height, viewBox, fg, dim }) {
+  return /* @__PURE__ */ jsxs5("svg", { width, height, viewBox, fill: "none", children: [
+    /* @__PURE__ */ jsx6("rect", { x: "8", y: "26", width: "84", height: "48", rx: "5", stroke: fg, strokeWidth: "2.5" }),
+    [16, 19, 22, 26, 28, 32, 35, 39, 42, 46, 49, 53, 56, 60].map((x, i) => /* @__PURE__ */ jsx6(
+      "rect",
+      {
+        x,
+        y: "34",
+        width: i % 3 === 0 ? 2 : 1.2,
+        height: "20",
+        fill: fg
+      },
+      i
+    )),
+    /* @__PURE__ */ jsx6("line", { x1: "14", y1: "64", x2: "58", y2: "64", stroke: dim, strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx6("rect", { x: "66", y: "34", width: "20", height: "20", rx: "1", fill: dim })
+  ] });
+}
+function Selfie({ width, height, viewBox, fg, dim }) {
+  return /* @__PURE__ */ jsxs5("svg", { width, height, viewBox, fill: "none", children: [
+    /* @__PURE__ */ jsx6("ellipse", { cx: "50", cy: "42", rx: "22", ry: "28", stroke: fg, strokeWidth: "2.5" }),
+    /* @__PURE__ */ jsx6("circle", { cx: "42", cy: "38", r: "2.5", fill: fg }),
+    /* @__PURE__ */ jsx6("circle", { cx: "58", cy: "38", r: "2.5", fill: fg }),
+    /* @__PURE__ */ jsx6("path", { d: "M 40 50 Q 50 56 60 50", stroke: fg, strokeWidth: "2", strokeLinecap: "round", fill: "none" }),
+    /* @__PURE__ */ jsx6("path", { d: "M 18 92 Q 18 76 36 70 L 64 70 Q 82 76 82 92", stroke: dim, strokeWidth: "2", fill: "none" })
+  ] });
+}
+function NfcScan({ width, height, viewBox, fg, dim }) {
+  return /* @__PURE__ */ jsxs5("svg", { width, height, viewBox, fill: "none", children: [
+    /* @__PURE__ */ jsx6("rect", { x: "14", y: "40", width: "40", height: "50", rx: "3", stroke: dim, strokeWidth: "2" }),
+    /* @__PURE__ */ jsx6("circle", { cx: "34", cy: "60", r: "6", stroke: dim, strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx6("rect", { x: "62", y: "22", width: "26", height: "52", rx: "4", stroke: fg, strokeWidth: "2.5" }),
+    /* @__PURE__ */ jsx6("rect", { x: "66", y: "26", width: "18", height: "38", rx: "1.5", fill: dim, opacity: "0.5" }),
+    /* @__PURE__ */ jsx6("path", { d: "M 58 48 Q 52 48 50 56", stroke: fg, strokeWidth: "2", fill: "none", style: { animation: "kora-nfc-wave 1.6s ease-out infinite" } }),
+    /* @__PURE__ */ jsx6("path", { d: "M 58 44 Q 50 44 46 56", stroke: fg, strokeWidth: "2", fill: "none", opacity: "0.7", style: { animation: "kora-nfc-wave 1.6s ease-out infinite 0.3s" } })
+  ] });
+}
+function HeadTurn({ width, height, viewBox, fg, dim, right }) {
+  const arrowPath = right ? "M 30 12 L 70 12 L 64 6 M 70 12 L 64 18" : "M 70 12 L 30 12 L 36 6 M 30 12 L 36 18";
+  return /* @__PURE__ */ jsxs5("svg", { width, height, viewBox, fill: "none", children: [
+    /* @__PURE__ */ jsx6("path", { d: arrowPath, stroke: fg, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+    /* @__PURE__ */ jsxs5(
+      "g",
+      {
+        style: {
+          transformOrigin: "50px 56px",
+          animation: right ? "kora-head-turn-right 2s ease-in-out infinite" : "kora-head-turn-left 2s ease-in-out infinite"
+        },
+        children: [
+          /* @__PURE__ */ jsx6("ellipse", { cx: "50", cy: "55", rx: "20", ry: "26", stroke: fg, strokeWidth: "2.5" }),
+          /* @__PURE__ */ jsx6("circle", { cx: "42", cy: "50", r: "2", fill: fg }),
+          /* @__PURE__ */ jsx6("circle", { cx: "58", cy: "50", r: "2", fill: fg }),
+          /* @__PURE__ */ jsx6("path", { d: "M 50 54 L 50 62", stroke: dim, strokeWidth: "1.5", strokeLinecap: "round" })
+        ]
+      }
+    )
+  ] });
+}
+function HeadTilt({ width, height, viewBox, fg, dim, up }) {
+  const arrowPath = up ? "M 50 92 L 50 14 M 44 22 L 50 14 L 56 22" : "M 50 14 L 50 92 M 44 84 L 50 92 L 56 84";
+  return /* @__PURE__ */ jsxs5("svg", { width, height, viewBox, fill: "none", children: [
+    /* @__PURE__ */ jsx6("path", { d: arrowPath, stroke: fg, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", opacity: "0.4", fill: "none" }),
+    /* @__PURE__ */ jsxs5(
+      "g",
+      {
+        style: {
+          transformOrigin: "50px 56px",
+          animation: up ? "kora-head-tilt-up 2s ease-in-out infinite" : "kora-head-tilt-down 2s ease-in-out infinite"
+        },
+        children: [
+          /* @__PURE__ */ jsx6("ellipse", { cx: "50", cy: "55", rx: "20", ry: "26", stroke: fg, strokeWidth: "2.5" }),
+          /* @__PURE__ */ jsx6("circle", { cx: "42", cy: "50", r: "2", fill: fg }),
+          /* @__PURE__ */ jsx6("circle", { cx: "58", cy: "50", r: "2", fill: fg }),
+          /* @__PURE__ */ jsx6("path", { d: "M 50 54 L 50 62", stroke: dim, strokeWidth: "1.5", strokeLinecap: "round" })
+        ]
+      }
+    )
+  ] });
+}
+function Smile({ width, height, viewBox, fg, dim }) {
+  return /* @__PURE__ */ jsxs5("svg", { width, height, viewBox, fill: "none", children: [
+    /* @__PURE__ */ jsx6("ellipse", { cx: "50", cy: "50", rx: "24", ry: "30", stroke: fg, strokeWidth: "2.5" }),
+    /* @__PURE__ */ jsx6("circle", { cx: "40", cy: "44", r: "2.5", fill: fg }),
+    /* @__PURE__ */ jsx6("circle", { cx: "60", cy: "44", r: "2.5", fill: fg }),
+    /* @__PURE__ */ jsx6(
+      "path",
+      {
+        d: "M 38 60 Q 50 68 62 60",
+        stroke: fg,
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        fill: "none",
+        style: { animation: "kora-smile 2s ease-in-out infinite", transformOrigin: "50px 60px" }
+      }
+    ),
+    /* @__PURE__ */ jsx6("line", { x1: "40", y1: "60", x2: "60", y2: "60", stroke: dim, strokeWidth: "1.5", opacity: "0.3" })
+  ] });
+}
+function Blink({ width, height, viewBox, fg, dim }) {
+  return /* @__PURE__ */ jsxs5("svg", { width, height, viewBox, fill: "none", children: [
+    /* @__PURE__ */ jsx6("ellipse", { cx: "50", cy: "50", rx: "24", ry: "30", stroke: fg, strokeWidth: "2.5" }),
+    /* @__PURE__ */ jsxs5("g", { style: { animation: "kora-blink 1.6s ease-in-out infinite" }, children: [
+      /* @__PURE__ */ jsx6("circle", { cx: "40", cy: "44", r: "3", fill: fg }),
+      /* @__PURE__ */ jsx6("circle", { cx: "60", cy: "44", r: "3", fill: fg })
+    ] }),
+    /* @__PURE__ */ jsx6("path", { d: "M 42 60 Q 50 64 58 60", stroke: dim, strokeWidth: "2", strokeLinecap: "round", fill: "none" })
+  ] });
+}
+
+// src/hooks/useDocumentDetection.ts
+import { useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
+var FRAME_INTERVAL_MS = 300;
+function useDocumentDetection(videoRef, side) {
+  const [signals, setSignals] = useState4({
+    documentDetected: false,
+    detectorActive: false
+  });
+  const detectorRef = useRef2(null);
+  const intervalRef = useRef2(null);
+  useEffect4(() => {
+    let cancelled = false;
+    async function setup() {
+      const win = typeof window !== "undefined" ? window : null;
+      if (!win) return;
+      let DetectorCtor = null;
+      if (side === "front" && "FaceDetector" in win) {
+        DetectorCtor = win["FaceDetector"];
+      } else if (side === "back" && "BarcodeDetector" in win) {
+        DetectorCtor = win["BarcodeDetector"];
+      }
+      if (!DetectorCtor) {
+        return;
+      }
+      try {
+        const detector = new DetectorCtor(
+          side === "front" ? { fastMode: true, maxDetectedFaces: 1 } : { formats: ["pdf417", "qr_code", "data_matrix", "code_128"] }
+        );
+        if (cancelled) return;
+        detectorRef.current = detector;
+        setSignals((prev) => ({ ...prev, detectorActive: true }));
+      } catch {
+        return;
+      }
+      intervalRef.current = setInterval(async () => {
+        const detector = detectorRef.current;
+        const video = videoRef.current;
+        if (!detector || !video || video.readyState < 2) return;
+        try {
+          const results = await detector.detect(video);
+          if (cancelled) return;
+          setSignals((prev) => {
+            const next = results.length > 0;
+            if (prev.documentDetected === next) return prev;
+            return { ...prev, documentDetected: next };
+          });
+        } catch {
+        }
+      }, FRAME_INTERVAL_MS);
+    }
+    setup();
+    return () => {
+      cancelled = true;
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      detectorRef.current = null;
+    };
+  }, [videoRef, side]);
+  return signals;
+}
+
+// src/components/DocumentCaptureScreen.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var qualityIssueMessages = {
   face_blurred: "Photo on document is blurry. Retake in better lighting.",
   low_resolution: "Image quality too low. Move closer to document.",
@@ -1775,23 +2087,25 @@ function DocumentCaptureScreen({
   requiresBack = true,
   onQualityCheck,
   onCapture,
-  onCancel
+  onCancel,
+  showVisualGuides = true
 }) {
-  const videoRef = useRef2(null);
-  const canvasRef = useRef2(null);
-  const guideRef = useRef2(null);
-  const [stream, setStream] = useState3(null);
-  const [isCapturing, setIsCapturing] = useState3(false);
-  const [error, setError] = useState3(null);
-  const [capturedImage, setCapturedImage] = useState3(null);
-  const [capturedBlob, setCapturedBlob] = useState3(null);
-  const [qualityResult, setQualityResult] = useState3(null);
-  const [isCheckingQuality, setIsCheckingQuality] = useState3(false);
-  const [retakeCount, setRetakeCount] = useState3(0);
-  useEffect3(() => {
+  const videoRef = useRef3(null);
+  const canvasRef = useRef3(null);
+  const guideRef = useRef3(null);
+  const [stream, setStream] = useState5(null);
+  const documentSignals = useDocumentDetection(videoRef, side);
+  const [isCapturing, setIsCapturing] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [capturedImage, setCapturedImage] = useState5(null);
+  const [capturedBlob, setCapturedBlob] = useState5(null);
+  const [qualityResult, setQualityResult] = useState5(null);
+  const [isCheckingQuality, setIsCheckingQuality] = useState5(false);
+  const [retakeCount, setRetakeCount] = useState5(0);
+  useEffect5(() => {
     injectKeyframes();
   }, []);
-  useEffect3(() => {
+  useEffect5(() => {
     let mounted = true;
     async function startCamera() {
       try {
@@ -1813,7 +2127,7 @@ function DocumentCaptureScreen({
       mounted = false;
     };
   }, [capturedImage]);
-  useEffect3(() => {
+  useEffect5(() => {
     return () => {
       stream?.getTracks().forEach((t) => t.stop());
     };
@@ -1906,24 +2220,24 @@ function DocumentCaptureScreen({
     }
   };
   if (error) {
-    return /* @__PURE__ */ jsx6("div", { style: styles.container, children: /* @__PURE__ */ jsxs5("div", { style: styles.errorContainer, children: [
-      /* @__PURE__ */ jsx6("p", { style: styles.errorText, children: error }),
-      /* @__PURE__ */ jsx6("button", { style: styles.primaryButton, onClick: onCancel, children: "Go Back" })
+    return /* @__PURE__ */ jsx7("div", { style: styles.container, children: /* @__PURE__ */ jsxs6("div", { style: styles.errorContainer, children: [
+      /* @__PURE__ */ jsx7("p", { style: styles.errorText, children: error }),
+      /* @__PURE__ */ jsx7("button", { style: styles.primaryButton, onClick: onCancel, children: "Go Back" })
     ] }) });
   }
   if (capturedImage) {
     const qualityPassed = qualityResult && qualityResult.qualityScore >= 60;
     const qualityFailed = qualityResult && qualityResult.qualityScore < 60;
     const canContinueAnyway = qualityFailed && retakeCount >= 2;
-    return /* @__PURE__ */ jsxs5("div", { style: styles.darkContainer, children: [
-      /* @__PURE__ */ jsx6(StepProgressBar, { total: 5, current: 3, isDark: true }),
-      /* @__PURE__ */ jsxs5("div", { style: styles.darkScreenHeader, children: [
-        /* @__PURE__ */ jsx6("div", { style: { width: 40 } }),
-        /* @__PURE__ */ jsx6("h1", { style: styles.darkScreenTitle, children: "Review your photo" }),
-        /* @__PURE__ */ jsx6("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
+    return /* @__PURE__ */ jsxs6("div", { style: styles.darkContainer, children: [
+      /* @__PURE__ */ jsx7(StepProgressBar, { total: 5, current: 3, isDark: true }),
+      /* @__PURE__ */ jsxs6("div", { style: styles.darkScreenHeader, children: [
+        /* @__PURE__ */ jsx7("div", { style: { width: 40 } }),
+        /* @__PURE__ */ jsx7("h1", { style: styles.darkScreenTitle, children: "Review your photo" }),
+        /* @__PURE__ */ jsx7("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
       ] }),
-      /* @__PURE__ */ jsx6("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "24px" }, children: /* @__PURE__ */ jsxs5("div", { style: styles.reviewCard, children: [
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "24px" }, children: /* @__PURE__ */ jsxs6("div", { style: styles.reviewCard, children: [
+        /* @__PURE__ */ jsx7(
           "img",
           {
             src: capturedImage,
@@ -1931,42 +2245,42 @@ function DocumentCaptureScreen({
             style: { width: "100%", maxWidth: "300px", borderRadius: "16px", display: "block", margin: "0 auto" }
           }
         ),
-        isCheckingQuality && /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx6("span", { style: { ...styles.reviewBadge, backgroundColor: "rgba(255,255,255,0.1)" }, children: "Checking quality..." }) }),
-        qualityPassed && /* @__PURE__ */ jsxs5(Fragment, { children: [
-          /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsxs5("span", { style: styles.reviewBadge, children: [
+        isCheckingQuality && /* @__PURE__ */ jsx7("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx7("span", { style: { ...styles.reviewBadge, backgroundColor: "rgba(255,255,255,0.1)" }, children: "Checking quality..." }) }),
+        qualityPassed && /* @__PURE__ */ jsxs6(Fragment, { children: [
+          /* @__PURE__ */ jsx7("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsxs6("span", { style: styles.reviewBadge, children: [
             "\u2713 Quality score: ",
             Math.round(qualityResult.qualityScore),
             "%"
           ] }) }),
-          /* @__PURE__ */ jsxs5("div", { style: styles.qualityChecks, children: [
-            /* @__PURE__ */ jsx6(QualityCheck, { label: "Sharp" }),
-            /* @__PURE__ */ jsx6(QualityCheck, { label: "Well-lit" }),
-            /* @__PURE__ */ jsx6(QualityCheck, { label: "Readable" })
+          /* @__PURE__ */ jsxs6("div", { style: styles.qualityChecks, children: [
+            /* @__PURE__ */ jsx7(QualityCheck, { label: "Sharp" }),
+            /* @__PURE__ */ jsx7(QualityCheck, { label: "Well-lit" }),
+            /* @__PURE__ */ jsx7(QualityCheck, { label: "Readable" })
           ] })
         ] }),
-        qualityFailed && /* @__PURE__ */ jsxs5(Fragment, { children: [
-          /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsxs5("span", { style: { ...styles.reviewBadge, backgroundColor: "rgba(239,68,68,0.15)", color: "#ef4444" }, children: [
+        qualityFailed && /* @__PURE__ */ jsxs6(Fragment, { children: [
+          /* @__PURE__ */ jsx7("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsxs6("span", { style: { ...styles.reviewBadge, backgroundColor: "rgba(239,68,68,0.15)", color: "#ef4444" }, children: [
             "\u26A0 Quality score: ",
             Math.round(qualityResult.qualityScore),
             "%"
           ] }) }),
-          /* @__PURE__ */ jsx6("div", { style: { padding: "12px 0" }, children: qualityResult.qualityIssues.map((issue, i) => /* @__PURE__ */ jsx6("p", { style: { color: "rgba(255,255,255,0.7)", fontSize: "13px", margin: "4px 0", textAlign: "center" }, children: qualityIssueMessages[issue] || issue }, i)) })
+          /* @__PURE__ */ jsx7("div", { style: { padding: "12px 0" }, children: qualityResult.qualityIssues.map((issue, i) => /* @__PURE__ */ jsx7("p", { style: { color: "rgba(255,255,255,0.7)", fontSize: "13px", margin: "4px 0", textAlign: "center" }, children: qualityIssueMessages[issue] || issue }, i)) })
         ] }),
-        !qualityResult && !isCheckingQuality && /* @__PURE__ */ jsxs5(Fragment, { children: [
-          /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx6("span", { style: styles.reviewBadge, children: "\u2713 Good quality" }) }),
-          /* @__PURE__ */ jsxs5("div", { style: styles.qualityChecks, children: [
-            /* @__PURE__ */ jsx6(QualityCheck, { label: "Sharp" }),
-            /* @__PURE__ */ jsx6(QualityCheck, { label: "Well-lit" }),
-            /* @__PURE__ */ jsx6(QualityCheck, { label: "No glare" })
+        !qualityResult && !isCheckingQuality && /* @__PURE__ */ jsxs6(Fragment, { children: [
+          /* @__PURE__ */ jsx7("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx7("span", { style: styles.reviewBadge, children: "\u2713 Good quality" }) }),
+          /* @__PURE__ */ jsxs6("div", { style: styles.qualityChecks, children: [
+            /* @__PURE__ */ jsx7(QualityCheck, { label: "Sharp" }),
+            /* @__PURE__ */ jsx7(QualityCheck, { label: "Well-lit" }),
+            /* @__PURE__ */ jsx7(QualityCheck, { label: "No glare" })
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx6("div", { style: styles.reviewButtonsRow, children: qualityFailed ? /* @__PURE__ */ jsxs5(Fragment, { children: [
-        /* @__PURE__ */ jsx6("button", { style: { ...styles.darkOutlineButton, flex: 1 }, onClick: handleRetake, children: "Retake" }),
-        canContinueAnyway && /* @__PURE__ */ jsx6("button", { style: { ...styles.primaryButton, flex: 1 }, onClick: handleContinueAnyway, children: "Continue anyway" })
-      ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
-        /* @__PURE__ */ jsx6("button", { style: { ...styles.darkOutlineButton, flex: 1 }, onClick: handleRetake, children: "Retake" }),
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("div", { style: styles.reviewButtonsRow, children: qualityFailed ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsx7("button", { style: { ...styles.darkOutlineButton, flex: 1 }, onClick: handleRetake, children: "Retake" }),
+        canContinueAnyway && /* @__PURE__ */ jsx7("button", { style: { ...styles.primaryButton, flex: 1 }, onClick: handleContinueAnyway, children: "Continue anyway" })
+      ] }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsx7("button", { style: { ...styles.darkOutlineButton, flex: 1 }, onClick: handleRetake, children: "Retake" }),
+        /* @__PURE__ */ jsx7(
           "button",
           {
             style: { ...styles.primaryButton, flex: 1, opacity: isCheckingQuality ? 0.5 : 1 },
@@ -1978,29 +2292,54 @@ function DocumentCaptureScreen({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs5("div", { style: styles.captureContainer, children: [
-    /* @__PURE__ */ jsx6(StepProgressBar, { total: 5, current: 3, isDark: true }),
-    /* @__PURE__ */ jsxs5("div", { style: styles.darkScreenHeader, children: [
-      /* @__PURE__ */ jsx6("div", { style: { width: 40 } }),
-      /* @__PURE__ */ jsxs5("div", { style: { flex: 1, textAlign: "center" }, children: [
-        /* @__PURE__ */ jsx6("h1", { style: { ...styles.darkScreenTitle, margin: 0 }, children: side === "front" ? "Front of ID" : "Back of ID" }),
-        documentType && /* @__PURE__ */ jsx6("p", { style: styles.darkScreenSubtitle, children: documentType })
+  return /* @__PURE__ */ jsxs6("div", { style: styles.captureContainer, children: [
+    /* @__PURE__ */ jsx7(StepProgressBar, { total: 5, current: 3, isDark: true }),
+    /* @__PURE__ */ jsxs6("div", { style: styles.darkScreenHeader, children: [
+      /* @__PURE__ */ jsx7("div", { style: { width: 40 } }),
+      /* @__PURE__ */ jsxs6("div", { style: { flex: 1, textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx7("h1", { style: { ...styles.darkScreenTitle, margin: 0 }, children: side === "front" ? "Front of ID" : "Back of ID" }),
+        documentType && /* @__PURE__ */ jsx7("p", { style: styles.darkScreenSubtitle, children: documentType })
       ] }),
-      /* @__PURE__ */ jsx6("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
+      /* @__PURE__ */ jsx7("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { style: styles.cameraContainer, children: [
-      /* @__PURE__ */ jsx6("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, style: styles.cameraVideo }),
-      /* @__PURE__ */ jsx6("div", { style: styles.documentOverlay, children: /* @__PURE__ */ jsxs5("div", { ref: guideRef, style: styles.documentFrame, children: [
-        /* @__PURE__ */ jsx6("div", { style: { ...styles.corner, top: 0, left: 0 } }),
-        /* @__PURE__ */ jsx6("div", { style: { ...styles.corner, top: 0, right: 0, transform: "rotate(90deg)" } }),
-        /* @__PURE__ */ jsx6("div", { style: { ...styles.corner, bottom: 0, right: 0, transform: "rotate(180deg)" } }),
-        /* @__PURE__ */ jsx6("div", { style: { ...styles.corner, bottom: 0, left: 0, transform: "rotate(270deg)" } }),
-        /* @__PURE__ */ jsx6("div", { style: styles.scanLine })
-      ] }) }),
-      /* @__PURE__ */ jsx6("canvas", { ref: canvasRef, style: { display: "none" } })
+    showVisualGuides && /* @__PURE__ */ jsx7("div", { style: { display: "flex", justifyContent: "center", padding: "6px 0 0" }, children: /* @__PURE__ */ jsx7(VisualGuide, { kind: side === "front" ? "docFront" : "docBack", size: 56 }) }),
+    /* @__PURE__ */ jsxs6("div", { style: styles.cameraContainer, children: [
+      /* @__PURE__ */ jsx7("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, style: styles.cameraVideo }),
+      /* @__PURE__ */ jsxs6("div", { style: styles.documentOverlay, children: [
+        /* @__PURE__ */ jsxs6("div", { ref: guideRef, style: styles.documentFrame, children: [
+          /* @__PURE__ */ jsx7("div", { style: { ...styles.corner, top: 0, left: 0 } }),
+          /* @__PURE__ */ jsx7("div", { style: { ...styles.corner, top: 0, right: 0, transform: "rotate(90deg)" } }),
+          /* @__PURE__ */ jsx7("div", { style: { ...styles.corner, bottom: 0, right: 0, transform: "rotate(180deg)" } }),
+          /* @__PURE__ */ jsx7("div", { style: { ...styles.corner, bottom: 0, left: 0, transform: "rotate(270deg)" } }),
+          /* @__PURE__ */ jsx7("div", { style: styles.scanLine })
+        ] }),
+        documentSignals.detectorActive && /* @__PURE__ */ jsx7(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: "24px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              padding: "6px 14px",
+              borderRadius: "999px",
+              fontSize: "12px",
+              fontWeight: 600,
+              color: documentSignals.documentDetected ? colors.success : "rgba(255,255,255,0.55)",
+              backgroundColor: documentSignals.documentDetected ? "rgba(16,185,129,0.15)" : "rgba(0,0,0,0.35)",
+              border: documentSignals.documentDetected ? "1px solid rgba(16,185,129,0.4)" : "1px solid rgba(255,255,255,0.12)",
+              transition: "all 200ms",
+              pointerEvents: "none",
+              whiteSpace: "nowrap"
+            },
+            children: documentSignals.documentDetected ? "\u2713 Document detected \u2014 fill the frame" : "Position your ID inside the guide"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx7("canvas", { ref: canvasRef, style: { display: "none" } })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { style: styles.stepPillsRow, children: [
-      /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsxs6("div", { style: styles.stepPillsRow, children: [
+      /* @__PURE__ */ jsx7(
         "span",
         {
           style: {
@@ -2011,7 +2350,7 @@ function DocumentCaptureScreen({
           children: "Front"
         }
       ),
-      requiresBack && /* @__PURE__ */ jsx6(
+      requiresBack && /* @__PURE__ */ jsx7(
         "span",
         {
           style: {
@@ -2023,7 +2362,7 @@ function DocumentCaptureScreen({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", padding: "8px 0" }, children: /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsx7("div", { style: { textAlign: "center", padding: "8px 0" }, children: /* @__PURE__ */ jsxs6(
       "span",
       {
         style: {
@@ -2032,44 +2371,44 @@ function DocumentCaptureScreen({
           color: colors.teal
         },
         children: [
-          /* @__PURE__ */ jsx6("span", { style: { ...styles.pulsingDot, backgroundColor: colors.teal } }),
+          /* @__PURE__ */ jsx7("span", { style: { ...styles.pulsingDot, backgroundColor: colors.teal } }),
           "Scanning document..."
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx6("div", { style: styles.captureFooter, children: /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7("div", { style: styles.captureFooter, children: /* @__PURE__ */ jsx7(
       "button",
       {
         style: { ...styles.captureButton, opacity: isCapturing ? 0.5 : 1 },
         onClick: handleCapture,
         disabled: isCapturing,
-        children: /* @__PURE__ */ jsx6("div", { style: styles.captureButtonInner })
+        children: /* @__PURE__ */ jsx7("div", { style: styles.captureButtonInner })
       }
     ) })
   ] });
 }
 function QualityCheck({ label }) {
-  return /* @__PURE__ */ jsxs5("div", { style: styles.qualityCheck, children: [
-    /* @__PURE__ */ jsx6("div", { style: styles.qualityCheckIcon, children: "\u2713" }),
-    /* @__PURE__ */ jsx6("span", { style: styles.qualityCheckLabel, children: label })
+  return /* @__PURE__ */ jsxs6("div", { style: styles.qualityCheck, children: [
+    /* @__PURE__ */ jsx7("div", { style: styles.qualityCheckIcon, children: "\u2713" }),
+    /* @__PURE__ */ jsx7("span", { style: styles.qualityCheckLabel, children: label })
   ] });
 }
 
 // src/components/FlipDocumentScreen.tsx
-import { useEffect as useEffect4 } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useEffect as useEffect6 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function FlipDocumentScreen({ onContinue, onCancel }) {
-  useEffect4(() => {
+  useEffect6(() => {
     injectKeyframes();
   }, []);
-  return /* @__PURE__ */ jsxs6("div", { style: styles.darkContainer, children: [
-    /* @__PURE__ */ jsx7(StepProgressBar, { total: 5, current: 3, isDark: true }),
-    /* @__PURE__ */ jsxs6("div", { style: styles.darkScreenHeader, children: [
-      /* @__PURE__ */ jsx7("div", { style: { width: 40 } }),
-      /* @__PURE__ */ jsx7("h1", { style: styles.darkScreenTitle, children: "Flip your document" }),
-      /* @__PURE__ */ jsx7("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
+  return /* @__PURE__ */ jsxs7("div", { style: styles.darkContainer, children: [
+    /* @__PURE__ */ jsx8(StepProgressBar, { total: 5, current: 3, isDark: true }),
+    /* @__PURE__ */ jsxs7("div", { style: styles.darkScreenHeader, children: [
+      /* @__PURE__ */ jsx8("div", { style: { width: 40 } }),
+      /* @__PURE__ */ jsx8("h1", { style: styles.darkScreenTitle, children: "Flip your document" }),
+      /* @__PURE__ */ jsx8("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
     ] }),
-    /* @__PURE__ */ jsxs6("div", { style: {
+    /* @__PURE__ */ jsxs7("div", { style: {
       flex: 1,
       display: "flex",
       flexDirection: "column",
@@ -2078,7 +2417,7 @@ function FlipDocumentScreen({ onContinue, onCancel }) {
       padding: "24px",
       gap: "32px"
     }, children: [
-      /* @__PURE__ */ jsx7("div", { style: {
+      /* @__PURE__ */ jsx8("div", { style: {
         width: "120px",
         height: "120px",
         borderRadius: "50%",
@@ -2086,18 +2425,18 @@ function FlipDocumentScreen({ onContinue, onCancel }) {
         display: "flex",
         alignItems: "center",
         justifyContent: "center"
-      }, children: /* @__PURE__ */ jsxs6("svg", { width: "56", height: "56", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx7("path", { d: "M9 3L5 6.99H8V14H10V6.99H13L9 3Z", fill: colors.teal }),
-        /* @__PURE__ */ jsx7("path", { d: "M16 17.01V10H14V17.01H11L15 21L19 17.01H16Z", fill: colors.teal })
+      }, children: /* @__PURE__ */ jsxs7("svg", { width: "56", height: "56", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx8("path", { d: "M9 3L5 6.99H8V14H10V6.99H13L9 3Z", fill: colors.teal }),
+        /* @__PURE__ */ jsx8("path", { d: "M16 17.01V10H14V17.01H11L15 21L19 17.01H16Z", fill: colors.teal })
       ] }) }),
-      /* @__PURE__ */ jsxs6("div", { style: { textAlign: "center" }, children: [
-        /* @__PURE__ */ jsx7("h2", { style: {
+      /* @__PURE__ */ jsxs7("div", { style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx8("h2", { style: {
           fontSize: "22px",
           fontWeight: 700,
           color: colors.white,
           margin: "0 0 12px 0"
         }, children: "Now capture the back" }),
-        /* @__PURE__ */ jsx7("p", { style: {
+        /* @__PURE__ */ jsx8("p", { style: {
           fontSize: "15px",
           color: "rgba(255,255,255,0.6)",
           margin: 0,
@@ -2105,38 +2444,38 @@ function FlipDocumentScreen({ onContinue, onCancel }) {
           maxWidth: "280px"
         }, children: "Turn your document over to the back side, then tap continue to take a photo." })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { style: styles.stepPillsRow, children: [
-        /* @__PURE__ */ jsx7("span", { style: {
+      /* @__PURE__ */ jsxs7("div", { style: styles.stepPillsRow, children: [
+        /* @__PURE__ */ jsx8("span", { style: {
           ...styles.stepPill,
           backgroundColor: "rgba(16,185,129,0.15)",
           color: colors.success
         }, children: "\u2713 Front" }),
-        /* @__PURE__ */ jsx7("span", { style: {
+        /* @__PURE__ */ jsx8("span", { style: {
           ...styles.stepPill,
           backgroundColor: colors.teal,
           color: colors.white
         }, children: "Back" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx7("div", { style: { padding: "24px" }, children: /* @__PURE__ */ jsx7("button", { style: styles.primaryButton, onClick: onContinue, children: "Continue" }) })
+    /* @__PURE__ */ jsx8("div", { style: { padding: "24px" }, children: /* @__PURE__ */ jsx8("button", { style: styles.primaryButton, onClick: onContinue, children: "Continue" }) })
   ] });
 }
 
 // src/components/SelfieCaptureScreen.tsx
-import { useRef as useRef3, useEffect as useEffect5, useState as useState4, useCallback as useCallback3 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-function SelfieCaptureScreen({ onCapture, onCancel }) {
-  const videoRef = useRef3(null);
-  const canvasRef = useRef3(null);
-  const [stream, setStream] = useState4(null);
-  const [isCapturing, setIsCapturing] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [capturedImage, setCapturedImage] = useState4(null);
-  const [capturedBlob, setCapturedBlob] = useState4(null);
-  useEffect5(() => {
+import { useRef as useRef4, useEffect as useEffect7, useState as useState6, useCallback as useCallback3 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function SelfieCaptureScreen({ onCapture, onCancel, showVisualGuides = true }) {
+  const videoRef = useRef4(null);
+  const canvasRef = useRef4(null);
+  const [stream, setStream] = useState6(null);
+  const [isCapturing, setIsCapturing] = useState6(false);
+  const [error, setError] = useState6(null);
+  const [capturedImage, setCapturedImage] = useState6(null);
+  const [capturedBlob, setCapturedBlob] = useState6(null);
+  useEffect7(() => {
     injectKeyframes();
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     let mounted = true;
     async function startCamera() {
       try {
@@ -2158,7 +2497,7 @@ function SelfieCaptureScreen({ onCapture, onCancel }) {
       mounted = false;
     };
   }, [capturedImage]);
-  useEffect5(() => {
+  useEffect7(() => {
     return () => {
       stream?.getTracks().forEach((t) => t.stop());
     };
@@ -2202,22 +2541,22 @@ function SelfieCaptureScreen({ onCapture, onCancel }) {
     }
   };
   if (error) {
-    return /* @__PURE__ */ jsx8("div", { style: styles.container, children: /* @__PURE__ */ jsxs7("div", { style: styles.errorContainer, children: [
-      /* @__PURE__ */ jsx8("p", { style: styles.errorText, children: error }),
-      /* @__PURE__ */ jsx8("button", { style: styles.primaryButton, onClick: onCancel, children: "Go Back" })
+    return /* @__PURE__ */ jsx9("div", { style: styles.container, children: /* @__PURE__ */ jsxs8("div", { style: styles.errorContainer, children: [
+      /* @__PURE__ */ jsx9("p", { style: styles.errorText, children: error }),
+      /* @__PURE__ */ jsx9("button", { style: styles.primaryButton, onClick: onCancel, children: "Go Back" })
     ] }) });
   }
   if (capturedImage) {
-    return /* @__PURE__ */ jsxs7("div", { style: styles.darkContainer, children: [
-      /* @__PURE__ */ jsx8(StepProgressBar, { total: 5, current: 4, isDark: true }),
-      /* @__PURE__ */ jsxs7("div", { style: styles.darkScreenHeader, children: [
-        /* @__PURE__ */ jsx8("div", { style: { width: 40 } }),
-        /* @__PURE__ */ jsx8("h1", { style: styles.darkScreenTitle, children: "Does this look like you?" }),
-        /* @__PURE__ */ jsx8("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
+    return /* @__PURE__ */ jsxs8("div", { style: styles.darkContainer, children: [
+      /* @__PURE__ */ jsx9(StepProgressBar, { total: 5, current: 4, isDark: true }),
+      /* @__PURE__ */ jsxs8("div", { style: styles.darkScreenHeader, children: [
+        /* @__PURE__ */ jsx9("div", { style: { width: 40 } }),
+        /* @__PURE__ */ jsx9("h1", { style: styles.darkScreenTitle, children: "Does this look like you?" }),
+        /* @__PURE__ */ jsx9("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
       ] }),
-      /* @__PURE__ */ jsx8("p", { style: styles.darkScreenSubtitle, children: "Check clarity and lighting" }),
-      /* @__PURE__ */ jsx8("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: "24px" }, children: /* @__PURE__ */ jsxs7("div", { style: { position: "relative" }, children: [
-        /* @__PURE__ */ jsx8("div", { style: { width: "240px", height: "300px", borderRadius: "50%", overflow: "hidden", border: `3px solid ${colors.teal}` }, children: /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9("p", { style: styles.darkScreenSubtitle, children: "Check clarity and lighting" }),
+      /* @__PURE__ */ jsx9("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", padding: "24px" }, children: /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ jsx9("div", { style: { width: "240px", height: "300px", borderRadius: "50%", overflow: "hidden", border: `3px solid ${colors.teal}` }, children: /* @__PURE__ */ jsx9(
           "img",
           {
             src: capturedImage,
@@ -2225,31 +2564,32 @@ function SelfieCaptureScreen({ onCapture, onCancel }) {
             style: { width: "100%", height: "100%", objectFit: "cover" }
           }
         ) }),
-        /* @__PURE__ */ jsx8("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx8("span", { style: styles.reviewBadge, children: "\u2713 Face detected" }) }),
-        /* @__PURE__ */ jsxs7("div", { style: styles.qualityChecks, children: [
-          /* @__PURE__ */ jsx8(QualityCheck2, { label: "Clear" }),
-          /* @__PURE__ */ jsx8(QualityCheck2, { label: "Centered" }),
-          /* @__PURE__ */ jsx8(QualityCheck2, { label: "Well-lit" })
+        /* @__PURE__ */ jsx9("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx9("span", { style: styles.reviewBadge, children: "\u2713 Face detected" }) }),
+        /* @__PURE__ */ jsxs8("div", { style: styles.qualityChecks, children: [
+          /* @__PURE__ */ jsx9(QualityCheck2, { label: "Clear" }),
+          /* @__PURE__ */ jsx9(QualityCheck2, { label: "Centered" }),
+          /* @__PURE__ */ jsx9(QualityCheck2, { label: "Well-lit" })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs7("div", { style: styles.reviewButtonsRow, children: [
-        /* @__PURE__ */ jsx8("button", { style: { ...styles.darkOutlineButton, flex: 1 }, onClick: handleRetake, children: "Retake" }),
-        /* @__PURE__ */ jsx8("button", { style: { ...styles.primaryButton, flex: 1 }, onClick: handleAccept, children: "Use this" })
+      /* @__PURE__ */ jsxs8("div", { style: styles.reviewButtonsRow, children: [
+        /* @__PURE__ */ jsx9("button", { style: { ...styles.darkOutlineButton, flex: 1 }, onClick: handleRetake, children: "Retake" }),
+        /* @__PURE__ */ jsx9("button", { style: { ...styles.primaryButton, flex: 1 }, onClick: handleAccept, children: "Use this" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs7("div", { style: styles.captureContainer, children: [
-    /* @__PURE__ */ jsx8(StepProgressBar, { total: 5, current: 4, isDark: true }),
-    /* @__PURE__ */ jsxs7("div", { style: styles.darkScreenHeader, children: [
-      /* @__PURE__ */ jsx8("div", { style: { width: 40 } }),
-      /* @__PURE__ */ jsxs7("div", { style: { flex: 1, textAlign: "center" }, children: [
-        /* @__PURE__ */ jsx8("h1", { style: { ...styles.darkScreenTitle, margin: 0, fontSize: "24px", fontWeight: 700 }, children: "Face the camera" }),
-        /* @__PURE__ */ jsx8("p", { style: styles.darkScreenSubtitle, children: "Keep a neutral expression" })
+  return /* @__PURE__ */ jsxs8("div", { style: styles.captureContainer, children: [
+    /* @__PURE__ */ jsx9(StepProgressBar, { total: 5, current: 4, isDark: true }),
+    /* @__PURE__ */ jsxs8("div", { style: styles.darkScreenHeader, children: [
+      /* @__PURE__ */ jsx9("div", { style: { width: 40 } }),
+      /* @__PURE__ */ jsxs8("div", { style: { flex: 1, textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx9("h1", { style: { ...styles.darkScreenTitle, margin: 0, fontSize: "24px", fontWeight: 700 }, children: "Face the camera" }),
+        /* @__PURE__ */ jsx9("p", { style: styles.darkScreenSubtitle, children: "Keep a neutral expression" })
       ] }),
-      /* @__PURE__ */ jsx8("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
+      /* @__PURE__ */ jsx9("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { style: styles.cameraContainer, children: [
-      /* @__PURE__ */ jsx8(
+    showVisualGuides && /* @__PURE__ */ jsx9("div", { style: { display: "flex", justifyContent: "center", padding: "6px 0 0" }, children: /* @__PURE__ */ jsx9(VisualGuide, { kind: "selfie", size: 56 }) }),
+    /* @__PURE__ */ jsxs8("div", { style: styles.cameraContainer, children: [
+      /* @__PURE__ */ jsx9(
         "video",
         {
           ref: videoRef,
@@ -2259,10 +2599,10 @@ function SelfieCaptureScreen({ onCapture, onCancel }) {
           style: { ...styles.cameraVideo, transform: "scaleX(-1)" }
         }
       ),
-      /* @__PURE__ */ jsx8("div", { style: styles.selfieOverlay, children: /* @__PURE__ */ jsx8("div", { style: styles.faceGuide, children: /* @__PURE__ */ jsx8("div", { style: styles.rotatingRing }) }) }),
-      /* @__PURE__ */ jsx8("canvas", { ref: canvasRef, style: { display: "none" } })
+      /* @__PURE__ */ jsx9("div", { style: styles.selfieOverlay, children: /* @__PURE__ */ jsx9("div", { style: styles.faceGuide, children: /* @__PURE__ */ jsx9("div", { style: styles.rotatingRing }) }) }),
+      /* @__PURE__ */ jsx9("canvas", { ref: canvasRef, style: { display: "none" } })
     ] }),
-    /* @__PURE__ */ jsx8("div", { style: { textAlign: "center", padding: "8px 0" }, children: /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx9("div", { style: { textAlign: "center", padding: "8px 0" }, children: /* @__PURE__ */ jsxs8(
       "span",
       {
         style: {
@@ -2271,32 +2611,88 @@ function SelfieCaptureScreen({ onCapture, onCancel }) {
           color: colors.teal
         },
         children: [
-          /* @__PURE__ */ jsx8("span", { style: { ...styles.pulsingDot, backgroundColor: colors.teal } }),
+          /* @__PURE__ */ jsx9("span", { style: { ...styles.pulsingDot, backgroundColor: colors.teal } }),
           "Position your face in the oval"
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx8("div", { style: styles.captureFooter, children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9("div", { style: styles.captureFooter, children: /* @__PURE__ */ jsx9(
       "button",
       {
         style: { ...styles.captureButton, opacity: isCapturing ? 0.5 : 1 },
         onClick: handleCapture,
         disabled: isCapturing,
-        children: /* @__PURE__ */ jsx8("div", { style: styles.captureButtonInner })
+        children: /* @__PURE__ */ jsx9("div", { style: styles.captureButtonInner })
       }
     ) })
   ] });
 }
 function QualityCheck2({ label }) {
-  return /* @__PURE__ */ jsxs7("div", { style: styles.qualityCheck, children: [
-    /* @__PURE__ */ jsx8("div", { style: styles.qualityCheckIcon, children: "\u2713" }),
-    /* @__PURE__ */ jsx8("span", { style: styles.qualityCheckLabel, children: label })
+  return /* @__PURE__ */ jsxs8("div", { style: styles.qualityCheck, children: [
+    /* @__PURE__ */ jsx9("div", { style: styles.qualityCheckIcon, children: "\u2713" }),
+    /* @__PURE__ */ jsx9("span", { style: styles.qualityCheckLabel, children: label })
   ] });
 }
 
 // src/components/LivenessScreen.tsx
-import { useEffect as useEffect6, useRef as useRef4, useState as useState5, useCallback as useCallback4 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useRef as useRef6, useState as useState8, useCallback as useCallback4 } from "react";
+
+// src/hooks/useLivenessSignals.ts
+import { useEffect as useEffect8, useRef as useRef5, useState as useState7 } from "react";
+var FRAME_INTERVAL_MS2 = 250;
+function useLivenessSignals(videoRef) {
+  const [signals, setSignals] = useState7({
+    faceDetected: false,
+    detectorActive: false
+  });
+  const detectorRef = useRef5(null);
+  const intervalRef = useRef5(null);
+  useEffect8(() => {
+    let cancelled = false;
+    async function setupDetector() {
+      const NativeFaceDetector = typeof window !== "undefined" && "FaceDetector" in window ? window.FaceDetector : null;
+      if (!NativeFaceDetector) {
+        return;
+      }
+      try {
+        const detector = new NativeFaceDetector({ fastMode: true, maxDetectedFaces: 1 });
+        if (cancelled) return;
+        detectorRef.current = detector;
+        setSignals((prev) => ({ ...prev, detectorActive: true }));
+      } catch {
+        return;
+      }
+      intervalRef.current = setInterval(async () => {
+        const detector = detectorRef.current;
+        const video = videoRef.current;
+        if (!detector || !video || video.readyState < 2) return;
+        try {
+          const faces = await detector.detect(video);
+          if (cancelled) return;
+          setSignals((prev) => {
+            const next = faces.length > 0;
+            if (prev.faceDetected === next) return prev;
+            return { ...prev, faceDetected: next };
+          });
+        } catch {
+        }
+      }, FRAME_INTERVAL_MS2);
+    }
+    setupDetector();
+    return () => {
+      cancelled = true;
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      detectorRef.current = null;
+    };
+  }, [videoRef]);
+  return signals;
+}
+
+// src/components/LivenessScreen.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function LivenessScreen({
   session,
   currentChallenge,
@@ -2304,22 +2700,25 @@ function LivenessScreen({
   onChallengeComplete,
   onStart,
   onComplete,
-  onCancel
+  onCancel,
+  lastChallengeError,
+  showVisualGuides = true
 }) {
-  const videoRef = useRef4(null);
-  const canvasRef = useRef4(null);
-  const [stream, setStream] = useState5(null);
-  const [cameraError, setCameraError] = useState5(null);
-  const [phase, setPhase] = useState5("preparing");
-  const [countdown, setCountdown] = useState5(3);
-  const [capturing, setCapturing] = useState5(false);
-  useEffect6(() => {
+  const videoRef = useRef6(null);
+  const canvasRef = useRef6(null);
+  const [stream, setStream] = useState8(null);
+  const livenessSignals = useLivenessSignals(videoRef);
+  const [cameraError, setCameraError] = useState8(null);
+  const [phase, setPhase] = useState8("preparing");
+  const [countdown, setCountdown] = useState8(3);
+  const [capturing, setCapturing] = useState8(false);
+  useEffect9(() => {
     injectKeyframes();
   }, []);
-  useEffect6(() => {
+  useEffect9(() => {
     if (!session) onStart();
   }, [session, onStart]);
-  useEffect6(() => {
+  useEffect9(() => {
     let mounted = true;
     async function startCamera() {
       try {
@@ -2351,12 +2750,12 @@ function LivenessScreen({
       mounted = false;
     };
   }, []);
-  useEffect6(() => {
+  useEffect9(() => {
     return () => {
       stream?.getTracks().forEach((t) => t.stop());
     };
   }, [stream]);
-  useEffect6(() => {
+  useEffect9(() => {
     if (!currentChallenge) return;
     setPhase("preparing");
     setCountdown(3);
@@ -2384,7 +2783,7 @@ function LivenessScreen({
       0.85
     );
   }, [currentChallenge, capturing, onChallengeComplete]);
-  useEffect6(() => {
+  useEffect9(() => {
     if (!currentChallenge || capturing) return;
     if (countdown === 0) {
       if (phase === "preparing") {
@@ -2398,32 +2797,32 @@ function LivenessScreen({
     const t = setTimeout(() => setCountdown((c) => c - 1), 1e3);
     return () => clearTimeout(t);
   }, [countdown, currentChallenge?.id, capturing, captureFrame, phase]);
-  useEffect6(() => {
+  useEffect9(() => {
     if (session && !currentChallenge && completedChallenges > 0) {
       onComplete();
     }
   }, [session, currentChallenge, completedChallenges, onComplete]);
   if (cameraError) {
-    return /* @__PURE__ */ jsx9("div", { style: styles.darkContainer, children: /* @__PURE__ */ jsxs8("div", { style: styles.errorContainer, children: [
-      /* @__PURE__ */ jsx9("p", { style: styles.errorText, children: cameraError }),
-      /* @__PURE__ */ jsx9("button", { style: styles.primaryButton, onClick: onCancel, children: "Go back" })
+    return /* @__PURE__ */ jsx10("div", { style: styles.darkContainer, children: /* @__PURE__ */ jsxs9("div", { style: styles.errorContainer, children: [
+      /* @__PURE__ */ jsx10("p", { style: styles.errorText, children: cameraError }),
+      /* @__PURE__ */ jsx10("button", { style: styles.primaryButton, onClick: onCancel, children: "Go back" })
     ] }) });
   }
   if (!session) {
-    return /* @__PURE__ */ jsx9("div", { style: styles.darkContainer, children: /* @__PURE__ */ jsxs8("div", { style: styles.loadingContainer, children: [
-      /* @__PURE__ */ jsx9("div", { style: styles.spinner }),
-      /* @__PURE__ */ jsx9("p", { style: { ...styles.loadingText, color: "rgba(255,255,255,0.6)" }, children: "Starting liveness check..." })
+    return /* @__PURE__ */ jsx10("div", { style: styles.darkContainer, children: /* @__PURE__ */ jsxs9("div", { style: styles.loadingContainer, children: [
+      /* @__PURE__ */ jsx10("div", { style: styles.spinner }),
+      /* @__PURE__ */ jsx10("p", { style: { ...styles.loadingText, color: "rgba(255,255,255,0.6)" }, children: "Starting liveness check..." })
     ] }) });
   }
   const totalChallenges = session.challenges.length;
-  return /* @__PURE__ */ jsxs8("div", { style: styles.captureContainer, children: [
-    /* @__PURE__ */ jsx9(StepProgressBar, { total: 5, current: 5, isDark: true }),
-    /* @__PURE__ */ jsxs8("div", { style: styles.darkScreenHeader, children: [
-      /* @__PURE__ */ jsx9("div", { style: { width: 40 } }),
-      /* @__PURE__ */ jsx9("h1", { style: styles.darkScreenTitle, children: "Liveness Check" }),
-      /* @__PURE__ */ jsx9("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
+  return /* @__PURE__ */ jsxs9("div", { style: styles.captureContainer, children: [
+    /* @__PURE__ */ jsx10(StepProgressBar, { total: 5, current: 5, isDark: true }),
+    /* @__PURE__ */ jsxs9("div", { style: styles.darkScreenHeader, children: [
+      /* @__PURE__ */ jsx10("div", { style: { width: 40 } }),
+      /* @__PURE__ */ jsx10("h1", { style: styles.darkScreenTitle, children: "Liveness Check" }),
+      /* @__PURE__ */ jsx10("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
     ] }),
-    /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsxs9(
       "div",
       {
         style: {
@@ -2436,8 +2835,8 @@ function LivenessScreen({
           padding: "16px 0"
         },
         children: [
-          /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
-            /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsx10(
               "div",
               {
                 style: {
@@ -2448,7 +2847,7 @@ function LivenessScreen({
                   backgroundColor: "#000",
                   border: "3px solid rgba(255,255,255,0.2)"
                 },
-                children: /* @__PURE__ */ jsx9(
+                children: /* @__PURE__ */ jsx10(
                   "video",
                   {
                     ref: videoRef,
@@ -2465,7 +2864,7 @@ function LivenessScreen({
                 )
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "svg",
               {
                 style: {
@@ -2477,7 +2876,7 @@ function LivenessScreen({
                 width: "256",
                 height: "316",
                 viewBox: "0 0 256 316",
-                children: /* @__PURE__ */ jsx9(
+                children: /* @__PURE__ */ jsx10(
                   "ellipse",
                   {
                     cx: "128",
@@ -2493,9 +2892,30 @@ function LivenessScreen({
                   }
                 )
               }
+            ),
+            livenessSignals.detectorActive && /* @__PURE__ */ jsx10(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  bottom: "-32px",
+                  left: "50%",
+                  transform: "translateX(-50%)",
+                  padding: "6px 14px",
+                  borderRadius: "999px",
+                  fontSize: "12px",
+                  fontWeight: 600,
+                  color: livenessSignals.faceDetected ? colors.success : "rgba(255,255,255,0.55)",
+                  backgroundColor: livenessSignals.faceDetected ? "rgba(16,185,129,0.15)" : "rgba(255,255,255,0.06)",
+                  border: livenessSignals.faceDetected ? "1px solid rgba(16,185,129,0.4)" : "1px solid rgba(255,255,255,0.12)",
+                  transition: "all 200ms",
+                  whiteSpace: "nowrap"
+                },
+                children: livenessSignals.faceDetected ? "\u2713 Face detected" : "Position your face in the oval"
+              }
             )
           ] }),
-          currentChallenge && /* @__PURE__ */ jsxs8(
+          currentChallenge && /* @__PURE__ */ jsxs9(
             "div",
             {
               style: {
@@ -2508,7 +2928,14 @@ function LivenessScreen({
                 transition: "background-color 200ms, border-color 200ms"
               },
               children: [
-                /* @__PURE__ */ jsx9(
+                showVisualGuides && visualGuideForChallenge(currentChallenge.type) && /* @__PURE__ */ jsx10("div", { style: { display: "flex", justifyContent: "center", marginBottom: "12px" }, children: /* @__PURE__ */ jsx10(
+                  VisualGuide,
+                  {
+                    kind: visualGuideForChallenge(currentChallenge.type),
+                    size: 64
+                  }
+                ) }),
+                /* @__PURE__ */ jsx10(
                   "p",
                   {
                     style: {
@@ -2522,7 +2949,7 @@ function LivenessScreen({
                     children: capturing ? "Checking..." : phase === "preparing" ? "Get ready" : "Now \u2014 hold the pose"
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   "h2",
                   {
                     style: {
@@ -2533,7 +2960,7 @@ function LivenessScreen({
                     children: currentChallenge.instruction
                   }
                 ),
-                !capturing && /* @__PURE__ */ jsx9(
+                !capturing && /* @__PURE__ */ jsx10(
                   "p",
                   {
                     style: {
@@ -2545,16 +2972,33 @@ function LivenessScreen({
                     },
                     children: countdown
                   }
+                ),
+                lastChallengeError && phase === "preparing" && !capturing && /* @__PURE__ */ jsx10(
+                  "p",
+                  {
+                    style: {
+                      margin: "14px 0 0",
+                      padding: "10px 12px",
+                      borderRadius: "10px",
+                      fontSize: "13px",
+                      fontWeight: 500,
+                      color: "#fca5a5",
+                      backgroundColor: "rgba(239,68,68,0.10)",
+                      border: "1px solid rgba(239,68,68,0.25)",
+                      lineHeight: 1.35
+                    },
+                    children: lastChallengeError
+                  }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsx9("canvas", { ref: canvasRef, style: { display: "none" } })
+          /* @__PURE__ */ jsx10("canvas", { ref: canvasRef, style: { display: "none" } })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs8("div", { style: { padding: "16px 0" }, children: [
-      /* @__PURE__ */ jsx9("div", { style: styles.progressDots, children: session.challenges.map((_, index) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs9("div", { style: { padding: "16px 0" }, children: [
+      /* @__PURE__ */ jsx10("div", { style: styles.progressDots, children: session.challenges.map((_, index) => /* @__PURE__ */ jsx10(
         "div",
         {
           style: {
@@ -2564,7 +3008,7 @@ function LivenessScreen({
         },
         index
       )) }),
-      /* @__PURE__ */ jsxs8("p", { style: styles.progressText, children: [
+      /* @__PURE__ */ jsxs9("p", { style: styles.progressText, children: [
         "Challenge ",
         Math.min(completedChallenges + 1, totalChallenges),
         " of",
@@ -2572,7 +3016,7 @@ function LivenessScreen({
         totalChallenges
       ] })
     ] }),
-    /* @__PURE__ */ jsx9("div", { style: { padding: "0 24px 24px", textAlign: "center" }, children: /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10("div", { style: { padding: "0 24px 24px", textAlign: "center" }, children: /* @__PURE__ */ jsx10(
       "p",
       {
         style: {
@@ -2587,35 +3031,35 @@ function LivenessScreen({
 }
 
 // src/components/ResultScreen.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function ResultScreen({ verification, onDone, onRetry, resultPageMode, simplified, customMessages }) {
   const { status } = verification;
   const effectiveMode = resultPageMode ?? (simplified ? "simplified" : "detailed");
   if (effectiveMode === "simplified") {
     switch (status) {
       case "approved":
-        return /* @__PURE__ */ jsx10(SimplifiedSuccess, { onDone, customMessages });
+        return /* @__PURE__ */ jsx11(SimplifiedSuccess, { onDone, customMessages });
       case "rejected":
-        return /* @__PURE__ */ jsx10(SimplifiedFailed, { onRetry: onRetry || onDone, customMessages });
+        return /* @__PURE__ */ jsx11(SimplifiedFailed, { onRetry: onRetry || onDone, customMessages });
       case "review_required":
-        return /* @__PURE__ */ jsx10(SimplifiedReview, { verification, onDone, customMessages });
+        return /* @__PURE__ */ jsx11(SimplifiedReview, { verification, onDone, customMessages });
       case "expired":
-        return /* @__PURE__ */ jsx10(SimplifiedFailed, { onRetry: onRetry || onDone, customMessages: { failedTitle: "Document Expired", failedMessage: "The document you submitted has expired. Please use a valid document." } });
+        return /* @__PURE__ */ jsx11(SimplifiedFailed, { onRetry: onRetry || onDone, customMessages: { failedTitle: "Document Expired", failedMessage: "The document you submitted has expired. Please use a valid document." } });
       default:
-        return /* @__PURE__ */ jsx10(SimplifiedSuccess, { onDone, customMessages });
+        return /* @__PURE__ */ jsx11(SimplifiedSuccess, { onDone, customMessages });
     }
   }
   switch (status) {
     case "approved":
-      return /* @__PURE__ */ jsx10(SuccessResult, { verification, onDone });
+      return /* @__PURE__ */ jsx11(SuccessResult, { verification, onDone });
     case "rejected":
-      return /* @__PURE__ */ jsx10(RejectedResult, { verification, onRetry: onRetry || onDone });
+      return /* @__PURE__ */ jsx11(RejectedResult, { verification, onRetry: onRetry || onDone });
     case "expired":
-      return /* @__PURE__ */ jsx10(ExpiredResult, { verification, onRetry: onRetry || onDone });
+      return /* @__PURE__ */ jsx11(ExpiredResult, { verification, onRetry: onRetry || onDone });
     case "review_required":
-      return /* @__PURE__ */ jsx10(ManualReviewResult, { verification, onDone });
+      return /* @__PURE__ */ jsx11(ManualReviewResult, { verification, onDone });
     default:
-      return /* @__PURE__ */ jsx10(SuccessResult, { verification, onDone });
+      return /* @__PURE__ */ jsx11(SuccessResult, { verification, onDone });
   }
 }
 function SuccessResult({ verification, onDone }) {
@@ -2623,16 +3067,16 @@ function SuccessResult({ verification, onDone }) {
     verification.scores?.overall ?? 100 - (verification.riskScore ?? 16)
   );
   const metrics = computeScoreBreakdown(verification);
-  return /* @__PURE__ */ jsxs9("div", { style: styles.resultContainer, children: [
-    /* @__PURE__ */ jsxs9("div", { style: styles.resultContent, children: [
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs10("div", { style: styles.resultContainer, children: [
+    /* @__PURE__ */ jsxs10("div", { style: styles.resultContent, children: [
+      /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
             ...styles.resultIconOuterRing,
             backgroundColor: `${colors.success}15`
           },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -2646,9 +3090,9 @@ function SuccessResult({ verification, onDone }) {
           )
         }
       ),
-      /* @__PURE__ */ jsx10("h1", { style: styles.resultTitle, children: "Verification approved" }),
-      /* @__PURE__ */ jsx10("p", { style: styles.resultSubtitle, children: "Your identity has been successfully verified." }),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11("h1", { style: styles.resultTitle, children: "Verification approved" }),
+      /* @__PURE__ */ jsx11("p", { style: styles.resultSubtitle, children: "Your identity has been successfully verified." }),
+      /* @__PURE__ */ jsx11(
         ScoreCard,
         {
           score,
@@ -2656,9 +3100,9 @@ function SuccessResult({ verification, onDone }) {
           gradient: `linear-gradient(135deg, ${colors.teal}, ${colors.tealDark})`
         }
       ),
-      metrics.map((m, i) => /* @__PURE__ */ jsx10(ScoreMetricRow, { ...m }, i))
+      metrics.map((m, i) => /* @__PURE__ */ jsx11(ScoreMetricRow, { ...m }, i))
     ] }),
-    /* @__PURE__ */ jsx10("div", { style: styles.footer, children: /* @__PURE__ */ jsx10("button", { style: styles.primaryButton, onClick: onDone, children: "Done" }) })
+    /* @__PURE__ */ jsx11("div", { style: styles.footer, children: /* @__PURE__ */ jsx11("button", { style: styles.primaryButton, onClick: onDone, children: "Done" }) })
   ] });
 }
 function RejectedResult({ verification, onRetry }) {
@@ -2666,16 +3110,16 @@ function RejectedResult({ verification, onRetry }) {
     verification.scores?.overall ?? 100 - (verification.riskScore ?? 58)
   );
   const metrics = computeScoreBreakdown(verification);
-  return /* @__PURE__ */ jsxs9("div", { style: styles.resultContainer, children: [
-    /* @__PURE__ */ jsxs9("div", { style: styles.resultContent, children: [
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs10("div", { style: styles.resultContainer, children: [
+    /* @__PURE__ */ jsxs10("div", { style: styles.resultContent, children: [
+      /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
             ...styles.resultIconOuterRing,
             backgroundColor: `${colors.error}15`
           },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -2689,9 +3133,9 @@ function RejectedResult({ verification, onRetry }) {
           )
         }
       ),
-      /* @__PURE__ */ jsx10("h1", { style: styles.resultTitle, children: "Verification rejected" }),
-      /* @__PURE__ */ jsx10("p", { style: styles.resultSubtitle, children: "We could not verify your identity. Please try again with a valid document." }),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11("h1", { style: styles.resultTitle, children: "Verification rejected" }),
+      /* @__PURE__ */ jsx11("p", { style: styles.resultSubtitle, children: "We could not verify your identity. Please try again with a valid document." }),
+      /* @__PURE__ */ jsx11(
         ScoreCard,
         {
           score,
@@ -2699,15 +3143,15 @@ function RejectedResult({ verification, onRetry }) {
           gradient: `linear-gradient(135deg, ${colors.error}, #B91C1C)`
         }
       ),
-      metrics.map((m, i) => /* @__PURE__ */ jsx10(ScoreMetricRow, { ...m }, i))
+      metrics.map((m, i) => /* @__PURE__ */ jsx11(ScoreMetricRow, { ...m }, i))
     ] }),
-    /* @__PURE__ */ jsx10("div", { style: styles.footer, children: /* @__PURE__ */ jsx10("button", { style: styles.primaryButton, onClick: onRetry, children: "Try again" }) })
+    /* @__PURE__ */ jsx11("div", { style: styles.footer, children: /* @__PURE__ */ jsx11("button", { style: styles.primaryButton, onClick: onRetry, children: "Try again" }) })
   ] });
 }
 function ExpiredResult({ verification, onRetry }) {
-  return /* @__PURE__ */ jsxs9("div", { style: styles.resultContainer, children: [
-    /* @__PURE__ */ jsxs9("div", { style: styles.resultContent, children: [
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs10("div", { style: styles.resultContainer, children: [
+    /* @__PURE__ */ jsxs10("div", { style: styles.resultContent, children: [
+      /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
@@ -2715,7 +3159,7 @@ function ExpiredResult({ verification, onRetry }) {
             backgroundColor: `${colors.warning}15`,
             border: `2px solid ${colors.warning}30`
           },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -2729,29 +3173,29 @@ function ExpiredResult({ verification, onRetry }) {
           )
         }
       ),
-      /* @__PURE__ */ jsx10("h1", { style: styles.resultTitle, children: "Document expired" }),
-      /* @__PURE__ */ jsx10("p", { style: styles.resultSubtitle, children: "The document you submitted has expired. Please use a valid, non-expired document." }),
-      verification.documentVerification && /* @__PURE__ */ jsxs9("div", { style: styles.expiryCard, children: [
-        /* @__PURE__ */ jsxs9("div", { style: styles.expiryRow, children: [
-          /* @__PURE__ */ jsx10("span", { style: styles.expiryLabel, children: "Document type" }),
-          /* @__PURE__ */ jsx10("span", { style: styles.expiryValue, children: verification.documentVerification.documentType || "ID Card" })
+      /* @__PURE__ */ jsx11("h1", { style: styles.resultTitle, children: "Document expired" }),
+      /* @__PURE__ */ jsx11("p", { style: styles.resultSubtitle, children: "The document you submitted has expired. Please use a valid, non-expired document." }),
+      verification.documentVerification && /* @__PURE__ */ jsxs10("div", { style: styles.expiryCard, children: [
+        /* @__PURE__ */ jsxs10("div", { style: styles.expiryRow, children: [
+          /* @__PURE__ */ jsx11("span", { style: styles.expiryLabel, children: "Document type" }),
+          /* @__PURE__ */ jsx11("span", { style: styles.expiryValue, children: verification.documentVerification.documentType || "ID Card" })
         ] }),
-        verification.documentVerification.issuingCountry && /* @__PURE__ */ jsxs9("div", { style: styles.expiryRow, children: [
-          /* @__PURE__ */ jsx10("span", { style: styles.expiryLabel, children: "Country" }),
-          /* @__PURE__ */ jsx10("span", { style: styles.expiryValue, children: verification.documentVerification.issuingCountry })
+        verification.documentVerification.issuingCountry && /* @__PURE__ */ jsxs10("div", { style: styles.expiryRow, children: [
+          /* @__PURE__ */ jsx11("span", { style: styles.expiryLabel, children: "Country" }),
+          /* @__PURE__ */ jsx11("span", { style: styles.expiryValue, children: verification.documentVerification.issuingCountry })
         ] }),
-        verification.documentVerification.expirationDate && /* @__PURE__ */ jsxs9("div", { style: styles.expiryRow, children: [
-          /* @__PURE__ */ jsx10("span", { style: styles.expiryLabel, children: "Expired on" }),
-          /* @__PURE__ */ jsx10("span", { style: styles.expiryBadge, children: verification.documentVerification.expirationDate })
+        verification.documentVerification.expirationDate && /* @__PURE__ */ jsxs10("div", { style: styles.expiryRow, children: [
+          /* @__PURE__ */ jsx11("span", { style: styles.expiryLabel, children: "Expired on" }),
+          /* @__PURE__ */ jsx11("span", { style: styles.expiryBadge, children: verification.documentVerification.expirationDate })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { style: { textAlign: "left" }, children: [
-        /* @__PURE__ */ jsx10(GuidanceTip, { number: 1, text: "Check the expiration date on your document" }),
-        /* @__PURE__ */ jsx10(GuidanceTip, { number: 2, text: "Use a different document that is currently valid" }),
-        /* @__PURE__ */ jsx10(GuidanceTip, { number: 3, text: "Ensure the document details are clearly visible" })
+      /* @__PURE__ */ jsxs10("div", { style: { textAlign: "left" }, children: [
+        /* @__PURE__ */ jsx11(GuidanceTip, { number: 1, text: "Check the expiration date on your document" }),
+        /* @__PURE__ */ jsx11(GuidanceTip, { number: 2, text: "Use a different document that is currently valid" }),
+        /* @__PURE__ */ jsx11(GuidanceTip, { number: 3, text: "Ensure the document details are clearly visible" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx10("div", { style: styles.footer, children: /* @__PURE__ */ jsx10("button", { style: styles.primaryButton, onClick: onRetry, children: "Try with a valid document" }) })
+    /* @__PURE__ */ jsx11("div", { style: styles.footer, children: /* @__PURE__ */ jsx11("button", { style: styles.primaryButton, onClick: onRetry, children: "Try with a valid document" }) })
   ] });
 }
 function ManualReviewResult({ verification, onDone }) {
@@ -2759,9 +3203,9 @@ function ManualReviewResult({ verification, onDone }) {
     verification.scores?.overall ?? 100 - (verification.riskScore ?? 32)
   );
   const metrics = computeScoreBreakdown(verification);
-  return /* @__PURE__ */ jsxs9("div", { style: styles.resultContainer, children: [
-    /* @__PURE__ */ jsxs9("div", { style: styles.resultContent, children: [
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs10("div", { style: styles.resultContainer, children: [
+    /* @__PURE__ */ jsxs10("div", { style: styles.resultContent, children: [
+      /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
@@ -2769,7 +3213,7 @@ function ManualReviewResult({ verification, onDone }) {
             backgroundColor: `${colors.info}15`,
             border: `2px solid ${colors.info}30`
           },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -2783,9 +3227,9 @@ function ManualReviewResult({ verification, onDone }) {
           )
         }
       ),
-      /* @__PURE__ */ jsx10("h1", { style: styles.resultTitle, children: "Under review" }),
-      /* @__PURE__ */ jsx10("p", { style: styles.resultSubtitle, children: "Your verification requires manual review. We'll notify you of the result." }),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11("h1", { style: styles.resultTitle, children: "Under review" }),
+      /* @__PURE__ */ jsx11("p", { style: styles.resultSubtitle, children: "Your verification requires manual review. We'll notify you of the result." }),
+      /* @__PURE__ */ jsx11(
         ScoreCard,
         {
           score,
@@ -2793,21 +3237,21 @@ function ManualReviewResult({ verification, onDone }) {
           gradient: `linear-gradient(135deg, ${colors.info}, #0369A1)`
         }
       ),
-      metrics.map((m, i) => /* @__PURE__ */ jsx10(ScoreMetricRow, { ...m }, i))
+      metrics.map((m, i) => /* @__PURE__ */ jsx11(ScoreMetricRow, { ...m }, i))
     ] }),
-    /* @__PURE__ */ jsx10("div", { style: styles.footer, children: /* @__PURE__ */ jsx10("button", { style: styles.primaryButton, onClick: onDone, children: "Got it" }) })
+    /* @__PURE__ */ jsx11("div", { style: styles.footer, children: /* @__PURE__ */ jsx11("button", { style: styles.primaryButton, onClick: onDone, children: "Got it" }) })
   ] });
 }
 function GuidanceTip({ number, text }) {
-  return /* @__PURE__ */ jsxs9("div", { style: styles.guidanceTip, children: [
-    /* @__PURE__ */ jsx10("div", { style: styles.guidanceTipNumber, children: number }),
-    /* @__PURE__ */ jsx10("span", { style: styles.guidanceTipText, children: text })
+  return /* @__PURE__ */ jsxs10("div", { style: styles.guidanceTip, children: [
+    /* @__PURE__ */ jsx11("div", { style: styles.guidanceTipNumber, children: number }),
+    /* @__PURE__ */ jsx11("span", { style: styles.guidanceTipText, children: text })
   ] });
 }
 function SimplifiedSuccess({ onDone, customMessages }) {
-  return /* @__PURE__ */ jsxs9("div", { style: styles.resultContainer, children: [
-    /* @__PURE__ */ jsxs9("div", { style: { ...styles.resultContent, textAlign: "center" }, children: [
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs10("div", { style: styles.resultContainer, children: [
+    /* @__PURE__ */ jsxs10("div", { style: { ...styles.resultContent, textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
@@ -2816,7 +3260,7 @@ function SimplifiedSuccess({ onDone, customMessages }) {
             width: 96,
             height: 96
           },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -2833,16 +3277,16 @@ function SimplifiedSuccess({ onDone, customMessages }) {
           )
         }
       ),
-      /* @__PURE__ */ jsx10("h1", { style: { ...styles.resultTitle, fontSize: 24, marginTop: 16 }, children: customMessages?.successTitle || "Verification Successful" }),
-      /* @__PURE__ */ jsx10("p", { style: { ...styles.resultSubtitle, fontSize: 16, maxWidth: 320, margin: "8px auto 0" }, children: customMessages?.successMessage || "Your identity has been successfully verified. You can now proceed." })
+      /* @__PURE__ */ jsx11("h1", { style: { ...styles.resultTitle, fontSize: 24, marginTop: 16 }, children: customMessages?.successTitle || "Verification Successful" }),
+      /* @__PURE__ */ jsx11("p", { style: { ...styles.resultSubtitle, fontSize: 16, maxWidth: 320, margin: "8px auto 0" }, children: customMessages?.successMessage || "Your identity has been successfully verified. You can now proceed." })
     ] }),
-    /* @__PURE__ */ jsx10("div", { style: styles.footer, children: /* @__PURE__ */ jsx10("button", { style: styles.primaryButton, onClick: onDone, children: "Continue" }) })
+    /* @__PURE__ */ jsx11("div", { style: styles.footer, children: /* @__PURE__ */ jsx11("button", { style: styles.primaryButton, onClick: onDone, children: "Continue" }) })
   ] });
 }
 function SimplifiedFailed({ onRetry, customMessages }) {
-  return /* @__PURE__ */ jsxs9("div", { style: styles.resultContainer, children: [
-    /* @__PURE__ */ jsxs9("div", { style: { ...styles.resultContent, textAlign: "center" }, children: [
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs10("div", { style: styles.resultContainer, children: [
+    /* @__PURE__ */ jsxs10("div", { style: { ...styles.resultContent, textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
@@ -2851,7 +3295,7 @@ function SimplifiedFailed({ onRetry, customMessages }) {
             width: 96,
             height: 96
           },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -2868,16 +3312,16 @@ function SimplifiedFailed({ onRetry, customMessages }) {
           )
         }
       ),
-      /* @__PURE__ */ jsx10("h1", { style: { ...styles.resultTitle, fontSize: 24, marginTop: 16 }, children: customMessages?.failedTitle || "Verification Failed" }),
-      /* @__PURE__ */ jsx10("p", { style: { ...styles.resultSubtitle, fontSize: 16, maxWidth: 320, margin: "8px auto 0" }, children: customMessages?.failedMessage || "We could not verify your identity. Please try again with a valid document." })
+      /* @__PURE__ */ jsx11("h1", { style: { ...styles.resultTitle, fontSize: 24, marginTop: 16 }, children: customMessages?.failedTitle || "Verification Failed" }),
+      /* @__PURE__ */ jsx11("p", { style: { ...styles.resultSubtitle, fontSize: 16, maxWidth: 320, margin: "8px auto 0" }, children: customMessages?.failedMessage || "We could not verify your identity. Please try again with a valid document." })
     ] }),
-    /* @__PURE__ */ jsx10("div", { style: styles.footer, children: /* @__PURE__ */ jsx10("button", { style: styles.primaryButton, onClick: onRetry, children: "Try Again" }) })
+    /* @__PURE__ */ jsx11("div", { style: styles.footer, children: /* @__PURE__ */ jsx11("button", { style: styles.primaryButton, onClick: onRetry, children: "Try Again" }) })
   ] });
 }
 function SimplifiedReview({ verification, onDone, customMessages }) {
-  return /* @__PURE__ */ jsxs9("div", { style: styles.resultContainer, children: [
-    /* @__PURE__ */ jsxs9("div", { style: { ...styles.resultContent, textAlign: "center" }, children: [
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs10("div", { style: styles.resultContainer, children: [
+    /* @__PURE__ */ jsxs10("div", { style: { ...styles.resultContent, textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
@@ -2886,7 +3330,7 @@ function SimplifiedReview({ verification, onDone, customMessages }) {
             width: 96,
             height: 96
           },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -2903,9 +3347,9 @@ function SimplifiedReview({ verification, onDone, customMessages }) {
           )
         }
       ),
-      /* @__PURE__ */ jsx10("h1", { style: { ...styles.resultTitle, fontSize: 24, marginTop: 16 }, children: customMessages?.reviewTitle || "Verification Under Review" }),
-      /* @__PURE__ */ jsx10("p", { style: { ...styles.resultSubtitle, fontSize: 16, maxWidth: 320, margin: "8px auto 0" }, children: customMessages?.reviewMessage || "Your verification requires additional review. We will notify you of the result." }),
-      /* @__PURE__ */ jsxs9("div", { style: {
+      /* @__PURE__ */ jsx11("h1", { style: { ...styles.resultTitle, fontSize: 24, marginTop: 16 }, children: customMessages?.reviewTitle || "Verification Under Review" }),
+      /* @__PURE__ */ jsx11("p", { style: { ...styles.resultSubtitle, fontSize: 16, maxWidth: 320, margin: "8px auto 0" }, children: customMessages?.reviewMessage || "Your verification requires additional review. We will notify you of the result." }),
+      /* @__PURE__ */ jsxs10("div", { style: {
         marginTop: 24,
         padding: "12px 24px",
         backgroundColor: `${colors.info}10`,
@@ -2913,27 +3357,27 @@ function SimplifiedReview({ verification, onDone, customMessages }) {
         border: `1px solid ${colors.info}30`,
         display: "inline-block"
       }, children: [
-        /* @__PURE__ */ jsx10("span", { style: { fontSize: 12, color: colors.textSecondary }, children: "Reference: " }),
-        /* @__PURE__ */ jsx10("span", { style: { fontSize: 14, fontWeight: 600, fontFamily: "monospace" }, children: verification.id.slice(0, 8) })
+        /* @__PURE__ */ jsx11("span", { style: { fontSize: 12, color: colors.textSecondary }, children: "Reference: " }),
+        /* @__PURE__ */ jsx11("span", { style: { fontSize: 14, fontWeight: 600, fontFamily: "monospace" }, children: verification.id.slice(0, 8) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx10("div", { style: styles.footer, children: /* @__PURE__ */ jsx10("button", { style: styles.primaryButton, onClick: onDone, children: "Got It" }) })
+    /* @__PURE__ */ jsx11("div", { style: styles.footer, children: /* @__PURE__ */ jsx11("button", { style: styles.primaryButton, onClick: onDone, children: "Got It" }) })
   ] });
 }
 
 // src/components/ErrorScreen.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function ErrorScreen({ error, onRetry, onCancel }) {
-  return /* @__PURE__ */ jsxs10("div", { style: styles.resultContainer, children: [
-    /* @__PURE__ */ jsxs10("div", { style: styles.resultContent, children: [
-      /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs11("div", { style: styles.resultContainer, children: [
+    /* @__PURE__ */ jsxs11("div", { style: styles.resultContent, children: [
+      /* @__PURE__ */ jsx12(
         "div",
         {
           style: {
             ...styles.resultIconOuterRing,
             backgroundColor: colors.errorBg
           },
-          children: /* @__PURE__ */ jsx11(
+          children: /* @__PURE__ */ jsx12(
             "div",
             {
               style: {
@@ -2947,26 +3391,26 @@ function ErrorScreen({ error, onRetry, onCancel }) {
           )
         }
       ),
-      /* @__PURE__ */ jsx11("h1", { style: styles.resultTitle, children: "Something went wrong" }),
-      /* @__PURE__ */ jsx11("p", { style: styles.resultSubtitle, children: error.message }),
-      error.recoverySuggestion && /* @__PURE__ */ jsx11("p", { style: { ...styles.bodyText, marginTop: "12px" }, children: error.recoverySuggestion })
+      /* @__PURE__ */ jsx12("h1", { style: styles.resultTitle, children: "Something went wrong" }),
+      /* @__PURE__ */ jsx12("p", { style: styles.resultSubtitle, children: error.message }),
+      error.recoverySuggestion && /* @__PURE__ */ jsx12("p", { style: { ...styles.bodyText, marginTop: "12px" }, children: error.recoverySuggestion })
     ] }),
-    /* @__PURE__ */ jsxs10("div", { style: styles.footer, children: [
-      error.isRetryable && /* @__PURE__ */ jsx11("button", { style: styles.primaryButton, onClick: onRetry, children: "Try Again" }),
-      /* @__PURE__ */ jsx11("button", { style: styles.textButton, onClick: onCancel, children: "Cancel" })
+    /* @__PURE__ */ jsxs11("div", { style: styles.footer, children: [
+      error.isRetryable && /* @__PURE__ */ jsx12("button", { style: styles.primaryButton, onClick: onRetry, children: "Try Again" }),
+      /* @__PURE__ */ jsx12("button", { style: styles.textButton, onClick: onCancel, children: "Cancel" })
     ] })
   ] });
 }
 
 // src/components/LoadingScreen.tsx
-import { useEffect as useEffect7 } from "react";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useEffect as useEffect10 } from "react";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function LoadingScreen({ message = "Loading..." }) {
-  useEffect7(() => {
+  useEffect10(() => {
     injectKeyframes();
   }, []);
-  return /* @__PURE__ */ jsx12("div", { style: styles.container, children: /* @__PURE__ */ jsxs11("div", { style: styles.loadingContainer, children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13("div", { style: styles.container, children: /* @__PURE__ */ jsxs12("div", { style: styles.loadingContainer, children: [
+    /* @__PURE__ */ jsx13(
       "div",
       {
         style: {
@@ -2983,16 +3427,19 @@ function LoadingScreen({ message = "Loading..." }) {
         children: "\u{1F6E1}\uFE0F"
       }
     ),
-    /* @__PURE__ */ jsx12("p", { style: styles.loadingText, children: message })
+    /* @__PURE__ */ jsx13("p", { style: styles.loadingText, children: message })
   ] }) });
 }
 
 // src/components/VerificationFlow.tsx
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function VerificationFlow({
   externalId,
   tier = "standard",
   documentTypes,
+  expectedFirstName,
+  expectedLastName,
+  showVisualGuides = true,
   onComplete,
   onError,
   onCancel,
@@ -3014,20 +3461,20 @@ function VerificationFlow({
     retry,
     sdk
   } = useKoraIDV();
-  const [selectedCountry, setSelectedCountry] = useState6(null);
-  const [flowStep, setFlowStep] = useState6("consent");
-  const [showFlipInstruction, setShowFlipInstruction] = useState6(true);
-  const [supportedCountries, setSupportedCountries] = useState6([]);
-  const [countriesLoading, setCountriesLoading] = useState6(false);
-  useEffect8(() => {
+  const [selectedCountry, setSelectedCountry] = useState9(null);
+  const [flowStep, setFlowStep] = useState9("consent");
+  const [showFlipInstruction, setShowFlipInstruction] = useState9(true);
+  const [supportedCountries, setSupportedCountries] = useState9([]);
+  const [countriesLoading, setCountriesLoading] = useState9(false);
+  useEffect11(() => {
     if (state.step === "document_front") {
       setShowFlipInstruction(true);
     }
   }, [state.step]);
-  useEffect8(() => {
-    startVerification(externalId, tier);
-  }, [externalId, tier, startVerification]);
-  useEffect8(() => {
+  useEffect11(() => {
+    startVerification(externalId, tier, expectedFirstName, expectedLastName);
+  }, [externalId, tier, expectedFirstName, expectedLastName, startVerification]);
+  useEffect11(() => {
     if (state.error && onError) {
       onError(state.error);
     }
@@ -3073,19 +3520,19 @@ function VerificationFlow({
     ...style
   };
   if (state.error) {
-    return /* @__PURE__ */ jsx13("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx13(ErrorScreen, { error: state.error, onRetry: retry, onCancel: handleCancel }) });
+    return /* @__PURE__ */ jsx14("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx14(ErrorScreen, { error: state.error, onRetry: retry, onCancel: handleCancel }) });
   }
   if (state.isLoading && state.step !== "processing") {
-    return /* @__PURE__ */ jsx13("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx13(LoadingScreen, {}) });
+    return /* @__PURE__ */ jsx14("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx14(LoadingScreen, {}) });
   }
   if (flowStep === "consent" && state.step === "consent") {
-    return /* @__PURE__ */ jsx13("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx13(ConsentScreen, { onAccept: handleAcceptConsent, onDecline: handleCancel }) });
+    return /* @__PURE__ */ jsx14("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx14(ConsentScreen, { onAccept: handleAcceptConsent, onDecline: handleCancel }) });
   }
   if (flowStep === "country_selection") {
     if (countriesLoading) {
-      return /* @__PURE__ */ jsx13("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx13(LoadingScreen, {}) });
+      return /* @__PURE__ */ jsx14("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx14(LoadingScreen, {}) });
     }
-    return /* @__PURE__ */ jsx13("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx14(
       CountrySelectionScreen,
       {
         countries: supportedCountries,
@@ -3094,8 +3541,8 @@ function VerificationFlow({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs12("div", { className, style: containerStyle, children: [
-    state.step === "document_selection" && /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs13("div", { className, style: containerStyle, children: [
+    state.step === "document_selection" && /* @__PURE__ */ jsx14(
       DocumentSelectionScreen,
       {
         documentTypes,
@@ -3104,32 +3551,41 @@ function VerificationFlow({
         onCancel: handleCancel
       }
     ),
-    state.step === "document_front" && /* @__PURE__ */ jsx13(
+    state.step === "document_front" && /* @__PURE__ */ jsx14(
       DocumentCaptureScreen,
       {
         side: "front",
         onQualityCheck: (blob) => checkDocumentQuality(blob),
         onCapture: (imageData) => uploadDocument(imageData, "front", selectedCountry?.id),
-        onCancel: handleCancel
+        onCancel: handleCancel,
+        showVisualGuides
       }
     ),
-    state.step === "document_back" && showFlipInstruction && /* @__PURE__ */ jsx13(
+    state.step === "document_back" && showFlipInstruction && /* @__PURE__ */ jsx14(
       FlipDocumentScreen,
       {
         onContinue: () => setShowFlipInstruction(false),
         onCancel: handleCancel
       }
     ),
-    state.step === "document_back" && !showFlipInstruction && /* @__PURE__ */ jsx13(
+    state.step === "document_back" && !showFlipInstruction && /* @__PURE__ */ jsx14(
       DocumentCaptureScreen,
       {
         side: "back",
         onCapture: (imageData) => uploadDocument(imageData, "back", selectedCountry?.id),
-        onCancel: handleCancel
+        onCancel: handleCancel,
+        showVisualGuides
       }
     ),
-    state.step === "selfie" && /* @__PURE__ */ jsx13(SelfieCaptureScreen, { onCapture: uploadSelfie, onCancel: handleCancel }),
-    state.step === "liveness" && /* @__PURE__ */ jsx13(
+    state.step === "selfie" && /* @__PURE__ */ jsx14(
+      SelfieCaptureScreen,
+      {
+        onCapture: uploadSelfie,
+        onCancel: handleCancel,
+        showVisualGuides
+      }
+    ),
+    state.step === "liveness" && /* @__PURE__ */ jsx14(
       LivenessScreen,
       {
         session: state.livenessSession,
@@ -3138,20 +3594,13 @@ function VerificationFlow({
         onChallengeComplete: submitChallenge,
         onStart: startLiveness,
         onComplete: complete,
-        onCancel: handleCancel
+        onCancel: handleCancel,
+        lastChallengeError: state.lastChallengeError,
+        showVisualGuides
       }
     ),
-    state.step === "processing" && /* @__PURE__ */ jsx13(
-      ProcessingScreen,
-      {
-        steps: [
-          { label: "Document analyzed", status: "done" },
-          { label: "Checking face match", status: "active" },
-          { label: "Finalizing results", status: "pending" }
-        ]
-      }
-    ),
-    state.step === "complete" && state.verification && /* @__PURE__ */ jsx13(
+    state.step === "processing" && /* @__PURE__ */ jsx14(ProcessingScreen, {}),
+    state.step === "complete" && state.verification && /* @__PURE__ */ jsx14(
       ResultScreen,
       {
         verification: state.verification,
@@ -3163,8 +3612,8 @@ function VerificationFlow({
 }
 
 // src/components/QrHandoffScreen.tsx
-import { useEffect as useEffect9, useState as useState7, useRef as useRef5 } from "react";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useEffect as useEffect12, useState as useState10, useRef as useRef7 } from "react";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function QrHandoffScreen({
   session,
   onMobileCaptureComplete,
@@ -3173,11 +3622,11 @@ function QrHandoffScreen({
   onRefresh,
   eventSource
 }) {
-  const [timeLeft, setTimeLeft] = useState7(session.expiresIn);
-  const [scanned, setScanned] = useState7(false);
-  const [expired, setExpired] = useState7(false);
-  const timerRef = useRef5();
-  useEffect9(() => {
+  const [timeLeft, setTimeLeft] = useState10(session.expiresIn);
+  const [scanned, setScanned] = useState10(false);
+  const [expired, setExpired] = useState10(false);
+  const timerRef = useRef7();
+  useEffect12(() => {
     setTimeLeft(session.expiresIn);
     setExpired(false);
     setScanned(false);
@@ -3194,7 +3643,7 @@ function QrHandoffScreen({
     }, 1e3);
     return () => clearInterval(timerRef.current);
   }, [session.token]);
-  useEffect9(() => {
+  useEffect12(() => {
     if (!eventSource) return;
     const handleStatus = (event) => {
       try {
@@ -3220,34 +3669,34 @@ function QrHandoffScreen({
   const seconds = timeLeft % 60;
   const qrSize = 200;
   if (expired) {
-    return /* @__PURE__ */ jsx14("div", { style: qrStyles.container, children: /* @__PURE__ */ jsxs13("div", { style: qrStyles.content, children: [
-      /* @__PURE__ */ jsx14("div", { style: qrStyles.expiredIcon, children: "\u23F1" }),
-      /* @__PURE__ */ jsx14("h2", { style: qrStyles.title, children: "QR Code Expired" }),
-      /* @__PURE__ */ jsx14("p", { style: qrStyles.subtitle, children: "The QR code has expired. Generate a new one to continue." }),
-      /* @__PURE__ */ jsx14("button", { style: qrStyles.primaryButton, onClick: onRefresh, children: "Generate New QR Code" }),
-      /* @__PURE__ */ jsx14("button", { style: qrStyles.secondaryButton, onClick: onContinueOnDevice, children: "Continue on this device instead" })
+    return /* @__PURE__ */ jsx15("div", { style: qrStyles.container, children: /* @__PURE__ */ jsxs14("div", { style: qrStyles.content, children: [
+      /* @__PURE__ */ jsx15("div", { style: qrStyles.expiredIcon, children: "\u23F1" }),
+      /* @__PURE__ */ jsx15("h2", { style: qrStyles.title, children: "QR Code Expired" }),
+      /* @__PURE__ */ jsx15("p", { style: qrStyles.subtitle, children: "The QR code has expired. Generate a new one to continue." }),
+      /* @__PURE__ */ jsx15("button", { style: qrStyles.primaryButton, onClick: onRefresh, children: "Generate New QR Code" }),
+      /* @__PURE__ */ jsx15("button", { style: qrStyles.secondaryButton, onClick: onContinueOnDevice, children: "Continue on this device instead" })
     ] }) });
   }
   if (scanned) {
-    return /* @__PURE__ */ jsx14("div", { style: qrStyles.container, children: /* @__PURE__ */ jsxs13("div", { style: qrStyles.content, children: [
-      /* @__PURE__ */ jsx14("div", { style: qrStyles.spinnerContainer, children: /* @__PURE__ */ jsx14("div", { style: qrStyles.spinner }) }),
-      /* @__PURE__ */ jsx14("h2", { style: qrStyles.title, children: "Capturing on your phone..." }),
-      /* @__PURE__ */ jsx14("p", { style: qrStyles.subtitle, children: "Complete the document scan and selfie on your mobile device. This page will update automatically when done." }),
-      /* @__PURE__ */ jsxs13("div", { style: qrStyles.statusBadge, children: [
-        /* @__PURE__ */ jsx14("span", { style: qrStyles.statusDot }),
+    return /* @__PURE__ */ jsx15("div", { style: qrStyles.container, children: /* @__PURE__ */ jsxs14("div", { style: qrStyles.content, children: [
+      /* @__PURE__ */ jsx15("div", { style: qrStyles.spinnerContainer, children: /* @__PURE__ */ jsx15("div", { style: qrStyles.spinner }) }),
+      /* @__PURE__ */ jsx15("h2", { style: qrStyles.title, children: "Capturing on your phone..." }),
+      /* @__PURE__ */ jsx15("p", { style: qrStyles.subtitle, children: "Complete the document scan and selfie on your mobile device. This page will update automatically when done." }),
+      /* @__PURE__ */ jsxs14("div", { style: qrStyles.statusBadge, children: [
+        /* @__PURE__ */ jsx15("span", { style: qrStyles.statusDot }),
         "Connected \u2014 waiting for capture"
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsx14("div", { style: qrStyles.container, children: /* @__PURE__ */ jsxs13("div", { style: qrStyles.content, children: [
-    /* @__PURE__ */ jsx14("h2", { style: qrStyles.title, children: "Scan with your phone" }),
-    /* @__PURE__ */ jsx14("p", { style: qrStyles.subtitle, children: "Use your phone's camera for a better capture experience. Scan the QR code below to continue on your mobile device." }),
-    /* @__PURE__ */ jsxs13("div", { style: qrStyles.qrContainer, children: [
-      /* @__PURE__ */ jsx14("div", { style: {
+  return /* @__PURE__ */ jsx15("div", { style: qrStyles.container, children: /* @__PURE__ */ jsxs14("div", { style: qrStyles.content, children: [
+    /* @__PURE__ */ jsx15("h2", { style: qrStyles.title, children: "Scan with your phone" }),
+    /* @__PURE__ */ jsx15("p", { style: qrStyles.subtitle, children: "Use your phone's camera for a better capture experience. Scan the QR code below to continue on your mobile device." }),
+    /* @__PURE__ */ jsxs14("div", { style: qrStyles.qrContainer, children: [
+      /* @__PURE__ */ jsx15("div", { style: {
         ...qrStyles.qrBox,
         width: qrSize,
         height: qrSize
-      }, children: /* @__PURE__ */ jsx14(
+      }, children: /* @__PURE__ */ jsx15(
         "img",
         {
           src: `https://api.qrserver.com/v1/create-qr-code/?size=${qrSize}x${qrSize}&data=${encodeURIComponent(session.captureUrl)}&margin=8`,
@@ -3257,26 +3706,26 @@ function QrHandoffScreen({
           style: { borderRadius: 12 }
         }
       ) }),
-      /* @__PURE__ */ jsxs13("div", { style: qrStyles.timer, children: [
+      /* @__PURE__ */ jsxs14("div", { style: qrStyles.timer, children: [
         minutes,
         ":",
         seconds.toString().padStart(2, "0"),
         " remaining"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs13("div", { style: qrStyles.steps, children: [
-      /* @__PURE__ */ jsx14(Step, { number: 1, text: "Open your phone's camera" }),
-      /* @__PURE__ */ jsx14(Step, { number: 2, text: "Point at the QR code" }),
-      /* @__PURE__ */ jsx14(Step, { number: 3, text: "Complete the capture on your phone" })
+    /* @__PURE__ */ jsxs14("div", { style: qrStyles.steps, children: [
+      /* @__PURE__ */ jsx15(Step, { number: 1, text: "Open your phone's camera" }),
+      /* @__PURE__ */ jsx15(Step, { number: 2, text: "Point at the QR code" }),
+      /* @__PURE__ */ jsx15(Step, { number: 3, text: "Complete the capture on your phone" })
     ] }),
-    /* @__PURE__ */ jsx14("div", { style: qrStyles.divider, children: /* @__PURE__ */ jsx14("span", { style: qrStyles.dividerText, children: "or" }) }),
-    /* @__PURE__ */ jsx14("button", { style: qrStyles.secondaryButton, onClick: onContinueOnDevice, children: "Continue on this device" })
+    /* @__PURE__ */ jsx15("div", { style: qrStyles.divider, children: /* @__PURE__ */ jsx15("span", { style: qrStyles.dividerText, children: "or" }) }),
+    /* @__PURE__ */ jsx15("button", { style: qrStyles.secondaryButton, onClick: onContinueOnDevice, children: "Continue on this device" })
   ] }) });
 }
 function Step({ number, text }) {
-  return /* @__PURE__ */ jsxs13("div", { style: qrStyles.step, children: [
-    /* @__PURE__ */ jsx14("div", { style: qrStyles.stepNumber, children: number }),
-    /* @__PURE__ */ jsx14("span", { style: qrStyles.stepText, children: text })
+  return /* @__PURE__ */ jsxs14("div", { style: qrStyles.step, children: [
+    /* @__PURE__ */ jsx15("div", { style: qrStyles.stepNumber, children: number }),
+    /* @__PURE__ */ jsx15("span", { style: qrStyles.stepText, children: text })
   ] });
 }
 var qrStyles = {