vesant-sdk 1.7.2-dev.617dd44 → 1.7.2

package/dist/react.js

@@ -930,19 +930,19 @@ var Close = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0id
 var FACE_MESSAGES = {
   idle: "Initializing camera...",
   loading: "Loading face detection...",
-  scanning: "Position your face in the circle",
+  scanning: "Position your face in the oval",
   too_far: "Face too far. Please move closer to the camera",
   too_close: "Too close. Please move back a little",
-  off_center: "Center your face in the circle",
+  off_center: "Center your face in the oval",
   ok: "Looking great! Tap the button to capture"
 };
 var FACE_COLORS = {
   idle: "#9ca3af",
-  loading: "#3b82f6",
-  scanning: "#3b82f6",
+  loading: "#ef4444",
+  scanning: "#ef4444",
   too_far: "#ef4444",
-  too_close: "#f59e0b",
-  off_center: "#f59e0b",
+  too_close: "#ef4444",
+  off_center: "#ef4444",
   ok: "#10b981"
 };
 var MEDIAPIPE_BASE = "https://cdn.jsdelivr.net/npm/@mediapipe/face_detection";
@@ -1007,11 +1007,77 @@ function loadMediaPipeFaceDetection(assetBasePath) {
   return loader;
 }
 
+// src/kyc/hostedJourney.ts
+var REUSE_KYC_SESSION_EXPIRY_MS = 10 * 60 * 1e3;
+var JOURNEY_FRAME_HEIGHT = "clamp(500px, 64vh, 680px)";
+var JOURNEY_CONFIRM_TIMEOUT_MS = 45e3;
+function journeyOutcomeFromMessage(data) {
+  const status = data?.verification_status;
+  if (typeof status !== "string") return null;
+  switch (status) {
+    case "verification.accepted":
+      return "accepted";
+    case "verification.declined":
+      return "declined";
+    case "verification.cancelled":
+    case "request.timeout":
+    case "request.invalid":
+    case "request.unauthorized":
+    case "request.deleted":
+      return "cancelled";
+    default:
+      return null;
+  }
+}
+function journeyPollIntervalMs(confirming) {
+  return confirming ? 1e3 : 2500;
+}
+function pendingJourneyResult(reference) {
+  return {
+    event: "reuse_kyc",
+    reference,
+    resource_id: "",
+    status: "pending",
+    data: {
+      retries_remaining: 0,
+      retry_limit_exceeded: false,
+      trigger_alert: false,
+      enforce_logout: false,
+      freeze_account: false,
+      block: false,
+      freeze_duration_minutes: 0
+    }
+  };
+}
+function tryStartOperation(guard) {
+  if (guard.current) return false;
+  guard.current = true;
+  return true;
+}
+function releaseOperation(guard) {
+  guard.current = false;
+}
+function retryTarget(hasHostedJourney) {
+  return hasHostedJourney ? "journey" : "capture";
+}
+var CAPTURE_MODAL_MAX_WIDTH = 448;
+function modalMaxWidth(hasHostedJourney) {
+  return hasHostedJourney ? CAPTURE_MODAL_MAX_WIDTH : CAPTURE_MODAL_MAX_WIDTH;
+}
+var JOURNEY_CONTENT_PADDING = 12;
+function resultForModalClose(stageKind, result, unconfirmed) {
+  const terminal = stageKind === "accepted" || stageKind === "declined" || stageKind === "max_attempts";
+  if (terminal && result !== void 0) return result;
+  const awaitingConfirmation = stageKind === "confirming" || stageKind === "unconfirmed";
+  if (awaitingConfirmation && unconfirmed !== void 0) return unconfirmed;
+  return null;
+}
+
 // src/kyc/FaceCaptureModal.tsx
 var MOBILE_UA = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
