vesant-sdk 1.7.0 → 1.7.1-dev.0520b46

package/dist/react.js

@@ -10,7 +10,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 // src/geolocation/hooks.ts
 
 // src/core/version.ts
-var SDK_VERSION = "1.7.0";
+var SDK_VERSION = "1.7.1";
 
 // src/core/errors.ts
 var VesantError = class _VesantError extends Error {
@@ -93,27 +93,63 @@ function getBrowserInfo() {
   return { browser, browser_version: browserVersion, os, os_version: osVersion };
 }
 
-// src/geolocation/ciphertext.ts
-var CIPHER_TEXT_EXPIRY_MINUTES = 5;
-async function computeHMAC(key, message) {
-  if (typeof globalThis.crypto !== "undefined" && globalThis.crypto.subtle) {
-    const encoder = new TextEncoder();
-    const keyData = encoder.encode(key);
-    const msgData = encoder.encode(message);
-    const cryptoKey = await globalThis.crypto.subtle.importKey(
-      "raw",
-      keyData,
-      { name: "HMAC", hash: "SHA-256" },
-      false,
-      ["sign"]
-    );
-    const signature = await globalThis.crypto.subtle.sign("HMAC", cryptoKey, msgData);
-    const bytes = new Uint8Array(signature);
-    return Array.from(bytes).map((b) => b.toString(16).padStart(2, "0")).join("");
+// src/geolocation/integrity.ts
+var isNil = (v) => v === null || v === void 0;
+function assessGpsIntegrity(input, opts = {}) {
+  const flags = [];
+  const now = opts.now ?? (() => Date.now());
+  const maxAgeMs = opts.maxAgeMs ?? 6e4;
+  const minAccuracy = opts.minAccuracyMeters ?? 1;
+  const { accuracy, altitude, altitudeAccuracy, heading, speed, timestamp } = input;
+  if (isNil(accuracy)) {
+    flags.push("accuracy_missing");
+  } else if (accuracy === 0) {
+    flags.push("accuracy_zero");
+  } else if (accuracy < minAccuracy) {
+    flags.push("accuracy_implausibly_small");
+  }
+  const hasMotion = !isNil(heading) || !isNil(speed);
+  if (hasMotion && (isNil(accuracy) || accuracy === 0)) {
+    flags.push("motion_without_accuracy");
+  }
+  if (!isNil(altitude) && isNil(altitudeAccuracy)) {
+    flags.push("altitude_without_accuracy");
+  }
+  if (timestamp !== void 0 && now() - timestamp > maxAgeMs) {
+    flags.push("stale_timestamp");
   }
-  const { createHmac } = await import('crypto');
-  return createHmac("sha256", key).update(message).digest("hex");
+  if (opts.permissionState === "denied" || opts.permissionState === "prompt") {
+    flags.push(`permission_${opts.permissionState}`);
+  }
+  return { suspicious: flags.length > 0, flags };
+}
+function gpsIntegrityInputFromPosition(position) {
+  const c = position.coords;
+  return {
+    latitude: c.latitude,
+    longitude: c.longitude,
+    accuracy: c.accuracy,
+    altitude: c.altitude,
+    altitudeAccuracy: c.altitudeAccuracy,
+    heading: c.heading,
+    speed: c.speed,
+    timestamp: position.timestamp
+  };
 }
+async function probeGeolocationPermission() {
+  try {
+    if (typeof navigator === "undefined" || !navigator.permissions?.query) {
+      return "unavailable";
+    }
+    const status = await navigator.permissions.query({ name: "geolocation" });
+    return status.state;
+  } catch {
+    return "unavailable";
+  }
+}
+
+// src/geolocation/ciphertext.ts
+var CIPHER_TEXT_EXPIRY_MINUTES = 5;
 function getWebGLInfo() {
   if (typeof document === "undefined") return null;
   try {
@@ -145,6 +181,7 @@ async function requestGPSLocation(timeout = 1e4, highAccuracy = true) {
   if (typeof navigator === "undefined" || !navigator.geolocation) {
     return null;
   }
+  const permissionState = await probeGeolocationPermission();
   return new Promise((resolve) => {
     navigator.geolocation.getCurrentPosition(
       (position) => {
@@ -161,6 +198,7 @@ async function requestGPSLocation(timeout = 1e4, highAccuracy = true) {
           resolve(null);
           return;
         }
+        const { flags } = assessGpsIntegrity(gpsIntegrityInputFromPosition(position), { permissionState });
         resolve({
           latitude,
           longitude,
@@ -169,7 +207,8 @@ async function requestGPSLocation(timeout = 1e4, highAccuracy = true) {
           altitude_accuracy: position.coords.altitudeAccuracy ?? void 0,
           heading: position.coords.heading ?? void 0,
           speed: position.coords.speed ?? void 0,
-          timestamp: position.timestamp
+          timestamp: position.timestamp,
+          integrity_flags: flags.length ? flags : void 0
         });
       },
       () => {
@@ -236,6 +275,9 @@ async function generateCipherText(options, config) {
     );
     if (location) {
       locationData = location;
+      if (location.integrity_flags?.length) {
+        warnings.push(`GPS integrity flags (advisory): ${location.integrity_flags.join(", ")}`);
+      }
     } else if (gpsRequiredByConfig) {
       throw new VesantError(
         `GPS location is required for ${options.reason} by tenant configuration, but GPS was not available or permission was denied`,
@@ -265,15 +307,7 @@ async function generateCipherText(options, config) {
   };
   const encoded = encodePayload(payload);
   const timestamp = now.getTime().toString(36);
-  let cipherText;
-  const hmacKey = options.signingKey || options.apiKey;
-  if (hmacKey) {
-    const message = `02.${timestamp}.${encoded}`;
-    const hmac = await computeHMAC(hmacKey, message);
-    cipherText = `${message}.${hmac}`;
-  } else {
-    cipherText = `01.${timestamp}.${encoded}`;
-  }
+  const cipherText = `01.${timestamp}.${encoded}`;
   return {
     cipherText,
     locationCaptured: !!locationData,
@@ -338,8 +372,6 @@ function useGeolocation(client, options = {}) {
     if (optionsRef.current.autoVerify) {
       const detectAndVerify = async () => {
         try {
-          const ipResponse = await fetch("https://api.ipify.org?format=json");
-          const { ip } = await ipResponse.json();
           let deviceFingerprint;
           if (optionsRef.current.includeDeviceFingerprint && typeof window !== "undefined") {
             const deviceId = generateDeviceId();
@@ -353,7 +385,6 @@ function useGeolocation(client, options = {}) {
             };
           }
           await verifyIP({
-            ip_address: ip,
             user_id: optionsRef.current.userId || "",
             event_type: optionsRef.current.eventType || "page_view",
             device_fingerprint: deviceFingerprint
@@ -398,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);
@@ -420,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 {
           }
         }
@@ -436,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([]);
@@ -667,6 +703,12 @@ function useLocationCapture(client, options) {
           if (accuracy !== null && accuracy !== void 0 && accuracy > 0) {
             capture.accuracy = accuracy;
           }
+          const { flags } = assessGpsIntegrity(gpsIntegrityInputFromPosition(position), {
+            permissionState: await probeGeolocationPermission()
+          });
+          if (flags.length) {
+            capture.integrity_flags = flags;
+          }
         }
       }
       if (gpsError) {
@@ -893,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";
@@ -970,11 +1012,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"
@@ -983,6 +1091,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":
@@ -1008,7 +1122,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" };
@@ -1026,19 +1142,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;
@@ -1079,6 +1196,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 });
@@ -1206,12 +1399,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",
@@ -1270,12 +1474,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":
@@ -1284,6 +1513,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":
@@ -1296,10 +1531,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"
     },
@@ -1329,7 +1564,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 = {
@@ -1355,6 +1591,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 = {
@@ -1621,9 +1864,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 = {
@@ -1739,20 +1983,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)"
 };
@@ -2095,6 +2341,7 @@ function isValidFileSize(file, maxSizeBytes = 10 * 1024 * 1024) {
 }
 function formatKycStatus(status) {
   const statusMap = {
+    awaiting_kyc: "Awaiting KYC",
     pending: "Pending Review",
     accepted: "Approved",
     declined: "Rejected",
@@ -2105,6 +2352,8 @@ function formatKycStatus(status) {
 }
 function getStatusColor(status) {
   const colorMap = {
+    awaiting_kyc: "#94a3b8",
+    // slate — not started
     pending: "#f59e0b",
     // amber
     accepted: "#10b981",