@koraidv/react 1.7.6 → 1.7.8

package/dist/index.d.mts

@@ -205,6 +205,37 @@ interface LivenessScreenProps {
     onComplete: () => Promise<any>;
     onCancel: () => void;
 }
+/**
+ * Web liveness screen with a real front-facing camera.
+ *
+ * Before v1.7.7 this was a stub: a static oval guide + a "Complete
+ * Challenge" button that submitted a blank 100×100 white canvas. The
+ * camera was never wired up — Web shipped without a real liveness
+ * implementation while iOS + Android had full liveness from day one.
+ * Found and called out by Luckycat's first end-to-end integration on
+ * 2026-05-29.
+ *
+ * This implementation pairs a real `getUserMedia` camera feed with the
+ * server's existing liveness pipeline (ml-service detects whether the
+ * submitted frame shows the requested gesture). Per-challenge flow:
+ *
+ *   1. Render the front camera in the oval guide (object-fit cover,
+ *      circular clip — same visual shape as the previous stub).
+ *   2. Show the challenge instruction (Smile / Turn left / Blink / ...).
+ *   3. Run a 3-second countdown so the user has time to perform the
+ *      gesture.
+ *   4. When the countdown hits zero, capture a frame from the video
+ *      and post it to /verifications/{id}/liveness/challenge with the
+ *      challenge type. The hook's submitChallenge advances state on
+ *      pass; on fail the same challenge stays current and the
+ *      countdown re-arms for retry.
+ *
+ * Client-side gesture detection (MediaPipe Face Mesh + auto-capture
+ * when the gesture is satisfied) is the planned follow-up — that would
+ * close the UX gap with iOS, where the user doesn't have to time
+ * themselves against a countdown. Today's ship is "real camera, real
+ * frames, server decides," which is the parity floor.
+ */
 declare function LivenessScreen({ session, currentChallenge, completedChallenges, onChallengeComplete, onStart, onComplete, onCancel, }: LivenessScreenProps): react_jsx_runtime.JSX.Element;
 
 type ResultPageMode = 'detailed' | 'simplified';

package/dist/index.d.ts

@@ -205,6 +205,37 @@ interface LivenessScreenProps {
     onComplete: () => Promise<any>;
     onCancel: () => void;
 }
+/**
+ * Web liveness screen with a real front-facing camera.
+ *
+ * Before v1.7.7 this was a stub: a static oval guide + a "Complete
+ * Challenge" button that submitted a blank 100×100 white canvas. The
+ * camera was never wired up — Web shipped without a real liveness
+ * implementation while iOS + Android had full liveness from day one.
+ * Found and called out by Luckycat's first end-to-end integration on
+ * 2026-05-29.
+ *
+ * This implementation pairs a real `getUserMedia` camera feed with the
+ * server's existing liveness pipeline (ml-service detects whether the
+ * submitted frame shows the requested gesture). Per-challenge flow:
+ *
+ *   1. Render the front camera in the oval guide (object-fit cover,
+ *      circular clip — same visual shape as the previous stub).
+ *   2. Show the challenge instruction (Smile / Turn left / Blink / ...).
+ *   3. Run a 3-second countdown so the user has time to perform the
+ *      gesture.
+ *   4. When the countdown hits zero, capture a frame from the video
+ *      and post it to /verifications/{id}/liveness/challenge with the
+ *      challenge type. The hook's submitChallenge advances state on
+ *      pass; on fail the same challenge stays current and the
+ *      countdown re-arms for retry.
+ *
+ * Client-side gesture detection (MediaPipe Face Mesh + auto-capture
+ * when the gesture is satisfied) is the planned follow-up — that would
+ * close the UX gap with iOS, where the user doesn't have to time
+ * themselves against a countdown. Today's ship is "real camera, real
+ * frames, server decides," which is the parity floor.
+ */
 declare function LivenessScreen({ session, currentChallenge, completedChallenges, onChallengeComplete, onStart, onComplete, onCancel, }: LivenessScreenProps): react_jsx_runtime.JSX.Element;
 
 type ResultPageMode = 'detailed' | 'simplified';

package/dist/index.js

@@ -330,6 +330,15 @@ function useKoraIDV() {
       return null;
     }
   }, [sdk]);
