@authon/react 0.3.1 → 0.7.15

package/dist/index.cjs

@@ -60,32 +60,35 @@ function AuthonProvider({ publishableKey, children, config }) {
   const [activeOrganization, setActiveOrganization] = (0, import_react.useState)(null);
   const clientRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
+    let active = true;
+    let receivedSessionChange = false;
     const client = new import_js.Authon(publishableKey, config);
+    const sessionClient = client;
     clientRef.current = client;
-    client.on("signedIn", (u) => {
-      setUser(u);
+    const unsubscribeSession = sessionClient.onSessionChange((change) => {
+      if (!active) return;
+      receivedSessionChange = true;
+      setUser(change.user);
       setIsLoading(false);
-    });
-    client.on("signedOut", () => {
-      setUser(null);
+      if (!change.user) setActiveOrganization(null);
     });
     client.on("error", () => {
       setIsLoading(false);
     });
-    const existingUser = client.getUser();
-    if (existingUser) {
-      setUser(existingUser);
-    }
-    setIsLoading(false);
+    void sessionClient.waitUntilReady().then(() => {
+      if (!active) return;
+      if (!receivedSessionChange) setUser(client.getUser());
+      setIsLoading(false);
+    });
     return () => {
+      active = false;
+      unsubscribeSession();
       client.destroy();
       clientRef.current = null;
     };
   }, [publishableKey]);
   const signOut = (0, import_react.useCallback)(async () => {
     await clientRef.current?.signOut();
-    setUser(null);
-    setActiveOrganization(null);
   }, []);
   const openSignIn = (0, import_react.useCallback)(async () => {
     await clientRef.current?.openSignIn();
@@ -131,7 +134,7 @@ function useUser() {
 }
 
 // src/components/SignIn.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_shared3 = require("@authon/shared");
 var import_js2 = require("@authon/js");
 
@@ -249,8 +252,10 @@ function Input({
   ...rest
 }) {
   const theme = useTheme();
+  const generatedId = (0, import_react5.useId)();
   const [focused, setFocused] = (0, import_react5.useState)(false);
   const resolvedStyle = inputStyle ?? theme.inputStyle;
+  const inputId = rest.id ?? generatedId;
   const wrapperStyle = {
     display: "flex",
     flexDirection: "column",
@@ -307,12 +312,13 @@ function Input({
     color: error ? "#ef4444" : theme.textMuted
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: wrapperStyle, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: labelStyle, children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: inputId, style: labelStyle, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: inputContainerStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "input",
         {
           ...rest,
+          id: inputId,
           style: { ...baseInputStyle, ...inputVariantStyle },
           onFocus: (e) => {
             setFocused(true);
@@ -460,19 +466,212 @@ function Divider({ label = "Or continue with" }) {
   ] });
 }
 
-// src/components/SignIn.tsx
+// src/components/shared/AuthChallengeForms.tsx
+var import_react7 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
+function errorMessage(error, fallback) {
+  return error instanceof Error && error.message ? error.message : fallback;
+}
+function CodeForm({
+  title,
+  description,
+  label,
+  submitLabel,
+  backLabel,
+  onSubmit,
+  onBack,
+  onResend
+}) {
+  const theme = useTheme();
+  const [code, setCode] = (0, import_react7.useState)("");
+  const [error, setError] = (0, import_react7.useState)("");
+  const [status, setStatus] = (0, import_react7.useState)("");
+  const [loading, setLoading] = (0, import_react7.useState)(false);
+  const [resending, setResending] = (0, import_react7.useState)(false);
+  const errorId = (0, import_react7.useId)();
+  const submitPending = (0, import_react7.useRef)(false);
+  const resendPending = (0, import_react7.useRef)(false);
+  const handleSubmit = async () => {
+    if (submitPending.current) return;
+    if (!code.trim()) {
+      setError(`${label} is required`);
+      return;
+    }
+    submitPending.current = true;
+    setLoading(true);
+    setError("");
+    setStatus("");
+    try {
+      await onSubmit(code.trim());
+    } catch (submitError) {
+      setError(errorMessage(submitError, "Verification failed"));
+    } finally {
+      submitPending.current = false;
+      setLoading(false);
+    }
+  };
+  const handleResend = async () => {
+    if (!onResend || resendPending.current) return;
+    resendPending.current = true;
+    setResending(true);
+    setError("");
+    setStatus("");
+    try {
+      await onResend();
+      setStatus("Verification code sent");
+    } catch (resendError) {
+      setError(errorMessage(resendError, "Could not resend verification code"));
+    } finally {
+      resendPending.current = false;
+      setResending(false);
+    }
+  };
+  const titleStyle = {
+    margin: 0,
+    fontSize: 24,
+    fontWeight: 700,
+    color: theme.text,
+    textAlign: "center",
+    letterSpacing: "-0.3px"
+  };
+  const descriptionStyle = {
+    margin: "-8px 0 0",
+    fontSize: 14,
+    lineHeight: 1.5,
+    color: theme.textMuted,
+    textAlign: "center"
+  };
+  const errorStyle = {
+    padding: "10px 14px",
+    borderRadius: theme.borderRadius,
+    background: "#fef2f2",
+    border: "1px solid #fecaca",
+    color: "#dc2626",
+    fontSize: 13
+  };
+  const statusStyle = {
+    padding: "10px 14px",
+    borderRadius: theme.borderRadius,
+    background: "#f0fdf4",
+    border: "1px solid #bbf7d0",
+    color: "#15803d",
+    fontSize: 13
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { style: titleStyle, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: descriptionStyle, children: description }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: errorId, role: "alert", style: errorStyle, children: error }),
+    status && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "status", "aria-live": "polite", style: statusStyle, children: status }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Input,
+      {
+        label,
+        value: code,
+        onChange: setCode,
+        inputMode: "numeric",
+        autoComplete: "one-time-code",
+        disabled: loading,
+        "aria-invalid": !!error,
+        "aria-describedby": error ? errorId : void 0
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Button,
+      {
+        variant: "primary",
+        fullWidth: true,
+        loading,
+        disabled: resending,
+        onClick: handleSubmit,
+        children: submitLabel
+      }
+    ),
+    onResend && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Button,
+      {
+        variant: "outline",
+        fullWidth: true,
+        loading: resending,
+        disabled: loading,
+        onClick: handleResend,
+        children: "Resend code"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        fullWidth: true,
+        disabled: loading || resending,
+        onClick: onBack,
+        children: backLabel
+      }
+    )
+  ] });
+}
+function VerificationForm({
+  email,
+  backLabel,
+  onVerify,
+  onResend,
+  onBack
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    CodeForm,
+    {
+      title: "Verify your email",
+      description: `Enter the verification code sent to ${email}.`,
+      label: "Verification code",
+      submitLabel: "Verify email",
+      backLabel,
+      onSubmit: onVerify,
+      onResend,
+      onBack
+    }
+  );
+}
+function MfaForm({ onVerify, onBack }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    CodeForm,
+    {
+      title: "Two-factor authentication",
+      description: "Enter the code from your authenticator app.",
+      label: "Authenticator code",
+      submitLabel: "Verify code",
+      backLabel: "Back to sign in",
+      onSubmit: onVerify,
+      onBack
+    }
+  );
+}
+
+// src/components/shared/navigation.ts
+function navigateTo(url) {
+  window.location.assign(url);
+}
+
+// src/components/SignIn.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function SignInCard({ afterSignInUrl, onSignIn, onForgotPassword, onNavigateSignUp }) {
   const theme = useTheme();
   const { client } = useAuthon();
   const { branding, providers, isLoaded } = useBranding();
