@vaultix.ai/react 0.1.0 → 0.2.1

package/dist/index.js

@@ -21,10 +21,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   OrganizationSwitcher: () => OrganizationSwitcher,
+  RedirectToSignIn: () => RedirectToSignIn,
+  RedirectToSignUp: () => RedirectToSignUp,
   SignIn: () => SignIn,
   SignUp: () => SignUp,
+  SignedIn: () => SignedIn,
+  SignedOut: () => SignedOut,
   UserButton: () => UserButton,
   VaultixProvider: () => VaultixProvider,
+  useAuth: () => useAuth,
   useOrganization: () => useOrganization,
   useSession: () => useSession,
   useUser: () => useUser,
@@ -55,6 +60,26 @@ function resolveApiOrigin(key, apiUrlProp) {
     throw new Error("Publishable key has an unreadable API origin payload.");
   }
 }
+var STORAGE_KEY = "vaultix_jwt";
+function storeJwt(jwt) {
+  try {
+    sessionStorage.setItem(STORAGE_KEY, jwt);
+  } catch {
+  }
+}
+function loadJwt() {
+  try {
+    return sessionStorage.getItem(STORAGE_KEY);
+  } catch {
+    return null;
+  }
+}
+function clearJwt() {
+  try {
+    sessionStorage.removeItem(STORAGE_KEY);
+  } catch {
+  }
+}
 var VaultixContext = (0, import_react.createContext)(null);
 function useVaultixContext() {
   const ctx = (0, import_react.useContext)(VaultixContext);
@@ -77,42 +102,89 @@ function VaultixProvider({
   const [user, setUser] = (0, import_react.useState)(null);
   const [session, setSession] = (0, import_react.useState)(null);
   const [organization, setOrganization] = (0, import_react.useState)(null);
+  const jwtRef = (0, import_react.useRef)(null);
   const refreshTimerRef = (0, import_react.useRef)(null);
+  const clearAuth = (0, import_react.useCallback)(() => {
+    jwtRef.current = null;
+    clearJwt();
+    setUser(null);
+    setSession(null);
+    setOrganization(null);
+  }, []);
   const scheduleRefresh = (0, import_react.useCallback)(
     (expiresAt) => {
       if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
-      const msUntilRefresh = expiresAt * 1e3 - Date.now() - 1e4;
+      const msUntilRefresh = expiresAt * 1e3 - Date.now() - 3e4;
       if (msUntilRefresh <= 0) return;
       refreshTimerRef.current = setTimeout(async () => {
         try {
-          const res = await fetch(`${apiOrigin}/v1/session/refresh`, {
+          const headers = {};
+          if (jwtRef.current) headers["Authorization"] = `Bearer ${jwtRef.current}`;
+          const res = await fetch(`${apiOrigin}/api/v1/session/refresh`, {
             method: "POST",
-            credentials: "include"
+            credentials: jwtRef.current ? "omit" : "include",
+            headers
           });
           if (!res.ok) {
-            setUser(null);
-            setSession(null);
-            setOrganization(null);
+            clearAuth();
             return;
           }
           const data = await res.json();
+          if (data.session_jwt) {
+            jwtRef.current = data.session_jwt;
+            storeJwt(data.session_jwt);
+          }
           setSession(data.session);
           scheduleRefresh(data.session.expiresAt);
         } catch {
         }
       }, msUntilRefresh);
     },
-    [apiOrigin]
+    [apiOrigin, clearAuth]
   );
   (0, import_react.useEffect)(() => {
     let cancelled = false;
     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);
+            }
+          } catch {
+          }
+        } else {
+          jwt = loadJwt();
+        }
+        jwtRef.current = jwt;
+      }
       try {
-        const res = await fetch(`${apiOrigin}/v1/me`, {
-          credentials: "include",
-          headers: { "X-Vaultix-Publishable-Key": publishableKey }
+        const headers = {
+          "X-Vaultix-Publishable-Key": publishableKey
+        };
+        if (jwt) headers["Authorization"] = `Bearer ${jwt}`;
+        const res = await fetch(`${apiOrigin}/api/v1/me`, {
+          // Use Bearer token for cross-domain; fall back to cookie for same-domain
+          credentials: jwt ? "omit" : "include",
+          headers
         });
         if (!res.ok) {
+          if (jwt) {
+            clearJwt();
+            jwtRef.current = null;
+          }
           if (!cancelled) setIsLoaded(true);
           return;
         }
@@ -135,19 +207,21 @@ function VaultixProvider({
     };
   }, [apiOrigin, publishableKey, scheduleRefresh]);
   const signOut = (0, import_react.useCallback)(async () => {
+    const jwt = jwtRef.current;
+    clearAuth();
+    if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
     try {
-      await fetch(`${apiOrigin}/v1/session`, {
+      const headers = {};
+      if (jwt) headers["Authorization"] = `Bearer ${jwt}`;
+      await fetch(`${apiOrigin}/api/v1/session`, {
         method: "DELETE",
-        credentials: "include"
+        credentials: jwt ? "omit" : "include",
+        headers
       });
     } catch {
-    } finally {
-      setUser(null);
-      setSession(null);
-      setOrganization(null);
-      if (afterSignInUrl) window.location.href = afterSignInUrl;
     }
-  }, [apiOrigin, afterSignInUrl]);
+    if (afterSignInUrl) window.location.href = afterSignInUrl;
+  }, [apiOrigin, afterSignInUrl, clearAuth]);
   const value = {
     user,
     session,
@@ -169,6 +243,7 @@ function VaultixProvider({
 }
 
 // src/hooks/index.ts
+var import_react2 = require("react");
 function useVaultix() {
   return useVaultixContext();
 }
@@ -184,10 +259,26 @@ function useOrganization() {
   const { organization, isLoaded } = useVaultixContext();
   return { organization, isLoaded };
 }
+function useAuth() {
+  const { user, session, isLoaded, isSignedIn, signOut } = useVaultixContext();
+  const getToken = (0, import_react2.useCallback)(async () => {
+    if (!isSignedIn) return null;
+    return null;
+  }, [isSignedIn]);
+  return {
+    isLoaded,
+    isSignedIn,
+    userId: user?.id ?? null,
+    sessionId: session?.id ?? null,
+    orgId: session?.orgId ?? null,
+    signOut,
+    getToken
+  };
+}
 
 // src/components/SignIn.tsx
 var import_clsx = require("clsx");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function toBase64url(buf) {
   return btoa(String.fromCharCode(...new Uint8Array(buf))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
@@ -200,6 +291,18 @@ function resolveApiOrigin2(prop) {
   }
   return "";
 }
+function resolveAfterSignInUrl(redirectUrlProp) {
+  if (redirectUrlProp) return redirectUrlProp;
+  if (typeof document !== "undefined") {
+    const el = document.querySelector("[data-vaultix-after-sign-in]");
+    const attr = el?.getAttribute("data-vaultix-after-sign-in");
+    if (attr) return attr;
+    const params = new URLSearchParams(window.location.search);
+    const redirectUrl = params.get("redirect_url");
+    if (redirectUrl) return redirectUrl;
+  }
+  return "/";
+}
 function SignIn({
   redirectUrl,
   onSuccess,
@@ -208,17 +311,32 @@ function SignIn({
   className
 }) {
   const apiOrigin = resolveApiOrigin2(apiOriginProp);
-  const [step, setStep] = (0, import_react2.useState)("email");
-  const [email, setEmail] = (0, import_react2.useState)("");
-  const [password, setPassword] = (0, import_react2.useState)("");
-  const [totp, setTotp] = (0, import_react2.useState)("");
-  const [error, setError] = (0, import_react2.useState)(null);
-  const [loading, setLoading] = (0, import_react2.useState)(false);
-  const challengeIdRef = (0, import_react2.useRef)(null);
+  const [step, setStep] = (0, import_react3.useState)("email");
+  const [email, setEmail] = (0, import_react3.useState)("");
+  const [password, setPassword] = (0, import_react3.useState)("");
+  const [totp, setTotp] = (0, import_react3.useState)("");
+  const [forgotCode, setForgotCode] = (0, import_react3.useState)("");
+  const [newPassword, setNewPassword] = (0, import_react3.useState)("");
+  const [error, setError] = (0, import_react3.useState)(null);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [info, setInfo] = (0, import_react3.useState)(null);
+  const challengeIdRef = (0, import_react3.useRef)(null);
   function setErr(msg) {
     setError(msg);
     onError?.(msg);
   }
+  function handleSuccess(handshakeToken) {
+    onSuccess?.(handshakeToken);
+    const target = resolveAfterSignInUrl(redirectUrl);
+    const url = new URL(target, window.location.origin);
+    url.searchParams.set("__vaultix_handshake", handshakeToken);
+    window.location.href = url.toString();
+  }
+  function handleGoogleSignIn() {
+    const target = resolveAfterSignInUrl(redirectUrl);
+    const params = new URLSearchParams({ redirect_url: target });
+    window.location.href = `${apiOrigin}/v1/auth/oauth/google?${params}`;
+  }
   async function handleEmailSubmit(e) {
     e.preventDefault();
     setError(null);
@@ -263,7 +381,7 @@ function SignIn({
         setStep("totp");
         return;
       }
-      handleSuccess(data.session_id);
+      handleSuccess(data.handshake_token);
     } catch {
       setErr("Network error. Please try again.");
     } finally {
@@ -319,7 +437,7 @@ function SignIn({
         setErr(verifyData.error ?? "Passkey verification failed.");
         return;
       }
-      handleSuccess(verifyData.session_id);
+      handleSuccess(verifyData.handshake_token);
     } catch (err) {
       if (err instanceof Error && err.name === "NotAllowedError") {
         setErr("Passkey was cancelled or timed out.");
@@ -339,28 +457,86 @@ function SignIn({
         method: "POST",
         credentials: "include",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          challenge_id: challengeIdRef.current,
-          code: totp
-        })
+        body: JSON.stringify({ challenge_id: challengeIdRef.current, code: totp })
       });
       const data = await res.json();
       if (!res.ok) {
         setErr(data.error ?? "Invalid code.");
         return;
       }
-      handleSuccess(data.session_id);
+      handleSuccess(data.handshake_token);
     } catch {
       setErr("Network error. Please try again.");
     } finally {
       setLoading(false);
     }
   }
-  function handleSuccess(sessionId) {
-    onSuccess?.(sessionId);
-    const target = redirectUrl ?? document.querySelector("[data-vaultix-after-sign-in]")?.getAttribute("data-vaultix-after-sign-in") ?? "/";
-    if (target) window.location.href = target;
+  async function handleForgotSubmit(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      await fetch(`${apiOrigin}/v1/auth/forgot-password`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email })
+      });
+      setInfo("Check your email for a reset code.");
+      setStep("forgot-verify");
+    } catch {
+      setErr("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handleForgotVerifySubmit(e) {
+    e.preventDefault();
+    setError(null);
+    setInfo(null);
+    setStep("forgot-reset");
+  }
+  async function handleResetPasswordSubmit(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiOrigin}/v1/auth/reset-password`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, code: forgotCode, new_password: newPassword })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setErr(data.error ?? "Could not reset password.");
+        return;
+      }
+      handleSuccess(data.handshake_token);
+    } catch {
+      setErr("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
   }
+  const title = {
+    email: "Sign in",
+    password: "Enter password",
+    passkey: "Passkey sign-in",
+    totp: "Two-factor code",
+    forgot: "Forgot password",
+    "forgot-verify": "Enter reset code",
+    "forgot-reset": "New password"
+  };
+  const subtitle = {
+    email: "Welcome back",
+    password: email,
+    passkey: email,
+    totp: "Enter the 6-digit code from your authenticator app",
+    forgot: "We'll send a reset code to your email",
+    "forgot-verify": `Code sent to ${email}`,
+    "forgot-reset": "Choose a new password"
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
@@ -373,34 +549,29 @@ function SignIn({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(LockIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h1", { className: "text-xl font-semibold text-white/90", children: [
-            step === "email" && "Sign in",
-            step === "password" && "Enter password",
-            step === "passkey" && "Passkey sign-in",
-            step === "totp" && "Two-factor code"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-sm text-[#475569] mt-1", children: [
-            step === "email" && "Welcome back",
-            step === "password" && email,
-            step === "passkey" && email,
-            step === "totp" && "Enter the 6-digit code from your authenticator app"
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "text-xl font-semibold text-white/90", children: title[step] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-[#475569] mt-1", children: subtitle[step] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-8 pb-8 space-y-4", children: [
           error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-red-400", children: error }) }),
-          step === "email" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              Input,
-              {
-                type: "email",
-                placeholder: "you@company.com",
-                value: email,
-                onChange: setEmail,
-                autoFocus: true,
-                required: true
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Continue" })
+          info && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-lg bg-blue-500/10 border border-blue-500/30 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-blue-400", children: info }) }),
+          step === "email" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GoogleButton, { onClick: handleGoogleSignIn }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Divider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                Input,
+                {
+                  type: "email",
+                  placeholder: "you@company.com",
+                  value: email,
+                  onChange: setEmail,
+                  autoFocus: true,
+                  required: true
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Continue" })
+            ] })
           ] }),
           step === "password" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handlePasswordSubmit, className: "space-y-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -415,6 +586,10 @@ function SignIn({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Sign in" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => {
+              setStep("forgot");
+              setError(null);
+            }, children: "Forgot password?" }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => setStep("email"), children: "\u2190 Back" })
           ] }),
           step === "passkey" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-3", children: [
@@ -443,6 +618,58 @@ function SignIn({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Verify" }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => setStep("password"), children: "\u2190 Back" })
+          ] }),
+          step === "forgot" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleForgotSubmit, className: "space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              Input,
+              {
+                type: "email",
+                placeholder: "you@company.com",
+                value: email,
+                onChange: setEmail,
+                autoFocus: true,
+                required: true
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Send reset code" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => {
+              setStep("password");
+              setError(null);
+            }, children: "\u2190 Back" })
+          ] }),
+          step === "forgot-verify" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleForgotVerifySubmit, className: "space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              Input,
+              {
+                type: "text",
+                inputMode: "numeric",
+                pattern: "[0-9]{6}",
+                maxLength: 6,
+                placeholder: "000000",
+                value: forgotCode,
+                onChange: setForgotCode,
+                autoFocus: true,
+                required: true,
+                className: "text-center tracking-[0.4em] text-lg"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Continue" })
+          ] }),
+          step === "forgot-reset" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleResetPasswordSubmit, className: "space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              Input,
+              {
+                type: "password",
+                placeholder: "New password",
+                value: newPassword,
+                onChange: setNewPassword,
+                autoFocus: true,
+                required: true,
+                minLength: 8
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PasswordStrength, { password: newPassword }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, children: "Reset password" })
           ] })
         ] })
       ]
@@ -495,28 +722,63 @@ function GhostButton({ children, onClick }) {
     }
   );
 }
-function Spinner() {
+function GoogleButton({ onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "svg",
+    "button",
     {
-      className: "animate-spin h-4 w-4 text-white/80",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
+      type: "button",
+      onClick,
+      className: (0, import_clsx.clsx)(
+        "w-full flex items-center justify-center gap-3 px-4 py-2.5 rounded-xl",
+        "text-sm font-medium text-white/80",
+        "bg-white/5 border border-white/10",
+        "hover:bg-white/10 hover:border-white/20",
+        "transition-all duration-150"
+      ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "path",
-          {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GoogleIcon, {}),
+        "Continue with Google"
       ]
     }
   );
 }
+function Divider() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px] text-[#475569] uppercase tracking-wider", children: "or" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" })
+  ] });
+}
+function PasswordStrength({ password }) {
+  const score = (() => {
+    if (password.length === 0) return 0;
+    let s = 0;
+    if (password.length >= 8) s++;
+    if (/[A-Z]/.test(password)) s++;
+    if (/[0-9]/.test(password)) s++;
+    if (/[^A-Za-z0-9]/.test(password)) s++;
+    return s;
+  })();
+  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"];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex gap-1", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: (0, import_clsx.clsx)("flex-1 h-0.5 rounded-full transition-all duration-300", i <= score ? colors[score] : "bg-white/10")
+      },
+      i
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-[10px] text-[#475569]", children: labels[score] })
+  ] });
+}
+function Spinner() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { className: "animate-spin h-4 w-4 text-white/80", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  ] });
+}
 function LockIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
@@ -533,10 +795,18 @@ function FingerprintIcon() {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 12v.01" })
   ] });
 }
+function GoogleIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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" })
+  ] });
+}
 
 // src/components/SignUp.tsx
 var import_clsx2 = require("clsx");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function resolveApiOrigin3(prop) {
   if (prop) return prop;
@@ -546,6 +816,18 @@ function resolveApiOrigin3(prop) {
   }
   return "";
 }
+function resolveAfterSignUpUrl(redirectUrlProp) {
+  if (redirectUrlProp) return redirectUrlProp;
+  if (typeof document !== "undefined") {
+    const el = document.querySelector("[data-vaultix-after-sign-up]");
+    const attr = el?.getAttribute("data-vaultix-after-sign-up");
+    if (attr) return attr;
+    const params = new URLSearchParams(window.location.search);
+    const redirectUrl = params.get("redirect_url");
+    if (redirectUrl) return redirectUrl;
+  }
+  return "/";
+}
 function SignUp({
   redirectUrl,
   onSuccess,
@@ -554,17 +836,29 @@ function SignUp({
   className
 }) {
   const apiOrigin = resolveApiOrigin3(apiOriginProp);
-  const [step, setStep] = (0, import_react3.useState)("email");
-  const [email, setEmail] = (0, import_react3.useState)("");
-  const [password, setPassword] = (0, import_react3.useState)("");
-  const [verificationCode, setVerificationCode] = (0, import_react3.useState)("");
-  const [error, setError] = (0, import_react3.useState)(null);
-  const [loading, setLoading] = (0, import_react3.useState)(false);
-  const [registrationId, setRegistrationId] = (0, import_react3.useState)(null);
+  const [step, setStep] = (0, import_react4.useState)("email");
+  const [email, setEmail] = (0, import_react4.useState)("");
+  const [password, setPassword] = (0, import_react4.useState)("");
+  const [verificationCode, setVerificationCode] = (0, import_react4.useState)("");
+  const [error, setError] = (0, import_react4.useState)(null);
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [registrationId, setRegistrationId] = (0, import_react4.useState)(null);
   function setErr(msg) {
     setError(msg);
     onError?.(msg);
   }
+  function handleSuccess(handshakeToken) {
+    onSuccess?.(handshakeToken);
+    const target = resolveAfterSignUpUrl(redirectUrl);
+    const url = new URL(target, window.location.origin);
+    url.searchParams.set("__vaultix_handshake", handshakeToken);
+    window.location.href = url.toString();
+  }
+  function handleGoogleSignUp() {
+    const target = resolveAfterSignUpUrl(redirectUrl);
+    const params = new URLSearchParams({ redirect_url: target });
+    window.location.href = `${apiOrigin}/v1/auth/oauth/google?${params}`;
+  }
   async function handleEmailPassword(e) {
     e.preventDefault();
     setError(null);
@@ -608,9 +902,7 @@ function SignUp({
         setErr(data.error ?? "Invalid code.");
         return;
       }
-      onSuccess?.(data.session_id);
-      const target = redirectUrl ?? document.querySelector("[data-vaultix-after-sign-up]")?.getAttribute("data-vaultix-after-sign-up") ?? "/";
-      if (target) window.location.href = target;
+      handleSuccess(data.handshake_token);
     } catch {
       setErr("Network error. Please try again.");
     } finally {
@@ -645,31 +937,35 @@ function SignUp({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-8 pb-8 space-y-4", children: [
           error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-red-400", children: error }) }),
-          (step === "email" || step === "password") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              SignUpInput,
-              {
-                type: "email",
-                placeholder: "you@company.com",
-                value: email,
-                onChange: setEmail,
-                autoFocus: true,
-                required: true
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              SignUpInput,
-              {
-                type: "password",
-                placeholder: "Create a password",
-                value: password,
-                onChange: setPassword,
-                required: true,
-                minLength: 8
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PasswordStrength, { password }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SignUpPrimaryButton, { loading, children: "Create account" })
+          step === "email" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GoogleButton2, { onClick: handleGoogleSignUp }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Divider2, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                SignUpInput,
+                {
+                  type: "email",
+                  placeholder: "you@company.com",
+                  value: email,
+                  onChange: setEmail,
+                  autoFocus: true,
+                  required: true
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                SignUpInput,
+                {
+                  type: "password",
+                  placeholder: "Create a password",
+                  value: password,
+                  onChange: setPassword,
+                  required: true,
+                  minLength: 8
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PasswordStrength2, { password }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SignUpPrimaryButton, { loading, children: "Create account" })
+            ] })
           ] }),
           step === "verify" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleVerification, className: "space-y-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -739,7 +1035,34 @@ function SignUpPrimaryButton({
     }
   );
 }
-function PasswordStrength({ password }) {
+function GoogleButton2({ onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: (0, import_clsx2.clsx)(
+        "w-full flex items-center justify-center gap-3 px-4 py-2.5 rounded-xl",
+        "text-sm font-medium text-white/80",
+        "bg-white/5 border border-white/10",
+        "hover:bg-white/10 hover:border-white/20",
+        "transition-all duration-150"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GoogleIcon2, {}),
+        "Continue with Google"
+      ]
+    }
+  );
+}
+function Divider2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1 h-px bg-white/8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[10px] text-[#475569] uppercase tracking-wider", children: "or" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1 h-px bg-white/8" })
+  ] });
+}
+function PasswordStrength2({ password }) {
   const score = (() => {
     if (password.length === 0) return 0;
     let s = 0;
@@ -751,13 +1074,7 @@ function PasswordStrength({ 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 colors = ["", "bg-red-500", "bg-amber-400", "bg-blue-400", "bg-emerald-400"];
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex gap-1", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
@@ -773,45 +1090,71 @@ function PasswordStrength({ password }) {
   ] });
 }
 function Spinner2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "svg",
-    {
-      className: "animate-spin h-4 w-4 text-white/80",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "path",
-          {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { className: "animate-spin h-4 w-4 text-white/80", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  ] });
 }
 function SparkleIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) });
 }
+function GoogleIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z", fill: "#4285F4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z", fill: "#FBBC05" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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" })
+  ] });
+}
+
+// src/components/SignedIn.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SignedIn({ children }) {
+  const { isLoaded, isSignedIn } = useVaultixContext();
+  if (!isLoaded || !isSignedIn) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+}
+function SignedOut({ children }) {
+  const { isLoaded, isSignedIn } = useVaultixContext();
+  if (!isLoaded || isSignedIn) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+}
+
+// src/components/RedirectComponents.tsx
+var import_react5 = require("react");
+function RedirectToSignIn({ redirectUrl = "/sign-in" }) {
+  const { isLoaded, isSignedIn } = useVaultixContext();
+  (0, import_react5.useEffect)(() => {
+    if (isLoaded && !isSignedIn) {
+      window.location.href = redirectUrl;
+    }
+  }, [isLoaded, isSignedIn, redirectUrl]);
+  return null;
+}
+function RedirectToSignUp({ redirectUrl = "/sign-up" }) {
+  const { isLoaded, isSignedIn } = useVaultixContext();
+  (0, import_react5.useEffect)(() => {
+    if (isLoaded && !isSignedIn) {
+      window.location.href = redirectUrl;
+    }
+  }, [isLoaded, isSignedIn, redirectUrl]);
+  return null;
+}
 
 // src/components/UserButton.tsx
 var import_clsx3 = require("clsx");
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function UserButton({
   showName = false,
   afterSignOutUrl,
   className
 }) {
   const { user, session, isLoaded, isSignedIn, signOut } = useVaultixContext();
-  const [open, setOpen] = (0, import_react4.useState)(false);
-  const [signingOut, setSigningOut] = (0, import_react4.useState)(false);
-  const containerRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [signingOut, setSigningOut] = (0, import_react6.useState)(false);
+  const containerRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     function onPointerDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
@@ -820,7 +1163,7 @@ function UserButton({
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, []);
-  if (!isLoaded) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AvatarSkeleton, {});
+  if (!isLoaded) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AvatarSkeleton, {});
   if (!isSignedIn || !user) return null;
   const initials = [user.firstName, user.lastName].filter(Boolean).map((s) => s.charAt(0)).join("").toUpperCase() || user.email.charAt(0).toUpperCase();
   async function handleSignOut() {
@@ -828,19 +1171,19 @@ function UserButton({
     await signOut();
     if (afterSignOutUrl) window.location.href = afterSignOutUrl;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: containerRef, className: (0, import_clsx3.clsx)("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: containerRef, className: (0, import_clsx3.clsx)("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "button",
       {
         onClick: () => setOpen((o) => !o),
         className: "flex items-center gap-2 rounded-xl p-1 hover:bg-white/8 transition-colors",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Avatar, { initials, imageUrl: user.imageUrl }),
-          showName && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm font-medium text-white/90 pr-1", children: user.firstName ?? user.email })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { initials, imageUrl: user.imageUrl }),
+          showName && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm font-medium text-white/90 pr-1", children: user.firstName ?? user.email })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         className: (0, import_clsx3.clsx)(
@@ -849,40 +1192,40 @@ function UserButton({
         ),
         style: { background: "rgba(22,27,45,0.96)" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-white/8", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Avatar, { initials, imageUrl: user.imageUrl, size: "lg" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex-1 min-w-0", children: [
-              (user.firstName || user.lastName) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm font-semibold text-white/90 truncate", children: [user.firstName, user.lastName].filter(Boolean).join(" ") }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-xs text-[#475569] truncate", children: user.email })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-white/8", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Avatar, { initials, imageUrl: user.imageUrl, size: "lg" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 min-w-0", children: [
+              (user.firstName || user.lastName) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm font-semibold text-white/90 truncate", children: [user.firstName, user.lastName].filter(Boolean).join(" ") }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-[#475569] truncate", children: user.email })
             ] })
           ] }),
-          session && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-4 py-2 border-b border-white/8", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: "Risk level" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RiskBadge, { level: session.riskLevel })
+          session && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-4 py-2 border-b border-white/8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: "Risk level" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RiskBadge, { level: session.riskLevel })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "p-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               DropdownItem,
               {
                 label: "Manage account",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UserIcon, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UserIcon, {}),
                 onClick: () => setOpen(false)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               DropdownItem,
               {
                 label: "Security settings",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShieldIcon, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShieldIcon, {}),
                 onClick: () => setOpen(false)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-px bg-white/8 my-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-px bg-white/8 my-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               DropdownItem,
               {
                 label: signingOut ? "Signing out\u2026" : "Sign out",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SignOutIcon, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SignOutIcon, {}),
                 onClick: handleSignOut,
                 destructive: true
               }
@@ -898,7 +1241,7 @@ function Avatar({ initials, imageUrl, size = "sm" }) {
   if (imageUrl) {
     return (
       // eslint-disable-next-line @next/next/no-img-element
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "img",
         {
           src: imageUrl,
@@ -908,7 +1251,7 @@ function Avatar({ initials, imageUrl, size = "sm" }) {
       )
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       className: (0, import_clsx3.clsx)(
@@ -921,7 +1264,7 @@ function Avatar({ initials, imageUrl, size = "sm" }) {
   );
 }
 function AvatarSkeleton() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-8 h-8 rounded-full bg-white/5 animate-pulse" });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-8 h-8 rounded-full bg-white/5 animate-pulse" });
 }
 function RiskBadge({ level }) {
   const styles = {
@@ -930,7 +1273,7 @@ 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__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "span",
     {
       className: (0, import_clsx3.clsx)(
@@ -942,7 +1285,7 @@ function RiskBadge({ level }) {
   );
 }
 function DropdownItem({ label, icon, onClick, destructive }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "button",
     {
       onClick,
@@ -951,33 +1294,33 @@ function DropdownItem({ label, icon, onClick, destructive }) {
         destructive ? "text-red-400 hover:bg-red-500/10" : "text-white/70 hover:text-white hover:bg-white/8"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "opacity-70", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "opacity-70", children: icon }),
         label
       ]
     }
   );
 }
 function UserIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "7", r: "4" })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "7", r: "4" })
   ] });
 }
 function ShieldIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
 }
 function SignOutIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "16 17 21 12 16 7" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "16 17 21 12 16 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
   ] });
 }
 
 // src/components/OrganizationSwitcher.tsx
 var import_clsx4 = require("clsx");
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function resolveApiOrigin4() {
   if (typeof document !== "undefined") {
     const el = document.querySelector("[data-vaultix-api]");
@@ -990,11 +1333,11 @@ function OrganizationSwitcher({
   className
 }) {
   const { organization, isLoaded, isSignedIn } = useVaultixContext();
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [orgs, setOrgs] = (0, import_react5.useState)([]);
-  const [switching, setSwitching] = (0, import_react5.useState)(null);
-  const containerRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const [orgs, setOrgs] = (0, import_react7.useState)([]);
+  const [switching, setSwitching] = (0, import_react7.useState)(null);
+  const containerRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
     function onPointerDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
@@ -1003,7 +1346,7 @@ function OrganizationSwitcher({
     document.addEventListener("pointerdown", onPointerDown);
     return () => document.removeEventListener("pointerdown", onPointerDown);
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!open) return;
     const api = resolveApiOrigin4();
     fetch(`${api}/v1/me/organizations`, { credentials: "include" }).then((r) => r.json()).then(
@@ -1037,8 +1380,8 @@ function OrganizationSwitcher({
   }
   const displayName = organization?.name ?? "Personal";
   const initials = displayName.split(/\s+/).slice(0, 2).map((w) => w[0]).join("").toUpperCase();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: containerRef, className: (0, import_clsx4.clsx)("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: containerRef, className: (0, import_clsx4.clsx)("relative", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "button",
       {
         onClick: () => setOpen((o) => !o),
@@ -1048,16 +1391,16 @@ function OrganizationSwitcher({
           "transition-all duration-150"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OrgAvatar, { initials }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-left min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm font-semibold text-white/90 truncate max-w-[120px]", children: displayName }),
-            organization && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[10px] text-[#475569] capitalize", children: organization.role })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(OrgAvatar, { initials }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-left min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm font-semibold text-white/90 truncate max-w-[120px]", children: displayName }),
+            organization && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-[10px] text-[#475569] capitalize", children: organization.role })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronIcon, {})
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronIcon, {})
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
         className: (0, import_clsx4.clsx)(
@@ -1066,13 +1409,13 @@ function OrganizationSwitcher({
         ),
         style: { background: "rgba(22,27,45,0.96)" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-4 py-3 border-b border-white/8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: "Switch organization" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-2 max-h-56 overflow-y-auto", children: [
-            orgs.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-[#475569] text-center py-4", children: "Loading\u2026" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-4 py-3 border-b border-white/8", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-[10px] uppercase tracking-widest text-[#475569]", children: "Switch organization" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "p-2 max-h-56 overflow-y-auto", children: [
+            orgs.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-[#475569] text-center py-4", children: "Loading\u2026" }),
             orgs.map((org) => {
               const isActive = org.id === organization?.id;
               const orgInitials = org.name.split(/\s+/).slice(0, 2).map((w) => w[0]).join("").toUpperCase();
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "button",
                 {
                   onClick: () => !isActive && switchOrg(org.id),
@@ -1082,9 +1425,9 @@ function OrganizationSwitcher({
                     isActive ? "bg-purple-500/10 cursor-default" : "hover:bg-white/8 cursor-pointer"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OrgAvatar, { initials: orgInitials, active: isActive }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(OrgAvatar, { initials: orgInitials, active: isActive }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         "p",
                         {
                           className: (0, import_clsx4.clsx)(
@@ -1094,17 +1437,17 @@ function OrganizationSwitcher({
                           children: org.name
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[10px] text-[#475569] capitalize", children: org.role })
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-[10px] text-[#475569] capitalize", children: org.role })
                     ] }),
-                    isActive && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-purple-400 shrink-0" }),
-                    switching === org.id && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MiniSpinner, {})
+                    isActive && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-purple-400 shrink-0" }),
+                    switching === org.id && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MiniSpinner, {})
                   ]
                 },
                 org.id
               );
             })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-2 border-t border-white/8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "p-2 border-t border-white/8", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "button",
             {
               onClick: () => {
@@ -1112,7 +1455,7 @@ function OrganizationSwitcher({
               },
               className: "w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm text-[#475569] hover:text-white hover:bg-white/8 transition-colors",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PlusIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon, {}),
                 "Create organization"
               ]
             }
@@ -1126,7 +1469,7 @@ function OrgAvatar({
   initials,
   active = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       className: (0, import_clsx4.clsx)(
@@ -1138,7 +1481,7 @@ function OrgAvatar({
   );
 }
 function ChevronIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "svg",
     {
       width: "12",
@@ -1150,29 +1493,34 @@ function ChevronIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       className: "text-[#475569] shrink-0",
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "6 9 12 15 18 9" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "6 9 12 15 18 9" })
     }
   );
 }
 function PlusIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   ] });
 }
 function MiniSpinner() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { className: "animate-spin h-3 w-3 text-[#475569]", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { className: "animate-spin h-3 w-3 text-[#475569]", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   OrganizationSwitcher,
+  RedirectToSignIn,
+  RedirectToSignUp,
   SignIn,
   SignUp,
+  SignedIn,
+  SignedOut,
   UserButton,
   VaultixProvider,
+  useAuth,
   useOrganization,
   useSession,
   useUser,