-var SESSION_EXPIRY_MS = 15 * 60 * 1e3;
+var ACCEPTED_AUTO_CLOSE_MS = 1200;
 var LIVENESS_MESSAGES = [
-  "Position your face inside the circle",
+  "Position your face inside the oval",
   "Make sure your face is well lit",
   "Remove glasses or hats if possible",
   "Look straight at the camera, then tap Capture"
@@ -1020,6 +1086,12 @@ function headerSubtitle(stageKind) {
   switch (stageKind) {
     case "qr":
       return "Use your phone to continue";
+    case "journey":
+      return "Follow the steps to verify your identity";
+    case "confirming":
+      return "Confirming your result";
+    case "unconfirmed":
+      return "Still confirming";
     case "accepted":
       return "All set";
     case "declined":
@@ -1045,7 +1117,9 @@ function FaceCaptureModal({
 }) {
   const isMobile = typeof navigator !== "undefined" && MOBILE_UA.test(navigator.userAgent);
   const initialChoice = defaultDevice ?? (isMobile ? "this" : "ask");
+  const journeyMode = Boolean(session.verification_url);
   const initialStage = (() => {
+    if (journeyMode) return { kind: "journey", url: session.verification_url ?? "" };
     if (initialChoice === "this") return { kind: "capture" };
     if (initialChoice === "mobile") return { kind: "qr", mobileConnected: false };
     return { kind: "choose" };
@@ -1063,19 +1137,20 @@ function FaceCaptureModal({
   const qrPayload = session.link || `vesant://reuse-kyc?token=${encodeURIComponent(session.token)}`;
   const cancelledRef = React.useRef(false);
   const submittingRef = React.useRef(false);
+  const journeyRetryingRef = React.useRef(false);
   React.useEffect(() => {
     const timer = setTimeout(() => {
       setStage(
-        (prev) => prev.kind === "choose" || prev.kind === "qr" || prev.kind === "capture" ? { kind: "error", message: "Session expired" } : prev
+        (prev) => prev.kind === "choose" || prev.kind === "qr" || prev.kind === "capture" || prev.kind === "journey" ? { kind: "error", message: "Session expired" } : prev
       );
-    }, SESSION_EXPIRY_MS);
+    }, REUSE_KYC_SESSION_EXPIRY_MS);
     return () => clearTimeout(timer);
   }, [session.token]);
   React.useEffect(() => {
     if (stage.kind !== "qr") return;
     let stopped = false;
     const intervalMs = 2e3;
-    const deadline = Date.now() + SESSION_EXPIRY_MS;
+    const deadline = Date.now() + REUSE_KYC_SESSION_EXPIRY_MS;
     let mobileSeen = stage.mobileConnected;
     const tick = async () => {
       if (stopped || cancelledRef.current) return;
@@ -1116,6 +1191,82 @@ function FaceCaptureModal({
       stopped = true;
     };
   }, [stage.kind, stage.kind === "qr" ? stage.mobileConnected : false]);
+  const journeyUrl = stage.kind === "journey" || stage.kind === "confirming" ? stage.url : "";
+  React.useEffect(() => {
+    if (stage.kind !== "journey" && stage.kind !== "confirming" || !journeyUrl) return;
+    const intervalMs = journeyPollIntervalMs(stage.kind === "confirming");
+    let stopped = false;
+    const checkOnce = async () => {
+      try {
+        const result = await client.getEventBasedFaceVerificationSessionStatus(session.token);
+        if (applyResult(result)) {
+          stopped = true;
+          return true;
+        }
+      } catch {
+      }
+      return false;
+    };
+    const tick = async () => {
+      if (stopped || cancelledRef.current) return;
+      await checkOnce();
+      if (!stopped && !cancelledRef.current) {
+        setTimeout(tick, intervalMs);
+      }
+    };
+    void tick();
+    let frameOrigin = "";
+    try {
+      frameOrigin = new URL(journeyUrl).origin;
+    } catch {
+      frameOrigin = "";
+    }
+    const onMessage = (e) => {
+      if (!frameOrigin || e.origin !== frameOrigin) return;
+      const outcome = journeyOutcomeFromMessage(e.data);
+      if (!outcome) return;
+      void checkOnce();
+      setStage((prev) => {
+        if (prev.kind !== "journey") return prev;
+        if (outcome === "cancelled") {
+          return { kind: "error", message: "The verification was closed before it finished. Please try again." };
+        }
+        return { kind: "confirming", outcome, url: prev.url };
+      });
+    };
+    window.addEventListener("message", onMessage);
+    return () => {
+      stopped = true;
+      window.removeEventListener("message", onMessage);
+    };
+  }, [stage.kind, journeyUrl]);
+  React.useEffect(() => {
+    if (stage.kind !== "confirming") return;
+    const outcome = stage.outcome;
+    const timer = setTimeout(() => {
+      setStage((prev) => prev.kind === "confirming" ? { kind: "unconfirmed", outcome } : prev);
+    }, JOURNEY_CONFIRM_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [stage.kind, stage.kind === "confirming" ? stage.outcome : ""]);
+  const handleJourneyRetry = async () => {
+    if (!tryStartOperation(journeyRetryingRef)) return;
+    setStage({ kind: "journey", url: "" });
+    try {
+      const refreshed = await client.retryEventBasedFaceVerificationJourney(session.token);
+      if (refreshed.verification_url) {
+        setStage({ kind: "journey", url: refreshed.verification_url });
+        return;
+      }
+      setStage({ kind: "error", message: "Unable to start a new attempt. Please try again." });
+    } catch (err) {
+      setStage({
+        kind: "error",
+        message: err instanceof Error ? err.message : "Unable to start a new attempt. Please try again."
+      });
+    } finally {
+      releaseOperation(journeyRetryingRef);
+    }
+  };
   const applyResult = (result) => {
     if (result.status === "accepted") {
       setStage({ kind: "accepted", result });
@@ -1243,12 +1394,23 @@ function FaceCaptureModal({
     }, 3e3);
     return () => clearInterval(interval);
   }, [captureMode]);
-  const close = (result) => {
+  const close = React.useCallback((result) => {
     cancelledRef.current = true;
     if (result === null && onCancel) {
       onCancel();
     }
     onComplete(result);
+  }, [onCancel, onComplete]);
+  React.useEffect(() => {
+    if (stage.kind !== "accepted") return;
+    const result = stage.result;
+    const timer = setTimeout(() => close(result), ACCEPTED_AUTO_CLOSE_MS);
+    return () => clearTimeout(timer);
+  }, [close, stage]);
+  const handleHeaderClose = () => {
+    const result = "result" in stage ? stage.result : void 0;
+    const unconfirmed = stage.kind === "confirming" || stage.kind === "unconfirmed" ? pendingJourneyResult(session.reference) : void 0;
+    close(resultForModalClose(stage.kind, result, unconfirmed));
   };
   const renderChoose = () => /* @__PURE__ */ React__default.default.createElement("div", { style: contentStyle }, /* @__PURE__ */ React__default.default.createElement("div", { style: visualGuideContainerStyle }, /* @__PURE__ */ React__default.default.createElement("div", { style: visualGuideStyle }, /* @__PURE__ */ React__default.default.createElement("div", { style: circleStyle }, /* @__PURE__ */ React__default.default.createElement("img", { src: Camera, alt: "", width: 48, height: 48 })))), /* @__PURE__ */ React__default.default.createElement("p", { style: subtitleStyle }, "How would you like to verify?"), /* @__PURE__ */ React__default.default.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React__default.default.createElement(
     "button",
@@ -1307,12 +1469,37 @@ function FaceCaptureModal({
   };
   const renderSubmitting = () => /* @__PURE__ */ React__default.default.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React__default.default.createElement("div", { style: { ...spinnerStyle, margin: "24px auto", width: 32, height: 32 } }), /* @__PURE__ */ React__default.default.createElement("p", { style: subtitleStyle }, "Verifying your photo\u2026"), /* @__PURE__ */ React__default.default.createElement("p", { style: { ...attemptsTextStyle, marginTop: 8 } }, "This usually takes a few seconds."));
   const renderAccepted = (result) => /* @__PURE__ */ React__default.default.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React__default.default.createElement("div", { style: successCircleStyle }, /* @__PURE__ */ React__default.default.createElement("img", { src: Done, alt: "", width: 48, height: 48 })), /* @__PURE__ */ React__default.default.createElement("h3", { style: titleStyle }, "Verified"), /* @__PURE__ */ React__default.default.createElement("p", { style: subtitleStyle }, "Your identity has been confirmed. You can continue."), /* @__PURE__ */ React__default.default.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React__default.default.createElement("button", { style: primaryButtonStyle, onClick: () => close(result) }, "Continue")));
-  const renderDeclined = (result) => /* @__PURE__ */ React__default.default.createElement("div", { style: contentStyle }, /* @__PURE__ */ React__default.default.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React__default.default.createElement("p", { style: alertTextStyle }, result.declined_reason ?? "We couldn't match your selfie. Please take a new one.")), /* @__PURE__ */ React__default.default.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React__default.default.createElement("button", { style: primaryButtonStyle, onClick: handleRetakeAfterDecline }, /* @__PURE__ */ React__default.default.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }), /* @__PURE__ */ React__default.default.createElement("span", null, "Retake")), /* @__PURE__ */ React__default.default.createElement("button", { style: cancelButtonStyle, onClick: () => close(result) }, "Cancel")), /* @__PURE__ */ React__default.default.createElement("p", { style: attemptsTextStyle }, "Attempt ", Math.min(attempts + 1, maxAttempts), " of ", maxAttempts));
+  const renderDeclined = (result) => /* @__PURE__ */ React__default.default.createElement("div", { style: contentStyle }, /* @__PURE__ */ React__default.default.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React__default.default.createElement("p", { style: alertTextStyle }, result.declined_reason ?? "We couldn't match your selfie. Please take a new one.")), /* @__PURE__ */ React__default.default.createElement("div", { style: buttonsContainerStyle }, journeyMode ? /* @__PURE__ */ React__default.default.createElement("button", { style: primaryButtonStyle, onClick: () => void handleJourneyRetry() }, /* @__PURE__ */ React__default.default.createElement("span", null, "Try Again")) : /* @__PURE__ */ React__default.default.createElement("button", { style: primaryButtonStyle, onClick: handleRetakeAfterDecline }, /* @__PURE__ */ React__default.default.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }), /* @__PURE__ */ React__default.default.createElement("span", null, "Retake")), /* @__PURE__ */ React__default.default.createElement("button", { style: cancelButtonStyle, onClick: () => close(result) }, "Cancel")), /* @__PURE__ */ React__default.default.createElement("p", { style: attemptsTextStyle }, "Attempt ", Math.min(attempts + 1, maxAttempts), " of ", maxAttempts));
   const renderMaxAttempts = (result) => /* @__PURE__ */ React__default.default.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React__default.default.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React__default.default.createElement("h3", { style: titleStyle }, "Maximum Attempts Reached"), /* @__PURE__ */ React__default.default.createElement("p", { style: subtitleStyle }, result.declined_reason ?? "We couldn't verify your identity after several attempts."), result.data?.freeze_account && /* @__PURE__ */ React__default.default.createElement("p", { style: alertTextStyle }, "For your security, your account has been temporarily restricted", result.data.freeze_duration_minutes ? ` for ${result.data.freeze_duration_minutes} minutes` : "", ". Please contact support if you need immediate help."), result.data?.enforce_logout && /* @__PURE__ */ React__default.default.createElement("p", { style: alertTextStyle }, "You will be signed out of your session."), result.data?.block && /* @__PURE__ */ React__default.default.createElement("p", { style: alertTextStyle }, "This action has been blocked for security reasons."), /* @__PURE__ */ React__default.default.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React__default.default.createElement("button", { style: primaryButtonStyle, onClick: () => close(result) }, "Close")));
   const renderError = (message) => {
     const sessionExpired = /session\s+expired/i.test(message);
-    return /* @__PURE__ */ React__default.default.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React__default.default.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React__default.default.createElement("h3", { style: titleStyle }, sessionExpired ? "Session expired" : "Something Went Wrong"), /* @__PURE__ */ React__default.default.createElement("p", { style: alertTextStyle }, sessionExpired ? "Your verification session is no longer valid. Please start a new verification from the beginning." : message), /* @__PURE__ */ React__default.default.createElement("div", { style: buttonsContainerStyle }, !sessionExpired && /* @__PURE__ */ React__default.default.createElement("button", { style: primaryButtonStyle, onClick: () => setStage({ kind: "capture" }) }, "Try Again"), /* @__PURE__ */ React__default.default.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, sessionExpired ? "Close" : "Cancel")));
+    return /* @__PURE__ */ React__default.default.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React__default.default.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React__default.default.createElement("h3", { style: titleStyle }, sessionExpired ? "Session expired" : "Something Went Wrong"), /* @__PURE__ */ React__default.default.createElement("p", { style: alertTextStyle }, sessionExpired ? "Your verification session is no longer valid. Please start a new verification from the beginning." : message), /* @__PURE__ */ React__default.default.createElement("div", { style: buttonsContainerStyle }, !sessionExpired && /* @__PURE__ */ React__default.default.createElement(
+      "button",
+      {
+        style: primaryButtonStyle,
+        onClick: () => retryTarget(journeyMode) === "journey" ? void handleJourneyRetry() : setStage({ kind: "capture" })
+      },
+      "Try Again"
+    ), /* @__PURE__ */ React__default.default.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, sessionExpired ? "Close" : "Cancel")));
   };
