@koraidv/react 1.7.7 → 1.7.8

package/dist/index.js

@@ -2354,6 +2354,7 @@ function LivenessScreen({
   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)(() => {
@@ -2401,6 +2402,7 @@ function LivenessScreen({
   }, [stream]);
   (0, import_react8.useEffect)(() => {
     if (!currentChallenge) return;
+    setPhase("preparing");
     setCountdown(3);
   }, [currentChallenge?.id]);
   const captureFrame = (0, import_react8.useCallback)(async () => {
@@ -2429,12 +2431,17 @@ function LivenessScreen({
   (0, import_react8.useEffect)(() => {
     if (!currentChallenge || capturing) return;
     if (countdown === 0) {
-      captureFrame();
+      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]);
+  }, [countdown, currentChallenge?.id, capturing, captureFrame, phase]);
   (0, import_react8.useEffect)(() => {
     if (session && !currentChallenge && completedChallenges > 0) {
       onComplete();
@@ -2460,15 +2467,17 @@ 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.jsxs)(
       "div",
       {
         style: {
           flex: 1,
           display: "flex",
+          flexDirection: "column",
           alignItems: "center",
-          justifyContent: "center"
+          justifyContent: "center",
+          gap: "24px",
+          padding: "16px 0"
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { position: "relative" }, children: [
@@ -2520,7 +2529,7 @@ function LivenessScreen({
                     rx: "124",
                     ry: "154",
                     fill: "none",
-                    stroke: colors.teal,
+                    stroke: phase === "capturing" ? colors.teal : "rgba(13,148,136,0.4)",
                     strokeWidth: "5",
                     strokeDasharray: `${completedChallenges / totalChallenges * 880} 880`,
                     transform: "rotate(-90 128 158)",
@@ -2528,20 +2537,62 @@ function LivenessScreen({
                   }
                 )
               }
-            ),
-            currentChallenge && countdown > 0 && !capturing && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: styles.countdownBadge, children: countdown }),
-            capturing && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              "div",
-              {
-                style: {
-                  ...styles.countdownBadge,
-                  fontSize: "14px",
-                  padding: "8px 14px"
-                },
-                children: "Checking..."
-              }
             )
           ] }),
+          currentChallenge && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "div",
+            {
+              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
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("canvas", { ref: canvasRef, style: { display: "none" } })
         ]
       }
@@ -2573,7 +2624,7 @@ function LivenessScreen({
           fontSize: "13px",
           margin: 0
         },
-        children: "Position your face inside the oval and follow the prompt."
+        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

@@ -2305,6 +2305,7 @@ function LivenessScreen({
   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(() => {
@@ -2352,6 +2353,7 @@ function LivenessScreen({
   }, [stream]);
   useEffect6(() => {
     if (!currentChallenge) return;
+    setPhase("preparing");
     setCountdown(3);
   }, [currentChallenge?.id]);
   const captureFrame = useCallback4(async () => {
@@ -2380,12 +2382,17 @@ function LivenessScreen({
   useEffect6(() => {
     if (!currentChallenge || capturing) return;
     if (countdown === 0) {
-      captureFrame();
+      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]);
+  }, [countdown, currentChallenge?.id, capturing, captureFrame, phase]);
   useEffect6(() => {
     if (session && !currentChallenge && completedChallenges > 0) {
       onComplete();
@@ -2411,15 +2418,17 @@ 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__ */ jsxs8(
       "div",
       {
         style: {
           flex: 1,
           display: "flex",
+          flexDirection: "column",
           alignItems: "center",
-          justifyContent: "center"
+          justifyContent: "center",
+          gap: "24px",
+          padding: "16px 0"
         },
         children: [
           /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, children: [
@@ -2471,7 +2480,7 @@ function LivenessScreen({
                     rx: "124",
                     ry: "154",
                     fill: "none",
-                    stroke: colors.teal,
+                    stroke: phase === "capturing" ? colors.teal : "rgba(13,148,136,0.4)",
                     strokeWidth: "5",
                     strokeDasharray: `${completedChallenges / totalChallenges * 880} 880`,
                     transform: "rotate(-90 128 158)",
@@ -2479,20 +2488,62 @@ function LivenessScreen({
                   }
                 )
               }
-            ),
-            currentChallenge && countdown > 0 && !capturing && /* @__PURE__ */ jsx9("div", { style: styles.countdownBadge, children: countdown }),
-            capturing && /* @__PURE__ */ jsx9(
-              "div",
-              {
-                style: {
-                  ...styles.countdownBadge,
-                  fontSize: "14px",
-                  padding: "8px 14px"
-                },
-                children: "Checking..."
-              }
             )
           ] }),
+          currentChallenge && /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              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
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx9("canvas", { ref: canvasRef, style: { display: "none" } })
         ]
       }
@@ -2524,7 +2575,7 @@ function LivenessScreen({
           fontSize: "13px",
           margin: 0
         },
-        children: "Position your face inside the oval and follow the prompt."
+        children: phase === "preparing" ? "Position your face inside the oval. Get ready for the next prompt." : "Hold the pose until the capture completes."
       }
     ) })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koraidv/react",
-  "version": "1.7.7",
+  "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.7"
+    "@koraidv/core": "^1.7.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",