vesant-sdk 1.6.6 → 1.7.0-dev.254dc8c

package/dist/react.mjs

@@ -4,7 +4,19 @@ import { createRoot } from 'react-dom/client';
 // src/geolocation/hooks.ts
 
 // src/core/version.ts
-var SDK_VERSION = "1.6.6";
+var SDK_VERSION = "1.7.0";
+
+// src/core/errors.ts
+var VesantError = class _VesantError extends Error {
+  constructor(message, code, statusCode, details) {
+    super(message);
+    this.code = code;
+    this.statusCode = statusCode;
+    this.details = details;
+    this.name = "VesantError";
+    Object.setPrototypeOf(this, _VesantError.prototype);
+  }
+};
 
 // src/shared/browser-utils.ts
 function generateUUID() {
@@ -194,7 +206,7 @@ function encodePayload(payload) {
   } else if (typeof Buffer !== "undefined") {
     return Buffer.from(json, "utf-8").toString("base64");
   }
-  throw new Error("No base64 encoding method available");
+  throw new VesantError("No base64 encoding method available", "BASE64_UNAVAILABLE");
 }
 async function generateCipherText(options, config) {
   const warnings = [];
@@ -219,8 +231,9 @@ async function generateCipherText(options, config) {
     if (location) {
       locationData = location;
     } else if (gpsRequiredByConfig) {
-      throw new Error(
-        `GPS location is required for ${options.reason} by tenant configuration, but GPS was not available or permission was denied`
+      throw new VesantError(
+        `GPS location is required for ${options.reason} by tenant configuration, but GPS was not available or permission was denied`,
+        "GPS_REQUIRED"
       );
     } else {
       warnings.push("GPS location not available or permission denied");
@@ -833,7 +846,7 @@ function useCustomerProfile(client, customerId, options = {}) {
   profileRef.current = profile;
   const updateProfile = useCallback(
     async (updates) => {
-      if (!profileRef.current) throw new Error("Profile not loaded");
+      if (!profileRef.current) throw new VesantError("Profile not loaded", "PROFILE_NOT_LOADED");
       setLoading(true);
       setError(null);
       try {
@@ -869,280 +882,872 @@ function useCustomerProfile(client, customerId, options = {}) {
 var Camera = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjAvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvVFIvMjAwMS9SRUMtU1ZHLTIwMDEwOTA0L0RURC9zdmcxMC5kdGQiPg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgdmVyc2lvbj0iMS4wIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgDQoJIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NCA2NCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjMjMxRjIwIiBkPSJNNjAsMTBINDkuNjU2bC02LjgyOC02LjgyOEM0Mi4wNzgsMi40MjIsNDEuMDYyLDIsNDAsMkgyNGMtMS4wNjIsMC0yLjA3OCwwLjQyMi0yLjgyOCwxLjE3MkwxNC4zNDQsMTBINA0KCQljLTIuMjExLDAtNCwxLjc4OS00LDR2NDRjMCwyLjIxMSwxLjc4OSw0LDQsNGg1NmMyLjIxMSwwLDQtMS43ODksNC00VjE0QzY0LDExLjc4OSw2Mi4yMTEsMTAsNjAsMTB6IE0zMiw1MA0KCQljLTguODM2LDAtMTYtNy4xNjQtMTYtMTZzNy4xNjQtMTYsMTYtMTZzMTYsNy4xNjQsMTYsMTZTNDAuODM2LDUwLDMyLDUweiIvPg0KCTxjaXJjbGUgZmlsbD0iIzIzMUYyMCIgY3g9IjMyIiBjeT0iMzQiIHI9IjgiLz4NCjwvZz4NCjwvc3ZnPg==";
 var Done = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik04LjUgMTIuNUwxMC41IDE0LjVMMTUuNSA5LjUiIHN0cm9rZT0iIzFDMjc0QyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPHBhdGggZD0iTTcgMy4zMzc4MkM4LjQ3MDg3IDIuNDg2OTcgMTAuMTc4NiAyIDEyIDJDMTcuNTIyOCAyIDIyIDYuNDc3MTUgMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiAxMC4xNzg2IDIuNDg2OTcgOC40NzA4NyAzLjMzNzgyIDciIHN0cm9rZT0iIzFDMjc0QyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPg0KPC9zdmc+";
 var Close = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xNC41IDkuNTAwMDJMOS41IDE0LjVNOS40OTk5OCA5LjVMMTQuNSAxNC41IiBzdHJva2U9IiMxQzI3NEMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4NCjxwYXRoIGQ9Ik03IDMuMzM3ODJDOC40NzA4NyAyLjQ4Njk3IDEwLjE3ODYgMiAxMiAyQzE3LjUyMjggMiAyMiA2LjQ3NzE1IDIyIDEyQzIyIDE3LjUyMjggMTcuNTIyOCAyMiAxMiAyMkM2LjQ3NzE1IDIyIDIgMTcuNTIyOCAyIDEyQzIgMTAuMTc4NiAyLjQ4Njk3IDguNDcwODcgMy4zMzc4MiA3IiBzdHJva2U9IiMxQzI3NEMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4NCjwvc3ZnPg==";
-var Upload = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xNyAxN0gxNy4wMU0xNS42IDE0SDE4QzE4LjkzMTkgMTQgMTkuMzk3OCAxNCAxOS43NjU0IDE0LjE1MjJDMjAuMjU1NCAxNC4zNTUyIDIwLjY0NDggMTQuNzQ0NiAyMC44NDc4IDE1LjIzNDZDMjEgMTUuNjAyMiAyMSAxNi4wNjgxIDIxIDE3QzIxIDE3LjkzMTkgMjEgMTguMzk3OCAyMC44NDc4IDE4Ljc2NTRDMjAuNjQ0OCAxOS4yNTU0IDIwLjI1NTQgMTkuNjQ0OCAxOS43NjU0IDE5Ljg0NzhDMTkuMzk3OCAyMCAxOC45MzE5IDIwIDE4IDIwSDZDNS4wNjgxMiAyMCA0LjYwMjE4IDIwIDQuMjM0NjMgMTkuODQ3OEMzLjc0NDU4IDE5LjY0NDggMy4zNTUyMyAxOS4yNTU0IDMuMTUyMjQgMTguNzY1NEMzIDE4LjM5NzggMyAxNy45MzE5IDMgMTdDMyAxNi4wNjgxIDMgMTUuNjAyMiAzLjE1MjI0IDE1LjIzNDZDMy4zNTUyMyAxNC43NDQ2IDMuNzQ0NTggMTQuMzU1MiA0LjIzNDYzIDE0LjE1MjJDNC42MDIxOCAxNCA1LjA2ODEyIDE0IDYgMTRIOC40TTEyIDE1VjRNMTIgNEwxNSA3TTEyIDRMOSA3IiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4=";
 
 // src/kyc/FaceCaptureModal.tsx
-var fileToBase64 = (file) => {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = (error) => reject(error);
-  });
-};
+var MOBILE_UA = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+var SESSION_EXPIRY_MS = 15 * 60 * 1e3;
+var LIVENESS_MESSAGES = [
+  "Position your face inside the circle",
+  "Make sure your face is well lit",
+  "Remove glasses or hats if possible",
+  "Look straight at the camera, then tap Capture"
+];
+function headerSubtitle(stageKind) {
+  switch (stageKind) {
+    case "qr":
+      return "Use your phone to continue";
+    case "accepted":
+      return "All set";
+    case "declined":
+      return "Verification Declined";
+    case "max_attempts":
+      return "We couldn't verify your identity";
+    default:
+      return "Please capture a clear photo of your face";
+  }
+}
+function defaultRenderQR(payload) {
+  const url = `https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${encodeURIComponent(payload)}`;
+  return /* @__PURE__ */ React.createElement("img", { src: url, alt: "QR code", width: 220, height: 220 });
+}
 function FaceCaptureModal({
-  onCapture,
-  onCancel
+  client,
+  session,
+  onComplete,
+  onCancel,
+  defaultDevice,
+  renderQR
 }) {
-  const inputRef = useRef(null);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [isHoveringPrimary, setIsHoveringPrimary] = useState(false);
-  const [isHoveringCancel, setIsHoveringCancel] = useState(false);
-  const [isHoveringClose, setIsHoveringClose] = useState(false);
-  const isMobile = /Mobi|Android/i.test(navigator.userAgent);
-  const handleFileChange = async (e) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    setIsProcessing(true);
-    try {
-      const base64 = await fileToBase64(file);
-      setTimeout(() => {
-        onCapture(base64);
-      }, 300);
-    } catch (error) {
-      console.error("[Vesant SDK] Error processing image:", error instanceof Error ? error.message : "Unknown error");
-      setIsProcessing(false);
+  const isMobile = typeof navigator !== "undefined" && MOBILE_UA.test(navigator.userAgent);
+  const initialChoice = defaultDevice ?? (isMobile ? "this" : "ask");
+  const initialStage = (() => {
+    if (initialChoice === "this") return { kind: "capture" };
+    if (initialChoice === "mobile") return { kind: "qr", mobileConnected: false };
+    return { kind: "choose" };
+  })();
+  const hasMethodChoice = initialChoice === "ask";
+  const [stage, setStage] = useState(initialStage);
+  const [attempts, setAttempts] = useState(session.attempts);
+  const maxAttempts = session.max_attempts || 1;
+  const [qrDeclinedReason, setQrDeclinedReason] = useState(null);
+  const [captureMode, setCaptureMode] = useState("idle");
+  const [capturedPreview, setCapturedPreview] = useState(null);
+  const [capturedBase64, setCapturedBase64] = useState(null);
+  const [livenessMessage, setLivenessMessage] = useState(LIVENESS_MESSAGES[0]);
+  const qrPayload = session.link || `vesant://reuse-kyc?token=${encodeURIComponent(session.token)}`;
+  const cancelledRef = useRef(false);
+  const submittingRef = useRef(false);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setStage(
+        (prev) => prev.kind === "choose" || prev.kind === "qr" || prev.kind === "capture" ? { kind: "error", message: "Session expired" } : prev
+      );
+    }, SESSION_EXPIRY_MS);
+    return () => clearTimeout(timer);
+  }, [session.token]);
+  useEffect(() => {
+    if (stage.kind !== "qr") return;
+    let stopped = false;
+    const intervalMs = 2e3;
+    const deadline = Date.now() + SESSION_EXPIRY_MS;
+    let mobileSeen = stage.mobileConnected;
+    const tick = async () => {
+      if (stopped || cancelledRef.current) return;
+      try {
+        if (mobileSeen) {
+          const result = await client.getEventBasedFaceVerificationSessionStatus(session.token);
+          if (result.status === "accepted") {
+            setStage({ kind: "accepted", result });
+            stopped = true;
+            return;
+          }
+          if (result.status === "declined") {
+            setAttempts(maxAttempts - (result.data?.retries_remaining ?? 0));
+            if (result.data?.retry_limit_exceeded) {
+              setStage({ kind: "max_attempts", result });
+              stopped = true;
+              return;
+            }
+            if (result.declined_reason) {
+              setQrDeclinedReason(result.declined_reason);
+            }
+          }
+        } else {
+          const handoff = await client.getHandoffSession(session.token);
+          if (handoff.mobile_connected) {
+            mobileSeen = true;
+            setStage({ kind: "qr", mobileConnected: true });
+          }
+        }
+      } catch {
+      }
+      if (Date.now() < deadline) {
+        setTimeout(tick, intervalMs);
+      }
+    };
+    tick();
+    return () => {
+      stopped = true;
+    };
+  }, [stage.kind, stage.kind === "qr" ? stage.mobileConnected : false]);
+  const applyResult = (result) => {
+    if (result.status === "accepted") {
+      setStage({ kind: "accepted", result });
+      return true;
     }
+    if (result.status === "declined") {
+      const nextAttempts = maxAttempts - (result.data?.retries_remaining ?? 0);
+      setAttempts(nextAttempts);
+      setCapturedPreview(null);
+      setCapturedBase64(null);
+      if (result.data?.retry_limit_exceeded) {
+        setStage({ kind: "max_attempts", result });
+      } else {
+        setStage({ kind: "declined", result });
+      }
+      return true;
+    }
+    return false;
   };
-  const overlayStyle = {
-    position: "fixed",
-    inset: 0,
-    background: "rgba(0, 0, 0, 0.6)",
-    backdropFilter: "blur(4px)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 999999,
-    padding: "16px",
-    animation: "fadeIn 0.2s ease-out"
-  };
-  const modalStyle = {
-    background: "#ffffff",
-    borderRadius: "16px",
-    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
-    width: "100%",
-    maxWidth: "448px",
-    animation: "zoomIn 0.2s ease-out"
-  };
-  const headerStyle = {
-    position: "relative",
-    padding: "24px 24px 16px",
-    borderBottom: "1px solid #f3f4f6"
-  };
-  const closeButtonStyle = {
-    position: "absolute",
-    top: "16px",
-    right: "16px",
-    padding: "8px",
-    background: isHoveringClose ? "#f3f4f6" : "transparent",
-    border: "none",
-    borderRadius: "9999px",
-    cursor: "pointer",
-    transition: "background-color 0.2s",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  };
-  const titleStyle = {
-    fontSize: "24px",
-    fontWeight: 600,
-    color: "#111827",
-    margin: 0
-  };
-  const subtitleStyle = {
-    fontSize: "14px",
-    color: "#6b7280",
-    marginTop: "4px"
-  };
-  const contentStyle = {
-    padding: "32px 24px"
-  };
-  const visualGuideContainerStyle = {
-    marginBottom: "32px",
-    display: "flex",
-    justifyContent: "center"
-  };
-  const visualGuideStyle = {
-    position: "relative"
-  };
-  const circleStyle = {
-    width: "128px",
-    height: "128px",
-    borderRadius: "50%",
-    background: "linear-gradient(135deg, rgba(0, 188, 125, 0.2) 0%, rgba(0, 188, 125, 0.05) 100%)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  };
-  const badgeStyle = {
-    position: "absolute",
-    top: "-4px",
-    right: "-4px",
-    width: "32px",
-    height: "32px",
-    background: "#ffffff",
-    borderRadius: "50%",
-    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  };
-  const instructionsBoxStyle = {
-    background: "linear-gradient(135deg, #f9fafb 0%, rgba(243, 244, 246, 0.5) 100%)",
-    borderRadius: "12px",
-    padding: "16px",
-    marginBottom: "24px"
-  };
-  const instructionsTitleStyle = {
-    fontSize: "14px",
-    fontWeight: 500,
-    color: "#111827",
-    marginBottom: "8px"
-  };
-  const instructionsListStyle = {
-    fontSize: "12px",
-    color: "#6b7280",
-    listStyle: "none",
-    padding: 0,
-    margin: 0
-  };
-  const instructionItemStyle = {
-    display: "flex",
-    alignItems: "flex-start",
-    marginBottom: "6px"
+  const runSubmit = async (proof) => {
+    if (submittingRef.current) return;
+    submittingRef.current = true;
+    setStage({ kind: "submitting" });
+    let settled = false;
+    const ref = session.reference;
+    const baselineAttempts = attempts;
+    const isFreshPollResult = (r) => {
+      if (r.status === "accepted") return true;
+      if (r.status === "declined") {
+        const derivedAttempts = maxAttempts - (r.data?.retries_remaining ?? 0);
+        return derivedAttempts > baselineAttempts;
+      }
+      return false;
+    };
+    try {
+      const postPromise = (async () => {
+        try {
+          const data = await client.submitEventBasedFaceVerificationSession({
+            token: session.token,
+            reference: ref,
+            proof
+          });
+          return { ok: true, data };
+        } catch (err2) {
+          return { ok: false, error: err2 };
+        }
+      })();
+      const pollPromise = (async () => {
+        await new Promise((r) => setTimeout(r, 12e3));
+        const deadline = Date.now() + 12e4;
+        while (Date.now() < deadline) {
+          if (settled || cancelledRef.current) return null;
+          try {
+            const r = await client.getEventBasedFaceVerificationSessionStatus(session.token);
+            if (isFreshPollResult(r)) return r;
+          } catch {
+          }
+          if (settled || cancelledRef.current) return null;
+          await new Promise((r) => setTimeout(r, 3e3));
+        }
+        return null;
+      })();
+      const winner = await Promise.race([
+        postPromise.then(
+          (r) => r.ok ? { from: "post", data: r.data } : { from: "post_err" }
+        ),
+        pollPromise.then(
+          (data) => data ? { from: "poll", data } : { from: "poll_done" }
+        )
+      ]);
+      settled = true;
+      if (winner.from === "post" && applyResult(winner.data)) return;
+      if (winner.from === "poll" && applyResult(winner.data)) return;
+      const [postResult, pollResult] = await Promise.all([postPromise, pollPromise]);
+      if (postResult.ok && applyResult(postResult.data)) return;
+      if (pollResult && applyResult(pollResult)) return;
+      const err = postResult.ok ? null : postResult.error;
+      setStage({
+        kind: "error",
+        message: err instanceof Error ? err.message : "Submission failed. Please try again."
+      });
+    } finally {
+      settled = true;
+      submittingRef.current = false;
+    }
   };
-  const bulletStyle = {
-    color: "#00bc7d",
-    marginRight: "8px",
-    flexShrink: 0
+  const handleCameraCapture = (dataUrl) => {
+    const raw = dataUrl.split(",")[1] ?? "";
+    setCapturedPreview(dataUrl);
+    setCapturedBase64(raw);
+    setCaptureMode("preview");
   };
-  const buttonsContainerStyle = {
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px"
+  const handleCameraCancel = () => setCaptureMode("idle");
+  const handleRetake = () => {
+    setCapturedPreview(null);
+    setCapturedBase64(null);
+    setCaptureMode("live");
   };
-  const primaryButtonStyle = {
-    width: "100%",
-    background: isProcessing ? "#d1d5db" : isHoveringPrimary ? "#00a86d" : "#00bc7d",
-    color: "#ffffff",
-    fontWeight: 500,
-    padding: "14px 24px",
-    borderRadius: "12px",
-    border: "none",
-    cursor: isProcessing ? "not-allowed" : "pointer",
-    transition: "all 0.2s",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "12px",
-    boxShadow: isProcessing ? "none" : isHoveringPrimary ? "0 20px 25px -5px rgba(0, 188, 125, 0.3)" : "0 10px 15px -3px rgba(0, 188, 125, 0.2)",
-    fontSize: "16px"
+  const handleConfirmSubmit = () => {
+    if (!capturedBase64) return;
+    void runSubmit(capturedBase64);
   };
-  const cancelButtonStyle = {
-    width: "100%",
-    background: isProcessing ? "#f3f4f6" : isHoveringCancel ? "#f9fafb" : "#ffffff",
-    color: "#374151",
-    fontWeight: 500,
-    padding: "14px 24px",
-    borderRadius: "12px",
-    border: "2px solid #e5e7eb",
-    cursor: isProcessing ? "not-allowed" : "pointer",
-    transition: "all 0.2s",
-    fontSize: "16px"
+  const handleOpenCamera = () => {
+    if (submittingRef.current) return;
+    setCaptureMode("live");
   };
-  const footerStyle = {
-    padding: "0 24px 24px"
+  const handleRetakeAfterDecline = () => {
+    setCapturedPreview(null);
+    setCapturedBase64(null);
+    setCaptureMode("live");
+    setStage({ kind: "capture" });
   };
-  const footerTextStyle = {
-    fontSize: "12px",
-    textAlign: "center",
-    color: "#9ca3af",
-    margin: 0
+  useEffect(() => {
+    if (captureMode !== "live") return;
+    setLivenessMessage(LIVENESS_MESSAGES[0]);
+    let i = 0;
+    const interval = setInterval(() => {
+      i = (i + 1) % LIVENESS_MESSAGES.length;
+      setLivenessMessage(LIVENESS_MESSAGES[i]);
+    }, 3e3);
+    return () => clearInterval(interval);
+  }, [captureMode]);
+  const close = (result) => {
+    cancelledRef.current = true;
+    if (result === null && onCancel) {
+      onCancel();
+    }
+    onComplete(result);
   };
-  const spinnerStyle = {
-    width: "20px",
-    height: "20px",
-    border: "2px solid rgba(255, 255, 255, 0.3)",
-    borderTopColor: "#ffffff",
-    borderRadius: "50%",
-    animation: "spin 0.6s linear infinite"
+  const renderChoose = () => /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideContainerStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideStyle }, /* @__PURE__ */ React.createElement("div", { style: circleStyle }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 48, height: 48 })))), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "How would you like to verify?"), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      style: primaryButtonStyle,
+      onClick: () => setStage({ kind: "capture" })
+    },
+    /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }),
+    /* @__PURE__ */ React.createElement("span", null, "Continue on this device")
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      style: secondaryButtonStyle,
+      onClick: () => setStage({ kind: "qr", mobileConnected: false })
+    },
+    "Continue on mobile (scan QR)"
+  ), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, "Cancel")));
+  const renderQRStage = (mobileConnected) => /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: qrBoxStyle }, (renderQR ?? defaultRenderQR)(qrPayload)), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, mobileConnected ? "Phone connected. Complete the capture on your mobile device\u2026" : "Scan this QR with your phone camera, then complete the face capture there."), mobileConnected && /* @__PURE__ */ React.createElement("div", { style: { ...spinnerStyle, margin: "12px auto" } }), qrDeclinedReason && /* @__PURE__ */ React.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React.createElement("strong", null, "Last attempt was declined."), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, qrDeclinedReason), /* @__PURE__ */ React.createElement("p", { style: { ...alertTextStyle, marginTop: 4 } }, "Try again on your phone. Attempt ", Math.min(attempts + 1, maxAttempts), " of ", maxAttempts, ".")), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      style: secondaryButtonStyle,
+      onClick: () => setStage({ kind: "capture" })
+    },
+    "Use this device instead"
+  ), hasMethodChoice && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      style: secondaryButtonStyle,
+      onClick: () => setStage({ kind: "choose" })
+    },
+    "Change verification method"
+  ), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, "Cancel")));
+  const renderCapture = (declinedReason) => {
+    if (captureMode === "live") {
+      return /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement(
+        LiveCamera,
+        {
+          onCapture: handleCameraCapture,
+          onCancel: handleCameraCancel,
+          message: livenessMessage
+        }
+      ), /* @__PURE__ */ React.createElement("p", { style: attemptsTextStyle }, "Attempt ", attempts + 1, " of ", maxAttempts));
+    }
+    if (captureMode === "preview" && capturedPreview) {
+      return /* @__PURE__ */ React.createElement("div", { style: contentStyle }, declinedReason && /* @__PURE__ */ React.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React.createElement("strong", null, "Verification declined."), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, declinedReason)), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "Looks good? Submit this selfie or retake it."), /* @__PURE__ */ React.createElement("div", { style: previewBoxStyle }, /* @__PURE__ */ React.createElement("img", { src: capturedPreview, alt: "Captured selfie preview", style: previewImgStyle })), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: handleConfirmSubmit }, /* @__PURE__ */ React.createElement("img", { src: Done, alt: "", width: 20, height: 20 }), /* @__PURE__ */ React.createElement("span", null, "Submit")), /* @__PURE__ */ React.createElement("button", { style: secondaryButtonStyle, onClick: handleRetake }, "Retake"), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, "Cancel")), /* @__PURE__ */ React.createElement("p", { style: attemptsTextStyle }, "Attempt ", attempts + 1, " of ", maxAttempts));
+    }
+    return /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideContainerStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideStyle }, /* @__PURE__ */ React.createElement("div", { style: circleStyle }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 48, height: 48 })), /* @__PURE__ */ React.createElement("div", { style: badgeStyle }, /* @__PURE__ */ React.createElement("img", { src: Done, alt: "", width: 16, height: 16 })))), declinedReason && /* @__PURE__ */ React.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React.createElement("strong", null, "Verification declined."), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, declinedReason)), /* @__PURE__ */ React.createElement("div", { style: instructionsBoxStyle }, /* @__PURE__ */ React.createElement("h3", { style: instructionsTitleStyle }, "Tips for best results:"), /* @__PURE__ */ React.createElement("ul", { style: instructionsListStyle }, /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Ensure good lighting on your face")), /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Remove glasses or accessories if possible")), /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Look directly at the camera")))), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: handleOpenCamera }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }), /* @__PURE__ */ React.createElement("span", null, declinedReason ? "Try Again" : "Open Camera")), hasMethodChoice && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        style: secondaryButtonStyle,
+        onClick: () => setStage({ kind: "choose" })
+      },
+      "Change verification method"
+    ), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, "Cancel")), /* @__PURE__ */ React.createElement("p", { style: attemptsTextStyle }, "Attempt ", attempts + 1, " of ", maxAttempts));
   };