-  const [email, setEmail] = (0, import_react7.useState)("");
-  const [password, setPassword] = (0, import_react7.useState)("");
-  const [showPassword, setShowPassword] = (0, import_react7.useState)(false);
-  const [loading, setLoading] = (0, import_react7.useState)(false);
-  const [oauthLoading, setOauthLoading] = (0, import_react7.useState)(null);
-  const [error, setError] = (0, import_react7.useState)("");
-  const [fieldErrors, setFieldErrors] = (0, import_react7.useState)({});
+  const [email, setEmail] = (0, import_react8.useState)("");
+  const [password, setPassword] = (0, import_react8.useState)("");
+  const [showPassword, setShowPassword] = (0, import_react8.useState)(false);
+  const [loading, setLoading] = (0, import_react8.useState)(false);
+  const [oauthLoading, setOauthLoading] = (0, import_react8.useState)(null);
+  const [error, setError] = (0, import_react8.useState)("");
+  const [step, setStep] = (0, import_react8.useState)({ kind: "credentials" });
+  const [fieldErrors, setFieldErrors] = (0, import_react8.useState)({});
+  const authAttemptPending = (0, import_react8.useRef)(false);
+  const completed = (0, import_react8.useRef)(false);
+  const completeSignIn = () => {
+    if (completed.current) return;
+    completed.current = true;
+    if (afterSignInUrl) navigateTo(afterSignInUrl);
+    onSignIn?.();
+  };
   const validate = () => {
     const errs = {};
     if (!email.trim()) errs.email = "Email is required";
@@ -482,21 +681,35 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
     return Object.keys(errs).length === 0;
   };
   const handleSubmit = async () => {
-    if (!validate() || !client) return;
+    if (authAttemptPending.current || !validate() || !client) return;
+    authAttemptPending.current = true;
     setLoading(true);
     setError("");
     try {
-      await client.signInWithEmail(email, password);
-      if (afterSignInUrl) window.location.assign(afterSignInUrl);
-      onSignIn?.();
-    } catch (e) {
-      setError(e?.message ?? "Sign in failed");
+      const result = await client.signInWithEmail(email, password);
+      if ("needsVerification" in result && result.needsVerification) {
+        setStep({ kind: "verification", email: result.email });
+        return;
+      }
+      completeSignIn();
+    } catch (submitError) {
+      if (submitError instanceof import_js2.AuthonMfaRequiredError) {
+        setStep({ kind: "mfa", mfaToken: submitError.mfaToken });
+      } else {
+        setError(submitError instanceof Error && submitError.message ? submitError.message : "Sign in failed");
+      }
     } finally {
+      authAttemptPending.current = false;
       setLoading(false);
     }
   };
+  const backToCredentials = () => {
+    setError("");
+    setStep({ kind: "credentials" });
+  };
   const handleOAuth = async (provider) => {
-    if (!client) return;
+    if (!client || authAttemptPending.current) return;
+    authAttemptPending.current = true;
     setOauthLoading(provider);
     setError("");
     try {
@@ -504,6 +717,7 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
     } catch (e) {
       setError(e?.message ?? "OAuth sign in failed");
     } finally {
+      authAttemptPending.current = false;
       setOauthLoading(null);
     }
   };
@@ -574,7 +788,7 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
     (p) => !(branding.hiddenProviders ?? []).includes(p)
   );
   if (!isLoaded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...cardStyle, alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { ...cardStyle, alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "span",
       {
         style: {
@@ -589,17 +803,49 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: cardStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: logoStyle, children: [
-      branding.logoDataUrl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: branding.logoDataUrl, alt: branding.brandName ?? "Logo", style: { height: 40, objectFit: "contain" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { style: titleStyle, children: "Sign in" }),
-      branding.brandName && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { style: subtitleStyle, children: [
+  if (step.kind === "verification") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: cardStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      VerificationForm,
+      {
+        email: step.email,
+        backLabel: "Back to sign in",
+        onVerify: async (code) => {
+          if (!client) throw new Error("Sign in is unavailable");
+          await client.verifyEmail(step.email, code);
+          completeSignIn();
+        },
+        onResend: async () => {
+          if (!client) throw new Error("Sign in is unavailable");
+          await client.resendVerificationCode(step.email);
+        },
+        onBack: backToCredentials
+      }
+    ) });
+  }
+  if (step.kind === "mfa") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: cardStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      MfaForm,
+      {
+        onVerify: async (code) => {
+          if (!client) throw new Error("Sign in is unavailable");
+          await client.verifyMfa(step.mfaToken, code);
+          completeSignIn();
+        },
+        onBack: backToCredentials
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: cardStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: logoStyle, children: [
+      branding.logoDataUrl && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: branding.logoDataUrl, alt: branding.brandName ?? "Logo", style: { height: 40, objectFit: "contain" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { style: titleStyle, children: "Sign in" }),
+      branding.brandName && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { style: subtitleStyle, children: [
         "to ",
         branding.brandName
       ] })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: errorBoxStyle, children: error }),
-    providersToShow.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: providersToShow.length <= 3 ? providersToShow.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { role: "alert", style: errorBoxStyle, children: error }),
+    providersToShow.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: providersToShow.length <= 3 ? providersToShow.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       OAuthButton,
       {
         provider,
@@ -609,7 +855,7 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
         borderRadius: theme.borderRadius
       },
       provider
-    )) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }, children: providersToShow.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    )) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }, children: providersToShow.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       CompactOAuthButton,
       {
         provider,
@@ -620,9 +866,9 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
       },
       provider
     )) }) }),
-    showDivider && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider, {}),
-    showEmailPw && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    showDivider && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Divider, {}),
+    showEmailPw && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Input,
         {
           label: "Email",
@@ -634,8 +880,8 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
           autoComplete: "email"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Input,
           {
             label: "Password",
@@ -645,21 +891,21 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
             onChange: setPassword,
             error: fieldErrors.password,
             autoComplete: "current-password",
-            rightElement: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            rightElement: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => setShowPassword((v) => !v),
                 style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", color: theme.textMuted },
                 "aria-label": showPassword ? "Hide password" : "Show password",
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: eyeIconPath }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: eyeIconPath }) })
               }
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: forgotStyle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", style: linkStyle, children: "Forgot password?" }) })
+        onForgotPassword && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: forgotStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", style: linkStyle, onClick: onForgotPassword, children: "Forgot password?" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Button,
         {
           variant: "primary",
@@ -671,10 +917,10 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: footerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: footerStyle, children: [
       "Don't have an account?",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
@@ -684,16 +930,16 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
         }
       )
     ] }),
-    branding.showSecuredBy !== false && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SecuredByAuthon, { primaryStart: theme.primaryStart, textMuted: theme.textMuted }),
-    branding.termsUrl || branding.privacyUrl ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { textAlign: "center", fontSize: 11, color: theme.textMuted, marginTop: -8 }, children: [
-      branding.termsUrl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: branding.termsUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.textMuted }, children: "Terms" }),
+    branding.showSecuredBy !== false && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SecuredByAuthon, { primaryStart: theme.primaryStart, textMuted: theme.textMuted }),
+    branding.termsUrl || branding.privacyUrl ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { textAlign: "center", fontSize: 11, color: theme.textMuted, marginTop: -8 }, children: [
+      branding.termsUrl && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: branding.termsUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.textMuted }, children: "Terms" }),
       branding.termsUrl && branding.privacyUrl && " \xB7 ",
-      branding.privacyUrl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.textMuted }, children: "Privacy" })
+      branding.privacyUrl && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.textMuted }, children: "Privacy" })
     ] }) : null
   ] });
 }
 function OAuthButton({ provider, loading, disabled, onClick, borderRadius }) {
-  const [hovered, setHovered] = (0, import_react7.useState)(false);
+  const [hovered, setHovered] = (0, import_react8.useState)(false);
   const colors = import_shared3.PROVIDER_COLORS[provider] ?? { bg: "#333", text: "#fff" };
   const name = import_shared3.PROVIDER_DISPLAY_NAMES[provider] ?? provider;
   const config = (0, import_js2.getProviderButtonConfig)(provider);
@@ -719,7 +965,7 @@ function OAuthButton({ provider, loading, disabled, onClick, borderRadius }) {
     transition: "opacity 0.15s",
     boxSizing: "border-box"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       type: "button",
@@ -729,9 +975,9 @@ function OAuthButton({ provider, loading, disabled, onClick, borderRadius }) {
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       "aria-label": `Continue with ${name}`,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { display: "flex", alignItems: "center" }, dangerouslySetInnerHTML: { __html: config.iconSvg } }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { display: "flex", alignItems: "center" }, dangerouslySetInnerHTML: { __html: config.iconSvg } }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
           "Continue with ",
           name
         ] })
