@mesob/auth-react 0.3.5 → 0.4.0

package/dist/components/profile/account.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/profile/account.tsx","../../../src/provider.tsx","../../../src/utils/cookie.ts"],"sourcesContent":["'use client';\n\nimport { Separator } from '@mesob/ui/components';\nimport { useSession } from '../../provider';\n\nexport function Account() {\n  const { user, isAuthenticated } = useSession();\n\n  if (!(isAuthenticated && user)) {\n    return <div>Sign in required</div>;\n  }\n\n  return (\n    <div className=\"p-6 max-w-4xl\">\n      <div className=\"mb-6\">\n        <h2 className=\"text-lg font-semibold mb-4\">Profile details</h2>\n        <Separator />\n      </div>\n\n      <div className=\"space-y-6 transition-all duration-300 ease-in-out\">\n        {/* Profile Section */}\n        <div className=\"flex flex-col md:flex-row items-start gap-4 md:gap-12 min-h-[3rem]\">\n          <div className=\"w-full md:w-48 mt-4 shrink-0 h-fit\">\n            <span className=\"font-medium text-sm\">Profile</span>\n          </div>\n        </div>\n\n        <Separator />\n\n        {/* Email addresses Section */}\n        <div className=\"flex flex-col md:flex-row gap-4 md:gap-12 py-2\">\n          <div className=\"w-full md:w-48 shrink-0\">\n            <span className=\"font-medium text-sm\">Email addresses</span>\n          </div>\n          <div className=\"flex-1 space-y-4\">\n            <div className=\"flex items-center justify-between group\">\n              {user.email ? (\n                <div className=\"flex items-center gap-3\">\n                  <span className=\"text-sm\">{user.email}</span>\n                </div>\n              ) : (\n                <span className=\"text-sm text-muted-foreground\">\n                  No email address\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n\n        <Separator />\n\n        {/* Phone numbers Section */}\n        <div className=\"flex flex-col md:flex-row gap-4 md:gap-12 py-2\">\n          <div className=\"w-full md:w-48 shrink-0\">\n            <span className=\"font-medium text-sm\">Phone numbers</span>\n          </div>\n          <div className=\"flex-1 space-y-4\">\n            {user.phone ? (\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-sm\">{user.phone}</span>\n              </div>\n            ) : (\n              <span className=\"text-sm text-muted-foreground\">\n                No phone number\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n","'use client';\n\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { deepmerge } from 'deepmerge-ts';\nimport createFetchClient from 'openapi-fetch';\nimport createClient from 'openapi-react-query';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useMemo, useState } from 'react';\nimport type { paths } from './data/openapi';\nimport { createTranslator } from './lib/translations';\nimport {\n  type AuthClientConfig,\n  type AuthResponse,\n  defaultAuthClientConfig,\n  type Session,\n  type User,\n} from './types';\nimport { getSessionCookieName } from './utils/cookie';\nimport { createCustomFetch } from './utils/custom-fetch';\n\n// biome-ignore lint/suspicious/noExplicitAny: OpenAPI hooks type\ntype OpenApiHooks = any;\n\n// --- Utility: Check if running on server ---\nfunction isServer(): boolean {\n  return typeof document === 'undefined';\n}\n\n/**\n * @deprecated Cookie is httpOnly and cannot be read client-side.\n * Use `useSession().isAuthenticated` instead.\n * This function always returns false on client.\n */\nexport function hasAuthCookie(_cookieName: string): boolean {\n  // Cookie is httpOnly, can't check client-side\n  // Always return false - use useSession() for auth status\n  return false;\n}\n\n// --- Types ---\nexport type AuthStatus = 'loading' | 'authenticated' | 'unauthenticated';\n\ntype AuthState = {\n  user: User | null;\n  session: Session | null;\n  status: AuthStatus;\n  error: Error | null;\n};\n\ntype SessionContextValue = AuthState & {\n  isLoading: boolean;\n  isAuthenticated: boolean;\n  refresh: () => Promise<void>;\n  signOut: () => Promise<void>;\n};\n\ntype ApiContextValue = {\n  hooks: OpenApiHooks;\n  setAuth: (auth: AuthResponse) => void;\n  clearAuth: () => void;\n  refresh: () => Promise<void>;\n};\n\ntype ConfigContextValue = {\n  config: AuthClientConfig;\n  cookieName: string;\n  t: (key: string, params?: Record<string, string | number>) => string;\n};\n\nconst SessionContext = createContext<SessionContextValue | null>(null);\nconst ApiContext = createContext<ApiContextValue | null>(null);\nconst ConfigContext = createContext<ConfigContextValue | null>(null);\n\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false,\n    },\n  },\n});\n\n// --- Hooks ---\n\n/**\n * Get session state including user, session, and auth status.\n * - `status`: 'loading' | 'authenticated' | 'unauthenticated'\n * - `isLoading`: true while fetching session\n * - `isAuthenticated`: true if user and session exist\n */\nexport function useSession(): SessionContextValue {\n  const context = useContext(SessionContext);\n  if (!context) {\n    throw new Error('useSession must be used within MesobAuthProvider');\n  }\n  return context;\n}\n\nexport function useApi(): ApiContextValue {\n  const context = useContext(ApiContext);\n  if (!context) {\n    throw new Error('useApi must be used within MesobAuthProvider');\n  }\n  return context;\n}\n\nexport function useConfig(): ConfigContextValue {\n  const context = useContext(ConfigContext);\n  if (!context) {\n    throw new Error('useConfig must be used within MesobAuthProvider');\n  }\n  return context;\n}\n\n/**\n * @deprecated Cookie is httpOnly, can't be checked client-side.\n * Use `useSession().isAuthenticated` instead.\n */\nexport function useHasAuthCookie(): boolean {\n  const { status } = useSession();\n  return status === 'authenticated' || status === 'loading';\n}\n\n// --- Provider ---\n\ntype MesobAuthProviderProps = {\n  config: AuthClientConfig;\n  children: ReactNode;\n};\n\nexport function MesobAuthProvider({\n  config,\n  children,\n}: MesobAuthProviderProps) {\n  const mergedConfig = useMemo(\n    () =>\n      deepmerge(\n        { ...defaultAuthClientConfig } as Partial<AuthClientConfig>,\n        config,\n      ) as AuthClientConfig,\n    [config],\n  );\n\n  const api = useMemo(\n    () =>\n      createFetchClient<paths>({\n        baseUrl: mergedConfig.baseURL,\n        fetch: createCustomFetch(mergedConfig),\n      }),\n    [mergedConfig],\n  );\n\n  const hooks = useMemo(() => createClient(api), [api]);\n  const cookieName = useMemo(\n    () => getSessionCookieName(mergedConfig),\n    [mergedConfig],\n  );\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <AuthStateProvider\n        config={mergedConfig}\n        hooks={hooks}\n        cookieName={cookieName}\n      >\n        {children}\n      </AuthStateProvider>\n    </QueryClientProvider>\n  );\n}\n\ntype AuthStateProviderProps = {\n  config: AuthClientConfig;\n  hooks: OpenApiHooks;\n  cookieName: string;\n  children: ReactNode;\n};\n\nfunction AuthStateProvider({\n  config,\n  hooks,\n  cookieName,\n  children,\n}: AuthStateProviderProps) {\n  // Manual override for sign-out / sign-in\n  const [override, setOverride] = useState<AuthState | null>(null);\n\n  // Always fetch session - cookie is httpOnly, can't check client-side\n  // Server will read the cookie and return user/session if valid\n  const {\n    data: sessionData,\n    isLoading,\n    isFetched,\n    error: sessionError,\n    refetch,\n  } = hooks.useQuery(\n    'get',\n    '/session',\n    {},\n    {\n      enabled: !(override || isServer()),\n      refetchOnMount: false,\n      refetchOnWindowFocus: false,\n      refetchOnReconnect: false,\n      retry: false,\n      gcTime: 0,\n      staleTime: 0,\n    },\n  );\n\n  // Derive state directly - no useEffect\n  const user = override?.user ?? sessionData?.user ?? null;\n  const session = override?.session ?? sessionData?.session ?? null;\n  const error = override?.error ?? (sessionError as Error | null);\n\n  // Check error status code\n  const errorStatus = (() => {\n    if (!sessionError) {\n      return null;\n    }\n    const err = sessionError as { status?: number };\n    return err.status ?? null;\n  })();\n\n  // Check if error is a network/connection error\n  const isNetworkError = (() => {\n    if (!sessionError) {\n      return false;\n    }\n    const error = sessionError as Error & { cause?: unknown; data?: unknown };\n    const errorMessage =\n      error.message || String(error) || JSON.stringify(error);\n    // Network errors: TypeError, DOMException, or fetch failures\n    if (\n      error instanceof TypeError ||\n      error instanceof DOMException ||\n      error.name === 'TypeError' ||\n      errorMessage.includes('Failed to fetch') ||\n      errorMessage.includes('ERR_CONNECTION_REFUSED') ||\n      errorMessage.includes('NetworkError') ||\n      errorMessage.includes('Network request failed') ||\n      errorMessage.includes('fetch failed')\n    ) {\n      return true;\n    }\n    // Check error cause\n    if (error.cause) {\n      const causeStr = String(error.cause);\n      if (\n        causeStr.includes('Failed to fetch') ||\n        causeStr.includes('ERR_CONNECTION_REFUSED') ||\n        causeStr.includes('NetworkError')\n      ) {\n        return true;\n      }\n    }\n    return false;\n  })();\n\n  // Compute status\n  // biome-ignore lint: Status determination requires multiple checks\n  const status: AuthStatus = (() => {\n    if (override) {\n      return override.status;\n    }\n    if (isServer()) {\n      return 'loading';\n    }\n    if (user && session) {\n      return 'authenticated';\n    }\n    // Check for network errors or auth errors first - allow auth page to show\n    if (isNetworkError || errorStatus === 401) {\n      return 'unauthenticated';\n    }\n    // If we have an error but it's not a network error, still check loading state\n    if (sessionError && !isNetworkError && errorStatus !== 401) {\n      if (errorStatus && errorStatus >= 500) {\n        return 'authenticated';\n      }\n      // Other errors mean unauthenticated\n      if (isFetched) {\n        return 'unauthenticated';\n      }\n    }\n    if (isLoading || !isFetched) {\n      return 'loading';\n    }\n    if (isFetched && !user && !session) {\n      return 'unauthenticated';\n    }\n    return 'unauthenticated';\n  })();\n\n  const signOutMutation = hooks.useMutation('post', '/sign-out');\n  const t = createTranslator(config.messages || {});\n\n  const setAuth = (auth: AuthResponse) => {\n    setOverride({\n      user: auth.user,\n      session: auth.session,\n      status: 'authenticated',\n      error: null,\n    });\n  };\n\n  const clearAuth = () => {\n    setOverride({\n      user: null,\n      session: null,\n      status: 'unauthenticated',\n      error: null,\n    });\n  };\n\n  const refresh = async () => {\n    setOverride(null);\n    await refetch();\n  };\n\n  const signOut = async () => {\n    try {\n      await signOutMutation.mutateAsync({});\n    } finally {\n      clearAuth();\n    }\n  };\n\n  return (\n    <ConfigContext.Provider value={{ config, cookieName, t }}>\n      <ApiContext.Provider value={{ hooks, setAuth, clearAuth, refresh }}>\n        <SessionContext.Provider\n          value={{\n            user,\n            session,\n            status,\n            error,\n            isLoading: status === 'loading',\n            isAuthenticated: status === 'authenticated',\n            refresh,\n            signOut,\n          }}\n        >\n          {children}\n        </SessionContext.Provider>\n      </ApiContext.Provider>\n    </ConfigContext.Provider>\n  );\n}\n","import type { AuthClientConfig } from '../types';\n\nconst isProduction =\n  typeof process !== 'undefined' && process.env.NODE_ENV === 'production';\n\nexport const getSessionCookieName = (config: AuthClientConfig): string => {\n  const prefix = config.cookiePrefix || '';\n  const baseName = 'session_token';\n  if (prefix) {\n    return `${prefix}_${baseName}`;\n  }\n  return isProduction ? '__Host-session_token' : baseName;\n};\n"],"mappings":";;;AAEA,SAAS,iBAAiB;;;ACA1B,SAAS,aAAa,2BAA2B;AACjD,SAAS,iBAAiB;AAC1B,OAAO,uBAAuB;AAC9B,OAAO,kBAAkB;AAEzB,SAAS,eAAe,YAAY,SAAS,gBAAgB;;;ACL7D,IAAM,eACJ,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa;;;AD4JvD;AA1FN,IAAM,iBAAiB,cAA0C,IAAI;AACrE,IAAM,aAAa,cAAsC,IAAI;AAC7D,IAAM,gBAAgB,cAAyC,IAAI;AAEnE,IAAM,cAAc,IAAI,YAAY;AAAA,EAClC,gBAAgB;AAAA,IACd,SAAS;AAAA,MACP,sBAAsB;AAAA,IACxB;AAAA,EACF;AACF,CAAC;AAUM,SAAS,aAAkC;AAChD,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;;;ADtFW,gBAAAA,MAKL,YALK;AAJJ,SAAS,UAAU;AACxB,QAAM,EAAE,MAAM,gBAAgB,IAAI,WAAW;AAE7C,MAAI,EAAE,mBAAmB,OAAO;AAC9B,WAAO,gBAAAA,KAAC,SAAI,8BAAgB;AAAA,EAC9B;AAEA,SACE,qBAAC,SAAI,WAAU,iBACb;AAAA,yBAAC,SAAI,WAAU,QACb;AAAA,sBAAAA,KAAC,QAAG,WAAU,8BAA6B,6BAAe;AAAA,MAC1D,gBAAAA,KAAC,aAAU;AAAA,OACb;AAAA,IAEA,qBAAC,SAAI,WAAU,qDAEb;AAAA,sBAAAA,KAAC,SAAI,WAAU,sEACb,0BAAAA,KAAC,SAAI,WAAU,sCACb,0BAAAA,KAAC,UAAK,WAAU,uBAAsB,qBAAO,GAC/C,GACF;AAAA,MAEA,gBAAAA,KAAC,aAAU;AAAA,MAGX,qBAAC,SAAI,WAAU,kDACb;AAAA,wBAAAA,KAAC,SAAI,WAAU,2BACb,0BAAAA,KAAC,UAAK,WAAU,uBAAsB,6BAAe,GACvD;AAAA,QACA,gBAAAA,KAAC,SAAI,WAAU,oBACb,0BAAAA,KAAC,SAAI,WAAU,2CACZ,eAAK,QACJ,gBAAAA,KAAC,SAAI,WAAU,2BACb,0BAAAA,KAAC,UAAK,WAAU,WAAW,eAAK,OAAM,GACxC,IAEA,gBAAAA,KAAC,UAAK,WAAU,iCAAgC,8BAEhD,GAEJ,GACF;AAAA,SACF;AAAA,MAEA,gBAAAA,KAAC,aAAU;AAAA,MAGX,qBAAC,SAAI,WAAU,kDACb;AAAA,wBAAAA,KAAC,SAAI,WAAU,2BACb,0BAAAA,KAAC,UAAK,WAAU,uBAAsB,2BAAa,GACrD;AAAA,QACA,gBAAAA,KAAC,SAAI,WAAU,oBACZ,eAAK,QACJ,gBAAAA,KAAC,SAAI,WAAU,qCACb,0BAAAA,KAAC,UAAK,WAAU,WAAW,eAAK,OAAM,GACxC,IAEA,gBAAAA,KAAC,UAAK,WAAU,iCAAgC,6BAEhD,GAEJ;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":["jsx"]}
+{"version":3,"sources":["../../../src/components/profile/account.tsx","../../../src/provider.tsx","../../../src/utils/cookie.ts","../../../src/components/profile/change-profile.tsx"],"sourcesContent":["'use client';\n\nimport { Badge, Card, CardContent, Separator } from '@mesob/ui/components';\nimport { useSession } from '../../provider';\nimport { ChangeProfile } from './change-profile';\n\nexport function Account() {\n  const { user, isAuthenticated } = useSession();\n\n  if (!(isAuthenticated && user)) {\n    return (\n      <div className=\"rounded-[1.75rem] border border-dashed border-border bg-muted/30 p-8 text-sm text-muted-foreground\">\n        Sign in required.\n      </div>\n    );\n  }\n\n  const contactItems = [\n    {\n      label: 'Email',\n      value: user.email ?? 'No email address',\n      status: user.emailVerified ? 'Verified' : 'Needs verification',\n    },\n    {\n      label: 'Phone',\n      value: user.phone ?? 'No phone number',\n      status: user.phoneVerified ? 'Verified' : 'Needs verification',\n    },\n  ];\n\n  return (\n    <div className=\"mx-auto flex w-full max-w-6xl flex-col gap-6\">\n      <div className=\"relative overflow-hidden rounded-[2rem] border border-border/60 bg-gradient-to-br from-background via-background to-primary/5 p-6 shadow-sm\">\n        <div className=\"absolute inset-y-0 right-0 w-1/3 bg-[radial-gradient(circle_at_top,_hsl(var(--primary)/0.16),_transparent_60%)]\" />\n        <div className=\"relative flex flex-col gap-5\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <Badge variant=\"outline\">Profile console</Badge>\n            <Badge variant=\"secondary\">Live session data</Badge>\n          </div>\n          <div className=\"max-w-2xl space-y-2\">\n            <h2 className=\"text-2xl font-semibold tracking-tight\">\n              Account details, contact state, and verification status.\n            </h2>\n            <p className=\"text-sm text-muted-foreground\">\n              Keep the identity surface minimal here. Contact updates and\n              sensitive changes stay in security.\n            </p>\n          </div>\n          <ChangeProfile user={user} />\n        </div>\n      </div>\n\n      <div className=\"grid gap-4 lg:grid-cols-[1.5fr_0.9fr]\">\n        <Card className=\"rounded-[1.75rem] border-border/60 shadow-sm\">\n          <CardContent className=\"space-y-5 p-6\">\n            <div className=\"space-y-1\">\n              <div className=\"text-sm font-medium text-muted-foreground\">\n                Contact channels\n              </div>\n              <div className=\"text-lg font-semibold\">Primary profile data</div>\n            </div>\n            <Separator />\n            <div className=\"space-y-4\">\n              {contactItems.map((item) => (\n                <div\n                  key={item.label}\n                  className=\"flex flex-col gap-3 rounded-2xl border border-border/60 bg-muted/20 p-4 md:flex-row md:items-center md:justify-between\"\n                >\n                  <div className=\"space-y-1\">\n                    <div className=\"text-sm font-medium\">{item.label}</div>\n                    <div className=\"text-sm text-muted-foreground\">\n                      {item.value}\n                    </div>\n                  </div>\n                  <Badge variant=\"outline\">{item.status}</Badge>\n                </div>\n              ))}\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card className=\"rounded-[1.75rem] border-border/60 shadow-sm\">\n          <CardContent className=\"space-y-5 p-6\">\n            <div className=\"space-y-1\">\n              <div className=\"text-sm font-medium text-muted-foreground\">\n                Snapshot\n              </div>\n              <div className=\"text-lg font-semibold\">\n                Session-facing identity\n              </div>\n            </div>\n            <Separator />\n            <div className=\"grid gap-3\">\n              <div className=\"rounded-2xl bg-primary/[0.06] p-4\">\n                <div className=\"text-xs uppercase tracking-[0.18em] text-muted-foreground\">\n                  Full name\n                </div>\n                <div className=\"mt-2 text-base font-semibold\">\n                  {user.fullName}\n                </div>\n              </div>\n              <div className=\"rounded-2xl bg-muted/25 p-4\">\n                <div className=\"text-xs uppercase tracking-[0.18em] text-muted-foreground\">\n                  Last sign in\n                </div>\n                <div className=\"mt-2 text-base font-semibold\">\n                  {user.lastSignInAt\n                    ? new Date(user.lastSignInAt).toLocaleString()\n                    : 'No activity recorded'}\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  );\n}\n","'use client';\n\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { deepmerge } from 'deepmerge-ts';\nimport createFetchClient from 'openapi-fetch';\nimport createClient from 'openapi-react-query';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useMemo, useState } from 'react';\nimport type { paths } from './data/openapi';\nimport { createTranslator } from './lib/translations';\nimport {\n  type AuthClientConfig,\n  type AuthResponse,\n  defaultAuthClientConfig,\n  type Session,\n  type User,\n} from './types';\nimport { getSessionCookieName } from './utils/cookie';\nimport { createCustomFetch } from './utils/custom-fetch';\n\n// biome-ignore lint/suspicious/noExplicitAny: OpenAPI hooks type\ntype OpenApiHooks = any;\n\n// --- Utility: Check if running on server ---\nfunction isServer(): boolean {\n  return typeof document === 'undefined';\n}\n\n/**\n * @deprecated Cookie is httpOnly and cannot be read client-side.\n * Use `useSession().isAuthenticated` instead.\n * This function always returns false on client.\n */\nexport function hasAuthCookie(_cookieName: string): boolean {\n  // Cookie is httpOnly, can't check client-side\n  // Always return false - use useSession() for auth status\n  return false;\n}\n\n// --- Types ---\nexport type AuthStatus = 'loading' | 'authenticated' | 'unauthenticated';\n\ntype AuthState = {\n  user: User | null;\n  session: Session | null;\n  status: AuthStatus;\n  error: Error | null;\n};\n\ntype SessionContextValue = AuthState & {\n  isLoading: boolean;\n  isAuthenticated: boolean;\n  refresh: () => Promise<void>;\n  signOut: () => Promise<void>;\n};\n\ntype ApiContextValue = {\n  hooks: OpenApiHooks;\n  setAuth: (auth: AuthResponse) => void;\n  clearAuth: () => void;\n  refresh: () => Promise<void>;\n};\n\ntype ConfigContextValue = {\n  config: AuthClientConfig;\n  cookieName: string;\n  t: (key: string, params?: Record<string, string | number>) => string;\n};\n\nconst SessionContext = createContext<SessionContextValue | null>(null);\nconst ApiContext = createContext<ApiContextValue | null>(null);\nconst ConfigContext = createContext<ConfigContextValue | null>(null);\n\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false,\n    },\n  },\n});\n\n// --- Hooks ---\n\n/**\n * Get session state including user, session, and auth status.\n * - `status`: 'loading' | 'authenticated' | 'unauthenticated'\n * - `isLoading`: true while fetching session\n * - `isAuthenticated`: true if user and session exist\n */\nexport function useSession(): SessionContextValue {\n  const context = useContext(SessionContext);\n  if (!context) {\n    throw new Error('useSession must be used within MesobAuthProvider');\n  }\n  return context;\n}\n\nexport function useApi(): ApiContextValue {\n  const context = useContext(ApiContext);\n  if (!context) {\n    throw new Error('useApi must be used within MesobAuthProvider');\n  }\n  return context;\n}\n\nexport function useConfig(): ConfigContextValue {\n  const context = useContext(ConfigContext);\n  if (!context) {\n    throw new Error('useConfig must be used within MesobAuthProvider');\n  }\n  return context;\n}\n\n/**\n * @deprecated Cookie is httpOnly, can't be checked client-side.\n * Use `useSession().isAuthenticated` instead.\n */\nexport function useHasAuthCookie(): boolean {\n  const { status } = useSession();\n  return status === 'authenticated' || status === 'loading';\n}\n\n// --- Provider ---\n\ntype MesobAuthProviderProps = {\n  config: AuthClientConfig;\n  children: ReactNode;\n};\n\nexport function MesobAuthProvider({\n  config,\n  children,\n}: MesobAuthProviderProps) {\n  const mergedConfig = useMemo(\n    () =>\n      deepmerge(\n        { ...defaultAuthClientConfig } as Partial<AuthClientConfig>,\n        config,\n      ) as AuthClientConfig,\n    [config],\n  );\n\n  const api = useMemo(\n    () =>\n      createFetchClient<paths>({\n        baseUrl: mergedConfig.baseURL,\n        fetch: createCustomFetch(mergedConfig),\n      }),\n    [mergedConfig],\n  );\n\n  const hooks = useMemo(() => createClient(api), [api]);\n  const cookieName = useMemo(\n    () => getSessionCookieName(mergedConfig),\n    [mergedConfig],\n  );\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <AuthStateProvider\n        config={mergedConfig}\n        hooks={hooks}\n        cookieName={cookieName}\n      >\n        {children}\n      </AuthStateProvider>\n    </QueryClientProvider>\n  );\n}\n\ntype AuthStateProviderProps = {\n  config: AuthClientConfig;\n  hooks: OpenApiHooks;\n  cookieName: string;\n  children: ReactNode;\n};\n\nfunction AuthStateProvider({\n  config,\n  hooks,\n  cookieName,\n  children,\n}: AuthStateProviderProps) {\n  // Manual override for sign-out / sign-in\n  const [override, setOverride] = useState<AuthState | null>(null);\n\n  // Always fetch session - cookie is httpOnly, can't check client-side\n  // Server will read the cookie and return user/session if valid\n  const {\n    data: sessionData,\n    isLoading,\n    isFetched,\n    error: sessionError,\n    refetch,\n  } = hooks.useQuery(\n    'get',\n    '/session',\n    {},\n    {\n      enabled: !(override || isServer()),\n      refetchOnMount: false,\n      refetchOnWindowFocus: false,\n      refetchOnReconnect: false,\n      retry: false,\n      gcTime: 0,\n      staleTime: 0,\n    },\n  );\n\n  // Derive state directly - no useEffect\n  const user = override?.user ?? sessionData?.user ?? null;\n  const session = override?.session ?? sessionData?.session ?? null;\n  const error = override?.error ?? (sessionError as Error | null);\n\n  // Check error status code\n  const errorStatus = (() => {\n    if (!sessionError) {\n      return null;\n    }\n    const err = sessionError as { status?: number };\n    return err.status ?? null;\n  })();\n\n  // Check if error is a network/connection error\n  const isNetworkError = (() => {\n    if (!sessionError) {\n      return false;\n    }\n    const error = sessionError as Error & { cause?: unknown; data?: unknown };\n    const errorMessage =\n      error.message || String(error) || JSON.stringify(error);\n    // Network errors: TypeError, DOMException, or fetch failures\n    if (\n      error instanceof TypeError ||\n      error instanceof DOMException ||\n      error.name === 'TypeError' ||\n      errorMessage.includes('Failed to fetch') ||\n      errorMessage.includes('ERR_CONNECTION_REFUSED') ||\n      errorMessage.includes('NetworkError') ||\n      errorMessage.includes('Network request failed') ||\n      errorMessage.includes('fetch failed')\n    ) {\n      return true;\n    }\n    // Check error cause\n    if (error.cause) {\n      const causeStr = String(error.cause);\n      if (\n        causeStr.includes('Failed to fetch') ||\n        causeStr.includes('ERR_CONNECTION_REFUSED') ||\n        causeStr.includes('NetworkError')\n      ) {\n        return true;\n      }\n    }\n    return false;\n  })();\n\n  // Compute status\n  // biome-ignore lint: Status determination requires multiple checks\n  const status: AuthStatus = (() => {\n    if (override) {\n      return override.status;\n    }\n    if (isServer()) {\n      return 'loading';\n    }\n    if (user && session) {\n      return 'authenticated';\n    }\n    // Check for network errors or auth errors first - allow auth page to show\n    if (isNetworkError || errorStatus === 401) {\n      return 'unauthenticated';\n    }\n    // If we have an error but it's not a network error, still check loading state\n    if (sessionError && !isNetworkError && errorStatus !== 401) {\n      if (errorStatus && errorStatus >= 500) {\n        return 'authenticated';\n      }\n      // Other errors mean unauthenticated\n      if (isFetched) {\n        return 'unauthenticated';\n      }\n    }\n    if (isLoading || !isFetched) {\n      return 'loading';\n    }\n    if (isFetched && !user && !session) {\n      return 'unauthenticated';\n    }\n    return 'unauthenticated';\n  })();\n\n  const signOutMutation = hooks.useMutation('post', '/sign-out');\n  const t = createTranslator(config.messages || {});\n\n  const setAuth = (auth: AuthResponse) => {\n    setOverride({\n      user: auth.user,\n      session: auth.session,\n      status: 'authenticated',\n      error: null,\n    });\n  };\n\n  const clearAuth = () => {\n    setOverride({\n      user: null,\n      session: null,\n      status: 'unauthenticated',\n      error: null,\n    });\n  };\n\n  const refresh = async () => {\n    setOverride(null);\n    await refetch();\n  };\n\n  const signOut = async () => {\n    try {\n      await signOutMutation.mutateAsync({});\n    } finally {\n      clearAuth();\n    }\n  };\n\n  return (\n    <ConfigContext.Provider value={{ config, cookieName, t }}>\n      <ApiContext.Provider value={{ hooks, setAuth, clearAuth, refresh }}>\n        <SessionContext.Provider\n          value={{\n            user,\n            session,\n            status,\n            error,\n            isLoading: status === 'loading',\n            isAuthenticated: status === 'authenticated',\n            refresh,\n            signOut,\n          }}\n        >\n          {children}\n        </SessionContext.Provider>\n      </ApiContext.Provider>\n    </ConfigContext.Provider>\n  );\n}\n","import type { AuthClientConfig } from '../types';\n\nconst isProduction =\n  typeof process !== 'undefined' && process.env.NODE_ENV === 'production';\n\nexport const getSessionCookieName = (config: AuthClientConfig): string => {\n  const prefix = config.cookiePrefix || '';\n  const baseName = 'session_token';\n  if (prefix) {\n    return `${prefix}_${baseName}`;\n  }\n  return isProduction ? '__Host-session_token' : baseName;\n};\n","import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  Badge,\n  Button,\n} from '@mesob/ui/components';\nimport { useState } from 'react';\nimport type { User } from '../../types';\n\ntype Props = {\n  user: User;\n};\n\nexport const ChangeProfile = ({ user }: Props) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const initials =\n    user.fullName\n      ?.split(' ')\n      .map((part) => part[0])\n      .join('')\n      .toUpperCase()\n      .slice(0, 2) || 'U';\n\n  return (\n    <div className=\"w-full rounded-[1.5rem] border border-border/60 bg-background/80 p-5 shadow-sm backdrop-blur\">\n      <div className=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n        <div className=\"flex items-center gap-4\">\n          <Avatar className=\"h-14 w-14 ring-4 ring-primary/10\">\n            <AvatarImage src={user.image || ''} alt={user.fullName || ''} />\n            <AvatarFallback>{initials}</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <div className=\"text-base font-semibold\">{user.fullName}</div>\n            <div className=\"flex flex-wrap gap-2 text-xs text-muted-foreground\">\n              <Badge variant=\"outline\">\n                {user.emailVerified ? 'Email verified' : 'Email unverified'}\n              </Badge>\n              <Badge variant=\"outline\">\n                {user.phoneVerified ? 'Phone verified' : 'Phone unverified'}\n              </Badge>\n            </div>\n          </div>\n        </div>\n        <Button\n          variant=\"secondary\"\n          className=\"rounded-full px-5 text-primary hover:text-primary/80\"\n          onClick={() => setIsEditing((v) => !v)}\n        >\n          {isEditing ? 'Hide editor' : 'Update profile'}\n        </Button>\n      </div>\n      {isEditing && (\n        <div className=\"mt-4 rounded-2xl border border-dashed border-border bg-muted/30 px-4 py-3 text-sm text-muted-foreground\">\n          Profile editing is not wired yet. Contact and password flows below are\n          live.\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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","names":["Badge","useState","jsx","jsx","jsxs","Badge"]}

package/dist/components/profile/change-profile.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { U as User } from '../../types-vcfvnAzQ.js';
+import { U as User } from '../../types-g9QcNRxT.js';
+import '@mesob/common';
 
 type Props = {
     user: User;

package/dist/components/profile/change-profile.js

@@ -3,32 +3,40 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
+  Badge,
   Button
 } from "@mesob/ui/components";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ChangeProfile = ({ user }) => {
   const [isEditing, setIsEditing] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "flex-1 w-full", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1", children: [
+  const initials = user.fullName?.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2) || "U";
+  return /* @__PURE__ */ jsxs("div", { className: "w-full rounded-[1.5rem] border border-border/60 bg-background/80 p-5 shadow-sm backdrop-blur", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxs(Avatar, { className: "h-12 w-12", children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "h-14 w-14 ring-4 ring-primary/10", children: [
           /* @__PURE__ */ jsx(AvatarImage, { src: user.image || "", alt: user.fullName || "" }),
-          /* @__PURE__ */ jsx(AvatarFallback, { children: user.fullName ? user.fullName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "U" })
+          /* @__PURE__ */ jsx(AvatarFallback, { children: initials })
         ] }),
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: user.fullName })
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-base font-semibold", children: user.fullName }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Badge, { variant: "outline", children: user.emailVerified ? "Email verified" : "Email unverified" }),
+            /* @__PURE__ */ jsx(Badge, { variant: "outline", children: user.phoneVerified ? "Phone verified" : "Phone unverified" })
+          ] })
+        ] })
       ] }),
       /* @__PURE__ */ jsx(
         Button,
         {
           variant: "secondary",
-          className: "text-primary hover:text-primary/80",
+          className: "rounded-full px-5 text-primary hover:text-primary/80",
           onClick: () => setIsEditing((v) => !v),
-          children: "Update profile"
+          children: isEditing ? "Hide editor" : "Update profile"
         }
       )
     ] }),
