@vaultix.ai/react 0.3.2 → 0.3.3

package/dist/index.mjs

@@ -23,28 +23,35 @@ function resolveApiOrigin(key, apiUrlProp) {
     throw new Error(`Unknown publishable key prefix "${parts[0]}".`);
   }
   try {
-    return atob(parts.slice(3).join("_")).replace(/\/$/, "");
+    return atob(parts.slice(3).join("_")).replace(/\|.+$/, "").replace(/\/$/, "");
   } catch {
     throw new Error("Publishable key has an unreadable API origin payload.");
   }
 }
-var STORAGE_KEY = "vaultix_jwt";
+var TOKEN_COOKIE = "vaultix-token";
+var COOKIE_DAYS = 30;
 function storeJwt(jwt) {
+  if (typeof document === "undefined") return;
   try {
-    sessionStorage.setItem(STORAGE_KEY, jwt);
+    const expires = new Date(Date.now() + COOKIE_DAYS * 864e5).toUTCString();
+    const secure = location.protocol === "https:" ? "; Secure" : "";
+    document.cookie = `${TOKEN_COOKIE}=${encodeURIComponent(jwt)}; path=/; expires=${expires}; SameSite=Lax${secure}`;
   } catch {
   }
 }
 function loadJwt() {
+  if (typeof document === "undefined") return null;
   try {
-    return sessionStorage.getItem(STORAGE_KEY);
+    const m = document.cookie.match(new RegExp(`(?:^|; )${TOKEN_COOKIE}=([^;]+)`));
+    return m?.[1] ? decodeURIComponent(m[1]) : null;
   } catch {
     return null;
   }
 }
 function clearJwt() {
+  if (typeof document === "undefined") return;
   try {
-    sessionStorage.removeItem(STORAGE_KEY);
+    document.cookie = `${TOKEN_COOKIE}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax`;
   } catch {
   }
 }
@@ -115,26 +122,27 @@ function VaultixProvider({
     async function hydrate() {
       let jwt = null;
       if (typeof window !== "undefined") {
-        const url = new URL(window.location.href);
-        const handshakeToken = url.searchParams.get("__vaultix_handshake");
-        if (handshakeToken) {
-          url.searchParams.delete("__vaultix_handshake");
-          window.history.replaceState({}, "", url.toString());
-          try {
-            const res = await fetch(`${apiOrigin}/api/v1/tokens/exchange`, {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ handshake_token: handshakeToken })
-            });
-            if (res.ok) {
-              const data = await res.json();
-              jwt = data.session_jwt;
-              storeJwt(jwt);
+        jwt = loadJwt();
+        if (!jwt) {
+          const url = new URL(window.location.href);
+          const handshakeToken = url.searchParams.get("__vaultix_handshake");
+          if (handshakeToken) {
+            url.searchParams.delete("__vaultix_handshake");
+            window.history.replaceState({}, "", url.toString());
+            try {
+              const res = await fetch(`${apiOrigin}/api/v1/tokens/exchange`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ handshake_token: handshakeToken })
+              });
+              if (res.ok) {
+                const data = await res.json();
+                jwt = data.session_jwt;
+                storeJwt(jwt);
+              }
+            } catch {
             }
-          } catch {
           }
-        } else {
-          jwt = loadJwt();
         }
         jwtRef.current = jwt;
       }
@@ -175,7 +183,7 @@ function VaultixProvider({
       if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
     };
   }, [apiOrigin, publishableKey, scheduleRefresh]);