-  const hiddenInputStyle = {
-    display: "none"
+  const renderSubmitting = () => /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: { ...spinnerStyle, margin: "24px auto", width: 32, height: 32 } }), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "Verifying your photo\u2026"), /* @__PURE__ */ React.createElement("p", { style: { ...attemptsTextStyle, marginTop: 8 } }, "This usually takes a few seconds."));
+  const renderAccepted = (result) => /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: successCircleStyle }, /* @__PURE__ */ React.createElement("img", { src: Done, alt: "", width: 48, height: 48 })), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Verified"), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "Your identity has been confirmed. You can continue."), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: () => close(result) }, "Continue")));
+  const renderDeclined = (result) => /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: alertBoxStyle }, /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, result.declined_reason ?? "We couldn't match your selfie. Please take a new one.")), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: handleRetakeAfterDecline }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "", width: 20, height: 20 }), /* @__PURE__ */ React.createElement("span", null, "Retake")), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(result) }, "Cancel")), /* @__PURE__ */ React.createElement("p", { style: attemptsTextStyle }, "Attempt ", Math.min(attempts + 1, maxAttempts), " of ", maxAttempts));
+  const renderMaxAttempts = (result) => /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Maximum Attempts Reached"), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, result.declined_reason ?? "We couldn't verify your identity after several attempts."), result.data?.freeze_account && /* @__PURE__ */ React.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.createElement("p", { style: alertTextStyle }, "You will be signed out of your session."), result.data?.block && /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, "This action has been blocked for security reasons."), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: () => close(result) }, "Close")));
+  const renderError = (message) => {
+    const sessionExpired = /session\s+expired/i.test(message);
+    return /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center" } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, sessionExpired ? "Session expired" : "Something Went Wrong"), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, sessionExpired ? "Your verification session is no longer valid. Please start a new verification from the beginning." : message), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, !sessionExpired && /* @__PURE__ */ React.createElement("button", { style: primaryButtonStyle, onClick: () => setStage({ kind: "capture" }) }, "Try Again"), /* @__PURE__ */ React.createElement("button", { style: cancelButtonStyle, onClick: () => close(null) }, sessionExpired ? "Close" : "Cancel")));
   };