-    isEditing && /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm text-muted-foreground", children: "Profile editing currently unavailable." })
+    isEditing && /* @__PURE__ */ jsx("div", { className: "mt-4 rounded-2xl border border-dashed border-border bg-muted/30 px-4 py-3 text-sm text-muted-foreground", children: "Profile editing is not wired yet. Contact and password flows below are live." })
   ] });
 };
 export {

package/dist/components/profile/change-profile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/profile/change-profile.tsx"],"sourcesContent":["import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  Button,\n} from '@mesob/ui/components';\nimport { useState } from 'react';\nimport type { User } from 'src/types';\n\ntype Props = {\n  user: User;\n};\n\nexport const ChangeProfile = ({ user }: Props) => {\n  const [isEditing, setIsEditing] = useState(false);\n\n  return (\n    <div className=\"flex-1 w-full\">\n      <div className=\"flex items-center justify-between py-1\">\n        <div className=\"flex items-center gap-4\">\n          <Avatar className=\"h-12 w-12\">\n            <AvatarImage src={user.image || ''} alt={user.fullName || ''} />\n            <AvatarFallback>\n              {user.fullName\n                ? user.fullName\n                    .split(' ')\n                    .map((n) => n[0])\n                    .join('')\n                    .toUpperCase()\n                    .slice(0, 2)\n                : 'U'}\n            </AvatarFallback>\n          </Avatar>\n          <span className=\"font-medium\">{user.fullName}</span>\n        </div>\n        <Button\n          variant=\"secondary\"\n          className=\"text-primary hover:text-primary/80\"\n          onClick={() => setIsEditing((v) => !v)}\n        >\n          Update profile\n        </Button>\n      </div>\n      {isEditing && (\n        <div className=\"mt-2 text-sm text-muted-foreground\">\n          Profile editing currently unavailable.\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AAcf,SACE,KADF;AAPH,IAAM,gBAAgB,CAAC,EAAE,KAAK,MAAa;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE,qBAAC,SAAI,WAAU,iBACb;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,6BAAC,UAAO,WAAU,aAChB;AAAA,8BAAC,eAAY,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,YAAY,IAAI;AAAA,UAC9D,oBAAC,kBACE,eAAK,WACF,KAAK,SACF,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EACf,KAAK,EAAE,EACP,YAAY,EACZ,MAAM,GAAG,CAAC,IACb,KACN;AAAA,WACF;AAAA,QACA,oBAAC,UAAK,WAAU,eAAe,eAAK,UAAS;AAAA,SAC/C;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC;AAAA,UACtC;AAAA;AAAA,MAED;AAAA,OACF;AAAA,IACC,aACC,oBAAC,SAAI,WAAU,sCAAqC,oDAEpD;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/profile/change-profile.tsx"],"sourcesContent":["import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  Badge,\n  Button,\n} from '@mesob/ui/components';\nimport { useState } from 'react';\nimport type { User } from '../../types';\n\ntype Props = {\n  user: User;\n};\n\nexport const ChangeProfile = ({ user }: Props) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const initials =\n    user.fullName\n      ?.split(' ')\n      .map((part) => part[0])\n      .join('')\n      .toUpperCase()\n      .slice(0, 2) || 'U';\n\n  return (\n    <div className=\"w-full rounded-[1.5rem] border border-border/60 bg-background/80 p-5 shadow-sm backdrop-blur\">\n      <div className=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n        <div className=\"flex items-center gap-4\">\n          <Avatar className=\"h-14 w-14 ring-4 ring-primary/10\">\n            <AvatarImage src={user.image || ''} alt={user.fullName || ''} />\n            <AvatarFallback>{initials}</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <div className=\"text-base font-semibold\">{user.fullName}</div>\n            <div className=\"flex flex-wrap gap-2 text-xs text-muted-foreground\">\n              <Badge variant=\"outline\">\n                {user.emailVerified ? 'Email verified' : 'Email unverified'}\n              </Badge>\n              <Badge variant=\"outline\">\n                {user.phoneVerified ? 'Phone verified' : 'Phone unverified'}\n              </Badge>\n            </div>\n          </div>\n        </div>\n        <Button\n          variant=\"secondary\"\n          className=\"rounded-full px-5 text-primary hover:text-primary/80\"\n          onClick={() => setIsEditing((v) => !v)}\n        >\n          {isEditing ? 'Hide editor' : 'Update profile'}\n        </Button>\n      </div>\n      {isEditing && (\n        <div className=\"mt-4 rounded-2xl border border-dashed border-border bg-muted/30 px-4 py-3 text-sm text-muted-foreground\">\n          Profile editing is not wired yet. Contact and password flows below are\n          live.\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AAqBf,SACE,KADF;AAdH,IAAM,gBAAgB,CAAC,EAAE,KAAK,MAAa;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,WACJ,KAAK,UACD,MAAM,GAAG,EACV,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,KAAK,EAAE,EACP,YAAY,EACZ,MAAM,GAAG,CAAC,KAAK;AAEpB,SACE,qBAAC,SAAI,WAAU,gGACb;AAAA,yBAAC,SAAI,WAAU,sEACb;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,6BAAC,UAAO,WAAU,oCAChB;AAAA,8BAAC,eAAY,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,YAAY,IAAI;AAAA,UAC9D,oBAAC,kBAAgB,oBAAS;AAAA,WAC5B;AAAA,QACA,qBAAC,SAAI,WAAU,aACb;AAAA,8BAAC,SAAI,WAAU,2BAA2B,eAAK,UAAS;AAAA,UACxD,qBAAC,SAAI,WAAU,sDACb;AAAA,gCAAC,SAAM,SAAQ,WACZ,eAAK,gBAAgB,mBAAmB,oBAC3C;AAAA,YACA,oBAAC,SAAM,SAAQ,WACZ,eAAK,gBAAgB,mBAAmB,oBAC3C;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC;AAAA,UAEpC,sBAAY,gBAAgB;AAAA;AAAA,MAC/B;AAAA,OACF;AAAA,IACC,aACC,oBAAC,SAAI,WAAU,2GAA0G,0FAGzH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/profile/security.js

@@ -1,14 +1,7 @@
 "use client";
 
-// src/components/profile/change-email-form.tsx
-import {
-  Button as Button3,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger
-} from "@mesob/ui/components";
-import { IconChevronDown } from "@tabler/icons-react";
-import { useState as useState5 } from "react";
+// src/components/profile/security.tsx
+import { Badge, Card, CardContent, Separator } from "@mesob/ui/components";
 
 // src/provider.tsx
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -80,6 +73,16 @@ function useConfig() {
   return context;
 }
 
+// src/components/profile/change-email-form.tsx
+import {
+  Button as Button3,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "@mesob/ui/components";
+import { IconChevronDown } from "@tabler/icons-react";
+import { useState as useState5 } from "react";
+
 // src/components/profile/request-change-email-form.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button, Input, Label, Spinner } from "@mesob/ui/components";
@@ -1462,15 +1465,46 @@ function ChangePhoneForm() {
 // src/components/profile/security.tsx
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function Security() {
-  return /* @__PURE__ */ jsxs9("div", { className: "p-6 space-y-6", children: [
-    /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsx12("h1", { className: "text-2xl font-semibold", children: "Security" }),
-      /* @__PURE__ */ jsx12("p", { className: "text-muted-foreground", children: "Manage your security settings" })
+  const { user } = useSession();
+  return /* @__PURE__ */ jsxs9("div", { className: "mx-auto flex w-full max-w-6xl flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "relative overflow-hidden rounded-[2rem] border border-border/60 bg-gradient-to-br from-background via-background to-amber-500/5 p-6 shadow-sm", children: [
+      /* @__PURE__ */ jsx12("div", { className: "absolute left-0 top-0 h-32 w-32 rounded-full bg-primary/10 blur-3xl" }),
+      /* @__PURE__ */ jsxs9("div", { className: "relative flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: "Security center" }),
+          /* @__PURE__ */ jsx12(Badge, { variant: "secondary", children: user?.emailVerified || user?.phoneVerified ? "Recovery methods available" : "Add a recovery method" })
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx12("h1", { className: "text-2xl font-semibold tracking-tight", children: "Security" }),
+          /* @__PURE__ */ jsx12("p", { className: "max-w-2xl text-sm text-muted-foreground", children: "Password, email, and phone updates all live here. Keep recovery channels current so account recovery stays predictable." })
+        ] })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx12(ChangePasswordForm, {}),
-      /* @__PURE__ */ jsx12(ChangeEmailForm, {}),
-      /* @__PURE__ */ jsx12(ChangePhoneForm, {})
+    /* @__PURE__ */ jsxs9("div", { className: "grid gap-4 lg:grid-cols-[0.85fr_1.4fr]", children: [
+      /* @__PURE__ */ jsx12(Card, { className: "rounded-[1.75rem] border-border/60 shadow-sm", children: /* @__PURE__ */ jsxs9(CardContent, { className: "space-y-5 p-6", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx12("div", { className: "text-sm font-medium text-muted-foreground", children: "Verification state" }),
+          /* @__PURE__ */ jsx12("div", { className: "text-lg font-semibold", children: "Recovery readiness" })
+        ] }),
+        /* @__PURE__ */ jsx12(Separator, {}),
+        /* @__PURE__ */ jsxs9("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "rounded-2xl border border-border/60 bg-muted/20 p-4", children: [
+            /* @__PURE__ */ jsx12("div", { className: "text-sm font-medium", children: "Email" }),
+            /* @__PURE__ */ jsx12("div", { className: "mt-1 text-sm text-muted-foreground", children: user?.email ?? "No email added" }),
+            /* @__PURE__ */ jsx12("div", { className: "mt-3", children: /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: user?.emailVerified ? "Verified" : "Unverified" }) })
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { className: "rounded-2xl border border-border/60 bg-muted/20 p-4", children: [
+            /* @__PURE__ */ jsx12("div", { className: "text-sm font-medium", children: "Phone" }),
+            /* @__PURE__ */ jsx12("div", { className: "mt-1 text-sm text-muted-foreground", children: user?.phone ?? "No phone added" }),
+            /* @__PURE__ */ jsx12("div", { className: "mt-3", children: /* @__PURE__ */ jsx12(Badge, { variant: "outline", children: user?.phoneVerified ? "Verified" : "Unverified" }) })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx12(ChangePasswordForm, {}),
+        /* @__PURE__ */ jsx12(ChangeEmailForm, {}),
+        /* @__PURE__ */ jsx12(ChangePhoneForm, {})
+      ] })
     ] })
   ] });
 }