@vaultix.ai/react 0.3.2 → 0.3.4

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(
@@ -223,7 +254,7 @@ function VaultixProvider({
 }
 
 // src/hooks/index.ts
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
 function useVaultix() {
   return useVaultixContext();
 }
@@ -232,19 +263,58 @@ 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();
   return { organization, isLoaded };
 }
+function usePlatformConnect(provider, defaultOptions) {
+  const { connectPlatform } = useVaultixContext();
+  const [connectedAccount, setConnectedAccount] = useState2(null);
+  const connect = useCallback2(
+    (overrides) => {
+      connectPlatform(provider, { ...defaultOptions, ...overrides });
+    },
+    [connectPlatform, provider, defaultOptions]
+  );
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const connectToken = params.get("__vaultix_connect");
+    const returnedProvider = params.get("provider");
+    if (!connectToken || returnedProvider !== provider) return;
+    try {
+      const segment = connectToken.split(".")[1];
+      if (!segment) return;
+      const b64 = segment.replace(/-/g, "+").replace(/_/g, "/");
+      const payload = JSON.parse(atob(b64));
+      const result = {
+        provider: returnedProvider,
+        raw: payload,
+        ...typeof payload["platform_user_id"] === "string" && { platformUserId: payload["platform_user_id"] },
+        ...typeof payload["username"] === "string" && { username: payload["username"] },
+        ...typeof payload["access_token"] === "string" && { accessToken: payload["access_token"] },
+        ...typeof payload["scope"] === "string" && { scope: payload["scope"] }
+      };
+      setConnectedAccount(result);
+      const clean = new URL(window.location.href);
+      clean.searchParams.delete("__vaultix_connect");
+      clean.searchParams.delete("provider");
+      window.history.replaceState({}, "", clean.toString());
+    } catch {
+    }
+  }, [provider]);
+  return { connect, connectedAccount };
+}
 function useAuth() {
   const { user, session, isLoaded, isSignedIn, signOut } = useVaultixContext();
   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;
     }