+  const completionFiredRef = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    if (state.step === "processing" && !completionFiredRef.current) {
+      completionFiredRef.current = true;
+      complete();
+    } else if (state.step !== "processing" && state.step !== "complete") {
+      completionFiredRef.current = false;
+    }
+  }, [state.step, complete]);
   const cancel = (0, import_react2.useCallback)(() => {
     sdk.reset();
     setState({
@@ -2341,7 +2350,13 @@ function LivenessScreen({
   onComplete,
   onCancel
 }) {
+  const videoRef = (0, import_react8.useRef)(null);
+  const canvasRef = (0, import_react8.useRef)(null);
+  const [stream, setStream] = (0, import_react8.useState)(null);
+  const [cameraError, setCameraError] = (0, import_react8.useState)(null);
+  const [phase, setPhase] = (0, import_react8.useState)("preparing");
   const [countdown, setCountdown] = (0, import_react8.useState)(3);
+  const [capturing, setCapturing] = (0, import_react8.useState)(false);
   (0, import_react8.useEffect)(() => {
     injectKeyframes();
   }, []);
@@ -2349,24 +2364,95 @@ function LivenessScreen({
     if (!session) onStart();
   }, [session, onStart]);
   (0, import_react8.useEffect)(() => {
-    if (session && !currentChallenge && completedChallenges > 0) {
-      onComplete();
+    let mounted = true;
+    async function startCamera() {
+      try {
+        const mediaStream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            facingMode: "user",
+            width: { ideal: 720 },
+            height: { ideal: 720 }
+          }
+        });
+        if (!mounted) {
+          mediaStream.getTracks().forEach((t) => t.stop());
+          return;
+        }
+        setStream(mediaStream);
+        if (videoRef.current) {
+          videoRef.current.srcObject = mediaStream;
+        }
+      } catch {
+        if (mounted) {
+          setCameraError(
+            "Camera access denied. Please enable camera permissions and try again."
+          );
+        }
+      }
     }
-  }, [session, currentChallenge, completedChallenges, onComplete]);
+    startCamera();
+    return () => {
+      mounted = false;
+    };
+  }, []);
+  (0, import_react8.useEffect)(() => {
+    return () => {
+      stream?.getTracks().forEach((t) => t.stop());
+    };
+  }, [stream]);
   (0, import_react8.useEffect)(() => {
     if (!currentChallenge) return;
+    setPhase("preparing");
     setCountdown(3);
-    const interval = setInterval(() => {
-      setCountdown((c) => {
-        if (c <= 1) {
-          clearInterval(interval);
-          return 0;
-        }
-        return c - 1;
-      });
-    }, 1e3);
-    return () => clearInterval(interval);
   }, [currentChallenge?.id]);
+  const captureFrame = (0, import_react8.useCallback)(async () => {
+    if (!currentChallenge || !videoRef.current || !canvasRef.current || capturing) {
+      return;
+    }
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx || video.videoWidth === 0 || video.videoHeight === 0) return;
+    setCapturing(true);
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    ctx.drawImage(video, 0, 0);
+    canvas.toBlob(
+      async (blob) => {
+        if (blob) {
+          await onChallengeComplete(blob);
+        }
+        setCapturing(false);
+      },
+      "image/jpeg",
+      0.85
+    );
+  }, [currentChallenge, capturing, onChallengeComplete]);
+  (0, import_react8.useEffect)(() => {
+    if (!currentChallenge || capturing) return;
+    if (countdown === 0) {
+      if (phase === "preparing") {
+        setPhase("capturing");
+        setCountdown(3);
+      } else {
+        captureFrame();
+      }
+      return;
+    }
+    const t = setTimeout(() => setCountdown((c) => c - 1), 1e3);
+    return () => clearTimeout(t);
+  }, [countdown, currentChallenge?.id, capturing, captureFrame, phase]);
+  (0, import_react8.useEffect)(() => {
+    if (session && !currentChallenge && completedChallenges > 0) {
+      onComplete();
+    }
+  }, [session, currentChallenge, completedChallenges, onComplete]);
+  if (cameraError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.darkContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.errorContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { style: styles.errorText, children: cameraError }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: styles.primaryButton, onClick: onCancel, children: "Go back" })
+    ] }) });
+  }
   if (!session) {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.darkContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: styles.loadingContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.spinner }),
