vesant-sdk 1.7.1-dev.301c6df → 1.7.1-dev.328baf7

package/dist/react.d.mts

@@ -1,5 +1,5 @@
-import { D as DeviceFingerprintRequest, G as GeolocationClient, i as CipherTextOptions, l as CipherTextResult, Y as UseGeolocationOptions, Z as UseGeolocationResult, _ as UseLocationCaptureOptions, $ as UseLocationCaptureResult, a0 as UseLocationRequestsOptions, a1 as UseLocationRequestsResult } from './client-BwXMQA2a.mjs';
-import { e as LoginVerificationResponse, L as LoginVerificationRequest, f as RegistrationVerificationResponse, R as RegistrationVerificationRequest, h as TransactionVerificationResponse, g as TransactionVerificationRequest, C as ComplianceClient } from './client-D23KhWeh.mjs';
+import { D as DeviceFingerprintRequest, G as GeolocationClient, i as CipherTextOptions, l as CipherTextResult, Y as UseGeolocationOptions, Z as UseGeolocationResult, _ as UseLocationCaptureOptions, $ as UseLocationCaptureResult, a0 as UseLocationRequestsOptions, a1 as UseLocationRequestsResult } from './client-XDEhh9VN.mjs';
+import { e as LoginVerificationResponse, L as LoginVerificationRequest, f as RegistrationVerificationResponse, R as RegistrationVerificationRequest, h as TransactionVerificationResponse, g as TransactionVerificationRequest, C as ComplianceClient } from './client-5q4whhGu.mjs';
 import { RiskProfileClient } from './risk-profile/index.mjs';
 import { C as CustomerProfile } from './types-BOFaMQxI.mjs';
 import { KycClient, CreateEventBasedFaceVerificationSessionRequest, CreateEventBasedFaceVerificationSessionResponse, EventBasedFaceVerificationCallback, UseKycAlertsOptions, UseKycAlertsResult, UseKycOverviewOptions, UseKycOverviewResult, UseKycPreferencesResult, UseKycRequestsOptions, UseKycRequestsResult, UseKycSubmissionOptions, UseKycSubmissionResult } from './kyc/index.mjs';
@@ -63,6 +63,12 @@ declare function createDeviceFingerprint(): DeviceFingerprintRequest;
 /**
  * React hook for generating cipherText
  *
+ * The tenant's GPS requirements are read from the client before each generation.
+ * The client reuses a fetched copy for a short period, so this does not add a
+ * request per event, and a requirement changed in the compliance console takes
+ * effect without reloading the page. Call `refreshConfig` to apply a change
+ * immediately.
+ *
  * @example
  * ```tsx
  * function LoginForm() {
@@ -79,6 +85,7 @@ declare function createDeviceFingerprint(): DeviceFingerprintRequest;
  */
 declare function useCipherText(client?: GeolocationClient): {
     generate: (options: CipherTextOptions) => Promise<CipherTextResult | null>;
+    refreshConfig: () => Promise<void>;
     configLoading: boolean;
     configError: Error | null;
 };

package/dist/react.d.ts

@@ -1,5 +1,5 @@
-import { D as DeviceFingerprintRequest, G as GeolocationClient, i as CipherTextOptions, l as CipherTextResult, Y as UseGeolocationOptions, Z as UseGeolocationResult, _ as UseLocationCaptureOptions, $ as UseLocationCaptureResult, a0 as UseLocationRequestsOptions, a1 as UseLocationRequestsResult } from './client-fy3trF2K.js';
-import { e as LoginVerificationResponse, L as LoginVerificationRequest, f as RegistrationVerificationResponse, R as RegistrationVerificationRequest, h as TransactionVerificationResponse, g as TransactionVerificationRequest, C as ComplianceClient } from './client-B3DCAHlg.js';
+import { D as DeviceFingerprintRequest, G as GeolocationClient, i as CipherTextOptions, l as CipherTextResult, Y as UseGeolocationOptions, Z as UseGeolocationResult, _ as UseLocationCaptureOptions, $ as UseLocationCaptureResult, a0 as UseLocationRequestsOptions, a1 as UseLocationRequestsResult } from './client-BaUekQT8.js';
+import { e as LoginVerificationResponse, L as LoginVerificationRequest, f as RegistrationVerificationResponse, R as RegistrationVerificationRequest, h as TransactionVerificationResponse, g as TransactionVerificationRequest, C as ComplianceClient } from './client-DUHC-68_.js';
 import { RiskProfileClient } from './risk-profile/index.js';
 import { C as CustomerProfile } from './types-UGyDl1fd.js';
 import { KycClient, CreateEventBasedFaceVerificationSessionRequest, CreateEventBasedFaceVerificationSessionResponse, EventBasedFaceVerificationCallback, UseKycAlertsOptions, UseKycAlertsResult, UseKycOverviewOptions, UseKycOverviewResult, UseKycPreferencesResult, UseKycRequestsOptions, UseKycRequestsResult, UseKycSubmissionOptions, UseKycSubmissionResult } from './kyc/index.js';