-  const styleTag = /* @__PURE__ */ React.createElement("style", null, `
-        @keyframes fadeIn {
-          from {
-            opacity: 0;
-          }
-          to {
-            opacity: 1;
-          }
-        }
-        
-        @keyframes zoomIn {
-          from {
-            opacity: 0;
-            transform: scale(0.95);
-          }
-          to {
-            opacity: 1;
-            transform: scale(1);
-          }
-        }
-        
-        @keyframes spin {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-      `);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, styleTag, /* @__PURE__ */ React.createElement("div", { style: overlayStyle }, /* @__PURE__ */ React.createElement("div", { style: modalStyle }, /* @__PURE__ */ React.createElement("div", { style: headerStyle }, /* @__PURE__ */ React.createElement(
+  const body = (() => {
+    switch (stage.kind) {
+      case "choose":
+        return renderChoose();
+      case "qr":
+        return renderQRStage(stage.mobileConnected);
+      case "capture":
+        return renderCapture(stage.declinedReason);
+      case "submitting":
+        return renderSubmitting();
+      case "accepted":
+        return renderAccepted(stage.result);
+      case "declined":
+        return renderDeclined(stage.result);
+      case "max_attempts":
+        return renderMaxAttempts(stage.result);
+      case "error":
+        return renderError(stage.message);
+    }
+  })();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, keyframes), /* @__PURE__ */ React.createElement("div", { style: overlayStyle }, /* @__PURE__ */ React.createElement("div", { style: modalStyle }, /* @__PURE__ */ React.createElement("div", { style: headerStyle }, /* @__PURE__ */ React.createElement(
     "button",
     {
-      onClick: onCancel,
-      onMouseEnter: () => setIsHoveringClose(true),
-      onMouseLeave: () => setIsHoveringClose(false),
+      onClick: () => close(null),
       style: closeButtonStyle,
       "aria-label": "Close"
     },
-    /* @__PURE__ */ React.createElement("img", { src: Close, alt: "Close Icon", width: 16, height: 16 })
-  ), /* @__PURE__ */ React.createElement("h2", { style: titleStyle }, "Face Verification"), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, "Please capture or upload a clear photo of your face")), /* @__PURE__ */ React.createElement("div", { style: contentStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideContainerStyle }, /* @__PURE__ */ React.createElement("div", { style: visualGuideStyle }, /* @__PURE__ */ React.createElement("div", { style: circleStyle }, /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "Camera Icon", width: 48, height: 48 })), /* @__PURE__ */ React.createElement("div", { style: badgeStyle }, /* @__PURE__ */ React.createElement("img", { src: Done, alt: "Check Icon", width: 16, height: 16 })))), /* @__PURE__ */ React.createElement("div", { style: instructionsBoxStyle }, /* @__PURE__ */ React.createElement("h3", { style: instructionsTitleStyle }, "Tips for best results:"), /* @__PURE__ */ React.createElement("ul", { style: instructionsListStyle }, /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Ensure good lighting on your face")), /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Remove glasses or accessories if possible")), /* @__PURE__ */ React.createElement("li", { style: instructionItemStyle }, /* @__PURE__ */ React.createElement("span", { style: bulletStyle }, "\u2022"), /* @__PURE__ */ React.createElement("span", null, "Look directly at the camera")))), /* @__PURE__ */ React.createElement(
-    "input",
+    /* @__PURE__ */ React.createElement("img", { src: Close, alt: "", width: 16, height: 16 })
+  ), /* @__PURE__ */ React.createElement("h2", { style: titleStyle }, "Face Verification"), /* @__PURE__ */ React.createElement("p", { style: subtitleStyle }, headerSubtitle(stage.kind))), body, /* @__PURE__ */ React.createElement("div", { style: footerStyle }, /* @__PURE__ */ React.createElement("p", { style: footerTextStyle }, "Your photo is securely processed and used only for verification.")))));
+}
+var keyframes = `
+@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
+@keyframes zoomIn { from { transform: scale(.96); opacity: 0 } to { transform: scale(1); opacity: 1 } }
+@keyframes spin   { to { transform: rotate(360deg) } }
+@keyframes pulse  { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }
+`;
+var overlayStyle = {
+  position: "fixed",
+  inset: 0,
+  background: "rgba(0,0,0,.6)",
+  backdropFilter: "blur(4px)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 999999,
+  padding: 16,
+  animation: "fadeIn .2s ease-out"
+};
+var modalStyle = {
+  background: "#fff",
+  borderRadius: 16,
+  boxShadow: "0 25px 50px -12px rgba(0,0,0,.25)",
+  width: "100%",
+  maxWidth: 448,
+  animation: "zoomIn .2s ease-out"
+};
+var headerStyle = {
+  position: "relative",
+  padding: "24px 24px 16px",
+  borderBottom: "1px solid #f3f4f6"
+};
+var closeButtonStyle = {
+  position: "absolute",
+  top: 16,
+  right: 16,
+  padding: 8,
+  background: "transparent",
+  border: "none",
+  borderRadius: 8,
+  cursor: "pointer"
+};
+var titleStyle = { margin: "0 0 4px", fontSize: 18, fontWeight: 600, color: "#111827" };
+var subtitleStyle = { margin: 0, fontSize: 14, color: "#6b7280" };
+var contentStyle = {
+  padding: 24,
+  display: "flex",
+  flexDirection: "column",
+  gap: 16
+};
+var visualGuideContainerStyle = { display: "flex", justifyContent: "center" };
+var visualGuideStyle = { position: "relative" };
+var circleStyle = {
+  width: 96,
+  height: 96,
+  borderRadius: "50%",
+  background: "linear-gradient(135deg, rgba(0, 188, 125, 0.2) 0%, rgba(0, 188, 125, 0.05) 100%)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var badgeStyle = {
+  position: "absolute",
+  bottom: -4,
+  right: -4,
+  width: 28,
+  height: 28,
+  borderRadius: "50%",
+  background: "#ffffff",
+  border: "2px solid #00bc7d",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var successCircleStyle = {
+  ...circleStyle,
+  background: "linear-gradient(135deg, rgba(0, 188, 125, 0.25) 0%, rgba(0, 188, 125, 0.1) 100%)",
+  margin: "0 auto"
+};
+var errorCircleStyle = {
+  width: 64,
+  height: 64,
+  borderRadius: "50%",
+  background: "#fee2e2",
+  color: "#b91c1c",
+  fontSize: 32,
+  fontWeight: 700,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  margin: "0 auto"
+};
+var qrBoxStyle = {
+  display: "flex",
+  justifyContent: "center",
+  padding: 12,
+  background: "linear-gradient(135deg, #f9fafb 0%, rgba(243, 244, 246, 0.5) 100%)",
+  borderRadius: 12
+};
+var alertBoxStyle = {
+  background: "#fef3c7",
+  border: "1px solid #fde68a",
+  color: "#92400e",
+  borderRadius: 8,
+  padding: 12,
+  fontSize: 14
+};
+var alertTextStyle = { margin: "4px 0 0", fontSize: 13, color: "#92400e" };
+var instructionsBoxStyle = {
+  background: "linear-gradient(135deg, #f9fafb 0%, rgba(243, 244, 246, 0.5) 100%)",
+  borderRadius: 8,
+  padding: 16
+};
+var instructionsTitleStyle = { margin: "0 0 8px", fontSize: 14, fontWeight: 600, color: "#374151" };
+var instructionsListStyle = { margin: 0, padding: 0, listStyle: "none" };
+var instructionItemStyle = { display: "flex", gap: 8, fontSize: 13, color: "#4b5563", lineHeight: 1.5 };
+var bulletStyle = { color: "#00bc7d" };
+var previewBoxStyle = {
+  borderRadius: 12,
+  overflow: "hidden",
+  border: "2px solid rgba(0, 188, 125, 0.4)",
+  background: "#0f172a",
+  display: "flex",
+  justifyContent: "center"
+};
+var previewImgStyle = {
+  width: "100%",
+  maxHeight: 320,
+  objectFit: "contain",
+  background: "#0f172a"
+};
+var buttonsContainerStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+};
+var primaryButtonStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8,
+  padding: "12px 16px",
+  background: "#00bc7d",
+  color: "#ffffff",
+  border: "none",
+  borderRadius: 8,
+  fontSize: 14,
+  fontWeight: 600,
+  cursor: "pointer"
+};
+var secondaryButtonStyle = {
+  ...primaryButtonStyle,
+  background: "#ffffff",
+  color: "#374151",
+  border: "2px solid #e5e7eb"
+};
+var cancelButtonStyle = {
+  ...primaryButtonStyle,
+  background: "transparent",
+  color: "#6b7280",
+  border: "none"
+};
+var spinnerStyle = {
+  width: 16,
+  height: 16,
+  border: "2px solid rgba(0, 188, 125, 0.25)",
+  borderTopColor: "#00bc7d",
+  borderRadius: "50%",
+  animation: "spin .8s linear infinite"
+};
+var attemptsTextStyle = {
+  margin: "8px 0 0",
+  fontSize: 12,
+  color: "#9ca3af",
+  textAlign: "center"
+};
+var footerStyle = { padding: "12px 24px 16px", borderTop: "1px solid #f3f4f6" };
+var footerTextStyle = { margin: 0, fontSize: 12, color: "#9ca3af", textAlign: "center" };
+var FACE_MESSAGES = {
+  idle: "Initializing camera...",
+  loading: "Loading face detection...",
+  scanning: "Position your face in the circle",
+  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",
+  ok: "Looking great! Tap the button to capture"
+};
+var FACE_COLORS = {
+  idle: "#9ca3af",
+  loading: "#3b82f6",
+  scanning: "#3b82f6",
+  too_far: "#ef4444",
+  too_close: "#f59e0b",
+  off_center: "#f59e0b",
+  ok: "#10b981"
+};
+var MEDIAPIPE_BASE = "https://cdn.jsdelivr.net/npm/@mediapipe/face_detection";
+var mediapipeLoaderPromise = null;
+function loadMediaPipeFaceDetection() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return Promise.reject(new Error("MediaPipe requires a browser environment"));
+  }
+  const w = window;
+  if (w.FaceDetection) {
+    return Promise.resolve(w.FaceDetection);
+  }
+  if (mediapipeLoaderPromise) return mediapipeLoaderPromise;
+  mediapipeLoaderPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = `${MEDIAPIPE_BASE}/face_detection.js`;
+    script.async = true;
+    script.crossOrigin = "anonymous";
+    script.onload = () => {
+      if (w.FaceDetection) {
+        resolve(w.FaceDetection);
+      } else {
+        mediapipeLoaderPromise = null;
+        reject(new Error("MediaPipe loaded but FaceDetection global is missing"));
+      }
+    };
+    script.onerror = () => {
+      mediapipeLoaderPromise = null;
+      reject(new Error("Failed to load MediaPipe face_detection script"));
+    };
+    document.head.appendChild(script);
+  });
+  return mediapipeLoaderPromise;
+}
+function LiveCamera({ onCapture, onCancel, message }) {
+  const videoRef = useRef(null);
+  const streamRef = useRef(null);
+  const [ready, setReady] = useState(false);
+  const [error, setError] = useState(null);
+  const [faceStatus, setFaceStatus] = useState("idle");
+  const [faceDetectionFailed, setFaceDetectionFailed] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    async function init() {
+      try {
+        if (typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia) {
+          throw new Error("Camera is not available in this browser");
+        }
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            facingMode: "user",
+            width: { ideal: 1280 },
+            height: { ideal: 1280 }
+          },
+          audio: false
+        });
+        if (cancelled) {
+          stream.getTracks().forEach((t) => t.stop());
+          return;
+        }
+        streamRef.current = stream;
+        const video = videoRef.current;
+        if (video) {
+          video.srcObject = stream;
+          video.onloadedmetadata = () => {
+            video.play().catch(() => {
+            });
+            setReady(true);
+          };
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unable to access camera");
+      }
+    }
+    init();
+    return () => {
+      cancelled = true;
+      streamRef.current?.getTracks().forEach((t) => t.stop());
+      streamRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    if (!ready) {
+      setFaceStatus("idle");
+      return;
+    }
+    let cancelled = false;
+    let rafId = null;
+    let detector = null;
+    setFaceStatus("loading");
+    setFaceDetectionFailed(false);
+    (async () => {
+      try {
+        const FaceDetection = await loadMediaPipeFaceDetection();
+        if (cancelled) return;
+        const d = new FaceDetection({
+          locateFile: (f) => `${MEDIAPIPE_BASE}/${f}`
+        });
+        d.setOptions({ model: "short", minDetectionConfidence: 0.5 });
+        d.onResults((results) => {
+          if (cancelled) return;
+          const detections = results.detections ?? [];
+          let next;
+          if (detections.length === 0) {
+            next = "scanning";
+          } else {
+            const bb = detections[0].boundingBox;
+            if (bb.width < 0.18) next = "too_far";
+            else if (bb.width > 0.72) next = "too_close";
+            else if (bb.xCenter < 0.28 || bb.xCenter > 0.72 || bb.yCenter < 0.28 || bb.yCenter > 0.72) {
+              next = "off_center";
+            } else {
+              next = "ok";
+            }
+          }
+          setFaceStatus(next);
+        });
+        await d.initialize();
+        if (cancelled) return;
+        detector = d;
+        setFaceStatus("scanning");
+        const tick = async () => {
+          if (cancelled) return;
+          const v = videoRef.current;
+          if (v?.readyState === 4 && detector) {
+            try {
+              await detector.send({ image: v });
+            } catch {
+            }
+          }
+          if (!cancelled) {
+            rafId = requestAnimationFrame(tick);
+          }
+        };
+        tick();
+      } catch (err) {
+        console.error("Face detection failed to initialize:", err);
+        if (!cancelled) {
+          setFaceDetectionFailed(true);
+          setFaceStatus("scanning");
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      try {
+        detector?.close?.();
+      } catch {
+      }
+    };
+  }, [ready]);
+  const capture = () => {
+    const video = videoRef.current;
+    if (!video || !video.videoWidth) return;
+    const size = Math.min(video.videoWidth, video.videoHeight);
+    const sx = (video.videoWidth - size) / 2;
+    const sy = (video.videoHeight - size) / 2;
+    const canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.translate(size, 0);
+    ctx.scale(-1, 1);
+    ctx.drawImage(video, sx, sy, size, size, 0, 0, size, size);
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    onCapture(canvas.toDataURL("image/jpeg", 0.9));
+  };
+  if (error) {
+    return /* @__PURE__ */ React.createElement("div", { style: { ...contentStyle, alignItems: "center", textAlign: "center", padding: 0 } }, /* @__PURE__ */ React.createElement("div", { style: errorCircleStyle }, "!"), /* @__PURE__ */ React.createElement("h3", { style: titleStyle }, "Camera unavailable"), /* @__PURE__ */ React.createElement("p", { style: alertTextStyle }, error), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.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 captureDisabled = !ready || detectionActive && faceStatus !== "ok";
+  const ringPulse = detectionActive && (faceStatus === "too_far" || faceStatus === "too_close") ? "pulse 1.5s ease-in-out infinite" : void 0;
+  const dynamicCircleStyle = {
+    ...faceCircleStyle,
+    ...liveFaceColor ? { borderColor: liveFaceColor } : null,
+    ...ringPulse ? { animation: ringPulse } : null
+  };
+  return /* @__PURE__ */ React.createElement("div", { style: videoFrameStyle }, /* @__PURE__ */ React.createElement(
+    "video",
     {
-      ref: inputRef,
-      type: "file",
-      accept: "image/*",
-      capture: isMobile ? "user" : void 0,
-      style: hiddenInputStyle,
-      onChange: handleFileChange,
-      disabled: isProcessing
+      ref: videoRef,
+      playsInline: true,
+      muted: true,
+      autoPlay: true,
+      style: videoStyle
     }
-  ), /* @__PURE__ */ React.createElement("div", { style: buttonsContainerStyle }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement("div", { style: faceOverlayContainerStyle, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("div", { style: faceRingWrapStyle }, /* @__PURE__ */ React.createElement("div", { style: faceDashedRingStyle }), /* @__PURE__ */ React.createElement("div", { style: dynamicCircleStyle }))), liveMessage && /* @__PURE__ */ React.createElement("div", { style: liveMessagePillContainerStyle }, /* @__PURE__ */ React.createElement("div", { style: liveMessagePillStyle }, /* @__PURE__ */ React.createElement("span", { style: liveMessagePillTextStyle }, liveMessage))), /* @__PURE__ */ React.createElement(
     "button",
     {
-      onClick: () => inputRef.current?.click(),
-      onMouseEnter: () => setIsHoveringPrimary(true),
-      onMouseLeave: () => setIsHoveringPrimary(false),
-      disabled: isProcessing,
-      style: primaryButtonStyle
+      type: "button",
+      onClick: onCancel,
+      "aria-label": "Close camera",
+      style: overlayCloseButtonStyle
     },
-    isProcessing ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: spinnerStyle }), /* @__PURE__ */ React.createElement("span", null, "Processing...")) : /* @__PURE__ */ React.createElement(React.Fragment, null, isMobile ? /* @__PURE__ */ React.createElement("img", { src: Camera, alt: "Camera Icon", width: 20, height: 20 }) : /* @__PURE__ */ React.createElement("img", { src: Upload, alt: "Upload Icon", width: 20, height: 20 }), /* @__PURE__ */ React.createElement("span", null, isMobile ? "Capture Photo" : "Upload Photo"))
-  ), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("img", { src: Close, alt: "", width: 16, height: 16 })
+  ), !ready && /* @__PURE__ */ React.createElement("div", { style: videoLoadingStyle }, "Starting camera\u2026"), /* @__PURE__ */ React.createElement("div", { style: bottomGradientStyle }, /* @__PURE__ */ React.createElement(
     "button",
     {
-      onClick: onCancel,
-      onMouseEnter: () => setIsHoveringCancel(true),
-      onMouseLeave: () => setIsHoveringCancel(false),
-      disabled: isProcessing,
-      style: cancelButtonStyle
+      type: "button",
+      onClick: capture,
+      disabled: captureDisabled,
+      "aria-label": "Capture",
+      style: captureDisabled ? { ...shutterButtonStyle, opacity: 0.5, cursor: "not-allowed" } : shutterButtonStyle
     },
-    "Cancel"
-  ))), /* @__PURE__ */ React.createElement("div", { style: footerStyle }, /* @__PURE__ */ React.createElement("p", { style: footerTextStyle }, "Your photo will be securely processed and used only for verification purposes")))));
+    /* @__PURE__ */ React.createElement("span", { style: shutterInnerStyle })
+  )));
 }