@@ -2381,34 +2467,136 @@ function LivenessScreen({
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h1", { style: styles.darkScreenTitle, children: "Liveness Check" }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
     ] }),
-    currentChallenge && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "16px 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { style: styles.challengeTitle, children: currentChallenge.instruction }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.faceGuide, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "svg",
-        {
-          style: { position: "absolute", top: "-8px", left: "-8px" },
-          width: "256",
-          height: "316",
-          viewBox: "0 0 256 316",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "ellipse",
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "24px",
+          padding: "16px 0"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "div",
+              {
+                style: {
+                  width: "240px",
+                  height: "300px",
+                  borderRadius: "50%",
+                  overflow: "hidden",
+                  backgroundColor: "#000",
+                  border: "3px solid rgba(255,255,255,0.2)"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "video",
+                  {
+                    ref: videoRef,
+                    autoPlay: true,
+                    playsInline: true,
+                    muted: true,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "cover",
+                      transform: "scaleX(-1)"
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "svg",
+              {
+                style: {
+                  position: "absolute",
+                  top: "-8px",
+                  left: "-8px",
+                  pointerEvents: "none"
+                },
+                width: "256",
+                height: "316",
+                viewBox: "0 0 256 316",
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "ellipse",
+                  {
+                    cx: "128",
+                    cy: "158",
+                    rx: "124",
+                    ry: "154",
+                    fill: "none",
+                    stroke: phase === "capturing" ? colors.teal : "rgba(13,148,136,0.4)",
+                    strokeWidth: "5",
+                    strokeDasharray: `${completedChallenges / totalChallenges * 880} 880`,
+                    transform: "rotate(-90 128 158)",
+                    strokeLinecap: "round"
+                  }
+                )
+              }
+            )
+          ] }),
+          currentChallenge && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "div",
             {
-              cx: "128",
-              cy: "158",
-              rx: "124",
-              ry: "154",
-              fill: "none",
-              stroke: colors.teal,
-              strokeWidth: "5",
-              strokeDasharray: `${completedChallenges / totalChallenges * 880} 880`,
-              transform: "rotate(-90 128 158)",
-              strokeLinecap: "round"
+              style: {
+                textAlign: "center",
+                padding: "20px 24px",
+                borderRadius: "16px",
+                backgroundColor: phase === "capturing" ? "rgba(13,148,136,0.18)" : "rgba(255,255,255,0.06)",
+                border: phase === "capturing" ? `1px solid ${colors.teal}` : "1px solid rgba(255,255,255,0.08)",
+                minWidth: "260px",
+                transition: "background-color 200ms, border-color 200ms"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "p",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: "12px",
+                      fontWeight: 600,
+                      letterSpacing: "0.08em",
+                      textTransform: "uppercase",
+                      color: phase === "capturing" ? colors.teal : "rgba(255,255,255,0.5)"
+                    },
+                    children: capturing ? "Checking..." : phase === "preparing" ? "Get ready" : "Now \u2014 hold the pose"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "h2",
+                  {
+                    style: {
+                      ...styles.challengeTitle,
+                      margin: "8px 0 0",
+                      fontSize: "26px"
+                    },
+                    children: currentChallenge.instruction
+                  }
+                ),
+                !capturing && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "p",
+                  {
+                    style: {
+                      margin: "12px 0 0",
+                      fontSize: "32px",
+                      fontWeight: 700,
+                      color: phase === "capturing" ? colors.teal : "rgba(255,255,255,0.75)",
+                      lineHeight: 1
+                    },
+                    children: countdown
+                  }
+                )
+              ]
             }