@@ -740,7 +986,7 @@ function OAuthButton({ provider, loading, disabled, onClick, borderRadius }) {
   );
 }
 function CompactOAuthButton({ provider, loading, disabled, onClick, borderRadius }) {
-  const [hovered, setHovered] = (0, import_react7.useState)(false);
+  const [hovered, setHovered] = (0, import_react8.useState)(false);
   const colors = import_shared3.PROVIDER_COLORS[provider] ?? { bg: "#333", text: "#fff" };
   const name = import_shared3.PROVIDER_DISPLAY_NAMES[provider] ?? provider;
   const config = (0, import_js2.getProviderButtonConfig)(provider);
@@ -759,7 +1005,7 @@ function CompactOAuthButton({ provider, loading, disabled, onClick, borderRadius
     transition: "opacity 0.15s",
     padding: 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       type: "button",
@@ -769,33 +1015,34 @@ function CompactOAuthButton({ provider, loading, disabled, onClick, borderRadius
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       "aria-label": `Continue with ${name}`,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { display: "flex" }, dangerouslySetInnerHTML: { __html: config.iconSvg } })
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { display: "flex" }, dangerouslySetInnerHTML: { __html: config.iconSvg } })
     }
   );
 }
 function SecuredByAuthon({ primaryStart, textMuted }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 5, marginTop: -8 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M6 0L0.5 2.5V6.5C0.5 9.7 2.9 12.7 6 13.5C9.1 12.7 11.5 9.7 11.5 6.5V2.5L6 0Z", fill: primaryStart, opacity: "0.85" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M4 7L5.5 8.5L8.5 5.5", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 5, marginTop: -8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M6 0L0.5 2.5V6.5C0.5 9.7 2.9 12.7 6 13.5C9.1 12.7 11.5 9.7 11.5 6.5V2.5L6 0Z", fill: primaryStart, opacity: "0.85" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4 7L5.5 8.5L8.5 5.5", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontSize: 11, color: textMuted }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { fontSize: 11, color: textMuted }, children: [
       "Secured by",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: "https://authon.dev", target: "_blank", rel: "noopener noreferrer", style: { color: primaryStart, textDecoration: "none", fontWeight: 600 }, children: "Authon" })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: "https://authon.dev", target: "_blank", rel: "noopener noreferrer", style: { color: primaryStart, textDecoration: "none", fontWeight: 600 }, children: "Authon" })
     ] })
   ] });
 }
-function SignIn({ appearance, afterSignInUrl, onSignIn, onNavigateSignUp }) {
+function SignIn({ appearance, afterSignInUrl, onSignIn, onForgotPassword, onNavigateSignUp }) {
   const { branding, isLoaded } = useBranding();
   const effectiveBranding = isLoaded ? { ...branding, ...appearance?.variables ?? {} } : branding;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ThemeProvider, { branding: effectiveBranding, overrides: appearance?.variables, style: { display: "flex", justifyContent: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ThemeProvider, { branding: effectiveBranding, overrides: appearance?.variables, style: { display: "flex", justifyContent: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       SignInCard,
       {
         afterSignInUrl,
         onSignIn,
+        onForgotPassword,
         onNavigateSignUp
       }
     )
@@ -803,23 +1050,32 @@ function SignIn({ appearance, afterSignInUrl, onSignIn, onNavigateSignUp }) {
 }
 
 // src/components/SignUp.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_shared4 = require("@authon/shared");
 var import_js3 = require("@authon/js");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
   const theme = useTheme();
   const { client } = useAuthon();
   const { branding, providers, isLoaded } = useBranding();
-  const [displayName, setDisplayName] = (0, import_react8.useState)("");
-  const [email, setEmail] = (0, import_react8.useState)("");
-  const [password, setPassword] = (0, import_react8.useState)("");
-  const [confirmPassword, setConfirmPassword] = (0, import_react8.useState)("");
-  const [showPassword, setShowPassword] = (0, import_react8.useState)(false);
-  const [loading, setLoading] = (0, import_react8.useState)(false);
-  const [oauthLoading, setOauthLoading] = (0, import_react8.useState)(null);
-  const [error, setError] = (0, import_react8.useState)("");
-  const [fieldErrors, setFieldErrors] = (0, import_react8.useState)({});
+  const [displayName, setDisplayName] = (0, import_react9.useState)("");
+  const [email, setEmail] = (0, import_react9.useState)("");
+  const [password, setPassword] = (0, import_react9.useState)("");
+  const [confirmPassword, setConfirmPassword] = (0, import_react9.useState)("");
+  const [showPassword, setShowPassword] = (0, import_react9.useState)(false);
+  const [loading, setLoading] = (0, import_react9.useState)(false);
+  const [oauthLoading, setOauthLoading] = (0, import_react9.useState)(null);
+  const [error, setError] = (0, import_react9.useState)("");
+  const [verificationEmail, setVerificationEmail] = (0, import_react9.useState)(null);
+  const [fieldErrors, setFieldErrors] = (0, import_react9.useState)({});
+  const authAttemptPending = (0, import_react9.useRef)(false);
+  const completed = (0, import_react9.useRef)(false);
+  const completeSignUp = () => {
+    if (completed.current) return;
+    completed.current = true;
+    if (afterSignUpUrl) navigateTo(afterSignUpUrl);
+    onSignUp?.();
+  };
   const validate = () => {
     const errs = {};
     if (!email.trim()) errs.email = "Email is required";
@@ -831,21 +1087,27 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
     return Object.keys(errs).length === 0;
   };
   const handleSubmit = async () => {
-    if (!validate() || !client) return;
+    if (authAttemptPending.current || !validate() || !client) return;
+    authAttemptPending.current = true;
     setLoading(true);
     setError("");
     try {
-      await client.signUpWithEmail(email, password, displayName ? { displayName } : void 0);
-      if (afterSignUpUrl) window.location.assign(afterSignUpUrl);
-      onSignUp?.();
-    } catch (e) {
-      setError(e?.message ?? "Sign up failed");
+      const result = await client.signUpWithEmail(email, password, displayName ? { displayName } : void 0);
+      if ("needsVerification" in result && result.needsVerification) {
+        setVerificationEmail(result.email);
+        return;
+      }
+      completeSignUp();
+    } catch (submitError) {
+      setError(submitError instanceof Error && submitError.message ? submitError.message : "Sign up failed");
     } finally {
+      authAttemptPending.current = false;
       setLoading(false);
     }
   };
   const handleOAuth = async (provider) => {
-    if (!client) return;
+    if (!client || authAttemptPending.current) return;
+    authAttemptPending.current = true;
     setOauthLoading(provider);
     setError("");
     try {
@@ -853,6 +1115,7 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
     } catch (e) {
       setError(e?.message ?? "OAuth sign in failed");
     } finally {
+      authAttemptPending.current = false;
       setOauthLoading(null);
     }
   };
@@ -918,7 +1181,7 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
     (p) => !(branding.hiddenProviders ?? []).includes(p)
   );
   if (!isLoaded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { ...cardStyle, alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { ...cardStyle, alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "span",
       {
         style: {
@@ -933,18 +1196,40 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
       }
     ) });
   }
+  if (verificationEmail) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: cardStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      VerificationForm,
+      {
+        email: verificationEmail,
+        backLabel: "Back to sign up",
+        onVerify: async (code) => {
+          if (!client) throw new Error("Sign up is unavailable");
+          await client.verifyEmail(verificationEmail, code);
+          completeSignUp();
+        },
+        onResend: async () => {
+          if (!client) throw new Error("Sign up is unavailable");
+          await client.resendVerificationCode(verificationEmail);
+        },
+        onBack: () => {
+          setError("");
+          setVerificationEmail(null);
+        }
+      }
+    ) });
+  }
   const eyeIconPath = showPassword ? "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24 M1 1l22 22" : "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 9a3 3 0 100 6 3 3 0 000-6z";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: cardStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: logoStyle, children: [
-      branding.logoDataUrl && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: branding.logoDataUrl, alt: branding.brandName ?? "Logo", style: { height: 40, objectFit: "contain" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { style: titleStyle, children: "Create account" }),
-      branding.brandName && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { style: subtitleStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: cardStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: logoStyle, children: [
+      branding.logoDataUrl && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: branding.logoDataUrl, alt: branding.brandName ?? "Logo", style: { height: 40, objectFit: "contain" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h1", { style: titleStyle, children: "Create account" }),
+      branding.brandName && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { style: subtitleStyle, children: [
         "Join ",
         branding.brandName
       ] })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: errorBoxStyle, children: error }),
-    providersToShow.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: providersToShow.length <= 3 ? providersToShow.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "alert", style: errorBoxStyle, children: error }),
+    providersToShow.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: providersToShow.length <= 3 ? providersToShow.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       OAuthButtonFull,
       {
         provider,
@@ -954,7 +1239,7 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
         borderRadius: theme.borderRadius
       },
       provider