+var videoFrameStyle = {
+  position: "relative",
+  width: "100%",
+  aspectRatio: "3 / 4",
+  borderRadius: 24,
+  overflow: "hidden",
+  background: "#000000",
+  border: "4px solid rgba(255, 255, 255, 0.08)",
+  boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
+};
+var overlayCloseButtonStyle = {
+  position: "absolute",
+  top: 12,
+  right: 12,
+  width: 32,
+  height: 32,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 0,
+  border: "none",
+  borderRadius: "50%",
+  background: "rgba(0, 0, 0, 0.4)",
+  backdropFilter: "blur(6px)",
+  color: "#ffffff",
+  cursor: "pointer",
+  zIndex: 10
+};
+var bottomGradientStyle = {
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  padding: "16px",
+  background: "linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 10
+};
+var shutterButtonStyle = {
+  width: 64,
+  height: 64,
+  borderRadius: "50%",
+  background: "rgba(255, 255, 255, 0.15)",
+  backdropFilter: "blur(6px)",
+  border: "2px solid rgba(255, 255, 255, 0.7)",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  padding: 0,
+  transition: "transform 120ms ease-out, background 120ms"
+};
+var shutterInnerStyle = {
+  display: "block",
+  width: 44,
+  height: 44,
+  borderRadius: "50%",
+  background: "rgba(255, 255, 255, 0.85)"
+};
+var videoStyle = {
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  transform: "scaleX(-1)"
+  // mirror so the preview matches the user's POV
+};
+var faceOverlayContainerStyle = {
+  position: "absolute",
+  inset: 0,
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var faceRingWrapStyle = {
+  position: "relative",
+  width: "72%",
+  aspectRatio: "1 / 1"
+};
+var faceDashedRingStyle = {
+  position: "absolute",
+  inset: -6,
+  borderRadius: "50%",
+  border: "6px dashed rgba(255, 255, 255, 0.4)",
+  animation: "spin 10s linear infinite"
+};
+var faceCircleStyle = {
+  position: "absolute",
+  inset: 0,
+  borderRadius: "50%",
+  border: "4px solid #00bc7d",
+  boxShadow: "0 0 0 1000px rgba(0, 0, 0, 0.5)"
+};
+var videoLoadingStyle = {
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#e5e7eb",
+  fontSize: 14,
+  fontWeight: 500,
+  background: "rgba(0, 0, 0, 0.4)",
+  zIndex: 5
+};
+var liveMessagePillContainerStyle = {
+  position: "absolute",
+  top: 12,
+  left: "50%",
+  transform: "translateX(-50%)",
+  maxWidth: "84%",
+  pointerEvents: "none"
+};
+var liveMessagePillStyle = {
+  background: "rgba(0, 0, 0, 0.7)",
+  backdropFilter: "blur(6px)",
+  border: "1px solid rgba(255, 255, 255, 0.2)",
+  borderRadius: 999,
+  padding: "6px 12px",
+  textAlign: "center",
+  boxShadow: "0 10px 25px -5px rgba(0,0,0,.3)"
+};
+var liveMessagePillTextStyle = {
+  margin: 0,
+  fontSize: 12,
+  fontWeight: 500,
+  color: "#ffffff",
+  animation: "pulse 2s ease-in-out infinite"
+};
 var FaceCaptureModal_default = FaceCaptureModal;
 
 // src/kyc/hooks.ts
@@ -1426,7 +2031,7 @@ function useKycPreferences(client, autoFetch = true) {
     refresh: fetchPreferences
   };
 }