@@ -262,7 +332,7 @@ function useAuth() {
 
 // src/components/SignIn.tsx
 import { clsx } from "clsx";
-import { useRef as useRef2, useState as useState2 } from "react";
+import { useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function toBase64url(buf) {
   return btoa(String.fromCharCode(...new Uint8Array(buf))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
@@ -299,18 +369,24 @@ function SignIn({
   onSuccess,
   onError,
   apiOrigin: apiOriginProp,
-  className
+  className,
+  appearance
 }) {
   const apiOrigin = resolveApiOrigin2(apiOriginProp);
-  const [step, setStep] = useState2("email");
-  const [email, setEmail] = useState2("");
-  const [password, setPassword] = useState2("");
-  const [totp, setTotp] = useState2("");
-  const [forgotCode, setForgotCode] = useState2("");
-  const [newPassword, setNewPassword] = useState2("");
-  const [error, setError] = useState2(null);
-  const [loading, setLoading] = useState2(false);
-  const [info, setInfo] = useState2(null);
+  const vars = appearance?.variables ?? {};
+  const primaryColor = vars.colorPrimary;
+  const cardBg = vars.colorBackground ?? "rgba(22,27,45,0.92)";
+  const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
+  const mutedColor = vars.colorTextMuted ?? "#475569";
+  const [step, setStep] = useState3("email");
+  const [email, setEmail] = useState3("");
+  const [password, setPassword] = useState3("");
+  const [totp, setTotp] = useState3("");
+  const [forgotCode, setForgotCode] = useState3("");
+  const [newPassword, setNewPassword] = useState3("");
+  const [error, setError] = useState3(null);
+  const [loading, setLoading] = useState3(false);
+  const [info, setInfo] = useState3(null);
   const challengeIdRef = useRef2(null);
   function setErr(msg) {
     setError(msg);
@@ -358,6 +434,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 +619,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 +629,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"
@@ -547,12 +642,19 @@ function SignIn({
         "backdrop-blur-[16px]",
         className
       ),
-      style: { background: "rgba(22,27,45,0.92)" },
+      style: { background: cardBg },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "px-8 pt-8 pb-6 text-center", children: [
-          /* @__PURE__ */ jsx2("div", { className: "inline-flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-purple-600 to-blue-600 shadow-lg shadow-purple-500/30 mb-4", children: /* @__PURE__ */ jsx2(LockIcon, {}) }),
-          /* @__PURE__ */ jsx2("h1", { className: "text-xl font-semibold text-white/90", children: title[step] }),
-          /* @__PURE__ */ jsx2("p", { className: "text-sm text-[#475569] mt-1", children: subtitle[step] })
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4",
+              style: primaryColor ? { background: primaryColor, boxShadow: `0 10px 15px -3px ${primaryColor}4d` } : { background: "linear-gradient(to bottom right, #7c3aed, #2563eb)", boxShadow: "0 10px 15px -3px rgba(124,58,237,0.3)" },
+              children: /* @__PURE__ */ jsx2(LockIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx2("h1", { className: "text-xl font-semibold", style: { color: textColor }, children: title[step] }),
+          /* @__PURE__ */ jsx2("p", { className: "text-sm mt-1", style: { color: mutedColor }, children: subtitle[step] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "px-8 pb-8 space-y-4", children: [
           error && /* @__PURE__ */ jsx2("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ jsx2("p", { className: "text-xs text-red-400", children: error }) }),
@@ -563,7 +665,7 @@ function SignIn({
             /* @__PURE__ */ jsx2(MetaButton, { onClick: handleMetaSignIn }),
             /* @__PURE__ */ jsx2(LinkedInButton, { onClick: handleLinkedInSignIn }),
             /* @__PURE__ */ jsx2(XButton, { onClick: handleXSignIn }),
-            /* @__PURE__ */ jsx2(Divider, {}),
+            /* @__PURE__ */ jsx2(Divider, { mutedColor }),
             /* @__PURE__ */ jsxs("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
               /* @__PURE__ */ jsx2(
                 Input,
@@ -573,10 +675,11 @@ function SignIn({
                   value: email,
                   onChange: setEmail,
                   autoFocus: true,
-                  required: true
+                  required: true,
+                  primaryColor
                 }
               ),
-              /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Continue" })
+              /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, children: "Continue" })
             ] })
           ] }),
           step === "password" && /* @__PURE__ */ jsxs("form", { onSubmit: handlePasswordSubmit, className: "space-y-3", children: [
@@ -588,23 +691,50 @@ function SignIn({
                 value: password,
                 onChange: setPassword,
                 autoFocus: true,
-                required: true
+                required: true,
+                primaryColor
               }
             ),
-            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Sign in" }),
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, 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]", style: { color: mutedColor }, children: "or" }),
+              /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" })
+            ] }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: handleMagicLinkRequest, mutedColor, 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" })
+            }, mutedColor, children: "Forgot password?" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("email"), mutedColor, 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 flex items-center justify-center mx-auto border",
+                style: primaryColor ? { background: `${primaryColor}26`, borderColor: `${primaryColor}4d` } : { background: "rgba(168,85,247,0.15)", borderColor: "rgba(168,85,247,0.3)" },
+                children: /* @__PURE__ */ jsx2(EnvelopeIcon, { color: primaryColor ?? "#a78bfa" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm leading-relaxed", style: { color: mutedColor }, children: [
+              "The link expires in ",
+              /* @__PURE__ */ jsx2("span", { style: { color: textColor }, className: "font-medium", children: "15 minutes" }),
+              " and can only be used once."
+            ] }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: handleMagicLinkRequest, mutedColor, children: "Resend link" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => {
+              setStep("password");
+              setError(null);
+            }, mutedColor, children: "Use password instead" })
           ] }),
           step === "passkey" && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsxs(PrimaryButton, { loading, onClick: handlePasskeySignIn, children: [
+            /* @__PURE__ */ jsxs(PrimaryButton, { loading, onClick: handlePasskeySignIn, primaryColor, children: [
               /* @__PURE__ */ jsx2(FingerprintIcon, {}),
               "Authenticate with passkey"
             ] }),
-            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("password"), children: "Use password instead" }),
-            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("email"), children: "\u2190 Back" })
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("password"), mutedColor, children: "Use password instead" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("email"), mutedColor, children: "\u2190 Back" })
           ] }),
           step === "totp" && /* @__PURE__ */ jsxs("form", { onSubmit: handleTotpSubmit, className: "space-y-3", children: [
             /* @__PURE__ */ jsx2(
@@ -619,11 +749,12 @@ function SignIn({
                 onChange: setTotp,
                 autoFocus: true,
                 required: true,
-                className: "text-center tracking-[0.4em] text-lg"
+                className: "text-center tracking-[0.4em] text-lg",
+                primaryColor
               }
             ),
-            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Verify" }),
-            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("password"), children: "\u2190 Back" })
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, children: "Verify" }),
+            /* @__PURE__ */ jsx2(GhostButton, { onClick: () => setStep("password"), mutedColor, children: "\u2190 Back" })
           ] }),
           step === "forgot" && /* @__PURE__ */ jsxs("form", { onSubmit: handleForgotSubmit, className: "space-y-3", children: [
             /* @__PURE__ */ jsx2(
@@ -634,14 +765,15 @@ function SignIn({
                 value: email,
                 onChange: setEmail,
                 autoFocus: true,
-                required: true
+                required: true,
+                primaryColor
               }
             ),
-            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Send reset code" }),
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, children: "Send reset code" }),
             /* @__PURE__ */ jsx2(GhostButton, { onClick: () => {
               setStep("password");
               setError(null);
-            }, children: "\u2190 Back" })
+            }, mutedColor, children: "\u2190 Back" })
           ] }),
           step === "forgot-verify" && /* @__PURE__ */ jsxs("form", { onSubmit: handleForgotVerifySubmit, className: "space-y-3", children: [
             /* @__PURE__ */ jsx2(
@@ -656,10 +788,11 @@ function SignIn({
                 onChange: setForgotCode,
                 autoFocus: true,
                 required: true,
-                className: "text-center tracking-[0.4em] text-lg"
+                className: "text-center tracking-[0.4em] text-lg",
+                primaryColor
               }
             ),
-            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Continue" })
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, children: "Continue" })
           ] }),
           step === "forgot-reset" && /* @__PURE__ */ jsxs("form", { onSubmit: handleResetPasswordSubmit, className: "space-y-3", children: [
             /* @__PURE__ */ jsx2(
@@ -671,18 +804,19 @@ function SignIn({
                 onChange: setNewPassword,
                 autoFocus: true,
                 required: true,
-                minLength: 8
+                minLength: 8,
+                primaryColor
               }
             ),
             /* @__PURE__ */ jsx2(PasswordStrength, { password: newPassword }),
-            /* @__PURE__ */ jsx2(PrimaryButton, { loading, children: "Reset password" })
+            /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, children: "Reset password" })
           ] })
         ] })
       ]
     }
   );
 }