-          )
-        }
-      ) }),
-      countdown > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.countdownBadge, children: countdown })
-    ] }) }),
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("canvas", { ref: canvasRef, style: { display: "none" } })
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: "16px 0" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.progressDots, children: session.challenges.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "div",
@@ -2422,24 +2610,21 @@ function LivenessScreen({
       )) }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { style: styles.progressText, children: [
         "Challenge ",
-        completedChallenges + 1,
-        " of ",
+        Math.min(completedChallenges + 1, totalChallenges),
+        " of",
+        " ",
         totalChallenges
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "16px 24px 32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "button",
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "0 24px 24px", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "p",
       {
-        style: styles.primaryButton,
-        onClick: async () => {
-          const canvas = document.createElement("canvas");
-          canvas.width = 100;
-          canvas.height = 100;
-          canvas.toBlob(async (blob) => {
-            if (blob) await onChallengeComplete(blob);
-          });
+        style: {
+          color: "rgba(255,255,255,0.5)",
+          fontSize: "13px",
+          margin: 0
         },
-        children: "Complete Challenge"
+        children: phase === "preparing" ? "Position your face inside the oval. Get ready for the next prompt." : "Hold the pose until the capture completes."
       }
     ) })
   ] });

package/dist/index.mjs

@@ -34,7 +34,7 @@ function useKoraIDVContext() {
 }
 
 // src/hooks/useKoraIDV.ts
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import {
   KoraError
 } from "@koraidv/core";
@@ -281,6 +281,15 @@ function useKoraIDV() {
       return null;
     }
   }, [sdk]);
