@authon/react 0.2.0 → 0.3.0

package/dist/index.js

@@ -6,6 +6,7 @@ var AuthonContext = createContext(null);
 function AuthonProvider({ publishableKey, children, config }) {
   const [user, setUser] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [activeOrganization, setActiveOrganization] = useState(null);
   const clientRef = useRef(null);
   useEffect(() => {
     const client = new Authon(publishableKey, config);
@@ -33,6 +34,7 @@ function AuthonProvider({ publishableKey, children, config }) {
   const signOut = useCallback(async () => {
     await clientRef.current?.signOut();
     setUser(null);
+    setActiveOrganization(null);
   }, []);
   const openSignIn = useCallback(async () => {
     await clientRef.current?.openSignIn();
@@ -48,13 +50,15 @@ function AuthonProvider({ publishableKey, children, config }) {
       isSignedIn: !!user,
       isLoading,
       user,
+      activeOrganization,
+      setActiveOrganization,
       signOut,
       openSignIn,
       openSignUp,
       getToken,
       client: clientRef.current
     }),
-    [user, isLoading, signOut, openSignIn, openSignUp, getToken]
+    [user, isLoading, activeOrganization, signOut, openSignIn, openSignUp, getToken]
   );
   return /* @__PURE__ */ jsx(AuthonContext.Provider, { value, children });
 }
@@ -75,205 +79,2222 @@ function useUser() {
   return { user, isLoading };
 }
 
-// src/SignIn.tsx
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function SignIn({ mode = "popup" }) {
+// src/components/SignIn.tsx
+import { useState as useState5 } from "react";
+import { PROVIDER_COLORS, PROVIDER_DISPLAY_NAMES } from "@authon/shared";
+import { getProviderButtonConfig } from "@authon/js";
+
+// src/hooks/useBranding.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { DEFAULT_BRANDING } from "@authon/shared";
+var cache = /* @__PURE__ */ new Map();
+function useBranding() {
   const { client } = useAuthon();
-  const containerRef = useRef2(null);
+  const [state, setState] = useState2(() => {
+    const key = client?.publishableKey;
+    return cache.get(key ?? "") ?? { branding: DEFAULT_BRANDING, providers: [], isLoaded: false };
+  });
+  const fetchedRef = useRef2(false);
+  const fetchBranding = useCallback2(async () => {
+    if (!client || fetchedRef.current) return;
+    const key = client.publishableKey;
+    const cached = cache.get(key);
+    if (cached) {
+      setState(cached);
+      return;
+    }
+    fetchedRef.current = true;
+    try {
+      const providers = await client.getProviders();
+      const apiUrl = client.config?.apiUrl ?? "https://api.authon.dev";
+      const res = await fetch(`${apiUrl}/v1/auth/branding`, {
+        headers: { "x-api-key": key },
+        credentials: "include"
+      });
+      let branding = DEFAULT_BRANDING;
+      if (res.ok) {
+        const data = await res.json();
+        branding = { ...DEFAULT_BRANDING, ...data };
+      }
+      const next = { branding, providers, isLoaded: true };
+      cache.set(key, next);
+      setState(next);
+    } catch {
+      const fallback = { branding: DEFAULT_BRANDING, providers: [], isLoaded: true };
+      setState(fallback);
+    }
+  }, [client]);
   useEffect2(() => {
-    if (mode === "popup") {
-      client?.openSignIn();
+    fetchBranding();
+  }, [fetchBranding]);
+  return state;
+}
+
+// src/components/shared/ThemeProvider.tsx
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
+import { DEFAULT_BRANDING as DEFAULT_BRANDING2 } from "@authon/shared";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ThemeContext = createContext2(null);
+function useTheme() {
+  const ctx = useContext2(ThemeContext);
+  if (!ctx) {
+    return resolveTheme(DEFAULT_BRANDING2, false);
+  }
+  return ctx;
+}
+function resolveTheme(branding, _dark) {
+  const radius = branding.borderRadius ?? DEFAULT_BRANDING2.borderRadius ?? 12;
+  return {
+    primaryStart: branding.primaryColorStart ?? DEFAULT_BRANDING2.primaryColorStart ?? "#7c3aed",
+    primaryEnd: branding.primaryColorEnd ?? DEFAULT_BRANDING2.primaryColorEnd ?? "#4f46e5",
+    bg: branding.lightBg ?? DEFAULT_BRANDING2.lightBg ?? "#ffffff",
+    text: branding.lightText ?? DEFAULT_BRANDING2.lightText ?? "#111827",
+    textMuted: "#6b7280",
+    border: "#e5e7eb",
+    borderRadius: `${radius}px`,
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    inputStyle: "outline"
+  };
+}
+function ThemeProvider({ branding, children, overrides, style, className }) {
+  const merged = useMemo2(() => ({ ...branding, ...overrides }), [branding, overrides]);
+  const theme = useMemo2(() => resolveTheme(merged, false), [merged]);
+  const cssVars = {
+    "--authon-primary-start": theme.primaryStart,
+    "--authon-primary-end": theme.primaryEnd,
+    "--authon-bg": theme.bg,
+    "--authon-text": theme.text,
+    "--authon-text-muted": theme.textMuted,
+    "--authon-border": theme.border,
+    "--authon-radius": theme.borderRadius,
+    "--authon-font": theme.fontFamily
+  };
+  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className,
+      style: {
+        fontFamily: theme.fontFamily,
+        color: theme.text,
+        ...cssVars,
+        ...style
+      },
+      children
     }
-  }, [client, mode]);
-  if (mode === "embedded") {
-    return /* @__PURE__ */ jsx2("div", { ref: containerRef, id: "authon-signin-container" });
+  ) });
+}
+
+// src/components/shared/Input.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Input({
+  label,
+  error,
+  hint,
+  inputStyle,
+  onChange,
+  rightElement,
+  style: userStyle,
+  ...rest
+}) {
+  const theme = useTheme();
+  const [focused, setFocused] = useState3(false);
+  const resolvedStyle = inputStyle ?? theme.inputStyle;
+  const wrapperStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6,
+    width: "100%"
+  };
+  const labelStyle = {
+    fontSize: 13,
+    fontWeight: 500,
+    color: error ? "#ef4444" : theme.text
+  };
+  const inputContainerStyle = {
+    position: "relative",
+    display: "flex",
+    alignItems: "center"
+  };
+  const baseInputStyle = {
+    width: "100%",
+    height: 44,
+    paddingLeft: 14,
+    paddingRight: rightElement ? 44 : 14,
+    borderRadius: theme.borderRadius,
+    fontFamily: theme.fontFamily,
+    fontSize: 15,
+    color: theme.text,
+    outline: "none",
+    transition: "border-color 0.15s, box-shadow 0.15s, background 0.15s",
+    boxSizing: "border-box",
+    ...userStyle
+  };
+  let inputVariantStyle = {};
+  if (resolvedStyle === "filled") {
+    inputVariantStyle = {
+      background: focused ? `${theme.primaryStart}0d` : "#f3f4f6",
+      border: `1.5px solid ${error ? "#ef4444" : focused ? theme.primaryStart : "transparent"}`,
+      boxShadow: focused && !error ? `0 0 0 3px ${theme.primaryStart}22` : "none"
+    };
+  } else {
+    inputVariantStyle = {
+      background: theme.bg,
+      border: `1.5px solid ${error ? "#ef4444" : focused ? theme.primaryStart : theme.border}`,
+      boxShadow: focused && !error ? `0 0 0 3px ${theme.primaryStart}22` : "none"
+    };
+  }
+  const rightStyle = {
+    position: "absolute",
+    right: 12,
+    display: "flex",
+    alignItems: "center",
+    color: theme.textMuted
+  };
+  const hintStyle = {
+    fontSize: 12,
+    color: error ? "#ef4444" : theme.textMuted
+  };
+  return /* @__PURE__ */ jsxs("div", { style: wrapperStyle, children: [
+    label && /* @__PURE__ */ jsx3("label", { style: labelStyle, children: label }),
+    /* @__PURE__ */ jsxs("div", { style: inputContainerStyle, children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          ...rest,
+          style: { ...baseInputStyle, ...inputVariantStyle },
+          onFocus: (e) => {
+            setFocused(true);
+            rest.onFocus?.(e);
+          },
+          onBlur: (e) => {
+            setFocused(false);
+            rest.onBlur?.(e);
+          },
+          onChange: (e) => onChange?.(e.target.value)
+        }
+      ),
+      rightElement && /* @__PURE__ */ jsx3("div", { style: rightStyle, children: rightElement })
+    ] }),
+    (error || hint) && /* @__PURE__ */ jsx3("span", { style: hintStyle, children: error ?? hint })
+  ] });
+}
+
+// src/components/shared/Button.tsx
+import { useState as useState4 } from "react";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var SPINNER_STYLE = {
+  display: "inline-block",
+  width: 16,
+  height: 16,
+  border: "2px solid currentColor",
+  borderTopColor: "transparent",
+  borderRadius: "50%",
+  animation: "authon-spin 0.6s linear infinite",
+  flexShrink: 0
+};
+function Button({
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  loading = false,
+  disabled = false,
+  children,
+  onClick,
+  type = "button",
+  style: userStyle
+}) {
+  const theme = useTheme();
+  const [hovered, setHovered] = useState4(false);
+  const sizeMap = {
+    sm: { height: 36, paddingLeft: 12, paddingRight: 12, fontSize: 13 },
+    md: { height: 44, paddingLeft: 16, paddingRight: 16, fontSize: 15 },
+    lg: { height: 52, paddingLeft: 20, paddingRight: 20, fontSize: 16 }
+  };
+  const base = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    borderRadius: theme.borderRadius,
+    fontFamily: theme.fontFamily,
+    fontWeight: 600,
+    border: "none",
+    cursor: disabled || loading ? "not-allowed" : "pointer",
+    transition: "opacity 0.15s, transform 0.1s",
+    width: fullWidth ? "100%" : void 0,
+    opacity: disabled ? 0.55 : hovered && !disabled && !loading ? 0.88 : 1,
+    transform: hovered && !disabled && !loading ? "translateY(-1px)" : void 0,
+    userSelect: "none",
+    ...sizeMap[size]
+  };
+  let variantStyle = {};
+  switch (variant) {
+    case "primary":
+      variantStyle = {
+        background: `linear-gradient(135deg, ${theme.primaryStart}, ${theme.primaryEnd})`,
+        color: "#ffffff",
+        boxShadow: hovered ? `0 4px 16px ${theme.primaryStart}55` : "0 2px 8px rgba(0,0,0,0.1)"
+      };
+      break;
+    case "secondary":
+      variantStyle = {
+        background: `${theme.primaryStart}18`,
+        color: theme.primaryStart
+      };
+      break;
+    case "outline":
+      variantStyle = {
+        background: "transparent",
+        color: theme.text,
+        border: `1.5px solid ${theme.border}`
+      };
+      break;
+    case "ghost":
+      variantStyle = {
+        background: "transparent",
+        color: theme.textMuted
+      };
+      break;
+    case "social":
+      variantStyle = {
+        background: theme.bg,
+        color: theme.text,
+        border: `1.5px solid ${theme.border}`
+      };
+      break;
   }