@@ -63,6 +63,12 @@ declare function createDeviceFingerprint(): DeviceFingerprintRequest;
 /**
  * React hook for generating cipherText
  *
+ * The tenant's GPS requirements are read from the client before each generation.
+ * The client reuses a fetched copy for a short period, so this does not add a
+ * request per event, and a requirement changed in the compliance console takes
+ * effect without reloading the page. Call `refreshConfig` to apply a change
+ * immediately.
+ *
  * @example
  * ```tsx
  * function LoginForm() {
@@ -79,6 +85,7 @@ declare function createDeviceFingerprint(): DeviceFingerprintRequest;
  */
 declare function useCipherText(client?: GeolocationClient): {
     generate: (options: CipherTextOptions) => Promise<CipherTextResult | null>;
+    refreshConfig: () => Promise<void>;
     configLoading: boolean;
     configError: Error | null;
 };

package/dist/react.js

@@ -429,14 +429,11 @@ function useCipherText(client) {
   const [configLoading, setConfigLoading] = React.useState(!!client);
   const [configError, setConfigError] = React.useState(null);
   const configRef = React.useRef(void 0);
-  const configPromiseRef = React.useRef(null);
   React.useEffect(() => {
     if (!client) return;
     let cancelled = false;
     setConfigLoading(true);
-    const promise = client.getGPSConfig();
-    configPromiseRef.current = promise;
-    promise.then((cfg) => {
+    client.getGPSConfig().then((cfg) => {
       if (!cancelled) {
         configRef.current = cfg;
         setConfigLoading(false);
@@ -451,13 +448,21 @@ function useCipherText(client) {
       cancelled = true;
     };
   }, [client]);
+  const refreshConfig = React.useCallback(async () => {
+    if (!client) return;
+    try {
+      configRef.current = await client.refreshGPSConfig();
+      setConfigError(null);
+    } catch (error) {
+      setConfigError(error instanceof Error ? error : new Error("Failed to refresh GPS config"));
+    }
+  }, [client]);
   const generate = React.useCallback(
     async (options) => {
       try {
-        if (configPromiseRef.current) {
+        if (client) {
           try {
-            const cfg = await configPromiseRef.current;
-            configRef.current = cfg;
+            configRef.current = await client.getGPSConfig();
           } catch {
           }
         }
@@ -467,9 +472,9 @@ function useCipherText(client) {
         return null;
       }
     },
-    []
+    [client]
   );
-  return { generate, configLoading, configError };
+  return { generate, refreshConfig, configLoading, configError };
 }
 function useLocationRequests(client, options = {}) {
   const [requests, setRequests] = React.useState([]);
@@ -930,19 +935,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 +1012,32 @@ function loadMediaPipeFaceDetection(assetBasePath) {
   return loader;
 }
 
+// src/kyc/hostedJourney.ts
+var REUSE_KYC_SESSION_EXPIRY_MS = 10 * 60 * 1e3;
+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";
+}
+function modalMaxWidth(hasHostedJourney) {
+  return hasHostedJourney ? 680 : 448;
+}
+function resultForModalClose(stageKind, result) {
+  const terminal = stageKind === "accepted" || stageKind === "declined" || stageKind === "max_attempts";
+  return terminal && result !== void 0 ? result : 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 +1046,8 @@ function headerSubtitle(stageKind) {
   switch (stageKind) {
     case "qr":
       return "Use your phone to continue";
+    case "journey":
+      return "Follow the steps to verify your identity";
     case "accepted":
       return "All set";
     case "declined":
@@ -1045,7 +1073,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 +1093,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 +1147,64 @@ function FaceCaptureModal({
       stopped = true;
     };
   }, [stage.kind, stage.kind === "qr" ? stage.mobileConnected : false]);
+  React.useEffect(() => {
+    if (stage.kind !== "journey" || !stage.url) return;
+    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, 2500);
+      }
+    };
+    void tick();
+    let frameOrigin = "";
+    try {
+      frameOrigin = new URL(stage.url).origin;
+    } catch {
+      frameOrigin = "";
+    }
+    const onMessage = (e) => {
+      if (!frameOrigin || e.origin !== frameOrigin) return;
+      const status = e.data?.verification_status;
+      if (status) void checkOnce();
+    };
+    window.addEventListener("message", onMessage);
+    return () => {
+      stopped = true;
+      window.removeEventListener("message", onMessage);
+    };
+  }, [stage.kind, stage.kind === "journey" ? stage.url : ""]);
+  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 +1332,22 @@ 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;
+    close(resultForModalClose(stage.kind, result));
   };
   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 +1406,28 @@ 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 renderJourney = (url) => /* @__PURE__ */ React__default.default.createElement("div", { style: contentStyle }, 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 +1436,8 @@ function FaceCaptureModal({
         return renderQRStage(stage.mobileConnected);
       case "capture":
         return renderCapture(stage.declinedReason);
+      case "journey":
+        return renderJourney(stage.url);
       case "submitting":
         return renderSubmitting();
       case "accepted":
@@ -1333,10 +1450,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 +1483,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 +1510,13 @@ var contentStyle = {
   flexDirection: "column",
   gap: 16
 };
+var journeyFrameStyle = {
+  width: "100%",
+  height: "min(520px, 60vh)",
+  border: 0,
+  borderRadius: 12,
+  background: "#f9fafb"
+};
 var visualGuideContainerStyle = { display: "flex", justifyContent: "center" };
 var visualGuideStyle = { position: "relative" };
 var circleStyle = {
@@ -1658,9 +1783,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 +1902,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 +2260,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 +2271,8 @@ function formatKycStatus(status) {
 }
 function getStatusColor(status) {
   const colorMap = {
+    awaiting_kyc: "#94a3b8",
+    // slate — not started
     pending: "#f59e0b",
     // amber
     accepted: "#10b981",