+  const completionFiredRef = useRef(false);
+  useEffect(() => {
+    if (state.step === "processing" && !completionFiredRef.current) {
+      completionFiredRef.current = true;
+      complete();
+    } else if (state.step !== "processing" && state.step !== "complete") {
+      completionFiredRef.current = false;
+    }
+  }, [state.step, complete]);
   const cancel = useCallback(() => {
     sdk.reset();
     setState({
@@ -319,7 +328,7 @@ function useKoraIDV() {
 }
 
 // src/components/VerificationFlow.tsx
-import { useEffect as useEffect7, useState as useState6 } from "react";
+import { useEffect as useEffect8, useState as useState6 } from "react";
 import { KoraError as KoraError2, KoraErrorCode } from "@koraidv/core";
 
 // src/components/styles.ts
@@ -1299,7 +1308,7 @@ var styles = {
 };
 
 // src/components/DesignSystem.tsx
-import { useEffect } from "react";
+import { useEffect as useEffect2 } 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(
@@ -1373,7 +1382,7 @@ function ScoreMetricRow({ label, score, icon, status, message }) {
   );
 }
 function ProcessingScreen({ steps }) {
-  useEffect(() => {
+  useEffect2(() => {
     injectKeyframes();
   }, []);
   return /* @__PURE__ */ jsxs("div", { style: styles.processingContainer, children: [
@@ -1743,7 +1752,7 @@ function getIcon(type) {
 }
 
 // src/components/DocumentCaptureScreen.tsx
-import { useRef, useEffect as useEffect2, useState as useState3, useCallback as useCallback2 } from "react";
+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";
 var qualityIssueMessages = {
   face_blurred: "Photo on document is blurry. Retake in better lighting.",
@@ -1763,9 +1772,9 @@ function DocumentCaptureScreen({
   onCapture,
   onCancel
 }) {
-  const videoRef = useRef(null);
-  const canvasRef = useRef(null);
-  const guideRef = useRef(null);
+  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);
@@ -1774,10 +1783,10 @@ function DocumentCaptureScreen({
   const [qualityResult, setQualityResult] = useState3(null);
   const [isCheckingQuality, setIsCheckingQuality] = useState3(false);
   const [retakeCount, setRetakeCount] = useState3(0);
-  useEffect2(() => {
+  useEffect3(() => {
     injectKeyframes();
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     let mounted = true;
     async function startCamera() {
       try {
@@ -1799,7 +1808,7 @@ function DocumentCaptureScreen({
       mounted = false;
     };
   }, [capturedImage]);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       stream?.getTracks().forEach((t) => t.stop());
     };
@@ -2042,10 +2051,10 @@ function QualityCheck({ label }) {
 }
 
 // src/components/FlipDocumentScreen.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function FlipDocumentScreen({ onContinue, onCancel }) {
-  useEffect3(() => {
+  useEffect4(() => {
     injectKeyframes();
   }, []);
   return /* @__PURE__ */ jsxs6("div", { style: styles.darkContainer, children: [
@@ -2109,20 +2118,20 @@ function FlipDocumentScreen({ onContinue, onCancel }) {
 }
 
 // src/components/SelfieCaptureScreen.tsx
-import { useRef as useRef2, useEffect as useEffect4, useState as useState4, useCallback as useCallback3 } from "react";
+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 = useRef2(null);
-  const canvasRef = useRef2(null);
+  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);
-  useEffect4(() => {
+  useEffect5(() => {
     injectKeyframes();
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     let mounted = true;
     async function startCamera() {
       try {
@@ -2144,7 +2153,7 @@ function SelfieCaptureScreen({ onCapture, onCancel }) {
       mounted = false;
     };
   }, [capturedImage]);
-  useEffect4(() => {
+  useEffect5(() => {
     return () => {
       stream?.getTracks().forEach((t) => t.stop());
     };
@@ -2281,7 +2290,7 @@ function QualityCheck2({ label }) {
 }
 
 // src/components/LivenessScreen.tsx
-import { useEffect as useEffect5, useState as useState5 } from "react";
+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";
 function LivenessScreen({
   session,
@@ -2292,32 +2301,109 @@ function LivenessScreen({
   onComplete,
   onCancel
 }) {
+  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);
-  useEffect5(() => {
+  const [capturing, setCapturing] = useState5(false);
+  useEffect6(() => {
     injectKeyframes();
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!session) onStart();
   }, [session, onStart]);
-  useEffect5(() => {
-    if (session && !currentChallenge && completedChallenges > 0) {
-      onComplete();
+  useEffect6(() => {
+    let mounted = true;
+    async function startCamera() {
+      try {
+        const mediaStream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            facingMode: "user",
+            width: { ideal: 720 },
+            height: { ideal: 720 }
+          }
+        });
+        if (!mounted) {
+          mediaStream.getTracks().forEach((t) => t.stop());
+          return;
+        }
+        setStream(mediaStream);
+        if (videoRef.current) {
+          videoRef.current.srcObject = mediaStream;
+        }
+      } catch {
+        if (mounted) {
+          setCameraError(
+            "Camera access denied. Please enable camera permissions and try again."
+          );
+        }
+      }
     }
-  }, [session, currentChallenge, completedChallenges, onComplete]);
-  useEffect5(() => {
+    startCamera();
+    return () => {
+      mounted = false;
+    };
+  }, []);
+  useEffect6(() => {
+    return () => {
+      stream?.getTracks().forEach((t) => t.stop());
+    };
+  }, [stream]);
+  useEffect6(() => {
     if (!currentChallenge) return;
+    setPhase("preparing");
     setCountdown(3);
-    const interval = setInterval(() => {
-      setCountdown((c) => {
-        if (c <= 1) {
-          clearInterval(interval);
-          return 0;
-        }
-        return c - 1;
-      });
-    }, 1e3);
-    return () => clearInterval(interval);
   }, [currentChallenge?.id]);
+  const captureFrame = useCallback4(async () => {
+    if (!currentChallenge || !videoRef.current || !canvasRef.current || capturing) {
+      return;
+    }
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx || video.videoWidth === 0 || video.videoHeight === 0) return;
+    setCapturing(true);
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    ctx.drawImage(video, 0, 0);
+    canvas.toBlob(
+      async (blob) => {
+        if (blob) {
+          await onChallengeComplete(blob);
+        }
+        setCapturing(false);
+      },
+      "image/jpeg",
+      0.85
+    );
+  }, [currentChallenge, capturing, onChallengeComplete]);
+  useEffect6(() => {
+    if (!currentChallenge || capturing) return;
+    if (countdown === 0) {
+      if (phase === "preparing") {
+        setPhase("capturing");
+        setCountdown(3);
+      } else {
+        captureFrame();
+      }
+      return;
+    }
+    const t = setTimeout(() => setCountdown((c) => c - 1), 1e3);
+    return () => clearTimeout(t);
+  }, [countdown, currentChallenge?.id, capturing, captureFrame, phase]);
+  useEffect6(() => {
+    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" })
+    ] }) });
+  }
   if (!session) {
     return /* @__PURE__ */ jsx9("div", { style: styles.darkContainer, children: /* @__PURE__ */ jsxs8("div", { style: styles.loadingContainer, children: [
       /* @__PURE__ */ jsx9("div", { style: styles.spinner }),
@@ -2332,34 +2418,136 @@ function LivenessScreen({
       /* @__PURE__ */ jsx9("h1", { style: styles.darkScreenTitle, children: "Liveness Check" }),
       /* @__PURE__ */ jsx9("button", { style: styles.glassCloseButton, onClick: onCancel, children: "\u2715" })
     ] }),
-    currentChallenge && /* @__PURE__ */ jsx9("div", { style: { padding: "16px 0" }, children: /* @__PURE__ */ jsx9("h2", { style: styles.challengeTitle, children: currentChallenge.instruction }) }),
-    /* @__PURE__ */ jsx9("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx9("div", { style: styles.faceGuide, children: /* @__PURE__ */ jsx9(
-        "svg",
-        {
-          style: { position: "absolute", top: "-8px", left: "-8px" },
-          width: "256",
-          height: "316",
-          viewBox: "0 0 256 316",
-          children: /* @__PURE__ */ jsx9(
-            "ellipse",
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "24px",
+          padding: "16px 0"
+        },
+        children: [
+          /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsx9(
+              "div",
+              {
+                style: {
+                  width: "240px",
+                  height: "300px",
+                  borderRadius: "50%",
+                  overflow: "hidden",
+                  backgroundColor: "#000",
+                  border: "3px solid rgba(255,255,255,0.2)"
+                },
+                children: /* @__PURE__ */ jsx9(
+                  "video",
+                  {
+                    ref: videoRef,
+                    autoPlay: true,
+                    playsInline: true,
+                    muted: true,
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      objectFit: "cover",
+                      transform: "scaleX(-1)"
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "svg",
+              {
+                style: {
+                  position: "absolute",
+                  top: "-8px",
+                  left: "-8px",
+                  pointerEvents: "none"
+                },
+                width: "256",
+                height: "316",
+                viewBox: "0 0 256 316",
+                children: /* @__PURE__ */ jsx9(
+                  "ellipse",
+                  {
+                    cx: "128",
+                    cy: "158",
+                    rx: "124",
+                    ry: "154",
+                    fill: "none",
+                    stroke: phase === "capturing" ? colors.teal : "rgba(13,148,136,0.4)",
+                    strokeWidth: "5",
+                    strokeDasharray: `${completedChallenges / totalChallenges * 880} 880`,
+                    transform: "rotate(-90 128 158)",
+                    strokeLinecap: "round"
+                  }
+                )
+              }
+            )
+          ] }),
+          currentChallenge && /* @__PURE__ */ jsxs8(
+            "div",
             {
-              cx: "128",
-              cy: "158",
-              rx: "124",
-              ry: "154",
-              fill: "none",
-              stroke: colors.teal,
-              strokeWidth: "5",
-              strokeDasharray: `${completedChallenges / totalChallenges * 880} 880`,
-              transform: "rotate(-90 128 158)",
-              strokeLinecap: "round"
+              style: {
+                textAlign: "center",
+                padding: "20px 24px",
+                borderRadius: "16px",
+                backgroundColor: phase === "capturing" ? "rgba(13,148,136,0.18)" : "rgba(255,255,255,0.06)",
+                border: phase === "capturing" ? `1px solid ${colors.teal}` : "1px solid rgba(255,255,255,0.08)",
+                minWidth: "260px",
+                transition: "background-color 200ms, border-color 200ms"
+              },
+              children: [
+                /* @__PURE__ */ jsx9(
+                  "p",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: "12px",
+                      fontWeight: 600,
+                      letterSpacing: "0.08em",
+                      textTransform: "uppercase",
+                      color: phase === "capturing" ? colors.teal : "rgba(255,255,255,0.5)"
+                    },
+                    children: capturing ? "Checking..." : phase === "preparing" ? "Get ready" : "Now \u2014 hold the pose"
+                  }
+                ),
+                /* @__PURE__ */ jsx9(
+                  "h2",
+                  {
+                    style: {
+                      ...styles.challengeTitle,
+                      margin: "8px 0 0",
+                      fontSize: "26px"
+                    },
+                    children: currentChallenge.instruction
+                  }
+                ),
+                !capturing && /* @__PURE__ */ jsx9(
+                  "p",
+                  {
+                    style: {
+                      margin: "12px 0 0",
+                      fontSize: "32px",
+                      fontWeight: 700,
+                      color: phase === "capturing" ? colors.teal : "rgba(255,255,255,0.75)",
+                      lineHeight: 1
+                    },
+                    children: countdown
+                  }
+                )
+              ]
             }
-          )
-        }
-      ) }),
-      countdown > 0 && /* @__PURE__ */ jsx9("div", { style: styles.countdownBadge, children: countdown })
-    ] }) }),
+          ),
+          /* @__PURE__ */ jsx9("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(
         "div",
@@ -2373,24 +2561,21 @@ function LivenessScreen({
       )) }),
       /* @__PURE__ */ jsxs8("p", { style: styles.progressText, children: [
         "Challenge ",
-        completedChallenges + 1,
-        " of ",
+        Math.min(completedChallenges + 1, totalChallenges),
+        " of",
+        " ",
         totalChallenges
       ] })
     ] }),
-    /* @__PURE__ */ jsx9("div", { style: { padding: "16px 24px 32px" }, children: /* @__PURE__ */ jsx9(
-      "button",
+    /* @__PURE__ */ jsx9("div", { style: { padding: "0 24px 24px", textAlign: "center" }, children: /* @__PURE__ */ jsx9(
+      "p",
       {
-        style: styles.primaryButton,
-        onClick: async () => {
-          const canvas = document.createElement("canvas");
-          canvas.width = 100;
-          canvas.height = 100;
-          canvas.toBlob(async (blob) => {
-            if (blob) await onChallengeComplete(blob);
-          });
+        style: {
+          color: "rgba(255,255,255,0.5)",
+          fontSize: "13px",
+          margin: 0
         },
-        children: "Complete Challenge"
+        children: phase === "preparing" ? "Position your face inside the oval. Get ready for the next prompt." : "Hold the pose until the capture completes."
       }
     ) })
   ] });
@@ -2763,10 +2948,10 @@ function ErrorScreen({ error, onRetry, onCancel }) {
 }
 
 // src/components/LoadingScreen.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function LoadingScreen({ message = "Loading..." }) {
-  useEffect6(() => {
+  useEffect7(() => {
     injectKeyframes();
   }, []);
   return /* @__PURE__ */ jsx12("div", { style: styles.container, children: /* @__PURE__ */ jsxs11("div", { style: styles.loadingContainer, children: [
@@ -2823,20 +3008,20 @@ function VerificationFlow({
   const [showFlipInstruction, setShowFlipInstruction] = useState6(true);
   const [supportedCountries, setSupportedCountries] = useState6([]);
   const [countriesLoading, setCountriesLoading] = useState6(false);
-  useEffect7(() => {
+  useEffect8(() => {
     if (state.step === "document_front") {
       setShowFlipInstruction(true);
     }
   }, [state.step]);
-  useEffect7(() => {
+  useEffect8(() => {
     startVerification(externalId, tier);
   }, [externalId, tier, startVerification]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (state.step === "complete" && state.verification && onComplete) {
       onComplete(state.verification);
     }
   }, [state.step, state.verification, onComplete]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (state.error && onError) {
       onError(state.error);
     }
@@ -2972,7 +3157,7 @@ function VerificationFlow({
 }
 
 // src/components/QrHandoffScreen.tsx
-import { useEffect as useEffect8, useState as useState7, useRef as useRef3 } from "react";
+import { useEffect as useEffect9, useState as useState7, useRef as useRef5 } from "react";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function QrHandoffScreen({
   session,
@@ -2985,8 +3170,8 @@ function QrHandoffScreen({
   const [timeLeft, setTimeLeft] = useState7(session.expiresIn);
   const [scanned, setScanned] = useState7(false);
   const [expired, setExpired] = useState7(false);
-  const timerRef = useRef3();
-  useEffect8(() => {
+  const timerRef = useRef5();
+  useEffect9(() => {
     setTimeLeft(session.expiresIn);
     setExpired(false);
     setScanned(false);
@@ -3003,7 +3188,7 @@ function QrHandoffScreen({
     }, 1e3);
     return () => clearInterval(timerRef.current);
   }, [session.token]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!eventSource) return;
     const handleStatus = (event) => {
       try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koraidv/react",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "description": "Kora IDV React Components for Identity Verification",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -21,7 +21,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@koraidv/core": "^1.7.6"
+    "@koraidv/core": "^1.7.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",