-  return null;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type,
+        disabled: disabled || loading,
+        onClick,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: { ...base, ...variantStyle, ...userStyle },
+        children: loading ? /* @__PURE__ */ jsx4("span", { style: SPINNER_STYLE }) : children
+      }
+    )
+  ] });
+}
+
+// src/components/shared/Divider.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Divider({ label = "Or continue with" }) {
+  const theme = useTheme();
+  const containerStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 12,
+    margin: "4px 0"
+  };
+  const lineStyle = {
+    flex: 1,
+    height: 1,
+    background: theme.border
+  };
+  const textStyle = {
+    fontSize: 13,
+    color: theme.textMuted,
+    whiteSpace: "nowrap",
+    fontWeight: 400
+  };
+  return /* @__PURE__ */ jsxs3("div", { style: containerStyle, children: [
+    /* @__PURE__ */ jsx5("div", { style: lineStyle }),
+    /* @__PURE__ */ jsx5("span", { style: textStyle, children: label }),
+    /* @__PURE__ */ jsx5("div", { style: lineStyle })
+  ] });
 }
 
-// src/SignUp.tsx
-import { useEffect as useEffect3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function SignUp({ mode = "popup" }) {
+// src/components/SignIn.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
+  const theme = useTheme();
   const { client } = useAuthon();
-  useEffect3(() => {
-    if (mode === "popup") {
-      client?.openSignUp();
+  const { branding, providers, isLoaded } = useBranding();
+  const [email, setEmail] = useState5("");
+  const [password, setPassword] = useState5("");
+  const [showPassword, setShowPassword] = useState5(false);
+  const [loading, setLoading] = useState5(false);
+  const [oauthLoading, setOauthLoading] = useState5(null);
+  const [error, setError] = useState5("");
+  const [fieldErrors, setFieldErrors] = useState5({});
+  const validate = () => {
+    const errs = {};
+    if (!email.trim()) errs.email = "Email is required";
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errs.email = "Invalid email address";
+    if (!password) errs.password = "Password is required";
+    setFieldErrors(errs);
+    return Object.keys(errs).length === 0;
+  };
+  const handleSubmit = async () => {
+    if (!validate() || !client) return;
+    setLoading(true);
+    setError("");
+    try {
+      await client.signInWithEmail(email, password);
+      if (afterSignInUrl) window.location.assign(afterSignInUrl);
+      onSignIn?.();
+    } catch (e) {
+      setError(e?.message ?? "Sign in failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleOAuth = async (provider) => {
+    if (!client) return;
+    setOauthLoading(provider);
+    setError("");
+    try {
+      await client.signInWithOAuth(provider);
+    } catch (e) {
+      setError(e?.message ?? "OAuth sign in failed");
+    } finally {
+      setOauthLoading(null);
     }
-  }, [client, mode]);
-  if (mode === "embedded") {
-    return /* @__PURE__ */ jsx3("div", { id: "authon-signup-container" });
+  };
+  const cardStyle = {
+    width: "100%",
+    maxWidth: 440,
+    background: theme.bg,
+    borderRadius: `calc(${theme.borderRadius} + 4px)`,
+    boxShadow: "0 4px 32px rgba(0,0,0,0.10)",
+    padding: "40px 36px 32px",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    gap: 20,
+    fontFamily: theme.fontFamily
+  };
+  const logoStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 10
+  };
+  const titleStyle = {
+    fontSize: 24,
+    fontWeight: 700,
+    color: theme.text,
+    textAlign: "center",
+    letterSpacing: "-0.3px"
+  };
+  const subtitleStyle = {
+    fontSize: 14,
+    color: theme.textMuted,
+    textAlign: "center",
+    marginTop: -12
+  };
+  const errorBoxStyle = {
+    padding: "10px 14px",
+    borderRadius: theme.borderRadius,
+    background: "#fef2f2",
+    border: "1px solid #fecaca",
+    color: "#dc2626",
+    fontSize: 13
+  };
+  const forgotStyle = {
+    textAlign: "right",
+    marginTop: -12
+  };
+  const linkStyle = {
+    fontSize: 13,
+    color: theme.primaryStart,
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    padding: 0,
+    fontFamily: theme.fontFamily,
+    textDecoration: "none"
+  };
+  const footerStyle = {
+    textAlign: "center",
+    fontSize: 14,
+    color: theme.textMuted,
+    paddingTop: 4
+  };
+  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";
+  const showEmailPw = branding.showEmailPassword !== false;
+  const showDivider = branding.showDivider !== false && providers.length > 0 && showEmailPw;
+  const providersToShow = providers.filter(
+    (p) => !(branding.hiddenProviders ?? []).includes(p)
+  );
+  if (!isLoaded) {
+    return /* @__PURE__ */ jsx6("div", { style: { ...cardStyle, alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx6(
+      "span",
+      {
+        style: {
+          width: 28,
+          height: 28,
+          border: `3px solid ${theme.primaryStart}33`,
+          borderTopColor: theme.primaryStart,
+          borderRadius: "50%",
+          display: "inline-block",
+          animation: "authon-spin 0.7s linear infinite"
+        }
+      }
+    ) });
   }
-  return null;
+  return /* @__PURE__ */ jsxs4("div", { style: cardStyle, children: [
+    /* @__PURE__ */ jsxs4("div", { style: logoStyle, children: [
+      branding.logoDataUrl && /* @__PURE__ */ jsx6("img", { src: branding.logoDataUrl, alt: branding.brandName ?? "Logo", style: { height: 40, objectFit: "contain" } }),
+      /* @__PURE__ */ jsx6("h1", { style: titleStyle, children: "Sign in" }),
+      branding.brandName && /* @__PURE__ */ jsxs4("p", { style: subtitleStyle, children: [
+        "to ",
+        branding.brandName
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx6("div", { style: errorBoxStyle, children: error }),
+    providersToShow.length > 0 && /* @__PURE__ */ jsx6("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: providersToShow.length <= 3 ? providersToShow.map((provider) => /* @__PURE__ */ jsx6(
+      OAuthButton,
+      {
+        provider,
+        loading: oauthLoading === provider,
+        disabled: !!oauthLoading || loading,
+        onClick: () => handleOAuth(provider),
+        borderRadius: theme.borderRadius
+      },
+      provider
+    )) : /* @__PURE__ */ jsx6("div", { style: { display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }, children: providersToShow.map((provider) => /* @__PURE__ */ jsx6(
+      CompactOAuthButton,
+      {
+        provider,
+        loading: oauthLoading === provider,
+        disabled: !!oauthLoading || loading,
+        onClick: () => handleOAuth(provider),
+        borderRadius: theme.borderRadius
+      },
+      provider
+    )) }) }),
+    showDivider && /* @__PURE__ */ jsx6(Divider, {}),
+    showEmailPw && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx6(
+        Input,
+        {
+          label: "Email",
+          type: "email",
+          placeholder: "you@example.com",
+          value: email,
+          onChange: setEmail,
+          error: fieldErrors.email,
+          autoComplete: "email"
+        }
+      ),
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+        /* @__PURE__ */ jsx6(
+          Input,
+          {
+            label: "Password",
+            type: showPassword ? "text" : "password",
+            placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+            value: password,
+            onChange: setPassword,
+            error: fieldErrors.password,
+            autoComplete: "current-password",
+            rightElement: /* @__PURE__ */ jsx6(
+              "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__ */ jsx6("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: eyeIconPath }) })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx6("div", { style: forgotStyle, children: /* @__PURE__ */ jsx6("button", { type: "button", style: linkStyle, children: "Forgot password?" }) })
+      ] }),
+      /* @__PURE__ */ jsx6(
+        Button,
+        {
+          variant: "primary",
+          fullWidth: true,
+          loading,
+          disabled: !!oauthLoading,
+          onClick: handleSubmit,
+          children: "Sign in"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: footerStyle, children: [
+      "Don't have an account?",
+      " ",
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          style: linkStyle,
+          onClick: onNavigateSignUp,
+          children: "Sign up"
+        }
+      )
+    ] }),
+    branding.showSecuredBy !== false && /* @__PURE__ */ jsx6(SecuredByAuthon, { primaryStart: theme.primaryStart, textMuted: theme.textMuted }),
+    branding.termsUrl || branding.privacyUrl ? /* @__PURE__ */ jsxs4("div", { style: { textAlign: "center", fontSize: 11, color: theme.textMuted, marginTop: -8 }, children: [
+      branding.termsUrl && /* @__PURE__ */ jsx6("a", { href: branding.termsUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.textMuted }, children: "Terms" }),
+      branding.termsUrl && branding.privacyUrl && " \xB7 ",
+      branding.privacyUrl && /* @__PURE__ */ jsx6("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] = useState5(false);
+  const colors = PROVIDER_COLORS[provider] ?? { bg: "#333", text: "#fff" };
+  const name = PROVIDER_DISPLAY_NAMES[provider] ?? provider;
+  const config = getProviderButtonConfig(provider);
+  const needsBorder = colors.bg.toLowerCase() === "#ffffff";
+  const style = {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    width: "100%",
+    height: 44,
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderRadius,
+    background: colors.bg,
+    color: colors.text,
+    border: needsBorder ? "1.5px solid #dadce0" : "none",
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontSize: 15,
+    fontWeight: 600,
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    justifyContent: "center",
+    opacity: disabled ? 0.6 : hovered ? 0.88 : 1,
+    transition: "opacity 0.15s",
+    boxSizing: "border-box"
+  };
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      style,
+      onClick,
+      disabled,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      "aria-label": `Continue with ${name}`,
+      children: loading ? /* @__PURE__ */ jsx6("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__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsx6("span", { style: { display: "flex", alignItems: "center" }, dangerouslySetInnerHTML: { __html: config.iconSvg } }),
+        /* @__PURE__ */ jsxs4("span", { children: [
+          "Continue with ",
+          name
+        ] })
+      ] })
+    }
+  );
+}
+function CompactOAuthButton({ provider, loading, disabled, onClick, borderRadius }) {
+  const [hovered, setHovered] = useState5(false);
+  const colors = PROVIDER_COLORS[provider] ?? { bg: "#333", text: "#fff" };
+  const name = PROVIDER_DISPLAY_NAMES[provider] ?? provider;
+  const config = getProviderButtonConfig(provider);
+  const needsBorder = colors.bg.toLowerCase() === "#ffffff";
+  const style = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 48,
+    height: 48,
+    borderRadius,
+    background: colors.bg,
+    border: needsBorder ? "1.5px solid #dadce0" : "none",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.6 : hovered ? 0.85 : 1,
+    transition: "opacity 0.15s",
+    padding: 0
+  };
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      style,
+      onClick,
+      disabled,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      "aria-label": `Continue with ${name}`,
+      children: loading ? /* @__PURE__ */ jsx6("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__ */ jsx6("span", { style: { display: "flex" }, dangerouslySetInnerHTML: { __html: config.iconSvg } })
+    }
+  );
+}
+function SecuredByAuthon({ primaryStart, textMuted }) {
+  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 5, marginTop: -8 }, children: [
+    /* @__PURE__ */ jsxs4("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx6("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__ */ jsx6("path", { d: "M4 7L5.5 8.5L8.5 5.5", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+    ] }),
+    /* @__PURE__ */ jsxs4("span", { style: { fontSize: 11, color: textMuted }, children: [
+      "Secured by",
+      " ",
+      /* @__PURE__ */ jsx6("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 }) {
+  const { branding, isLoaded } = useBranding();
+  const effectiveBranding = isLoaded ? { ...branding, ...appearance?.variables ?? {} } : branding;
+  return /* @__PURE__ */ jsxs4(ThemeProvider, { branding: effectiveBranding, overrides: appearance?.variables, style: { display: "flex", justifyContent: "center" }, children: [
+    /* @__PURE__ */ jsx6("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ jsx6(
+      SignInCard,
+      {
+        afterSignInUrl,
+        onSignIn,
+        onNavigateSignUp
+      }
+    )
+  ] });
 }
 
-// src/UserButton.tsx
-import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef3, useState as useState2 } from "react";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-function UserButton() {
-  const { user, signOut, openSignIn, isSignedIn } = useAuthon();
-  const [open, setOpen] = useState2(false);
+// src/components/SignUp.tsx
+import { useState as useState6 } from "react";
+import { PROVIDER_COLORS as PROVIDER_COLORS2, PROVIDER_DISPLAY_NAMES as PROVIDER_DISPLAY_NAMES2 } from "@authon/shared";
+import { getProviderButtonConfig as getProviderButtonConfig2 } from "@authon/js";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
+  const theme = useTheme();
+  const { client } = useAuthon();
+  const { branding, providers, isLoaded } = useBranding();
+  const [displayName, setDisplayName] = useState6("");
+  const [email, setEmail] = useState6("");
+  const [password, setPassword] = useState6("");
+  const [confirmPassword, setConfirmPassword] = useState6("");
+  const [showPassword, setShowPassword] = useState6(false);
+  const [loading, setLoading] = useState6(false);
+  const [oauthLoading, setOauthLoading] = useState6(null);
+  const [error, setError] = useState6("");
+  const [fieldErrors, setFieldErrors] = useState6({});
+  const validate = () => {
+    const errs = {};
+    if (!email.trim()) errs.email = "Email is required";
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errs.email = "Invalid email address";
+    if (!password) errs.password = "Password is required";
+    else if (password.length < 8) errs.password = "Password must be at least 8 characters";
+    if (confirmPassword !== password) errs.confirmPassword = "Passwords do not match";
+    setFieldErrors(errs);
+    return Object.keys(errs).length === 0;
+  };
+  const handleSubmit = async () => {
+    if (!validate() || !client) return;
+    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");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleOAuth = async (provider) => {
+    if (!client) return;
+    setOauthLoading(provider);
+    setError("");
+    try {
+      await client.signInWithOAuth(provider);
+    } catch (e) {
+      setError(e?.message ?? "OAuth sign in failed");
+    } finally {
+      setOauthLoading(null);
+    }
+  };
+  const cardStyle = {
+    width: "100%",
+    maxWidth: 440,
+    background: theme.bg,
+    borderRadius: `calc(${theme.borderRadius} + 4px)`,
+    boxShadow: "0 4px 32px rgba(0,0,0,0.10)",
+    padding: "40px 36px 32px",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    gap: 20,
+    fontFamily: theme.fontFamily
+  };
+  const logoStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 10
+  };
+  const titleStyle = {
+    fontSize: 24,
+    fontWeight: 700,
+    color: theme.text,
+    textAlign: "center",
+    letterSpacing: "-0.3px"
+  };
+  const subtitleStyle = {
+    fontSize: 14,
+    color: theme.textMuted,
+    textAlign: "center",
+    marginTop: -12
+  };
+  const errorBoxStyle = {
+    padding: "10px 14px",
+    borderRadius: theme.borderRadius,
+    background: "#fef2f2",
+    border: "1px solid #fecaca",
+    color: "#dc2626",
+    fontSize: 13
+  };
+  const linkStyle = {
+    fontSize: 13,
+    color: theme.primaryStart,
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    padding: 0,
+    fontFamily: theme.fontFamily,
+    textDecoration: "none"
+  };
+  const footerStyle = {
+    textAlign: "center",
+    fontSize: 14,
+    color: theme.textMuted,
+    paddingTop: 4
+  };
+  const showEmailPw = branding.showEmailPassword !== false;
+  const showDivider = branding.showDivider !== false && providers.length > 0 && showEmailPw;
+  const providersToShow = providers.filter(
+    (p) => !(branding.hiddenProviders ?? []).includes(p)
+  );
+  if (!isLoaded) {
+    return /* @__PURE__ */ jsx7("div", { style: { ...cardStyle, alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx7(
+      "span",
+      {
+        style: {
+          width: 28,
+          height: 28,
+          border: `3px solid ${theme.primaryStart}33`,
+          borderTopColor: theme.primaryStart,
+          borderRadius: "50%",
+          display: "inline-block",
+          animation: "authon-spin 0.7s linear infinite"
+        }
+      }
+    ) });
+  }
+  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__ */ jsxs5("div", { style: cardStyle, children: [
+    /* @__PURE__ */ jsxs5("div", { style: logoStyle, children: [
+      branding.logoDataUrl && /* @__PURE__ */ jsx7("img", { src: branding.logoDataUrl, alt: branding.brandName ?? "Logo", style: { height: 40, objectFit: "contain" } }),
+      /* @__PURE__ */ jsx7("h1", { style: titleStyle, children: "Create account" }),
+      branding.brandName && /* @__PURE__ */ jsxs5("p", { style: subtitleStyle, children: [
+        "Join ",
+        branding.brandName
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx7("div", { style: errorBoxStyle, children: error }),
+    providersToShow.length > 0 && /* @__PURE__ */ jsx7("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: providersToShow.length <= 3 ? providersToShow.map((provider) => /* @__PURE__ */ jsx7(
+      OAuthButtonFull,
+      {
+        provider,
+        loading: oauthLoading === provider,
+        disabled: !!oauthLoading || loading,
+        onClick: () => handleOAuth(provider),
+        borderRadius: theme.borderRadius
+      },
+      provider
+    )) : /* @__PURE__ */ jsx7("div", { style: { display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }, children: providersToShow.map((provider) => /* @__PURE__ */ jsx7(
+      CompactOAuthBtn,
+      {
+        provider,
+        loading: oauthLoading === provider,
+        disabled: !!oauthLoading || loading,
+        onClick: () => handleOAuth(provider),
+        borderRadius: theme.borderRadius
+      },
+      provider
+    )) }) }),
+    showDivider && /* @__PURE__ */ jsx7(Divider, {}),
+    showEmailPw && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx7(
+        Input,
+        {
+          label: "Display name",
+          type: "text",
+          placeholder: "Your name",
+          value: displayName,
+          onChange: setDisplayName,
+          error: fieldErrors.displayName,
+          autoComplete: "name"
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        Input,
+        {
+          label: "Email",
+          type: "email",
+          placeholder: "you@example.com",
+          value: email,
+          onChange: setEmail,
+          error: fieldErrors.email,
+          autoComplete: "email"
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        Input,
+        {
+          label: "Password",
+          type: showPassword ? "text" : "password",
+          placeholder: "Minimum 8 characters",
+          value: password,
+          onChange: setPassword,
+          error: fieldErrors.password,
+          autoComplete: "new-password",
+          rightElement: /* @__PURE__ */ jsx7(
+            "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__ */ jsx7("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: eyeIconPath }) })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        Input,
+        {
+          label: "Confirm password",
+          type: showPassword ? "text" : "password",
+          placeholder: "Repeat password",
+          value: confirmPassword,
+          onChange: setConfirmPassword,
+          error: fieldErrors.confirmPassword,
+          autoComplete: "new-password"
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        Button,
+        {
+          variant: "primary",
+          fullWidth: true,
+          loading,
+          disabled: !!oauthLoading,
+          onClick: handleSubmit,
+          children: "Create account"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: footerStyle, children: [
+      "Already have an account?",
+      " ",
+      /* @__PURE__ */ jsx7("button", { type: "button", style: linkStyle, onClick: onNavigateSignIn, children: "Sign in" })
+    ] }),
+    branding.showSecuredBy !== false && /* @__PURE__ */ jsx7(SecuredByAuthon2, { primaryStart: theme.primaryStart, textMuted: theme.textMuted }),
+    branding.termsUrl || branding.privacyUrl ? /* @__PURE__ */ jsxs5("div", { style: { textAlign: "center", fontSize: 11, color: theme.textMuted, marginTop: -8 }, children: [
+      "By creating an account you agree to our",
+      " ",
+      branding.termsUrl && /* @__PURE__ */ jsx7("a", { href: branding.termsUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.primaryStart }, children: "Terms" }),
+      branding.termsUrl && branding.privacyUrl && " and ",
+      branding.privacyUrl && /* @__PURE__ */ jsx7("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] = useState6(false);
+  const colors = PROVIDER_COLORS2[provider] ?? { bg: "#333", text: "#fff" };
+  const name = PROVIDER_DISPLAY_NAMES2[provider] ?? provider;
+  const config = getProviderButtonConfig2(provider);
+  const needsBorder = colors.bg.toLowerCase() === "#ffffff";
+  const style = {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    width: "100%",
+    height: 44,
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderRadius,
+    background: colors.bg,
+    color: colors.text,
+    border: needsBorder ? "1.5px solid #dadce0" : "none",
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontSize: 15,
+    fontWeight: 600,
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    justifyContent: "center",
+    opacity: disabled ? 0.6 : hovered ? 0.88 : 1,
+    transition: "opacity 0.15s",
+    boxSizing: "border-box"
+  };
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      style,
+      onClick,
+      disabled,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      "aria-label": `Continue with ${name}`,
+      children: loading ? /* @__PURE__ */ jsx7("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__ */ jsxs5(Fragment3, { children: [
+        /* @__PURE__ */ jsx7("span", { style: { display: "flex", alignItems: "center" }, dangerouslySetInnerHTML: { __html: config.iconSvg } }),
+        /* @__PURE__ */ jsxs5("span", { children: [
+          "Continue with ",
+          name
+        ] })
+      ] })
+    }
+  );
+}
+function CompactOAuthBtn({ provider, loading, disabled, onClick, borderRadius }) {
+  const [hovered, setHovered] = useState6(false);
+  const colors = PROVIDER_COLORS2[provider] ?? { bg: "#333", text: "#fff" };
+  const name = PROVIDER_DISPLAY_NAMES2[provider] ?? provider;
+  const config = getProviderButtonConfig2(provider);
+  const needsBorder = colors.bg.toLowerCase() === "#ffffff";
+  const style = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 48,
+    height: 48,
+    borderRadius,
+    background: colors.bg,
+    border: needsBorder ? "1.5px solid #dadce0" : "none",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.6 : hovered ? 0.85 : 1,
+    transition: "opacity 0.15s",
+    padding: 0
+  };
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      style,
+      onClick,
+      disabled,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      "aria-label": `Continue with ${name}`,
+      children: loading ? /* @__PURE__ */ jsx7("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__ */ jsx7("span", { style: { display: "flex" }, dangerouslySetInnerHTML: { __html: config.iconSvg } })
+    }
+  );
+}
+function SecuredByAuthon2({ primaryStart, textMuted }) {
+  return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 5, marginTop: -8 }, children: [
+    /* @__PURE__ */ jsxs5("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx7("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__ */ jsx7("path", { d: "M4 7L5.5 8.5L8.5 5.5", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+    ] }),
+    /* @__PURE__ */ jsxs5("span", { style: { fontSize: 11, color: textMuted }, children: [
+      "Secured by",
+      " ",
+      /* @__PURE__ */ jsx7("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__ */ jsxs5(ThemeProvider, { branding: effectiveBranding, overrides: appearance?.variables, style: { display: "flex", justifyContent: "center" }, children: [
+    /* @__PURE__ */ jsx7("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ jsx7(
+      SignUpCard,
+      {
+        afterSignUpUrl,
+        onSignUp,
+        onNavigateSignIn
+      }
+    )
+  ] });
+}
+
+// src/components/UserButton.tsx
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState7 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function UserAvatar({
+  avatarUrl,
+  displayName,
+  email,
+  size,
+  primaryStart,
+  primaryEnd
+}) {
+  const initials = displayName ? displayName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : (email?.[0] ?? "?").toUpperCase();
+  const avatarStyle = {
+    width: size,
+    height: size,
+    borderRadius: "50%",
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: avatarUrl ? "transparent" : `linear-gradient(135deg, ${primaryStart}, ${primaryEnd})`,
+    color: "#fff",
+    fontSize: size * 0.38,
+    fontWeight: 700,
+    userSelect: "none"
+  };
+  return /* @__PURE__ */ jsx8("div", { style: avatarStyle, children: avatarUrl ? /* @__PURE__ */ jsx8("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] = useState7(false);
   const dropdownRef = useRef3(null);
-  const handleClickOutside = useCallback2((e) => {
+  const handleClickOutside = useCallback3((e) => {
     if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
       setOpen(false);
     }
   }, []);
-  useEffect4(() => {
-    if (open) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
+  useEffect3(() => {
+    if (open) document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open, handleClickOutside]);
   if (!isSignedIn) {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx8(
       "button",
       {
+        type: "button",
         onClick: () => openSignIn(),
         style: {
-          padding: "8px 16px",
-          borderRadius: "8px",
+          padding: "8px 18px",
+          borderRadius: theme.borderRadius,
           border: "none",
-          background: "linear-gradient(135deg, #7c3aed, #4f46e5)",
+          background: `linear-gradient(135deg, ${theme.primaryStart}, ${theme.primaryEnd})`,
           color: "#fff",
           cursor: "pointer",
-          fontSize: "14px",
-          fontWeight: 600
+          fontSize: 14,
+          fontWeight: 600,
+          fontFamily: theme.fontFamily
         },
         children: "Sign In"
       }
     );
   }
-  const initials = user?.displayName ? user.displayName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : (user?.email?.[0] ?? "?").toUpperCase();
-  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx4(
-      "button",
+  const triggerStyle = {
+    width: 38,
+    height: 38,
+    borderRadius: "50%",
+    border: `2px solid ${theme.primaryStart}`,
+    background: "none",
+    cursor: "pointer",
+    padding: 1,
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const dropdownStyle = {
+    position: "absolute",
+    right: 0,
+    top: 46,
+    minWidth: 240,
+    background: theme.bg,
+    border: `1px solid ${theme.border}`,
+    borderRadius: theme.borderRadius,
+    boxShadow: "0 8px 32px rgba(0,0,0,0.13)",
+    zIndex: 9999,
+    overflow: "hidden",
+    fontFamily: theme.fontFamily
+  };
+  const headerStyle = {
+    padding: "14px 16px",
+    borderBottom: `1px solid ${theme.border}`,
+    display: "flex",
+    alignItems: "center",
+    gap: 12
+  };
+  const menuItemStyle = (danger) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    width: "100%",
+    padding: "10px 16px",
+    textAlign: "left",
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    fontSize: 14,
+    color: danger ? "#ef4444" : theme.text,
+    fontWeight: 500,
+    fontFamily: theme.fontFamily,
+    boxSizing: "border-box"
+  });
+  return /* @__PURE__ */ jsxs6("div", { ref: dropdownRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx8("button", { type: "button", style: triggerStyle, onClick: () => setOpen((v) => !v), "aria-label": "User menu", children: /* @__PURE__ */ jsx8(
+      UserAvatar,
       {
-        onClick: () => setOpen((v) => !v),
-        style: {
-          width: "36px",
-          height: "36px",
-          borderRadius: "50%",
-          border: "2px solid #7c3aed",
-          background: user?.avatarUrl ? "transparent" : "linear-gradient(135deg, #7c3aed, #4f46e5)",
-          cursor: "pointer",
-          padding: 0,
-          overflow: "hidden",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "#fff",
-          fontSize: "13px",
-          fontWeight: 700
-        },
-        children: user?.avatarUrl ? /* @__PURE__ */ jsx4(
-          "img",
+        avatarUrl: user?.avatarUrl,
+        displayName: user?.displayName,
+        email: user?.email,
+        size: 32,
+        primaryStart: theme.primaryStart,
+        primaryEnd: theme.primaryEnd
+      }
+    ) }),
+    open && /* @__PURE__ */ jsxs6("div", { style: dropdownStyle, children: [
+      /* @__PURE__ */ jsxs6("div", { style: headerStyle, children: [
+        /* @__PURE__ */ jsx8(
+          UserAvatar,
           {
-            src: user.avatarUrl,
-            alt: user.displayName ?? "avatar",
-            style: { width: "100%", height: "100%", objectFit: "cover" }
+            avatarUrl: user?.avatarUrl,
+            displayName: user?.displayName,
+            email: user?.email,
+            size: 40,
+            primaryStart: theme.primaryStart,
+            primaryEnd: theme.primaryEnd
           }
-        ) : initials
-      }
-    ),
-    open && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          right: 0,
-          top: "44px",
-          minWidth: "200px",
-          background: "#fff",
-          border: "1px solid #e5e7eb",
-          borderRadius: "12px",
-          boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
-          zIndex: 9999,
-          overflow: "hidden"
-        },
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                padding: "12px 16px",
-                borderBottom: "1px solid #f3f4f6"
-              },
-              children: [
-                user?.displayName && /* @__PURE__ */ jsx4("div", { style: { fontSize: "14px", fontWeight: 600, color: "#111827" }, children: user.displayName }),
-                user?.email && /* @__PURE__ */ jsx4("div", { style: { fontSize: "12px", color: "#6b7280", marginTop: "2px" }, children: user.email })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx4(
-            "button",
-            {
-              onClick: async () => {
-                setOpen(false);
-                await signOut();
-              },
-              style: {
-                display: "block",
-                width: "100%",
-                padding: "10px 16px",
-                textAlign: "left",
-                background: "none",
-                border: "none",
-                cursor: "pointer",
-                fontSize: "14px",
-                color: "#ef4444",
-                fontWeight: 500
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.background = "#fef2f2";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.background = "none";
-              },
-              children: "Sign out"
-            }
-          )
-        ]
-      }
-    )
+        ),
+        /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
+          user?.displayName && /* @__PURE__ */ jsx8("div", { style: { fontSize: 14, fontWeight: 600, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: user.displayName }),
+          user?.email && /* @__PURE__ */ jsx8("div", { style: { fontSize: 12, color: theme.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 1 }, children: user.email })
+        ] })
+      ] }),
+      activeOrganization && /* @__PURE__ */ jsx8(
+        OrgSwitcherRow,
+        {
+          org: activeOrganization,
+          primaryStart: theme.primaryStart,
+          theme,
+          client
+        }
+      ),
+      userProfileUrl && /* @__PURE__ */ jsx8(
+        MenuButton,
+        {
+          style: menuItemStyle(),
+          onClick: () => {
+            setOpen(false);
+            window.location.assign(userProfileUrl);
+          },
+          icon: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx8("path", { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" }),
+            /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "7", r: "4" })
+          ] }),
+          children: "Manage account"
+        }
+      ),
+      /* @__PURE__ */ jsx8("div", { style: { borderTop: `1px solid ${theme.border}` }, children: /* @__PURE__ */ jsx8(
+        MenuButton,
+        {
+          style: menuItemStyle(true),
+          onClick: async () => {
+            setOpen(false);
+            await signOut();
+            if (afterSignOutUrl) window.location.assign(afterSignOutUrl);
+          },
+          icon: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx8("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" }),
+            /* @__PURE__ */ jsx8("polyline", { points: "16 17 21 12 16 7" }),
+            /* @__PURE__ */ jsx8("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+          ] }),
+          children: "Sign out"
+        }
+      ) })
+    ] })
   ] });
 }
+function MenuButton({
+  style: baseStyle2,
+  onClick,
+  icon,
+  children
+}) {
+  const [hovered, setHovered] = useState7(false);
+  return /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      style: {
+        ...baseStyle2,
+        background: hovered ? baseStyle2.color === "#ef4444" ? "#fef2f2" : "#f9fafb" : "none"
+      },
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+function OrgSwitcherRow({
+  org,
+  primaryStart,
+  theme,
+  client
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      style: {
+        padding: "8px 16px",
+        borderBottom: `1px solid ${theme.border}`,
+        display: "flex",
+        alignItems: "center",
+        gap: 10
+      },
+      children: [
+        org.logoUrl ? /* @__PURE__ */ jsx8("img", { src: org.logoUrl, alt: org.name, style: { width: 24, height: 24, borderRadius: 6, objectFit: "cover" } }) : /* @__PURE__ */ jsx8(
+          "div",
+          {
+            style: {
+              width: 24,
+              height: 24,
+              borderRadius: 6,
+              background: `${primaryStart}22`,
+              color: primaryStart,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 11,
+              fontWeight: 700
+            },
+            children: org.name[0]?.toUpperCase()
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx8("div", { style: { fontSize: 12, color: theme.textMuted }, children: "Organization" }),
+          /* @__PURE__ */ jsx8("div", { style: { fontSize: 13, fontWeight: 600, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: org.name })
+        ] })
+      ]
+    }
+  );
+}
+function UserButton({ appearance, afterSignOutUrl, userProfileUrl }) {
+  const { branding } = useBranding();
+  const effectiveBranding = { ...branding, ...appearance?.variables ?? {} };
+  return /* @__PURE__ */ jsx8(ThemeProvider, { branding: effectiveBranding, style: { display: "inline-block" }, children: /* @__PURE__ */ jsx8(UserButtonInner, { afterSignOutUrl, userProfileUrl }) });
+}
 
 // src/SignedIn.tsx
-import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9 } from "react/jsx-runtime";
 function SignedIn({ children }) {
   const { isSignedIn, isLoading } = useAuthon();
   if (isLoading || !isSignedIn) return null;
-  return /* @__PURE__ */ jsx5(Fragment, { children });
+  return /* @__PURE__ */ jsx9(Fragment4, { children });
 }
 
 // src/SignedOut.tsx
-import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx10 } from "react/jsx-runtime";
 function SignedOut({ children }) {
   const { isSignedIn, isLoading } = useAuthon();
   if (isLoading || isSignedIn) return null;
-  return /* @__PURE__ */ jsx6(Fragment2, { children });
+  return /* @__PURE__ */ jsx10(Fragment5, { children });
 }
 
 // src/Protect.tsx
-import { Fragment as Fragment3, jsx as jsx7 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx11 } from "react/jsx-runtime";
 function Protect({ children, fallback = null, condition }) {
   const { isSignedIn, isLoading, user } = useAuthon();
   if (isLoading) return null;
-  if (!isSignedIn || !user) return /* @__PURE__ */ jsx7(Fragment3, { children: fallback });
-  if (condition && !condition(user)) return /* @__PURE__ */ jsx7(Fragment3, { children: fallback });
-  return /* @__PURE__ */ jsx7(Fragment3, { children });
+  if (!isSignedIn || !user) return /* @__PURE__ */ jsx11(Fragment6, { children: fallback });
+  if (condition && !condition(user)) return /* @__PURE__ */ jsx11(Fragment6, { children: fallback });
+  return /* @__PURE__ */ jsx11(Fragment6, { children });
+}
+
+// src/SocialButton.tsx
+import { PROVIDER_COLORS as PROVIDER_COLORS3, PROVIDER_DISPLAY_NAMES as PROVIDER_DISPLAY_NAMES3 } from "@authon/shared";
+import { getProviderButtonConfig as getProviderButtonConfig3 } from "@authon/js";
+import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var baseStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 10,
+  paddingLeft: 16,
+  paddingRight: 16,
+  border: "none",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  transition: "opacity 0.15s",
+  width: "100%"
+};
+var compactBaseStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "none",
+  cursor: "pointer",
+  transition: "opacity 0.15s",
+  padding: 0
+};
+function SocialButton({
+  provider,
+  onClick,
+  loading = false,
+  disabled = false,
+  label,
+  compact = false,
+  className,
+  style: userStyle,
+  iconSize,
+  borderRadius = 10,
+  height = 48,
+  size = 48
+}) {
+  const colors = PROVIDER_COLORS3[provider] || { bg: "#333", text: "#fff" };
+  const displayName = PROVIDER_DISPLAY_NAMES3[provider] || provider;
+  const buttonLabel = label ?? `Continue with ${displayName}`;
+  const needsBorder = colors.bg.toLowerCase() === "#ffffff";
+  const resolvedIconSize = iconSize ?? (compact ? 24 : 20);
+  const config = getProviderButtonConfig3(provider);
+  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__ */ jsx12(
+      "button",
+      {
+        className,
+        style: {
+          ...compactBaseStyle,
+          backgroundColor: colors.bg,
+          borderRadius,
+          width: size,
+          height: size,
+          ...borderProps,
+          ...userStyle
+        },
+        onClick: () => onClick(provider),
+        disabled: disabled || loading,
+        "aria-label": `Sign in with ${displayName}`,
+        children: loading ? /* @__PURE__ */ jsx12(
+          "span",
+          {
+            style: {
+              display: "inline-block",
+              width: 16,
+              height: 16,
+              border: `2px solid ${colors.text}`,
+              borderTopColor: "transparent",
+              borderRadius: "50%",
+              animation: "authon-spin 0.6s linear infinite"
+            }
+          }
+        ) : /* @__PURE__ */ jsx12(
+          "span",
+          {
+            style: { display: "flex", alignItems: "center", flexShrink: 0 },
+            dangerouslySetInnerHTML: { __html: iconSvg }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx12(
+    "button",
+    {
+      className,
+      style: {
+        ...baseStyle,
+        backgroundColor: colors.bg,
+        color: colors.text,
+        borderRadius,
+        height,
+        ...borderProps,
+        ...userStyle
+      },
+      onClick: () => onClick(provider),
+      disabled: disabled || loading,
+      "aria-label": `Sign in with ${displayName}`,
+      children: loading ? /* @__PURE__ */ jsx12(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            width: 16,
+            height: 16,
+            border: `2px solid ${colors.text}`,
+            borderTopColor: "transparent",
+            borderRadius: "50%",
+            animation: "authon-spin 0.6s linear infinite"
+          }
+        }
+      ) : /* @__PURE__ */ jsxs7(Fragment7, { children: [
+        /* @__PURE__ */ jsx12(
+          "span",
+          {
+            style: { display: "flex", alignItems: "center", flexShrink: 0 },
+            dangerouslySetInnerHTML: { __html: iconSvg }
+          }
+        ),
+        /* @__PURE__ */ jsx12("span", { style: { fontSize: 15, fontWeight: 600, whiteSpace: "nowrap" }, children: buttonLabel })
+      ] })
+    }
+  );
+}
+
+// src/SocialButtons.tsx
+import { useState as useState8, useEffect as useEffect4 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function SocialButtons({
+  onSuccess,
+  onError,
+  className,
+  style: userStyle,
+  gap,
+  compact = false,
+  labels,
+  buttonProps
+}) {
+  const { client } = useAuthon();
+  const [providers, setProviders] = useState8([]);
+  const [loadingProvider, setLoadingProvider] = useState8(null);
+  useEffect4(() => {
+    if (!client) return;
+    client.getProviders().then((p) => setProviders(p));
+  }, [client]);
+  if (providers.length === 0) return null;
+  const resolvedGap = gap ?? (compact ? 12 : 10);
+  const handleClick = async (provider) => {
+    if (!client) return;
+    setLoadingProvider(provider);
+    try {
+      await client.signInWithOAuth(provider);
+      onSuccess?.();
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      onError?.(error);
+    } finally {
+      setLoadingProvider(null);
+    }
+  };
+  const containerStyle = compact ? { display: "flex", flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: resolvedGap, ...userStyle } : { display: "flex", flexDirection: "column", gap: resolvedGap, ...userStyle };
+  return /* @__PURE__ */ jsx13("div", { className, style: containerStyle, children: providers.map((provider) => /* @__PURE__ */ jsx13(
+    SocialButton,
+    {
+      provider,
+      onClick: handleClick,
+      loading: loadingProvider === provider,
+      disabled: !!loadingProvider,
+      compact,
+      label: labels?.[provider],
+      ...buttonProps
+    },
+    provider
+  )) });
+}
+
+// src/useAuthonMfa.ts
+import { useCallback as useCallback4, useContext as useContext3, useState as useState9 } from "react";
+function useAuthonMfa() {
+  const ctx = useContext3(AuthonContext);
+  if (!ctx) throw new Error("useAuthonMfa must be used within <AuthonProvider>");
+  const [isLoading, setIsLoading] = useState9(false);
+  const [error, setError] = useState9(null);
+  const wrap = useCallback4(
+    async (fn) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = await fn();
+        return result;
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        return null;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+  const setupMfa = useCallback4(async () => {
+    return wrap(() => ctx.client.setupMfa());
+  }, [ctx.client, wrap]);
+  const verifyMfaSetup = useCallback4(
+    async (code) => {
+      const result = await wrap(() => ctx.client.verifyMfaSetup(code));
+      return result !== null;
+    },
+    [ctx.client, wrap]
+  );
+  const verifyMfa = useCallback4(
+    async (mfaToken, code) => {
+      const result = await wrap(() => ctx.client.verifyMfa(mfaToken, code));
+      return result !== null;
+    },
+    [ctx.client, wrap]
+  );
+  const disableMfa = useCallback4(
+    async (code) => {
+      const result = await wrap(() => ctx.client.disableMfa(code));
+      return result !== null;
+    },
+    [ctx.client, wrap]
+  );
+  const getMfaStatus = useCallback4(async () => {
+    return wrap(() => ctx.client.getMfaStatus());
+  }, [ctx.client, wrap]);
+  const regenerateBackupCodes = useCallback4(
+    async (code) => {
+      return wrap(() => ctx.client.regenerateBackupCodes(code));
+    },
+    [ctx.client, wrap]
+  );
+  return {
+    setupMfa,
+    verifyMfaSetup,
+    verifyMfa,
+    disableMfa,
+    getMfaStatus,
+    regenerateBackupCodes,
+    isLoading,
+    error
+  };
+}
+
+// src/useAuthonPasskeys.ts
+import { useCallback as useCallback5, useContext as useContext4, useState as useState10 } from "react";
+function useAuthonPasskeys() {
+  const ctx = useContext4(AuthonContext);
+  if (!ctx) throw new Error("useAuthonPasskeys must be used within <AuthonProvider>");
+  const [isLoading, setIsLoading] = useState10(false);
+  const [error, setError] = useState10(null);
+  const wrap = useCallback5(
+    async (fn) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        return await fn();
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        return null;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+  const registerPasskey = useCallback5(
+    (name) => wrap(() => ctx.client.registerPasskey(name)),
+    [ctx.client, wrap]
+  );
+  const authenticateWithPasskey = useCallback5(
+    async (email) => {
+      const result = await wrap(() => ctx.client.authenticateWithPasskey(email));
+      return result !== null;
+    },
+    [ctx.client, wrap]
+  );
+  const listPasskeys = useCallback5(
+    () => wrap(() => ctx.client.listPasskeys()),
+    [ctx.client, wrap]
+  );
+  const renamePasskey = useCallback5(
+    (id, name) => wrap(() => ctx.client.renamePasskey(id, name)),
+    [ctx.client, wrap]
+  );
+  const revokePasskey = useCallback5(
+    async (id) => {
+      const result = await wrap(() => ctx.client.revokePasskey(id));
+      return result !== null;
+    },
+    [ctx.client, wrap]
+  );
+  return {
+    registerPasskey,
+    authenticateWithPasskey,
+    listPasskeys,
+    renamePasskey,
+    revokePasskey,
+    isLoading,
+    error
+  };
+}
+
+// src/useAuthonPasswordless.ts
+import { useCallback as useCallback6, useContext as useContext5, useState as useState11 } from "react";
+function useAuthonPasswordless() {
+  const ctx = useContext5(AuthonContext);
+  if (!ctx) throw new Error("useAuthonPasswordless must be used within <AuthonProvider>");
+  const [isLoading, setIsLoading] = useState11(false);
+  const [error, setError] = useState11(null);
+  const wrap = useCallback6(
+    async (fn) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        return await fn();
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        return null;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+  const sendMagicLink = useCallback6(
+    async (email) => {
+      const result = await wrap(() => ctx.client.sendMagicLink(email));
+      return result !== null;
+    },
+    [ctx.client, wrap]
+  );
+  const sendEmailOtp = useCallback6(
+    async (email) => {
+      const result = await wrap(() => ctx.client.sendEmailOtp(email));
+      return result !== null;
+    },
+    [ctx.client, wrap]
+  );
+  const verifyPasswordless = useCallback6(
+    async (opts) => {
+      const result = await wrap(() => ctx.client.verifyPasswordless(opts));
+      return result !== null;
+    },
+    [ctx.client, wrap]
+  );
+  return {
+    sendMagicLink,
+    sendEmailOtp,
+    verifyPasswordless,
+    isLoading,
+    error
+  };
+}
+
+// src/useAuthonWeb3.ts
+import { useCallback as useCallback7, useContext as useContext6, useState as useState12 } from "react";
+function useAuthonWeb3() {
+  const ctx = useContext6(AuthonContext);
+  if (!ctx) throw new Error("useAuthonWeb3 must be used within <AuthonProvider>");
+  const [isLoading, setIsLoading] = useState12(false);
+  const [error, setError] = useState12(null);
+  const wrap = useCallback7(
+    async (fn) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        return await fn();
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        return null;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+  const getNonce = useCallback7(
+    (address, chain, walletType, chainId) => wrap(() => ctx.client.web3GetNonce(address, chain, walletType, chainId)),
+    [ctx.client, wrap]
+  );
+  const verify = useCallback7(
+    async (message, signature, address, chain, walletType) => {
+      const result = await wrap(
+        () => ctx.client.web3Verify(message, signature, address, chain, walletType)
+      );
+      return result !== null;
+    },
+    [ctx.client, wrap]
+  );
+  const listWallets = useCallback7(
+    () => wrap(() => ctx.client.listWallets()),
+    [ctx.client, wrap]
+  );
+  const linkWallet = useCallback7(
+    (params) => wrap(() => ctx.client.linkWallet(params)),
+    [ctx.client, wrap]
+  );
+  const unlinkWallet = useCallback7(
+    async (walletId) => {
+      const result = await wrap(() => ctx.client.unlinkWallet(walletId));
+      return result !== null;
+    },
+    [ctx.client, wrap]
+  );
+  return {
+    getNonce,
+    verify,
+    listWallets,
+    linkWallet,
+    unlinkWallet,
+    isLoading,
+    error
+  };
+}
+
+// src/useAuthonSessions.ts
+import { useCallback as useCallback8, useContext as useContext7, useState as useState13 } from "react";
+function useAuthonSessions() {
+  const ctx = useContext7(AuthonContext);
+  if (!ctx) throw new Error("useAuthonSessions must be used within <AuthonProvider>");
+  const [isLoading, setIsLoading] = useState13(false);
+  const [error, setError] = useState13(null);
+  const wrap = useCallback8(
+    async (fn) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        return await fn();
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        return null;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+  const listSessions = useCallback8(
+    () => wrap(() => ctx.client.listSessions()),
+    [ctx.client, wrap]
+  );
+  const revokeSession = useCallback8(
+    async (sessionId) => {
+      const result = await wrap(() => ctx.client.revokeSession(sessionId));
+      return result !== null;
+    },
+    [ctx.client, wrap]
+  );
+  return {
+    listSessions,
+    revokeSession,
+    isLoading,
+    error
+  };
+}
+
+// src/useOrganization.ts
+import { useContext as useContext8, useEffect as useEffect5, useState as useState14 } from "react";
+function useOrganization() {
+  const ctx = useContext8(AuthonContext);
+  if (!ctx) throw new Error("useOrganization must be used within <AuthonProvider>");
+  const [members, setMembers] = useState14([]);
+  const [isLoaded, setIsLoaded] = useState14(false);
+  const organization = ctx.activeOrganization;
+  useEffect5(() => {
+    if (!organization || !ctx.client) {
+      setMembers([]);
+      setIsLoaded(!organization);
+      return;
+    }
+    setIsLoaded(false);
+    ctx.client.organizations.getMembers(organization.id).then((m) => {
+      setMembers(m);
+      setIsLoaded(true);
+    }).catch(() => {
+      setMembers([]);
+      setIsLoaded(true);
+    });
+  }, [organization?.id, ctx.client]);
+  return {
+    organization,
+    members,
+    isLoaded
+  };
+}
+
+// src/useOrganizationList.ts
+import { useCallback as useCallback10, useContext as useContext9, useEffect as useEffect6, useState as useState15 } from "react";
+function useOrganizationList() {
+  const ctx = useContext9(AuthonContext);
+  if (!ctx) throw new Error("useOrganizationList must be used within <AuthonProvider>");
+  const [organizations, setOrganizations] = useState15([]);
+  const [isLoaded, setIsLoaded] = useState15(false);
+  useEffect6(() => {
+    if (!ctx.client || !ctx.isSignedIn) {
+      setOrganizations([]);
+      setIsLoaded(!ctx.isSignedIn);
+      return;
+    }
+    setIsLoaded(false);
+    ctx.client.organizations.list().then((res) => {
+      setOrganizations(res.data);
+      setIsLoaded(true);
+    }).catch(() => {
+      setOrganizations([]);
+      setIsLoaded(true);
+    });
+  }, [ctx.client, ctx.isSignedIn]);
+  const createOrganization = useCallback10(
+    async (params) => {
+      if (!ctx.client) return null;
+      try {
+        const org = await ctx.client.organizations.create(params);
+        setOrganizations((prev) => [...prev, org]);
+        return org;
+      } catch {
+        return null;
+      }
+    },
+    [ctx.client]
+  );
+  const setActive = useCallback10(
+    (org) => {
+      ctx.setActiveOrganization(org);
+    },
+    [ctx.setActiveOrganization]
+  );
+  return {
+    organizations,
+    isLoaded,
+    createOrganization,
+    setActive
+  };
+}
+
+// src/components/UserProfile.tsx
+import { useCallback as useCallback11, useEffect as useEffect7, useState as useState16 } from "react";
+import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+function ProfileTab() {
+  const theme = useTheme();
+  const { user, client } = useAuthon();
+  const [displayName, setDisplayName] = useState16(user?.displayName ?? "");
+  const [phone, setPhone] = useState16(user?.phone ?? "");
+  const [loading, setLoading] = useState16(false);
+  const [success, setSuccess] = useState16("");
+  const [error, setError] = useState16("");
+  const handleSave = async () => {
+    if (!client) return;
+    setLoading(true);
+    setError("");
+    setSuccess("");
+    try {
+      await client.updateProfile({ displayName: displayName || void 0, phone: phone || void 0 });
+      setSuccess("Profile updated");
+    } catch (e) {
+      setError(e?.message ?? "Failed to update profile");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const initials = user?.displayName ? user.displayName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : (user?.email?.[0] ?? "?").toUpperCase();
+  return /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
+    /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
+      /* @__PURE__ */ jsx14(
+        "div",
+        {
+          style: {
+            width: 64,
+            height: 64,
+            borderRadius: "50%",
+            background: user?.avatarUrl ? "transparent" : `linear-gradient(135deg, ${theme.primaryStart}, ${theme.primaryEnd})`,
+            color: "#fff",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 22,
+            fontWeight: 700,
+            overflow: "hidden",
+            flexShrink: 0
+          },
+          children: user?.avatarUrl ? /* @__PURE__ */ jsx14("img", { src: user.avatarUrl, alt: "avatar", style: { width: "100%", height: "100%", objectFit: "cover" } }) : initials
+        }
+      ),
+      /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx14("div", { style: { fontSize: 16, fontWeight: 600, color: theme.text }, children: user?.displayName ?? "User" }),
+        /* @__PURE__ */ jsx14("div", { style: { fontSize: 13, color: theme.textMuted }, children: user?.email }),
+        !user?.emailVerified && /* @__PURE__ */ jsx14("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__ */ jsx14("div", { style: { padding: "10px 14px", borderRadius: theme.borderRadius, background: "#f0fdf4", border: "1px solid #bbf7d0", color: "#166534", fontSize: 13 }, children: success }),
+    error && /* @__PURE__ */ jsx14("div", { style: { padding: "10px 14px", borderRadius: theme.borderRadius, background: "#fef2f2", border: "1px solid #fecaca", color: "#dc2626", fontSize: 13 }, children: error }),
+    /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+      /* @__PURE__ */ jsx14(Input, { label: "Display name", value: displayName, onChange: setDisplayName, placeholder: "Your name" }),
+      /* @__PURE__ */ jsx14(Input, { label: "Email", type: "email", value: user?.email ?? "", disabled: true, placeholder: "Email" }),
+      /* @__PURE__ */ jsx14(Input, { label: "Phone", type: "tel", value: phone, onChange: setPhone, placeholder: "+1 (555) 000-0000" })
+    ] }),
+    /* @__PURE__ */ jsx14(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] = useState16("");
+  const [newPw, setNewPw] = useState16("");
+  const [confirmPw, setConfirmPw] = useState16("");
+  const [pwLoading, setPwLoading] = useState16(false);
+  const [pwError, setPwError] = useState16("");
+  const [pwSuccess, setPwSuccess] = useState16("");
+  const [mfaStatus, setMfaStatus] = useState16(null);
+  const [mfaLoading, setMfaLoading] = useState16(false);
+  useEffect7(() => {
+    if (!client) return;
+    client.getMfaStatus().then(setMfaStatus).catch(() => null);
+  }, [client]);
+  const handlePasswordChange = async () => {
+    if (!client) return;
+    if (newPw !== confirmPw) {
+      setPwError("Passwords do not match");
+      return;
+    }
+    if (newPw.length < 8) {
+      setPwError("Password must be at least 8 characters");
+      return;
+    }
+    setPwLoading(true);
+    setPwError("");
+    setPwSuccess("");
+    try {
+      await client.updateProfile({ displayName: void 0 });
+      setPwSuccess("Password updated");
+      setCurrentPw("");
+      setNewPw("");
+      setConfirmPw("");
+    } catch (e) {
+      setPwError(e?.message ?? "Failed to update password");
+    } finally {
+      setPwLoading(false);
+    }
+  };
+  const sectionTitle = {
+    fontSize: 15,
+    fontWeight: 600,
+    color: theme.text,
+    marginBottom: 16,
+    paddingBottom: 10,
+    borderBottom: `1px solid ${theme.border}`
+  };
+  return /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
+    /* @__PURE__ */ jsxs8("div", { children: [
+      /* @__PURE__ */ jsx14("div", { style: sectionTitle, children: "Change password" }),
+      /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ jsx14(Input, { label: "Current password", type: "password", value: currentPw, onChange: setCurrentPw, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: "current-password" }),
+        /* @__PURE__ */ jsx14(Input, { label: "New password", type: "password", value: newPw, onChange: setNewPw, placeholder: "Minimum 8 characters", autoComplete: "new-password" }),
+        /* @__PURE__ */ jsx14(Input, { label: "Confirm new password", type: "password", value: confirmPw, onChange: setConfirmPw, placeholder: "Repeat new password", autoComplete: "new-password" }),
+        pwError && /* @__PURE__ */ jsx14("div", { style: { color: "#dc2626", fontSize: 13 }, children: pwError }),
+        pwSuccess && /* @__PURE__ */ jsx14("div", { style: { color: "#166534", fontSize: 13 }, children: pwSuccess }),
+        /* @__PURE__ */ jsx14(Button, { variant: "primary", onClick: handlePasswordChange, loading: pwLoading, style: { alignSelf: "flex-start", minWidth: 160 }, children: "Update password" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { children: [
+      /* @__PURE__ */ jsx14("div", { style: sectionTitle, children: "Two-factor authentication" }),
+      /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 0" }, children: [
+        /* @__PURE__ */ jsxs8("div", { children: [
+          /* @__PURE__ */ jsx14("div", { style: { fontSize: 14, fontWeight: 500, color: theme.text }, children: "Authenticator app" }),
+          /* @__PURE__ */ jsx14("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__ */ jsx14("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ jsxs8(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 4,
+              padding: "3px 10px",
+              borderRadius: 99,
+              fontSize: 12,
+              fontWeight: 600,
+              background: mfaStatus?.enabled ? "#f0fdf4" : "#f3f4f6",
+              color: mfaStatus?.enabled ? "#166534" : theme.textMuted
+            },
+            children: [
+              /* @__PURE__ */ jsx14("span", { style: { width: 6, height: 6, borderRadius: "50%", background: mfaStatus?.enabled ? "#22c55e" : "#9ca3af", display: "inline-block" } }),
+              mfaStatus?.enabled ? "Enabled" : "Disabled"
+            ]
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+function SessionsTab() {
+  const theme = useTheme();
+  const { client } = useAuthon();
+  const [sessions, setSessions] = useState16([]);
+  const [loading, setLoading] = useState16(true);
+  const [revoking, setRevoking] = useState16(null);
+  const loadSessions = useCallback11(async () => {
+    if (!client) return;
+    setLoading(true);
+    try {
+      const data = await client.listSessions();
+      setSessions(data);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+  useEffect7(() => {
+    loadSessions();
+  }, [loadSessions]);
+  const handleRevoke = async (sessionId) => {
+    if (!client) return;
+    setRevoking(sessionId);
+    try {
+      await client.revokeSession(sessionId);
+      setSessions((prev) => prev.filter((s) => s.id !== sessionId));
+    } catch {
+    } finally {
+      setRevoking(null);
+    }
+  };
+  const sectionTitle = {
+    fontSize: 15,
+    fontWeight: 600,
+    color: theme.text,
+    marginBottom: 16,
+    paddingBottom: 10,
+    borderBottom: `1px solid ${theme.border}`
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx14("div", { style: { display: "flex", justifyContent: "center", padding: 40 }, children: /* @__PURE__ */ jsx14("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__ */ jsxs8("div", { children: [
+    /* @__PURE__ */ jsx14("div", { style: sectionTitle, children: "Active sessions" }),
+    /* @__PURE__ */ jsx14("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: sessions.length === 0 ? /* @__PURE__ */ jsx14("div", { style: { color: theme.textMuted, fontSize: 14, textAlign: "center", padding: "24px 0" }, children: "No active sessions" }) : sessions.map((session) => /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "12px 14px",
+          borderRadius: theme.borderRadius,
+          border: `1px solid ${theme.border}`,
+          gap: 12
+        },
+        children: [
+          /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 12, flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx14("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__ */ jsxs8("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx14("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsx14("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+              /* @__PURE__ */ jsx14("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+            ] }) }),
+            /* @__PURE__ */ jsxs8("div", { style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx14("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__ */ jsxs8("div", { style: { fontSize: 12, color: theme.textMuted, marginTop: 2 }, children: [
+                session.ipAddress ?? "Unknown IP",
+                session.lastActiveAt && /* @__PURE__ */ jsxs8(Fragment8, { children: [
+                  " \xB7 ",
+                  formatRelative(session.lastActiveAt)
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx14(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              loading: revoking === session.id,
+              onClick: () => handleRevoke(session.id),
+              children: "Revoke"
+            }
+          )
+        ]
+      },
+      session.id
+    )) })
+  ] });
+}
+function formatRelative(dateStr) {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1) return "Just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+function UserProfilePanel() {
+  const theme = useTheme();
+  const [tab, setTab] = useState16("profile");
+  const panelStyle = {
+    width: "100%",
+    maxWidth: 640,
+    background: theme.bg,
+    borderRadius: `calc(${theme.borderRadius} + 4px)`,
+    boxShadow: "0 4px 32px rgba(0,0,0,0.10)",
+    overflow: "hidden",
+    fontFamily: theme.fontFamily
+  };
+  const tabBarStyle = {
+    display: "flex",
+    borderBottom: `1px solid ${theme.border}`,
+    padding: "0 24px"
+  };
+  const tabBtnStyle = (active) => ({
+    padding: "14px 16px",
+    background: "none",
+    border: "none",
+    borderBottom: active ? `2px solid ${theme.primaryStart}` : "2px solid transparent",
+    color: active ? theme.primaryStart : theme.textMuted,
+    fontWeight: active ? 600 : 400,
+    fontSize: 14,
+    cursor: "pointer",
+    fontFamily: theme.fontFamily,
+    marginBottom: -1
+  });
+  const contentStyle = {
+    padding: "28px 28px"
+  };
+  const tabs = [
+    { key: "profile", label: "Profile" },
+    { key: "security", label: "Security" },
+    { key: "sessions", label: "Sessions" }
+  ];
+  return /* @__PURE__ */ jsxs8("div", { style: panelStyle, children: [
+    /* @__PURE__ */ jsx14("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ jsx14("div", { style: tabBarStyle, children: tabs.map(({ key, label }) => /* @__PURE__ */ jsx14(
+      "button",
+      {
+        type: "button",
+        style: tabBtnStyle(tab === key),
+        onClick: () => setTab(key),
+        children: label
+      },
+      key
+    )) }),
+    /* @__PURE__ */ jsxs8("div", { style: contentStyle, children: [
+      tab === "profile" && /* @__PURE__ */ jsx14(ProfileTab, {}),
+      tab === "security" && /* @__PURE__ */ jsx14(SecurityTab, {}),
+      tab === "sessions" && /* @__PURE__ */ jsx14(SessionsTab, {})
+    ] })
+  ] });
+}
+function UserProfile({ appearance }) {
+  const { branding } = useBranding();
+  const effectiveBranding = { ...branding, ...appearance?.variables ?? {} };
+  return /* @__PURE__ */ jsx14(ThemeProvider, { branding: effectiveBranding, style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx14(UserProfilePanel, {}) });
+}
+
+// src/components/shared/ProviderIcon.tsx
+import { getProviderButtonConfig as getProviderButtonConfig4 } from "@authon/js";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function ProviderIcon({ provider, size = 20 }) {
+  const config = getProviderButtonConfig4(provider);
+  const svg = config.iconSvg.replace(/width="\d+"/, `width="${size}"`).replace(/height="\d+"/, `height="${size}"`);
+  return /* @__PURE__ */ jsx15(
+    "span",
+    {
+      style: { display: "flex", alignItems: "center", flexShrink: 0 },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
 }
 export {
   AuthonProvider,
+  Button,
+  Divider,
+  Input,
   Protect,
+  ProviderIcon,
   SignIn,
   SignUp,
   SignedIn,
   SignedOut,
+  SocialButton,
+  SocialButtons,
+  ThemeProvider,
   UserButton,
+  UserProfile,
   useAuthon,
+  useAuthonMfa,
+  useAuthonPasskeys,
+  useAuthonPasswordless,
+  useAuthonSessions,
+  useAuthonWeb3,
+  useBranding,
+  useOrganization,
+  useOrganizationList,
   useUser
 };
 //# sourceMappingURL=index.js.map