-    )) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }, children: providersToShow.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    )) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }, children: providersToShow.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       CompactOAuthBtn,
       {
         provider,
@@ -965,9 +1250,9 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
       },
       provider
     )) }) }),
-    showDivider && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Divider, {}),
-    showEmailPw && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    showDivider && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, {}),
+    showEmailPw && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         Input,
         {
           label: "Display name",
@@ -979,7 +1264,7 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
           autoComplete: "name"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         Input,
         {
           label: "Email",
@@ -991,7 +1276,7 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
           autoComplete: "email"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         Input,
         {
           label: "Password",
@@ -1001,19 +1286,19 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
           onChange: setPassword,
           error: fieldErrors.password,
           autoComplete: "new-password",
-          rightElement: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          rightElement: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
               onClick: () => setShowPassword((v) => !v),
               style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", color: theme.textMuted },
               "aria-label": showPassword ? "Hide password" : "Show password",
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: eyeIconPath }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: eyeIconPath }) })
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         Input,
         {
           label: "Confirm password",
@@ -1025,7 +1310,7 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
           autoComplete: "new-password"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         Button,
         {
           variant: "primary",
@@ -1037,23 +1322,23 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: footerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: footerStyle, children: [
       "Already have an account?",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", style: linkStyle, onClick: onNavigateSignIn, children: "Sign in" })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", style: linkStyle, onClick: onNavigateSignIn, children: "Sign in" })
     ] }),
-    branding.showSecuredBy !== false && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SecuredByAuthon2, { primaryStart: theme.primaryStart, textMuted: theme.textMuted }),
-    branding.termsUrl || branding.privacyUrl ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { textAlign: "center", fontSize: 11, color: theme.textMuted, marginTop: -8 }, children: [
+    branding.showSecuredBy !== false && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SecuredByAuthon2, { primaryStart: theme.primaryStart, textMuted: theme.textMuted }),
+    branding.termsUrl || branding.privacyUrl ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { textAlign: "center", fontSize: 11, color: theme.textMuted, marginTop: -8 }, children: [
       "By creating an account you agree to our",
       " ",
-      branding.termsUrl && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: branding.termsUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.primaryStart }, children: "Terms" }),
+      branding.termsUrl && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { href: branding.termsUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.primaryStart }, children: "Terms" }),
       branding.termsUrl && branding.privacyUrl && " and ",
-      branding.privacyUrl && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.primaryStart }, children: "Privacy Policy" })
+      branding.privacyUrl && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { href: branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.primaryStart }, children: "Privacy Policy" })
     ] }) : null
   ] });
 }
 function OAuthButtonFull({ provider, loading, disabled, onClick, borderRadius }) {
-  const [hovered, setHovered] = (0, import_react8.useState)(false);
+  const [hovered, setHovered] = (0, import_react9.useState)(false);
   const colors = import_shared4.PROVIDER_COLORS[provider] ?? { bg: "#333", text: "#fff" };
   const name = import_shared4.PROVIDER_DISPLAY_NAMES[provider] ?? provider;
   const config = (0, import_js3.getProviderButtonConfig)(provider);
@@ -1079,7 +1364,7 @@ function OAuthButtonFull({ provider, loading, disabled, onClick, borderRadius })
     transition: "opacity 0.15s",
     boxSizing: "border-box"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "button",
     {
       type: "button",
@@ -1089,9 +1374,9 @@ function OAuthButtonFull({ provider, loading, disabled, onClick, borderRadius })
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       "aria-label": `Continue with ${name}`,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { display: "flex", alignItems: "center" }, dangerouslySetInnerHTML: { __html: config.iconSvg } }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { display: "flex", alignItems: "center" }, dangerouslySetInnerHTML: { __html: config.iconSvg } }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
           "Continue with ",
           name
         ] })
@@ -1100,7 +1385,7 @@ function OAuthButtonFull({ provider, loading, disabled, onClick, borderRadius })
   );
 }
 function CompactOAuthBtn({ provider, loading, disabled, onClick, borderRadius }) {
-  const [hovered, setHovered] = (0, import_react8.useState)(false);
+  const [hovered, setHovered] = (0, import_react9.useState)(false);
   const colors = import_shared4.PROVIDER_COLORS[provider] ?? { bg: "#333", text: "#fff" };
   const name = import_shared4.PROVIDER_DISPLAY_NAMES[provider] ?? provider;
   const config = (0, import_js3.getProviderButtonConfig)(provider);
@@ -1119,7 +1404,7 @@ function CompactOAuthBtn({ provider, loading, disabled, onClick, borderRadius })
     transition: "opacity 0.15s",
     padding: 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "button",
     {
       type: "button",
@@ -1129,29 +1414,29 @@ function CompactOAuthBtn({ provider, loading, disabled, onClick, borderRadius })
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       "aria-label": `Continue with ${name}`,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { display: "flex" }, dangerouslySetInnerHTML: { __html: config.iconSvg } })
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { display: "flex" }, dangerouslySetInnerHTML: { __html: config.iconSvg } })
     }
   );
 }
 function SecuredByAuthon2({ primaryStart, textMuted }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 5, marginTop: -8 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M6 0L0.5 2.5V6.5C0.5 9.7 2.9 12.7 6 13.5C9.1 12.7 11.5 9.7 11.5 6.5V2.5L6 0Z", fill: primaryStart, opacity: "0.85" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4 7L5.5 8.5L8.5 5.5", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 5, marginTop: -8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M6 0L0.5 2.5V6.5C0.5 9.7 2.9 12.7 6 13.5C9.1 12.7 11.5 9.7 11.5 6.5V2.5L6 0Z", fill: primaryStart, opacity: "0.85" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 7L5.5 8.5L8.5 5.5", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { fontSize: 11, color: textMuted }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { style: { fontSize: 11, color: textMuted }, children: [
       "Secured by",
       " ",
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: "https://authon.dev", target: "_blank", rel: "noopener noreferrer", style: { color: primaryStart, textDecoration: "none", fontWeight: 600 }, children: "Authon" })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { href: "https://authon.dev", target: "_blank", rel: "noopener noreferrer", style: { color: primaryStart, textDecoration: "none", fontWeight: 600 }, children: "Authon" })
     ] })
   ] });
 }
 function SignUp({ appearance, afterSignUpUrl, onSignUp, onNavigateSignIn }) {
   const { branding, isLoaded } = useBranding();
   const effectiveBranding = isLoaded ? { ...branding, ...appearance?.variables ?? {} } : branding;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ThemeProvider, { branding: effectiveBranding, overrides: appearance?.variables, style: { display: "flex", justifyContent: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ThemeProvider, { branding: effectiveBranding, overrides: appearance?.variables, style: { display: "flex", justifyContent: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       SignUpCard,
       {
         afterSignUpUrl,
@@ -1163,8 +1448,8 @@ function SignUp({ appearance, afterSignUpUrl, onSignUp, onNavigateSignIn }) {
 }
 
 // src/components/UserButton.tsx
-var import_react9 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function UserAvatar({
   avatarUrl,
   displayName,
@@ -1188,24 +1473,24 @@ function UserAvatar({
     fontWeight: 700,
     userSelect: "none"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: avatarStyle, children: avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: avatarUrl, alt: displayName ?? "avatar", style: { width: "100%", height: "100%", objectFit: "cover" } }) : initials });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: avatarStyle, children: avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: avatarUrl, alt: displayName ?? "avatar", style: { width: "100%", height: "100%", objectFit: "cover" } }) : initials });
 }
 function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
   const theme = useTheme();
   const { user, signOut, openSignIn, isSignedIn, activeOrganization, client } = useAuthon();
-  const [open, setOpen] = (0, import_react9.useState)(false);
-  const dropdownRef = (0, import_react9.useRef)(null);
-  const handleClickOutside = (0, import_react9.useCallback)((e) => {
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const dropdownRef = (0, import_react10.useRef)(null);
+  const handleClickOutside = (0, import_react10.useCallback)((e) => {
     if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
       setOpen(false);
     }
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (open) document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open, handleClickOutside]);
   if (!isSignedIn) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
         type: "button",
@@ -1274,8 +1559,8 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
     fontFamily: theme.fontFamily,
     boxSizing: "border-box"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: dropdownRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", style: triggerStyle, onClick: () => setOpen((v) => !v), "aria-label": "User menu", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: dropdownRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", style: triggerStyle, onClick: () => setOpen((v) => !v), "aria-label": "User menu", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       UserAvatar,
       {
         avatarUrl: user?.avatarUrl,
@@ -1286,9 +1571,9 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
         primaryEnd: theme.primaryEnd
       }
     ) }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: dropdownStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: headerStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: dropdownStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: headerStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           UserAvatar,
           {
             avatarUrl: user?.avatarUrl,
@@ -1299,12 +1584,12 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
             primaryEnd: theme.primaryEnd
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-          user?.displayName && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: 14, fontWeight: 600, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: user.displayName }),
-          user?.email && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: 12, color: theme.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 1 }, children: user.email })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+          user?.displayName && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: 14, fontWeight: 600, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: user.displayName }),
+          user?.email && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: 12, color: theme.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 1 }, children: user.email })
         ] })
       ] }),