-function Input({ onChange, className, ...props }) {
+function Input({ onChange, className, primaryColor, ...props }) {
   return /* @__PURE__ */ jsx2(
     "input",
     {
@@ -691,39 +825,48 @@ function Input({ onChange, className, ...props }) {
       className: clsx(
         "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",
+        "focus:outline-none transition-colors",
+        !primaryColor && "focus:border-purple-500/60",
         className
-      )
+      ),
+      style: primaryColor ? { "--vx-focus": primaryColor } : void 0,
+      onFocus: (e) => {
+        if (primaryColor) e.currentTarget.style.borderColor = `${primaryColor}99`;
+        props.onFocus?.(e);
+      },
+      onBlur: (e) => {
+        if (primaryColor) e.currentTarget.style.borderColor = "";
+        props.onBlur?.(e);
+      }
     }
   );
 }
-function PrimaryButton({ children, loading, onClick }) {
+function PrimaryButton({ children, loading, onClick, primaryColor }) {
   return /* @__PURE__ */ jsx2(
     "button",
     {
       type: onClick ? "button" : "submit",
       onClick,
       disabled: loading,
+      style: primaryColor ? { background: primaryColor, boxShadow: `0 10px 15px -3px ${primaryColor}33` } : void 0,
       className: clsx(
         "w-full flex items-center justify-center gap-2 px-4 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",
-        "shadow-lg shadow-purple-500/20",
-        "transition-all duration-150",
-        "disabled:opacity-60 disabled:cursor-not-allowed"
+        "text-sm font-semibold text-white transition-all duration-150",
+        "disabled:opacity-60 disabled:cursor-not-allowed",
+        !primaryColor && "bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 shadow-lg shadow-purple-500/20"
       ),
       children: loading ? /* @__PURE__ */ jsx2(Spinner, {}) : children
     }
   );
 }
-function GhostButton({ children, onClick }) {
+function GhostButton({ children, onClick, mutedColor }) {
   return /* @__PURE__ */ jsx2(
     "button",
     {
       type: "button",
       onClick,
-      className: "w-full text-xs text-[#475569] hover:text-white/70 transition-colors py-1",
+      className: "w-full text-xs transition-colors py-1 hover:opacity-80",
+      style: { color: mutedColor ?? "#475569" },
       children
     }
   );
@@ -767,10 +910,10 @@ function GitHubButton({ onClick }) {
 function XButton({ onClick }) {
   return /* @__PURE__ */ jsx2(OAuthButton, { icon: /* @__PURE__ */ jsx2(XIcon, {}), label: "Continue with X", onClick });
 }
-function Divider() {
+function Divider({ mutedColor }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" }),
-    /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-[#475569] uppercase tracking-wider", children: "or" }),
+    /* @__PURE__ */ jsx2("span", { className: "text-[10px] uppercase tracking-wider", style: { color: mutedColor ?? "#475569" }, children: "or" }),
     /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" })
   ] });
 }
@@ -840,10 +983,16 @@ 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({ color = "#a78bfa" }) {
+  return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: color, 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";
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function resolveApiOrigin3(prop) {
   if (prop) return prop;
@@ -853,6 +1002,13 @@ function resolveApiOrigin3(prop) {
   }
   return "";
 }
+function resolvePk2() {
+  if (typeof document !== "undefined") {
+    const el = document.querySelector("[data-vaultix-pk]");
+    if (el) return el.getAttribute("data-vaultix-pk") ?? "";
+  }
+  return "";
+}
 function resolveAfterSignUpUrl(redirectUrlProp) {
   if (redirectUrlProp) return redirectUrlProp;
   if (typeof document !== "undefined") {
@@ -870,16 +1026,22 @@ function SignUp({
   onSuccess,
   onError,
   apiOrigin: apiOriginProp,
-  className
+  className,
+  appearance
 }) {
   const apiOrigin = resolveApiOrigin3(apiOriginProp);
-  const [step, setStep] = useState3("email");
-  const [email, setEmail] = useState3("");
-  const [password, setPassword] = useState3("");
-  const [verificationCode, setVerificationCode] = useState3("");
-  const [error, setError] = useState3(null);
-  const [loading, setLoading] = useState3(false);
-  const [registrationId, setRegistrationId] = useState3(null);
+  const vars = appearance?.variables ?? {};
+  const primaryColor = vars.colorPrimary;
+  const cardBg = vars.colorBackground ?? "rgba(22,27,45,0.92)";
+  const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
+  const mutedColor = vars.colorTextMuted ?? "#475569";
+  const [step, setStep] = useState4("email");
+  const [email, setEmail] = useState4("");
+  const [password, setPassword] = useState4("");
+  const [verificationCode, setVerificationCode] = useState4("");
+  const [error, setError] = useState4(null);
+  const [loading, setLoading] = useState4(false);
+  const [registrationId, setRegistrationId] = useState4(null);
   function setErr(msg) {
     setError(msg);
     onError?.(msg);
@@ -891,10 +1053,12 @@ function SignUp({
     url.searchParams.set("__vaultix_handshake", handshakeToken);
     window.location.href = url.toString();
   }
-  function handleGoogleSignUp() {
+  function oauthRedirect(provider) {
     const target = resolveAfterSignUpUrl(redirectUrl);
+    const pk = resolvePk2();
     const params = new URLSearchParams({ redirect_url: target });
-    window.location.href = `${apiOrigin}/api/v1/auth/oauth/google?${params}`;
+    if (pk) params.set("pk", pk);
+    window.location.href = `${apiOrigin}/api/v1/auth/oauth/${provider}?${params}`;
   }
   async function handleEmailPassword(e) {
     e.preventDefault();
@@ -965,48 +1129,61 @@ function SignUp({
         "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl backdrop-blur-[16px]",
         className
       ),
-      style: { background: "rgba(22,27,45,0.92)" },
+      style: { background: cardBg },
       children: [
         /* @__PURE__ */ jsxs2("div", { className: "px-8 pt-8 pb-6 text-center", children: [
-          /* @__PURE__ */ jsx3("div", { className: "inline-flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-600 to-teal-600 shadow-lg shadow-emerald-500/30 mb-4", children: /* @__PURE__ */ jsx3(SparkleIcon, {}) }),
-          /* @__PURE__ */ jsx3("h1", { className: "text-xl font-semibold text-white/90", children: step === "verify" ? "Check your email" : "Create an account" }),
-          /* @__PURE__ */ jsx3("p", { className: "text-sm text-[#475569] mt-1", children: step === "verify" ? `We sent a code to ${email}` : "Start your free trial today" })
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4",
+              style: primaryColor ? { background: primaryColor, boxShadow: `0 10px 15px -3px ${primaryColor}4d` } : { background: "linear-gradient(to bottom right, #059669, #0d9488)", boxShadow: "0 10px 15px -3px rgba(5,150,105,0.3)" },
+              children: /* @__PURE__ */ jsx3(SparkleIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx3("h1", { className: "text-xl font-semibold", style: { color: textColor }, children: step === "verify" ? "Check your email" : "Create an account" }),
+          /* @__PURE__ */ jsx3("p", { className: "text-sm mt-1", style: { color: mutedColor }, children: step === "verify" ? `We sent a code to ${email}` : "Start your free trial today" })
         ] }),
         /* @__PURE__ */ jsxs2("div", { className: "px-8 pb-8 space-y-4", children: [
           error && /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ jsx3("p", { className: "text-xs text-red-400", children: error }) }),
           step === "email" && /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsx3(GoogleButton2, { onClick: handleGoogleSignUp }),
-            /* @__PURE__ */ jsx3(Divider2, {}),
+            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(GoogleIcon2, {}), label: "Continue with Google", onClick: () => oauthRedirect("google") }),
+            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(GitHubIcon2, {}), label: "Continue with GitHub", onClick: () => oauthRedirect("github") }),
+            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(MetaIcon2, {}), label: "Continue with Facebook", onClick: () => oauthRedirect("meta") }),
+            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(LinkedInIcon2, {}), label: "Continue with LinkedIn", onClick: () => oauthRedirect("linkedin") }),
+            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(XIcon2, {}), label: "Continue with X", onClick: () => oauthRedirect("x") }),
+            /* @__PURE__ */ jsx3(Divider2, { mutedColor }),
             /* @__PURE__ */ jsxs2("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
               /* @__PURE__ */ jsx3(
-                SignUpInput,
+                Input2,
                 {
                   type: "email",
                   placeholder: "you@company.com",
                   value: email,
                   onChange: setEmail,
                   autoFocus: true,
-                  required: true
+                  required: true,
+                  primaryColor
                 }
               ),
               /* @__PURE__ */ jsx3(
-                SignUpInput,
+                Input2,
                 {
                   type: "password",
                   placeholder: "Create a password",
                   value: password,
                   onChange: setPassword,
                   required: true,
-                  minLength: 8
+                  minLength: 8,
+                  primaryColor
                 }
               ),
-              /* @__PURE__ */ jsx3(PasswordStrength2, { password }),
-              /* @__PURE__ */ jsx3(SignUpPrimaryButton, { loading, children: "Create account" })
+              /* @__PURE__ */ jsx3(PasswordStrength2, { password, primaryColor }),
+              /* @__PURE__ */ jsx3(PrimaryButton2, { loading, primaryColor, children: "Create account" })
             ] })
           ] }),
           step === "verify" && /* @__PURE__ */ jsxs2("form", { onSubmit: handleVerification, className: "space-y-3", children: [
             /* @__PURE__ */ jsx3(
-              SignUpInput,
+              Input2,
               {
                 type: "text",
                 inputMode: "numeric",
@@ -1017,16 +1194,18 @@ function SignUp({
                 onChange: setVerificationCode,
                 autoFocus: true,
                 required: true,
-                className: "text-center tracking-[0.4em] text-lg"
+                className: "text-center tracking-[0.4em] text-lg",
+                primaryColor
               }
             ),
-            /* @__PURE__ */ jsx3(SignUpPrimaryButton, { loading, children: "Verify email" }),
+            /* @__PURE__ */ jsx3(PrimaryButton2, { loading, primaryColor, children: "Verify email" }),
             /* @__PURE__ */ jsx3(
               "button",
               {
                 type: "button",
                 onClick: resendCode,
-                className: "w-full text-xs text-[#475569] hover:text-white/70 transition-colors py-1",
+                className: "w-full text-xs transition-colors py-1 hover:opacity-80",
+                style: { color: mutedColor },
                 children: "Resend code"
               }
             )
@@ -1036,7 +1215,7 @@ function SignUp({
     }
   );
 }
-function SignUpInput({ onChange, className, ...props }) {
+function Input2({ onChange, className, primaryColor, ...props }) {
   return /* @__PURE__ */ jsx3(
     "input",
     {
@@ -1045,34 +1224,47 @@ function SignUpInput({ onChange, className, ...props }) {
       className: clsx2(
         "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-emerald-500/60 transition-colors",
+        "focus:outline-none transition-colors",
+        !primaryColor && "focus:border-emerald-500/60",
         className
-      )
+      ),
+      onFocus: (e) => {
+        if (primaryColor) e.currentTarget.style.borderColor = `${primaryColor}99`;
+        props.onFocus?.(e);
+      },
+      onBlur: (e) => {
+        if (primaryColor) e.currentTarget.style.borderColor = "";
+        props.onBlur?.(e);
+      }
     }
   );
 }
-function SignUpPrimaryButton({
+function PrimaryButton2({
   children,
-  loading
+  loading,
+  primaryColor
 }) {
   return /* @__PURE__ */ jsx3(
     "button",
     {
       type: "submit",
       disabled: loading,
+      style: primaryColor ? { background: primaryColor, boxShadow: `0 10px 15px -3px ${primaryColor}33` } : void 0,
       className: clsx2(
         "w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl",
-        "text-sm font-semibold text-white",
-        "bg-gradient-to-r from-emerald-600 to-teal-600",
-        "hover:from-emerald-500 hover:to-teal-500",
-        "shadow-lg shadow-emerald-500/20 transition-all duration-150",
-        "disabled:opacity-60 disabled:cursor-not-allowed"
+        "text-sm font-semibold text-white transition-all duration-150",
+        "disabled:opacity-60 disabled:cursor-not-allowed",
+        !primaryColor && "bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 shadow-lg shadow-emerald-500/20"
       ),
       children: loading ? /* @__PURE__ */ jsx3(Spinner2, {}) : children
     }
   );
 }
-function GoogleButton2({ onClick }) {
+function OAuthButton2({
+  icon,
+  label,
+  onClick
+}) {
   return /* @__PURE__ */ jsxs2(
     "button",
     {
@@ -1086,20 +1278,20 @@ function GoogleButton2({ onClick }) {
         "transition-all duration-150"
       ),
       children: [
-        /* @__PURE__ */ jsx3(GoogleIcon2, {}),
-        "Continue with Google"
+        icon,
+        label
       ]
     }
   );
 }
-function Divider2() {
+function Divider2({ mutedColor }) {
   return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ jsx3("div", { className: "flex-1 h-px bg-white/8" }),
-    /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-[#475569] uppercase tracking-wider", children: "or" }),
+    /* @__PURE__ */ jsx3("span", { className: "text-[10px] uppercase tracking-wider", style: { color: mutedColor ?? "#475569" }, children: "or" }),
     /* @__PURE__ */ jsx3("div", { className: "flex-1 h-px bg-white/8" })
   ] });
 }
-function PasswordStrength2({ password }) {
+function PasswordStrength2({ password, primaryColor }) {
   const score = (() => {
     if (password.length === 0) return 0;
     let s = 0;
@@ -1111,15 +1303,17 @@ function PasswordStrength2({ password }) {
   })();
   if (password.length === 0) return null;
   const labels = ["", "Weak", "Fair", "Good", "Strong"];
-  const colors = ["", "bg-red-500", "bg-amber-400", "bg-blue-400", "bg-emerald-400"];
+  const tailwindColors = ["", "bg-red-500", "bg-amber-400", "bg-blue-400", "bg-emerald-400"];
   return /* @__PURE__ */ jsxs2("div", { className: "space-y-1", children: [
     /* @__PURE__ */ jsx3("div", { className: "flex gap-1", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx3(
       "div",
       {
         className: clsx2(
           "flex-1 h-0.5 rounded-full transition-all duration-300",
-          i <= score ? colors[score] : "bg-white/10"
-        )
+          i <= score && !primaryColor ? tailwindColors[score] : void 0,
+          i > score || !primaryColor && i <= score ? void 0 : void 0
+        ),
+        style: i <= score && primaryColor ? { background: score >= 4 ? primaryColor : void 0 } : { background: i <= score ? void 0 : "rgba(255,255,255,0.1)" }
       },
       i
     )) }),
@@ -1143,6 +1337,18 @@ function GoogleIcon2() {
     /* @__PURE__ */ jsx3("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
   ] });
 }
+function MetaIcon2() {
+  return /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#1877F2", children: /* @__PURE__ */ jsx3("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) });
+}
+function LinkedInIcon2() {
+  return /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#0A66C2", children: /* @__PURE__ */ jsx3("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) });
+}
+function GitHubIcon2() {
+  return /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ jsx3("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" }) });
+}
+function XIcon2() {
+  return /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ jsx3("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" }) });
+}
 
 // src/components/SignedIn.tsx
 import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
@@ -1158,10 +1364,10 @@ function SignedOut({ children }) {
 }
 
 // src/components/RedirectComponents.tsx
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 function RedirectToSignIn({ redirectUrl = "/sign-in" }) {
   const { isLoaded, isSignedIn } = useVaultixContext();
-  useEffect2(() => {
+  useEffect3(() => {
     if (isLoaded && !isSignedIn) {
       window.location.href = redirectUrl;
     }
@@ -1170,7 +1376,7 @@ function RedirectToSignIn({ redirectUrl = "/sign-in" }) {
 }
 function RedirectToSignUp({ redirectUrl = "/sign-up" }) {
   const { isLoaded, isSignedIn } = useVaultixContext();
-  useEffect2(() => {
+  useEffect3(() => {
     if (isLoaded && !isSignedIn) {
       window.location.href = redirectUrl;
     }
@@ -1180,22 +1386,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 useEffect4, useRef as useRef3, useState as useState5 } 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 [open, setOpen] = useState5(false);
+  const [signingOut, setSigningOut] = useState5(false);
+  const [showProfile, setShowProfile] = useState5(false);
   const containerRef = useRef3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     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 +1409,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] = useState5("profile");
+  const [firstName, setFirstName] = useState5(user?.firstName ?? "");
+  const [lastName, setLastName] = useState5(user?.lastName ?? "");
+  const [imageUrl, setImageUrl] = useState5(user?.imageUrl ?? "");
+  const [currentPassword, setCurrentPassword] = useState5("");
+  const [newPassword, setNewPassword] = useState5("");
+  const [confirmPassword, setConfirmPassword] = useState5("");
+  const [saving, setSaving] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [success, setSuccess] = useState5(null);
+  useEffect4(() => {
+    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] = useState5(null);
+  const [backupCodesLeft, setBackupCodesLeft] = useState5(null);
+  const [enrollStep, setEnrollStep] = useState5("idle");
+  const [qrDataUrl, setQrDataUrl] = useState5("");
+  const [manualKey, setManualKey] = useState5("");
+  const [enrollCode, setEnrollCode] = useState5("");
+  const [disableCode, setDisableCode] = useState5("");
+  const [backupCodes, setBackupCodes] = useState5([]);
+  const [loading, setLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [showDisable, setShowDisable] = useState5(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]);
+  useEffect4(() => {
+    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 +1869,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 +1896,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,10 +1903,16 @@ 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";
-import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState6 } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function resolveApiOrigin4() {
   if (typeof document !== "undefined") {
@@ -1370,11 +1926,11 @@ function OrganizationSwitcher({
   className
 }) {
   const { organization, isLoaded, isSignedIn } = useVaultixContext();
-  const [open, setOpen] = useState5(false);
-  const [orgs, setOrgs] = useState5([]);
-  const [switching, setSwitching] = useState5(null);
+  const [open, setOpen] = useState6(false);
+  const [orgs, setOrgs] = useState6([]);
+  const [switching, setSwitching] = useState6(null);
   const containerRef = useRef4(null);
-  useEffect4(() => {
+  useEffect5(() => {
     function onPointerDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
@@ -1383,7 +1939,7 @@ function OrganizationSwitcher({
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!open) return;
     const api = resolveApiOrigin4();
     fetch(`${api}/v1/me/organizations`, { credentials: "include" }).then((r) => r.json()).then(
@@ -1548,17 +2104,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 {
   }
 }
@@ -1576,6 +2134,7 @@ export {
   getStoredToken,
   useAuth,
   useOrganization,
+  usePlatformConnect,
   useSession,
   useUser,
   useVaultix