-  const signOut = useCallback(async () => {
+  const signOut = useCallback(async (redirectUrl) => {
     const jwt = jwtRef.current;
     clearAuth();
     if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
@@ -187,8 +195,29 @@ function VaultixProvider({
       headers
     }).catch(() => {
     });
-    if (afterSignInUrl) window.location.href = afterSignInUrl;
-  }, [apiOrigin, afterSignInUrl, clearAuth]);
+    const dest = redirectUrl ?? afterSignUpUrl ?? "/";
+    if (typeof window !== "undefined") window.location.href = dest;
+  }, [apiOrigin, afterSignUpUrl, clearAuth]);
+  const updateUser = useCallback(async (params) => {
+    const userId = user?.id;
+    if (!userId) throw new Error("No active session");
+    const jwt = jwtRef.current;
+    const headers = { "Content-Type": "application/json" };
+    if (jwt) headers["Authorization"] = `Bearer ${jwt}`;
+    const res = await fetch(`${apiOrigin}/api/v1/users/${userId}`, {
+      method: "PATCH",
+      credentials: jwt ? "omit" : "include",
+      headers,
+      body: JSON.stringify(params)
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: "Update failed" }));
+      throw new Error(err.error ?? "Update failed");
+    }
+    const updated = await res.json();
+    setUser(updated);
+    return updated;
+  }, [apiOrigin, user?.id]);
   const connectPlatform = useCallback((provider, options = {}) => {
     const params = new URLSearchParams({ mode: "connect" });
     params.set("redirect_url", options.redirectUrl ?? (typeof window !== "undefined" ? window.location.href : "/"));
@@ -206,7 +235,9 @@ function VaultixProvider({
     organization,
     isLoaded,
     isSignedIn: !!session,
+    apiOrigin,
     signOut,
+    updateUser,
     connectPlatform
   };
   return /* @__PURE__ */ jsx(VaultixContext.Provider, { value, children: /* @__PURE__ */ jsx(
@@ -232,8 +263,8 @@ function useSession() {
   return { session, isLoaded, isSignedIn };
 }
 function useUser() {
-  const { user, isLoaded, isSignedIn } = useVaultixContext();
-  return { user, isLoaded, isSignedIn };
+  const { user, isLoaded, isSignedIn, updateUser } = useVaultixContext();
+  return { user, isLoaded, isSignedIn, update: updateUser };
 }
 function useOrganization() {
   const { organization, isLoaded } = useVaultixContext();
@@ -244,7 +275,8 @@ function useAuth() {
   const getToken = useCallback2(async () => {
     if (!isSignedIn) return null;
     try {
-      return sessionStorage.getItem("vaultix_jwt");
+      const m = document.cookie.match(/(?:^|; )vaultix-token=([^;]+)/);
+      return m?.[1] ? decodeURIComponent(m[1]) : null;
     } catch {
       return null;
     }
@@ -358,6 +390,23 @@ function SignIn({
       setLoading(false);
     }
   }
+  async function handleMagicLinkRequest() {
+    setError(null);
+    setLoading(true);
+    try {
+      const target = resolveAfterSignInUrl(redirectUrl);
+      await fetch(`${apiOrigin}/api/v1/auth/magic-link/send`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, redirect_url: target })
+      });
+      setStep("magic-link-sent");
+    } catch {
+      setErr("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
   async function handlePasswordSubmit(e) {
     e.preventDefault();
     setError(null);
@@ -526,6 +575,7 @@ function SignIn({
     password: "Enter password",
     passkey: "Passkey sign-in",
     totp: "Two-factor code",
+    "magic-link-sent": "Check your inbox",
     forgot: "Forgot password",
     "forgot-verify": "Enter reset code",
     "forgot-reset": "New password"
@@ -535,6 +585,7 @@ function SignIn({
     password: email,
     passkey: email,
     totp: "Enter the 6-digit code from your authenticator app",
+    "magic-link-sent": `We sent a sign-in link to ${email}`,
     forgot: "We'll send a reset code to your email",
     "forgot-verify": `Code sent to ${email}`,
     "forgot-reset": "Choose a new password"
@@ -592,12 +643,31 @@ function SignIn({
               }
             ),
             /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Sign in" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" }),
+              /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-[#475569]", children: "or" }),
+              /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" })
+            ] }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: handleMagicLinkRequest, children: "\u2709 Email me a sign-in link" }),
             /* @__PURE__ */ jsx2(GhostButton, { onClick: () => {
               setStep("forgot");
               setError(null);
             }, children: "Forgot password?" }),
             /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("email"), children: "\u2190 Back" })
           ] }),
+          step === "magic-link-sent" && /* @__PURE__ */ jsxs("div", { className: "space-y-4 text-center", children: [
+            /* @__PURE__ */ jsx2("div", { className: "w-14 h-14 rounded-2xl bg-purple-500/15 border border-purple-500/30 flex items-center justify-center mx-auto", children: /* @__PURE__ */ jsx2(EnvelopeIcon, {}) }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-[#94a3b8] leading-relaxed", children: [
+              "The link expires in ",
+              /* @__PURE__ */ jsx2("span", { className: "text-white/80 font-medium", children: "15 minutes" }),
+              " and can only be used once."
+            ] }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: handleMagicLinkRequest, children: "Resend link" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => {
+              setStep("password");
+              setError(null);
+            }, children: "Use password instead" })
+          ] }),
           step === "passkey" && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsxs(PrimaryButton, { loading, onClick: handlePasskeySignIn, children: [
               /* @__PURE__ */ jsx2(FingerprintIcon, {}),
@@ -840,6 +910,12 @@ function GitHubIcon() {
 function XIcon() {
   return /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ jsx2("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) });
 }
+function EnvelopeIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#a78bfa", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx2("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
+  ] });
+}
 
 // src/components/SignUp.tsx
 import { clsx as clsx2 } from "clsx";
@@ -1180,22 +1256,17 @@ function RedirectToSignUp({ redirectUrl = "/sign-up" }) {
 
 // src/components/UserButton.tsx
 import { clsx as clsx3 } from "clsx";
-import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function UserButton({
-  showName = false,
-  afterSignOutUrl,
-  className
-}) {
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function UserButton({ showName = false, afterSignOutUrl, className }) {
   const { user, session, isLoaded, isSignedIn, signOut } = useVaultixContext();
   const [open, setOpen] = useState4(false);
   const [signingOut, setSigningOut] = useState4(false);
+  const [showProfile, setShowProfile] = useState4(false);
   const containerRef = useRef3(null);
   useEffect3(() => {
     function onPointerDown(e) {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(false);
-      }
+      if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
     }
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
@@ -1208,98 +1279,456 @@ function UserButton({
     await signOut();
     if (afterSignOutUrl) window.location.href = afterSignOutUrl;
   }
-  return /* @__PURE__ */ jsxs3("div", { ref: containerRef, className: clsx3("relative", className), children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsxs3("div", { ref: containerRef, className: clsx3("relative", className), children: [
+      /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          onClick: () => setOpen((o) => !o),
+          className: "flex items-center gap-2 rounded-xl p-1 hover:bg-white/8 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx5(Avatar, { initials, imageUrl: user.imageUrl }),
+            showName && /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium text-white/90 pr-1", children: user.firstName ?? user.email })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: clsx3("absolute right-0 mt-2 w-64 rounded-2xl border border-white/8", "backdrop-blur-[16px] shadow-2xl shadow-black/40 z-50"),
+          style: { background: "rgba(22,27,45,0.96)" },
+          children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-white/8", children: [
+              /* @__PURE__ */ jsx5(Avatar, { initials, imageUrl: user.imageUrl, size: "lg" }),
+              /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
+                (user.firstName || user.lastName) && /* @__PURE__ */ jsx5("p", { className: "text-sm font-semibold text-white/90 truncate", children: [user.firstName, user.lastName].filter(Boolean).join(" ") }),
+                /* @__PURE__ */ jsx5("p", { className: "text-xs text-[#475569] truncate", children: user.email })
+              ] })
+            ] }),
+            session && /* @__PURE__ */ jsx5("div", { className: "px-4 py-2 border-b border-white/8", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx5("span", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: "Risk level" }),
+              /* @__PURE__ */ jsx5(RiskBadge, { level: session.riskLevel })
+            ] }) }),
+            /* @__PURE__ */ jsxs3("div", { className: "p-2", children: [
+              /* @__PURE__ */ jsx5(DropdownItem, { label: "Manage account", icon: /* @__PURE__ */ jsx5(UserIcon, {}), onClick: () => {
+                setOpen(false);
+                setShowProfile(true);
+              } }),
+              /* @__PURE__ */ jsx5("div", { className: "h-px bg-white/8 my-1" }),
+              /* @__PURE__ */ jsx5(DropdownItem, { label: signingOut ? "Signing out\u2026" : "Sign out", icon: /* @__PURE__ */ jsx5(SignOutIcon, {}), onClick: handleSignOut, destructive: true })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    showProfile && /* @__PURE__ */ jsx5(ProfileModal, { onClose: () => setShowProfile(false) })
+  ] });
+}
+function ProfileModal({ onClose }) {
+  const { user, updateUser } = useVaultixContext();
+  const [tab, setTab] = useState4("profile");
+  const [firstName, setFirstName] = useState4(user?.firstName ?? "");
+  const [lastName, setLastName] = useState4(user?.lastName ?? "");
+  const [imageUrl, setImageUrl] = useState4(user?.imageUrl ?? "");
+  const [currentPassword, setCurrentPassword] = useState4("");
+  const [newPassword, setNewPassword] = useState4("");
+  const [confirmPassword, setConfirmPassword] = useState4("");
+  const [saving, setSaving] = useState4(false);
+  const [error, setError] = useState4(null);
+  const [success, setSuccess] = useState4(null);
+  useEffect3(() => {
+    function onKey(e) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  async function saveProfile(e) {
+    e.preventDefault();
+    setError(null);
+    setSuccess(null);
+    setSaving(true);
+    try {
+      await updateUser({ firstName: firstName.trim() || null, lastName: lastName.trim() || null, imageUrl: imageUrl.trim() || null });
+      setSuccess("Profile updated.");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Update failed");
+    } finally {
+      setSaving(false);
+    }
+  }
+  async function savePassword(e) {
+    e.preventDefault();
+    setError(null);
+    setSuccess(null);
+    if (newPassword !== confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+    if (newPassword.length < 8) {
+      setError("Password must be at least 8 characters.");
+      return;
+    }
+    setSaving(true);
+    try {
+      await updateUser({ currentPassword, newPassword });
+      setSuccess("Password changed.");
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Update failed");
+    } finally {
+      setSaving(false);
+    }
+  }
+  const TABS = [
+    { id: "profile", label: "Profile" },
+    { id: "password", label: "Change password" },
+    { id: "security", label: "Security" }
+  ];
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: "fixed inset-0 z-[9999] flex items-center justify-center p-4",
+      style: { background: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)" },
+      onPointerDown: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs3("div", { className: "w-full max-w-md rounded-2xl border border-white/8 shadow-2xl", style: { background: "rgba(22,27,45,0.98)" }, children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4 border-b border-white/8", children: [
+          /* @__PURE__ */ jsx5("h2", { className: "text-sm font-semibold text-white/90", children: "Manage account" }),
+          /* @__PURE__ */ jsx5("button", { onClick: onClose, className: "text-[#475569] hover:text-white transition-colors", children: /* @__PURE__ */ jsx5(CloseIcon, {}) })
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "flex gap-1 px-6 pt-4 flex-wrap", children: TABS.map(({ id, label }) => /* @__PURE__ */ jsx5(
+          "button",
+          {
+            onClick: () => {
+              setTab(id);
+              setError(null);
+              setSuccess(null);
+            },
+            className: clsx3(
+              "px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
+              tab === id ? "bg-purple-500/15 text-purple-300 border border-purple-500/30" : "text-[#475569] hover:text-white/70"
+            ),
+            children: label
+          },
+          id
+        )) }),
+        /* @__PURE__ */ jsxs3("div", { className: "px-6 pt-3", children: [
+          error && /* @__PURE__ */ jsx5("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2 text-xs text-red-400", children: error }),
+          success && /* @__PURE__ */ jsx5("div", { className: "rounded-lg bg-emerald-500/10 border border-emerald-500/30 px-3 py-2 text-xs text-emerald-400", children: success })
+        ] }),
+        tab === "profile" && /* @__PURE__ */ jsxs3("form", { onSubmit: saveProfile, className: "px-6 py-4 space-y-4", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-3", children: [
+            /* @__PURE__ */ jsx5(ModalField, { label: "First name", value: firstName, onChange: setFirstName, placeholder: "Jane" }),
+            /* @__PURE__ */ jsx5(ModalField, { label: "Last name", value: lastName, onChange: setLastName, placeholder: "Smith" })
+          ] }),
+          /* @__PURE__ */ jsx5(ModalField, { label: "Avatar URL", value: imageUrl, onChange: setImageUrl, placeholder: "https://\u2026", type: "url" }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 pt-1", children: [
+            /* @__PURE__ */ jsx5(SaveButton, { saving }),
+            /* @__PURE__ */ jsx5("button", { type: "button", onClick: onClose, className: "text-sm text-[#475569] hover:text-white/70 transition-colors", children: "Cancel" })
+          ] })
+        ] }),
+        tab === "password" && /* @__PURE__ */ jsxs3("form", { onSubmit: savePassword, className: "px-6 py-4 space-y-4", children: [
+          /* @__PURE__ */ jsx5(ModalField, { label: "Current password", value: currentPassword, onChange: setCurrentPassword, type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }),
+          /* @__PURE__ */ jsx5(ModalField, { label: "New password", value: newPassword, onChange: setNewPassword, type: "password", placeholder: "Min 8 characters" }),
+          /* @__PURE__ */ jsx5(ModalField, { label: "Confirm new password", value: confirmPassword, onChange: setConfirmPassword, type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 pt-1", children: [
+            /* @__PURE__ */ jsx5(SaveButton, { saving, label: "Change password" }),
+            /* @__PURE__ */ jsx5("button", { type: "button", onClick: onClose, className: "text-sm text-[#475569] hover:text-white/70 transition-colors", children: "Cancel" })
+          ] })
+        ] }),
+        tab === "security" && /* @__PURE__ */ jsx5(SecurityTab, {})
+      ] })
+    }
+  );
+}
+function SecurityTab() {
+  const { apiOrigin } = useVaultixContext();
+  const [totpEnabled, setTotpEnabled] = useState4(null);
+  const [backupCodesLeft, setBackupCodesLeft] = useState4(null);
+  const [enrollStep, setEnrollStep] = useState4("idle");
+  const [qrDataUrl, setQrDataUrl] = useState4("");
+  const [manualKey, setManualKey] = useState4("");
+  const [enrollCode, setEnrollCode] = useState4("");
+  const [disableCode, setDisableCode] = useState4("");
+  const [backupCodes, setBackupCodes] = useState4([]);
+  const [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const [showDisable, setShowDisable] = useState4(false);
+  const fetchStatus = useCallback3(async () => {
+    const res = await fetch(`${apiOrigin}/api/v1/auth/totp/status`, { credentials: "include" });
+    if (res.ok) {
+      const d = await res.json();
+      setTotpEnabled(d.enabled);
+      setBackupCodesLeft(d.backup_codes_remaining);
+    }
+  }, [apiOrigin]);
+  useEffect3(() => {
+    void fetchStatus();
+  }, [fetchStatus]);
+  async function startEnroll() {
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiOrigin}/api/v1/auth/totp/enroll`, { method: "POST", credentials: "include" });
+      const d = await res.json();
+      if (!res.ok) {
+        setError(d.error ?? "Failed to start enrollment.");
+        return;
+      }
+      setQrDataUrl(d.qr_data_url);
+      setManualKey(d.manual_entry_key);
+      setEnrollStep("qr");
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function verifyEnroll(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiOrigin}/api/v1/auth/totp/verify-enroll`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code: enrollCode })
+      });
+      const d = await res.json();
+      if (!res.ok) {
+        setError(d.error ?? "Invalid code. Try again.");
+        return;
+      }
+      setBackupCodes(d.backup_codes);
+      setEnrollStep("backup-codes");
+      setTotpEnabled(true);
+      setBackupCodesLeft(d.backup_codes.length);
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function disableTotp(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiOrigin}/api/v1/auth/totp`, {
+        method: "DELETE",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code: disableCode })
+      });
+      const d = await res.json();
+      if (!res.ok) {
+        setError(d.error ?? "Invalid code.");
+        return;
+      }
+      setTotpEnabled(false);
+      setBackupCodesLeft(null);
+      setShowDisable(false);
+      setDisableCode("");
+    } finally {
+      setLoading(false);
+    }
+  }
+  if (totpEnabled === null) {
+    return /* @__PURE__ */ jsx5("div", { className: "px-6 py-8 text-center text-[#475569] text-sm", children: "Loading\u2026" });
+  }
+  if (enrollStep === "backup-codes") {
+    return /* @__PURE__ */ jsxs3("div", { className: "px-6 py-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "rounded-xl bg-emerald-500/10 border border-emerald-500/30 px-4 py-3", children: [
+        /* @__PURE__ */ jsx5("p", { className: "text-xs font-semibold text-emerald-400 mb-1", children: "Authenticator app enabled!" }),
+        /* @__PURE__ */ jsx5("p", { className: "text-[11px] text-emerald-300/70", children: "Save these backup codes somewhere safe. Each can be used once if you lose your phone." })
+      ] }),
+      /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-2 gap-1.5", children: backupCodes.map((c) => /* @__PURE__ */ jsx5("span", { className: "font-mono text-xs bg-white/5 border border-white/8 rounded-lg px-3 py-1.5 text-white/80 text-center", children: c }, c)) }),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: () => {
+            const t = backupCodes.join("\n");
+            navigator.clipboard.writeText(t).catch(() => {
+            });
+          },
+          className: "w-full text-xs text-[#475569] hover:text-white/70 transition-colors py-1 border border-white/8 rounded-lg",
+          children: "Copy all codes"
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: () => setEnrollStep("idle"),
+          className: "w-full py-2 rounded-xl text-xs font-semibold text-white bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 transition-all",
+          children: "Done"
+        }
+      )
+    ] });
+  }
+  if (enrollStep === "qr") {
+    return /* @__PURE__ */ jsxs3("div", { className: "px-6 py-4 space-y-4", children: [
+      /* @__PURE__ */ jsx5("p", { className: "text-xs text-[#475569]", children: "Scan this QR code with Google Authenticator, Authy, or any TOTP app." }),
+      qrDataUrl && /* @__PURE__ */ jsx5("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx5("img", { src: qrDataUrl, alt: "TOTP QR code", className: "rounded-xl", width: 180, height: 180 }) }),
+      /* @__PURE__ */ jsxs3("details", { className: "text-[11px] text-[#475569]", children: [
+        /* @__PURE__ */ jsx5("summary", { className: "cursor-pointer hover:text-white/60", children: "Can't scan? Enter manually" }),
+        /* @__PURE__ */ jsx5("p", { className: "mt-1 font-mono break-all bg-white/5 rounded px-2 py-1 text-white/60 select-all", children: manualKey })
+      ] }),
+      error && /* @__PURE__ */ jsx5("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2 text-xs text-red-400", children: error }),
+      /* @__PURE__ */ jsxs3("form", { onSubmit: verifyEnroll, className: "space-y-3", children: [
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "text",
+            inputMode: "numeric",
+            pattern: "[0-9]{6}",
+            maxLength: 6,
+            placeholder: "000000",
+            value: enrollCode,
+            onChange: (e) => setEnrollCode(e.target.value),
+            autoFocus: true,
+            required: true,
+            className: "w-full bg-white/5 border border-white/8 rounded-xl px-4 py-2.5 text-sm text-white/90 placeholder:text-[#475569] focus:outline-none focus:border-purple-500/60 transition-colors text-center tracking-[0.4em]"
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "submit",
+            disabled: loading || enrollCode.length !== 6,
+            className: "w-full py-2.5 rounded-xl text-sm font-semibold text-white bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 transition-all disabled:opacity-60",
+            children: loading ? "Verifying\u2026" : "Verify and enable"
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setEnrollStep("idle");
+              setError(null);
+            },
+            className: "w-full text-xs text-[#475569] hover:text-white/70 transition-colors py-1",
+            children: "\u2190 Cancel"
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "px-6 py-4 space-y-4", children: [
+    /* @__PURE__ */ jsx5("div", { className: "rounded-xl border border-white/8 p-4", style: { background: "rgba(255,255,255,0.03)" }, children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium text-white/90", children: "Authenticator app" }),
+        /* @__PURE__ */ jsx5("p", { className: "text-[11px] text-[#475569] mt-0.5", children: totpEnabled ? `Enabled \xB7 ${backupCodesLeft ?? 0} backup code${backupCodesLeft === 1 ? "" : "s"} remaining` : "Add a second layer of security to your account" })
+      ] }),
+      /* @__PURE__ */ jsx5("span", { className: clsx3(
+        "text-[10px] font-semibold uppercase tracking-wide px-2 py-0.5 rounded-full border",
+        totpEnabled ? "bg-emerald-500/15 text-emerald-400 border-emerald-500/30" : "bg-white/5 text-[#475569] border-white/8"
+      ), children: totpEnabled ? "On" : "Off" })
+    ] }) }),
+    error && /* @__PURE__ */ jsx5("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2 text-xs text-red-400", children: error }),
+    !totpEnabled && /* @__PURE__ */ jsx5(
       "button",
       {
-        onClick: () => setOpen((o) => !o),
-        className: "flex items-center gap-2 rounded-xl p-1 hover:bg-white/8 transition-colors",
-        children: [
-          /* @__PURE__ */ jsx5(Avatar, { initials, imageUrl: user.imageUrl }),
-          showName && /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium text-white/90 pr-1", children: user.firstName ?? user.email })
-        ]
+        onClick: startEnroll,
+        disabled: loading,
+        className: "w-full py-2.5 rounded-xl text-sm font-semibold text-white bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 transition-all disabled:opacity-60",
+        children: loading ? "Loading\u2026" : "Enable authenticator app"
       }
     ),
-    open && /* @__PURE__ */ jsxs3(
-      "div",
+    totpEnabled && !showDisable && /* @__PURE__ */ jsx5(
+      "button",
       {
-        className: clsx3(
-          "absolute right-0 mt-2 w-64 rounded-2xl border border-white/8",
-          "backdrop-blur-[16px] shadow-2xl shadow-black/40 z-50"
+        onClick: () => setShowDisable(true),
+        className: "w-full py-2 rounded-xl text-xs font-medium text-red-400 border border-red-500/20 hover:bg-red-500/8 transition-colors",
+        children: "Disable authenticator app"
+      }
+    ),
+    totpEnabled && showDisable && /* @__PURE__ */ jsxs3("form", { onSubmit: disableTotp, className: "space-y-3", children: [
+      /* @__PURE__ */ jsx5("p", { className: "text-[11px] text-[#475569]", children: "Enter your current 6-digit code (or a backup code) to confirm." }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "text",
+          placeholder: "000000 or backup code",
+          value: disableCode,
+          onChange: (e) => setDisableCode(e.target.value),
+          autoFocus: true,
+          required: true,
+          className: "w-full bg-white/5 border border-white/8 rounded-xl px-4 py-2.5 text-sm text-white/90 placeholder:text-[#475569] focus:outline-none focus:border-red-500/60 transition-colors"
+        }
+      ),
+      /* @__PURE__ */ jsxs3("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "submit",
+            disabled: loading || !disableCode,
+            className: "flex-1 py-2 rounded-xl text-xs font-semibold text-white bg-red-600 hover:bg-red-500 transition-colors disabled:opacity-60",
+            children: loading ? "Disabling\u2026" : "Confirm disable"
+          }
         ),
-        style: { background: "rgba(22,27,45,0.96)" },
-        children: [
-          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-white/8", children: [
-            /* @__PURE__ */ jsx5(Avatar, { initials, imageUrl: user.imageUrl, size: "lg" }),
-            /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
-              (user.firstName || user.lastName) && /* @__PURE__ */ jsx5("p", { className: "text-sm font-semibold text-white/90 truncate", children: [user.firstName, user.lastName].filter(Boolean).join(" ") }),
-              /* @__PURE__ */ jsx5("p", { className: "text-xs text-[#475569] truncate", children: user.email })
-            ] })
-          ] }),
-          session && /* @__PURE__ */ jsx5("div", { className: "px-4 py-2 border-b border-white/8", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx5("span", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: "Risk level" }),
-            /* @__PURE__ */ jsx5(RiskBadge, { level: session.riskLevel })
-          ] }) }),
-          /* @__PURE__ */ jsxs3("div", { className: "p-2", children: [
-            /* @__PURE__ */ jsx5(
-              DropdownItem,
-              {
-                label: "Manage account",
-                icon: /* @__PURE__ */ jsx5(UserIcon, {}),
-                onClick: () => setOpen(false)
-              }
-            ),
-            /* @__PURE__ */ jsx5(
-              DropdownItem,
-              {
-                label: "Security settings",
-                icon: /* @__PURE__ */ jsx5(ShieldIcon, {}),
-                onClick: () => setOpen(false)
-              }
-            ),
-            /* @__PURE__ */ jsx5("div", { className: "h-px bg-white/8 my-1" }),
-            /* @__PURE__ */ jsx5(
-              DropdownItem,
-              {
-                label: signingOut ? "Signing out\u2026" : "Sign out",
-                icon: /* @__PURE__ */ jsx5(SignOutIcon, {}),
-                onClick: handleSignOut,
-                destructive: true
-              }
-            )
-          ] })
-        ]
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setShowDisable(false);
+              setError(null);
+              setDisableCode("");
+            },
+            className: "px-4 py-2 rounded-xl text-xs text-[#475569] hover:text-white hover:bg-white/8 border border-white/8 transition-colors",
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ModalField({ label, value, onChange, placeholder, type = "text" }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx5("label", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: label }),
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        type,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        className: clsx3(
+          "w-full bg-white/5 border border-white/8 rounded-xl px-3 py-2 text-sm text-white/90",
+          "placeholder:text-[#475569] focus:outline-none focus:border-purple-500/60 transition-colors"
+        )
       }
     )
   ] });
 }
-function Avatar({ initials, imageUrl, size = "sm" }) {
-  const dim = size === "lg" ? "w-9 h-9 text-sm" : "w-8 h-8 text-xs";
-  if (imageUrl) {
-    return (
-      // eslint-disable-next-line @next/next/no-img-element
-      /* @__PURE__ */ jsx5(
-        "img",
-        {
-          src: imageUrl,
-          alt: "",
-          className: clsx3(dim, "rounded-full object-cover ring-2 ring-white/10")
-        }
-      )
-    );
-  }
+function SaveButton({ saving, label = "Save changes" }) {
   return /* @__PURE__ */ jsx5(
-    "div",
+    "button",
     {
+      type: "submit",
+      disabled: saving,
       className: clsx3(
-        dim,
-        "rounded-full flex items-center justify-center font-semibold text-white",
-        "bg-gradient-to-br from-purple-600 to-blue-600 ring-2 ring-white/10"
+        "px-4 py-2 rounded-xl text-sm font-semibold text-white transition-all",
+        "bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500",
+        "shadow-lg shadow-purple-500/20 disabled:opacity-60"
       ),
-      children: initials
+      children: saving ? "Saving\u2026" : label
     }
   );
 }
+function Avatar({ initials, imageUrl, size = "sm" }) {
+  const dim = size === "lg" ? "w-9 h-9 text-sm" : "w-8 h-8 text-xs";
+  if (imageUrl) {
+    return /* @__PURE__ */ jsx5("img", { src: imageUrl, alt: "", className: clsx3(dim, "rounded-full object-cover ring-2 ring-white/10") });
+  }
+  return /* @__PURE__ */ jsx5("div", { className: clsx3(
+    dim,
+    "rounded-full flex items-center justify-center font-semibold text-white",
+    "bg-gradient-to-br from-purple-600 to-blue-600 ring-2 ring-white/10"
+  ), children: initials });
+}
 function AvatarSkeleton() {
   return /* @__PURE__ */ jsx5("div", { className: "w-8 h-8 rounded-full bg-white/5 animate-pulse" });
 }
@@ -1310,16 +1739,10 @@ function RiskBadge({ level }) {
     high: "bg-orange-500/15 text-orange-400 border-orange-500/30",
     critical: "bg-red-500/15 text-red-400 border-red-500/30"
   };
-  return /* @__PURE__ */ jsx5(
-    "span",
-    {
-      className: clsx3(
-        "inline-flex items-center text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full border",
-        styles[level] ?? styles.low
-      ),
-      children: level
-    }
-  );
+  return /* @__PURE__ */ jsx5("span", { className: clsx3(
+    "inline-flex items-center text-[10px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full border",
+    styles[level] ?? styles.low
+  ), children: level });
 }
 function DropdownItem({ label, icon, onClick, destructive }) {
   return /* @__PURE__ */ jsxs3(
@@ -1343,9 +1766,6 @@ function UserIcon() {
     /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "7", r: "4" })
   ] });
 }
-function ShieldIcon() {
-  return /* @__PURE__ */ jsx5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
-}
 function SignOutIcon() {
   return /* @__PURE__ */ jsxs3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx5("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
@@ -1353,6 +1773,12 @@ function SignOutIcon() {
     /* @__PURE__ */ jsx5("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
   ] });
 }
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
 
 // src/components/OrganizationSwitcher.tsx
 import { clsx as clsx4 } from "clsx";
@@ -1548,17 +1974,19 @@ function MiniSpinner() {
 }
 
 // src/index.ts
-var STORAGE_KEY2 = "vaultix_jwt";
 function getStoredToken() {
+  if (typeof document === "undefined") return null;
   try {
-    return (typeof sessionStorage !== "undefined" ? sessionStorage : null)?.getItem(STORAGE_KEY2) ?? null;
+    const m = document.cookie.match(/(?:^|; )vaultix-token=([^;]+)/);
+    return m?.[1] ? decodeURIComponent(m[1]) : null;
   } catch {
     return null;
   }
 }
 function clearStoredToken() {
+  if (typeof document === "undefined") return;
   try {
-    if (typeof sessionStorage !== "undefined") sessionStorage.removeItem(STORAGE_KEY2);
+    document.cookie = "vaultix-token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax";
   } catch {
   }
 }