-      activeOrganization && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      activeOrganization && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         OrgSwitcherRow,
         {
           org: activeOrganization,
@@ -1313,7 +1598,7 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
           client
         }
       ),
-      userProfileUrl && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      userProfileUrl && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         MenuButton,
         {
           style: menuItemStyle(),
@@ -1321,14 +1606,14 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
             setOpen(false);
             window.location.assign(userProfileUrl);
           },
-          icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "7", r: "4" })
+          icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "7", r: "4" })
           ] }),
           children: "Manage account"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { borderTop: `1px solid ${theme.border}` }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { borderTop: `1px solid ${theme.border}` }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         MenuButton,
         {
           style: menuItemStyle(true),
@@ -1337,10 +1622,10 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
             await signOut();
             if (afterSignOutUrl) window.location.assign(afterSignOutUrl);
           },
-          icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "16 17 21 12 16 7" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+          icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "16 17 21 12 16 7" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
           ] }),
           children: "Sign out"
         }
@@ -1354,8 +1639,8 @@ function MenuButton({
   icon,
   children
 }) {
-  const [hovered, setHovered] = (0, import_react9.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  const [hovered, setHovered] = (0, import_react10.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "button",
     {
       type: "button",
@@ -1379,7 +1664,7 @@ function OrgSwitcherRow({
   theme,
   client
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       style: {
@@ -1390,7 +1675,7 @@ function OrgSwitcherRow({
         gap: 10
       },
       children: [
-        org.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: org.logoUrl, alt: org.name, style: { width: 24, height: 24, borderRadius: 6, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        org.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: org.logoUrl, alt: org.name, style: { width: 24, height: 24, borderRadius: 6, objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             style: {
@@ -1408,9 +1693,9 @@ function OrgSwitcherRow({
             children: org.name[0]?.toUpperCase()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: 12, color: theme.textMuted }, children: "Organization" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { fontSize: 13, fontWeight: 600, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: org.name })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: 12, color: theme.textMuted }, children: "Organization" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: 13, fontWeight: 600, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: org.name })
         ] })
       ]
     }
@@ -1419,39 +1704,39 @@ function OrgSwitcherRow({
 function UserButton({ appearance, afterSignOutUrl, userProfileUrl }) {
   const { branding } = useBranding();
   const effectiveBranding = { ...branding, ...appearance?.variables ?? {} };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ThemeProvider, { branding: effectiveBranding, style: { display: "inline-block" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(UserButtonInner, { afterSignOutUrl, userProfileUrl }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ThemeProvider, { branding: effectiveBranding, style: { display: "inline-block" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(UserButtonInner, { afterSignOutUrl, userProfileUrl }) });
 }
 
 // src/SignedIn.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function SignedIn({ children }) {
   const { isSignedIn, isLoading } = useAuthon();
   if (isLoading || !isSignedIn) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children });
 }
 
 // src/SignedOut.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function SignedOut({ children }) {
   const { isSignedIn, isLoading } = useAuthon();
   if (isLoading || isSignedIn) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children });
 }
 
 // src/Protect.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Protect({ children, fallback = null, condition }) {
   const { isSignedIn, isLoading, user } = useAuthon();
   if (isLoading) return null;
-  if (!isSignedIn || !user) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: fallback });
-  if (condition && !condition(user)) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: fallback });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children });
+  if (!isSignedIn || !user) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: fallback });
+  if (condition && !condition(user)) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: fallback });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children });
 }
 
 // src/SocialButton.tsx
 var import_shared5 = require("@authon/shared");
 var import_js4 = require("@authon/js");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var baseStyle = {
   display: "flex",
   alignItems: "center",
@@ -1497,7 +1782,7 @@ function SocialButton({
   const iconSvg = config.iconSvg.replace(/width="\d+"/, `width="${resolvedIconSize}"`).replace(/height="\d+"/, `height="${resolvedIconSize}"`);
   const borderProps = needsBorder ? { border: "1px solid #dadce0" } : {};
   if (compact) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         className,
@@ -1513,7 +1798,7 @@ function SocialButton({
         onClick: () => onClick(provider),
         disabled: disabled || loading,
         "aria-label": `Sign in with ${displayName}`,
-        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "span",
           {
             style: {
@@ -1526,7 +1811,7 @@ function SocialButton({
               animation: "authon-spin 0.6s linear infinite"
             }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "span",
           {
             style: { display: "flex", alignItems: "center", flexShrink: 0 },
@@ -1536,7 +1821,7 @@ function SocialButton({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       className,
@@ -1552,7 +1837,7 @@ function SocialButton({
       onClick: () => onClick(provider),
       disabled: disabled || loading,
       "aria-label": `Sign in with ${displayName}`,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "span",
         {
           style: {
@@ -1565,23 +1850,23 @@ function SocialButton({
             animation: "authon-spin 0.6s linear infinite"
           }
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "span",
           {
             style: { display: "flex", alignItems: "center", flexShrink: 0 },
             dangerouslySetInnerHTML: { __html: iconSvg }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { fontSize: 15, fontWeight: 600, whiteSpace: "nowrap" }, children: buttonLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: 15, fontWeight: 600, whiteSpace: "nowrap" }, children: buttonLabel })
       ] })
     }
   );
 }
 
 // src/SocialButtons.tsx
-var import_react10 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function SocialButtons({
   onSuccess,
   onError,
@@ -1593,9 +1878,9 @@ function SocialButtons({
   buttonProps
 }) {
   const { client } = useAuthon();
-  const [providers, setProviders] = (0, import_react10.useState)([]);
-  const [loadingProvider, setLoadingProvider] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
+  const [providers, setProviders] = (0, import_react11.useState)([]);
+  const [loadingProvider, setLoadingProvider] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
     if (!client) return;
     client.getProviders().then((p) => setProviders(p));
   }, [client]);
@@ -1615,7 +1900,7 @@ function SocialButtons({
     }
   };
   const containerStyle = compact ? { display: "flex", flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: resolvedGap, ...userStyle } : { display: "flex", flexDirection: "column", gap: resolvedGap, ...userStyle };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className, style: containerStyle, children: providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className, style: containerStyle, children: providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     SocialButton,
     {
       provider,
@@ -1631,13 +1916,13 @@ function SocialButtons({
 }
 
 // src/useAuthonMfa.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useAuthonMfa() {
-  const ctx = (0, import_react11.useContext)(AuthonContext);
+  const ctx = (0, import_react12.useContext)(AuthonContext);
   if (!ctx) throw new Error("useAuthonMfa must be used within <AuthonProvider>");
-  const [isLoading, setIsLoading] = (0, import_react11.useState)(false);
-  const [error, setError] = (0, import_react11.useState)(null);
-  const wrap = (0, import_react11.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react12.useState)(false);
+  const [error, setError] = (0, import_react12.useState)(null);
+  const wrap = (0, import_react12.useCallback)(
     async (fn) => {
       setIsLoading(true);
       setError(null);
@@ -1653,34 +1938,34 @@ function useAuthonMfa() {
     },
     []
   );
-  const setupMfa = (0, import_react11.useCallback)(async () => {
+  const setupMfa = (0, import_react12.useCallback)(async () => {
     return wrap(() => ctx.client.setupMfa());
   }, [ctx.client, wrap]);
-  const verifyMfaSetup = (0, import_react11.useCallback)(
+  const verifyMfaSetup = (0, import_react12.useCallback)(
     async (code) => {
       const result = await wrap(() => ctx.client.verifyMfaSetup(code));
       return result !== null;
     },
     [ctx.client, wrap]
   );
-  const verifyMfa = (0, import_react11.useCallback)(
+  const verifyMfa = (0, import_react12.useCallback)(
     async (mfaToken, code) => {
       const result = await wrap(() => ctx.client.verifyMfa(mfaToken, code));
       return result !== null;
     },
     [ctx.client, wrap]
   );
-  const disableMfa = (0, import_react11.useCallback)(
+  const disableMfa = (0, import_react12.useCallback)(
     async (code) => {
       const result = await wrap(() => ctx.client.disableMfa(code));
       return result !== null;
     },
     [ctx.client, wrap]
   );
-  const getMfaStatus = (0, import_react11.useCallback)(async () => {
+  const getMfaStatus = (0, import_react12.useCallback)(async () => {
     return wrap(() => ctx.client.getMfaStatus());
   }, [ctx.client, wrap]);
-  const regenerateBackupCodes = (0, import_react11.useCallback)(
+  const regenerateBackupCodes = (0, import_react12.useCallback)(
     async (code) => {
       return wrap(() => ctx.client.regenerateBackupCodes(code));
     },
@@ -1699,13 +1984,13 @@ function useAuthonMfa() {
 }
 
 // src/useAuthonPasskeys.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useAuthonPasskeys() {
-  const ctx = (0, import_react12.useContext)(AuthonContext);
+  const ctx = (0, import_react13.useContext)(AuthonContext);
   if (!ctx) throw new Error("useAuthonPasskeys must be used within <AuthonProvider>");
-  const [isLoading, setIsLoading] = (0, import_react12.useState)(false);
-  const [error, setError] = (0, import_react12.useState)(null);
-  const wrap = (0, import_react12.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(false);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const wrap = (0, import_react13.useCallback)(
     async (fn) => {
       setIsLoading(true);
       setError(null);
@@ -1720,26 +2005,26 @@ function useAuthonPasskeys() {
     },
     []
   );
-  const registerPasskey = (0, import_react12.useCallback)(
+  const registerPasskey = (0, import_react13.useCallback)(
     (name) => wrap(() => ctx.client.registerPasskey(name)),
     [ctx.client, wrap]
   );
-  const authenticateWithPasskey = (0, import_react12.useCallback)(
+  const authenticateWithPasskey = (0, import_react13.useCallback)(
     async (email) => {
       const result = await wrap(() => ctx.client.authenticateWithPasskey(email));
       return result !== null;
     },
     [ctx.client, wrap]
   );
-  const listPasskeys = (0, import_react12.useCallback)(
+  const listPasskeys = (0, import_react13.useCallback)(
     () => wrap(() => ctx.client.listPasskeys()),
     [ctx.client, wrap]
   );
-  const renamePasskey = (0, import_react12.useCallback)(
+  const renamePasskey = (0, import_react13.useCallback)(
     (id, name) => wrap(() => ctx.client.renamePasskey(id, name)),
     [ctx.client, wrap]
   );
-  const revokePasskey = (0, import_react12.useCallback)(
+  const revokePasskey = (0, import_react13.useCallback)(
     async (id) => {
       const result = await wrap(() => ctx.client.revokePasskey(id));
       return result !== null;
@@ -1758,13 +2043,13 @@ function useAuthonPasskeys() {
 }
 
 // src/useAuthonPasswordless.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useAuthonPasswordless() {
-  const ctx = (0, import_react13.useContext)(AuthonContext);
+  const ctx = (0, import_react14.useContext)(AuthonContext);
   if (!ctx) throw new Error("useAuthonPasswordless must be used within <AuthonProvider>");
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(false);
-  const [error, setError] = (0, import_react13.useState)(null);
-  const wrap = (0, import_react13.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(false);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const wrap = (0, import_react14.useCallback)(
     async (fn) => {
       setIsLoading(true);
       setError(null);
@@ -1779,21 +2064,21 @@ function useAuthonPasswordless() {
     },
     []
   );
-  const sendMagicLink = (0, import_react13.useCallback)(
+  const sendMagicLink = (0, import_react14.useCallback)(
     async (email) => {
       const result = await wrap(() => ctx.client.sendMagicLink(email));
       return result !== null;
     },
     [ctx.client, wrap]
   );
-  const sendEmailOtp = (0, import_react13.useCallback)(
+  const sendEmailOtp = (0, import_react14.useCallback)(
     async (email) => {
       const result = await wrap(() => ctx.client.sendEmailOtp(email));
       return result !== null;
     },
     [ctx.client, wrap]
   );
-  const verifyPasswordless = (0, import_react13.useCallback)(
+  const verifyPasswordless = (0, import_react14.useCallback)(
     async (opts) => {
       const result = await wrap(() => ctx.client.verifyPasswordless(opts));
       return result !== null;
@@ -1810,13 +2095,13 @@ function useAuthonPasswordless() {
 }
 
 // src/useAuthonWeb3.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 function useAuthonWeb3() {
-  const ctx = (0, import_react14.useContext)(AuthonContext);
+  const ctx = (0, import_react15.useContext)(AuthonContext);
   if (!ctx) throw new Error("useAuthonWeb3 must be used within <AuthonProvider>");
-  const [isLoading, setIsLoading] = (0, import_react14.useState)(false);
-  const [error, setError] = (0, import_react14.useState)(null);
-  const wrap = (0, import_react14.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react15.useState)(false);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const wrap = (0, import_react15.useCallback)(
     async (fn) => {
       setIsLoading(true);
       setError(null);
@@ -1831,11 +2116,11 @@ function useAuthonWeb3() {
     },
     []
   );
-  const getNonce = (0, import_react14.useCallback)(
+  const getNonce = (0, import_react15.useCallback)(
     (address, chain, walletType, chainId) => wrap(() => ctx.client.web3GetNonce(address, chain, walletType, chainId)),
     [ctx.client, wrap]
   );
-  const verify = (0, import_react14.useCallback)(
+  const verify = (0, import_react15.useCallback)(
     async (message, signature, address, chain, walletType) => {
       const result = await wrap(
         () => ctx.client.web3Verify(message, signature, address, chain, walletType)
@@ -1844,15 +2129,15 @@ function useAuthonWeb3() {
     },
     [ctx.client, wrap]
   );
-  const listWallets = (0, import_react14.useCallback)(
+  const listWallets = (0, import_react15.useCallback)(
     () => wrap(() => ctx.client.listWallets()),
     [ctx.client, wrap]
   );
-  const linkWallet = (0, import_react14.useCallback)(
+  const linkWallet = (0, import_react15.useCallback)(
     (params) => wrap(() => ctx.client.linkWallet(params)),
     [ctx.client, wrap]
   );
-  const unlinkWallet = (0, import_react14.useCallback)(
+  const unlinkWallet = (0, import_react15.useCallback)(
     async (walletId) => {
       const result = await wrap(() => ctx.client.unlinkWallet(walletId));
       return result !== null;
@@ -1871,13 +2156,13 @@ function useAuthonWeb3() {
 }
 
 // src/useAuthonSessions.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 function useAuthonSessions() {
-  const ctx = (0, import_react15.useContext)(AuthonContext);
+  const ctx = (0, import_react16.useContext)(AuthonContext);
   if (!ctx) throw new Error("useAuthonSessions must be used within <AuthonProvider>");
-  const [isLoading, setIsLoading] = (0, import_react15.useState)(false);
-  const [error, setError] = (0, import_react15.useState)(null);
-  const wrap = (0, import_react15.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react16.useState)(false);
+  const [error, setError] = (0, import_react16.useState)(null);
+  const wrap = (0, import_react16.useCallback)(
     async (fn) => {
       setIsLoading(true);
       setError(null);
@@ -1892,11 +2177,11 @@ function useAuthonSessions() {
     },
     []
   );
-  const listSessions = (0, import_react15.useCallback)(
+  const listSessions = (0, import_react16.useCallback)(
     () => wrap(() => ctx.client.listSessions()),
     [ctx.client, wrap]
   );
-  const revokeSession = (0, import_react15.useCallback)(
+  const revokeSession = (0, import_react16.useCallback)(
     async (sessionId) => {
       const result = await wrap(() => ctx.client.revokeSession(sessionId));
       return result !== null;
@@ -1912,14 +2197,14 @@ function useAuthonSessions() {
 }
 
 // src/useOrganization.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 function useOrganization() {
-  const ctx = (0, import_react16.useContext)(AuthonContext);
+  const ctx = (0, import_react17.useContext)(AuthonContext);
   if (!ctx) throw new Error("useOrganization must be used within <AuthonProvider>");
-  const [members, setMembers] = (0, import_react16.useState)([]);
-  const [isLoaded, setIsLoaded] = (0, import_react16.useState)(false);
+  const [members, setMembers] = (0, import_react17.useState)([]);
+  const [isLoaded, setIsLoaded] = (0, import_react17.useState)(false);
   const organization = ctx.activeOrganization;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!organization || !ctx.client) {
       setMembers([]);
       setIsLoaded(!organization);
@@ -1942,13 +2227,13 @@ function useOrganization() {
 }
 
 // src/useOrganizationList.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 function useOrganizationList() {
-  const ctx = (0, import_react17.useContext)(AuthonContext);
+  const ctx = (0, import_react18.useContext)(AuthonContext);
   if (!ctx) throw new Error("useOrganizationList must be used within <AuthonProvider>");
-  const [organizations, setOrganizations] = (0, import_react17.useState)([]);
-  const [isLoaded, setIsLoaded] = (0, import_react17.useState)(false);
-  (0, import_react17.useEffect)(() => {
+  const [organizations, setOrganizations] = (0, import_react18.useState)([]);
+  const [isLoaded, setIsLoaded] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
     if (!ctx.client || !ctx.isSignedIn) {
       setOrganizations([]);
       setIsLoaded(!ctx.isSignedIn);
@@ -1963,7 +2248,7 @@ function useOrganizationList() {
       setIsLoaded(true);
     });
   }, [ctx.client, ctx.isSignedIn]);
-  const createOrganization = (0, import_react17.useCallback)(
+  const createOrganization = (0, import_react18.useCallback)(
     async (params) => {
       if (!ctx.client) return null;
       try {
@@ -1976,7 +2261,7 @@ function useOrganizationList() {
     },
     [ctx.client]
   );
-  const setActive = (0, import_react17.useCallback)(
+  const setActive = (0, import_react18.useCallback)(
     (org) => {
       ctx.setActiveOrganization(org);
     },
@@ -1991,16 +2276,16 @@ function useOrganizationList() {
 }
 
 // src/components/UserProfile.tsx
-var import_react18 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ProfileTab() {
   const theme = useTheme();
   const { user, client } = useAuthon();
-  const [displayName, setDisplayName] = (0, import_react18.useState)(user?.displayName ?? "");
-  const [phone, setPhone] = (0, import_react18.useState)(user?.phone ?? "");
-  const [loading, setLoading] = (0, import_react18.useState)(false);
-  const [success, setSuccess] = (0, import_react18.useState)("");
-  const [error, setError] = (0, import_react18.useState)("");
+  const [displayName, setDisplayName] = (0, import_react19.useState)(user?.displayName ?? "");
+  const [phone, setPhone] = (0, import_react19.useState)(user?.phone ?? "");
+  const [loading, setLoading] = (0, import_react19.useState)(false);
+  const [success, setSuccess] = (0, import_react19.useState)("");
+  const [error, setError] = (0, import_react19.useState)("");
   const handleSave = async () => {
     if (!client) return;
     setLoading(true);
@@ -2016,9 +2301,9 @@ function ProfileTab() {
     }
   };
   const initials = user?.displayName ? user.displayName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : (user?.email?.[0] ?? "?").toUpperCase();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "div",
         {
           style: {
@@ -2035,37 +2320,37 @@ function ProfileTab() {
             overflow: "hidden",
             flexShrink: 0
           },
-          children: user?.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src: user.avatarUrl, alt: "avatar", style: { width: "100%", height: "100%", objectFit: "cover" } }) : initials
+          children: user?.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("img", { src: user.avatarUrl, alt: "avatar", style: { width: "100%", height: "100%", objectFit: "cover" } }) : initials
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontSize: 16, fontWeight: 600, color: theme.text }, children: user?.displayName ?? "User" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontSize: 13, color: theme.textMuted }, children: user?.email }),
-        !user?.emailVerified && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { fontSize: 11, color: "#d97706", background: "#fef3c7", padding: "2px 8px", borderRadius: 99, fontWeight: 500, marginTop: 4, display: "inline-block" }, children: "Email not verified" })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: 16, fontWeight: 600, color: theme.text }, children: user?.displayName ?? "User" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: 13, color: theme.textMuted }, children: user?.email }),
+        !user?.emailVerified && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { fontSize: 11, color: "#d97706", background: "#fef3c7", padding: "2px 8px", borderRadius: 99, fontWeight: 500, marginTop: 4, display: "inline-block" }, children: "Email not verified" })
       ] })
     ] }),
-    success && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { padding: "10px 14px", borderRadius: theme.borderRadius, background: "#f0fdf4", border: "1px solid #bbf7d0", color: "#166534", fontSize: 13 }, children: success }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { padding: "10px 14px", borderRadius: theme.borderRadius, background: "#fef2f2", border: "1px solid #fecaca", color: "#dc2626", fontSize: 13 }, children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Input, { label: "Display name", value: displayName, onChange: setDisplayName, placeholder: "Your name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Input, { label: "Email", type: "email", value: user?.email ?? "", disabled: true, placeholder: "Email" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Input, { label: "Phone", type: "tel", value: phone, onChange: setPhone, placeholder: "+1 (555) 000-0000" })
+    success && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { padding: "10px 14px", borderRadius: theme.borderRadius, background: "#f0fdf4", border: "1px solid #bbf7d0", color: "#166534", fontSize: 13 }, children: success }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { padding: "10px 14px", borderRadius: theme.borderRadius, background: "#fef2f2", border: "1px solid #fecaca", color: "#dc2626", fontSize: 13 }, children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Input, { label: "Display name", value: displayName, onChange: setDisplayName, placeholder: "Your name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Input, { label: "Email", type: "email", value: user?.email ?? "", disabled: true, placeholder: "Email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Input, { label: "Phone", type: "tel", value: phone, onChange: setPhone, placeholder: "+1 (555) 000-0000" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "primary", onClick: handleSave, loading, style: { alignSelf: "flex-start", minWidth: 120 }, children: "Save changes" })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "primary", onClick: handleSave, loading, style: { alignSelf: "flex-start", minWidth: 120 }, children: "Save changes" })
   ] });
 }
 function SecurityTab() {
   const theme = useTheme();
   const { client } = useAuthon();
-  const [currentPw, setCurrentPw] = (0, import_react18.useState)("");
-  const [newPw, setNewPw] = (0, import_react18.useState)("");
-  const [confirmPw, setConfirmPw] = (0, import_react18.useState)("");
-  const [pwLoading, setPwLoading] = (0, import_react18.useState)(false);
-  const [pwError, setPwError] = (0, import_react18.useState)("");
-  const [pwSuccess, setPwSuccess] = (0, import_react18.useState)("");
-  const [mfaStatus, setMfaStatus] = (0, import_react18.useState)(null);
-  const [mfaLoading, setMfaLoading] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
+  const [currentPw, setCurrentPw] = (0, import_react19.useState)("");
+  const [newPw, setNewPw] = (0, import_react19.useState)("");
+  const [confirmPw, setConfirmPw] = (0, import_react19.useState)("");
+  const [pwLoading, setPwLoading] = (0, import_react19.useState)(false);
+  const [pwError, setPwError] = (0, import_react19.useState)("");
+  const [pwSuccess, setPwSuccess] = (0, import_react19.useState)("");
+  const [mfaStatus, setMfaStatus] = (0, import_react19.useState)(null);
+  const [mfaLoading, setMfaLoading] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
     if (!client) return;
     client.getMfaStatus().then(setMfaStatus).catch(() => null);
   }, [client]);
@@ -2102,26 +2387,26 @@ function SecurityTab() {
     paddingBottom: 10,
     borderBottom: `1px solid ${theme.border}`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: sectionTitle, children: "Change password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Input, { label: "Current password", type: "password", value: currentPw, onChange: setCurrentPw, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: "current-password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Input, { label: "New password", type: "password", value: newPw, onChange: setNewPw, placeholder: "Minimum 8 characters", autoComplete: "new-password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Input, { label: "Confirm new password", type: "password", value: confirmPw, onChange: setConfirmPw, placeholder: "Repeat new password", autoComplete: "new-password" }),
-        pwError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { color: "#dc2626", fontSize: 13 }, children: pwError }),
-        pwSuccess && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { color: "#166534", fontSize: 13 }, children: pwSuccess }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "primary", onClick: handlePasswordChange, loading: pwLoading, style: { alignSelf: "flex-start", minWidth: 160 }, children: "Update password" })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: sectionTitle, children: "Change password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Input, { label: "Current password", type: "password", value: currentPw, onChange: setCurrentPw, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: "current-password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Input, { label: "New password", type: "password", value: newPw, onChange: setNewPw, placeholder: "Minimum 8 characters", autoComplete: "new-password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Input, { label: "Confirm new password", type: "password", value: confirmPw, onChange: setConfirmPw, placeholder: "Repeat new password", autoComplete: "new-password" }),
+        pwError && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { color: "#dc2626", fontSize: 13 }, children: pwError }),
+        pwSuccess && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { color: "#166534", fontSize: 13 }, children: pwSuccess }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "primary", onClick: handlePasswordChange, loading: pwLoading, style: { alignSelf: "flex-start", minWidth: 160 }, children: "Update password" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: sectionTitle, children: "Two-factor authentication" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 0" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontSize: 14, fontWeight: 500, color: theme.text }, children: "Authenticator app" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontSize: 13, color: theme.textMuted, marginTop: 2 }, children: mfaStatus?.enabled ? `Enabled \xB7 ${mfaStatus.backupCodesRemaining} backup codes remaining` : "Add extra security to your account" })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: sectionTitle, children: "Two-factor authentication" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 0" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: 14, fontWeight: 500, color: theme.text }, children: "Authenticator app" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: 13, color: theme.textMuted, marginTop: 2 }, children: mfaStatus?.enabled ? `Enabled \xB7 ${mfaStatus.backupCodesRemaining} backup codes remaining` : "Add extra security to your account" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "span",
           {
             style: {
@@ -2136,7 +2421,7 @@ function SecurityTab() {
               color: mfaStatus?.enabled ? "#166534" : theme.textMuted
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { width: 6, height: 6, borderRadius: "50%", background: mfaStatus?.enabled ? "#22c55e" : "#9ca3af", display: "inline-block" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { width: 6, height: 6, borderRadius: "50%", background: mfaStatus?.enabled ? "#22c55e" : "#9ca3af", display: "inline-block" } }),
               mfaStatus?.enabled ? "Enabled" : "Disabled"
             ]
           }
@@ -2148,10 +2433,10 @@ function SecurityTab() {
 function SessionsTab() {
   const theme = useTheme();
   const { client } = useAuthon();
-  const [sessions, setSessions] = (0, import_react18.useState)([]);
-  const [loading, setLoading] = (0, import_react18.useState)(true);
-  const [revoking, setRevoking] = (0, import_react18.useState)(null);
-  const loadSessions = (0, import_react18.useCallback)(async () => {
+  const [sessions, setSessions] = (0, import_react19.useState)([]);
+  const [loading, setLoading] = (0, import_react19.useState)(true);
+  const [revoking, setRevoking] = (0, import_react19.useState)(null);
+  const loadSessions = (0, import_react19.useCallback)(async () => {
     if (!client) return;
     setLoading(true);
     try {
@@ -2162,7 +2447,7 @@ function SessionsTab() {
       setLoading(false);
     }
   }, [client]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     loadSessions();
   }, [loadSessions]);
   const handleRevoke = async (sessionId) => {
@@ -2185,11 +2470,11 @@ function SessionsTab() {
     borderBottom: `1px solid ${theme.border}`
   };
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: 40 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { width: 24, height: 24, border: `3px solid ${theme.primaryStart}33`, borderTopColor: theme.primaryStart, borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.7s linear infinite" } }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: 40 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { width: 24, height: 24, border: `3px solid ${theme.primaryStart}33`, borderTopColor: theme.primaryStart, borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.7s linear infinite" } }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: sectionTitle, children: "Active sessions" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { color: theme.textMuted, fontSize: 14, textAlign: "center", padding: "24px 0" }, children: "No active sessions" }) : sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: sectionTitle, children: "Active sessions" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { color: theme.textMuted, fontSize: 14, textAlign: "center", padding: "24px 0" }, children: "No active sessions" }) : sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         style: {
@@ -2202,24 +2487,24 @@ function SessionsTab() {
           gap: 12
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12, flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { width: 36, height: 36, borderRadius: "50%", background: `${theme.primaryStart}18`, color: theme.primaryStart, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12, flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { width: 36, height: 36, borderRadius: "50%", background: `${theme.primaryStart}18`, color: theme.primaryStart, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { minWidth: 0 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { fontSize: 13, fontWeight: 500, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: session.userAgent ? session.userAgent.length > 50 ? session.userAgent.slice(0, 50) + "\u2026" : session.userAgent : "Unknown device" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { fontSize: 12, color: theme.textMuted, marginTop: 2 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { fontSize: 13, fontWeight: 500, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: session.userAgent ? session.userAgent.length > 50 ? session.userAgent.slice(0, 50) + "\u2026" : session.userAgent : "Unknown device" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { fontSize: 12, color: theme.textMuted, marginTop: 2 }, children: [
                 session.ipAddress ?? "Unknown IP",
-                session.lastActiveAt && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+                session.lastActiveAt && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
                   " \xB7 ",
                   formatRelative(session.lastActiveAt)
                 ] })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Button,
             {
               variant: "outline",
@@ -2247,7 +2532,7 @@ function formatRelative(dateStr) {
 }
 function UserProfilePanel() {
   const theme = useTheme();
-  const [tab, setTab] = (0, import_react18.useState)("profile");
+  const [tab, setTab] = (0, import_react19.useState)("profile");
   const panelStyle = {
     width: "100%",
     maxWidth: 640,
@@ -2282,9 +2567,9 @@ function UserProfilePanel() {
     { key: "security", label: "Security" },
     { key: "sessions", label: "Sessions" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: panelStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: tabBarStyle, children: tabs.map(({ key, label }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: panelStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: tabBarStyle, children: tabs.map(({ key, label }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         type: "button",
@@ -2294,26 +2579,26 @@ function UserProfilePanel() {
       },
       key
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: contentStyle, children: [
-      tab === "profile" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ProfileTab, {}),
-      tab === "security" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SecurityTab, {}),
-      tab === "sessions" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SessionsTab, {})
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: contentStyle, children: [
+      tab === "profile" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ProfileTab, {}),
+      tab === "security" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SecurityTab, {}),
+      tab === "sessions" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SessionsTab, {})
     ] })
   ] });
 }
 function UserProfile({ appearance }) {
   const { branding } = useBranding();
   const effectiveBranding = { ...branding, ...appearance?.variables ?? {} };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ThemeProvider, { branding: effectiveBranding, style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UserProfilePanel, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemeProvider, { branding: effectiveBranding, style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(UserProfilePanel, {}) });
 }
 
 // src/components/shared/ProviderIcon.tsx
 var import_js5 = require("@authon/js");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ProviderIcon({ provider, size = 20 }) {
   const config = (0, import_js5.getProviderButtonConfig)(provider);
   const svg = config.iconSvg.replace(/width="\d+"/, `width="${size}"`).replace(/height="\d+"/, `height="${size}"`);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "span",
     {
       style: { display: "flex", alignItems: "center", flexShrink: 0 },