+  const renderConfirming = () => /* @__PURE__ */ React__default.default.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React__default.default.createElement("div", { style: { ...spinnerStyle, margin: "24px auto", width: 32, height: 32 } }), /* @__PURE__ */ React__default.default.createElement("h3", { style: titleStyle }, "Confirming your result\u2026"), /* @__PURE__ */ React__default.default.createElement("p", { style: { ...attemptsTextStyle, marginTop: 8 } }, "This usually takes a few seconds."));
+  const renderUnconfirmed = (outcome) => /* @__PURE__ */ React__default.default.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React__default.default.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React__default.default.createElement("h3", { style: titleStyle }, "Still confirming"), /* @__PURE__ */ React__default.default.createElement("p", { style: alertTextStyle }, outcome === "accepted" ? "Your verification was submitted, but we haven't received the final result yet. You can close this window and we'll keep checking in the background." : "Your last attempt wasn't accepted, but we haven't received the details yet. You can try again or close this window."), /* @__PURE__ */ React__default.default.createElement("div", { style: buttonsContainerStyle }, outcome === "declined" && /* @__PURE__ */ React__default.default.createElement("button", { style: primaryButtonStyle, onClick: () => void handleJourneyRetry() }, "Try Again"), /* @__PURE__ */ React__default.default.createElement(
+    "button",
+    {
+      style: outcome === "accepted" ? primaryButtonStyle : cancelButtonStyle,
+      onClick: () => close(pendingJourneyResult(session.reference))
+    },
+    "Close"
+  )));
+  const renderJourney = (url) => /* @__PURE__ */ React__default.default.createElement("div", { style: { ...contentStyle, padding: JOURNEY_CONTENT_PADDING } }, url ? /* @__PURE__ */ React__default.default.createElement(
+    "iframe",
+    {
+      src: url,
+      title: "Identity verification",
+      allow: "camera; microphone",
+      style: journeyFrameStyle
+    }
+  ) : /* @__PURE__ */ React__default.default.createElement("div", { style: { padding: 24, textAlign: "center" } }, /* @__PURE__ */ React__default.default.createElement("div", { style: { ...spinnerStyle, margin: "24px auto", width: 32, height: 32 } }), /* @__PURE__ */ React__default.default.createElement("p", { style: subtitleStyle }, "Preparing your next attempt\u2026")), /* @__PURE__ */ React__default.default.createElement("p", { style: { ...attemptsTextStyle, textAlign: "center" } }, "Attempt ", Math.min(attempts + 1, maxAttempts), " of ", maxAttempts));
   const body = (() => {
     switch (stage.kind) {
       case "choose":
@@ -1321,6 +1508,12 @@ function FaceCaptureModal({
         return renderQRStage(stage.mobileConnected);
       case "capture":
         return renderCapture(stage.declinedReason);
+      case "journey":
+        return renderJourney(stage.url);
+      case "confirming":
+        return renderConfirming();
+      case "unconfirmed":
+        return renderUnconfirmed(stage.outcome);
       case "submitting":
         return renderSubmitting();
       case "accepted":
@@ -1333,10 +1526,10 @@ function FaceCaptureModal({
         return renderError(stage.message);
     }
   })();
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("style", null, keyframes), /* @__PURE__ */ React__default.default.createElement("div", { style: overlayStyle }, /* @__PURE__ */ React__default.default.createElement("div", { style: modalStyle }, /* @__PURE__ */ React__default.default.createElement("div", { style: headerStyle }, /* @__PURE__ */ React__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("style", null, keyframes), /* @__PURE__ */ React__default.default.createElement("div", { style: overlayStyle }, /* @__PURE__ */ React__default.default.createElement("div", { style: { ...modalStyle, maxWidth: modalMaxWidth(journeyMode) } }, /* @__PURE__ */ React__default.default.createElement("div", { style: headerStyle }, /* @__PURE__ */ React__default.default.createElement(
     "button",
     {
-      onClick: () => close(null),
+      onClick: handleHeaderClose,
       style: closeButtonStyle,
       "aria-label": "Close"
     },
@@ -1366,7 +1559,8 @@ var modalStyle = {
   borderRadius: 16,
   boxShadow: "0 25px 50px -12px rgba(0,0,0,.25)",
   width: "100%",
-  maxWidth: 448,
+  maxHeight: "calc(100vh - 32px)",
+  overflowY: "auto",
   animation: "zoomIn .2s ease-out"
 };
 var headerStyle = {
@@ -1392,6 +1586,13 @@ var contentStyle = {
   flexDirection: "column",
   gap: 16
 };
+var journeyFrameStyle = {
+  width: "100%",
+  height: JOURNEY_FRAME_HEIGHT,
+  border: 0,
+  borderRadius: 12,
+  background: "#f9fafb"
+};
 var visualGuideContainerStyle = { display: "flex", justifyContent: "center" };
 var visualGuideStyle = { position: "relative" };
 var circleStyle = {
@@ -1658,9 +1859,10 @@ function LiveCamera({ onCapture, onCancel, message, assetBasePath }) {
   if (error) {
     return /* @__PURE__ */ React__default.default.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center", padding: 0 } }, /* @__PURE__ */ React__default.default.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React__default.default.createElement("h3", { style: titleStyle }, "Camera unavailable"), /* @__PURE__ */ React__default.default.createElement("p", { style: alertTextStyle }, error), /* @__PURE__ */ React__default.default.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React__default.default.createElement("button", { style: secondaryButtonStyle, onClick: onCancel }, "Back")));
   }
-  const detectionActive = ready && !faceDetectionFailed;
-  const liveMessage = detectionActive ? FACE_MESSAGES[faceStatus] : message;
-  const liveFaceColor = detectionActive ? FACE_COLORS[faceStatus] : void 0;
+  const detectionAvailable = !faceDetectionFailed;
+  const detectionActive = ready && detectionAvailable;
+  const liveMessage = detectionAvailable ? FACE_MESSAGES[faceStatus] : message;
+  const liveFaceColor = detectionAvailable ? FACE_COLORS[faceStatus] : void 0;
   const captureDisabled = isCaptureDisabled(ready, detectionActive, faceStatus);
   const ringPulse = detectionActive && (faceStatus === "too_far" || faceStatus === "too_close") ? "pulse 1.5s ease-in-out infinite" : void 0;
   const dynamicCircleStyle = {
@@ -1776,20 +1978,22 @@ var faceOverlayContainerStyle = {
 };
 var faceRingWrapStyle = {
   position: "relative",
-  width: "72%",
-  aspectRatio: "1 / 1"
+  height: "64%",
+  aspectRatio: "3 / 4"
 };
 var faceDashedRingStyle = {
   position: "absolute",
   inset: -6,
-  borderRadius: "50%",
-  border: "6px dashed rgba(255, 255, 255, 0.4)",
-  animation: "spin 10s linear infinite"
+  borderRadius: 9999,
+  border: "6px dashed rgba(255, 255, 255, 0.4)"
 };
 var faceCircleStyle = {
   position: "absolute",
   inset: 0,
-  borderRadius: "50%",
+  // Tailwind's `rounded-full` resolves to a very large fixed radius. On a
+  // 3:4 box that creates the normal KYC capsule/head guide with straighter
+  // sides; 50% would instead produce a mathematically perfect ellipse.
+  borderRadius: 9999,
   border: "4px solid #00bc7d",
   boxShadow: "0 0 0 1000px rgba(0, 0, 0, 0.5)"
 };
@@ -2132,6 +2336,7 @@ function isValidFileSize(file, maxSizeBytes = 10 * 1024 * 1024) {
 }
 function formatKycStatus(status) {
   const statusMap = {
+    awaiting_kyc: "Awaiting KYC",
     pending: "Pending Review",
     accepted: "Approved",
     declined: "Rejected",
@@ -2142,6 +2347,8 @@ function formatKycStatus(status) {
 }
 function getStatusColor(status) {
   const colorMap = {
+    awaiting_kyc: "#94a3b8",
+    // slate — not started
     pending: "#f59e0b",
     // amber
     accepted: "#10b981",
@@ -2168,6 +2375,13 @@ function getRiskColor(risk) {
   };
   return colorMap[risk] || "#6b7280";
 }
+function isMobileDevice(userAgent) {
+  const ua = userAgent ?? (typeof navigator === "undefined" ? "" : navigator.userAgent);
+  return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
+}
+function buildEventBasedFaceVerificationQrPayload(token) {
+  return `vesant://reuse-kyc?token=${encodeURIComponent(token)}`;
+}
 function useEventBasedFaceVerificationSubmission(client$1) {
   const startSession = React.useCallback(
     (request) => client$1.createEventBasedFaceVerificationSession(request),
@@ -2215,12 +2429,15 @@ function useEventBasedFaceVerificationSubmission(client$1) {
   return { startSession, verifyFace, runFlow };
 }
 
+exports.FaceCaptureModal = FaceCaptureModal_default;
+exports.buildEventBasedFaceVerificationQrPayload = buildEventBasedFaceVerificationQrPayload;
 exports.createDeviceFingerprint = createDeviceFingerprint;
 exports.fileToBase64 = fileToBase64;
 exports.formatKycStatus = formatKycStatus;
 exports.getBrowserInfo = getBrowserInfo;
 exports.getRiskColor = getRiskColor;
 exports.getStatusColor = getStatusColor;
+exports.isMobileDevice = isMobileDevice;
 exports.isValidFileSize = isValidFileSize;
 exports.isValidFileType = isValidFileType;
 exports.useCipherText = useCipherText;