-function fileToBase642(file) {
+function fileToBase64(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => {
@@ -1482,42 +2087,52 @@ function getRiskColor(risk) {
   };
   return colorMap[risk] || "#6b7280";
 }
-function useReuseKYCSubmission(client) {
-  const verifyFace = (reference, token) => {
-    return new Promise((resolve, reject) => {
+function useEventBasedFaceVerificationSubmission(client) {
+  const startSession = useCallback(
+    (request) => client.createEventBasedFaceVerificationSession(request),
+    [client]
+  );
+  const verifyFace = useCallback(
+    (session, opts = {}) => new Promise((resolve) => {
       const container = document.createElement("div");
       document.body.appendChild(container);
       const root = createRoot(container);
       const cleanup = () => {
         root.unmount();
-        document.body.removeChild(container);
+        container.remove();
       };
       const modal = createElement(FaceCaptureModal_default, {
-        onCapture: async (base64) => {
-          try {
-            const resp = await client.submitReuseKycSession({
-              proof: base64,
-              reference,
-              token
-            });
-            resolve(resp);
-          } catch (error) {
-            reject(error instanceof Error ? error : new Error("Face verification failed"));
-          } finally {
-            cleanup();
-          }
-        },
-        onCancel: () => {
+        client,
+        session,
+        defaultDevice: opts.defaultDevice,
+        renderQR: opts.renderQR,
+        onCancel: opts.onCancel,
+        onComplete: (result) => {
           cleanup();
-          resolve(null);
+          resolve(result);
         }
       });
       root.render(modal);
-    });
-  };
-  return { verifyFace };
+    }),
+    [client]
+  );
+  const runFlow = useCallback(
+    async (request, opts = {}) => {
+      const session = await startSession(request);
+      if (!session.is_required) {
+        return { kind: "not_required", session };
+      }
+      const result = await verifyFace(session, opts);
+      if (result === null) {
+        return { kind: "cancelled", session };
+      }
+      return { kind: "completed", session, result };
+    },
+    [startSession, verifyFace]
+  );
+  return { startSession, verifyFace, runFlow };
 }
 
-export { createDeviceFingerprint, fileToBase642 as fileToBase64, formatKycStatus, getBrowserInfo, getRiskColor, getStatusColor, isValidFileSize, isValidFileType, useCipherText, useCustomerProfile, useGeolocation, useKycAlerts, useKycOverview, useKycPreferences, useKycRequests, useKycSubmission, useLocationCapture, useLocationRequests, useLoginVerification, useRegistration, useReuseKYCSubmission, useTransactionVerification };
+export { createDeviceFingerprint, fileToBase64, formatKycStatus, getBrowserInfo, getRiskColor, getStatusColor, isValidFileSize, isValidFileType, useCipherText, useCustomerProfile, useEventBasedFaceVerificationSubmission, useGeolocation, useKycAlerts, useKycOverview, useKycPreferences, useKycRequests, useKycSubmission, useLocationCapture, useLocationRequests, useLoginVerification, useRegistration, useTransactionVerification };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map